✨ feat: 轮播图自适应左右切换按钮样式到头判断

 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-11 13:30:57
+ * @LastEditTime: 2024-10-11 17:28:51
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -58,7 +58,7 @@
         </div>
       </div>
       <div v-else>
-        <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption">
+        <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSolutionSlideChange">
           <swiper-slide v-for="(item, index) in solution_list" :key="index">
             <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.src+')' }">
               <p @click="goToSolution(item)">{{ item.title }}</p>
@@ -67,8 +67,8 @@
         </swiper>
         <div class="xs-control">
           <div>
-            <i class="el-icon-arrow-left" @click="prevSolutionBtn()"></i>
-            <i class="el-icon-arrow-right" @click="nextSolutionBtn()"></i>
+            <i :class="['el-icon-arrow-left', activeSolutionIndex === 0 ? 'disabled' : '']"@click="prevSolutionBtn()"></i>
+            <i :class="['el-icon-arrow-right', reach_solution_end ? 'disabled' : '']" @click="nextSolutionBtn()"></i>
           </div>
         </div>
       </div>
@@ -82,7 +82,7 @@
         </div>
       </div>
       <div v-else>
-        <swiper ref="myProductSwiper" class="swiper" :options="swiperOption">
+        <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">
               <el-image style="height: 8rem; margin: 1rem; margin-bottom: 0;" :src="item.src" fit="cover"></el-image>
@@ -94,8 +94,8 @@
           <hager-more></hager-more>
           <div class="xs-control">
             <div>
-              <i class="el-icon-arrow-left" @click="prevProductBtn()"></i>
-              <i class="el-icon-arrow-right" @click="nextProductBtn()"></i>
+              <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
+              <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
             </div>
           </div>
         </div>
@@ -241,7 +241,11 @@ export default {
             spaceBetween: 0
           }
         }
-      }
+      },
+      activeSolutionIndex: 0,
+      activeProductIndex: 0,
+      reach_solution_end: false,
+      reach_product_end: false,
     }
   },
   async mounted () {
@@ -302,6 +306,26 @@ export default {
     nextProductBtn () {
       this.$refs.myProductSwiper.$swiper.slideNext();
     },
+    onSolutionSlideChange (swiper) {
+      this.activeSolutionIndex = swiper.activeIndex;
+      const isEnd = swiper.isEnd;
+
+      if (isEnd) {
+        this.reach_solution_end = true;
+      } else {
+        this.reach_solution_end = false;
+      }
+    },
+    onProductSlideChange (swiper) {
+      this.activeProductIndex = swiper.activeIndex;
+      const isEnd = swiper.isEnd;
+
+      if (isEnd) {
+        this.reach_product_end = true;
+      } else {
+        this.reach_product_end = false;
+      }
+    },
   },
 }
 </script>
