首页显示调整

hookehuyr
Commit 4d44f0f61a81f0deb31ab8b704f355d0e6366790 4d44f0f6 1 parent b83d2028
Showing 1 changed file with 45 additions and 39 deletions
src/views/index.vue
--- a/src/views/index.vue
View file @4d44f0f
+++ b/src/views/index.vue
View file @4d44f0f
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 11:12:56
+ * @LastEditTime: 2024-10-20 21:33:43
  * @FilePath: /hager/src/views/index.vue
- * @Description: 文件描述
+ * @Description: 首页
 -->
 <template>
   <div class="hager-container">
@@ -84,8 +84,9 @@
       </div>
     </hager-box>
     <hager-box class="box-n">
+      <!-- TODO: 待完善, 产品分类跳转，没有更多分类了？ -->
       <hager-h1 title="产品中心" sub="Product"></hager-h1>
-      <div v-if="!is_xs" class="hager-product-center">
+      <!-- <div v-if="!is_xs" class="hager-product-center">
         <el-row :gutter="15">
           <el-col :span="6" v-for="(item, index) in product_list" :key="index">
             <div @click ="goToProduct(item)" class="product-item">
@@ -97,17 +98,20 @@
         <div class="more-box" style="margin-top: 2rem;">
           <hager-more></hager-more>
         </div>
-      </div>
+      </div> -->
-      <div v-else>
+      <div>
         <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
           <swiper-slide v-for="(item, index) in product_list" :key="index">
             <div @click="goToProduct(item)" class="product-item xs">
-              <div class="img" :style="{ height: '8rem', margin: '1rem', backgroundImage: 'url('+item.src+')' }"></div>
+              <div class="img" :style="{ height: '8rem', backgroundImage: 'url('+item.src+')' }"></div>
               <p style="margin: 0.5rem;">{{ item.title }}</p>
             </div>
           </swiper-slide>
         </swiper>
-        <div class="hager-product-center-more xs">
+        <div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
+          <hager-more></hager-more>
+        </div>
+        <div v-else class="hager-product-center-more xs">
           <hager-more></hager-more>
           <div class="xs-control">
             <div>
@@ -217,7 +221,6 @@ export default {
         content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
         sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
       }],
-      // is_xs: false,
       screen_width: 0,
       solution_list: [{
         src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
@@ -239,32 +242,39 @@ export default {
         title: '4住宅解决方案'
       }],
       product_list: [{
-        src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
+        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: 'hw01 空气断路器'
+        title: '配电产品'
+      }, {
+        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
+        title: '成套产品'
       }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
+        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: 'h3+ 智能塑壳断路器'
+        title: '开关面板'
       }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
+        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: 'ats自动转换开关'
+        title: '智能控制'
       }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
+        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: 'KNX智能控制模块'
+        title: '能源管理'
       }],
       swiperOption: {
         slidesPerView: 2,
-        spaceBetween: 50,
+        spaceBetween: 20,
         preventClicks : true,
         slideToClickedSlide: false,
         touchRatio: 0,
         breakpoints: {
+          1480: {
+            slidesPerView: 5,
+            spaceBetween: 30
+          },
           1024: {
-            slidesPerView: 4,
+            slidesPerView: 5,
-            spaceBetween: 40
+            spaceBetween: 30
           },
           768: {
             slidesPerView: 3,
-            spaceBetween: 30
+            spaceBetween: 20
           },
           640: {
             slidesPerView: 2,
@@ -284,30 +294,21 @@ export default {
       activeProductIndex: 0,
       reach_solution_end: false,
       reach_product_end: false,
+      productSlidesPerView: 5,
     }
   },
   async mounted () {
-    // const container = document.querySelector('.container');
+    this.$nextTick(() => {
-    // const boxes = container.querySelectorAll('.box');
+      this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
-
+        // breakpoint时 显示的条数
-    // // 如果超过11个项目，设置最后一个为特殊样式
+        this.productSlidesPerView = swiper.slidesPerView
-    // if (boxes.length > 11) {
+      });
-    //   boxes[boxes.length - 1].classList.add('other');
+    });
-    // }
-    // this.$nextTick(() => {
-    //   console.warn(this.$refs.mySolutionSwiper);
-    //   this.$refs.mySolutionSwiper.$swiper?.on('click', (evt) => {
-    //     // evt.preventDefault();
-    //     let index = this.$refs.mySolutionSwiper.$swiper.clickedIndex;
-    //     this.goToSolution(this.solution_list[index]);
-    //   });
-    // });
   },
   watch: {
     // 监听$route对象的变化
     $route(to, from) {
       console.log('路由变化了：', to.path);
-      // 在此处执行你想要的逻辑
     }
   },
   methods: {
@@ -344,7 +345,10 @@ export default {
     },
     goToProduct (v) {
       this.$router.push({
-        path: '/product/detail'
+        path: '/product/category',
+        query: {
+          id: v.id
+        }
       });
     },
     handleScreenWidth(width) {
@@ -573,10 +577,10 @@ 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);
     }
     &.xs {
@@ -592,6 +596,8 @@ export default {
       background-size: cover;      /* 相当于 object-fit: cover */
       background-position: center; /* 让图片居中 */
       background-repeat: no-repeat;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
     }
   }