荣誉展示自适应调整

 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-18 16:26:32
+ * @LastEditTime: 2024-10-22 13:45:54
  * @FilePath: /hager/src/views/about/honors.vue
  * @Description: 文件描述
 -->
@@ -15,17 +15,28 @@
         </el-breadcrumb>
       </div>
     </hager-box>
-    <hager-box>
     <div :class="['top-img', is_xs ? 'xs' : '']"></div>
-    </hager-box>
-    <hager-box>
+    <hager-box v-if="!is_xs">
       <div class="select-btn-box">
         <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
         <div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
         <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
       </div>
     </hager-box>
-    <hager-box v-for="(item, index) in years_list" :key="index">
+    <div v-else class="select-btn-box" style="padding: 1rem;">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div @click="onClickBtn(0)" :class="['btn xs', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
+        </el-col>
+        <el-col :span="8">
+          <div @click="onClickBtn(1)" :class="['btn xs', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
+        </el-col>
+        <el-col :span="8">
+          <div @click="onClickBtn(2)" :class="['btn xs', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
+        </el-col>
+      </el-row>
+    </div>
+    <hager-box v-if="!is_xs" v-for="(item, index) in years_list" :key="index">
       <p class="list-title">{{ item.year }}年</p>
       <div class="list-wrapper">
         <div class="card" v-for="(x, idx) in item.list" :key="idx">
@@ -39,6 +50,34 @@
         </div>
       </div>
     </hager-box>
+    <div v-if="is_xs" v-for="(item, index) in years_list" :key="index" style="padding: 1rem;">
+      <p class="list-title">{{ item.year }}年</p>
+      <swiper class="swiper"
+        :ref="'mySwiper' + item.id"
+        :options="swiperOption"
+        @slideChange="onSlideChange(item)"
+      >
+        <swiper-slide v-for="(x, idx) in item.list" :key="idx">
+          <div class="list-wrapper-mini">
+            <div class="card">
+              <div class="card-image-box">
+                <div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
+              </div>
+              <div class="card-content">
+                <h3>{{ x.title }}</h3>
+                <p>{{ x.content }}</p>
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div v-if="item.list.length > item.slidesPerView || is_xs" class="xs-control">
+        <div>
+          <i :class="['el-icon-arrow-left', item.activeIndex === 0 ? 'disabled' : '']" @click="prevBtn(item)"></i>
+          <i :class="['el-icon-arrow-right', item.reach_end ? 'disabled' : '']" @click="nextBtn(item)"></i>
+        </div>
+      </div>
+    </div>
     <hager-box>
       <hager-load-more></hager-load-more>
     </hager-box>
