diff --git a/src/assets/fonts/SourceHanSansCN-ExtraLight.otf b/src/assets/fonts/SourceHanSansCN-ExtraLight.otf
new file mode 100644
index 0000000..5cad7ff
Binary files /dev/null and b/src/assets/fonts/SourceHanSansCN-ExtraLight.otf differ
diff --git a/src/common/utils.js b/src/common/utils.js
index dbb6883..9aa74ce 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -7,6 +7,7 @@ export const handleScreenAuto = (showEmpty, id) => {
       document.querySelector(id).style.transform = `scale(${scale})`
       handleBottomFont(id, scale)
       handleImgScale(id, scale)
+      handleCooperation(id, scale)
       showEmpty.value = false
     } else {
       if (clientHeight >= 1764) {
@@ -14,6 +15,7 @@ export const handleScreenAuto = (showEmpty, id) => {
         document.querySelector(id).style.transform = `scale(${scale})`
         handleBottomFont(id, scale)
         handleImgScale(id, scale)
+        handleCooperation(id, scale)
         showEmpty.value = false
       } else {
         if (clientHeight >= 1323) {
@@ -21,12 +23,14 @@ export const handleScreenAuto = (showEmpty, id) => {
           document.querySelector(id).style.transform = `scale(${scale})`
           handleBottomFont(id, scale)
           handleImgScale(id, scale)
+          handleCooperation(id, scale)
           showEmpty.value = false
         } else {
           const scale = 1080 / clientHeight
           document.querySelector(id).style.transform = `scale(${scale})`
           handleBottomFont(id, scale)
           handleImgScale(id, scale)
+          handleCooperation(id, scale)
           showEmpty.value = false
         }
       }
@@ -55,6 +59,17 @@ const handleImgScale = (id, scale) => {
   }
 }
 
+const handleCooperation = (id, scale) => {
+  if (id == '#cooperation_container') {
+    document.getElementById('contract_bg_coop').style.transform = `scale(${
+      1 / scale
+    })`
+    document.getElementById(
+      'contract_real_coop',
+    ).style.transform = `scale(${scale})`
+  }
+}
+
 export const animateCSS = (element, animation, prefix = 'animate__') =>
   // We create a Promise and return it
   new Promise((resolve, reject) => {
diff --git a/src/style.scss b/src/style.scss
index cde8cd4..e6d77a8 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -16,6 +16,10 @@ body {
   src: url(./assets/fonts/ZonaPro-ExtraBold.otf);
 }
 @font-face {
+  font-family: 'SourceHanSansLight';
+  src: url(./assets/fonts/SourceHanSansCN-ExtraLight.otf);
+}
+@font-face {
   font-family: 'SourceHanSans';
   src: url(./assets/fonts/SourceHanSansCN-Normal.otf);
 }
diff --git a/src/views/Index/components/CasePictureList/index.vue b/src/views/Index/components/CasePictureList/index.vue
index 0553302..7bf66d5 100644
--- a/src/views/Index/components/CasePictureList/index.vue
+++ b/src/views/Index/components/CasePictureList/index.vue
@@ -15,72 +15,47 @@
         <div class="text"><span class="blue">1000W+</span>年</div>
       </div>
       <div class="pic_list">
-        <div class="pic_row mb4">
-          <swiper
-            :slidesPerView="5"
-            :modules="modules"
-            class="pic_swiper"
-            :speed="5000"
-            :autoplay="{
-              delay: 0,
-              stopOnLastSlide: false,
-              disableOnInteraction: false,
-            }"
-          >
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-          </swiper>
+        <div class="scroll_container_case mb4" id="scroll_container_case_1">
+          <ul>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+          </ul>
         </div>
-        <div class="pic_row mb4">
-          <swiper
-            :slidesPerView="5"
-            :modules="modules"
-            class="pic_swiper"
-            :speed="5000"
-            :autoplay="{
-              delay: 0,
-              reverseDirection: true,
-              stopOnLastSlide: false,
-              disableOnInteraction: false,
-            }"
-          >
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-          </swiper>
+        <div class="scroll_container_case mb4" id="scroll_container_case_2">
+          <ul>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+          </ul>
         </div>
-        <div class="pic_row">
-          <swiper
-            :slidesPerView="5"
-            :modules="modules"
-            class="pic_swiper"
-            :speed="5000"
-            :autoplay="{
-              delay: 0,
-              stopOnLastSlide: false,
-              disableOnInteraction: false,
-            }"
-          >
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-            <swiper-slide> <img class="pic" :src="A" alt="" /></swiper-slide>
-          </swiper>
+        <div class="scroll_container_case" id="scroll_container_case_3">
+          <ul>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+            <li><img class="pic" :src="A" alt="" /></li>
+          </ul>
         </div>
       </div>
     </div>
@@ -97,10 +72,32 @@ import { Autoplay } from 'swiper'
 import { handleScreenAuto } from '@/common/utils'
 // Import Swiper styles
 import 'swiper/css'
+const handleScroll = (id, speed) => {
+  var oDiv = document.getElementById(id)
+  var oUl = oDiv.getElementsByTagName('ul')[0]
+  var aLi = oUl.getElementsByTagName('li')
+  var iSpeed = speed //正左负右
+  var timer = null
+  //计算ul的宽为所有li的宽的和;
+  oUl.innerHTML += oUl.innerHTML + oUl.innerHTML
+  oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'
+  function Slider() {
+    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
+      oUl.style.left = 0
+    } else if (oUl.offsetLeft > 0) {
+      oUl.style.left = -oUl.offsetWidth / 2 + 'px'
+    }
+    oUl.style.left = oUl.offsetLeft - iSpeed + 'px' //正负为方向
+  }
+  timer = setInterval(Slider, 30)
+}
 const modules = ref([Autoplay])
 onMounted(() => {
   handleScreenAuto(showEmpty, '#case_picture')
   window.onresize = handleScreenAuto(showEmpty, '#case_picture')
+  handleScroll('scroll_container_case_1', 2)
+  handleScroll('scroll_container_case_2', -2)
+  handleScroll('scroll_container_case_3', 2)
 })
 const showEmpty = ref(false)
 </script>
