diff --git a/src/assets/img/cicruit/1.png b/src/assets/img/cicruit/1.png
new file mode 100644
index 0000000..52336c0
Binary files /dev/null and b/src/assets/img/cicruit/1.png differ
diff --git a/src/assets/img/cicruit/10.png b/src/assets/img/cicruit/10.png
new file mode 100644
index 0000000..30f67b0
Binary files /dev/null and b/src/assets/img/cicruit/10.png differ
diff --git a/src/assets/img/cicruit/11.png b/src/assets/img/cicruit/11.png
new file mode 100644
index 0000000..6ec96bb
Binary files /dev/null and b/src/assets/img/cicruit/11.png differ
diff --git a/src/assets/img/cicruit/12.png b/src/assets/img/cicruit/12.png
new file mode 100644
index 0000000..5fb2736
Binary files /dev/null and b/src/assets/img/cicruit/12.png differ
diff --git a/src/assets/img/cicruit/13.png b/src/assets/img/cicruit/13.png
new file mode 100644
index 0000000..d823b63
Binary files /dev/null and b/src/assets/img/cicruit/13.png differ
diff --git a/src/assets/img/cicruit/14.png b/src/assets/img/cicruit/14.png
new file mode 100644
index 0000000..36be200
Binary files /dev/null and b/src/assets/img/cicruit/14.png differ
diff --git a/src/assets/img/cicruit/15.png b/src/assets/img/cicruit/15.png
new file mode 100644
index 0000000..06df203
Binary files /dev/null and b/src/assets/img/cicruit/15.png differ
diff --git a/src/assets/img/cicruit/2.png b/src/assets/img/cicruit/2.png
new file mode 100644
index 0000000..2680dee
Binary files /dev/null and b/src/assets/img/cicruit/2.png differ
diff --git a/src/assets/img/cicruit/3.png b/src/assets/img/cicruit/3.png
new file mode 100644
index 0000000..12e34a0
Binary files /dev/null and b/src/assets/img/cicruit/3.png differ
diff --git a/src/assets/img/cicruit/4.png b/src/assets/img/cicruit/4.png
new file mode 100644
index 0000000..987e5f8
Binary files /dev/null and b/src/assets/img/cicruit/4.png differ
diff --git a/src/assets/img/cicruit/5.png b/src/assets/img/cicruit/5.png
new file mode 100644
index 0000000..cb3867e
Binary files /dev/null and b/src/assets/img/cicruit/5.png differ
diff --git a/src/assets/img/cicruit/6.png b/src/assets/img/cicruit/6.png
new file mode 100644
index 0000000..53774d9
Binary files /dev/null and b/src/assets/img/cicruit/6.png differ
diff --git a/src/assets/img/cicruit/7.png b/src/assets/img/cicruit/7.png
new file mode 100644
index 0000000..7d3f412
Binary files /dev/null and b/src/assets/img/cicruit/7.png differ
diff --git a/src/assets/img/cicruit/8.png b/src/assets/img/cicruit/8.png
new file mode 100644
index 0000000..415f29a
Binary files /dev/null and b/src/assets/img/cicruit/8.png differ
diff --git a/src/assets/img/cicruit/9.png b/src/assets/img/cicruit/9.png
new file mode 100644
index 0000000..3ebfffa
Binary files /dev/null and b/src/assets/img/cicruit/9.png differ
diff --git a/src/views/Index/components/ContactUs/index.vue b/src/views/Index/components/ContactUs/index.vue
index 576b6d0..8cb7d10 100644
--- a/src/views/Index/components/ContactUs/index.vue
+++ b/src/views/Index/components/ContactUs/index.vue
@@ -1,5 +1,28 @@
-<template>contact us</template>
+<template>
+  <div class="wrap">
+    <div class="contractus_container" id="contractus_container"></div>
+  </div>
+</template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto } from '@/common/utils'
+const showEmpty = ref(false)
+onMounted(() => {
+  handleScreenAuto(showEmpty, '#contractus_container')
+  window.onresize = handleScreenAuto(showEmpty, '#contractus_container')
+})
+</script>
 
-<style></style>
+<style lang="scss" scoped>
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: $common_bg;
+  position: relative;
+  .contractus_container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/Index/components/Culture/Card/index.vue b/src/views/Index/components/Culture/Card/index.vue
index 07cd8e4..347ab8e 100644
--- a/src/views/Index/components/Culture/Card/index.vue
+++ b/src/views/Index/components/Culture/Card/index.vue
@@ -209,23 +209,25 @@ const getTips = () => {
   }
 }
 .bg1 {
-  background: url(../../../../../assets/img/culture/zixinback.png);
+  background: url(../../../../../assets/img/culture/zixinback.png) no-repeat;
   background-size: 100% 100%;
 }
 .bg2 {
-  background: url(../../../../../assets/img/culture/siweiluojiback.png);
+  background: url(../../../../../assets/img/culture/siweiluojiback.png)
+    no-repeat;
   background-size: 100% 100%;
 }
 .bg3 {
-  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background: url(../../../../../assets/img/culture/lilunjieheback.png)
+    no-repeat;
   background-size: 100% 100%;
 }
 .bg4 {
-  background: url(../../../../../assets/img/culture/wendangback.png);
+  background: url(../../../../../assets/img/culture/wendangback.png) no-repeat;
   background-size: 100% 100%;
 }
 .bg5 {
-  background: url(../../../../../assets/img/culture/xiangmuback.png);
+  background: url(../../../../../assets/img/culture/xiangmuback.png) no-repeat;
   background-size: 100% 100%;
 }
 </style>
