From 1fea3f32154dd32f1624074243c4405b7c67035f Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 8 Jun 2023 14:35:49 +0800
Subject: [PATCH] big card

---
 src/components/BigCard.vue | 139 ++++++++++++++++++++++++++++++++++++++++++++-
 src/pages/Home.vue         | 109 ++++++++++++++++++++++++++++++++++-
 2 files changed, 245 insertions(+), 3 deletions(-)

diff --git a/src/components/BigCard.vue b/src/components/BigCard.vue
index f1f0bf3..6252574 100644
--- a/src/components/BigCard.vue
+++ b/src/components/BigCard.vue
@@ -1,8 +1,64 @@
 <template>
-  <div class="big_card_container">bigcard</div>
+  <div class="big_card_container">
+    <div class="title_wrap">
+      <h1>流量（L/min）</h1>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="34.42768096923828"
+        height="39.86444854736328"
+        viewBox="0 0 34.42768096923828 39.86444854736328"
+      >
+        <defs>
+          <clipPath id="master_svg0_96_11046">
+            <rect
+              x="0"
+              y="0"
+              width="34.42768096923828"
+              height="39.86444854736328"
+              rx="17.21384048461914"
+            />
+          </clipPath>
+        </defs>
+        <g clip-path="url(#master_svg0_96_11046)">
+          <g>
+            <path
+              d="M5.126973125,26.901193359375C6.5094731249999995,30.582193359375,9.211633124999999,33.501993359375,12.618203125,34.995893359375C15.901753125,36.424993359375,19.569853125,36.424993359375,22.853453125,34.995893359375C27.985253125,32.745593359375,31.342553125,27.357393359375,31.342553125,21.371293359375C31.343353125,17.471493359375,29.910353125,13.731093359375,27.358753125,10.973133359375L19.754153125000002,2.804913359375C19.484853125,2.512273359375,19.163353125,2.281645359375,18.809253124999998,2.126951359375C18.121453125000002,1.821940859375,17.350153125,1.821940859375,16.662453125,2.126951359375C16.308253125,2.281645359375,15.986853125,2.512273359375,15.717553125,2.804913359375L13.812573125,4.814293359375C13.221823125,5.452623359375,13.221823125,6.487573359375,13.812573125,7.125903359375C14.403353125,7.764233359375,15.361053125,7.764233359375,15.951853125,7.125903359375L17.735853125,5.198203359375L25.219553125,13.284693359375C29.352953125,17.750693359375,29.352953125,24.991893359375,25.219553125,29.457793359375C24.223253125,30.548793359375,23.032653125,31.410193359375,21.719553125,31.989993359375C19.165153125,33.111493359375004,16.306553125,33.111493359375004,13.752103125,31.989993359375C12.439043125,31.410193359375,11.248413124999999,30.548793359375,10.252153125,29.457793359375C6.118733125,24.991893359375,6.118733125,17.750693359375,10.252153125,13.284693359375L12.157093125,11.234523359375C12.747833125,10.596183359375,12.747833125,9.561243359375,12.157093125,8.922913359375C11.566353125,8.284583359374999,10.608563125,8.284583359374999,10.017823125,8.922913359375L8.112883125,10.973133359375C4.245717125,15.151593359375,3.069533125,21.425893359375,5.126973125,26.901193359375Z"
+              fill="#15D0A1"
+              fill-opacity="1"
+            />
+          </g>
+          <g>
+            <path
+              d="M18.28011328125,28.474333515625C17.478471281250002,28.474333515625,16.82861328125,27.794413515625,16.82861328125,26.955683515625C16.82861328125,26.116963515625,17.478471281250002,25.437043515625,18.28011328125,25.437043515625C19.88339328125,25.437043515625,21.18310328125,24.077193515624998,21.18310328125,22.399753515625C21.18310328125,21.561023515625,21.83296328125,20.881103515625,22.63460328125,20.881103515625C23.43624328125,20.881103515625,24.08609328125,21.561023515625,24.08609328125,22.399753515625C24.08609328125,25.754643515625,21.48667328125,28.474333515625,18.28011328125,28.474333515625Z"
+              fill="#15D0A1"
+              fill-opacity="1"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="number">3.50</div>
+    <div class="process_wrap">
+      <div class="progress_wrap">
+        <div class="dot1"></div>
+        <div class="dot2"></div>
+        <div class="progress" :style="{ width: progress + '%' }"></div>
+      </div>
+      <div class="scale">
+        <p>0</p>
+        <p>10</p>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+const progress = ref(40)
+</script>
 
 <style lang="scss" scoped>
 .big_card_container {
@@ -12,5 +68,84 @@
   background: #fff;
   box-sizing: border-box;
   overflow: hidden;
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .title_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 36px;
+    font-weight: 500;
+    letter-spacing: 0em;
+    color: #3d3d3d;
+    width: 100%;
+  }
+  .number {
+    flex: 1;
+    font-size: 120px;
+    font-weight: bold;
+    text-align: right;
+    letter-spacing: 0em;
+    color: #15d0a1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .process_wrap {
+    width: 100%;
+    .progress_wrap {
+      width: 100%;
+      height: 8px;
+      border-radius: 18px;
+      background: #d8d8d8;
+      position: relative;
+      .dot1 {
+        position: absolute;
+        left: 78px;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #ff8c00;
+        z-index: 99;
+      }
+      .dot2 {
+        position: absolute;
+        right: 58px;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #ff8c00;
+        z-index: 99;
+      }
+      .progress {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        border-radius: 18px;
+        background: #15d0a1;
+      }
+    }
+    .scale {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 24px;
+      font-weight: bold;
+      letter-spacing: 0em;
+      color: #3d3d3d;
+      padding: 0 2px;
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: 8px;
+    }
+  }
 }
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index f64d106..0a584bc 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -13,7 +13,111 @@
           <SmallCard />
         </div>
         <div class="three_line_box">
