feat(qualification): 实现荣誉资质页面滑动功能

- 新增 qualification-v1.vue 组件，用于展示荣誉资质列表
- 在 qualification.vue 中实现滑动功能，添加左右滑动按钮和逻辑
- 优化 common-content.vue 样式，增加内容区域样式
- 调整 qualification-box.vue 样式，限制图片最大宽度
- 新增多张荣誉资质图片资源

.eslintrc.js

@@ -4,13 +4,13 @@ module.exports = {
     node: true
   },
   extends: ['plugin:vue/essential', '@vue/prettier'], //需要dev依赖里安装eslint-config-prettier
-  rules: {
+  // rules: {
-    //'off'或'0'：关闭 'warn'或'1'：警告 "error"或者"2"：报错
+  //   //'off'或'0'：关闭 'warn'或'1'：警告 "error"或者"2"：报错
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'error',
+  //   'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'error',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'error',
+  //   'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'error',
-    //下面是重要设置，错误标记
+  //   //下面是重要设置，错误标记
-    'prettier/prettier': 'error'
+  //   'prettier/prettier': 'error'
-  },
+  // },
   parserOptions: {
     parser: 'babel-eslint'
   }

src/components/common-content.vue

@@ -15,7 +15,7 @@ export default {
     <div class="title">
       <h2>{{ title }}</h2>
     </div>
-    <div>
+    <div class="content">
       <slot> default slot </slot>
     </div>
   </div>
@@ -40,5 +40,13 @@ export default {
       margin-top: 19px
     }
   }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+  }
 }
 </style>

src/views/qualification/components/qualification-box.vue