@@ -157,6 +154,7 @@ const showEmpty = ref(false)
       .detail {
         font-size: 18px;
         font-weight: 300;
+        font-family: 'SourceHanSansLight';
         color: #646a73;
       }
     }
@@ -181,22 +179,28 @@ const showEmpty = ref(false)
       }
     }
     .pic_list {
-      width: 100%;
       padding: 75px;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-evenly;
       .mb4 {
         margin-bottom: 41px;
       }
-      .pic_row {
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-        .pic {
-          width: 307px;
-          height: 171px;
+      .scroll_container_case {
+        position: relative;
+        overflow: hidden;
+        height: 171px;
+        ul {
+          position: absolute;
+          left: 0;
+          li {
+            padding: 5px;
+            list-style: none;
+            width: 307px;
+            float: left;
+            margin: 0 22px;
+            .pic {
+              width: 307px;
+              height: 171px;
+            }
+          }
         }
       }
     }
diff --git a/src/views/Index/components/Cooperation/index.vue b/src/views/Index/components/Cooperation/index.vue
index bb4621d..25b21d0 100644
--- a/src/views/Index/components/Cooperation/index.vue
+++ b/src/views/Index/components/Cooperation/index.vue
@@ -5,11 +5,11 @@
       <div class="contract_title">
         <p class="line"></p>
         <p class="title">合作<span class="blue_font">客户</span></p>
-        <p class="detail">互联网公司 生产制造公司 智能硬件公司</p>
+        <p class="detail">医疗企业 互联网公司 智能硬件公司 科研院所</p>
         <img class="img" :src="Back" alt="back" />
       </div>
-      <div class="contract">
-        <div class="real_img"></div>
+      <div class="contract" id="contract_bg_coop">
+        <div class="real_img" id="contract_real_coop"></div>
       </div>
     </div>
   </div>
@@ -83,6 +83,7 @@ const showEmpty = ref(false)
         font-size: 18px;
         font-weight: 300;
         color: #646a73;
+        font-family: 'SourceHanSansLight';
       }
     }
     .contract {
diff --git a/src/views/Index/components/Culture/Card/index.vue b/src/views/Index/components/Culture/Card/index.vue
index 43910a9..07cd8e4 100644
--- a/src/views/Index/components/Culture/Card/index.vue
+++ b/src/views/Index/components/Culture/Card/index.vue
@@ -10,7 +10,7 @@
       <div class="header_card">
         <div class="btn">{{ getTitle() }}</div>
       </div>
-      <p class="text">
+      <p :class="getContentClass()">
         {{ getContent() }}
       </p>
       <p class="tip">{{ getTips() }}</p>
@@ -26,6 +26,24 @@ const props = defineProps({
 const getClassName = () => {
   return `culture_card_container bg${props.i}`
 }
+
+const getContentClass = () => {
+  if (props.i == '1') {
+    return 'text font1'
+  }
+  if (props.i == '2') {
+    return 'text font2'
+  }
+  if (props.i == '3') {
+    return 'text font3'
+  }
+  if (props.i == '4') {
+    return 'text font4'
+  }
+  if (props.i == '5') {
+    return 'text font5'
+  }
+}
 const getTitle = () => {
   if (props.i == '1') {
     return '自信'
@@ -94,6 +112,7 @@ const getTips = () => {
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
+    position: relative;
     .top_circle {
       display: none;
     }
@@ -110,14 +129,37 @@ const getTips = () => {
     }
     .text {
       font-size: 16px;
-      font-family: 'SourceHanSans';
+      font-family: 'SourceHanSansLight';
       line-height: 32px;
       font-weight: 300;
       color: #ffffff;
+      position: absolute;
+      word-break: break-all;
+      top: 235px;
+    }
+    .font1 {
+      width: 216px;
+      left: 45px;
+    }
+    .font2 {
+      width: 237px;
+      left: 35px;
+    }
+    .font3 {
+      width: 212px;
+      left: 41px;
+    }
+    .font4 {
+      width: 254px;
+      left: 28px;
+    }
+    .font5 {
+      width: 251px;
+      left: 28px;
     }
     .tip {
       font-size: 30px;
-      font-family: 'ZonaPro';
+      font-family: 'SourceHanSansLight';
       font-weight: 400;
       color: #ffffff;
     }
@@ -167,11 +209,11 @@ const getTips = () => {
   }
 }
 .bg1 {
-  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background: url(../../../../../assets/img/culture/zixinback.png);
   background-size: 100% 100%;
 }
 .bg2 {
-  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background: url(../../../../../assets/img/culture/siweiluojiback.png);
   background-size: 100% 100%;
 }
 .bg3 {
@@ -179,11 +221,11 @@ const getTips = () => {
   background-size: 100% 100%;
 }
 .bg4 {
-  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background: url(../../../../../assets/img/culture/wendangback.png);
   background-size: 100% 100%;
 }
 .bg5 {
-  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background: url(../../../../../assets/img/culture/xiangmuback.png);
   background-size: 100% 100%;
 }
 </style>
diff --git a/src/views/Index/components/Culture/index.vue b/src/views/Index/components/Culture/index.vue
index 18ae02e..fe6a2ce 100644
--- a/src/views/Index/components/Culture/index.vue
+++ b/src/views/Index/components/Culture/index.vue
@@ -122,6 +122,7 @@ const showEmpty = ref(false)
         font-size: 18px;
         font-weight: 300;
         color: #646a73;
+        font-family: 'SourceHanSansLight';
       }
     }
     .card_list {
diff --git a/src/views/Index/components/Service/index.vue b/src/views/Index/components/Service/index.vue
index c574dfc..16d6637 100644
--- a/src/views/Index/components/Service/index.vue
+++ b/src/views/Index/components/Service/index.vue
@@ -5,23 +5,27 @@
       <div class="content">
         <div class="main">
           <h1 class="big_title">
-            一站式 <span class="blue_font">产品研发/设计服务</span>
+            <span class="blue_font"
+              >产品研发&nbsp;/&nbsp;设计&nbsp;/&nbsp;量产</span
+            >&nbsp;&nbsp;一站式服务
           </h1>
           <p class="article" id="a">
-            产品梦工厂一家公司全部帮您搞定，减少供应商数<br />量就能防止供应商
-            <span class="blue_font">扯皮/推诿</span>帮您省心省力还能帮<br />
-            您 &nbsp; &nbsp;<span class="blue_font">节省30%</span>&nbsp;
-            &nbsp;的项目投入。
+            产品梦工厂一家公司全部帮您搞定<br />减少供应商数量就能防止供应商
+            <span class="blue_font">扯皮/推诿</span><br />帮您<span
+              class="blue_font"
+              >省心、省力</span
+            ><br />还能帮您 &nbsp;
+            <span class="blue_font">节省30%的项目投入</span>
           </p>
         </div>
       </div>
       <div class="card_wrapper">
-        <Card title="工业设计" title_en="industrial design" i="1" />
-        <Card title="结构设计" title_en="Structural Design" i="2" />
-        <Card title="软件研发" title_en="Software development" i="3" />
-        <Card title="硬件研发" title_en="Hardware R&D" i="4" />
-        <Card title="样机制作" title_en="Prototype production" i="5" />
-        <Card title="产品量产" title_en="volume production" i="6" />
+        <Card title="工业设计" title_en="INDUSTRIAL DESIGN" i="1" />
+        <Card title="结构设计" title_en="STRUCTURAL DESIGN" i="2" />
+        <Card title="硬件研发" title_en="HARDWARE DEVELOPMENT" i="4" />
+        <Card title="软件研发" title_en="SOFTWARE DEVELOPMENT" i="3" />
+        <Card title="样机制作" title_en="PROTOTYPE PRODUCTION" i="5" />
+        <Card title="产品量产" title_en="VOLUME PRODUCTION" i="6" />
       </div>
       <div class="bottom_container" id="bottom_container">
         <p id="bottom_font_save">Save 30%</p>
@@ -67,7 +71,7 @@ const showEmpty = ref(false)
       .main {
         position: absolute;
         left: 182px;
-        top: 80px;
+        top: 180px;
         font-size: 30px;
         font-weight: bold;
         color: #000000;
@@ -90,9 +94,10 @@ const showEmpty = ref(false)
         .article {
           margin-top: 34px;
           font-size: 20px;
-          font-weight: 300;
+          font-weight: 800;
           color: #808080;
-          line-height: 32px;
+          line-height: 38px;
+          font-family: 'SourceHanSansLight';
         }
         .blue_font {
           color: $theme_color;
diff --git a/src/views/Index/components/SoftHardwareSummary/index.vue b/src/views/Index/components/SoftHardwareSummary/index.vue
index a51d416..260cecd 100644
--- a/src/views/Index/components/SoftHardwareSummary/index.vue
+++ b/src/views/Index/components/SoftHardwareSummary/index.vue
@@ -143,6 +143,11 @@ const showEmpty = ref(false)
           color: #ffffff;
         }
       }
+      .card_wrap:hover {
+        .img {
+          transform: scale(1.3);
+        }
+      }
       .bg1 {
         background: url(../../../../assets/img/hardware/1back.png);
         background-size: 100% 100%;