@@ -57,6 +96,7 @@ export default {
     return {
       active_idx: 0,
       years_list: [{
+        id: '1',
         year: '2022',
         list: [{
           img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
@@ -66,8 +106,20 @@ export default {
           img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
           title: '中国建筑学会建筑电气分会',
           content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
-        }]
         }, {
+          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
+          title: '金牌合作单位',
+          content: '由浙江省土木建筑学会建筑电气学术委员会等单位主办的2022年浙江省建筑电气学术年会，在浙江杭州成功举办。海格电气受邀参加年会，并荣获“金牌合作单位”荣誉称号。'
+        }, {
+          img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
+          title: '中国建筑学会建筑电气分会',
+          content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
+        }],
+        activeIndex: 0,
+        reach_end: false,
+        slidesPerView: 2,
+      }, {
+        id: '2',
         year: '2023',
         list: [{
           img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
@@ -77,17 +129,89 @@ export default {
           img: 'https://cdn.ipadbiz.cn/hager/img/WX20241018-161943@2x.png',
           title: '中国建筑学会建筑电气分会',
           content: '海格电气凭借在建筑电气行业的应用成果与专业地位，荣获由中国建筑学会建筑电气分会颁发的“铂金合作单位'
-        }]
-      }]
+        }],
+        activeIndex: 0,
+        reach_end: false,
+        slidesPerView: 2,
+      }],
+      swiperOption: {
+        slidesPerView: 2,
+        spaceBetween: 20,
+        preventClicks : true,
+        slideToClickedSlide: false,
+        touchRatio: 0,
+        breakpoints: {
+          1480: {
+            slidesPerView: 5,
+            spaceBetween: 30
+          },
+          1024: {
+            slidesPerView: 5,
+            spaceBetween: 30
+          },
+          768: {
+            slidesPerView: 3,
+            spaceBetween: 20
+          },
+          640: {
+            slidesPerView: 2,
+            spaceBetween: 10
+          },
+          320: {
+            slidesPerView: 1,
+            spaceBetween: 10
+          },
+          160: {
+            slidesPerView: 1,
+            spaceBetween: 0
+          }
+        }
+      },
     }
   },
   mounted () {
-
+    this.years_list.forEach((item) => {
+      this.$nextTick(() => {
+        const swiperRef = this.$refs[`mySwiper${item.id}`];
+        if (swiperRef && swiperRef[0].$swiper) {
+          swiperRef[0].$swiper.on('breakpoint', (swiper) => {
+            // breakpoint时 显示的条数
+            item.slidesPerView = swiper.slidesPerView;
+          });
+        }
+      });
+    });
   },
   methods: {
     onClickBtn (idx) {
       this.active_idx = idx;
+    },
+    prevBtn (item) {
+      this.$nextTick(() => {
+        const swiperRef = this.$refs[`mySwiper${item.id}`];
+        if (swiperRef && swiperRef[0].$swiper) {
+          swiperRef[0].$swiper.slidePrev();
+        }
+      });
+    },
+    nextBtn (item) {
+      this.$nextTick(() => {
+        const swiperRef = this.$refs[`mySwiper${item.id}`];
+        if (swiperRef && swiperRef[0].$swiper) {
+          swiperRef[0].$swiper.slideNext();
         }
+      });
+    },
+    onSlideChange (item) {
+      item.activeIndex = this.$refs[`mySwiper${item.id}`][0].$swiper.activeIndex;
+      const isEnd = this.$refs[`mySwiper${item.id}`][0].$swiper.isEnd;
+
+      if (isEnd) {
+        item.reach_end = true;
+      } else {
+        item.reach_end = false;
+      }
+    },
   }
 }
 </script>
@@ -102,13 +226,15 @@ export default {
       background-repeat: no-repeat;
       margin: 2rem 0;
       &.xs {
-        // background-size: contain;
-        height: 8rem;
+        height: 12rem;
       }
     }
 
     .select-btn-box {
       margin-bottom: 2rem;
+      &.xs {
+        margin-bottom: 0;
+      }
       .btn {
         width: 8rem;
         height: 2rem;
@@ -117,6 +243,9 @@ export default {
         display: inline-block;
         padding: 0.5rem 0;
         margin-right: 1rem;
+        &.xs {
+          width: 100%;
+        }
         &.active {
           background-color: @primary-color;
           color: #fff;
@@ -206,5 +335,52 @@ export default {
         margin-right: 0;
       }
     }
+
+    .list-wrapper-mini {
+      margin-bottom: 1rem;
+      .card-image-box {
+        padding: 1rem;
+        background-color: #E3F1F7;
+      }
+      .card-image {
+        // width: 100%;
+        height: 17rem;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+      .card-content {
+        background-color: #F7F7F7;
+        padding: 2rem 1.5rem;
+        height: 12rem;
+        overflow: scroll;
+        h3 {
+          color: @secondary-color;
+          font-size: 1rem;
+          margin: 0;
+          margin-bottom: 0.5rem;
+        }
+        p {
+          font-size: 0.95rem;
+          line-height: 1.8;
+        }
+      }
+    }
+
+    .xs-control {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 1rem;
+      i {
+        font-size: 1.35rem;
+        color: #EE6D10;
+        &:hover {
+          cursor: pointer;
+        }
+        &.disabled {
+          color: #ccc;
+        }
+      }
+    }
   }
 </style>