diff --git a/src/components/CaseCard/index.vue b/src/components/CaseCard/index.vue
deleted file mode 100644
index 9ea02bd..0000000
--- a/src/components/CaseCard/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>case card</template>
-
-<script>
-export default {}
-</script>
-
-<style></style>
diff --git a/src/components/LeftNav/index.vue b/src/components/LeftNav/index.vue
deleted file mode 100644
index 1db289c..0000000
--- a/src/components/LeftNav/index.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <ul>
-      <li>1</li>
-      <li>2</li>
-      <li>3</li>
-      <li>4</li>
-      <li>5</li>
-      <li>6</li>
-      <li>7</li>
-      <li>8</li>
-      <li>9</li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style></style>
diff --git a/src/views/Index/components/CaseDetails/index.vue b/src/views/Index/components/CaseDetails/index.vue
index 505477c..83ab69d 100644
--- a/src/views/Index/components/CaseDetails/index.vue
+++ b/src/views/Index/components/CaseDetails/index.vue
@@ -1,19 +1,9 @@
 <template>
-  <div class="page_padding_top">
-    <div>
-      <h1>我们的案例</h1>
-      <p>line</p>
-    </div>
-    <div class="flex_center">
-      <LeftNav />
-      <CaseCard />
-    </div>
+  <div>
+    <div class="case_detail_container">case de</div>
   </div>
 </template>
 
