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 140 additions and 135 deletions
...@@ -30,12 +30,12 @@ export default { ...@@ -30,12 +30,12 @@ export default {
30 el: '.swiper-pagination', 30 el: '.swiper-pagination',
31 clickable: true, 31 clickable: true,
32 }, 32 },
33 autoplay: { 33 // autoplay: {
34 delay: 5000, 34 // delay: 5000,
35 stopOnLastSlide: false, 35 // stopOnLastSlide: false,
36 disableOnInteraction: false 36 // disableOnInteraction: false
37 }, 37 // },
38 speed: 1000, 38 // speed: 1000,
39 }, 39 },
40 bannerList: [], 40 bannerList: [],
41 bannerCandidateList: [], 41 bannerCandidateList: [],
......
...@@ -35,7 +35,6 @@ $borderSize: 6px; ...@@ -35,7 +35,6 @@ $borderSize: 6px;
35 width: 1920px; 35 width: 1920px;
36 height: 100%; 36 height: 100%;
37 overflow: hidden; 37 overflow: hidden;
38 // height: 791px;
39 38
40 .banner-img { 39 .banner-img {
41 width: 100%; 40 width: 100%;
......
...@@ -3,10 +3,15 @@ ...@@ -3,10 +3,15 @@
3 */ 3 */
4 4
5 import api from "@/api/api"; 5 import api from "@/api/api";
6 import { httpGet, httpPost } from "@/api/fetch-api.js"; 6 import {
7 httpGet,
8 httpPost
9 } from "@/api/fetch-api.js";
7 10
8 import DatePicker from "@/components/date-picker/date-picker.vue"; 11 import DatePicker from "@/components/date-picker/date-picker.vue";
9 import { ddMMyyyy2yyyyMMdd } from "@utils/utils.js"; 12 import {
13 ddMMyyyy2yyyyMMdd
14 } from "@utils/utils.js";
10 15
11 export default { 16 export default {
12 data() { 17 data() {
...@@ -22,18 +27,19 @@ export default { ...@@ -22,18 +27,19 @@ export default {
22 el: ".swiper-pagination", 27 el: ".swiper-pagination",
23 clickable: true 28 clickable: true
24 }, 29 },
25 autoplay: { 30 // autoplay: {
26 delay: 5000, 31 // delay: 5000,
27 stopOnLastSlide: false, 32 // stopOnLastSlide: false,
28 disableOnInteraction: false 33 // disableOnInteraction: false
29 }, 34 // },
30 speed: 1000 35 // speed: 1000
31 }, 36 },
37 dataList: [], // 首页请求数据
32 bannerList: [], 38 bannerList: [],
33 bannerCandidateList: [], 39 bannerCandidateList: [],
34 40
35 // 导航菜单 41 // 导航菜单
36 // tabList: [ 42 // dataList: [
37 // { 43 // {
38 // name: "平安“好e時”<br>自願醫保標準計劃", 44 // name: "平安“好e時”<br>自願醫保標準計劃",
39 // url: "", 45 // url: "",
...@@ -60,33 +66,6 @@ export default { ...@@ -60,33 +66,6 @@ export default {
60 // index: 4 66 // index: 4
61 // } 67 // }
62 // ], 68 // ],
63 tabList: [
64 {
65 name: "平安“好e時”<br>自願醫保標準計劃",
66 url: "",
67 index: 0
68 },
69 {
70 name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
71 url: "",
72 index: 1
73 },
74 {
75 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
76 url: "",
77 index: 2
78 },
79 {
80 name: "Ping An GenRich<br>Insurance Plan",
81 url: "",
82 index: 3
83 },
84 {
85 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
86 url: "",
87 index: 4
88 }
89 ],
90 curTab: {}, 69 curTab: {},
91 70
92 // 投保 71 // 投保
...@@ -94,8 +73,7 @@ export default { ...@@ -94,8 +73,7 @@ export default {
94 gender: 1 73 gender: 1
95 }, 74 },
96 // 投保背景图 75 // 投保背景图
97 quoteBgUrl: 76 quoteBgUrl: "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
98 "https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
99 77
100 // 表单 78 // 表单
101 formData: { 79 formData: {
...@@ -103,8 +81,7 @@ export default { ...@@ -103,8 +81,7 @@ export default {
103 birthDate: "" 81 birthDate: ""
104 }, 82 },
105 // 性别列表 83 // 性别列表
106 genderList: [ 84 genderList: [{
107 {
108 n: "先生", 85 n: "先生",
109 v: "M" 86 v: "M"
110 }, 87 },
...@@ -125,17 +102,16 @@ export default { ...@@ -125,17 +102,16 @@ export default {
125 return this.$i18n.locale || "tc"; 102 return this.$i18n.locale || "tc";
126 }, 103 },
127 i18n() { 104 i18n() {
128 return this.$i18n.messages && this.$i18n.locale 105 return this.$i18n.messages && this.$i18n.locale ?
129 ? this.$i18n.messages[this.$i18n.locale] 106 this.$i18n.messages[this.$i18n.locale] : {};
130 : {};
131 }, 107 },
132 // 表格tab缩进计算 108 // 表格tab缩进计算
133 tableTapIndentation() { 109 tableTapIndentation() {
134 let result = {}; 110 let result = {};
135 let mar = 0; // 两边缩进 111 let mar = 0; // 两边缩进
136 let ind = 0; // 缩进简介 112 let ind = 0; // 缩进简介
137 let tabList = this.tabList; 113 let dataList = this.dataList;
138 let len = tabList.length; 114 let len = dataList.length;
139 switch (len) { 115 switch (len) {
140 case 1: 116 case 1:
141 mar = 100; 117 mar = 100;
...@@ -144,17 +120,17 @@ export default { ...@@ -144,17 +120,17 @@ export default {
144 120
145 case 2: 121 case 2:
146 mar = 60; 122 mar = 60;
147 ind = 124; 123 ind = 120;
148 break; 124 break;
149 125
150 case 3: 126 case 3:
151 mar = 30; 127 mar = 30;
152 ind = 62; 128 ind = 60;
153 break; 129 break;
154 130
155 case 4: 131 case 4:
156 mar = 20; 132 mar = 20;
157 ind = 41; 133 ind = 40;
158 break; 134 break;
159 135
160 case 5: 136 case 5:
...@@ -169,7 +145,7 @@ export default { ...@@ -169,7 +145,7 @@ export default {
169 mar, 145 mar,
170 ind 146 ind
171 }; 147 };
172 console.log("result:", result); 148 // console.log("result:", result);
173 return result; 149 return result;
174 } 150 }
175 // tableTapOpt(){ 151 // tableTapOpt(){
...@@ -179,33 +155,27 @@ export default { ...@@ -179,33 +155,27 @@ export default {
179 // }, 155 // },
180 }, 156 },
181 methods: { 157 methods: {
182 initData() { 158
183 this.curTab = this.tabList[0]; 159 // fetchBanner() {
184 this.fetchBanner().then(res => { 160 // return new Promise((resolve, reject) => {
185 this.bannerCandidateList = res; 161 // httpPost({
186 this.refreshBanner(); 162 // url: api.banner
187 }); 163 // }).then(res => {
188 }, 164 // resolve(res);
189 fetchBanner() { 165 // });
190 return new Promise((resolve, reject) => { 166 // });
191 httpPost({ 167 // },
192 url: api.banner 168 // refreshBanner() {
193 }).then(res => { 169 // let key = this.locale;
194 resolve(res); 170 // if (key == "zh") {
195 }); 171 // key = "cn";
196 }); 172 // }
197 }, 173 // let bannerList = [];
198 refreshBanner() { 174 // this.bannerCandidateList.forEach(element => {
199 let key = this.locale; 175 // bannerList.push(element[key]);
200 if (key == "zh") { 176 // });
201 key = "cn"; 177 // this.$set(this, "bannerList", bannerList);
202 } 178 // },
203 let bannerList = [];
204 this.bannerCandidateList.forEach(element => {
205 bannerList.push(element[key]);
206 });
207 this.$set(this, "bannerList", bannerList);
208 },
209 btnNavigateTo(type, link) { 179 btnNavigateTo(type, link) {
210 switch (type) { 180 switch (type) {
211 case "none": 181 case "none":
...@@ -241,28 +211,32 @@ export default { ...@@ -241,28 +211,32 @@ export default {
241 onQuoteSexHandler(gender) { 211 onQuoteSexHandler(gender) {
242 this.quoteData.gender = gender; 212 this.quoteData.gender = gender;
243 }, 213 },
214 // 上一个tab
244 onPrevTabHandler() { 215 onPrevTabHandler() {
245 if (this.tabList.length <= 0) return; 216 if (this.dataList.length <= 0) return;
246 let index = this.curTab.index; 217 let index = this.curTab.index;
247 index--; 218 index--;
248 if (index < 0) { 219 if (index < 0) {
249 index = this.tabList.length - 1; 220 index = this.dataList.length - 1;
250 } 221 }
251 this.curTab = this.tabList[index]; 222 this.curTab = this.dataList[index];
252 }, 223 },
224 // 下一个tab
253 onNextTabHandler() { 225 onNextTabHandler() {
254 if (this.tabList.length <= 0) return; 226 if (this.dataList.length <= 0) return;
255 let index = this.curTab.index; 227 let index = this.curTab.index;
256 index++; 228 index++;
257 if (index >= this.tabList.length) { 229 if (index >= this.dataList.length) {
258 index = 0; 230 index = 0;
259 } 231 }
260 this.curTab = this.tabList[index]; 232 this.curTab = this.dataList[index];
261 }, 233 },
234 // 联系我们
262 toContactUs() { 235 toContactUs() {
263 this.$router.push({ 236 this.$router.push({
264 path: "/custom/service?q=m1" 237 path: "/custom/service?q=m1"
265 }); 238 });
239
266 }, 240 },
267 /** 241 /**
268 * 点击我要报价 242 * 点击我要报价
...@@ -272,29 +246,60 @@ export default { ...@@ -272,29 +246,60 @@ export default {
272 onQuoteHandler() { 246 onQuoteHandler() {
273 // gotoVHIS(); 247 // gotoVHIS();
274 }, 248 },
275 queryIndexManageListApi() { 249 // queryIndexManageListApi() {
250
251 // },
252 initData() {
253 // this.fetchBanner().then(res => {
254 // this.bannerCandidateList = res;
255 // this.refreshBanner();
256 // });
257
258 // 可以埋数据在 localStorage
276 httpPost({ 259 httpPost({
277 url: api.indexManageListApi, 260 url: api.indexManageListApi,
278 data: {}, 261 data: {},
279 sid: true 262 sid: true
263 }).then((result) => {
264 this.dataList = [];
265 // console.log("11111");
266 result.forEach(element => {
267 let content = JSON.parse(element.content);
268 let item = {}
269 switch (this.locale) {
270 case "en":
271 item = content.confEn;
272 break;
273 case "zh":
274 item = content.confCn;
275 break;
276 default:
277 item = content.confTc;
278 break;
279 }
280 this.dataList.push(item);
281 });
282 this.dataList.forEach((element, idx) => {
283 element.index = idx;
284 element.describeList = element.describe.split("\n");
285 });
286 this.curTab = this.dataList[0];
287 this.bannerList = this.dataList;
288 console.log("this.dataList:", this.dataList);
280 }) 289 })
281 .then(response => { 290
282 console.log("response:", response); 291 },
283 let ttt = JSON.parse(response[0].content);
284 console.log("ttt:", ttt);
285 })
286 .catch(res => {});
287 }
288 }, 292 },
289 beforeDestroy() {}, 293 beforeDestroy() {},
290 mounted() { 294 mounted() {
291 this.initData(); 295 this.initData();
292 }, 296 },
293 created() { 297 created() {
294 // this.queryIndexManageListApi(); 298
295 this.$root.eventBus.$on("langChange", () => { 299 this.$root.eventBus.$on("langChange", () => {
296 try { 300 try {
297 this.refreshBanner(); 301 // this.refreshBanner();
302 this.initData();
298 } catch (e) {} 303 } catch (e) {}
299 }); 304 });
300 } 305 }
......
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
15 // banner 轮播 15 // banner 轮播
16 .banner-contaner { 16 .banner-contaner {
17 width: 100%; 17 width: 100%;
18 // height: 502px; 18 height: 502px;
19 height: 470px; 19 // height: 470px;
20 margin: 0 auto; 20 margin: 0 auto;
21 position: relative; 21 position: relative;
22 z-index: 1; 22 z-index: 1;
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
32 margin-left: -960px; 32 margin-left: -960px;
33 top: 0; 33 top: 0;
34 width: 1920px; 34 width: 1920px;
35 height: 100%;
35 overflow: hidden; 36 overflow: hidden;
36 37
37 .banner-img { 38 .banner-img {
...@@ -246,6 +247,8 @@ ...@@ -246,6 +247,8 @@
246 font-weight: bold; 247 font-weight: bold;
247 cursor: pointer; 248 cursor: pointer;
248 249
250 // filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
251
249 &-act { 252 &-act {
250 background-image: url("~@/assets/images/index/index-tab-act.png"); 253 background-image: url("~@/assets/images/index/index-tab-act.png");
251 color: #ffffff; 254 color: #ffffff;
...@@ -262,7 +265,7 @@ ...@@ -262,7 +265,7 @@
262 } 265 }
263 266
264 &-cont { 267 &-cont {
265 height: 380px; 268 min-height: 380px;
266 margin: 0 auto 0; 269 margin: 0 auto 0;
267 position: relative; 270 position: relative;
268 display: flex; 271 display: flex;
...@@ -278,6 +281,8 @@ ...@@ -278,6 +281,8 @@
278 // position: relative; 281 // position: relative;
279 @extend .fcc; 282 @extend .fcc;
280 .desc { 283 .desc {
284 @extend .bb;
285 padding: 48px;
281 &-item { 286 &-item {
282 color: #ffffff; 287 color: #ffffff;
283 line-height: 1.6; 288 line-height: 1.6;
...@@ -418,8 +423,6 @@ ...@@ -418,8 +423,6 @@
418 width: 100%; 423 width: 100%;
419 424
420 &-item { 425 &-item {
421
422
423 .ipt-wrap-linear { 426 .ipt-wrap-linear {
424 margin-bottom: 28px; 427 margin-bottom: 28px;
425 428
......
...@@ -36,10 +36,12 @@ ...@@ -36,10 +36,12 @@
36 <div class="swiper-button-next" slot="button-next"></div>--> 36 <div class="swiper-button-next" slot="button-next"></div>-->
37 </div> 37 </div>
38 <!-- 导航菜单切换 --> 38 <!-- 导航菜单切换 -->
39
39 <div class="gird-g nav-tab"> 40 <div class="gird-g nav-tab">
40 <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> 41 <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>
41 <!-- <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> --> 42 <!-- <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> -->
42 </div> 43 </div>
44
43 <!-- 推荐 为什么选择平安人寿 --> 45 <!-- 推荐 为什么选择平安人寿 -->
44 <div class="recommend"> 46 <div class="recommend">
45 <div class="tit">{{ $t("index.recommend.title") }}</div> 47 <div class="tit">{{ $t("index.recommend.title") }}</div>
...@@ -72,32 +74,28 @@ ...@@ -72,32 +74,28 @@
72 <!-- 线上报价 --> 74 <!-- 线上报价 -->
73 <div class="quote" :style="'background-image: url(' + quoteBgUrl + ');'"> 75 <div class="quote" :style="'background-image: url(' + quoteBgUrl + ');'">
74 <div class="space1"></div> 76 <div class="space1"></div>
75 <div class="tit">線上報價 閃速投保</div> 77 <div class="tit">{{curTab.pageMidTitle}}</div>
76 <div class="tit2"> 78 <div class="tit2">
77 平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃， 79 {{curTab.pageMidDescribe}}
78 涵蓋重點醫療保障，投保流程簡易，全程線上進行。
79 </div> 80 </div>
80 81
81 <!-- tab表格 --> 82 <!-- tab表格 -->
82 <div class="table" :class="{'table-1':tabList.length<=1}"> 83 <div class="table" :class="{'table-1':dataList.length<=1}">
83 <div class="table-tab"> 84 <div class="table-tab">
84 <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=" 85 <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="
85 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + tabList.length + ');z-index:' + (tabList.length - index) + ''">{{ item.name }}</div> 86 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
86 </div> 87 </div>
87 <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (tabList.length - 1) + ')'"></div> 88 <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
88 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (tabList.length - 1) + ')'"> 89 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'">
89 90
90 <div class="panel panel-left"> 91 <div class="panel panel-left">
91 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 92 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
92 <div @click="onNextTabHandler()" class="arrow arrow-right"></div> 93 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
93 <div class="desc"> 94 <div class="desc">
94 <div class="desc-item">・潛在長線資本增值</div> 95
95 <div class="desc-item">・創建家族財富</div> 96 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
96 <div class="desc-item">・身故及意外身故賠償</div> 97 {{ item }}
97 <div class="desc-item">・保單持有人意外身故賠償</div> 98 </div>
98 <div class="desc-item">・自選保費繳付期</div>
99 <div class="desc-item">・彈性賠償支付方式</div>
100 <div class="desc-item">・豁免醫療核保</div>
101 </div> 99 </div>
102 </div> 100 </div>
103 <div class="panel panel-right"> 101 <div class="panel panel-right">
...@@ -233,17 +231,17 @@ ...@@ -233,17 +231,17 @@
233 </style> 231 </style>
234 232
235 <style lang="scss"> 233 <style lang="scss">
236 @media (max-width: 768px) { 234 // @media (max-width: 768px) {
237 .contact { 235 .contact {
238 .panel { 236 .panel {
239 .panel-right { 237 .panel-right {
240 .form { 238 .form {
241 .el-input__inner { 239 .el-input__inner {
242 font-size: 18px; // $fontSize-M2 240 font-size: 18px; // $fontSize-M2
243 }
244 } 241 }
245 } 242 }
246 } 243 }
247 } 244 }
248 } 245 }
246 // }
249 </style> 247 </style>
......
...@@ -30,12 +30,12 @@ export default { ...@@ -30,12 +30,12 @@ export default {
30 el: '.swiper-pagination', 30 el: '.swiper-pagination',
31 clickable: true, 31 clickable: true,
32 }, 32 },
33 autoplay: { 33 // autoplay: {
34 delay: 5000, 34 // delay: 5000,
35 stopOnLastSlide: false, 35 // stopOnLastSlide: false,
36 disableOnInteraction: false 36 // disableOnInteraction: false
37 }, 37 // },
38 speed: 1000, 38 // speed: 1000,
39 }, 39 },
40 bannerList: [], 40 bannerList: [],
41 bannerCandidateList: [], 41 bannerCandidateList: [],
......