123

src/common/utils.js

@@ -1,5 +1,10 @@
 const scaleFunc = (id, scale) => {
+  if (['#case_detail_container', '#hardware_detail_container'].includes(id)) {
+    document.querySelector(id).style['transform-origin'] = 'center top'
+  } else {
     document.querySelector(id).style['transform-origin'] = 'center center'
+  }
+
   document.querySelector(id).style.transform = `scale(${scale})`
   handleBottomFont(id, scale)
   handleImgScale(id, scale)

src/components/Trumbs/index.vue

@@ -2,9 +2,9 @@
   <div class="trumbs_container">
     <swiper
       :slidesPerView="7"
-      :spaceBetween="43"
       :freeMode="true"
       :modules="modules"
+      :autoHeight="true"
       @swiper="onSwiper"
       @slideChange="onSlideChange"
       class="trumbs_swiper"
@@ -14,7 +14,7 @@
           ? case_detail_img_data[industry_id]
           : hard_img_data[hardware_id]"
         :key="item.id"
-        style="background: none; height: 108px; width: 194px !important"
+        style="background: none; width: auto !important"
       >
         <div class="img_card">
           <img :src="item.picUrl" class="img" alt="" />
@@ -75,11 +75,10 @@ const onSwiper = swiper => {
   .img_card {
     min-width: 194px;
     width: 194px;
-    // height: 100%;
     height: 108px;
     position: relative;
     .img {
-      width: 194px;
+      // width: 100%;
       width: 194px;
     }
     .dialog_text {

src/style.scss

@@ -74,9 +74,6 @@ body {
   background: #fff;
   box-sizing: border-box;
   /* Center slide text vertically */
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
   img {
     display: block;
     width: 100%;
@@ -134,6 +131,8 @@ body {
 
 .case_detail_swiper {
   position: relative;
+  width: 100%;
+  height: 100%;
   .swiper-pagination {
     display: block;
     position: absolute;

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

@@ -16,21 +16,25 @@
                   }}
                 </p>
               </div>
+              <div class="case_swiper_wrap">
                 <swiper
                   :pagination="true"
                   :modules="modules"
+                  :autoHeight="true"
                   class="case_detail_swiper"
-                style="background: none"
                 >
                   <swiper-slide
                     v-for="item in case_detail_list[industry_id] &&
                     case_detail_list[industry_id][example_id]?.swiperList"
                     :key="item.id"
                   >
+                    <div class="swiper_div_wrap">
                       <img :src="item.picUrl" class="img_swiper" alt="" />
+                    </div>
                   </swiper-slide>
                 </swiper>
               </div>
+            </div>
             <div class="placeholder">
               <div
                 class="right_detail"
@@ -123,32 +127,33 @@ const mouseleave = function () {
 
 <style lang="scss" scoped>
 .wrap {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: $common_bg;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  padding-bottom: 50px;
   .empty {
+    width: 100%;
     min-height: 90px;
   }
   .flex_center {
     flex: 1;
+    overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     .case_detail_container {
-      width: 100%;
+      max-width: 100vw;
       height: 100%;
-      .empty {
-        min-height: 90px;
-      }
       .content {
         box-sizing: border-box;
         width: 100%;
-        padding: 20px 153px 60px 153px;
+        height: 100%;
+        padding: 40px 153px 0 153px;
         display: flex;
         justify-content: space-between;
         flex-direction: column;
@@ -162,13 +167,23 @@ const mouseleave = function () {
           .left_swiper {
             width: 1024px;
             position: relative;
-            .case_detail_swiper {
-              width: 100%;
-              height: auto;
+            flex: 1;
+            display: flex;
+            // justify-content: space-between;
+            flex-direction: column;
+            .case_swiper_wrap {
+              // flex: 1;
             }
+            .swiper_div_wrap {
+              // width: 1024px;
+              width: 100%;
+              // height: 576px;
+              overflow: hidden;
               .img_swiper {
                 width: 1024px;
-              height: auto;
+                height: 576px;
+                object-fit: cover;
+              }
             }
             .header_intro {
               min-height: 80px;
@@ -191,8 +206,8 @@ const mouseleave = function () {
           }
           .placeholder {
             flex: 1;
-            height: auto;
             position: relative;
+            height: 656px;
             .right_detail {
               transition-property: all;
               transition-duration: 0.7s;

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

@@ -59,7 +59,7 @@
           </div>
           <div class="pic_list">
             <div class="scroll_container_case mb4" id="scroll_container_case_1">
-              <div class="img_card" v-for="item in 20" :key="item">
+              <div class="img_card" v-for="item in 30" :key="item">
                 <img class="pic" :src="A1" alt="" />
                 <div class="dialog_text">
                   <div class="btn">查看详情</div>
@@ -75,7 +75,7 @@
               </div>
             </div>
             <div class="scroll_container_case mb4" id="scroll_container_case_3">
-              <div class="img_card" v-for="item in 20" :key="item">
+              <div class="img_card" v-for="item in 30" :key="item">
                 <img class="pic" :src="A1" alt="" />
                 <div class="dialog_text">
                   <div class="btn">查看详情</div>

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

@@ -106,7 +106,7 @@ const getTips = () => {
   height: 625px;
   .hold_wrap {
     box-sizing: border-box;
-    background: rgba(0, 0, 0, 0.63);
+    background: rgba(0, 0, 0, 0.5);
     height: 100%;
     padding: 46px 45px 169px 45px;
     display: flex;

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

@@ -16,21 +16,26 @@
                   }}
                 </p>
               </div>
+              <div class="case_swiper_wrap">
                 <swiper
                   :pagination="true"
                   :modules="modules"
+                  :autoHeight="true"
                   class="case_detail_swiper"
-                style="background: none"
                 >
                   <swiper-slide
                     v-for="item in case_detail_list[hardware_id] &&
-                  case_detail_list[hardware_id][hardwareExampleId]?.swiperList"
+                    case_detail_list[hardware_id][hardwareExampleId]
+                      ?.swiperList"
                     :key="item.id"
                   >
+                    <div class="swiper_div_wrap">
                       <img :src="item.picUrl" class="img_swiper" alt="" />
+                    </div>
                   </swiper-slide>
                 </swiper>
               </div>
+            </div>
             <div class="placeholder">
               <div
                 class="right_detail"
@@ -124,32 +129,33 @@ const mouseleave = function () {
 
 <style lang="scss" scoped>
 .wrap {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: $common_bg;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  padding-bottom: 50px;
   .empty {
+    width: 100%;
     min-height: 90px;
   }
   .flex_center {
     flex: 1;
+    overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     .hardware_detail_container {
-      width: 100%;
+      max-width: 100vw;
       height: 100%;
-      .empty {
-        min-height: 90px;
-      }
       .content {
         box-sizing: border-box;
         width: 100%;
-        padding: 20px 153px 60px 153px;
+        height: 100%;
+        padding: 40px 153px 0 153px;
         display: flex;
         justify-content: space-between;
         flex-direction: column;
@@ -163,13 +169,23 @@ const mouseleave = function () {
           .left_swiper {
             width: 1024px;
             position: relative;
-            .case_detail_swiper {
-              width: 100%;
-              height: auto;
+            flex: 1;
+            display: flex;
+            // justify-content: space-between;
+            flex-direction: column;
+            .case_swiper_wrap {
+              // flex: 1;
             }
+            .swiper_div_wrap {
+              // width: 1024px;
+              width: 100%;
+              // height: 576px;
+              overflow: hidden;
               .img_swiper {
                 width: 1024px;
-              height: auto;
+                height: 576px;
+                object-fit: cover;
+              }
             }
             .header_intro {
               min-height: 80px;
@@ -192,8 +208,8 @@ const mouseleave = function () {
           }
           .placeholder {
             flex: 1;
-            height: auto;
             position: relative;
+            height: 656px;
             .right_detail {
               transition-property: all;
               transition-duration: 0.7s;

src/views/Index/components/ReadWidely/Card/index.vue

@@ -68,7 +68,7 @@ const getBg = () => {
     bottom: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.68);
+    background: rgba(0, 0, 0, 0.5);
     font-size: 24px;
     font-family: 'SourceHanSans';
     font-weight: 500;

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

@@ -65,7 +65,7 @@ const getClass = () => {
   animation-fill-mode: forwards;
   cursor: pointer;
   .dialog {
-    background: rgba(0, 0, 0, 0.68);
+    background: rgba(0, 0, 0, 0.5);
     padding: 43px 30px 34px 60px;
     box-sizing: border-box;
     transition-property: all;
@@ -125,7 +125,7 @@ const getClass = () => {
   border-radius: 10px;
   overflow: hidden;
   .dialog {
-    background: rgba(40, 63, 231, 0.68);
+    background: rgba(40, 63, 231, 0.5);
   }
 }