Skip to content

dev / pingan-life-index-pro

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

首页

1 parent 28c18b90
Inline Side-by-side
Showing 8 changed files with 135 additions and 130 deletions
......@@ -30,12 +30,12 @@ export default {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
speed: 1000,
// autoplay: {
// delay: 5000,
// stopOnLastSlide: false,
// disableOnInteraction: false
// },
// speed: 1000,
},
bannerList: [],
bannerCandidateList: [],
......
......@@ -35,7 +35,6 @@ $borderSize: 6px;
width: 1920px;
height: 100%;
overflow: hidden;
// height: 791px;
.banner-img {
width: 100%;
......
......@@ -3,10 +3,15 @@
*/
import api from "@/api/api";
import { httpGet, httpPost } from "@/api/fetch-api.js";
import {
httpGet,
httpPost
} from "@/api/fetch-api.js";
import DatePicker from "@/components/date-picker/date-picker.vue";
import { ddMMyyyy2yyyyMMdd } from "@utils/utils.js";
import {
ddMMyyyy2yyyyMMdd
} from "@utils/utils.js";
export default {
data() {
......@@ -22,18 +27,19 @@ export default {
el: ".swiper-pagination",
clickable: true
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
speed: 1000
// autoplay: {
// delay: 5000,
// stopOnLastSlide: false,
// disableOnInteraction: false
// },
// speed: 1000
},
dataList: [], // 首页请求数据
bannerList: [],
bannerCandidateList: [],
// 导航菜单
// tabList: [
// dataList: [
// {
// name: "平安“好e時”<br>自願醫保標準計劃",
// url: "",
......@@ -60,33 +66,6 @@ export default {
// index: 4
// }
// ],
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
}
],
curTab: {},
// 投保
......@@ -94,8 +73,7 @@ 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: {
......@@ -103,8 +81,7 @@ export default {
birthDate: ""
},
// 性别列表
genderList: [
{
genderList: [{
n: "先生",
v: "M"
},
......@@ -125,17 +102,16 @@ export default {
return this.$i18n.locale || "tc";
},
i18n() {
return this.$i18n.messages && this.$i18n.locale
? this.$i18n.messages[this.$i18n.locale]
: {};
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;
let dataList = this.dataList;
let len = dataList.length;
switch (len) {
case 1:
mar = 100;
......@@ -144,17 +120,17 @@ export default {
case 2:
mar = 60;
ind = 124;
ind = 120;
break;
case 3:
mar = 30;
ind = 62;
ind = 60;
break;
case 4:
mar = 20;
ind = 41;
ind = 40;
break;
case 5:
......@@ -169,7 +145,7 @@ export default {
mar,
ind
};
console.log("result:", result);
// console.log("result:", result);
return result;
}
// tableTapOpt(){
......@@ -179,33 +155,27 @@ 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);
},
// 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":
......@@ -241,28 +211,32 @@ export default {
onQuoteSexHandler(gender) {
this.quoteData.gender = gender;
},
// 上一个tab
onPrevTabHandler() {
if (this.tabList.length <= 0) return;
if (this.dataList.length <= 0) return;
let index = this.curTab.index;
index--;
if (index < 0) {
index = this.tabList.length - 1;
index = this.dataList.length - 1;
}
this.curTab = this.tabList[index];
this.curTab = this.dataList[index];
},
// 下一个tab
onNextTabHandler() {
if (this.tabList.length <= 0) return;
if (this.dataList.length <= 0) return;
let index = this.curTab.index;
index++;
if (index >= this.tabList.length) {
if (index >= this.dataList.length) {
index = 0;
}
this.curTab = this.tabList[index];
this.curTab = this.dataList[index];
},
// 联系我们
toContactUs() {
this.$router.push({
path: "/custom/service?q=m1"
});
},
/**
* 点击我要报价
......@@ -272,29 +246,60 @@ export default {
onQuoteHandler() {
// gotoVHIS();
},
queryIndexManageListApi() {
// queryIndexManageListApi() {
// },
initData() {
// this.fetchBanner().then(res => {
// this.bannerCandidateList = res;
// this.refreshBanner();
// });
// 可以埋数据在 localStorage
httpPost({
url: api.indexManageListApi,
data: {},
sid: true
})
.then(response => {
console.log("response:", response);
let ttt = JSON.parse(response[0].content);
console.log("ttt:", ttt);
})
.catch(res => {});
}).then((result) => {
this.dataList = [];
// console.log("11111");
result.forEach(element => {
let content = JSON.parse(element.content);
let item = {}
switch (this.locale) {
case "en":
item = content.confEn;
break;
case "zh":
item = content.confCn;
break;
default:
item = content.confTc;
break;
}
this.dataList.push(item);
});
this.dataList.forEach((element, idx) => {
element.index = idx;
element.describeList = element.describe.split("\n");
});
this.curTab = this.dataList[0];
this.bannerList = this.dataList;
console.log("this.dataList:", this.dataList);
})
},
},
beforeDestroy() {},
mounted() {
this.initData();
},
created() {
// this.queryIndexManageListApi();
this.$root.eventBus.$on("langChange", () => {
try {
this.refreshBanner();
// this.refreshBanner();
this.initData();
} catch (e) {}
});
}
......
......@@ -15,8 +15,8 @@
// banner 轮播
.banner-contaner {
width: 100%;
// height: 502px;
height: 470px;
height: 502px;
// height: 470px;
margin: 0 auto;
position: relative;
z-index: 1;
......@@ -32,6 +32,7 @@
margin-left: -960px;
top: 0;
width: 1920px;
height: 100%;
overflow: hidden;
.banner-img {
......@@ -246,6 +247,8 @@
font-weight: bold;
cursor: pointer;
// filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
&-act {
background-image: url("~@/assets/images/index/index-tab-act.png");
color: #ffffff;
......@@ -262,7 +265,7 @@
}
&-cont {
height: 380px;
min-height: 380px;
margin: 0 auto 0;
position: relative;
display: flex;
......@@ -278,6 +281,8 @@
// position: relative;
@extend .fcc;
.desc {
@extend .bb;
padding: 48px;
&-item {
color: #ffffff;
line-height: 1.6;
......@@ -418,8 +423,6 @@
width: 100%;
&-item {
.ipt-wrap-linear {
margin-bottom: 28px;
......
......@@ -36,10 +36,12 @@
<div class="swiper-button-next" slot="button-next"></div>-->
</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 class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + 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 pure-u-1 pure-u-md-1-5" :class="{ 'nav-tab-item-act': item.index == curTab.index }" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id" >{{ item.tabName }}</div> -->
</div>
<!-- 推荐 为什么选择平安人寿 -->
<div class="recommend">
<div class="tit">{{ $t("index.recommend.title") }}</div>
......@@ -72,32 +74,28 @@
<!-- 线上报价 -->
<div class="quote" :style="'background-image: url(' + quoteBgUrl + ');'">
<div class="space1"></div>
<div class="tit">線上報價 閃速投保</div>
<div class="tit">{{curTab.pageMidTitle}}</div>
<div class="tit2">
平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃，
涵蓋重點醫療保障，投保流程簡易，全程線上進行。
{{curTab.pageMidDescribe}}
</div>
<!-- tab表格 -->
<div class="table" :class="{'table-1':tabList.length<=1}">
<div class="table" :class="{'table-1':dataList.length<=1}">
<div class="table-tab">
<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 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 *' + (tabList.length - 1) + ')'"></div>
<div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (tabList.length - 1) + ')'">
<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="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">・潛在長線資本增值</div>
<div class="desc-item">・創建家族財富</div>
<div class="desc-item">・身故及意外身故賠償</div>
<div class="desc-item">・保單持有人意外身故賠償</div>
<div class="desc-item">・自選保費繳付期</div>
<div class="desc-item">・彈性賠償支付方式</div>
<div class="desc-item">・豁免醫療核保</div>
<div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
{{ item }}
</div>
</div>
</div>
<div class="panel panel-right">
......@@ -233,8 +231,8 @@
</style>
<style lang="scss">
@media (max-width: 768px) {
.contact {
// @media (max-width: 768px) {
.contact {
.panel {
.panel-right {
.form {
......@@ -244,6 +242,6 @@
}
}
}
}
}
// }
</style>
......
......@@ -30,12 +30,12 @@ export default {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false
},
speed: 1000,
// autoplay: {
// delay: 5000,
// stopOnLastSlide: false,
// disableOnInteraction: false
// },
// speed: 1000,
},
bannerList: [],
bannerCandidateList: [],
......