warn card

src/components/WarnCard.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="warn_card_container">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      fill="none"
+      version="1.1"
+      width="42"
+      height="42"
+      viewBox="0 0 42 42"
+    >
+      <g>
+        <g>
+          <ellipse
+            cx="21"
+            cy="21"
+            rx="21"
+            ry="21"
+            fill="#FFFFFF"
+            fill-opacity="1"
+          />
+        </g>
+        <g>
+          <path
+            d="M18.57422,25.2273L22.71094,25.2273L23.648400000000002,13.063189999999999L23.8594,7.33272L17.41406,7.33272L17.63672,13.063189999999999L18.57422,25.2273ZM20.625,35.446C22.85156,35.446,24.4336,33.688199999999995,24.4336,31.4499C24.4336,29.2233,22.85156,27.5007,20.625,27.5007C18.42188,27.5007,16.83984,29.2233,16.83984,31.4499C16.83984,33.688199999999995,18.42188,35.446,20.625,35.446Z"
+            fill="#48597A"
+            fill-opacity="1"
+          />
+        </g>
+      </g>
+    </svg>
+    <div class="info_wrap">
+      <div class="time">
+        <p class="date">2023-06-01</p>
+        <p>12:20:02</p>
+      </div>
+      <p>正在使用电池1供电</p>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.warn_card_container {
+  margin-top: 10px;
+  background: rgba(216, 216, 216, 0.4);
+  width: 400px;
+  height: 66px;
+  border-radius: 12px;
+  box-sizing: border-box;
+  padding: 12px 13px;
+  display: flex;
+  align-items: center;
+  .info_wrap {
+    margin-left: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0.05em;
+    color: #ffffff;
+    .time {
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 24px;
+      letter-spacing: 0em;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      .date {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+</style>

src/pages/Home.vue

@@ -160,7 +160,16 @@
                 </g>
               </g>
             </svg>
-            <div class="battery_info_box"></div>
+            <div class="battery_info_box">
+              <div class="left_battery"></div>
+              <div class="line"></div>
+              <div class="right_info">
+                <div>预计可用: <span class="ok_color">1小时30分钟</span></div>
+                <div>
+                  <span class="danger_color">电池2已损坏</span>请尽快检查
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -268,7 +277,13 @@
         </div>
         <div class="warn_info_box">
           <div class="warn_card_header">历史报警信息</div>
-          <div class="info_card_list"></div>
+          <div class="info_card_list">
+            <WarnCard />
+            <WarnCard />
+            <WarnCard />
+            <WarnCard />
+            <WarnCard />
+          </div>
         </div>
       </div>
     </div>
@@ -279,6 +294,7 @@
 import Header from 'cpns/Header'
 import BigCard from 'cpns/BigCard'
 import SmallCard from 'cpns/SmallCard'
+import WarnCard from 'cpns/WarnCard'
 </script>
 
 <style lang="scss" scoped>
@@ -344,6 +360,39 @@ import SmallCard from 'cpns/SmallCard'
             background: #233861;
             overflow: hidden;
             margin-left: 28.59px;
+            padding: 10px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            .left_battery {
+              flex: 1;
+            }
+            .line {
+              width: 2px;
+              height: 66px;
+              border-radius: 100px;
+              background: #354b76;
+              margin: 0 10px;
+            }
+            .right_info {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 18px;
+              font-weight: bold;
+              letter-spacing: 0.05em;
+              color: #ffffff;
+              height: 100%;
+              padding: 10px 0;
+              box-sizing: border-box;
+              .ok_color {
+                color: #15d0a1;
+              }
+              .danger_color {
+                color: #ff0000;
+              }
+            }
           }
         }
       }
@@ -398,7 +447,8 @@ import SmallCard from 'cpns/SmallCard'
         }
         .info_card_list {
           flex: 1;
-          padding: 10px;
+          padding: 0 10px;
+          padding-bottom: 10px;
           box-sizing: border-box;
         }
       }