diff --git a/src/views/Index/components/Culture/index.vue b/src/views/Index/components/Culture/index.vue
index fe6a2ce..73edcd6 100644
--- a/src/views/Index/components/Culture/index.vue
+++ b/src/views/Index/components/Culture/index.vue
@@ -58,6 +58,7 @@ const showEmpty = ref(false)
   height: 100vh;
   background: $common_bg;
   position: relative;
+  overflow: hidden;
   .culture_container {
     width: 100%;
     height: 100%;
@@ -72,6 +73,7 @@ const showEmpty = ref(false)
       width: 100vw;
       display: block;
       height: 100vw;
+      object-fit: contain;
       left: 0;
       top: 0;
       animation: rotate 60s linear infinite;
diff --git a/src/views/Index/components/Service/Card/index.vue b/src/views/Index/components/Service/Card/index.vue
index 944e649..df00422 100644
--- a/src/views/Index/components/Service/Card/index.vue
+++ b/src/views/Index/components/Service/Card/index.vue
@@ -71,22 +71,22 @@ const getClassName = () => {
   }
 }
 .bg1 {
-  background: url(../../../../../assets/img/tech/gongyesheji1.png);
+  background: url(../../../../../assets/img/tech/gongyesheji1.png) no-repeat;
 }
 .bg2 {
-  background: url(../../../../../assets/img/tech/jiegousheji.png);
+  background: url(../../../../../assets/img/tech/jiegousheji.png) no-repeat;
 }
 .bg3 {
-  background: url(../../../../../assets/img/tech/ruanjiansheji.png);
+  background: url(../../../../../assets/img/tech/ruanjiansheji.png) no-repeat;
 }
 .bg4 {
-  background: url(../../../../../assets/img/tech/yingjiansheji.png);
+  background: url(../../../../../assets/img/tech/yingjiansheji.png) no-repeat;
 }
 .bg5 {
-  background: url(../../../../../assets/img/tech/yangjizhizuo.png);
+  background: url(../../../../../assets/img/tech/yangjizhizuo.png) no-repeat;
 }
 .bg6 {
-  background: url(../../../../../assets/img/tech/chanpinliangchan.png);
+  background: url(../../../../../assets/img/tech/chanpinliangchan.png) no-repeat;
 }
 
 .alpha:hover {
diff --git a/src/views/Index/components/SoftHardwareDetail/Card/index.vue b/src/views/Index/components/SoftHardwareDetail/Card/index.vue
new file mode 100644
index 0000000..754b283
--- /dev/null
+++ b/src/views/Index/components/SoftHardwareDetail/Card/index.vue
@@ -0,0 +1,109 @@
+<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: 275px;
+  height: 239px;
+  background: #ffffff;
+  box-shadow: 0px 7px 24px 0px rgba(7, 7, 72, 0.05);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 31px 0 30px 0;
+  box-sizing: border-box;
+  .img {
+    width: 220px;
+    height: auto;
+  }
+  .btn {
+    width: 235px;
+    min-height: 38px;
+    background: linear-gradient(90deg, #4e0cf5, #283fe7);
+    border-radius: 19px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    font-family: 'SourceHanSans';
+    font-weight: 400;
+    color: #ffffff;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/views/Index/components/SoftHardwareDetail/index.vue b/src/views/Index/components/SoftHardwareDetail/index.vue
index 9928148..ff75aa5 100644
--- a/src/views/Index/components/SoftHardwareDetail/index.vue
+++ b/src/views/Index/components/SoftHardwareDetail/index.vue
@@ -1,7 +1,108 @@
-<template>SoftHardwareDetail</template>
+<template>
+  <div class="wrap">
+    <div class="hardware_detail_container" id="hardware_detail_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>
+      </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>
-export default {}
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto } from '@/common/utils'
+import Card from './Card'
+const showEmpty = ref(false)
+onMounted(() => {
+  handleScreenAuto(showEmpty, '#hardware_detail_container')
+  window.onresize = handleScreenAuto(showEmpty, '#hardware_detail_container')
+})
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: $common_bg;
+  position: relative;
+  .hardware_detail_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: 52px 0 24px 0;
+      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 173px;
+      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/index.vue b/src/views/Index/index.vue
index 75b2ead..ae5705b 100644
--- a/src/views/Index/index.vue
+++ b/src/views/Index/index.vue
@@ -34,13 +34,13 @@
       <SoftHardwareSummary />
     </swiper-slide>
     <swiper-slide :key="5" :virtualIndex="5">
-      <CircuitBoard />
+      <SoftHardwareDetail />
     </swiper-slide>
     <swiper-slide :key="6" :virtualIndex="6">
       <Culture />
     </swiper-slide>
     <swiper-slide :key="7" :virtualIndex="7">
-      <SoftHardwareDetail />
+      <Culture />
     </swiper-slide>
     <swiper-slide :key="8" :virtualIndex="8">
       <CorporateCulture />