battery

src/components/Battery.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="battery_container">
+    <div class="battery_number">
+      <p>电池</p>
+      <div class="number">1</div>
+    </div>
+    <p class="rate">100%</p>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      version="1.1"
+      width="46.12744140625"
+      height="23.73828125"
+      viewBox="0 0 46.12744140625 23.73828125"
+    >
+      <g>
+        <g>
+          <path
+            d="M44.0306,7.91283L44.0306,3.95641C44.0306,1.78039,42.1436,0.0000018111,39.8372,0.0000018111L4.19339,0C1.88702,0,0,1.78039,0,3.95641L0,19.7821C0,21.9581,1.88703,23.7385,4.19339,23.7385L39.8372,23.7385C42.1436,23.7385,44.0306,21.9581,44.0306,19.7821L44.0306,15.8256C45.1838,15.8256,46.1273,14.9355,46.1273,13.8474L46.1273,11.8692L46.1273,9.89103C46.1273,8.80302,45.1838,7.91283,44.0306,7.91283ZM43.0028,9.89106L43.0028,13.8474L43.0028,19.782C43.0028,21.5483,41.7031,22.7777,39.8372,22.7777Q6.05921,22.7777,4.19337,22.7777C2.32752,22.7777,1.02775,21.5483,1.02775,19.782L1.02775,3.9564C1.02775,2.19013,2.32752,0.960857,4.19337,0.960857L39.8372,0.960857C41.7031,0.960857,43.0028,2.19013,43.0028,3.9564L43.0028,9.89106Z"
+            fill="#15D0A1"
+            fill-opacity="1"
+          />
+        </g>
+        <g>
+          <path
+            d="M3,19C3,20.1046,3.895431,21,5,21L39,21C40.1046,21,41,20.1046,41,19L41,5C41,3.895431,40.1046,3,39,3L5,3C3.895431,3,3,3.895431,3,5L3,19Z"
+            fill="#15D0A1"
+            fill-opacity="1"
+          />
+        </g>
+      </g>
+    </svg>
+    <p class="status_text">使用中</p>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.battery_container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .battery_number {
+    width: 80px;
+    height: 34px;
+    border-radius: 8px;
+    background: #15d0a1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 20px;
+    color: #ffffff;
+    .number {
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      background: #51d9b5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-weight: bold;
+      color: #ffffff;
+      margin-left: 3px;
+    }
+  }
+  .rate {
+    font-size: 26px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .status_text {
+    font-size: 18px;
+    font-weight: bold;
+    color: #15d0a1;
+  }
+}
+</style>

src/pages/Home.vue

@@ -161,7 +161,10 @@
               </g>
             </svg>
             <div class="battery_info_box">
-              <div class="left_battery"></div>
+              <div class="left_battery">
+                <Battery />
+                <Battery />
+              </div>
               <div class="line"></div>
               <div class="right_info">
                 <div>预计可用: <span class="ok_color">1小时30分钟</span></div>
@@ -295,6 +298,7 @@ import Header from 'cpns/Header'
 import BigCard from 'cpns/BigCard'
 import SmallCard from 'cpns/SmallCard'
 import WarnCard from 'cpns/WarnCard'
+import Battery from 'cpns/Battery'
 </script>
 
 <style lang="scss" scoped>
@@ -366,6 +370,10 @@ import WarnCard from 'cpns/WarnCard'
             align-items: center;
             .left_battery {
               flex: 1;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
             }
             .line {
               width: 2px;