-          <div class="bubble_box"></div>
+          <div class="bubble_box">
+            <div class="bubble_wrap">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                fill="none"
+                version="1.1"
+                width="96"
+                height="96"
+                viewBox="0 0 96 96"
+              >
+                <defs>
+                  <clipPath id="master_svg0_96_11184">
+                    <rect x="0" y="0" width="96" height="96" rx="0" />
+                  </clipPath>
+                </defs>
+                <g clip-path="url(#master_svg0_96_11184)">
+                  <g>
+                    <path
+                      d="M63,24C63,25.59131,63.632142,27.11742,64.75736,28.2426C65.88258,29.367800000000003,67.40869,30,69,30C70.59131,30,72.11742,29.367800000000003,73.2426,28.2426C74.3678,27.11742,75,25.59131,75,24C75,22.40869,74.3678,20.88258,73.2426,19.75736C72.11742,18.632142,70.59131,18.000000000000004,69,18C67.40869,18.000000000000004,65.88258,18.632142,64.75736,19.75736C63.632142,20.88258,63,22.40869,63,24C63,24,63,24,63,24Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M69,48C69,49.59131,69.632142,51.117419999999996,70.75736,52.242599999999996C71.88258,53.3678,73.40869,54,75,54C76.59131,54,78.11742,53.3678,79.2426,52.242599999999996C80.3678,51.117419999999996,81,49.59131,81,48C81,46.40869,80.3678,44.88258,79.2426,43.75736C78.11742,42.632142,76.59131,42,75,42C73.40869,42,71.88258,42.632142,70.75736,43.75736C69.632142,44.88258,69,46.40869,69,48C69,48,69,48,69,48Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M39,55.5C38.9999999709423,56.8789,39.27159,58.2443,39.799263,59.5182C40.32694,60.7921,41.10037,61.949600000000004,42.07538,62.9246C43.05039,63.8996,44.20789,64.6731,45.48181,65.2007C46.75573,65.7284,48.12111,66,49.5,66C50.8789,66,52.2443,65.7284,53.5182,65.2007C54.7921,64.6731,55.949600000000004,63.8996,56.9246,62.9246C57.8996,61.949600000000004,58.673100000000005,60.7921,59.2007,59.5182C59.7284,58.2443,60,56.8789,60,55.5C60,54.12111,59.7284,52.75573,59.2007,51.48181C58.673100000000005,50.20789,57.8996,49.05039,56.9246,48.07538C55.949600000000004,47.10036,54.7921,46.32694,53.5182,45.799263C52.2443,45.27159,50.8789,45,49.5,45C48.12111,45,46.75573,45.27159,45.48181,45.799263C44.20789,46.32694,43.05039,47.10036,42.07538,48.07538C41.10037,49.05039,40.32694,50.20789,39.799263,51.48181C39.27159,52.75573,38.9999999709423,54.12111,39,55.5C39,55.5,39,55.5,39,55.5Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M60,78C60,79.59131,60.632142,81.11742,61.75736,82.2426C62.88258,83.3678,64.40869,84,66,84C67.59131,84,69.11742,83.3678,70.2426,82.2426C71.3678,81.11742,72,79.59131,72,78C72,76.40869,71.3678,74.88258,70.2426,73.75736C69.11742,72.632142,67.59131,72,66,72C64.40869,72,62.88258,72.632142,61.75736,73.75736C60.632142,74.88258,60,76.40869,60,78C60,78,60,78,60,78Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M78,66C78,66.79566,78.316068,67.55871,78.878677,68.1213C79.44129,68.68394,80.20435,69,81,69C81.79566,69,82.55871,68.68394,83.1213,68.1213C83.68394,67.55871,84,66.79566,84,66C84,65.20435,83.68394,64.44129,83.1213,63.878677C82.55871,63.316068,81.79566,63,81,63C80.20435,63,79.44129,63.316068,78.878677,63.878677C78.316068,64.44129,78,65.20435,78,66C78,66,78,66,78,66Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M18,73.5C18.000000000000004,75.48912,18.790176,77.3968,20.1967,78.80330000000001C21.60322,80.2098,23.51088,81,25.5,81C27.48912,81,29.3968,80.2098,30.8033,78.80330000000001C32.2098,77.3968,33,75.48912,33,73.5C33,71.51088,32.2098,69.60322,30.8033,68.19669999999999C29.3968,66.790176,27.48912,66,25.5,66C23.51088,66,21.60322,66.790176,20.1967,68.19669999999999C18.790176,69.60322,18.000000000000004,71.51088,18,73.5C18,73.5,18,73.5,18,73.5Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M12,51C12.000000000000004,52.59131,12.632142,54.117419999999996,13.75736,55.242599999999996C14.88258,56.3678,16.40869,57,18,57C19.59131,57,21.11742,56.3678,22.2426,55.242599999999996C23.3679,54.117419999999996,24,52.59131,24,51C24,49.40869,23.3679,47.88258,22.2426,46.75736C21.11742,45.632142,19.59131,45,18,45C16.40869,45,14.88258,45.632142,13.75736,46.75736C12.632142,47.88258,12.000000000000005,49.40869,12,51C12,51,12,51,12,51Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M27,34.5C27.000000000000004,36.48912,27.790176,38.3968,29.1967,39.8033C30.60322,41.2098,32.51088,42,34.5,42C36.48912,42,38.3968,41.2098,39.8033,39.8033C41.2098,38.3968,42,36.48912,42,34.5C42,32.51088,41.2098,30.60322,39.8033,29.1967C38.3968,27.790176,36.48912,27,34.5,27C32.51088,27,30.60322,27.790176,29.1967,29.1967C27.790176,30.60322,27,32.51088,27,34.5C27,34.5,27,34.5,27,34.5Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M15,22.5C15,23.693469999999998,15.474103,24.838079999999998,16.31802,25.68199C17.161929999999998,26.52591,18.30652,27,19.5,27C20.693469999999998,27,21.838079999999998,26.52591,22.68199,25.68199C23.52591,24.838079999999998,24,23.693469999999998,24,22.5C24,21.30652,23.52591,20.161929999999998,22.68199,19.31802C21.838079999999998,18.474103,20.693469999999998,18,19.5,18C18.30652,18,17.161929999999998,18.474103,16.31802,19.31802C15.474103,20.161929999999998,15,21.30652,15,22.5C15,22.5,15,22.5,15,22.5Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M45,16.5C45.00000000000001,17.693469999999998,45.474103,18.838079999999998,46.31802,19.68199C47.16193,20.52591,48.30652,21,49.5,21C50.69347,21,51.83808,20.52591,52.68199,19.68199C53.525909999999996,18.838079999999998,54,17.693469999999998,54,16.5C54,15.306519999999999,53.525909999999996,14.16193,52.68199,13.31802C51.83808,12.474103,50.69347,12,49.5,12C48.30652,12,47.16193,12.474103,46.31802,13.31802C45.474103,14.16193,45.00000000000001,15.306519999999999,45,16.5C45,16.5,45,16.5,45,16.5Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M42,76.5C42,77.69347,42.474103,78.83808,43.31802,79.68199C44.16193,80.52591,45.30652,81,46.5,81C47.69347,81,48.83808,80.52591,49.68199,79.68199C50.525909999999996,78.83808,51,77.69347,51,76.5C51,75.30652,50.525909999999996,74.16194,49.68199,73.31802C48.83808,72.474107,47.69347,72,46.5,72C45.30652,72,44.16193,72.474107,43.31802,73.31802C42.474103,74.16194,42.00000000000001,75.30652,42,76.5C42,76.5,42,76.5,42,76.5Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                  <g>
+                    <path
+                      d="M51,34.5C51,35.69347,51.474107,36.83808,52.31802,37.68199C53.16194,38.525909999999996,54.30652,39,55.5,39C56.69347,39,57.83808,38.525909999999996,58.68199,37.68199C59.525909999999996,36.83808,60,35.69347,60,34.5C60,33.30652,59.525909999999996,32.16193,58.68199,31.31802C57.83808,30.474103,56.69347,30.000000000000004,55.5,30C54.30652,30.000000000000004,53.16194,30.474103,52.31802,31.31802C51.474107,32.16193,51,33.30652,51,34.5C51,34.5,51,34.5,51,34.5Z"
+                      fill="#105CDB"
+                      fill-opacity="1"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </div>
+          </div>
           <div class="battery_status_box">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -220,6 +324,9 @@ import SmallCard from 'cpns/SmallCard'
           display: flex;
           align-items: center;
           justify-content: center;
+          .bubble_wrap {
+            border: dashed 1px #e0e0e0;
+          }
         }
         .battery_status_box {
           flex: 1;