体检数据

src/assets/less/index.less

@@ -18,10 +18,10 @@
       position: absolute;
       display: block;
       width: 70%;
-      left: 10px;
+      left: 8px;
       bottom: -14px;
       height: 8px;
-      background: url("../../assets/light.png") no-repeat;
+      background: url("../images/light.png") no-repeat;
       background-size: 100% 100%;
     }
   }

src/components/body-d-left/oneL.vue

@@ -64,9 +64,11 @@ function handleSelect(index:number){
     .server-container{
       color: #A3A4A4;
       padding-top: 4%;
+      height: 88%;
+      display: grid;
+      align-items: start;
       .server-item{
-        padding: 3.5% 0;
+        font-size: 18px;
-        font-size: 20px;
         span{
           display: inline-block;
           width: 50%;

src/components/body-d-left/threeL.vue

@@ -5,6 +5,32 @@
           <div class="type-time">
             <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
           </div>
+          <div class="physical-container">
+            <div class="physical-item">
+              <span>10444人</span>
+              <span>兴隆圆医院</span>
+            </div>
+            <div class="physical-item">
+              <span>144人</span>
+              <span>兴隆圆医院</span>
+            </div>
+            <div class="physical-item">
+              <span>344人</span>
+              <span>兴隆圆医院</span>
+            </div>
+            <div class="physical-item">
+              <span>144人</span>
+              <span>兴隆圆医院</span>
+            </div>
+            <div class="physical-item">
+              <span>144人</span>
+              <span>兴隆圆医院</span>
+            </div>
+            <div class="physical-item">
+              <span>144人</span>
+              <span>延安</span>
+            </div>
+          </div>
         </div>
     </div>
 </template>
@@ -28,6 +54,7 @@ const typeTime = ref([
     value:'week',
   }
 ])
+const physical = ref();
 const selectIndex = ref(0)
 function handleSelect(index:number){
   selectIndex.value = index;
@@ -36,5 +63,36 @@ function handleSelect(index:number){
 <style scoped lang="less">
 .inner {
     height: calc(100% - 40px);
+    .physical-container{
+      width: 96%;
+      height: 92%;
+      padding-top: 2%;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: space-around;
+      .physical-item{
+        width: 33%;
+        height: 46%;
+        color: #FFFFFF;
+        display: flex;
+        flex-direction: column;
+        span:nth-child(1){
+          font-size: 28px;
+          font-weight: bold;
+        }
+        span:nth-child(2){
+          padding-top: 6%;
+          font-size: 22px;
+        }
+      }
+      .physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){
+        background: url("../../assets/images/physical-top.png") no-repeat;
+        background-size: 100% 100%;
+      }
+      .physical-item:nth-child(4),.physical-item:nth-child(5),.physical-item:nth-child(6){
+        background: url("../../assets/images/physical-bottom.png") no-repeat;
+        background-size: 100% 100%;
+      }
+    }
 }
 </style>

src/components/body-d-right/twoR.vue

@@ -1,9 +1,7 @@
 <template>
     <div>
         <public-title title="健康状况/慢病"/>
-        <div class="inner">
+        <div class="inner"></div>
-
-        </div>
     </div>
 </template>
 <script setup lang="ts">

src/components/publicTitle.vue

@@ -16,10 +16,11 @@ const props = defineProps({
     text-align: left;
     height: 40px;
     line-height: 40px;
-    background: linear-gradient(270deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
+    background: linear-gradient(90deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
     opacity: 1;
-    border: 1px solid;
+    border-top: 1px solid #6A707C;
-    border-image: linear-gradient(270deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1;
+    border-bottom: 1px solid #6A707C;
+    border-image: linear-gradient(90deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1;
     color: #ffffff;
     font-size: 20px;
     font-weight: 700;

src/views/index.vue

@@ -70,7 +70,7 @@ init();
 .outer {
     height: 100%;
     box-sizing: border-box;
-    background: url("../assets/bg.png") no-repeat;
+    background: url("../assets/images/bg.png") no-repeat;
     background-size: 100% 100%;
 }
 
@@ -79,7 +79,7 @@ init();
     line-height: 80px;
     display: flex;
     padding-bottom: 9px;
-    background: url("../assets/top-title.png") no-repeat;
+    background: url("../assets/images/top-title.png") no-repeat;
     background-size: 100% 100%;
 
     .title-d-left, .title-d-middle, .title-d-right {
@@ -142,7 +142,7 @@ init();
 
 .bottom-d {
     height: 40px;
-    background: url("../assets/bottom-b.png") no-repeat;
+    background: url("../assets/images/bottom-b.png") no-repeat;
     background-size: 100% 100%;
 }
 </style>