123

src/common/utils.js

@@ -5,20 +5,28 @@ export const handleScreenAuto = (showEmpty, id) => {
     if (clientHeight < 1080) {
       const scale = clientHeight / 1080
       document.querySelector(id).style.transform = `scale(${scale})`
+      handleBottomFont(id, scale)
+      handleImgScale(id, scale)
       showEmpty.value = false
     } else {
       if (clientHeight >= 1764) {
         const scale = 1323 / clientHeight
         document.querySelector(id).style.transform = `scale(${scale})`
+        handleBottomFont(id, scale)
+        handleImgScale(id, scale)
         showEmpty.value = false
       } else {
         if (clientHeight >= 1323) {
           const scale = 1176 / clientHeight
           document.querySelector(id).style.transform = `scale(${scale})`
+          handleBottomFont(id, scale)
+          handleImgScale(id, scale)
           showEmpty.value = false
         } else {
           const scale = 1080 / clientHeight
           document.querySelector(id).style.transform = `scale(${scale})`
+          handleBottomFont(id, scale)
+          handleImgScale(id, scale)
           showEmpty.value = false
         }
       }
@@ -27,3 +35,22 @@ export const handleScreenAuto = (showEmpty, id) => {
     showEmpty.value = true
   }
 }
+
+const handleBottomFont = (id, scale) => {
+  if (id == '#service_container') {
+    document.getElementById('bottom_container').style.transform = `scaleX(${
+      1 / scale
+    })`
+    document.getElementById(
+      'bottom_font_save',
+    ).style.transform = `scale(${scale})`
+  }
+}
+
+const handleImgScale = (id, scale) => {
+  if (id == '#culture_container') {
+    document.getElementById('bg_img_scale').style.transform = `scale(${
+      1 / scale
+    })`
+  }
+}

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

@@ -1,7 +1,7 @@
 <template>
   <div class="wrap">
     <div class="culture_container" id="culture_container">
-      <img :src="Background" class="bg_img" />
+      <img :src="Background" class="bg_img" id="bg_img_scale" />
       <div class="empty" v-if="showEmpty"></div>
       <div class="contract_title">
         <p class="line"></p>
@@ -64,13 +64,13 @@ const showEmpty = ref(false)
     // background: $common_bg;
     position: relative;
     transform-style: preserve-3d;
-    overflow: hidden;
     display: flex;
     justify-content: space-between;
     flex-direction: column;
     .bg_img {
       position: absolute;
       width: 100vw;
+      display: block;
       height: 100vw;
       left: 0;
       top: 0;

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

@@ -23,7 +23,9 @@
         <Card title="样机制作" title_en="Prototype production" i="5" />
         <Card title="产品量产" title_en="volume production" i="6" />
       </div>
-      <div class="bottom_container">Save 30%</div>
+      <div class="bottom_container" id="bottom_container">
+        <p id="bottom_font_save">Save 30%</p>
+      </div>
     </div>
   </div>
 </template>