Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
9747be9d by simon
Options

首页部分功能

1 parent 55dc70ff
Inline Side-by-side
Showing 17 changed files with 1077 additions and 270 deletions
......@@ -85,11 +85,13 @@ ul{
height: 100%;
overflow-y: scroll;
line-height: 1.42;
}
&-desc :lang(zh) {
letter-spacing: 2.15px;
&:lang(zh) {
letter-spacing: 2.15px;
}
}
}
&-btn-wrap {
......
......@@ -66,11 +66,12 @@ $borderSize: 6px;
margin-left: 12px;
background: url("~@assets/images/vhis/vhis-btn.png");
&:lang(zh) {
letter-spacing: 1.5px;
}
}
.banner-btn:lang(zh) {
letter-spacing: 1.5px;
}
}
}
......@@ -170,23 +171,27 @@ $borderSize: 6px;
color: $cOrange2;
font-weight: bold;
font-size: 34px;
}
.t1:lang(zh) {
letter-spacing: 6px;
&:lang(zh) {
letter-spacing: 6px;
}
}
.t2 {
font-size: 24px;
line-height: 1.39;
// margin-top: 36px;
max-width: 780px;
margin: 36px auto 0;
}
.t2:lang(zh) {
letter-spacing: 2px;
&:lang(zh) {
letter-spacing: 2px;
}
}
}
// 产品
......@@ -198,12 +203,14 @@ $borderSize: 6px;
color: $cOrange2;
font-size: 36px;
font-weight: bold;
}
.tit:lang(zh) {
letter-spacing: 2.5px;
&:lang(zh) {
letter-spacing: 2.5px;
}
}
.prod {
margin: 24px auto 0;
color: $cOrange2;
......@@ -248,12 +255,14 @@ $borderSize: 6px;
.t1 {
font-size: 22px;
font-weight: bold;
}
.t1:lang(zh) {
letter-spacing: 2px;
&:lang(zh) {
letter-spacing: 2px;
}
}
.more {
display: flex;
margin-top: 6px;
......@@ -267,11 +276,13 @@ $borderSize: 6px;
.c1 {
font-size: 18px;
}
.c1:lang(zh) {
letter-spacing: 1.2px;
&:lang(zh) {
letter-spacing: 1.2px;
}
}
}
.desc {
......@@ -315,12 +326,14 @@ $borderSize: 6px;
color: $cOrange2;
font-size: 36px;
font-weight: bold;
}
.tit:lang(zh) {
letter-spacing: 1.8px;
&:lang(zh) {
letter-spacing: 1.8px;
}
}
.tit-s {
font-size: $fontSize-M2;
color: $cFontGray2;
......@@ -355,10 +368,10 @@ $borderSize: 6px;
@extend .bb;
padding: 24px 40px 24px 40px;
color: $cFontGray3;
}
.tt:lang(zh) {
letter-spacing: 1.12px;
&:lang(zh) {
letter-spacing: 1.12px;
}
}
.tt2 {
......@@ -457,10 +470,10 @@ $borderSize: 6px;
.t1 {
color: $cOrange2;
}
}
.tt:lang(zh) {
letter-spacing: 1.12px;
&:lang(zh) {
letter-spacing: 1.12px;
}
}
.tt2 {
......@@ -591,13 +604,6 @@ $borderSize: 6px;
}
}
// .label:lang(zh) {
// line-height: 1.5;
// }
// .val:lang(zh) {
// line-height: 1.5;
// }
}
&-item-4 {
......@@ -699,11 +705,13 @@ $borderSize: 6px;
margin-right: 48px;
}
}
.cont:lang(zh){
padding-left: 178px;
&:lang(zh){
padding-left: 178px;
}
}
}
}
......
/**
* 页面描述:官网首页
*/
import api from '@/api/api';
import {
httpGet,
httpPost
} from '@/api/fetch-api.js';
import {
mapGetters,
mapActions,
mapState
} from "vuex";
var UA = require("ua-device");
export default {
data() {
return {
key: 'value',
// swiper
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
speed: 1000,
},
bannerList: [],
bannerCandidateList: [],
// 视频
playerOptions: {},
}
},
components: {},
computed: {
...mapState({
isSmallScreen: state => state.isSmallScreen,
isMobile: state => state.isMobile
}),
locale() {
return this.$i18n.locale || 'tc';
},
i18n() {
return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
},
player() {
return this.$refs.videoPlayer.player
},
},
methods: {
toVhis() {
// gotoVHIS(this.locale);
this.$router.push({
path: "/vhis",
query: {
p: "VHIS001"
}
});
},
/**
* 推荐产品
*/
onRecommendHandler(val) {
if (val == 1) {
this.toVhis();
}
if (val == 2) {
this.$router.push({
path: "/custom/service?q=m6"
})
}
if (val == 3) {
this.$router.push({
path: "/custom/product"
})
}
if (val == 4) {
this.$router.push({
path: "/news/list"
})
}
},
/**
* 推荐产品
*/
onMoreNewsHandler() {
this.$router.push({
path: "/news/list"
})
},
/**
* 去新闻详情页面
* 需要带id
*/
toNewsDetail() {
this.$router.push({
path: '/news/detail'
})
},
toProfile() {
this.$router.push({
path: '/profile'
})
},
refreshVideoPlayer() {
let videoUrl = sessionStorage.getItem("_video_url");
let posterUrl = sessionStorage.getItem("_poster_url");
let playerOptions = {
width: 800,
height: 450,
// aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
language: 'en',
// playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度
sources: [{
type: "video/mp4",
// mp4
src: videoUrl,
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: posterUrl,
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
let output = new UA(navigator.userAgent);
let deviceType = output.device.type;
let isMobile = deviceType == "mobile";
// if (this.isSmallScreen) {
if (isMobile) {
playerOptions.aspectRatio = "16:9";
}
this.playerOptions = playerOptions;
},
initData() {
this.fetchBanner().then(res => {
this.bannerCandidateList = res;
this.refreshBanner();
});
this.fetchIndexVideo().then(res => {
this.refreshVideoPlayer();
});
// if (!this.isMobile) {
// window.addEventListener('resize', () => this.refreshVideoPlayer(), false);
// }
},
fetchBanner() {
return new Promise((resolve, reject) => {
httpPost({
url: api.banner
}).then(res => {
resolve(res);
});
});
},
fetchIndexVideo() {
return new Promise((resolve, reject) => {
httpPost({
url: api.indexVideo
}).then(res => {
sessionStorage.setItem("_video_url", res.videoUrl);
sessionStorage.setItem("_poster_url", res.posterUrl);
resolve(res);
});
});
},
refreshBanner() {
let key = this.locale;
if (key == "zh") {
key = "cn";
}
let bannerList = [];
this.bannerCandidateList.forEach(element => {
bannerList.push(element[key]);
});
this.$set(this, 'bannerList', bannerList);
},
btnNavigateTo(type, link) {
switch (type) {
case "none":
break;
case "news":
this.$router.push({
path: "/news/detail",
query: {
c: link
}
});
break;
case "product":
break;
case "vhis":
this.$router.push({
path: "/vhis",
query: {
p: link
}
});
break;
default:
location.href = link;
break;
}
}
},
beforeDestroy() {
// window.removeEventListener('resize', this.refreshVideoPlayer(), false);
},
mounted() {
this.initData();
setTimeout(() => {
// console.log("queryConfigData:", this.$root.queryConfigData);
// console.log("queryConfigData:", window.vueInstance.queryConfigData); // 挂载到windows的访问方法
// 放localStorage直接是localStorage.getItem("queryConfig");
}, 3000)
},
created() {
this.$root.eventBus.$on("langChange", () => {
try {
this.refreshBanner();
} catch (e) { }
});
}
}
@import '@/styles/_support.scss';
.content {
padding-bottom: 27px;
}
.top-space {
height: 27px;
}
.box {
position: relative;
margin-top: $marginMedium;
}
// banner 轮播
.banner-contaner {
width: 100%;
height: 470px;
margin: 0 auto;
position: relative;
z-index: 1;
overflow: hidden;
}
// PC轮播
.banner-pc {
display: block;
position: absolute;
z-index: 1;
left: 50%;
margin-left: -960px;
top: 0;
width: 1920px;
height: 100%;
overflow: hidden;
.banner-img {
width: 100%;
height: 100%;
}
.btn-wrap {
position: absolute;
z-index: 1;
// 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
// 如要调整位置，请调整top,right。如需要右对齐请使用right
// 已用padding适应文本过长的情况(英文等);
// top: 272px;
// left: 1228px;
// top: 310px;
top: 295px;
right: 432px;
display: flex;
.banner-btn {
@extend .pointer;
@extend .bb;
@include btc2(126px, 48px, $fontSizeTitle);
width: auto;
padding: 0 24px;
min-width: 126px;
margin-left: 12px;
background-image: none;
}
}
}
// 移动端轮播
.banner-mobile {
display: none;
.banner-img {
width: 100%;
}
.btn-wrap {
position: absolute;
z-index: 1;
top: 87%;
left: 0;
right: 0;
margin: 0 auto;
display: flex;
justify-content: center;
.banner-btn {
@extend .pointer;
padding: 0 12px;
color: $cOrange;
}
}
}
// 推荐产品
.recommend {
display: flex;
text-align: center;
justify-content: space-between;
flex-wrap: wrap;
&-item {
@extend .bb;
margin-right: $marginSmall;
&:last-child {
margin-right: 0;
}
position: relative;
width: 291px;
// width: 100%;
height: 393px;
border-radius: $borderRadiusSmall;
@extend .box-shadow;
background-color: #fbfbfb;
.img {
width: 100%;
height: 291px;
background-size: cover;
}
.img1 {
background: url("~@/assets/images/index/recommend-1.png") no-repeat center;
background-size: cover;
}
.img2 {
background: url("~@/assets/images/index/recommend-2.png") no-repeat center;
background-size: cover;
}
.img3 {
background: url("~@/assets/images/index/recommend-3.png") no-repeat center;
background-size: cover;
}
.img4 {
background: url("~@/assets/images/index/recommend-4.png") no-repeat center;
background-size: cover;
}
.btn {
position: absolute;
left: 0;
right: 0;
bottom: 36px;
margin: 0 auto;
@include btc2(162px, 48px, 16px);
}
img {
width: 100%;
@include border-top-radius($borderRadius);
}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
// 详情
.detail {
display: flex;
max-width: 1200px;
.txt {
position: relative;
@extend .fcc;
@extend .bb;
@include ellipsis(14);
padding-left: 26px;
flex: 1;
line-height: 2.3;
}
.txt:lang(zh) {
letter-spacing: 1.4px;
}
}
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
left: 360px;
}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
right: 360px;
}
.swiper-container {
height: 100%;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 48px;
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #dcdddd;
}
.swiper-pagination-bullet-active {
width: 12px;
height: 12px;
background-color: $cOrange;
}
.box-shadow {
box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
}
@media (max-width: 1200px) {
.content {
@include content-percent();
}
// 推荐产品
.recommend {
justify-content: center;
&-item {
width: 46% !important;
padding: 0 !important;
margin: 2% !important;
}
}
// 详情
.detail {
display: block;
.vjs-custom-skin {
width: 100%;
}
.txt {
padding: 0;
margin: $marginSmall 0 $marginMedium;
}
}
}
@media (max-width: 768px) {
.content {}
.banner-contaner {
height: auto;
}
.banner-pc {
display: none;
}
.banner-mobile {
display: block;
}
// 推荐产品
.recommend {
&-item {
width: 100% !important;
margin: $marginSmall-M auto !important;
}
}
.box-shadow {
box-shadow: none;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 2px;
}
}
<template>
<div class="page page-index">
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner banner-pc">
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl">
<div class="btn-wrap">
<div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
<div class="banner-btn" v-if="btnItem.n && btnItem.t && btnItem.c" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{backgroundColor:btnItem.c}">{{btnItem.n}}</div>
</div>
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<div class="banner banner-mobile">
<swiper class="swiper" :options="swiperOption">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<img class="banner-img" :src="item.mobileBannerUrl">
<div class="btn-wrap">
<div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}}&nbsp;&gt;</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</div>
<div class="content">
<!-- 推荐产品 -->
<div class="box recommend gird-g">
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t1')}}</div>
<div class="img img1"></div>
</div>
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(3)" class="btn pointer">{{$t('index.recommend.t2')}}</div>
<div class="img img2"></div>
</div>
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t3')}}</div>
<div class="img img3"></div>
</div>
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(4)" class="btn pointer">{{$t('index.recommend.t4')}}</div>
<div class="img img4"></div>
</div>
</div>
<!-- 详情 -->
<div class="box detail">
<video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
</video-player>
<div v-if="$i18n.locale == 'zh'" class="txt">
中国平安人寿保险股份有限公司成立于2002年,是中国平安保险（集团）股份有限公司旗下的重要成员。截至2017年12月31日,平安人寿注册资本为338亿元，在全国拥有42家分公司（含7家电话销售中心）及超过3,300个营业网点,寿险代理人达138.6万名。公司个险、银保、电销、互联网多渠道齐头并进，实现协同发展，运营管理水平及客户体验领先市场，并依托集团“金融+科技”双驱动战略，在合规经营、防范风险的前提下，开启平台经营新时代，持续提升产品、科技两大核心竞争力，推动内含价值及规模持续、健康、稳定增长。
</div>
<div v-else-if="$i18n.locale == 'tc'" class="txt">
中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
</div>
<div v-else class="txt">
Ping An Life Insurance Co., Ltd. of China was founded in 2002. It is an important member of Ping An insurance (Group) Co., Ltd. As of December 31, 2017, Ping An life had a registered capital of 33.8 billion yuan. It has 42 branches (including 7 telemarketing centers) and more than 3300 business outlets nationwide, with 1.386 million life insurance agents. The company's personal insurance, bancassurance, telemarketing and Internet multi-channel go hand in hand to achieve coordinated development, leading the market in operation and management level and customer experience, and relying on the group's "Finance + technology" dual drive strategy, under the premise of compliant operation and risk prevention, to open a new era of platform operation, continuously improve the two core competitiveness of products and technology, and promote the sustainability of embedded value and scale Healthy and stable growth.
</div>
</div>
</div>
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
......@@ -8,12 +8,60 @@ import {
httpGet,
httpPost
} from '@/api/fetch-api.js';
import {
mapGetters,
mapActions,
mapState
} from "vuex";
var UA = require("ua-device");
export default {
data() {
return {
key: 'value',
// swiper
swiperOption: {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
speed: 1000,
},
bannerList: [],
bannerCandidateList: [],
// 导航菜单
tabList: [{
name: "平安“好e時”<br>自願醫保標準計劃",
url: "",
id: 0,
}, {
name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
url: "",
id: 1,
}, {
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
id: 2,
}, {
name: "Ping An GenRich<br>Insurance Plan",
url: "",
id: 3,
}, {
name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
url: "",
id: 4,
}],
curTab: {}
}
},
components: {},
......@@ -26,15 +74,75 @@ export default {
},
},
methods: {
initData() {
this.curTab = this.tabList[0];
this.fetchBanner().then(res => {
this.bannerCandidateList = res;
this.refreshBanner();
});
},
fetchBanner() {
return new Promise((resolve, reject) => {
httpPost({
url: api.banner
}).then(res => {
resolve(res);
});
});
},
refreshBanner() {
let key = this.locale;
if (key == "zh") {
key = "cn";
}
let bannerList = [];
this.bannerCandidateList.forEach(element => {
bannerList.push(element[key]);
});
this.$set(this, 'bannerList', bannerList);
},
btnNavigateTo(type, link) {
switch (type) {
case "none":
break;
case "news":
this.$router.push({
path: "/news/detail",
query: {
c: link
}
});
break;
case "product":
break;
case "vhis":
this.$router.push({
path: "/vhis",
query: {
p: link
}
});
break;
default:
location.href = link;
break;
}
},
// 选择标签
onTabHandler(item) {
this.curTab = item;
}
},
beforeDestroy() {
},
beforeDestroy() {},
mounted() {
this.initData();
},
created() {
this.$root.eventBus.$on("langChange", () => {
try {
} catch (e) { }
this.refreshBanner();
} catch (e) {}
});
}
......
@import '@/styles/_support.scss';
.content {
padding-bottom: 27px;
}
.page {}
.top-space {
height: 27px;
......@@ -16,6 +14,7 @@
// banner 轮播
.banner-contaner {
width: 100%;
// height: 502px;
height: 470px;
margin: 0 auto;
position: relative;
......@@ -32,7 +31,6 @@
margin-left: -960px;
top: 0;
width: 1920px;
height: 100%;
overflow: hidden;
.banner-img {
......@@ -42,26 +40,32 @@
.btn-wrap {
position: absolute;
z-index: 1;
z-index: 2;
// 两个banner图按钮位置不一样，和原先约定的按钮位置固定不一致
// 如要调整位置，请调整top,right。如需要右对齐请使用right
// 已用padding适应文本过长的情况(英文等);
// top: 272px;
// left: 1228px;
// top: 310px;
top: 295px;
right: 432px;
top: 309px;
left: 466px;
display: flex;
.banner-btn {
@extend .pointer;
@extend .bb;
@include btc2(126px, 48px, $fontSizeTitle);
@include btc4(300px, 50px, $fontSizeTitle);
font-size: 22px;
width: auto;
padding: 0 24px;
min-width: 126px;
min-width: 288px;
margin-left: 12px;
background-image: none;
background: url("~@assets/images/vhis/vhis-btn.png");
}
.banner-btn:lang(zh) {
letter-spacing: 1.5px;
}
}
}
......@@ -87,115 +91,159 @@
.banner-btn {
@extend .pointer;
padding: 0 12px;
color: $cOrange;
color: $cOrange2;
}
}
}
// 推荐产品
.recommend {
// 导航菜单切换
.nav-tab {
min-height: 100px;
display: flex;
font-size: 22px;
text-align: center;
justify-content: space-between;
flex-wrap: wrap;
font-weight: bold;
color: $cOrange2;
&-item {
@extend .bb;
width: 1200px;
margin: 0 auto;
margin-right: $marginSmall;
&-item {
@extend .fcc;
border-right: solid 2px #ffffff;
cursor: pointer;
color: #ff6839;
background-color: #fff1ed;
&:last-child {
margin-right: 0;
}
position: relative;
width: 291px;
// width: 100%;
height: 393px;
border-radius: $borderRadiusSmall;
@extend .box-shadow;
background-color: #fbfbfb;
.img {
width: 100%;
height: 291px;
background-size: cover;
}
.img1 {
background: url("~@/assets/images/index/recommend-1.png") no-repeat center;
background-size: cover;
}
.img2 {
background: url("~@/assets/images/index/recommend-2.png") no-repeat center;
background-size: cover;
}
.img3 {
background: url("~@/assets/images/index/recommend-3.png") no-repeat center;
background-size: cover;
}
.img4 {
background: url("~@/assets/images/index/recommend-4.png") no-repeat center;
background-size: cover;
border-right: none;
}
}
&-item-act {
color: #ffffff;
@include linear-bg();
}
}
.btn {
position: absolute;
left: 0;
right: 0;
bottom: 36px;
margin: 0 auto;
// 推荐 为什么选择平安人寿
.recommend {
margin: 100px auto 0;
text-align: center;
position: relative;
@include btc2(162px, 48px, 16px);
}
.tit {
color: $cOrange2;
font-size: 36px;
font-weight: bold;
}
img {
width: 100%;
@include border-top-radius($borderRadius);
}
.features {
display: flex;
justify-content: center;
align-items: center;
margin: 44px auto 0;
&:first-child {
padding-left: 0;
&-item {
position: relative;
text-align: center;
font-size: 22px;
width: 316px;
.icon {
@extend .fcc;
height: 164px;
text-align: center;
}
.desc {
margin-top: 16px;
}
}
}
&:last-child {
padding-right: 0;
.contact-tips {
position: absolute;
bottom: 0;
right: 0;
@include linear-bg();
@extend .fcc;
padding: 0 24px;
height: 52px;
border-radius: 26px;
font-size: 22px;
font-weight: bold;
color: #ffffff;
cursor: pointer;
.icon {
background-image: url('~@/assets/images/index/icon-contact-tips.png');
@extend .bis;
width: 35px;
height: 31px;
margin-top: 4px;
margin-right: 10px;
}
}
}
// 详情
.detail {
display: flex;
max-width: 1200px;
// 线上报价
.quote {
background: url('~@/assets/images/index/index-quote-bg-temp.png') center no-repeat;
width: 100%;
height: 1482px;
;
overflow: hidden;
margin: 52px auto 0;
}
// 联系我们表单
.contact {
position: relative;
background-color: #eff0f0;
padding-top: 100px;
.txt {
position: relative;
@extend .fcc;
@extend .bb;
@include ellipsis(14);
padding-left: 26px;
flex: 1;
line-height: 2.3;
.panel {
display: flex;
}
.panel-left {
.t1 {
font-size: 36px;
color: $cOrange2;
font-weight: bold;
&:lang(zh) {
letter-spacing: 1.8px;
}
}
.t2{
margin-top: 50px;
font-size: 24px;
font-weight: bold;
}
.pic-mobile{
margin-top: 248px;
}
}
.txt:lang(zh) {
letter-spacing: 1.4px;
.panel-right {
@extend .bb;
flex: 1;
padding-left: 40px;
.form{
width: 100%;
// height: 600px;
// background-color: wheat;
}
}
}
}
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
left: 360px;
}
.swiper-button-next {
......@@ -234,31 +282,6 @@
@include content-percent();
}
// 推荐产品
.recommend {
justify-content: center;
&-item {
width: 46% !important;
padding: 0 !important;
margin: 2% !important;
}
}
// 详情
.detail {
display: block;
.vjs-custom-skin {
width: 100%;
}
.txt {
padding: 0;
margin: $marginSmall 0 $marginMedium;
}
}
}
......@@ -277,18 +300,6 @@
display: block;
}
// 推荐产品
.recommend {
&-item {
width: 100% !important;
margin: $marginSmall-M auto !important;
}
}
.box-shadow {
box-shadow: none;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
......
......@@ -14,24 +14,9 @@
</div>
</div>
</swiper-slide>
<!-- <swiper-slide>
<img @click="toVhis" class="banner-img" src="https://ow.go.qudone.com/pingan/upload/cbb6f8bb32eb4fc1aea97d210b0f7536.png">
<div class="btn-wrap">
<div class="banner-btn">产品详情</div>
<div class="banner-btn">在线报价</div>
</div>
</swiper-slide>
<swiper-slide>
<img @click="toVhis" class="banner-img" src="https://ow.go.qudone.com/pingan/upload/fcb27c52c7fb4584b12f9832f1323abe.png">
<div class="btn-wrap">
<div class="banner-btn">产品详情</div>
<div class="banner-btn">在线报价</div>
</div>
</swiper-slide> -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
</swiper>
</div>
......@@ -43,63 +28,69 @@
<div class="banner-btn" v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex" @click="btnNavigateTo(btnItem.t,btnItem.l)" :style="{color:btnItem.c}">{{btnItem.n}}&nbsp;&gt;</div>
</div>
</swiper-slide>
<!-- <swiper-slide>
<img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m1-'+locale+'.jpg')">
<div class="btn-wrap">
<div class="banner-btn">产品详情></div>
<div class="banner-btn">在线报价></div>
</div>
</swiper-slide>
<swiper-slide>
<img @click="toVhis" class="banner-img" :src="require('@/assets/images/index/banner-m2-'+locale+'.jpg')">
<div class="btn-wrap">
<div class="banner-btn">产品详情></div>
<div class="banner-btn">在线报价></div>
</div>
</swiper-slide> -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</div>
<div class="content">
<!-- 推荐产品 -->
<div class="box recommend gird-g">
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t1')}}</div>
<div class="img img1"></div>
</div>
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(3)" class="btn pointer">{{$t('index.recommend.t2')}}</div>
<div class="img img2"></div>
<!-- 导航菜单切换 -->
<div class="nav-tab">
<div @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" class="nav-tab-item" :class="{'nav-tab-item-act':item.id == curTab.id}" :style="'width: calc(100% / '+tabList.length+');'">{{item.name}}</div>
</div>
<!-- 推荐 为什么选择平安人寿 -->
<div class="content recommend">
<div class="tit">為何選擇平安人壽？</div>
<div class="features">
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-1.png" alt="">
</div>
<div class="desc">簡單方便<br>線上客戶服務系統</div>
</div>
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(1)" class="btn pointer">{{$t('index.recommend.t3')}}</div>
<div class="img img3"></div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-2.png" alt="">
</div>
<div class="desc">信心保證<br>服務超過2億客戶</div>
</div>
<div class="recommend-item pure-u-1 pure-u-md-1-2">
<div @click="onRecommendHandler(4)" class="btn pointer">{{$t('index.recommend.t4')}}</div>
<div class="img img4"></div>
<div class="features-item">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-3.png" alt="">
</div>
<div class="desc">國際級<br>風險管理</div>
</div>
</div>
<!-- 详情 -->
<div class="box detail">
<video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
</video-player>
<div v-if="$i18n.locale == 'zh'" class="txt">
中国平安人寿保险股份有限公司成立于2002年,是中国平安保险（集团）股份有限公司旗下的重要成员。截至2017年12月31日,平安人寿注册资本为338亿元，在全国拥有42家分公司（含7家电话销售中心）及超过3,300个营业网点,寿险代理人达138.6万名。公司个险、银保、电销、互联网多渠道齐头并进，实现协同发展，运营管理水平及客户体验领先市场，并依托集团“金融+科技”双驱动战略，在合规经营、防范风险的前提下，开启平台经营新时代，持续提升产品、科技两大核心竞争力，推动内含价值及规模持续、健康、稳定增长。
</div>
<div v-else-if="$i18n.locale == 'tc'" class="txt">
中國平安人壽保險股份有限公司成立於2002年,是中國平安保險（集團）股份有限公司旗下的重要成員。截至2017年12月31日,平安人壽註冊資本為338億元，在全國擁有42家分公司（含7家電話銷售中心）及超過3,300個營業網點,壽險代理人達138.6萬名。公司個險、銀保、電銷、互聯網多渠道齊頭並進，實現協同發展，運營管理水平及客戶體驗領先市場，並依托集團“金融+科技”雙驅動戰略，在合規經營、防範風險的前提下，開啟平臺經營新時代，持續提升產品、科技兩大核心競爭力，推動內含價值及規模持續、健康、穩定增長。
<div class="contact-tips">
<span class="icon"></span>
聯絡我們
</div>
</div>
<!-- 线上报价 -->
<div class="quote"></div>
<!-- 联系我们表单 -->
<div class="contact">
<div class="box-w panel">
<div class="panel-left">
<div class="t1">如欲了解我們的產品，<br>歡迎聯絡我們。</div>
<div class="t2">想了解更多？致電2983 8866^聯絡我們。</div>
<img class="pic-mobile" src="@/assets/images/index/index-mobile.png" alt="">
</div>
<div v-else class="txt">
Ping An Life Insurance Co., Ltd. of China was founded in 2002. It is an important member of Ping An insurance (Group) Co., Ltd. As of December 31, 2017, Ping An life had a registered capital of 33.8 billion yuan. It has 42 branches (including 7 telemarketing centers) and more than 3300 business outlets nationwide, with 1.386 million life insurance agents. The company's personal insurance, bancassurance, telemarketing and Internet multi-channel go hand in hand to achieve coordinated development, leading the market in operation and management level and customer experience, and relying on the group's "Finance + technology" dual drive strategy, under the premise of compliant operation and risk prevention, to open a new era of platform operation, continuously improve the two core competitiveness of products and technology, and promote the sustainability of embedded value and scale Healthy and stable growth.
<div class="panel-right">
<div class="form">
<div class="ipt-wrap2">
<div class="cont">
<input class="ipt" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
......
......@@ -67,11 +67,12 @@ $borderSize: 6px;
margin-left: 12px;
background: url("~@assets/images/vhis/vhis-btn.png");
&:lang(zh) {
letter-spacing: 1.5px;
}
}
.banner-btn:lang(zh) {
letter-spacing: 1.5px;
}
}
}
......@@ -171,23 +172,27 @@ $borderSize: 6px;
color: $cOrange2;
font-weight: bold;
font-size: 34px;
}
.t1:lang(zh) {
letter-spacing: 6px;
&:lang(zh) {
letter-spacing: 6px;
}
}
.t2 {
font-size: 24px;
line-height: 1.39;
// margin-top: 36px;
max-width: 780px;
margin: 36px auto 0;
}
.t2:lang(zh) {
letter-spacing: 2px;
&:lang(zh) {
letter-spacing: 2px;
}
}
}
// 产品
......@@ -199,12 +204,14 @@ $borderSize: 6px;
color: $cOrange2;
font-size: 36px;
font-weight: bold;
}
.tit:lang(zh) {
letter-spacing: 2.5px;
&:lang(zh) {
letter-spacing: 2.5px;
}
}
.prod {
margin: 24px auto 0;
color: $cOrange2;
......@@ -245,12 +252,14 @@ $borderSize: 6px;
.t1 {
font-size: 22px;
font-weight: bold;
}
.t1:lang(zh) {
letter-spacing: 2px;
&:lang(zh) {
letter-spacing: 2px;
}
}
.more {
display: flex;
margin-top: 6px;
......@@ -265,11 +274,13 @@ $borderSize: 6px;
.c1 {
font-size: 18px;
}
.c1:lang(zh) {
letter-spacing: 1.2px;
&:lang(zh) {
letter-spacing: 1.2px;
}
}
}
.desc {
......@@ -313,12 +324,14 @@ $borderSize: 6px;
color: $cOrange2;
font-size: 36px;
font-weight: bold;
}
.tit:lang(zh) {
letter-spacing: 1.8px;
&:lang(zh) {
letter-spacing: 1.8px;
}
}
.tit-s {
font-size: $fontSize-M2;
color: $cFontGray2;
......@@ -350,12 +363,14 @@ $borderSize: 6px;
width: 50%;
padding: 18px 18px 18px 0;
color: $cFontGray3;
}
.tt:lang(zh) {
letter-spacing: 1.12px;
&:lang(zh) {
letter-spacing: 1.12px;
}
}
.label {
background-color: #fef1ed;
padding-left: 100px;
......@@ -389,12 +404,14 @@ $borderSize: 6px;
.t1 {
color: $cOrange2;
}
}
.tt:lang(zh) {
letter-spacing: 1.12px;
&:lang(zh) {
letter-spacing: 1.12px;
}
}
.tt2 {
padding: 50px 64px 26px 50px;
padding: 48px;
......@@ -523,13 +540,6 @@ $borderSize: 6px;
}
}
// .label:lang(zh) {
// line-height: 1.5;
// }
// .val:lang(zh) {
// line-height: 1.5;
// }
}
&-item-4 {
......
......@@ -57,13 +57,12 @@
flex: 1;
display: flex;
align-items: center;
}
.ipt:lang(zh) {
letter-spacing: 1.2px;
&:lang(zh) {
letter-spacing: 1.2px;
}
}
.down-arrow {
position: absolute;
top: 26.4px;
......@@ -106,6 +105,60 @@
}
// 输入框
.ipt-wrap2 {
.ipt {
@extend .bb;
width: 100%;
height: 50px;
border-radius: 5px;
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08);
background-color: #ffffff;
padding: 0 24px;
flex: 1;
display: flex;
align-items: center;
font-size: 22px;
&:lang(zh) {
letter-spacing: 1.1px;
}
}
.down-arrow {
position: absolute;
top: 26.4px;
right: 24px;
background-image: url('~@/assets/images/common/down-arrow.png');
width: 12px;
height: 8px;
pointer-events: none;
cursor: default;
}
.eye {
position: absolute;
top: 14.4px;
right: 24px;
background-image: url('~@/assets/images/common/icon-eyes-off.png');
width: 27px;
height: 24px;
pointer-events: none;
cursor: default;
}
.eye-act {
background-image: url('~@/assets/images/common/icon-eyes-on.png');
}
}
// 轮播
.swiper-pagination-bullet {
width: 12px !important;
......@@ -116,8 +169,6 @@
background: $cOrange !important;
}
@media (max-width: 768px) {
.alert {
padding: 4px 36px 4px 12px;
......
......@@ -6,7 +6,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
@import '@/styles/_support.scss';
// @import '@/styles/_support.scss';
.filter-comp{
.el-checkbox-group {
......@@ -19,7 +19,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
}
.el-checkbox__label {
font-size: $fontSize-M2;
font-size: 24px;
}
}
......