diff --git a/src/assets/medical/2.png b/src/assets/medical/2.png
new file mode 100644
index 0000000..ed7169a
Binary files /dev/null and b/src/assets/medical/2.png differ
diff --git a/src/assets/medical/case/1.png b/src/assets/medical/case/1.png
new file mode 100644
index 0000000..febdbc1
Binary files /dev/null and b/src/assets/medical/case/1.png differ
diff --git a/src/assets/medical/case/2.png b/src/assets/medical/case/2.png
new file mode 100644
index 0000000..eb120b0
Binary files /dev/null and b/src/assets/medical/case/2.png differ
diff --git a/src/assets/medical/param/1.png b/src/assets/medical/param/1.png
new file mode 100644
index 0000000..8eb5cd4
Binary files /dev/null and b/src/assets/medical/param/1.png differ
diff --git a/src/components/Medical/Header/index.vue b/src/components/Medical/Header/index.vue
index e41d4fa..2edbbd5 100644
--- a/src/components/Medical/Header/index.vue
+++ b/src/components/Medical/Header/index.vue
@@ -24,18 +24,22 @@
             <p class="b" @click="toHomePage('/')">整机开发</p>
           </div>
         </div>
-        <div class="btn" @click="toPage('/medicalabout')">
+        <div
+          class="btn"
+          style="margin-right: 20px"
+          @click="toPage('/medicalabout')"
+        >
           <p class="text">关于我们</p>
           <div class="line" v-if="route.path == '/medicalabout'"></div>
         </div>
-        <div
+        <!-- <div
           class="btn"
           style="margin-right: 20px"
           @click="toPage('/medicalrecruit')"
         >
           <p class="text">招聘</p>
           <div class="line" v-if="route.path == '/medicalrecruit'"></div>
-        </div>
+        </div> -->
       </div>
       <div class="phone_wrap">
         <img