@@ -45,8 +45,6 @@ export default {
 <style lang="scss" scoped>
 .box-container {
   padding: 30px;
-  width: 395px;
-  height: 190px;
   display: flex;
   // align-items: stretch;
   justify-content: space-between;
@@ -64,6 +62,7 @@ export default {
     img {
       object-fit: contain;
       height: 100%;
+      max-width: 100px;
     }
 
   }

src/views/qualification/qualification-v1.vue

@@ -0,0 +1,82 @@
+<script>
+import CommonBanner from '@/components/common-banner.vue'
+import CommonContent from '@/components/common-content.vue'
+import QualificationBox from './components/qualification-box.vue'
+
+export default {
+  name: "qualification",
+  components: {
+    CommonBanner,
+    CommonContent,
+    QualificationBox
+  },
+  data() {
+    return {
+      src: require('@/assets/images/pages/qualification/bg.webp'),
+      title: '荣誉资质',
+      eTitle: 'COMPANY PROFILE',
+      content: '荣誉见证实力，公司得到专业机构、社会公众认可，荣获多项行业殊荣。',
+      profiles_v1: [{
+        year: '2024',
+        content: '《幸福悦享终身寿险（分红型）》荣获2023-2024&nbsp;“金口碑·年度寿险保险产品”。',
+      }, {
+        year: '2023',
+        content: '幸福人寿荣获金融界第十二届“金智奖·杰出寿险公司”。',
+        img: require('@/assets/images/pages/qualification/g1.webp')
+      }, {
+        year: '2023',
+        content: '第七届金融品牌影响力大会，幸福人寿荣获“金诺奖·中国金融品牌创新典范”。',
+        img: require('@/assets/images/pages/qualification/g2.webp'),
+        offset: "0 ,20px"
+      }, {
+        year: '2023',
+        content: '幸福人寿荣获ADMEN国际大奖“IP营销类实战金案”。',
+      }, {
+        year: '2023',
+        content: '2023全球保险品牌大会暨“燕梳奖”年度盛典，幸福人寿荣获“保险业卓越品牌营销奖”、“保险业品牌官优秀组织奖”。',
+        img: require('@/assets/images/pages/qualification/g3.webp'),
+        offset: "0, 20px"
+      }, {
+        year: "2023",
+        content: "《幸福财富鑫享》养老年金保险荣获“金口碑·年度年金保险产品奖”。"
+      }, {
+        year: "2023",
+        content: "“RPA技术在寿险中介业务管理中的应用”项目，幸福人寿荣获“2023年度中国保险业数字化转型优秀案例奖”。"
+      }, {
+        year: "2023",
+        content: "在“第十六届中国保险文化与品牌创新论坛暨第六届中国保险康养产业创新论坛”上，《幸福慧享终身寿险》荣获“年度推荐终身寿险保险产品奖”，《幸福尊享终身寿险》荣获“年度推荐资产配置保险产品奖”。"
+      }, {
+        year: "2022",
+        content: "幸福人寿荣获金融界第十一届“金智奖·杰出保险品牌奖”。",
+        img: require('@/assets/images/pages/qualification/g1.webp')
+      }, {
+        year: "2023",
+        content: "幸福人寿凭借“以房养老”反向抵押养老保险，成功入选环球网“2022环球趋势案例”。"
+      }]
+    }
+  },
+  mounted() {
+    alert(1)
+  }
+}
+</script>
+
+<template>
+  <div :style="{ backgroundColor: '#F5F7FA', paddingBottom: '130px' }">
+    <common-banner ref="banner" :src="src" :title="title" :eTitle="eTitle" :content="content" />
+    <common-content title="品牌&服务荣誉" ref="content">
+      <div class="list">
+        <qualification-box v-for="(item, index) in profiles_v1" :key="index" :year="item.year" :content="item.content"
+          :offset="item.offset" :img="item.img" />
+      </div>
+    </common-content>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 13px 10px;
+}
+</style>

src/views/qualification/qualification.vue

@@ -16,7 +16,32 @@ export default {
       title: '荣誉资质',
       eTitle: 'COMPANY PROFILE',
       content: '荣誉见证实力，公司得到专业机构、社会公众认可，荣获多项行业殊荣。',
-      profiles_v1: [{
+      profiles: [{
+        year: "2025",
+        content: "幸福人寿荣获金融消保与服务创新优秀案例—“金融消费者信息保护优秀案例”"
+      }, {
+        year: "2025",
+        content: "幸福人寿连续九年获得中国保险行业协会颁发的“中国保险业年度好新闻奖”",
+        img: require('@/assets/images/pages/qualification/g6.webp')
+      },
+      {
+        year: '2024',
+        content: '幸福人寿荣获金融界第十三届“金智奖·杰出保险服务”奖。',
+        img: require('@/assets/images/pages/qualification/g1.webp')
+      }, {
+        year: '2024',
+        content: '"新浪中国·保险新质生产力高峰 论坛上”,幸福人寿荣获“鼎元奖·年度品牌价值成长保险公司”',
+        img: require('@/assets/images/pages/qualification/g8.webp')
+      }, {
+        year: '2024',
+        content: '“全球金融品牌大会”暨“燕梳奖”年度盛典，幸福人寿荣膺“最佳品牌营销奖”',
+        img: require('@/assets/images/pages/qualification/g7.webp'),
+        offset: "0 ,20px"
+      }, {
+        year: '2024',
+        content: '金貔貅·2024第五届银保合作与发展论坛暨“金貔貅”银保系列奖项颁奖典礼上，幸福人寿荣获“2024年度金牌银保渠道品牌力奖”、“2024年度金牌银保渠道创新力奖”。',
+      },
+      {
         year: '2024',
         content: '《幸福悦享终身寿险（分红型）》荣获2023-2024 “金口碑·年度寿险保险产品”。',
       }, {
@@ -31,7 +56,8 @@ export default {
       }, {
         year: '2023',
         content: '幸福人寿荣获ADMEN国际大奖“IP营销类实战金案”。',
-      }, {
+      },
+      {
         year: '2023',
         content: '2023全球保险品牌大会暨“燕梳奖”年度盛典，幸福人寿荣获“保险业卓越品牌营销奖”、“保险业品牌官优秀组织奖”。',
         img: require('@/assets/images/pages/qualification/g3.webp'),
@@ -52,28 +78,119 @@ export default {
       }, {
         year: "2023",
         content: "幸福人寿凭借“以房养老”反向抵押养老保险，成功入选环球网“2022环球趋势案例”。"
-      }]
+      }],
+      swiper: {
+        index: 0,
+        gap: "200px",
+        leftIcon: require('@/assets/images/pages/qualification/left.webp'),
+        rightIcon: require('@/assets/images/pages/qualification/right.webp')
+      }
     }
   },
+  computed: {
+    pages() {
+      return Math.ceil(this.profiles.length / 6)
+    },
+    currentPage() {
+      const start = (this.swiper.index - 1) * 6
+      const end = start + 6
+      return this.profiles.slice(start, end)
+    }
+  },
+  methods: {
+    getCurrentPage(index) {
+      const start = (index - 1) * 6
+      const end = start + 6
+      return this.profiles.slice(start, end)
+    },
+    handleLeft() {
+      this.swiper.index--
+    },
+    handleRight() {
+      this.swiper.index++
+    }
+  },
+  watch: {
+    'swiper.index': {
+      handler() {
+        if (this.swiper.index < 0) {
+          this.swiper.index = this.pages - 1
+          return
+        }
+        if (this.swiper.index > this.pages - 1) {
+          this.swiper.index = 0
+          return
+        }
+
+        const items = this.$refs.swiperList.children
+        console.log(this.swiper.index, items);
+        for (const element of items) {
+          element.style.transform = `translateX(calc(-${this.swiper.index * 100}% ))`;
+        }
+
+      }
+    }
+  },
+  mounted() {
+    document.body.style.backgroundColor = '#F5F7FA'
+  },
+  beforeDestroy() {
+    document.body.style.backgroundColor = '#fff'
+  }
 }
 </script>
 
 <template>
-  <div :style="{ backgroundColor: '#F5F7FA' }">
+  <div class="q-container" :style="{ backgroundColor: '#F5F7FA', paddingBottom: '130px' }">
-    <common-banner ref="banner" :src="src" :title="title" :eTitle="eTitle" :content="content" />
+    <common-banner :src="src" :title="title" :eTitle="eTitle" :content="content" />
-    <common-content title="品牌&服务荣誉" ref="content">
+    <common-content title="品牌&服务荣誉">
-      <div class="list">
+      <div class="swiper">
-        <qualification-box v-for="(item, index) in profiles_v1" :key="index" :year="item.year" :content="item.content"
+        <div class="swiper-left" @click="handleLeft">
-          :offset="item.offset" :img="item.img" />
+          <img class="swiper-icon" :src="swiper.leftIcon" alt="left icon">
+        </div>
+        <div class="swiper-list" ref="swiperList">
+          <div v-for="(item) in pages" :key="item" class="swiper-list-item">
+            <qualification-box v-for="(item, index) in getCurrentPage(item)" :key="index" :year="item.year"
+              :content="item.content" :offset="item.offset" :img="item.img" />
+          </div>
+        </div>
+        <div class="swiper-right" @click="handleRight">
+          <img class="swiper-icon" :src="swiper.rightIcon" alt="right icon">
+        </div>
       </div>
     </common-content>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.list {
+.swiper {
+  width: 75%;
+  display: flex;
+  align-items: center;
+
+  .swiper-list {
+    width: 100%;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(100%, 1fr));
+    scroll-behavior: smooth;
+    scroll-snap-type: mandatory;
+  }
+}
+
+.swiper-list-item {
+  // transition: transform 0.2s linear;
+  width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   gap: 13px 10px;
 }
+
+.swiper-icon {
+  position: relative;
+  z-index: 1;
+  width: 34px;
+  margin: 0 41px;
+}
 </style>