-<script setup>
-import LeftNav from 'cpns/LeftNav'
-import CaseCard from 'cpns/CaseCard'
-</script>
+<script setup></script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/Index/components/VideoPlayer/index.vue b/src/views/Index/components/MechanicalControl/index.vue
similarity index 100%
rename from src/views/Index/components/VideoPlayer/index.vue
rename to src/views/Index/components/MechanicalControl/index.vue
diff --git a/src/views/Index/components/MechanicalDrive/Card/index.vue b/src/views/Index/components/MechanicalDrive/Card/index.vue
new file mode 100644
index 0000000..cff3feb
--- /dev/null
+++ b/src/views/Index/components/MechanicalDrive/Card/index.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="dian_container">
+    <img :src="getImgSrc()" alt="" class="img" />
+    <div class="btn">{{ title }}</div>
+  </div>
+</template>
+
+<script setup>
+import A1 from '@/assets/img/cicruit/1.png'
+import A2 from '@/assets/img/cicruit/2.png'
+import A3 from '@/assets/img/cicruit/3.png'
+import A4 from '@/assets/img/cicruit/4.png'
+import A5 from '@/assets/img/cicruit/5.png'
+import A6 from '@/assets/img/cicruit/6.png'
+import A7 from '@/assets/img/cicruit/7.png'
+import A8 from '@/assets/img/cicruit/8.png'
+import A9 from '@/assets/img/cicruit/9.png'
+import A10 from '@/assets/img/cicruit/10.png'
+import A11 from '@/assets/img/cicruit/11.png'
+import A12 from '@/assets/img/cicruit/12.png'
+import A13 from '@/assets/img/cicruit/13.png'
+import A14 from '@/assets/img/cicruit/14.png'
+import A15 from '@/assets/img/cicruit/15.png'
+const props = defineProps({
+  title: String,
+  i: String,
+})
+const getImgSrc = () => {
+  if (props.i == '1') {
+    return A1
+  }
+  if (props.i == '2') {
+    return A2
+  }
+  if (props.i == '3') {
+    return A3
+  }
+  if (props.i == '4') {
+    return A4
+  }
+  if (props.i == '5') {
+    return A5
+  }
+  if (props.i == '6') {
+    return A6
+  }
+  if (props.i == '7') {
+    return A7
+  }
+  if (props.i == '8') {
+    return A8
+  }
+  if (props.i == '9') {
+    return A9
+  }
+  if (props.i == '10') {
+    return A10
+  }
+  if (props.i == '11') {
+    return A11
+  }
+  if (props.i == '12') {
+    return A12
+  }
+  if (props.i == '13') {
+    return A13
+  }
+  if (props.i == '14') {
+    return A14
+  }
+  if (props.i == '15') {
+    return A15
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dian_container {
+  width: 291px;
+  height: 195px;
+  box-sizing: border-box;
+  position: relative;
+  .img {
+    width: 100%;
+    height: 100%;
+  }
+  .btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 50px;
+    background: #283fe7;
+    opacity: 0.5;
+    font-size: 18px;
+    font-family: 'SourceHanSans';
+    font-weight: 400;
+    color: #ffffff;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 21px;
+  }
+}
+</style>
diff --git a/src/views/Index/components/MechanicalDrive/index.vue b/src/views/Index/components/MechanicalDrive/index.vue
new file mode 100644
index 0000000..07a376b
--- /dev/null
+++ b/src/views/Index/components/MechanicalDrive/index.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="wrap">
+    <div class="mechanical_drive_container" id="mechanical_drive_container">
+      <div class="empty" v-if="showEmpty"></div>
+      <div class="contract_title">
+        <p class="line"></p>
+        <p class="title"><span class="blue_font">机械传动</span>专家</p>
+        <p class="detail">
+          我们精通气动、液动、电动等各种传动机构，完成机械所需的各种动作
+        </p>
+      </div>
+      <div class="content_main">
+        <Card title="全自动AI缠绕打包机器人" i="1" />
+        <Card title="动车底部巡检" i="2" />
+        <Card title="自动荧光免疫分析仪" i="3" />
+        <Card title="国网照明巡检摄像头" i="4" />
+        <Card title="剧本杀" i="5" />
+        <Card title="水下20米AI图像识别相机" i="6" />
+        <Card title="受电弓压力检测" i="7" />
+        <Card title="智慧医美视频拍照系统" i="8" />
+        <Card title="水处理设备" i="9" />
+        <Card title="消毒拉杆箱" i="10" />
+        <Card title="光伏智能接线盒" i="11" />
+        <Card title="智能灯杆" i="12" />
+        <Card title="微型光度计" i="13" />
+        <Card title="臭氧发生器" i="14" />
+        <Card title="智能猫眼" i="15" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto } from '@/common/utils'
+import Card from './Card'
+const showEmpty = ref(false)
+onMounted(() => {
+  handleScreenAuto(showEmpty, '#mechanical_drive_container')
+  window.onresize = handleScreenAuto(showEmpty, '#mechanical_drive_container')
+})
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: $common_bg;
+  position: relative;
+  .mechanical_drive_container {
+    width: 100%;
+    height: 100%;
+    .empty {
+      min-height: 90px;
+    }
+    .contract_title {
+      z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-family: 'SourceHanSans';
+      background-size: 100% 100%;
+      padding: 71px;
+      box-sizing: border-box;
+      position: relative;
+      white-space: nowrap;
+      .line {
+        width: 39px;
+        height: 5px;
+        background: #283fe7;
+        border-radius: 3px;
+        margin-bottom: 12px;
+      }
+      .img {
+        position: absolute;
+        top: 47%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        width: 295px;
+        height: 35px;
+        z-index: 9;
+      }
+      .title {
+        font-size: 30px;
+        font-weight: bold;
+        color: #000000;
+        margin-bottom: 21px;
+        z-index: 10;
+        .blue_font {
+          color: $theme_color;
+        }
+      }
+      .detail {
+        font-size: 18px;
+        font-weight: 300;
+        color: #646a73;
+        font-family: 'SourceHanSansLight';
+      }
+    }
+    .content_main {
+      padding: 0 99px;
+      display: grid;
+      justify-content: space-evenly;
+      grid-template-columns: repeat(5, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      row-gap: 37px;
+    }
+  }
+}
+</style>
diff --git a/src/views/Index/components/CorporateCulture/index.vue b/src/views/Index/components/ReadWidely/index.vue
similarity index 100%
rename from src/views/Index/components/CorporateCulture/index.vue
rename to src/views/Index/components/ReadWidely/index.vue
diff --git a/src/views/Index/components/SoftHardwareDetail/Card/index.vue b/src/views/Index/components/SoftHardwareDetail/Card/index.vue
index 754b283..272d5bb 100644
--- a/src/views/Index/components/SoftHardwareDetail/Card/index.vue
+++ b/src/views/Index/components/SoftHardwareDetail/Card/index.vue
@@ -85,17 +85,18 @@ const getImgSrc = () => {
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
-  padding: 31px 0 30px 0;
+  padding: 26px 0 0 0;
   box-sizing: border-box;
   .img {
     width: 220px;
     height: auto;
+    flex: 1;
   }
   .btn {
-    width: 235px;
-    min-height: 38px;
-    background: linear-gradient(90deg, #4e0cf5, #283fe7);
-    border-radius: 19px;
+    width: 100%;
+    height: 47px;
+    background: #283fe7;
+    opacity: 0.5;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -106,4 +107,9 @@ const getImgSrc = () => {
     box-sizing: border-box;
   }
 }
+.dian_container:hover {
+  .btn {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/src/views/Index/components/SoftHardwarePictureList/index.vue b/src/views/Index/components/WebOfThing/index.vue
similarity index 100%
rename from src/views/Index/components/SoftHardwarePictureList/index.vue
rename to src/views/Index/components/WebOfThing/index.vue
diff --git a/src/views/Index/index.vue b/src/views/Index/index.vue
index b53a750..4d358bf 100644
--- a/src/views/Index/index.vue
+++ b/src/views/Index/index.vue
@@ -31,24 +31,30 @@
       <CasePictureList />
     </swiper-slide>
     <swiper-slide :key="4" :virtualIndex="4">
-      <SoftHardwareSummary />
+      <CaseDetails />
     </swiper-slide>
     <swiper-slide :key="5" :virtualIndex="5">
-      <SoftHardwareDetail />
+      <SoftHardwareSummary />
     </swiper-slide>
     <swiper-slide :key="6" :virtualIndex="6">
-      <Culture />
+      <SoftHardwareDetail />
     </swiper-slide>
     <swiper-slide :key="7" :virtualIndex="7">
-      <ContactUs />
+      <WebOfThing />
     </swiper-slide>
     <swiper-slide :key="8" :virtualIndex="8">
-      <CorporateCulture />
+      <MechanicalControl />
     </swiper-slide>
     <swiper-slide :key="9" :virtualIndex="9">
-      <VideoPlayer />
+      <MechanicalDrive />
     </swiper-slide>
     <swiper-slide :key="10" :virtualIndex="10">
+      <ReadWidely />
+    </swiper-slide>
+    <swiper-slide :key="11" :virtualIndex="11">
+      <Culture />
+    </swiper-slide>
+    <swiper-slide :key="12" :virtualIndex="12">
       <ContactUs />
     </swiper-slide>
   </swiper>
@@ -63,7 +69,7 @@ import { Mousewheel, Pagination, Virtual, Keyboard } from 'swiper'
 // import views to swiper
 import Service from '@/views/Index/components/Service'
 import HeaderSwiper from '@/views/Index/components/HeaderSwiper'
-import VideoPlayer from '@/views/Index/components/VideoPlayer'
+import MechanicalControl from '@/views/Index/components/MechanicalControl'
 import CaseSummary from '@/views/Index/components/CaseSummary'
 import CasePictureList from '@/views/Index/components/CasePictureList'
 import CaseDetails from '@/views/Index/components/CaseDetails'
@@ -71,10 +77,11 @@ import ContactUs from '@/views/Index/components/ContactUs'
 import CircuitBoard from '@/views/Index/components/CircuitBoard'
 import Culture from '@/views/Index/components/Culture'
 import SoftHardwareSummary from '@/views/Index/components/SoftHardwareSummary'
-import CorporateCulture from '@/views/Index/components/CorporateCulture'
-import SoftHardwarePictureList from '@/views/Index/components/SoftHardwarePictureList'
+import ReadWidely from '@/views/Index/components/ReadWidely'
+import WebOfThing from '@/views/Index/components/WebOfThing'
 import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
 import Cooperation from '@/views/Index/components/Cooperation'
+import MechanicalDrive from '@/views/Index/components/MechanicalDrive'
 import { totalPageAni } from '@/common/utils'
 // Import Swiper styles
 import 'swiper/css'
@@ -84,17 +91,18 @@ export default {
   components: {
     Swiper,
     SwiperSlide,
+    WebOfThing,
     ContactUs,
-    VideoPlayer,
+    MechanicalControl,
+    MechanicalDrive,
     CircuitBoard,
-    CorporateCulture,
+    ReadWidely,
     Culture,
     Cooperation,
     CaseDetails,
     HeaderSwiper,
     Service,
     CaseSummary,
-    SoftHardwarePictureList,
     SoftHardwareDetail,
     SoftHardwareSummary,
     CasePictureList,