✨ feat(首页产品中心): 自适应改造

hookehuyr
Commit 225380cdde90067d1570f93e0b1f2dbdf5bfd5fd 225380cd 1 parent 15bda2ba
Showing 2 changed files with 60 additions and 22 deletions
src/components/common/hagerH1.vue
src/views/index.vue
--- a/src/components/common/hagerH1.vue
View file @225380c
+++ b/src/components/common/hagerH1.vue
View file @225380c
@@ -6,7 +6,7 @@
  * @Description: 文件描述
 -->
 <template>
-  <div :class="['hagerH1', is_xs ? 'xs' : '']">
+  <div :class="['hagerH1']">
     <p class="h1">{{ title }}</p>
     <p class="sub">{{ sub }}</p>
   </div>
--- a/src/views/index.vue
View file @225380c
+++ b/src/views/index.vue
View file @225380c
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-09 16:42:27
+ * @LastEditTime: 2024-10-09 17:43:10
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -47,25 +47,28 @@
       </div>
     </hager-box>
     <hager-box class="box-2n" @screen-width="handleScreenWidth">
-      <hager-h1 title="解决方案" sub="Solution" :width="screen_width"></hager-h1>
+      <hager-h1 title="解决方案" sub="Solution"></hager-h1>
       <div :class="['hager-solution', is_xs ? 'xs' : '']">
-        <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div>
+        <div @click="goToSolution(item)" :class="['solution-item', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div>
-        <div v-if="!is_xs" class="solution-item other">Other解决方案</div>
+        <!-- <div v-if="!is_xs" class="solution-item other">Other解决方案</div> -->
       </div>
       <div class="xs-control" v-if="is_xs">
-        <div><i class="el-icon-arrow-left" @click="prevBtn"></i> <i class="el-icon-arrow-right" @click="nextBtn"></i></div>
+        <div><i class="el-icon-arrow-left" @click="prevBtn(solution_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(solution_list)"></i></div>
       </div>
     </hager-box>
     <hager-box class="box-n">
       <hager-h1 title="产品中心" sub="Product Center"></hager-h1>
-      <div class="hager-product-center">
+      <div :class="['hager-product-center', is_xs ? 'xs' : '']">
-        <div v-for="(item, index) in 4" :key="index" class="product-item">
+        <div v-for="(item, index) in product_list" :key="index" :class="['product-item', is_xs ? 'xs' : '']">
-          <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
+          <el-image style="height: 14rem;" :src="item.src" fit="cover"></el-image>
-          <p style="margin-top: 1rem;">atS三型特决井天</p>
+          <p style="margin-top: 1rem;">{{ item.title }}</p>
         </div>
       </div>
-      <div style="display: flex; justify-content: center; margin-top: 2rem;">
+      <div :class="['hager-product-center-more', is_xs ? 'xs' : '']">
         <hager-more></hager-more>
+        <div class="xs-control" v-if="is_xs">
+          <div><i class="el-icon-arrow-left" @click="prevBtn(product_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(product_list)"></i></div>
+        </div>
       </div>
     </hager-box>
     <hager-box class="box-2n">
@@ -147,7 +150,20 @@ export default {
       }, {
         src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
         title: '4住宅解决方案'
-      }]
+      }],
+      product_list: [{
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '三型特决井天'
+      }, {
+        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        title: '三型特决井天'
+      }, {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '三型特决井天'
+      }, {
+        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        title: '三型特决井天'
+      }],
     }
   },
   async mounted () {
@@ -181,13 +197,13 @@ export default {
       this.is_xs = width < 768;
       this.screen_width = width;
     },
-    prevBtn () {
+    prevBtn (list) {
-      const last = this.solution_list.pop(); // 移除最后一个元素
+      const last = list.pop(); // 移除最后一个元素
-      this.solution_list.unshift(last); // 将最后一个元素添加到数组开头
+      list.unshift(last); // 将最后一个元素添加到数组开头
     },
-    nextBtn () {
+    nextBtn (list) {
-      const first = this.solution_list.shift(); // 移除第一个元素
+      const first = list.shift(); // 移除第一个元素
-      this.solution_list.push(first); // 将第一个元素添加到数组末尾
+      list.push(first); // 将第一个元素添加到数组末尾
     },
   },
 }
@@ -267,7 +283,7 @@ export default {
       // transition: transform 0.3s ease-in-out;
       &:hover {
         // transform: scale(1.05);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         cursor: pointer;
       }
       &.other {
@@ -342,11 +358,18 @@ export default {
       }
     }
   }
+
   .hager-product-center {
     margin-top: 2rem;
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
     gap: 1.5rem; /* 每个项目之间的间距 */
+    &.xs {
+      display: flex;
+      overflow: hidden; /* 超出部分隐藏 */
+      width: 100vw; /* 容器宽度适应屏幕 */
+      gap: 1rem;
+    }
     .product-item {
       height: auto;
       padding: 1.5rem;
@@ -354,13 +377,28 @@ export default {
       color: #333;
       border-radius: 8px;
       background-color: #f3f3f3;
-      transition: transform 0.3s ease-in-out;
+      // transition: transform 0.3s ease-in-out;
       &:hover {
         cursor: pointer;
-        transform: scale(1.05);
+        // transform: scale(1.05);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      }
+      &.xs {
+        flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
+        // padding: 0 20px;
+        // box-sizing: border-box;
       }
     }
   }
+
+  .hager-product-center-more {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+    &.xs {
+      justify-content: space-between;
+      padding-left: 20%;
+    }
+  }
 }
 </style>