当前位置：首页 > news >正文

UNI-APP设计电池电量显示

news 2026/6/23 3:46:10

 1 <template>
 2 
 3         <view class="agv-footer">
 4             <view class="battery-info">
 5                 <view class="battery-icon">
 6                     <view class="battery-body">
 7                         <view class="battery-level"
 8                             :style="{ width: batteryLevel + '%', backgroundColor: batteryColor }"></view>
 9                     </view>
10                     <view class="battery-head"></view>
11                 </view>
12                 <text :style="{ color: batteryColor }">{{ batteryLevel }}%</text>
13             </view>
14 
15 
16     </view>
17 </template>

 1         .agv-footer {
 2             display: flex;
 3             justify-content: space-between;
 4             align-items: center;
 5             margin-top: 12px;
 6             padding-top: 12px;
 7             border-top: 1px solid #eee;
 8 
 9             .battery-info {
10                 display: flex;
11                 align-items: center;
12 
13                 .battery-icon {
14                     display: flex;
15                     align-items: center;
16                     margin-right: 8px;
17 
18                     .battery-body {
19                         width: 40px;
20                         height: 20px;
21                         border: 1px solid #ddd;
22                         border-radius: 3px;
23                         position: relative;
24                         overflow: hidden;
25 
26                         .battery-level {
27                             height: 100%;
28                             transition: width 0.5s ease;
29                         }
30                     }
31 
32                     .battery-head {
33                         width: 4px;
34                         height: 8px;
35                         background-color: #ddd;
36                         border-radius: 0 2px 2px 0;
37                     }
38                 }
39             }