123

src/common/utils.js

@@ -42,16 +42,21 @@ export const handleScreenAuto = id => {
 
 // 还需要将缩放后的content 相对于flex_center容器进行充满
 export const handleScreenToFlexCenter = (contentId, flexId) => {
-  // const originEle = document.querySelector(contentId)
-  // const targetEle = document.querySelector(flexId)
-  // // 需要判断缩放后的高度是否超过了容器高度
-  // const scale =
-  //   originEle.clientWidth / originEle.clientHeight <
-  //   targetEle.clientWidth / targetEle.clientHeight
-  //     ? originEle.clientWidth / targetEle.clientWidth
-  //     : originEle.clientHeight / targetEle.clientHeight
-  // document.querySelector(contentId).style['transform-origin'] = 'center center'
-  // document.querySelector(contentId).style.transform = `scale(${scale})`
+  const clientWidth = document.documentElement.clientWidth
+  const clientHeight = document.documentElement.clientHeight
+  if (clientWidth <= 1600 && clientHeight < 1080) {
+    const originEle = document.querySelector(contentId)
+    const targetEle = document.querySelector(flexId)
+    // 需要判断缩放后的高度是否超过了容器高度
+    const scale =
+      originEle.clientWidth / originEle.clientHeight <
+      targetEle.clientWidth / targetEle.clientHeight
+        ? originEle.clientWidth / targetEle.clientWidth
+        : originEle.clientHeight / targetEle.clientHeight
+    document.querySelector(contentId).style['transform-origin'] =
+      'center center'
+    document.querySelector(contentId).style.transform = `scale(${scale})`
+  }
 }
 
 const handleBottomFont = (id, scale) => {

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

@@ -176,7 +176,7 @@ const showEmpty = ref(true)
         flex-direction: column;
         font-family: 'SourceHanSans';
         background-size: 100% 100%;
-        padding: 40px 0 0 0;
+        padding: 50px 0 0 0;
         box-sizing: border-box;
         position: relative;
         white-space: nowrap;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="wrap">
     <div class="empty" v-if="showEmpty"></div>
-    <div class="flex_center">
+    <div class="flex_center" id="recruit_container_flex_center">
       <div class="recruit_container" id="recruit_container">
         <div class="contract_title" id="post_page_title_ani">
           <p class="line"></p>
@@ -41,7 +41,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { handleScreenAuto } from '@/common/utils'
+import { handleScreenAuto, handleScreenToFlexCenter } from '@/common/utils'
 import { postList } from '@/mock/post'
 import Detail from './Detail'
 import Card from './Card'
@@ -55,8 +55,15 @@ const mouseleave = () => {
   // showDetail.value = false
 }
 onMounted(() => {
-  handleScreenAuto('#recruit_container')
-  window.onresize = handleScreenAuto('#recruit_container')
+  const func = () => {
+    handleScreenAuto('#recruit_container')
+    handleScreenToFlexCenter(
+      '#recruit_container',
+      '#recruit_container_flex_center',
+    )
+  }
+  func()
+  window.onresize = func
 })
 const showEmpty = ref(true)
 </script>