JSY/jsy-app
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Iruka 2025-01-20 16:17:43 +08:00
parent 126e6ac934
commit 7ed3569959
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/custom-battery/custom-battery.vue
View File

@ -1,8 +1,15 @@
<template>
<view class="battery-container">
<view class="battery-container" v-if="online">
<text v-if="showValue">{{ value }} </text>
<view v-if="online" :style="[`width:${value}%`]" :class="['battery-level', charging ? 'charging' : '']" />
<view v-else :style="[`width:${value}%`,'background-color: #aaa;']" class="battery-level" />
<view :style="[`width:${value}%`]" :class="['battery-level','battery-level-red ', charging ? 'charging' : '']"
v-if="Number(value) <= 70" />
<view :style="[`width:${value}%`]" :class="['battery-level','battery-level-yellow', charging ? 'charging' : '']"
v-else-if="Number(value) <= 90" />
<view :style="[`width:${value}%`]" :class="['battery-level', charging ? 'charging' : '']" v-else />
</view>
<view class="battery-container" v-else>
<text v-if="showValue">{{ value }} </text>
<view :style="[`width:${value}%`,'background-color: #aaa;']" class="battery-level" />
</view>
</template>
@ -89,6 +96,15 @@
transition: width 0.5s;
}
.battery-level-red {
background-color: #f56c6c;
}
.battery-level-yellow {
background-color: #e6a23c;
}
// 充电动画
@keyframes chargingWidth {
from {