123

src/common/utils.js

@@ -10,6 +10,7 @@ const scaleFunc = (id, scale) => {
   handleImgScale(id, scale)
   handleCooperation(id, scale)
   handleContactUs(id, scale)
+  handleSwiper(id, scale)
 }
 
 export const handleScreenAuto = id => {
@@ -82,6 +83,25 @@ const handleContactUs = (id, scale) => {
   }
 }
 
+const handleSwiper = (id, scale) => {
+  if (id == '#case_picture') {
+    document.querySelector('#wrapper_case_picture_id').style[
+      'transform-origin'
+    ] = 'center top'
+    document.getElementById(
+      'wrapper_case_picture_id',
+    ).style.transform = `scale(${1 / scale})`
+  }
+  if (id == '#hardware_picture_list') {
+    document.querySelector('#hardware_swiper_scale_id').style[
+      'transform-origin'
+    ] = 'center top'
+    document.getElementById(
+      'hardware_swiper_scale_id',
+    ).style.transform = `scale(${1 / scale})`
+  }
+}
+
 const handleCooperation = (id, scale) => {
   if (id == '#cooperation_container') {
     document.getElementById('contract_bg_coop').style['transform-origin'] =
@@ -89,6 +109,8 @@ const handleCooperation = (id, scale) => {
     document.getElementById('contract_bg_coop').style.transform = `scale(${
       1 / scale
     })`
+    document.getElementById('contract_real_coop').style['transform-origin'] =
+      'center 0'
     document.getElementById(
       'contract_real_coop',
     ).style.transform = `scale(${0.8})`

src/views/Index/components/CasePictureList/index.vue

@@ -57,7 +57,7 @@
               >量产
             </div>
           </div>
-          <div class="pic_list">
+          <div class="pic_list" id="wrapper_case_picture_id">
             <div class="scroll_container_case mb4" id="scroll_container_case_1">
               <div class="img_card" v-for="item in 30" :key="item">
                 <img class="pic" :src="A1" alt="" />
@@ -165,7 +165,7 @@ const showEmpty = ref(true)
         flex-direction: column;
         font-family: 'SourceHanSans';
         background-size: 100% 100%;
-        padding: 40px 55px 20px 55px;
+        padding: 40px;
         box-sizing: border-box;
         position: relative;
         white-space: nowrap;

src/views/Index/components/Cooperation/index.vue

@@ -21,7 +21,6 @@
 </template>
 
 <script setup>
-import Back from '@/assets/img/hezuo/biaotiback.png'
 import { ref, onMounted } from 'vue'
 import { handleScreenAuto } from '@/common/utils'
 onMounted(() => {
@@ -68,7 +67,7 @@ const showEmpty = ref(true)
         flex-direction: column;
         font-family: 'SourceHanSans';
         background-size: 100% 100%;
-        padding: 89px;
+        padding: 40px;
         box-sizing: border-box;
         position: relative;
         white-space: nowrap;
@@ -106,13 +105,13 @@ const showEmpty = ref(true)
       }
       .contract {
         flex: 1;
-        padding: 62px 149px;
+        padding: 10px 149px;
         box-sizing: border-box;
         display: flex;
         background: url(../../../../assets/img/hezuo/back.png);
         background-size: 100% 100%;
         object-fit: contain;
-        align-items: center;
+        align-items: flex-start;
         justify-content: center;
         .real_img {
           width: 100%;

src/views/Index/components/HardwareSummary/index.vue

@@ -57,7 +57,7 @@
               >量产
             </div>
           </div>
-          <div class="pic_list">
+          <div class="pic_list" id="hardware_swiper_scale_id">
             <div class="scroll_container_case mb4" id="scroll_container_case_4">
               <div class="img_card" v-for="item in 20" :key="item">
                 <img class="pic" :src="A1" alt="" />