diff --git a/components/custom-battery/custom-battery.vue b/components/custom-battery/custom-battery.vue
index 66eda5e..c7ba5a8 100644
--- a/components/custom-battery/custom-battery.vue
+++ b/components/custom-battery/custom-battery.vue
@@ -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 {