hz/ebiz-sunful-eco-web
1
0
Fork 0
mirror of http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web.git synced 2025-12-07 01:46:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(pc): 优化页面样式和布局

Browse Source 
- 添加全局禁止文本选择样式
- 调整公共横幅组件的默认顶部偏移量
- 优化内容容器样式，添加过渡效果
- 改进时间线和生态页面的样式
- 统一荣誉资质页面样式
- 调整 Vue 配置的公共路径
This commit is contained in:
陈昱达
2025-07-08 11:50:34 +08:00
parent 5a0390012b
commit 8c16ac44e2
7 changed files with 207 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/sass/common.scss
View File

@@ -51,6 +51,12 @@ div:focus {
outline: none;
}
* {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* 标准语法 */
}
a:focus,
a:active {
outline: none;

10
src/components/common-banner.vue
View File

@@ -1,6 +1,6 @@
<script>
export default {
name: "common-intro",
name: 'common-intro',
props: {
src: {
type: String,
@@ -24,15 +24,15 @@ export default {
},
customTop: {
type: String,
default: '50%'
default: '72px'
}
},
}
}
</script>
<template>
<div class="banner-container">
<img :src="src" alt="">
<img :src="src" alt="" />
<div class="banner-text" :style="{ top: customTop }">
<h2 class="eTitle" :style="{ color: isBlackFont ? 'rgba(0, 0, 0, .1)' : 'rgba(252, 252, 252, .1)' }">
{{ eTitle }}
@@ -51,7 +51,7 @@ export default {
.banner-text {
position: absolute;
left: 20%;
transform: translate(0, -50%);
transform: translatez(0);
text-align: left;
}
}

21
src/components/common-content.vue
View File

@@ -1,6 +1,6 @@
<script>
export default {
name: "common-content",
name: 'common-content',
props: {
title: {
type: String,
@@ -10,7 +10,7 @@ export default {
type: String,
default: ''
},
margin:{
margin: {
type: String,
default: '0'
}
@@ -22,7 +22,7 @@ export default {
<div class="content-container flex align-items-c">
<div class="title" :style="{ margin: margin }">
<h2>{{ title }}</h2>
<h3 v-if="subTitle">{{ subTitle }}</h3>
<p class="sub-title" v-if="subTitle">{{ subTitle }}</p>
</div>
<div class="content">
<slot> default slot </slot>
@@ -33,21 +33,23 @@ export default {
<style lang="scss" scoped>
.content-container {
flex-direction: column;
overflow: hidden;
.title {
h2 {
text-align: center;
font-weight: 600;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 30px;
color: #000000;
line-height: 42px;
margin-bottom: 21px;
text-align: center;
font-style: normal;
margin-bottom: 10px;
}
h3 {
.sub-title {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20px;
font-size: 16px;
color: #707070;
line-height: 28px;
text-align: left;
@@ -60,7 +62,6 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
}
}
</style>

2
src/views/development/components/time-line.vue
View File

@@ -37,7 +37,7 @@ export default {
</script>
<template>
<common-banner :src="banner.src" :title="banner.title" :eTitle="banner.eTitle">
<common-banner :src="banner.src" :title="banner.title" :eTitle="banner.eTitle" customTop="72px">
<div class="time-line-container">
<section class="time-line">
<div v-for="time in times" :key="time" @click="handleClick(time)" class="line" :class="{ active: active === time }">

100
src/views/ecology/ecology.vue
View File

@@ -3,7 +3,7 @@ import CommonBanner from '@/components/common-banner.vue'
import CommonContent from '@/components/common-content.vue'
export default {
name: "ecology",
name: 'ecology',
components: {
CommonBanner,
CommonContent
@@ -15,17 +15,20 @@ export default {
src: require('@/assets/images/pages/ecology/bg.webp'),
title: '生态建设',
eTitle: 'ECOLOGICAL CONSTRUCTION',
content: '在“互联网+”时代，幸福人寿本着“以客户为中心”的理念，顺应数字化趋势，以科技领先、拥抱变化为改革发展之道，充分利用股东优势，积极推动市场化、专业化、科技化、差异化、集约化发展，致力于打造“金融+科技+生态”的发展战略格局。',
content:
'在“互联网+”时代，幸福人寿本着“以客户为中心”的理念，顺应数字化趋势，以科技领先、拥抱变化为改革发展之道，充分利用股东优势，积极推动市场化、专业化、科技化、差异化、集约化发展，致力于打造“金融+科技+生态”的发展战略格局。'
},
upgradeContent: {
title: '2025，客户权益重磅升级',
subTitle: '致力于打造“金融+科技+生态”的发展战略格局',
intro: "全力运用金融科技驱动亚务创新，重构以客户为中心的业务体系和运营体系，推动销售变革，形成高效管理，在不断改善客户体验的同时，与合作伙伴一起形成相互赋能的新型生态。"
intro:
'全力运用金融科技驱动亚务创新，重构以客户为中心的业务体系和运营体系，推动销售变革，形成高效管理，在不断改善客户体验的同时，与合作伙伴一起形成相互赋能的新型生态。'
},
ecoContent: {
title: '幸福生态圈',
subTitle: '打造五位一体的生态布局',
intro: "2025年，幸福人寿即将迎来自己18岁的生日，“成人之者，将责成人礼”，18岁的幸福人寿将砺霜成器，勇担重任，重新整合生态体系，重磅升级客户权益体系，围绕“健康无忧、颐养天年、成长护航、财富臻享、乐活人生”，打造五位一体的生态布局，覆盖客户生活的方方面面，响应客户的日常需求。"
intro:
'2025年，幸福人寿即将迎来自己18岁的生日，“成人之者，将责成人礼”，18岁的幸福人寿将砺霜成器，勇担重任，重新整合生态体系，重磅升级客户权益体系，围绕“健康无忧、颐养天年、成长护航、财富臻享、乐活人生”，打造五位一体的生态布局，覆盖客户生活的方方面面，响应客户的日常需求。'
}
}
}
@@ -42,19 +45,21 @@ export default {
</section>
</div>
<!-- 2025，客户权益重磅升级 -->
<common-content margin="100px 0 49px 0" :title="upgradeContent.title" :subTitle="upgradeContent.subTitle">
<common-content margin="60px 0 49px 0" :title="upgradeContent.title" :subTitle="upgradeContent.subTitle">
<div class="upgrade-content content">
<div class="upgrade-content-text">{{ upgradeContent.intro }}</div>
<div class="line"></div>
<img :src="require('@/assets/images/pages/ecology/upgrade.webp')" alt="">
<div class="upgrade-content-text">
<div>{{ upgradeContent.intro }}</div>
</div>
<img :src="require('@/assets/images/pages/ecology/upgrade.webp')" alt="" />
</div>
</common-content>
<!-- 幸福生态圈 -->
<common-content margin="105px 0 40px 0 " :title="ecoContent.title" :subTitle="ecoContent.subTitle">
<img :src="require('@/assets/images/pages/ecology/eco.webp')" alt="">
<img :src="require('@/assets/images/pages/ecology/eco.webp')" alt="" />
<div class="eco-content content">
<div class="line"></div>
<div class="eco-content-text">{{ ecoContent.intro }}</div>
<div class="eco-content-text">
<div>{{ ecoContent.intro }}</div>
</div>
</div>
</common-content>
</div>
@@ -73,15 +78,19 @@ export default {
color: #fff;
font-weight: bold;
border-radius: 10px;
position: absolute;
//position: absolute;
height: 80px;
top: 90%;
left: 20%;
//top: 90%;
//left: 20%;
width: 60%;
margin: 0 auto;
margin-top: -30px;
background-color: #c81d2d;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
}
@@ -97,25 +106,35 @@ export default {
color: rgb(112, 112, 112);
width: 30%;
position: absolute;
top: 40%;
left: 6%;
}
.line {
width: 50px;
height: 3px;
border-radius: 10px;
background-color: #c81d2d;
position: absolute;
bottom: 20%;
left: 6%;
top: 86px;
left: 40px;
div:first-child {
position: relative;
padding-bottom: 30px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #707070;
line-height: 25px;
text-align: left;
font-style: normal;
&::after {
content: '';
position: absolute;
width: 45px;
height: 3px;
border-radius: 10px;
background-color: #c81d2d;
bottom: 0;
left: 0;
}
}
}
img {
margin-top: 50px;
width: 96%;
//margin-top: 50px;
width: 100%;
}
}
.eco-content {
@@ -133,12 +152,33 @@ export default {
}
.eco-content-text {
border: 2px solid #c81d2d;
//border: 2px solid #c81d2d;
width: 60%;
color: rgb(112, 112, 112);
margin-top: 30px;
padding: 22px 22px 44px 22px;
div {
position: relative;
padding-bottom: 30px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #707070;
line-height: 25px;
text-align: left;
font-style: normal;
&::after {
content: '';
position: absolute;
width: 45px;
height: 3px;
border-radius: 10px;
background-color: #c81d2d;
bottom: 0;
left: 0;
}
}
}
}
</style>

28
src/views/qualification/components/qualification-box.vue
View File

@@ -1,7 +1,6 @@
<script>
export default {
name: "qualification-box",
name: 'qualification-box',
props: {
year: {
type: String,
@@ -20,8 +19,7 @@ export default {
default: '0px 0px'
}
},
mounted() {
}
mounted() {}
}
</script>
@@ -32,18 +30,17 @@ export default {
{{ year }}
<span>年</span>
</div>
<div class="content">
{{ content }}
</div>
<div class="content" v-html="content"></div>
</div>
<div class="img flex align-items-c justify-content-c" v-if="img" :style="{ transform: `translate(${offset})` }">
<img :src="img" alt="">
<img :src="img" alt="" />
</div>
</div>
</template>
<style lang="scss" scoped>
.box-container {
transition: all 0.3s ease-in-out;
padding: 30px;
display: flex;
// align-items: stretch;
@@ -51,6 +48,13 @@ export default {
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
margin: 5px;
cursor: pointer;
outline: 1px solid transparent;
&:hover {
outline: 1px solid #c81d2d;
box-shadow: 0px 5px 9px 0px rgba(200, 29, 45, 0.08);
}
.intro {
flex: 1;
@@ -64,7 +68,6 @@ export default {
height: 100%;
max-width: 100px;
}
}
}
@@ -86,10 +89,15 @@ export default {
white-space: nowrap;
line-height: 20px;
}
}
.content {
margin-top: 17px;
font-family: PingFangSC;
font-size: 14px;
color: #000000;
line-height: 22px;
text-align: left;
font-style: normal;
}
</style>

170
src/views/qualification/qualification.vue
View File

@@ -4,7 +4,7 @@ import CommonContent from '@/components/common-content.vue'
import QualificationBox from './components/qualification-box.vue'
export default {
name: "qualification",
name: 'qualification',
components: {
CommonBanner,
CommonContent,
@@ -16,72 +16,88 @@ export default {
title: '荣誉资质',
eTitle: 'COMPANY PROFILE',
content: '荣誉见证实力，公司得到专业机构、社会公众认可，荣获多项行业殊荣。',
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: '"新浪中国·保险新质生产力高峰&nbsp;论坛上”,幸福人寿荣获“鼎元奖·年度品牌价值成长保险公司”',
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&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环球趋势案例”。"
}],
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: '"新浪中国·保险新质生产力高峰&nbsp;论坛上”,幸福人寿荣获“鼎元奖·年度品牌价值成长保险公司”',
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&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环球趋势案例”。'
}
],
swiper: {
index: 0,
gap: "200px",
gap: '200px',
leftIcon: require('@/assets/images/pages/qualification/left.webp'),
rightIcon: require('@/assets/images/pages/qualification/right.webp')
}
@@ -123,11 +139,10 @@ export default {
}
const items = this.$refs.swiperList.children
console.log(this.swiper.index, items);
console.log(this.swiper.index, items)
for (const element of items) {
element.style.transform = `translateX(calc(-${this.swiper.index * 100}% ))`;
element.style.transform = `translateX(calc(-${this.swiper.index * 100}% ))`
}
}
}
},
@@ -142,20 +157,26 @@ export default {
<template>
<div class="q-container" :style="{ backgroundColor: '#F5F7FA', paddingBottom: '130px' }">
<common-banner customTop="65%" :src="src" :title="title" :eTitle="eTitle" :content="content" />
<common-banner customTop="72px" :src="src" :title="title" :eTitle="eTitle" :content="content" />
<common-content margin="56px 0 38px 0" title="品牌&服务荣誉">
<div class="swiper">
<div class="swiper-left" @click="handleLeft">
<img class="swiper-icon" :src="swiper.leftIcon" alt="left icon">
<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 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">
<img class="swiper-icon" :src="swiper.rightIcon" alt="right icon" />
</div>
</div>
</common-content>
@@ -189,6 +210,7 @@ export default {
.swiper-icon {
position: relative;
cursor: pointer;
z-index: 1;
width: 34px;
margin: 0 41px;