diff --git a/.eslintrc.js b/.eslintrc.js index 3e1c5e5..f45f701 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -4,13 +4,13 @@ module.exports = { node: true }, extends: ['plugin:vue/essential', '@vue/prettier'], //需要dev依赖里安装eslint-config-prettier - rules: { - //'off'或'0'：关闭 'warn'或'1'：警告 "error"或者"2"：报错 - 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'error', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'error', - //下面是重要设置，错误标记 - 'prettier/prettier': 'error' - }, + // rules: { + // //'off'或'0'：关闭 'warn'或'1'：警告 "error"或者"2"：报错 + // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'error', + // 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'error', + // //下面是重要设置，错误标记 + // 'prettier/prettier': 'error' + // }, parserOptions: { parser: 'babel-eslint' } diff --git a/src/assets/images/pages/qualification/g6.webp b/src/assets/images/pages/qualification/g6.webp new file mode 100644 index 0000000..5ba16a3 Binary files /dev/null and b/src/assets/images/pages/qualification/g6.webp differ diff --git a/src/assets/images/pages/qualification/g7.webp b/src/assets/images/pages/qualification/g7.webp new file mode 100644 index 0000000..c273b45 Binary files /dev/null and b/src/assets/images/pages/qualification/g7.webp differ diff --git a/src/assets/images/pages/qualification/g8.webp b/src/assets/images/pages/qualification/g8.webp new file mode 100644 index 0000000..d1c76df Binary files /dev/null and b/src/assets/images/pages/qualification/g8.webp differ diff --git a/src/assets/images/pages/qualification/left.webp b/src/assets/images/pages/qualification/left.webp new file mode 100644 index 0000000..5e20ff0 Binary files /dev/null and b/src/assets/images/pages/qualification/left.webp differ diff --git a/src/assets/images/pages/qualification/right.webp b/src/assets/images/pages/qualification/right.webp new file mode 100644 index 0000000..196d305 Binary files /dev/null and b/src/assets/images/pages/qualification/right.webp differ diff --git a/src/components/common-content.vue b/src/components/common-content.vue index 98dfb61..71163df 100644 --- a/src/components/common-content.vue +++ b/src/components/common-content.vue @@ -15,7 +15,7 @@ export default {

{{ title }}

-
+
default slot
@@ -40,5 +40,13 @@ export default { margin-top: 19px } } + + .content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + } } diff --git a/src/views/qualification/components/qualification-box.vue b/src/views/qualification/components/qualification-box.vue index 191ea11..3c0c196 100644 --- a/src/views/qualification/components/qualification-box.vue +++ b/src/views/qualification/components/qualification-box.vue @@ -45,8 +45,6 @@ export default { diff --git a/src/views/qualification/qualification.vue b/src/views/qualification/qualification.vue index 733760d..78cd3d8 100644 --- a/src/views/qualification/qualification.vue +++ b/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' + } }