diff --git a/src/components/Medical/HeaderLine/index.vue b/src/components/Medical/HeaderLine/index.vue
new file mode 100644
index 0000000..80c3df8
--- /dev/null
+++ b/src/components/Medical/HeaderLine/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="header_line_container">
+    <p class="title">{{ title }}</p>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.header_line_container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 61px 0 40px 0;
+  .title {
+    font-family: Source Han Sans;
+    font-size: 26px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0em;
+    color: #000000;
+  }
+}
+</style>
diff --git a/src/components/Medical/Info/index.vue b/src/components/Medical/Info/index.vue
new file mode 100644
index 0000000..4bac450
--- /dev/null
+++ b/src/components/Medical/Info/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="info_container"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.info_container {
+  height: 620px;
+  background: #f9f9f9;
+}
+</style>
diff --git a/src/components/Medical/Parameters/index.vue b/src/components/Medical/Parameters/index.vue
new file mode 100644
index 0000000..9206b84
--- /dev/null
+++ b/src/components/Medical/Parameters/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="product_param_container">123</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.product_param_container {
+  background: url(../../../assets/medical/param/1.png) no-repeat;
+  background-size: 100% 100%;
+  height: 620px;
+  width: 100%;
+}
+</style>
diff --git a/src/views/MedicalDetail copy/index.vue b/src/views/MedicalDetail copy/index.vue
new file mode 100644
index 0000000..f8fdb55
--- /dev/null
+++ b/src/views/MedicalDetail copy/index.vue	
@@ -0,0 +1,158 @@
+<template>
+  <div class="medical_container">
+    <Header :active="true" />
+    <div
+      class="card"
+      v-for="(item, index) in case_detail_list[1]"
+      :key="index"
+      @click="showDetailModal(1, index)"
+    >
+      <div class="left">
+        <div v-for="(ite, ind) in swiperList[index].slice(0, 3)" :key="ind">
+          <img class="img" :src="ite.picUrl" alt="" />
+        </div>
+      </div>
+      <div class="right">
+        <h1 class="title">{{ item.title }}</h1>
+        <div class="desc" v-html="item.detailList?.topText"></div>
+        <div class="btn_wrap">
+          <div class="btn">
+            <span class="text">查看详情</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              fill="none"
+              version="1.1"
+              width="20"
+              height="4"
+              viewBox="0 0 20 4"
+            >
+              <g>
+                <path
+                  d="M19.9922,3.41357C20.0475,3.71869,19.8013,3.998,19.4754,4L0.524717,4C0.234187,4.00028,-0.00116205,3.77604,0.00000432898,3.50006C0.00000432898,3.2236,0.238414,2.99963,0.524717,2.99963L18.3818,2.99963L16.1219,0.851393C15.9164,0.656325,15.9171,0.339718,16.1235,0.145482C16.3287,-0.0494938,16.6655,-0.0469936,16.8661,0.143982L19.8464,2.97713C19.9717,3.09611,20.0201,3.25959,19.9922,3.41357Z"
+                  fill="#FFFFFF"
+                  fill-opacity="1"
+                />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <DetailModal
+      v-if="showModalVisible"
+      :hiddenDetailModal="hiddenDetailModal"
+      :productInfo="productInfo"
+    />
+  </div>
+  <Bottom />
+</template>
+
+<script setup>
+import DetailModal from 'cpns/design/DetailModal'
+import Header from 'cpns/Medical/Header'
+import Bottom from 'cpns/NewBottom.vue'
+import { ref } from 'vue'
+import { case_detail_list } from '@/mock/case_industry'
+import { swiperList } from '@/mock/case_detail/01.js'
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  document.body.scrollTop = document.documentElement.scrollTop = 0
+})
+const showModalVisible = ref(false)
+const productInfo = ref({})
+
+const showDetailModal = (id1, id2) => {
+  // 取消html的滚动条
+  const rootTag = document.getElementById('iflytop')
+  rootTag.style.overflow = 'hidden'
+  rootTag.style.height = '100%'
+  showModalVisible.value = true
+  // 根据activeTab和id确定详情数据
+  productInfo.value = case_detail_list[id1][id2]
+}
+
+const hiddenDetailModal = () => {
+  // 恢复html的滚动条
+  const rootTag = document.getElementById('iflytop')
+  rootTag.style['overflow-y'] = 'scroll'
+  rootTag.style['overflow-x'] = 'hidden'
+  rootTag.style.height = 'auto'
+  productInfo.value = {}
+  showModalVisible.value = false
+}
+
+const showModal = () => {}
+</script>
+
+<style lang="scss" scoped>
+.medical_container {
+  padding: 123px 67px 67px 67px;
+  min-height: 100vh;
+  background: #f6f6f6;
+  .card {
+    background: #ffffff;
+    padding: 36px 64px 36px 36px;
+    display: flex;
+    margin-bottom: 40px;
+    .left {
+      display: flex;
+      align-items: center;
+      .img {
+        width: 278px;
+        height: 278px;
+        background: #d8d8d8;
+        margin-right: 40px;
+        object-fit: cover;
+      }
+    }
+    .right {
+      flex: 1;
+      .title {
+        padding-bottom: 33px;
+        border-bottom: 1px solid #d3d3d3;
+        font-family: Source Han Sans;
+        font-size: 36px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0.02em;
+        font-feature-settings: 'kern' on;
+        color: #000000;
+      }
+      .desc {
+        padding-top: 26px;
+        padding-bottom: 24px;
+        font-family: Source Han Sans;
+        font-size: 18px;
+        font-weight: normal;
+        line-height: normal;
+        letter-spacing: 0.04em;
+        font-feature-settings: 'kern' on;
+        color: #d3d3d3;
+      }
+      .btn_wrap {
+        display: flex;
+        justify-content: flex-end;
+        .btn {
+          padding: 10px 20px;
+          border-radius: 383px;
+          background: #000000;
+          font-family: Source Han Sans;
+          font-size: 16px;
+          font-weight: normal;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          font-feature-settings: 'kern' on;
+          color: #ffffff;
+          display: flex;
+          align-items: center;
+          .text {
+            margin-right: 11px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/MedicalDetail/index.vue b/src/views/MedicalDetail/index.vue
index f8fdb55..70993e8 100644
--- a/src/views/MedicalDetail/index.vue
+++ b/src/views/MedicalDetail/index.vue
@@ -1,154 +1,148 @@
 <template>
-  <div class="medical_container">
+  <div class="midical_detail_container">
     <Header :active="true" />
-    <div
-      class="card"
-      v-for="(item, index) in case_detail_list[1]"
-      :key="index"
-      @click="showDetailModal(1, index)"
-    >
-      <div class="left">
-        <div v-for="(ite, ind) in swiperList[index].slice(0, 3)" :key="ind">
-          <img class="img" :src="ite.picUrl" alt="" />
-        </div>
+    <div class="header_wrap">
+      <img :src="A2" class="bg" alt="" />
+      <div class="big_title">
+        <p class="line1">智能多通道</p>
+        <p class="line2">全自动免疫荧光分析仪</p>
+      </div>
+      <img :src="C1" class="case_img" alt="" />
+    </div>
+    <div class="product_desc_wrap">
+      <div class="title_info">
+        <p class="desc">
+          支持50个样本同时上机、6种项目同时测试、20个通道并行孵育、光学检测；进样模组支持脱帽摇匀盖帽；支持急诊位；采用Scara机械臂
+          节省空间体积，并支持缓冲液的扫码识别。
+        </p>
       </div>
-      <div class="right">
-        <h1 class="title">{{ item.title }}</h1>
-        <div class="desc" v-html="item.detailList?.topText"></div>
-        <div class="btn_wrap">
-          <div class="btn">
-            <span class="text">查看详情</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              fill="none"
-              version="1.1"
-              width="20"
-              height="4"
-              viewBox="0 0 20 4"
-            >
-              <g>
-                <path
-                  d="M19.9922,3.41357C20.0475,3.71869,19.8013,3.998,19.4754,4L0.524717,4C0.234187,4.00028,-0.00116205,3.77604,0.00000432898,3.50006C0.00000432898,3.2236,0.238414,2.99963,0.524717,2.99963L18.3818,2.99963L16.1219,0.851393C15.9164,0.656325,15.9171,0.339718,16.1235,0.145482C16.3287,-0.0494938,16.6655,-0.0469936,16.8661,0.143982L19.8464,2.97713C19.9717,3.09611,20.0201,3.25959,19.9922,3.41357Z"
-                  fill="#FFFFFF"
-                  fill-opacity="1"
-                />
-              </g>
-            </svg>
+      <div class="product_test">
+        <img class="img" :src="C2" alt="" />
+        <div class="p_grid">
+          <p class="trit">产品功能</p>
+          <div class="card_grid">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
           </div>
         </div>
       </div>
     </div>
-    <DetailModal
-      v-if="showModalVisible"
-      :hiddenDetailModal="hiddenDetailModal"
-      :productInfo="productInfo"
-    />
+    <div class="real_content">
+      <HeaderLine title="硬件系统 / Hardware" />
+      <Info />
+      <HeaderLine title="软件系统 / Software" />
+      <Info />
+      <HeaderLine title="产品参数 / Product parameters" />
+      <Parameters />
+    </div>
+    <NewBottom />
   </div>
-  <Bottom />
 </template>
 
 <script setup>
-import DetailModal from 'cpns/design/DetailModal'
 import Header from 'cpns/Medical/Header'
-import Bottom from 'cpns/NewBottom.vue'
-import { ref } from 'vue'
-import { case_detail_list } from '@/mock/case_industry'
-import { swiperList } from '@/mock/case_detail/01.js'
-import { onMounted } from 'vue'
-
-onMounted(() => {
-  document.body.scrollTop = document.documentElement.scrollTop = 0
-})
-const showModalVisible = ref(false)
-const productInfo = ref({})
-
-const showDetailModal = (id1, id2) => {
-  // 取消html的滚动条
-  const rootTag = document.getElementById('iflytop')
-  rootTag.style.overflow = 'hidden'
-  rootTag.style.height = '100%'
-  showModalVisible.value = true
-  // 根据activeTab和id确定详情数据
-  productInfo.value = case_detail_list[id1][id2]
-}
-
-const hiddenDetailModal = () => {
-  // 恢复html的滚动条
-  const rootTag = document.getElementById('iflytop')
-  rootTag.style['overflow-y'] = 'scroll'
-  rootTag.style['overflow-x'] = 'hidden'
-  rootTag.style.height = 'auto'
-  productInfo.value = {}
-  showModalVisible.value = false
-}
-
-const showModal = () => {}
+import A2 from '@/assets/medical/2.png'
+import C1 from '@/assets/medical/case/1.png'
+import C2 from '@/assets/medical/case/2.png'
+import NewBottom from 'cpns/NewBottom'
+import HeaderLine from 'cpns/Medical/HeaderLine'
+import Parameters from 'cpns/Medical/Parameters'
+import Info from 'cpns/Medical/Info'
 </script>
 
 <style lang="scss" scoped>
-.medical_container {
-  padding: 123px 67px 67px 67px;
-  min-height: 100vh;
-  background: #f6f6f6;
-  .card {
-    background: #ffffff;
-    padding: 36px 64px 36px 36px;
-    display: flex;
-    margin-bottom: 40px;
-    .left {
-      display: flex;
-      align-items: center;
-      .img {
-        width: 278px;
-        height: 278px;
-        background: #d8d8d8;
-        margin-right: 40px;
-        object-fit: cover;
-      }
+.midical_detail_container {
+  margin-top: 68px;
+  background: #fff;
+  .header_wrap {
+    background: #4eb6ff;
+    position: relative;
+    .bg {
+      width: 100%;
+      height: auto;
     }
-    .right {
-      flex: 1;
-      .title {
-        padding-bottom: 33px;
-        border-bottom: 1px solid #d3d3d3;
+    .big_title {
+      position: absolute;
+      left: 217px;
+      top: 115px;
+      .line1 {
         font-family: Source Han Sans;
-        font-size: 36px;
-        font-weight: bold;
-        line-height: normal;
-        letter-spacing: 0.02em;
-        font-feature-settings: 'kern' on;
-        color: #000000;
+        font-size: 60px;
+        font-weight: 900;
+        line-height: 76px;
+        letter-spacing: 0em;
+        color: #ffffff;
+      }
+      .line2 {
+        font-family: Source Han Sans;
+        font-size: 60px;
+        font-weight: 900;
+        line-height: 76px;
+        letter-spacing: 0em;
+        color: #ffffff;
       }
+    }
+    .case_img {
+      position: absolute;
+      left: 973px;
+      top: 110px;
+      width: 325px;
+      height: 221px;
+    }
+  }
+  .real_content {
+    padding: 0 190px;
+  }
+  .product_desc_wrap {
+    padding: 0 190px;
+    .title_info {
+      padding: 65px 45px 69px 45px;
       .desc {
-        padding-top: 26px;
-        padding-bottom: 24px;
         font-family: Source Han Sans;
         font-size: 18px;
         font-weight: normal;
         line-height: normal;
-        letter-spacing: 0.04em;
-        font-feature-settings: 'kern' on;
-        color: #d3d3d3;
+        letter-spacing: 0em;
+        color: #000000;
+        max-width: 1087px;
       }
-      .btn_wrap {
-        display: flex;
-        justify-content: flex-end;
-        .btn {
-          padding: 10px 20px;
-          border-radius: 383px;
-          background: #000000;
+    }
+    .product_test {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .img {
+        width: 790px;
+        height: 440px;
+      }
+      .p_grid {
+        .trit {
           font-family: Source Han Sans;
-          font-size: 16px;
-          font-weight: normal;
-          line-height: normal;
-          letter-spacing: 0.04em;
-          font-feature-settings: 'kern' on;
-          color: #ffffff;
-          display: flex;
-          align-items: center;
-          .text {
-            margin-right: 11px;
+          font-size: 28px;
+          font-weight: bold;
+          line-height: 76px;
+          letter-spacing: 0em;
+          color: #000000;
+        }
+        .card_grid {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          grid-template-rows: repeat(2, 1fr);
+          row-gap: 20px;
+          column-gap: 20px;
+          .card {
+            width: 155px;
+            height: 155px;
+            border: 1px solid #59b8fd;
+            &:hover {
+              background: #59b8fd;
+            }
           }
         }
       }