home

src/components/Medical/Product/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="product_container">
+    <div class="header">
+      <p class="left">产品信息</p>
+      <p class="en">Products</p>
+    </div>
+    <div class="cards">
+      <div class="card">
+        <div class="img_wrap">
+          <img :src="A2" class="img" alt="" />
+          <div class="modal">
+            <div class="title_wrap">清瀚医疗ECMO</div>
+            <p class="desc">
+              超声聚焦治疗是一种无创的局部性治疗方法，以超声波为能源
+              利用其可穿透性和可聚焦性，将体外低能量的超声波聚焦于肿
+              瘤靶区形成焦斑。
+            </p>
+            <p class="second">
+              焦斑温度在0.1秒的瞬间上升到65摄氏度以上，使病灶靶点产生
+              凝固性坏死，从而达到治疗目的......
+            </p>
+          </div>
+        </div>
+        <div class="bottom_info">
+          <p class="title">超声肿瘤治疗系统</p>
+          <div class="btn">
+            <p class="t">查看详情</p>
+            <p class="arrow">→</p>
+          </div>
+        </div>
+      </div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+    </div>
+    <div class="bottom_wrap">
+      <div class="btn">查看更多</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import A2 from '@/assets/medical/pro/2.png'
+import A3 from '@/assets/medical/pro/3.png'
+import A4 from '@/assets/medical/pro/4.png'
+</script>
+
+<style lang="scss" scoped>
+.product_container {
+  padding: 20px 190px;
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #f9f9f9;
+    padding: 20px 38px;
+    margin-bottom: 20px;
+    .left {
+      font-family: Source Han Sans;
+      font-size: 26px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #000000;
+    }
+    .en {
+      font-family: Source Han Sans;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #000000;
+    }
+  }
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    column-gap: 20px;
+    row-gap: 20px;
+    .card {
+      cursor: pointer;
+      width: 100%;
+      height: 448px;
+      background: #f9f9f9;
+      display: flex;
+      flex-direction: column;
+      .img_wrap {
+        flex: 1;
+        position: relative;
+        .img {
+          width: 100%;
+          height: auto;
+        }
+        .modal {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          background: rgba(246, 246, 246, 0.95);
+          padding: 48px 55px;
+          box-sizing: border-box;
+          flex-direction: column;
+          display: none;
+          .title_wrap {
+            width: 177px;
+            height: 46px;
+            border-radius: 378px;
+            opacity: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: Source Han Sans;
+            font-size: 18px;
+            font-weight: bold;
+            line-height: normal;
+            letter-spacing: 0em;
+            color: #ffffff;
+            background: linear-gradient(90deg, #8af2f9 0%, #09deff 100%);
+            margin-bottom: 24px;
+          }
+          .desc {
+            font-family: Source Han Sans;
+            font-size: 14px;
+            font-weight: normal;
+            line-height: normal;
+            letter-spacing: 0em;
+            color: #000000;
+            margin-bottom: 30px;
+          }
+          .second {
+            font-family: Source Han Sans;
+            font-size: 14px;
+            font-weight: normal;
+            line-height: normal;
+            letter-spacing: 0em;
+            color: #000000;
+          }
+        }
+      }
+      .bottom_info {
+        height: 120px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        justify-content: space-between;
+        border-left: solid 5px #4eb6ff;
+        padding: 40px 42px;
+        .title {
+          font-family: Source Han Sans;
+          font-size: 22px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0em;
+          color: #4eb6ff;
+        }
+        .btn {
+          width: 150px;
+          height: 40px;
+          border-radius: 378px;
+          opacity: 1;
+          background: #ffffff;
+          font-family: 思源黑体;
+          font-size: 18px;
+          font-weight: normal;
+          line-height: normal;
+          letter-spacing: 0em;
+          color: #7d7d7d;
+          padding: 6px 20px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          .arrow {
+            margin-left: 16px;
+          }
+        }
+      }
+      &:hover {
+        .img_wrap {
+          .modal {
+            display: flex;
+          }
+        }
+        .bottom_info {
+          background: #4eb6ff;
+          .title {
+            color: #fff;
+          }
+          .btn {
+            background: #fff;
+            color: #4eb6ff;
+          }
+        }
+      }
+    }
+  }
+  .bottom_wrap {
+    width: 100%;
+    padding: 52px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100px;
+      height: 30px;
+      background: #f9f9f9;
+      font-family: 思源黑体;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #7d7d7d;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/Medical/index.vue

@@ -2,12 +2,16 @@
   <div class="medical_container">
     <Header :active="true" />
     <HomeScreen />
+    <Product />
+    <NewBottom />
   </div>
 </template>
 
 <script setup>
 import Header from 'cpns/Medical/Header'
 import HomeScreen from 'cpns/Medical/HomeScreen'
+import Product from 'cpns/Medical/Product'
+import NewBottom from 'cpns/NewBottom'
 import { onMounted } from 'vue'
 
 onMounted(() => {