small card

src/components/SmallCard.vue

@@ -1,10 +1,27 @@
 <template>
-  <div class="small_card_container"></div>
+  <div class="small_card_container">
+    <h1 class="title">膜前压（mmHg）</h1>
+    <div class="number">400</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>
+<style lang="scss" scoped>
 .small_card_container {
   width: 253.33px;
   height: 208px;
@@ -12,5 +29,76 @@
   overflow: hidden;
   background: #f3f3f3;
   box-sizing: border-box;
+  padding: 15px 20px 9px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .title {
+    font-size: 22px;
+    font-weight: 500;
+    color: #3d3d3d;
+    width: 100%;
+  }
+  .number {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 68px;
+    font-weight: bold;
+    color: #105cdb;
+  }
+  .process_wrap {
+    width: 100%;
+    .progress_wrap {
+      width: 100%;
+      height: 8px;
+      border-radius: 18px;
+      background: #d8d8d8;
+      position: relative;
+      .dot1 {
+        position: absolute;
+        left: 64.49px;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #ff8c00;
+        z-index: 99;
+      }
+      .dot2 {
+        position: absolute;
+        right: 43.6px;
+        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: #105cdb;
+      }
+    }
+    .scale {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 18px;
+      font-weight: bold;
+      color: #3d3d3d;
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: 4px;
+    }
+  }
 }
 </style>