@@ -423,6 +447,9 @@ export default {
       &:hover {
         cursor: pointer;
       }
+      &.disabled {
+        color: #ccc;
+      }
     }
   }
   .news-container {

@@ -4,15 +4,37 @@
     <hager-box class="box-n">
       <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
       <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
-      <div class="hager-industry-solutions">
-        <div @click="goToSolution(item)" class="card" v-for="(item, index) in 10" :key="index">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
+      <div v-if="!is_xs" class="hager-industry-solutions">
+        <div @click="goToSolution(item)" class="card" v-for="(item, index) in solution_list" :key="index">
+          <img :src="item.src" alt="学校图片" class="card-image">
           <div class="card-content">
-            <div style="display: flex; align-items: center; justify-content: space-between;">
-              <span>住宅解决方案</span>
+            <div class="card-title" style="">
+              <span>{{ item.title }}</span>
               <i class="el-icon-right"></i>
             </div>
-            <p>Residential Solution Case</p>
+            <p class="card-sub">{{ item.sub }}</p>
+          </div>
+        </div>
+      </div>
+      <div v-else style="margin: 1rem 0;">
+        <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange">
+          <swiper-slide v-for="(item, index) in solution_list" :key="index">
+            <div @click="goToSolution(item)" class="card" style="margin-bottom: 1rem;">
+              <img :src="item.src" alt="学校图片" class="card-image">
+              <div class="card-content">
+                <div class="card-title">
+                  <span>{{ item.title }}</span>
+                  <i class="el-icon-right"></i>
+                </div>
+                <p class="card-sub">{{ item.sub }}</p>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+        <div class="xs-control">
+          <div>
+            <i :class="['el-icon-arrow-left', activeIndex === 0 ? 'disabled' : '']" @click="prevSolutionBtn()"></i>
+            <i :class="['el-icon-arrow-right', reach_end ? 'disabled' : '']" @click="nextSolutionBtn()"></i>
           </div>
         </div>
       </div>
@@ -31,7 +53,70 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-
+      solution_list: [{
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '1住宅解决方案',
+        sub: 'Residential Solution Case'
+      }, {
+        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        title: '2住宅解决方案',
+        sub: 'Residential Solution Case'
+      }, {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '3住宅解决方案',
+        sub: 'Residential Solution Case'
+      }, {
+        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        title: '4住宅解决方案',
+        sub: 'Residential Solution Case'
+      }, {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '1住宅解决方案',
+        sub: 'Residential Solution Case'
+      }, {
+        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        title: '2住宅解决方案',
+        sub: 'Residential Solution Case'
+      }, {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '3住宅解决方案',
+        sub: 'Residential Solution Case'
+      }, {
+        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        title: '4住宅解决方案',
+        sub: 'Residential Solution Case'
+      }],
+      swiperOption: {
+        slidesPerView: 2,
+        spaceBetween: 50,
+        preventClicks : true,
+        slideToClickedSlide: false,
+        touchRatio: 0,
+        breakpoints: {
+          1024: {
+            slidesPerView: 4,
+            spaceBetween: 40
+          },
+          768: {
+            slidesPerView: 3,
+            spaceBetween: 30
+          },
+          640: {
+            slidesPerView: 2,
+            spaceBetween: 20
+          },
+          320: {
+            slidesPerView: 2,
+            spaceBetween: 10
+          },
+          160: {
+            slidesPerView: 1,
+            spaceBetween: 0
+          }
+        }
+      },
+      activeIndex: 0,
+      reach_end: false,
     }
   },
   mounted () {
@@ -40,9 +125,28 @@ export default {
   methods: {
     goToSolution (v) {
       this.$router.push({
-        path: '/solution/detail'
+        path: '/solution/detail',
+        query: {
+          id: v.id
+        }
       });
+    },
+    prevSolutionBtn () {
+      this.$refs.mySolutionSwiper.$swiper.slidePrev();
+    },
+    nextSolutionBtn () {
+      this.$refs.mySolutionSwiper.$swiper.slideNext();
+    },
+    onSlideChange (swiper) {
+      this.activeIndex = swiper.activeIndex;
+      const isEnd = swiper.isEnd;
+
+      if (isEnd) {
+        this.reach_end = true;
+      } else {
+        this.reach_end = false;
       }
+    },
   }
 }
 </script>
@@ -61,7 +165,7 @@ export default {
       text-align: center;
       color: #FFF;
       border-radius: 8px;
-      background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
+      // background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
       background-size: cover;
       background-position: top center;
       transition: transform 0.3s ease-in-out;
@@ -71,6 +175,7 @@ export default {
         cursor: pointer;
       }
     }
+  }
   .card {
     // width: 300px;
     border-radius: 10px;
@@ -80,33 +185,50 @@ export default {
     margin: 0;
     transition: transform 0.3s ease-in-out;
     &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      // transform: scale(1.05);
+      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       cursor: pointer;
     }
     .card-image {
       width: 100%;
-        height: auto;
+      height: 12rem;
       object-fit: cover;
     }
 
     .card-content {
       padding: 15px;
-      }
-
-      .card h3 {
-        font-size: 18px;
+      .card-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 1rem;
         color: #0072c6;
         margin-bottom: 10px;
       }
-
-      .card p {
-        font-size: 14px;
+      .card-sub {
+        font-size: 0.85rem;
         color: #333;
         line-height: 1.6;
         margin-bottom: 15px;
       }
     }
   }
+
+  .xs-control {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    i {
+      font-size: 1.35rem;
+      color: #EE6D10;
+      &:hover {
+        cursor: pointer;
+      }
+      &.disabled {
+        color: #ccc;
+      }
+    }
+  }
 }
 </style>