Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
237ad1d3 by simon
Options

首页 响应式

1 parent dfd6242d
Inline Side-by-side
Showing 15 changed files with 355 additions and 45 deletions
......@@ -475,7 +475,7 @@ textarea {
$fontSize: $fontSize-M;
$fontSizeSmall: $fontSizeSmall-M;
.main-container {
margin-bottom: $marginMedium-M;
// margin-bottom: $marginMedium-M;
}
}
</style>
......
......@@ -727,6 +727,8 @@ module.exports = {
tt:"IRS website",
t1:"The country of your request for change of correspondence address / phone no. is the United States of America. To comply with the requirements of the US tax regulations, please complete the W8 / W9 form and submit it to us at the same time. The W8 / W9 form can be downloaded from the ",
t2:". For questions about US tax regulations, please contact your tax advisor",
Upload :"Upload",
Submit :"Submit",
},
success: "Successfully submitted",
uploadSuccess: "Uploaded successfully",
......
......@@ -737,6 +737,8 @@ module.exports = {
tt:"美國國稅局網站",
t1:"閣下遞交的更改聯繫地址/電話申请國家爲美國。爲符合美國稅務條例要求，請同時填妥W8/W9表格並遞交給我們，W8/W9表格可於",
t2:"下載。有關美國稅務條例疑問，請聯絡您的稅務顧問。",
Upload:"上载表格",
Submit:"提交"
},
success: "遞交申請成功",
uploadSuccess:"上傳成功"
......
......@@ -396,7 +396,7 @@ module.exports = {
index: {
recommend: {
title: "为何选择平安人寿？",
contact: "联络我们",
contact: "联系我们",
item1: {
desc: "简单方便<br>线上客户服务系统"
},
......@@ -414,8 +414,8 @@ module.exports = {
service: "联络客服",
},
contact: {
t1: "如欲了解我们的产品，欢迎联络我们。",
t2: "想了解更多？致电2983 8866 联络我们。",
t1: "如欲了解我们的产品，欢迎联系我们。",
t2: "想了解更多？致电2983 8866 联系我们。",
form: {
Title: "称呼",
Name: "姓名",
......@@ -734,12 +734,15 @@ module.exports = {
Mail:"请输入",
},
tax:{
tt:"美国国税局网站",
tt:"美国国税局",
t1:"阁下递交的更改联系地址/电话申请国家为美国。为符合美国税务条例要求，请同时填妥W8/W9表格并递交给我们，W8/W9表格可于",
t2:"下载。有关美国税务条例疑问，请联络您的税务顾问。",
Upload:"上传表格",
Submit:"提交"
},
success: "递交申请成功",
uploadSuccess:"上传成功"
uploadSuccess:"上传成功",
uploadFail:"上传成功",
},
policyChangeInformation: {
title: "客户资料变更",
......
......@@ -91,7 +91,7 @@
}
// 不需要选择状态
.sel {
.act {
color: #ffffff;
background-color: $cOrange;
}
......
......@@ -47,7 +47,7 @@
<!-- 日历主体 -->
<div class="tr">
<div class="td" v-for="(item,index) in fortmatMonthData" :key="index">
<div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'sel':item && activity(item),'disable':item.disable}">
<div @click="selectDay(item.disable ? null : item)" v-if="item && item.date" class="pointer point" :class="{'act':item && activity(item),'disable':item.disable}">
<div>{{item && item.date || ""}}</div>
</div>
</div>
......
......@@ -14,6 +14,7 @@ import Auth from "@components/auth/auth.vue";
import UsTaxFormUploadComp from "./us-tax-form-upload-comp.vue";
import PolicyHeadList from "./policy-head-list.vue";
import modalComp from "@/components/modal-comp/modal-comp.vue";
import Modal2Comp from "@/components/modal2-comp/modal2-comp.vue";
import Vue from "vue";
import { Loading } from "vant";
Vue.use(Loading);
......@@ -66,6 +67,7 @@ export default {
modalVisiable: false,
modalVisiableTimeoutIndex: 0, //定时隐藏索引
usTaxFormUploadCompVisible: false,
uploadErrorVisible: false,
targetPath: "",
modalIcon: "succ",
modalContent: "",
......@@ -82,7 +84,8 @@ export default {
Auth,
PolicyHeadList,
modalComp,
UsTaxFormUploadComp
UsTaxFormUploadComp,
Modal2Comp
},
computed: {
locale() {
......
......@@ -5,7 +5,8 @@
<input type="password" style="display: none;" />
<auth @onLogin="userLogin" @onLogout="userLogout" :checkProfile="true" ref="auth" :tipModel="'m2'"></auth>
<modal-comp :visible="modalVisiable" :show-confirm="false" :icon="modalIcon" :content="modalContent" :confirm="modalCallback" :overlay="modalCallback"></modal-comp>
<us-tax-form-upload-comp :visible="usTaxFormUploadCompVisible" @close="usTaxFormUploadCompVisible = false" @submit="onUsTaxSubmit" @uploadsuccess="showUploadSuccess"></us-tax-form-upload-comp>
<modal2-comp :visible="uploadErrorVisible" :close="()=>{uploadErrorVisible = false}" :content="$t('glbalTips.sysError')"></modal2-comp>
<us-tax-form-upload-comp :visible="usTaxFormUploadCompVisible" @close="usTaxFormUploadCompVisible = false" @submit="onUsTaxSubmit" @uploadsuccess="showUploadSuccess" @uploaderr="uploadErrorVisible = true"></us-tax-form-upload-comp>
<template v-if="showForm">
<policy-head-list :multiSelectable="true" @onSelect="handlePolicySelect"></policy-head-list>
......
......@@ -68,6 +68,7 @@ export default {
})
.catch(err => {
this.loading = false;
this.$emit("uploaderr");
});
}
},
......
......@@ -22,8 +22,8 @@
<div class="modal-btn-wrap">
<div class="btn">
<input type="file" @change="selectImgs" ref="file">
<van-loading v-if="loading" />上载表格</div>
<div @click="onSubmitHandler" class="btn" :class="{'disable':iobsKey ==''}">提交</div>
<van-loading v-if="loading" />{{$t('policyChangeContact.tax.Upload')}}</div>
<div @click="onSubmitHandler" class="btn" :class="{'disable':iobsKey ==''}">{{$t('policyChangeContact.tax.Submit')}}</div>
</div>
</div>
......
......@@ -33,6 +33,33 @@ export default {
bannerCandidateList: [],
// 导航菜单
// tabList: [
// {
// name: "平安“好e時”<br>自願醫保標準計劃",
// url: "",
// index: 0
// },
// {
// name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
// url: "",
// index: 1
// },
// {
// name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
// url: "",
// index: 2
// },
// {
// name: "Ping An GenRich<br>Insurance Plan",
// url: "",
// index: 3
// },
// {
// name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
// url: "",
// index: 4
// }
// ],
tabList: [
{
name: "平安“好e時”<br>自願醫保標準計劃",
......@@ -67,7 +94,8 @@ export default {
gender: 1
},
// 投保背景图
quoteBgUrl:"https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
quoteBgUrl:
"https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
// 表单
formData: {
......@@ -86,7 +114,7 @@ export default {
}
],
// 错误提示
errTips:""
errTips: ""
};
},
components: {
......@@ -100,7 +128,55 @@ export default {
return this.$i18n.messages && this.$i18n.locale
? this.$i18n.messages[this.$i18n.locale]
: {};
},
// 表格tab缩进计算
tableTapIndentation() {
let result = {};
let mar = 0; // 两边缩进
let ind = 0; // 缩进简介
let tabList = this.tabList;
let len = tabList.length;
switch (len) {
case 1:
mar = 100;
ind = 0;
break;
case 2:
mar = 60;
ind = 124;
break;
case 3:
mar = 30;
ind = 62;
break;
case 4:
mar = 20;
ind = 41;
break;
case 5:
mar = 15;
ind = 30;
break;
default:
break;
}
result = {
mar,
ind
};
console.log("result:", result);
return result;
}
// tableTapOpt(){
// let result = {
// width:
// }
// },
},
methods: {
initData() {
......@@ -187,6 +263,14 @@ export default {
this.$router.push({
path: "/custom/service?q=m1"
});
},
/**
* 点击我要报价
* 根据当前tab跳转到不同页面
* “好e时”tab的情况下，点击立即报价，跳到VHIS网销平台；传家福tab情况下调到传家福产品页
*/
onQuoteHandler() {
// gotoVHIS();
}
},
beforeDestroy() {},
......
......@@ -81,7 +81,8 @@
.btn-wrap {
position: absolute;
z-index: 1;
top: 87%;
// top: 87%;
bottom: 12%;
left: 0;
right: 0;
margin: 0 auto;
......@@ -139,16 +140,17 @@
}
.features {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 44px auto 0;
// display: flex;
// justify-content: center;
// align-items: flex-start;
// margin: 44px auto 0;
&-item {
position: relative;
text-align: center;
font-size: 22px;
width: 306px;
margin: 24px auto;
.icon {
@extend .fcc;
......@@ -168,9 +170,10 @@
bottom: 0;
right: 0;
@include linear-bg();
@extend .fcc;
// @extend .fcc;
padding: 0 24px;
height: 52px;
line-height: 52px;
border-radius: 26px;
font-size: 22px;
font-weight: bold;
......@@ -192,10 +195,12 @@
.quote {
// background: url("~@/assets/images/index/index-quote-bg-temp.png") center
// no-repeat;
// @extend .bb;
width: 100%;
height: 1482px;
overflow: hidden;
margin: 52px auto 0;
padding-bottom: 40px;
.space1 {
height: 540px;
......@@ -220,7 +225,9 @@
}
.table {
// background-color: wheat;
width: 1200px;
margin: 56px auto 0;
&-tab {
position: relative;
......@@ -228,13 +235,15 @@
display: flex;
justify-content: center;
margin-left: 2px;
margin: 0 auto;
&-item {
background-image: url("~@/assets/images/index/index-tab.png");
@extend .bis;
@extend .fcc;
height: 73px;
margin: 0 -14px;
// margin: 0 -14px;
// margin: 0 -46px;
font-size: $fontSize-M2;
color: $cOrange2;
font-weight: bold;
......@@ -247,7 +256,7 @@
}
}
.linear{
.linear {
@include linear-bg;
height: 8px;
margin: -5px auto 0;
......@@ -256,11 +265,11 @@
}
&-cont {
height: 380px;
margin: 0 auto 0;
position: relative;
display: flex;
font-size: 22px;
.panel {
position: relative;
......@@ -274,7 +283,6 @@
@extend .fcc;
.desc {
&-item {
font-size: 22px;
color: #ffffff;
line-height: 1.6;
&:lang() {
......@@ -344,6 +352,11 @@
}
}
// 只有一个tab时候
.table-1 {
width: 1070px;
}
.quote-btn {
@include btc4(300px, 50px, 22px);
margin: 40px auto 0;
......@@ -354,6 +367,8 @@
}
.customer-service {
margin-top: 24px;
// margin: 24px auto 32px;
// padding-bottom: 40px;
font-size: 22px;
font-weight: bold;
text-align: center;
......@@ -457,7 +472,7 @@
margin: 12px 0;
display: flex;
align-items: flex-start;
.icon{
.icon {
margin-top: 2px;
margin-right: 3px;
}
......@@ -472,6 +487,10 @@
}
}
}
.pic-mobile-botom {
display: none;
}
}
}
......@@ -515,10 +534,208 @@
.content {
@include content-percent();
}
.recommend {
.contact-tips {
// display: block;
margin: 24px auto 0;
position: relative;
max-width: 90%;
display: inline-block;
}
}
// 投保
.quote {
.table {
width: auto;
&-tab {
}
&-cont {
.arrow {
margin: 0 8px;
z-index: 11111;
}
}
}
}
// 联系我们表单
.contact {
.panel {
display: block;
// flex-wrap: wrap;
.panel-left {
text-align: center;
.pic-mobile {
display: none;
}
}
.panel-right {
// width: 90%;
padding: 0 4%;
margin-top: 32px;
}
.pic-mobile-botom {
display: block;
margin-top: 32px;
max-width: 100%;
}
}
}
}
@media (max-width: 980px) {
// 导航菜单切换
.nav-tab {
font-size: $fontSize-M2;
flex-wrap: wrap;
display: block;
&-item {
padding: 8px 0;
width: 100% !important;
border-right: none;
border-bottom: solid 2px #ffffff;
}
}
.recommend {
margin: 40px auto 0;
}
// 投保
.quote {
.table {
.linear {
display: none;
}
&-tab {
display: none;
}
&-cont {
display: block;
height: auto;
.panel {
padding: 32px 24px;
width: 100%;
}
}
}
}
}
@media (max-width: 768px) {
.content {
// 导航菜单切换
.nav-tab {
font-size: $fontSize-M2;
&-item {
}
}
// 推荐 为什么选择平安人寿
.recommend {
.tit {
font-size: $fontSizeTitle-M2;
}
.features {
&-item {
font-size: $fontSize-M2;
}
}
}
// 投保
.quote {
height: auto;
.tit {
font-size: $fontSizeTitle-M2;
}
.tit2 {
font-size: $fontSize-M2;
width: 96vw;
}
.table {
.linear {
}
&-tab {
}
&-cont {
display: block;
height: auto;
width: 100% !important;
font-size: $fontSize-M2;
.panel {
// 性别年龄
.func1 {
&-item {
display: block;
// margin: 36px 0;
.k,
.gender {
margin: 16px 0;
}
.age {
.ipt-wrap-linear {
width: auto;
}
}
}
}
}
.arrow {
transform: scale(0.5);
}
.arrow-left {
left: 0px;
}
.arrow-right {
right: 0px;
}
}
}
.quote-btn {
font-size: $fontSize-M2;
}
.customer-service {
font-size: $fontSize-M2;
}
}
.contact {
.panel {
.panel-left {
.t1 {
font-size: $fontSizeTitle-M2;
}
.t2 {
font-size: $fontSize-M2;
}
}
.panel-right{
.submit-btn{
font-size: $fontSize-M2;
}
}
}
}
.banner-contaner {
......
......@@ -36,26 +36,27 @@
<div class="swiper-button-next" slot="button-next"></div>-->
</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.index == curTab.index }" :style="'width: calc(100% / ' + tabList.length + ');'">{{ item.name }}</div>
<div class="gird-g nav-tab">
<div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + tabList.length + ');'" @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" >{{ item.name }}</div>
<!-- <div class="nav-tab-item pure-u-1 pure-u-md-1-5" :class="{ 'nav-tab-item-act': item.index == curTab.index }" @click="onTabHandler(item)" v-html="item.name" v-for="item in tabList" :key="item.id" >{{ item.name }}</div> -->
</div>
<!-- 推荐 为什么选择平安人寿 -->
<div class="content recommend">
<div class="recommend">
<div class="tit">{{ $t("index.recommend.title") }}</div>
<div class="features">
<div class="features-item">
<div class="gird-g features">
<div class="features-item pure-u-1 pure-u-md-1-3">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-1.png" alt />
</div>
<div v-html="$t('index.recommend.item1.desc')" class="desc"></div>
</div>
<div class="features-item">
<div class="features-item pure-u-1 pure-u-md-1-3">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-2.png" alt />
</div>
<div v-html="$t('index.recommend.item2.desc')" class="desc"></div>
</div>
<div class="features-item">
<div class="features-item pure-u-1 pure-u-md-1-3">
<div class="icon">
<img src="@/assets/images/index/recommend-icon-3.png" alt />
</div>
......@@ -78,18 +79,13 @@
</div>
<!-- tab表格 -->
<div class="table">
<div class="table" :class="{'table-1':tabList.length<=1}">
<div class="table-tab">
<div @click="onTabHandler(item)" v-html="item.name" v-for="(item, index) in tabList" :key="item.id" class="table-tab-item" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
'width: calc(100% / ' +
tabList.length +
');z-index:' +
(tabList.length - index) +
''
">{{ item.name }}</div>
<div class="table-tab-item" @click="onTabHandler(item)" v-html="item.name" v-for="(item, index) in tabList" :key="item.id" :class="{ 'table-tab-item-act': item.index == curTab.index }" :style="
'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + tabList.length + ');z-index:' + (tabList.length - index) + ''">{{ item.name }}</div>
</div>
<div class="linear" :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"></div>
<div class="table-cont" :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'">
<div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (tabList.length - 1) + ')'"></div>
<div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (tabList.length - 1) + ')'">
<div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
<div @click="onNextTabHandler()" class="arrow arrow-right"></div>
......@@ -138,7 +134,7 @@
</div>
</div>
</div>
<div class="quote-btn">{{$t('index.quote.quote')}}</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>
......@@ -225,6 +221,7 @@
</div>
<div class="submit-btn">{{ $t("index.contact.form.Submit") }}</div>
</div>
<img class="pic-mobile pic-mobile-botom" src="@/assets/images/index/index-mobile.png" alt />
</div>
</div>
</div>
......
......@@ -64,6 +64,7 @@ export default {
return this.userInfo && this.userInfo.sid;
},
gotoVhis() {
// 网销平台productCode : VHIS001，
let url = window.global.vhis;
let productCode = this.$route.query.p;
productCode = productCode ? productCode : "VHIS001";
......
......@@ -132,7 +132,6 @@
.sel{
padding: 0 48px 0 24px;
// @include ellipsis;
}
::-webkit-input-placeholder {
......