关于海格首页自适应页面调整

 /*
  * @Date: 2022-07-26 09:49:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 16:35:25
+ * @LastEditTime: 2024-10-21 16:45:53
  * @FilePath: /hager/src/common/mixin.js
  * @Description: 文件描述
  */
@@ -37,7 +37,7 @@ export default {
       handleResize() {
         this.screenWidth = $(window).width(); // 更新屏幕宽度
         if (this.screenWidth < 768) {
-          this.top_img_height = '30vh';
+          this.top_img_height = '20vh';
         } else {
           this.top_img_height = '38rem';
         }

 <!--
  * @Date: 2024-10-17 09:22:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-18 17:36:40
+ * @LastEditTime: 2024-10-21 16:55:32
  * @FilePath: /hager/src/views/about/index.vue
  * @Description: 文件描述
 -->
@@ -17,7 +17,7 @@
         </div>
       </div>
     </hager-box>
-    <hager-box class="box-n" style="margin-top: 2rem;">
+    <hager-box v-if="!is_xs" class="box-n" style="margin-top: 2rem;">
       <el-row v-for="(item, index) in intro_list" :key="index" style="margin-bottom: 3rem;">
         <el-col :span="12">
           <div v-if="index % 2 === 0" class="about-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
@@ -47,6 +47,21 @@
         </el-col>
       </el-row>
     </hager-box>
+    <div v-else>
+      <div v-for="(item, index) in intro_list" :key="index" style="padding: 1rem;">
+        <div class="about-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
+        <div class="about-box">
+          <div class="title">
+            <p class="c">{{ item.c_title }}</p>
+            <p class="e">{{ item.e_title }}</p>
+          </div>
+          <div class="introduce" v-clamp="3">{{ item.content }}</div>
+          <div class="more">
+            <div class="btn" @click="goTo(item.link)">MORE</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -130,6 +145,10 @@ export default {
       height: 20rem;
       background-repeat: no-repeat;
       background-size: cover;
+      background-position: center;
+      &.xs {
+        height: 15rem;
+      }
     }
     .about-box {
       background-color: #F7F7F7;