电量图片

src/pages/shells/index.vue

@@ -8,10 +8,10 @@
         <el-row type="flex" justify="end" align="middle">
           <div class="state-item">自动模式</div>
           <div class="state-item">执行中</div>
-          <div class="relative elec-qty-wrap">
+          <div class="relative elec-qty-wrap elec-wraning">
-            <div class="absolute elec-qty elec-qty_s" style="width: 100%"></div>
+            <div class="absolute elec-qty" style="width: 62%"></div>
-            <div class="absolute zbox elec-qty_border"></div>
+            <div class="absolute elec-qty-border"></div>
-            <div class="elec-txt">100%</div>
+            <div class="elec-txt">38%</div>
           </div>
           <i class="el-icon-user-solid icon-user" :style="{'color': isUsed ? '#00ff29' : '#737f92'}" @click="loginModalHandle"></i>
           <i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
@@ -122,24 +122,29 @@ export default {
   margin-right .04rem
   background center / 100% 100% url(../../images/new/state-item_bg.png) no-repeat
 .elec-qty-wrap
-  _wh(.5rem, .28rem)
+  _wh(.5rem, .25rem)
   margin-right .04rem
+  background center / 100% 100% url(../../images/new/elec.png) no-repeat
+  border 1px solid #5ADFBC
   z-index 151
 .elec-qty
+  right 0
   z-index 152
-  _wh(0, 100%)
+  height 100%
-  background-color green
+  background-color #0d2d59
-  background left top url(../../images/new/elec.png) no-repeat
+.elec-qty-border
-  background-size cover
+  _wh(100%, 100%)
-.elec-qty_s
-  background-image url(../../images/new/elec.png)
-.elec-qty_border
   z-index 152
-  background center / 100% 100% url(../../images/new/elec_bg.png) no-repeat
+  box-shadow inset 0px 0px 4px 2px rgba(90, 223, 188, 70%)
+.elec-wraning
+  border-color #ffe600
+  background center / 100% 100% url(../../images/new/elec_y.png) no-repeat
+  .elec-qty-border
+    box-shadow inset 0px 0px 4px 2px rgba(192, 176, 28, 70%)
 .elec-txt
   position relative
   z-index 153
-  _font(.15rem, .28rem, #fff,,center)
+  _font(.15rem, .25rem, #fff,,center)
   font-family 'Adobe Heiti Std'
 .icon-user
   font-size .24rem