diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..f33e661
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="line_cards">
+    <div class="card" v-for="item in caseList" :key="item.id">
+      <p class="title">{{ item.title }}</p>
+      <div class="img_box">
+        <img :src="item.pic" class="img" />
+        <div class="bottom_text">
+          <p>工业设计</p>
+          <p>软硬件研发</p>
+          <p>样机制作</p>
+          <p>量产</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  caseList: {
+    type: Array,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.line_cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  column-gap: 7px;
+  padding: 0 7px;
+  box-sizing: border-box;
+  row-gap: 7px;
+  .card {
+    background: #ffffff;
+    border-radius: 3px;
+    flex: 1;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding: 11px 7px 7px 7px;
+    .title {
+      font-size: 8px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #2f2f2f;
+      padding-left: 2px;
+      margin-bottom: 6px;
+    }
+    .img_box {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .bottom_text {
+        position: absolute;
+        left: -50%;
+        bottom: -7px;
+        background: #000;
+        display: flex;
+        padding: 5px 0;
+        align-items: center;
+        justify-content: space-evenly;
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #ffffff;
+        width: 200%;
+        transform: scale(0.5);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/CaseShow.vue b/src/components/CaseShow.vue
index 4aefa7a..4b4ddf4 100644
--- a/src/components/CaseShow.vue
+++ b/src/components/CaseShow.vue
@@ -6,91 +6,18 @@
       line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
       line2="特种设备、智能家居、实验仪器、消费电子"
     />
-    <div class="line_cards">
-      <div class="card">
-        <p class="title">国网照明巡检摄像头</p>
-        <div class="img_box">
-          <div class="img"></div>
-          <div class="bottom_text">
-            <p>工业设计</p>
-            <p>软硬件研发</p>
-            <p>样机制作</p>
-            <p>量产</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 class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-    </div>
+    <Card :caseList="caseList" />
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import { caseList } from '@/mock'
+import Card from 'cpns/Card.vue'
 </script>
 
 <style lang="scss" scoped>
 .case_show_container {
   margin-top: 330px;
-  .line_cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-    column-gap: 7px;
-    padding: 0 7px;
-    box-sizing: border-box;
-    row-gap: 7px;
-    .card {
-      height: 132px;
-      background: #ffffff;
-      border-radius: 3px;
-      flex: 1;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      padding: 11px 7px 7px 7px;
-      .title {
-        font-size: 8px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #2f2f2f;
-        padding-left: 2px;
-        margin-bottom: 11px;
-      }
-      .img_box {
-        width: 100%;
-        flex: 1;
-        position: relative;
-        .img {
-          width: 100%;
-          height: 100%;
-          background: red;
-        }
-        .bottom_text {
-          position: absolute;
-          left: -50%;
-          bottom: -10%;
-          height: 34px;
-          background: rgba(0, 0, 0, 0.2);
-          display: flex;
-          align-items: center;
-          justify-content: space-evenly;
-          font-size: 16px;
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          color: #ffffff;
-          width: 200%;
-          transform: scale(0.5);
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/src/components/Hardware.vue b/src/components/Hardware.vue
index 10f9626..d77f175 100644
--- a/src/components/Hardware.vue
+++ b/src/components/Hardware.vue
@@ -6,90 +6,17 @@
       line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
       line2="特种设备、智能家居、实验仪器、消费电子"
     />
-    <div class="line_cards">
-      <div class="card">
-        <p class="title">国网照明巡检摄像头</p>
-        <div class="img_box">
-          <div class="img"></div>
-          <div class="bottom_text">
-            <p>工业设计</p>
-            <p>软硬件研发</p>
-            <p>样机制作</p>
-            <p>量产</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 class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
-    </div>
+    <Card :caseList="hardList" />
   </div>
 </template>
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import { hardList } from '@/mock'
+import Card from 'cpns/Card.vue'
 </script>
 
 <style lang="scss" scoped>
 .hardware_container {
-  .line_cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-    column-gap: 7px;
-    padding: 0 7px;
-    box-sizing: border-box;
-    row-gap: 7px;
-    .card {
-      height: 132px;
-      background: #ffffff;
-      border-radius: 3px;
-      flex: 1;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      padding: 11px 7px 7px 7px;
-      .title {
-        font-size: 8px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #2f2f2f;
-        padding-left: 2px;
-        margin-bottom: 11px;
-      }
-      .img_box {
-        width: 100%;
-        flex: 1;
-        position: relative;
-        .img {
-          width: 100%;
-          height: 100%;
-          background: red;
-        }
-        .bottom_text {
-          position: absolute;
-          left: -50%;
-          bottom: -10%;
-          height: 34px;
-          background: rgba(0, 0, 0, 0.2);
-          display: flex;
-          align-items: center;
-          justify-content: space-evenly;
-          font-size: 16px;
-          font-family: Source Han Sans CN;
-          font-weight: 400;
-          color: #ffffff;
-          width: 200%;
-          transform: scale(0.5);
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/src/mock/index.js b/src/mock/index.js
new file mode 100644
index 0000000..486f5e7
--- /dev/null
+++ b/src/mock/index.js
@@ -0,0 +1,127 @@
+import L1 from '@/static/img/case/li1.png'
+import L2 from '@/static/img/case/li2.png'
+import L3 from '@/static/img/case/li3.png'
+import L4 from '@/static/img/case/li4.png'
+import L5 from '@/static/img/case/li5.png'
+import L6 from '@/static/img/case/li6.png'
+import L7 from '@/static/img/case/li7.png'
+import L8 from '@/static/img/case/li8.png'
+import L9 from '@/static/img/case/li9.png'
+import L10 from '@/static/img/case/li10.png'
+
+export const caseList = [
+  {
+    id: 1,
+    title: '国网照明巡检摄像头',
+    pic: L1,
+  },
+  {
+    id: 2,
+    title: '娱乐打禅休闲一体化座舱',
+    pic: L2,
+  },
+  {
+    id: 3,
+    title: '超声肿瘤治疗系统',
+    pic: L3,
+  },
+  {
+    id: 4,
+    title: '微型光度计',
+    pic: L4,
+  },
+  {
+    id: 5,
+    title: '动车底部巡检',
+    pic: L5,
+  },
+  {
+    id: 6,
+    title: '智能灯杆',
+    pic: L6,
+  },
+  {
+    id: 7,
+    title: '智慧医美视频拍照系统',
+    pic: L7,
+  },
+  {
+    id: 8,
+    title: '智能多通道全自动免疫荧光分析仪',
+    pic: L8,
+  },
+  {
+    id: 9,
+    title: '线性相机实验平台',
+    pic: L9,
+  },
+  {
+    id: 10,
+    title: '水处理设备',
+    pic: L10,
+  },
+]
+
+import Y1 from '@/static/img/hardware/hardware1.png'
+import Y2 from '@/static/img/hardware/hardware2.png'
+import Y3 from '@/static/img/hardware/hardware3.png'
+import Y4 from '@/static/img/hardware/hardware4.png'
+import Y5 from '@/static/img/hardware/hardware5.png'
+import Y6 from '@/static/img/hardware/hardware6.png'
+import Y7 from '@/static/img/hardware/hardware7.png'
+import Y8 from '@/static/img/hardware/hardware8.png'
+import Y9 from '@/static/img/hardware/hardware9.png'
+import Y10 from '@/static/img/hardware/hardware10.png'
+
+export const hardList = [
+  {
+    id: 1,
+    title: '国网照明巡检摄像头',
+    pic: Y1,
+  },
+  {
+    id: 2,
+    title: '娱乐打禅休闲一体化座舱',
+    pic: Y2,
+  },
+  {
+    id: 3,
+    title: '暖手宝',
+    pic: Y3,
+  },
+  {
+    id: 4,
+    title: '微型光度计',
+    pic: Y4,
+  },
+  {
+    id: 5,
+    title: '动车底部巡检',
+    pic: Y5,
+  },
+  {
+    id: 6,
+    title: '全自动AI缠绕打包机器人',
+    pic: Y6,
+  },
+  {
+    id: 7,
+    title: '智慧医美视频拍照系统',
+    pic: Y7,
+  },
+  {
+    id: 8,
+    title: '智能多通道全自动免疫荧光分析仪',
+    pic: Y8,
+  },
+  {
+    id: 9,
+    title: '室内空调调节机',
+    pic: Y9,
+  },
+  {
+    id: 10,
+    title: '水处理设备',
+    pic: Y10,
+  },
+]