novelAD/pages/tools/yiJianShengDian.vue

<template>
	<view class="content">
		<view class="box1">
			<view class="text-24 mgb-20">
				剩余电量
			</view>
			<view class="text-52 text-2283ee">
				{{ powerNum }}%
			</view>
			<view class="mgt-16 text-20 text-666">
				预计可用3小时0分钟
			</view>
			<view class="btn cursor" @click="savePower">
				立即省电 ▶
			</view>
		</view>
		<view class="box2">
			<view class="title">能耗分析</view>
			<view class="statistics">
				
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
const powerNum = ref(90)
uni.getBatteryInfo({
  success: (res) => {
	  powerNum.value = res.level
  },
  fail:(err)=>{
  	console.log('err',err)
  }
})
// 立即省电
const savePower = ()=>{
	
}
// onShow(()=>{
	
// })
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
		padding: 28rpx;
		.box1{
			width: 100%;
			height: 300rpx;
			padding: 40rpx 30rpx 10rpx;
			border-radius: 30rpx;
			background: url('/static/image/index_banner.jpg') no-repeat;
			background-size: cover;
			position: relative;
			.btn{
				position: absolute;
				transform: translate(30%,0%);
				bottom: 10rpx;
				width: 400rpx;
				height: 68rpx;
				line-height: 68rpx;
				border-radius: 60rpx;
				text-align: center;
				color: #fff;
				background: linear-gradient(90deg, #03fedf, #2ed9fb);
			}
		}
		.box2{
			background-color: rgba(255,255,255,.6);
			margin-top: 40rpx;
			height: 500rpx;
			border-radius: 30rpx;
		}
	}
</style>