detail

src/components/Medical/HomeScreen/index.vue

@@ -11,7 +11,6 @@ import HomeBG from '@/assets/medical/1.png'
 <style lang="scss" scoped>
 .home_screen_container {
   padding-top: 68px;
-  background: #0937b3;
   .img {
     width: 100%;
     height: auto;

src/components/Medical/Info/index.vue

@@ -1,12 +1,85 @@
 <template>
-  <div class="info_container"></div>
+  <div class="info_container">
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card noborder">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+    <div class="card noborder">
+      <img class="img" :src="A1" alt="" />
+      <p class="text">硬件系统 / Hardware</p>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import A1 from '@/assets/medical/3.png'
+</script>
 
 <style lang="scss" scoped>
 .info_container {
   height: 620px;
   background: #f9f9f9;
+  box-sizing: border-box;
+  padding: 155px 150px 155px 150px;
+  justify-content: space-evenly;
+  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  row-gap: 119px;
+  .card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: 1px solid #d8d8d8;
+    .img {
+      width: 67px;
+      height: 61px;
+      margin-bottom: 14px;
+    }
+    .text {
+      font-family: 思源黑体;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #9e9e9e;
+    }
+  }
+  .noborder {
+    border-right: none;
+  }
 }
 </style>

src/components/Medical/Parameters/index.vue

@@ -1,8 +1,22 @@
 <template>
-  <div class="product_param_container">123</div>
+  <div class="product_param_container">
+    <div class="left_content">
+      <p class="title">智能多通道全自动免疫荧光分析仪</p>
+      <p class="line">产品参数信息产品参数信息产品参数信息</p>
+      <p class="line">产品参数信息产品参数信息产品参数信息</p>
+      <p class="line">产品参数信息产品参数信息产品参数信息</p>
+      <p class="line">产品参数信息产品参数信息产品参数信息</p>
+      <p class="line">产品参数信息产品参数信息产品参数信息</p>
+      <p class="line">产品参数信息产品参数信息产品参数信息</p>
+      <p class="line">产品参数信息产品参数信息产品参数信息</p>
+    </div>
+    <img :src="A1" class="right_img" alt="" />
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import A1 from '@/assets/medical/case/1.png'
+</script>
 
 <style lang="scss" scoped>
 .product_param_container {
@@ -10,5 +24,39 @@
   background-size: 100% 100%;
   height: 620px;
   width: 100%;
+  box-sizing: border-box;
+  padding: 59px 180px 65px 97px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .left_content {
+    width: 550px;
+    height: 496px;
+    .title {
+      padding-bottom: 38px;
+      border-bottom: 1px solid #ffffff;
+      font-family: Source Han Sans;
+      font-size: 26px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #ffffff;
+    }
+    .line {
+      padding: 18px 0;
+      border-bottom: 1px solid #ffffff;
+      font-family: Source Han Sans;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.02em;
+
+      color: #ffffff;
+    }
+  }
+  .right_img {
+    width: 436px;
+    height: 296px;
+  }
 }
 </style>

src/components/NewBottom.vue

@@ -21,6 +21,10 @@
               <span>加工生产</span>
               <p>></p>
             </div>
+            <div class="link" @click="toPage('/pc/medicine')">
+              <span>医疗健康</span>
+              <p>></p>
+            </div>
             <!-- <p class="link" @click="toPage('/medical')">医疗健康</p> -->
           </div>
         </div>
@@ -125,11 +129,11 @@ onMounted(() => {
   background: #f6f6f6;
   display: flex;
   align-items: center;
-  height: 368px;
+  // height: 368px;
   box-sizing: border-box;
   .info_container {
     flex: 1;
-    height: 368px;
+    // height: 368px;
     padding: 40px;
     box-sizing: border-box;
     .real {
@@ -137,7 +141,8 @@ onMounted(() => {
       background: #fff;
       width: 100%;
       display: flex;
-      height: 287px;
+      // height: 287px;
+      align-items: center;
       padding: 35px 0 27px 119px;
       box-sizing: border-box;
       .first_wrap {