Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
c5677b06 by simon
Options

1.首页滑动 

2.页脚样式调整
1 parent 9ea63100
Inline Side-by-side
Showing 5 changed files with 202 additions and 148 deletions
......@@ -66,10 +66,6 @@
}
}
}
.drop-list:lang(en) {
min-width: 0;
margin: 0 13px;
}
.user {
@include border-tans-rev;
......
......@@ -216,6 +216,11 @@
display: none;
.nav-v {
.n-item {
width: auto;
margin-right: 24px;
}
}
.n-item {
......
......@@ -31,20 +31,14 @@ export default {
PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
// swiper
swiperOption: {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination",
clickable: true
},
// autoplay: {
// delay: 5000,
// stopOnLastSlide: false,
// disableOnInteraction: false
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev"
// },
// pagination: {
// el: ".swiper-pagination",
// clickable: true
// },
// speed: 1000
},
loading: false,
......@@ -287,14 +281,15 @@ export default {
onSelectPaymentOptionHandler(item) {
this.curPaymentOption = item;
},
// 选择标签
onTabHandler(item) {
this.curTab = item;
},
// 投保组件性别选择
onQuoteSexHandler(gender) {
this.quoteData.gender = gender;
},
// 选择标签
onTabHandler(item) {
this.curTab = item;
this.swiperSiderTo(this.curTab.index);
},
// 上一个tab
onPrevTabHandler() {
if (this.dataList.length <= 0) return;
......@@ -304,6 +299,7 @@ export default {
index = this.dataList.length - 1;
}
this.curTab = this.dataList[index];
this.swiperSiderTo(this.curTab.index);
},
// 下一个tab
onNextTabHandler() {
......@@ -314,7 +310,17 @@ export default {
index = 0;
}
this.curTab = this.dataList[index];
this.swiperSiderTo(this.curTab.index);
},
swiperSiderTo(index) {
this.$nextTick(function () {
let durTime = 600;
this.$refs.bannerSwiper.swiper.slideTo(index, durTime, true);
this.$refs.quoteBgSwiper.swiper.slideTo(index, durTime, true);
this.$refs.quoteSwiper.swiper.slideTo(index, durTime, true);
})
},
// 联系我们
toContactUs() {
this.$router.push({
......@@ -511,6 +517,9 @@ export default {
});
this.curTab = this.dataList[0];
this.bannerList = this.dataList;
this.bannerList.forEach(element => {
element.btns = element.btnDescribe;
});
console.log("this.dataList:", this.dataList);
})
......
......@@ -139,6 +139,10 @@
color: #ffffff;
@include linear-bg();
}
&-item-single {
justify-content: center !important;
}
}
// 推荐 为什么选择平安人寿
......@@ -207,26 +211,51 @@
// 线上报价
.quote {
position: relative;
width: 100%;
min-height: 1440px;
margin: 52px auto 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&-bg-swiper {
position: absolute;
width: 100%;
min-height: 1440px;
.ebg {
position: absolute;
width: 100%;
min-height: 1440px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}
.quote-cont {
position: relative;
z-index: 11;
}
.table-cont {
position: relative;
z-index: 11;
}
.space1 {
height: 540px;
height: 670px;
}
.tit-wrap {
position: relative;
z-index: 11;
height: 670px;
display: flex;
// align-items: flex-end;
align-content: flex-end;
flex-wrap: wrap;
width: 100%;
.tit {
position: relative;
z-index: 11;
width: 100%;
font-size: 36px;
font-weight: bold;
......@@ -238,6 +267,8 @@
}
}
.tit2 {
position: relative;
z-index: 11;
width: 720px;
margin: 40px auto 0;
text-align: center;
......@@ -296,6 +327,10 @@
z-index: 11;
}
&-wrap {
position: relative;
}
&-cont {
min-height: 384px;
margin: 0 auto 0;
......@@ -397,9 +432,9 @@
// 滑动条
.slider {
position: relative;
max-width: 100%;
margin: 38px auto 0;
position: relative;
max-width: 100%;
margin: 38px auto 0;
}
// 滑动条
......@@ -527,24 +562,24 @@
}
}
}
}
.arrow {
position: absolute;
width: 44px;
height: 73px;
top: 32%;
cursor: pointer;
z-index: 21;
}
.arrow {
position: absolute;
width: 44px;
height: 73px;
top: 32%;
cursor: pointer;
z-index: 21;
}
.arrow-left {
background-image: url("~@/assets/images/index/arrow-left.png");
left: -64px;
}
.arrow-right {
background-image: url("~@/assets/images/index/arrow-right.png");
right: -64px;
}
.arrow-left {
background-image: url("~@/assets/images/index/arrow-left.png");
left: -64px;
}
.arrow-right {
background-image: url("~@/assets/images/index/arrow-right.png");
right: -64px;
}
}
......
......@@ -8,9 +8,8 @@
<input type="password" style="display: none;" />
<div class="banner-contaner">
<!-- banner 轮播 -->
<div class="banner banner-pc">
<swiper :options="swiperOption">
<swiper :options="swiperOption" ref="bannerSwiper">
<swiper-slide v-for="(item, index) in bannerList" :key="index">
<img class="banner-img" :src="item.pcBannerUrl" />
<div class="btn-wrap">
......@@ -42,7 +41,7 @@
<!-- 导航菜单切换 -->
<div class="nav-tab">
<div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(1200px / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div>
<div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index,'nav-tab-item-single':dataList.length<=1 }" :style="'width: calc(1200px / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div>
<!-- <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + dataList.length + '); '+ (index == dataList.length-1 ?'':'width:50%;') +' '" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> -->
</div>
......@@ -77,88 +76,93 @@
</div>
<!-- 线上报价 -->
<div class="quote" :style="'background-image: url(' + curTab.pageMidImage + ');'">
<!-- <div class="space1"></div> -->
<div class="tit-wrap">
<div class="tit">{{curTab.pageMidTitle}}</div>
<div class="tit2">
{{curTab.pageMidDescribe}}
</div>
</div>
<div class="quote">
<swiper :options="swiperOption" ref="quoteBgSwiper" class="quote-bg-swiper">
<swiper-slide v-for="(item, index) in dataList" :key="index">
<div class="ebg" :style="'background-image: url(' + item.pageMidImage + ');'"></div>
<div class="tit-wrap">
<div class="tit">{{curTab.pageMidTitle}}</div>
<div class="tit2">
{{curTab.pageMidDescribe}}
</div>
</div>
</swiper-slide>
</swiper>
<!-- tab表格 -->
<div class="table" :class="{'table-1':dataList.length<=1}">
<div class="table-tab">
<!-- <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
<div class="space1"></div>
<div class="quote-cont">
<!-- tab表格 -->
<div class="table" :class="{'table-1':dataList.length<=1}">
<div class="table-tab">
<!-- <div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
</div> -->
<!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
<!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
<div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> -->
<div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
<div class="table-tab-item" @click="onTabHandler(item)" v-html="item.tabName" v-for="(item, index) in dataList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
</div>
<div class="linear"></div>
<div class="table-cont">
<div class="panel panel-left">
<div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
<div @click="onNextTabHandler()" class="arrow arrow-right"></div>
<div class="desc">
<div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
{{ item }}
</div>
</div>
</div>
<div class="panel panel-right">
<!-- 好医时 -->
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
<div class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
<div class="linear"></div>
<div class="table-wrap">
<swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper">
<swiper-slide v-for="(item, index) in dataList" :key="index">
<div class="table-cont">
<div class="panel panel-left">
<div class="desc">
<div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
{{ item }}
</div>
</div>
</div>
</div>
<div class="func1-item">
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
<div class="panel panel-right">
<!-- 好医时 -->
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
<div class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
</div>
</div>
</div>
<div class="func1-item">
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
<el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
</el-select> -->
<date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
<date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
border: 'none !important',
'background-color': 'transparent !important',
padding: '16px 24px',
color: '#606266',
'text-align': 'center'
}">
</date-picker>
</date-picker>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 传家福 -->
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
<div class="func func2">
<div class="func2-tit">滑動選擇保額</div>
<div class="func2-tit2">保額（萬美元）</div>
<!-- <div class="slider">
<!-- 传家福 -->
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
<div class="func func2">
<div class="func2-tit">滑動選擇保額</div>
<div class="func2-tit2">保額（萬美元）</div>
<!-- <div class="slider">
<div class="slider-bar">
<div class="slider-bar-thumb" >
<div class="num">300</div>
......@@ -167,50 +171,55 @@
</div>
</div> -->
<slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
<!-- 表格选择 -->
<div class="form">
<div class="form-item">
<div class="label">繳費期</div>
<div class="val">
<div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
<div class="form-item">
<div class="label">繳費選項</div>
<div class="val val2">
<!-- <div class="item">每年</div>
<div class="item">每半年</div>
<div class="item">每季度</div>
<div class="item">每月</div> -->
<div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
{{ item.n }}
<slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
<!-- 表格选择 -->
<div class="form">
<div class="form-item">
<div class="label">繳費期</div>
<div class="val">
<div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
<div class="form-item">
<div class="label">繳費選項</div>
<div class="val val2">
<div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="line"></div>
<!-- 计算 -->
<div class="calculation">
<div class="label">每月保费</div>
<div class="value">$ <span class="price">{{sumAssured}}</span></div>
</div>
<!-- 提示 -->
<div class="tips">Please contact your financial consultant to quote for insured
amount that exceeds USD 3 million</div>
</div>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="line"></div>
<!-- 计算 -->
<div class="calculation">
<div class="label">每月保费</div>
<div class="value">$ <span class="price">{{sumAssured}}</span></div>
</div>
<!-- 提示 -->
<div class="tips">Please contact your financial consultant to quote for insured
amount that exceeds USD 3 million</div>
</div>
</div>
</swiper-slide>
</swiper>
<div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
<div @click="onNextTabHandler()" class="arrow arrow-right"></div>
</div>
</div>
<div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div>
<div class="customer-service">
{{$t('index.quote.want')}}
<span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span>
</div>
</div>
<div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div>
<div class="customer-service">
{{$t('index.quote.want')}}
<span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span>
</div>
</div>
......