From db420c05b62e32ce1e8d8d9adecb7dd24ae159e1 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 8 Jun 2023 14:01:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E4=BD=93=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BigCard.vue   |  16 +++++++
 src/components/Header.vue    |   2 +
 src/components/SmallCard.vue |  16 +++++++
 src/pages/Home.vue           | 106 ++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 src/components/BigCard.vue
 create mode 100644 src/components/SmallCard.vue

diff --git a/src/components/BigCard.vue b/src/components/BigCard.vue
new file mode 100644
index 0000000..f1f0bf3
--- /dev/null
+++ b/src/components/BigCard.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="big_card_container">bigcard</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.big_card_container {
+  width: 390px;
+  height: 306px;
+  border-radius: 18px;
+  background: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index c1d72d1..0aff6c9 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -85,6 +85,8 @@
   align-items: center;
   padding: 12px 31px 10px 11px;
   background: #534a40;
+  box-sizing: border-box;
+  max-height: 70px;
   .info_box {
     display: flex;
     align-items: center;
diff --git a/src/components/SmallCard.vue b/src/components/SmallCard.vue
new file mode 100644
index 0000000..4acab40
--- /dev/null
+++ b/src/components/SmallCard.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="small_card_container"></div>
+</template>
+
+<script setup></script>
+
+<style>
+.small_card_container {
+  width: 253.33px;
+  height: 208px;
+  border-radius: 18px;
+  overflow: hidden;
+  background: #f3f3f3;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 1ee7a66..f64d106 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -2,7 +2,64 @@
   <div class="home_container">
     <Header />
     <div class="content_container">
-      <div class="left_container"></div>
+      <div class="left_container">
+        <div class="one_line_box">
+          <BigCard />
+          <BigCard />
+        </div>
+        <div class="two_line_box">
+          <SmallCard />
+          <SmallCard />
+          <SmallCard />
+        </div>
+        <div class="three_line_box">
+          <div class="bubble_box"></div>
+          <div class="battery_status_box">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              fill="none"
+              version="1.1"
+              width="58.408203125"
+              height="79.291015625"
+              viewBox="0 0 58.408203125 79.291015625"
+            >
+              <g>
+                <g>
+                  <path
+                    d="M24.864,44.24L0,44.24L0,9.8L24.808,9.8L24.808,44.24L24.864,44.24ZM5.208,39.032L19.656,39.032L19.656,15.008L5.208,15.008L5.208,39.032ZM1.008,0L23.912,0L23.912,5.208L1.008,5.208L1.008,0Z"
+                    fill="#FFFFFF"
+                    fill-opacity="1"
+                  />
+                </g>
+                <g>
+                  <path
+                    d="M55.720015625,47.985296875C54.264015625,47.985296875,53.144015625,46.809296875,53.144015625,45.409296875L53.144015625,25.025296875000002C53.144015625,20.433296875,49.392015625,16.737296875,44.856015625,16.737296875C40.320015624999996,16.737296875,36.568015625,20.489296875,36.568015625,25.025296875000002L36.568015625,45.353296875C36.568015625,46.809296875,35.392015625,47.929296875,33.992015625,47.929296875C32.536015625,47.929296875,31.416015625,46.753296875,31.416015625,45.353296875L31.416015625,25.025296875000002C31.416015625,17.577296875000002,37.464015625,11.529296875,44.912015625,11.529296875C52.360015625,11.529296875,58.408015625000004,17.577296875000002,58.408015625000004,25.025296875000002L58.408015625000004,45.353296875C58.296015624999995,46.809296875,57.176015625000005,47.985296875,55.720015625,47.985296875Z"
+                    fill="#FFFFFF"
+                    fill-opacity="1"
+                  />
+                </g>
+                <g>
+                  <path
+                    d="M23.016019531250002,77.616796875C15.56801953125,77.616796875,9.52001953125,71.568796875,9.52001953125,64.120796875L9.52001953125,43.792796875C9.52001953125,42.336796875,10.69601953125,41.216796875,12.09601953125,41.216796875C13.496019531249999,41.216796875,14.672019531250001,42.392796875,14.672019531250001,43.792796875L14.672019531250001,64.120796875C14.672019531250001,68.712796875,18.42401953125,72.40879687500001,22.960019531249998,72.40879687500001C27.49601953125,72.40879687500001,31.24801953125,68.656796875,31.24801953125,64.120796875L31.24801953125,43.792796875C31.24801953125,42.336796875,32.424019531249996,41.216796875,33.82401953125,41.216796875C35.22401953125,41.216796875,36.400019531249995,42.392796875,36.400019531249995,43.792796875L36.400019531249995,64.120796875C36.512019531250004,71.568796875,30.46401953125,77.616796875,23.016019531250002,77.616796875Z"
+                    fill="#FFFFFF"
+                    fill-opacity="1"
+                  />
+                </g>
+                <g>
+                  <path
+                    d="M51.2973375,38.791985L2.7973815,79.292025L0.8744935,76.989225L49.3745375,36.489265L51.2973375,38.791985Z"
+                    fill-rule="evenodd"
+                    fill="#FFFFFF"
+                    fill-opacity="1"
+                  />
+                </g>
+              </g>
+            </svg>
+            <div class="battery_info_box"></div>
+          </div>
+        </div>
+      </div>
       <div class="right_container">
         <div class="pattern_box">
           <div class="pattern">
@@ -116,6 +173,8 @@
 
 <script setup>
 import Header from 'cpns/Header'
+import BigCard from 'cpns/BigCard'
+import SmallCard from 'cpns/SmallCard'
 </script>
 
 <style lang="scss" scoped>
@@ -136,6 +195,51 @@ import Header from 'cpns/Header'
     .left_container {
       flex: 1;
       height: 100%;
+      .one_line_box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .two_line_box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .three_line_box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .bubble_box {
+          width: 136px;
+          height: 136px;
+          border-radius: 18px;
+          background: #f3f3f3;
+          margin-right: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .battery_status_box {
+          flex: 1;
+          height: 136px;
+          border-radius: 18px;
+          background: #3f4f6f;
+          box-sizing: border-box;
+          padding: 20px 18px 20px 29px;
+          display: flex;
+          align-items: center;
+          .battery_info_box {
+            flex: 1;
+            height: 96px;
+            border-radius: 12px;
+            background: #233861;
+            overflow: hidden;
+            margin-left: 28.59px;
+          }
+        }
+      }
     }
     .right_container {
       width: 420px;