Skip to content

dev / pingan-life-index-pro

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

首页

1 parent 29c430bd
Inline Side-by-side
Showing 20 changed files with 654 additions and 177 deletions
...@@ -438,28 +438,7 @@ textarea { ...@@ -438,28 +438,7 @@ textarea {
438 } 438 }
439 } 439 }
440 440
441 .el-select .el-input.is-focus .el-input__inner {
442 border-color: transparent !important;
443 }
444
445 .ipt .el-input__inner {
446 border: none !important;
447 background-color: transparent !important;
448 padding: 0 !important;
449 }
450
451 .el-select-dropdown__item.selected {
452 color: $cOrange !important;
453 }
454 441
455 .el-input__suffix {
456 display: none;
457 }
458
459 .clarms .el-input__inner {
460 font-size: 22px;
461 border: none;
462 }
463 442
464 .ql-editor { 443 .ql-editor {
465 padding: 0px 0px !important; 444 padding: 0px 0px !important;
......
...@@ -1099,7 +1099,7 @@ module.exports = { ...@@ -1099,7 +1099,7 @@ module.exports = {
1099 }, 1099 },
1100 title: { 1100 title: {
1101 t1: "「平安·傳家福」分紅終身壽險計劃", 1101 t1: "「平安·傳家福」分紅終身壽險計劃",
1102 t2: "美好重要的事物總是值得更好的守護，「平安·傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。 「平安．傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。", 1102 t2: "美好重要的事物總是值得更好的守護，「平安·傳家福」分紅終身壽險計劃，提供長期儲蓄回報和終身人壽保障，幫助您持續滾存財富，保護您的收入和財富。「平安·傳家福」設計具有獨特的功能，並保證最低回報，為您及摯愛家庭的未來做好準備。",
1103 t3: "", 1103 t3: "",
1104 t4: "", 1104 t4: "",
1105 }, 1105 },
......
...@@ -1104,7 +1104,7 @@ module.exports = { ...@@ -1104,7 +1104,7 @@ module.exports = {
1104 }, 1104 },
1105 title: { 1105 title: {
1106 t1: "「平安·传家福」分红终身寿险计划", 1106 t1: "「平安·传家福」分红终身寿险计划",
1107 t2: "美好重要的事物总是值得更好的守护，「平安·传家福」分红终身寿险计划，提供长期储蓄回报和终身人寿保障，帮助您持续滚存财富，保护您的收入和财富。 「平安．传家福」设计具有独特的功能，并保证最低回报，为您及挚爱家庭的未来做好准备。", 1107 t2: "美好重要的事物总是值得更好的守护，「平安·传家福」分红终身寿险计划，提供长期储蓄回报和终身人寿保障，帮助您持续滚存财富，保护您的收入和财富。「平安·传家福」设计具有独特的功能，并保证最低回报，为您及挚爱家庭的未来做好准备。",
1108 t3: "", 1108 t3: "",
1109 t4: "", 1109 t4: "",
1110 }, 1110 },
......
...@@ -71,7 +71,10 @@ export default { ...@@ -71,7 +71,10 @@ export default {
71 this.bannerTipsVisible = false; 71 this.bannerTipsVisible = false;
72 }, 72 },
73 bottomBtnHandle() { 73 bottomBtnHandle() {
74 this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink); 74 // this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
75 this.$router.push({
76 path:"/custom/service?q=m6"
77 })
75 }, 78 },
76 btnNavigateTo(type, link) { 79 btnNavigateTo(type, link) {
77 switch (type) { 80 switch (type) {
......
...@@ -893,8 +893,12 @@ $borderSize: 6px; ...@@ -893,8 +893,12 @@ $borderSize: 6px;
893 893
894 .tt { 894 .tt {
895 // width: 100%; 895 // width: 100%;
896 .ff{
897 .nn{
898 padding: 24px 0;
899 }
900 }
896 } 901 }
897
898 902
899 .label { 903 .label {
900 padding: 12px; 904 padding: 12px;
...@@ -908,62 +912,12 @@ $borderSize: 6px; ...@@ -908,62 +912,12 @@ $borderSize: 6px;
908 padding: 0; 912 padding: 0;
909 } 913 }
910 } 914 }
911 }
912 }
913 915
914 .guarantee2 { 916 &-item2{
915 .tit {
916 font-size: $fontSizeTitle-M2;
917 } 917 }
918
919 .container {
920 flex-wrap: wrap;
921
922 .table {
923 margin-top: 24px;
924 font-size: $fontSize-M2;
925 width: auto;
926
927 .smal {
928 font-size: $fontSizeSmall-M2;
929 }
930
931 &-item {
932 flex-wrap: nowrap;
933 min-height: auto;
934
935 .val {
936 padding: 12px;
937 } 918 }
938 } 919 }
939 920
940 &-item-3 {
941 .val {
942 padding: 0;
943 }
944 }
945
946 &-item-4 {
947 .val {
948 padding: 0;
949 }
950 }
951
952 .titl {
953
954 &-item {
955 font-size: $fontSize-M2;
956
957
958 }
959 }
960 }
961
962
963 }
964 }
965
966
967 921
968 // 下载 922 // 下载
969 .download { 923 .download {
......
...@@ -2,79 +2,107 @@ ...@@ -2,79 +2,107 @@
2 * 页面描述:官网首页 2 * 页面描述:官网首页
3 */ 3 */
4 4
5 import api from "@/api/api";
6 import { httpGet, httpPost } from "@/api/fetch-api.js";
5 7
6 import api from '@/api/api'; 8 import DatePicker from "@/components/date-picker/date-picker.vue";
7 import { 9 import { ddMMyyyy2yyyyMMdd } from "@utils/utils.js";
8 httpGet,
9 httpPost
10 } from '@/api/fetch-api.js';
11 import {
12 mapGetters,
13 mapActions,
14 mapState
15 } from "vuex";
16 var UA = require("ua-device");
17 10
18 export default { 11 export default {
19 data() { 12 data() {
20 return { 13 return {
21 key: 'value', 14 key: "value",
22 // swiper 15 // swiper
23 swiperOption: { 16 swiperOption: {
24 navigation: { 17 navigation: {
25 nextEl: '.swiper-button-next', 18 nextEl: ".swiper-button-next",
26 prevEl: '.swiper-button-prev' 19 prevEl: ".swiper-button-prev"
27 }, 20 },
28 pagination: { 21 pagination: {
29 el: '.swiper-pagination', 22 el: ".swiper-pagination",
30 clickable: true, 23 clickable: true
31 }, 24 },
32 autoplay: { 25 autoplay: {
33 delay: 5000, 26 delay: 5000,
34 stopOnLastSlide: false, 27 stopOnLastSlide: false,
35 disableOnInteraction: false 28 disableOnInteraction: false
36 }, 29 },
37 speed: 1000, 30 speed: 1000
38 }, 31 },
39 bannerList: [], 32 bannerList: [],
40 bannerCandidateList: [], 33 bannerCandidateList: [],
41 34
42 // 导航菜单 35 // 导航菜单
43 tabList: [{ 36 tabList: [
37 {
44 name: "平安“好e時”<br>自願醫保標準計劃", 38 name: "平安“好e時”<br>自願醫保標準計劃",
45 url: "", 39 url: "",
46 id: 0, 40 index: 0
47 }, { 41 },
42 {
48 name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃", 43 name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
49 url: "", 44 url: "",
50 id: 1, 45 index: 1
51 }, { 46 },
47 {
52 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan", 48 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
53 url: "", 49 url: "",
54 id: 2, 50 index: 2
55 }, { 51 },
52 {
56 name: "Ping An GenRich<br>Insurance Plan", 53 name: "Ping An GenRich<br>Insurance Plan",
57 url: "", 54 url: "",
58 id: 3, 55 index: 3
59 }, { 56 },
57 {
60 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan", 58 name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
61 url: "", 59 url: "",
62 id: 4, 60 index: 4
63 }], 61 }
64 curTab: {} 62 ],
63 curTab: {},
64
65 // 投保
66 quoteData: {
67 gender: 1
68 },
69 // 投保背景图
70 quoteBgUrl:"https://kdcdn.oss-cn-shenzhen.aliyuncs.com/temp/pingan-life/index-quote-bg-temp.png",
71
72 // 表单
73 formData: {
74 gender: "",
75 birthDate: ""
76 },
77 // 性别列表
78 genderList: [
79 {
80 n: "先生",
81 v: "M"
82 },
83 {
84 n: "女士",
85 v: "F"
65 } 86 }
87 ],
88 // 错误提示
89 errTips:""
90 };
91 },
92 components: {
93 DatePicker
66 }, 94 },
67 components: {},
68 computed: { 95 computed: {
69 locale() { 96 locale() {
70 return this.$i18n.locale || 'tc'; 97 return this.$i18n.locale || "tc";
71 }, 98 },
72 i18n() { 99 i18n() {
73 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; 100 return this.$i18n.messages && this.$i18n.locale
74 }, 101 ? this.$i18n.messages[this.$i18n.locale]
102 : {};
103 }
75 }, 104 },
76 methods: { 105 methods: {
77
78 initData() { 106 initData() {
79 this.curTab = this.tabList[0]; 107 this.curTab = this.tabList[0];
80 this.fetchBanner().then(res => { 108 this.fetchBanner().then(res => {
...@@ -100,7 +128,7 @@ export default { ...@@ -100,7 +128,7 @@ export default {
100 this.bannerCandidateList.forEach(element => { 128 this.bannerCandidateList.forEach(element => {
101 bannerList.push(element[key]); 129 bannerList.push(element[key]);
102 }); 130 });
103 this.$set(this, 'bannerList', bannerList); 131 this.$set(this, "bannerList", bannerList);
104 }, 132 },
105 btnNavigateTo(type, link) { 133 btnNavigateTo(type, link) {
106 switch (type) { 134 switch (type) {
...@@ -132,6 +160,33 @@ export default { ...@@ -132,6 +160,33 @@ export default {
132 // 选择标签 160 // 选择标签
133 onTabHandler(item) { 161 onTabHandler(item) {
134 this.curTab = item; 162 this.curTab = item;
163 },
164 // 投保组件性别选择
165 onQuoteSexHandler(gender) {
166 this.quoteData.gender = gender;
167 },
168 onPrevTabHandler() {
169 if (this.tabList.length <= 0) return;
170 let index = this.curTab.index;
171 index--;
172 if (index < 0) {
173 index = this.tabList.length - 1;
174 }
175 this.curTab = this.tabList[index];
176 },
177 onNextTabHandler() {
178 if (this.tabList.length <= 0) return;
179 let index = this.curTab.index;
180 index++;
181 if (index >= this.tabList.length) {
182 index = 0;
183 }
184 this.curTab = this.tabList[index];
185 },
186 toContactUs() {
187 this.$router.push({
188 path: "/custom/service?q=m1"
189 });
135 } 190 }
136 }, 191 },
137 beforeDestroy() {}, 192 beforeDestroy() {},
...@@ -145,5 +200,4 @@ export default { ...@@ -145,5 +200,4 @@ export default {
145 } catch (e) {} 200 } catch (e) {}
146 }); 201 });
147 } 202 }
148 203 };
149 }
......
1 @import '@/styles/_support.scss'; 1 @import "@/styles/_support.scss";
2 2
3 .page {} 3 .page {
4 font-size: 22px;
5 }
4 6
5 .top-space { 7 .top-space {
6 height: 27px;
7 } 8 }
8 9
9 .box { 10 .box {
...@@ -61,7 +62,6 @@ ...@@ -61,7 +62,6 @@
61 min-width: 288px; 62 min-width: 288px;
62 margin-left: 12px; 63 margin-left: 12px;
63 background: url("~@assets/images/vhis/vhis-btn.png"); 64 background: url("~@assets/images/vhis/vhis-btn.png");
64
65 } 65 }
66 66
67 .banner-btn:lang(zh) { 67 .banner-btn:lang(zh) {
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
105 font-weight: bold; 105 font-weight: bold;
106 color: $cOrange2; 106 color: $cOrange2;
107 107
108 width: 1200px; 108 max-width: 1200px;
109 margin: 0 auto; 109 margin: 0 auto;
110 110
111 &-item { 111 &-item {
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
177 cursor: pointer; 177 cursor: pointer;
178 178
179 .icon { 179 .icon {
180 background-image: url('~@/assets/images/index/icon-contact-tips.png'); 180 background-image: url("~@/assets/images/index/icon-contact-tips.png");
181 @extend .bis; 181 @extend .bis;
182 width: 35px; 182 width: 35px;
183 height: 31px; 183 height: 31px;
...@@ -189,12 +189,174 @@ ...@@ -189,12 +189,174 @@
189 189
190 // 线上报价 190 // 线上报价
191 .quote { 191 .quote {
192 background: url('~@/assets/images/index/index-quote-bg-temp.png') center no-repeat; 192 // background: url("~@/assets/images/index/index-quote-bg-temp.png") center
193 // no-repeat;
193 width: 100%; 194 width: 100%;
194 height: 1482px; 195 height: 1482px;
195 ;
196 overflow: hidden; 196 overflow: hidden;
197 margin: 52px auto 0; 197 margin: 52px auto 0;
198
199 .space1 {
200 height: 540px;
201 }
202
203 .tit {
204 font-size: 36px;
205 font-weight: bold;
206 text-align: center;
207 color: $cOrange2;
208
209 &:lang(zh) {
210 letter-spacing: 1.8px;
211 }
212 }
213 .tit2 {
214 width: 720px;
215 margin: 40px auto 0;
216 text-align: center;
217 color: #ffffff;
218 text-shadow: 0px 0px 16px rgba(0, 0, 0, 1);
219 }
220
221 .table {
222 width: 1200px;
223 margin: 56px auto 0;
224 &-tab {
225 position: relative;
226 width: 100%;
227 display: flex;
228 justify-content: center;
229 margin-left: 2px;
230 &-item {
231 background-image: url("~@/assets/images/index/index-tab.png");
232
233 @extend .bis;
234 @extend .fcc;
235 height: 73px;
236 margin: 0 -14px;
237 font-size: $fontSize-M2;
238 color: $cOrange2;
239 font-weight: bold;
240 cursor: pointer;
241
242 &-act {
243 background-image: url("~@/assets/images/index/index-tab-act.png");
244 color: #ffffff;
245 }
246 }
247 }
248 &-cont {
249 @include linear-bg;
250 height: 380px;
251 margin: -4px auto 0;
252 position: relative;
253 z-index: 11;
254 display: flex;
255
256 .panel {
257 position: relative;
258 margin-top: 5px;
259 width: 50%;
260 }
261
262 .panel-left {
263 position: relative;
264 @extend .fcc;
265 .desc {
266 &-item {
267 font-size: 22px;
268 color: #ffffff;
269 line-height: 1.6;
270 &:lang() {
271 letter-spacing: 1.1px;
272 }
273 }
274 }
275 }
276
277 .panel-right {
278 background-color: #ffffff;
279 @extend .fcc;
280
281 .func {
282 }
283
284 .func1 {
285 &-item {
286 display: flex;
287 align-items: center;
288 margin: 32px auto;
289
290 .k {
291 @extend .bb;
292 padding-right: 12px;
293 width: 120px;
294 }
295 .gender {
296 display: flex;
297 &-item {
298 display: flex;
299 align-items: center;
300 margin-right: 30px;
301 cursor: pointer;
302 img {
303 margin-left: 8px;
304 }
305 }
306 }
307
308 .age {
309 .ipt-wrap-linear {
310 width: 222px;
311 }
312 }
313 }
314 }
315 }
316
317 .arrow {
318 position: absolute;
319 width: 44px;
320 height: 73px;
321 top: 32%;
322 cursor: pointer;
323 z-index: 21;
324 }
325
326 .arrow-left {
327 background-image: url("~@/assets/images/index/arrow-left.png");
328 left: -64px;
329 }
330 .arrow-right {
331 background-image: url("~@/assets/images/index/arrow-right.png");
332 right: -64px;
333 }
334 }
335 }
336
337 .quote-btn {
338 @include btc4(300px, 50px, 22px);
339 margin: 40px auto 0;
340
341 &:lang(zh) {
342 letter-spacing: 1.1px;
343 }
344 }
345 .customer-service {
346 margin-top: 24px;
347 font-size: 22px;
348 font-weight: bold;
349 text-align: center;
350 color: #ffffff;
351 .udl {
352 display: inline-block;
353 border-bottom: solid 2px #ffffff;
354 border-radius: 1px;
355 }
356 &:lang(zh) {
357 letter-spacing: 1.1px;
358 }
359 }
198 } 360 }
199 361
200 // 联系我们表单 362 // 联系我们表单
...@@ -217,13 +379,13 @@ ...@@ -217,13 +379,13 @@
217 } 379 }
218 } 380 }
219 381
220 .t2{ 382 .t2 {
221 margin-top: 50px; 383 margin-top: 50px;
222 font-size: 24px; 384 font-size: 24px;
223 font-weight: bold; 385 font-weight: bold;
224 } 386 }
225 387
226 .pic-mobile{ 388 .pic-mobile {
227 margin-top: 248px; 389 margin-top: 248px;
228 } 390 }
229 } 391 }
...@@ -232,22 +394,78 @@ ...@@ -232,22 +394,78 @@
232 @extend .bb; 394 @extend .bb;
233 flex: 1; 395 flex: 1;
234 padding-left: 40px; 396 padding-left: 40px;
235 .form{ 397 .form {
236 width: 100%; 398 width: 100%;
237 // height: 600px; 399
238 // background-color: wheat; 400 &-item {
401 margin-bottom: 28px;
402
403 .ipt-wrap-linear {
404 .cont {
405 .ipt {
406 text-align: center;
407 }
408
409 .sel {
410 }
411
412 .textarea {
413 @extend .bb;
414 padding-top: 16px;
415 text-align: left;
416 height: 238px;
417 }
418
419 .ipt-date {
420 padding: 0 24px;
421 width: 100%;
422 background-color: #ffffff;
423 border-radius: $borderRadius;
424 @include border-tans;
425 border-radius: 5px;
426 }
427 }
428 }
429 .dear {
430 width: 40%;
431 margin-right: 26px;
432 }
433 .name {
434 width: 60%;
435 }
436
437 &:last-child() {
438 margin-bottom: 0;
439 }
440 }
441 }
442
443 .err-tips {
444 font-size: $fontSizeSmall-M2;
445 color: $cOrange;
446 min-height: 28px;
447 margin: 12px 0;
448 }
449
450 .submit-btn {
451 @include linear-bg();
452 margin: 0 auto 0;
453 @include btc4(300px, 50px, 22px);
454 &:lang(zh) {
455 letter-spacing: 1.1px;
456 }
239 } 457 }
240 } 458 }
241 } 459 }
242 } 460 }
243 461
244 .swiper-button-prev { 462 .swiper-button-prev {
245 background-image: url('~@/assets/images/common/button-prev.png'); 463 background-image: url("~@/assets/images/common/button-prev.png");
246 left: 360px; 464 left: 360px;
247 } 465 }
248 466
249 .swiper-button-next { 467 .swiper-button-next {
250 background-image: url('~@/assets/images/common/button-next.png'); 468 background-image: url("~@/assets/images/common/button-next.png");
251 right: 360px; 469 right: 360px;
252 } 470 }
253 471
...@@ -257,7 +475,7 @@ ...@@ -257,7 +475,7 @@
257 475
258 .swiper-pagination-fraction, 476 .swiper-pagination-fraction,
259 .swiper-pagination-custom, 477 .swiper-pagination-custom,
260 .swiper-container-horizontal>.swiper-pagination-bullets { 478 .swiper-container-horizontal > .swiper-pagination-bullets {
261 bottom: 48px; 479 bottom: 48px;
262 } 480 }
263 481
...@@ -281,12 +499,11 @@ ...@@ -281,12 +499,11 @@
281 .content { 499 .content {
282 @include content-percent(); 500 @include content-percent();
283 } 501 }
284
285 } 502 }
286 503
287
288 @media (max-width: 768px) { 504 @media (max-width: 768px) {
289 .content {} 505 .content {
506 }
290 507
291 .banner-contaner { 508 .banner-contaner {
292 height: auto; 509 height: auto;
...@@ -302,8 +519,7 @@ ...@@ -302,8 +519,7 @@
302 519
303 .swiper-pagination-fraction, 520 .swiper-pagination-fraction,
304 .swiper-pagination-custom, 521 .swiper-pagination-custom,
305 .swiper-container-horizontal>.swiper-pagination-bullets { 522 .swiper-container-horizontal > .swiper-pagination-bullets {
306 bottom: 2px; 523 bottom: 2px;
307 } 524 }
308
309 } 525 }
......
1
2 <template> 1 <template>
3 <div class="page page-index"> 2 <div class="page page-index">
4 <div class="banner-contaner"> 3 <div class="banner-contaner">
...@@ -6,38 +5,62 @@ ...@@ -6,38 +5,62 @@
6 5
7 <div class="banner banner-pc"> 6 <div class="banner banner-pc">
8 <swiper :options="swiperOption"> 7 <swiper :options="swiperOption">
9 <swiper-slide v-for="(item,index) in bannerList" :key="index"> 8 <swiper-slide v-for="(item, index) in bannerList" :key="index">
10 <img class="banner-img" :src="item.pcBannerUrl"> 9 <img class="banner-img" :src="item.pcBannerUrl" />
11 <div class="btn-wrap"> 10 <div class="btn-wrap">
12 <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex"> 11 <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex">
13 <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> 12 <div
13 class="banner-btn"
14 v-if="btnItem.n && btnItem.t && btnItem.c"
15 @click="btnNavigateTo(btnItem.t, btnItem.l)"
16 :style="{ backgroundColor: btnItem.c }"
17 >
18 {{ btnItem.n }}
19 </div>
14 </div> 20 </div>
15 </div> 21 </div>
16 </swiper-slide> 22 </swiper-slide>
17 <!-- <div class="swiper-button-prev" slot="button-prev"></div> 23 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
18 <div class="swiper-button-next" slot="button-next"></div> --> 24 <div class="swiper-button-next" slot="button-next"></div>-->
19 <!-- <div class="swiper-pagination" slot="pagination"></div> --> 25 <!-- <div class="swiper-pagination" slot="pagination"></div> -->
20 </swiper> 26 </swiper>
21 </div> 27 </div>
22 28
23 <div class="banner banner-mobile"> 29 <div class="banner banner-mobile">
24 <swiper class="swiper" :options="swiperOption"> 30 <swiper class="swiper" :options="swiperOption">
25 <swiper-slide v-for="(item,index) in bannerList" :key="index"> 31 <swiper-slide v-for="(item, index) in bannerList" :key="index">
26 <img class="banner-img" :src="item.mobileBannerUrl"> 32 <img class="banner-img" :src="item.mobileBannerUrl" />
27 <div class="btn-wrap"> 33 <div class="btn-wrap">
28 <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> 34 <div
35 class="banner-btn"
36 v-for="(btnItem, btnIndex) in item.btns"
37 :key="btnIndex"
38 @click="btnNavigateTo(btnItem.t, btnItem.l)"
39 :style="{ color: btnItem.c }"
40 >
41 {{ btnItem.n }}&nbsp;&gt;
42 </div>
29 </div> 43 </div>
30 </swiper-slide> 44 </swiper-slide>
31 <div class="swiper-pagination" slot="pagination"></div> 45 <div class="swiper-pagination" slot="pagination"></div>
32 </swiper> 46 </swiper>
33 </div> 47 </div>
34 <!-- <div class="swiper-button-prev" slot="button-prev"></div> 48 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
35 <div class="swiper-button-next" slot="button-next"></div> --> 49 <div class="swiper-button-next" slot="button-next"></div>-->
36
37 </div> 50 </div>
38 <!-- 导航菜单切换 --> 51 <!-- 导航菜单切换 -->
39 <div class="nav-tab"> 52 <div class="nav-tab">
40 <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> 53 <div
54 @click="onTabHandler(item)"
55 v-html="item.name"
56 v-for="item in tabList"
57 :key="item.id"
58 class="nav-tab-item"
59 :class="{ 'nav-tab-item-act': item.index == curTab.index }"
60 :style="'width: calc(100% / ' + tabList.length + ');'"
61 >
62 {{ item.name }}
63 </div>
41 </div> 64 </div>
42 <!-- 推荐 为什么选择平安人寿 --> 65 <!-- 推荐 为什么选择平安人寿 -->
43 <div class="content recommend"> 66 <div class="content recommend">
...@@ -45,52 +68,260 @@ ...@@ -45,52 +68,260 @@
45 <div class="features"> 68 <div class="features">
46 <div class="features-item"> 69 <div class="features-item">
47 <div class="icon"> 70 <div class="icon">
48 <img src="@/assets/images/index/recommend-icon-1.png" alt=""> 71 <img src="@/assets/images/index/recommend-icon-1.png" alt />
72 </div>
73 <div class="desc">
74 簡單方便
75 <br />線上客戶服務系統
49 </div> 76 </div>
50 <div class="desc">簡單方便<br>線上客戶服務系統</div>
51 </div> 77 </div>
52 <div class="features-item"> 78 <div class="features-item">
53 <div class="icon"> 79 <div class="icon">
54 <img src="@/assets/images/index/recommend-icon-2.png" alt=""> 80 <img src="@/assets/images/index/recommend-icon-2.png" alt />
81 </div>
82 <div class="desc">
83 信心保證
84 <br />服務超過2億客戶
55 </div> 85 </div>
56 <div class="desc">信心保證<br>服務超過2億客戶</div>
57 </div> 86 </div>
58 <div class="features-item"> 87 <div class="features-item">
59 <div class="icon"> 88 <div class="icon">
60 <img src="@/assets/images/index/recommend-icon-3.png" alt=""> 89 <img src="@/assets/images/index/recommend-icon-3.png" alt />
61 </div> 90 </div>
62 <div class="desc">國際級<br>風險管理</div> 91 <div class="desc">
92 國際級
93 <br />風險管理
63 </div> 94 </div>
64 </div> 95 </div>
65 <div class="contact-tips"> 96 </div>
97 <div @click="toContactUs" class="contact-tips">
66 <span class="icon"></span> 98 <span class="icon"></span>
67 聯絡我們 99 聯絡我們
68 </div> 100 </div>
69 </div> 101 </div>
70 102
71 <!-- 线上报价 --> 103 <!-- 线上报价 -->
72 <div class="quote"></div> 104 <div
105 class="quote"
106 :style="
107 'background: url(' +
108 quoteBgUrl +
109 ') center no-repeat;'
110 "
111 >
112 <div class="space1"></div>
113 <div class="tit">線上報價 閃速投保</div>
114 <div class="tit2">
115 平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃，
116 涵蓋重點醫療保障，投保流程簡易，全程線上進行。
117 </div>
118 <!-- tab表格 -->
119 <div class="table">
120 <div class="table-tab">
121 <div
122 @click="onTabHandler(item)"
123 v-html="item.name"
124 v-for="(item, index) in tabList"
125 :key="item.id"
126 class="table-tab-item"
127 :class="{ 'table-tab-item-act': item.index == curTab.index }"
128 :style="
129 'width: calc(100% / ' +
130 tabList.length +
131 ');z-index:' +
132 (tabList.length - index) +
133 ''
134 "
135 >
136 {{ item.name }}
137 </div>
138 </div>
139 <div
140 class="table-cont"
141 :style="'width: calc(100% - 29px *' + (tabList.length - 1) + ')'"
142 >
143 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
144 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
145 <div class="panel panel-left">
146 <div class="desc">
147 <div class="desc-item">・潛在長線資本增值</div>
148 <div class="desc-item">・創建家族財富</div>
149 <div class="desc-item">・身故及意外身故賠償</div>
150 <div class="desc-item">・保單持有人意外身故賠償</div>
151 <div class="desc-item">・自選保費繳付期</div>
152 <div class="desc-item">・彈性賠償支付方式</div>
153 <div class="desc-item">・豁免醫療核保</div>
154 </div>
155 </div>
156 <div class="panel panel-right">
157 <div class="func func1">
158 <div class="func1-item">
159 <div class="k">性別</div>
160 <div class="gender">
161 <div class="gender-item " @click="onQuoteSexHandler(1)">
162 男性
163 <img
164 v-if="quoteData.gender == 1"
165 src="@/assets/images/common/icon-male-act.png"
166 alt=""
167 />
168 <img
169 v-else
170 src="@/assets/images/common/icon-male.png"
171 alt=""
172 />
173 </div>
174 <div class="gender-item" @click="onQuoteSexHandler(2)">
175 女性
176 <img
177 v-if="quoteData.gender == 2"
178 src="@/assets/images/common/icon-female-act.png"
179 alt=""
180 />
181 <img
182 v-else
183 src="@/assets/images/common/icon-female.png"
184 alt=""
185 />
186 </div>
187 </div>
188 </div>
189 <div class="func1-item">
190 <div class="k">年齡</div>
191 <div class="age">
192 <div class="ipt-wrap-linear">
193 <div class="down-arrow"></div>
194 <div class="cont">
195 <el-select
196 class="ipt"
197 v-model="formData.gender"
198 :placeholder="'年龄'"
199 >
200 <el-option
201 v-for="(item, index) in 100"
202 :key="index"
203 :label="item"
204 :value="item"
205 ></el-option>
206 </el-select>
207 </div>
208 </div>
209 </div>
210 </div>
211 </div>
212 </div>
213 </div>
214 </div>
215 <div class="quote-btn">立即報價</div>
216 <div class="customer-service">
217 我想<span @click="toContactUs" class="udl pointer">聯絡客服</span>
218 </div>
219 </div>
73 220
74 <!-- 联系我们表单 --> 221 <!-- 联系我们表单 -->
75 <div class="contact"> 222 <div class="contact">
76 <div class="box-w panel"> 223 <div class="box-w panel">
77 <div class="panel-left"> 224 <div class="panel-left">
78 <div class="t1">如欲了解我們的產品，<br>歡迎聯絡我們。</div> 225 <div class="t1">
226 如欲了解我們的產品，
227 <br />歡迎聯絡我們。
228 </div>
79 <div class="t2">想了解更多？致電2983 8866^聯絡我們。</div> 229 <div class="t2">想了解更多？致電2983 8866^聯絡我們。</div>
80 <img class="pic-mobile" src="@/assets/images/index/index-mobile.png" alt=""> 230 <img
231 class="pic-mobile"
232 src="@/assets/images/index/index-mobile.png"
233 alt
234 />
81 </div> 235 </div>
82 <div class="panel-right"> 236 <div class="panel-right">
83 <div class="form"> 237 <div class="form">
84 <div class="ipt-wrap2"> 238 <div class="form-item fl">
239 <!-- 称呼 -->
240 <div class="ipt-wrap-linear dear">
241 <div class="down-arrow"></div>
242 <div class="cont">
243 <el-select
244 class="ipt"
245 v-model="formData.gender"
246 :placeholder="'稱呼'"
247 >
248 <el-option
249 v-for="(item, index) in genderList"
250 :key="index"
251 :label="item.n"
252 :value="item.v"
253 ></el-option>
254 </el-select>
255 </div>
256 </div>
257 <!-- 姓名 -->
258 <div class="ipt-wrap-linear name">
259 <div class="cont">
260 <input class="ipt" type="text" placeholder="姓名*" />
261 </div>
262 </div>
263 </div>
264
265 <div class="form-item">
266 <!-- 联系电话 -->
267 <div class="ipt-wrap-linear">
268 <div class="cont">
269 <input class="ipt" type="text" placeholder="聯絡電話*" />
270 </div>
271 </div>
272 </div>
273
274 <div class="form-item">
275 <!-- 電郵 -->
276 <div class="ipt-wrap-linear">
85 <div class="cont"> 277 <div class="cont">
86 <input class="ipt" type="text"> 278 <input class="ipt" type="text" placeholder="電郵*" />
87 </div> 279 </div>
88 </div> 280 </div>
89 </div> 281 </div>
282
283 <div class="form-item">
284 <!-- 理想聯絡時間 -->
285 <div class="ipt-wrap-linear">
286 <div class="down-arrow"></div>
287 <div class="cont">
288 <!-- <input class="ipt" type="text" placeholder="理想聯絡時間*" /> -->
289 <date-picker
290 class="ipt-date"
291 :formatter="'dd-MM-yyyy'"
292 :placeholder="'理想聯絡時間'"
293 v-model="formData.birthDate"
294 :filtModel="['future']"
295 :cusStyle="{
296 border: 'none !important',
297 'background-color': 'transparent !important',
298 padding: '16px 24px',
299 color: '#606266',
300 'text-align': 'center'
301 }"
302 ></date-picker>
90 </div> 303 </div>
91 </div> 304 </div>
92 </div> 305 </div>
93 306
307 <div class="form-item">
308 <!-- 查詢事項 -->
309 <div class="ipt-wrap-linear">
310 <div class="cont">
311 <textarea
312 class="ipt textarea"
313 placeholder="查詢事項"
314 ></textarea>
315 </div>
316 </div>
317 </div>
318 </div>
319 <!-- 错误提示 -->
320 <div class="err-tips">{{ errTips }}</div>
321 <div class="submit-btn">提交</div>
322 </div>
323 </div>
324 </div>
94 </div> 325 </div>
95 </template> 326 </template>
96 327
...@@ -98,3 +329,5 @@ ...@@ -98,3 +329,5 @@
98 <style lang="scss" scoped> 329 <style lang="scss" scoped>
99 @import "./index.scss"; 330 @import "./index.scss";
100 </style> 331 </style>
332
333 <style lang="scss"></style>
......
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
15 color: $cDark; 15 color: $cDark;
16 } 16 }
17 17
18
19 // 提示栏 18 // 提示栏
20 .alert { 19 .alert {
21 @extend .bb; 20 @extend .bb;
...@@ -67,7 +66,7 @@ ...@@ -67,7 +66,7 @@
67 position: absolute; 66 position: absolute;
68 top: 26.4px; 67 top: 26.4px;
69 right: 24px; 68 right: 24px;
70 background-image: url('~@/assets/images/common/down-arrow.png'); 69 background-image: url("~@/assets/images/common/down-arrow.png");
71 width: 12px; 70 width: 12px;
72 height: 8px; 71 height: 8px;
73 pointer-events: none; 72 pointer-events: none;
...@@ -78,7 +77,7 @@ ...@@ -78,7 +77,7 @@
78 position: absolute; 77 position: absolute;
79 top: 14.4px; 78 top: 14.4px;
80 right: 24px; 79 right: 24px;
81 background-image: url('~@/assets/images/common/icon-eyes-off.png'); 80 background-image: url("~@/assets/images/common/icon-eyes-off.png");
82 width: 27px; 81 width: 27px;
83 height: 24px; 82 height: 24px;
84 pointer-events: none; 83 pointer-events: none;
...@@ -86,7 +85,7 @@ ...@@ -86,7 +85,7 @@
86 } 85 }
87 86
88 .eye-act { 87 .eye-act {
89 background-image: url('~@/assets/images/common/icon-eyes-on.png'); 88 background-image: url("~@/assets/images/common/icon-eyes-on.png");
90 } 89 }
91 } 90 }
92 91
...@@ -104,9 +103,9 @@ ...@@ -104,9 +103,9 @@
104 } 103 }
105 } 104 }
106 105
107
108 // 输入框 106 // 输入框
109 .ipt-wrap2 { 107 .ipt-wrap-linear {
108 position: relative;
110 .ipt { 109 .ipt {
111 @extend .bb; 110 @extend .bb;
112 width: 100%; 111 width: 100%;
...@@ -115,7 +114,8 @@ ...@@ -115,7 +114,8 @@
115 border: 2px solid transparent; 114 border: 2px solid transparent;
116 background-clip: padding-box, border-box; 115 background-clip: padding-box, border-box;
117 background-origin: padding-box, border-box; 116 background-origin: padding-box, border-box;
118 background-image: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #feab1b, #f15a08); 117 background-image: linear-gradient(90deg, #fff, #fff),
118 linear-gradient(90deg, #feab1b, #f15a08);
119 119
120 background-color: #ffffff; 120 background-color: #ffffff;
121 padding: 0 24px; 121 padding: 0 24px;
...@@ -123,29 +123,33 @@ ...@@ -123,29 +123,33 @@
123 display: flex; 123 display: flex;
124 align-items: center; 124 align-items: center;
125 font-size: 22px; 125 font-size: 22px;
126 color: $cFontGray2;
126 127
127 &:lang(zh) { 128 &:lang(zh) {
128 letter-spacing: 1.1px; 129 letter-spacing: 1.1px;
129 } 130 }
130 } 131 }
132 ::-webkit-input-placeholder {
133 color: rgba(102, 102, 102, 0.5);
134 }
131 135
132 .down-arrow { 136 .down-arrow {
133 position: absolute; 137 position: absolute;
134 top: 26.4px; 138 top: 18px;
135 right: 24px; 139 right: 24px;
136 background-image: url('~@/assets/images/common/down-arrow.png'); 140 background-image: url("~@/assets/images/common/down-arrow-linear.png");
137 width: 12px; 141 width: 20px;
138 height: 8px; 142 height: 15px;
139 pointer-events: none; 143 pointer-events: none;
140 cursor: default; 144 cursor: default;
141 145 z-index: 1000;
142 } 146 }
143 147
144 .eye { 148 .eye {
145 position: absolute; 149 position: absolute;
146 top: 14.4px; 150 top: 14.4px;
147 right: 24px; 151 right: 24px;
148 background-image: url('~@/assets/images/common/icon-eyes-off.png'); 152 background-image: url("~@/assets/images/common/icon-eyes-off.png");
149 width: 27px; 153 width: 27px;
150 height: 24px; 154 height: 24px;
151 pointer-events: none; 155 pointer-events: none;
...@@ -153,12 +157,10 @@ ...@@ -153,12 +157,10 @@
153 } 157 }
154 158
155 .eye-act { 159 .eye-act {
156 background-image: url('~@/assets/images/common/icon-eyes-on.png'); 160 background-image: url("~@/assets/images/common/icon-eyes-on.png");
157 } 161 }
158 } 162 }
159 163
160
161
162 // 轮播 164 // 轮播
163 .swiper-pagination-bullet { 165 .swiper-pagination-bullet {
164 width: 12px !important; 166 width: 12px !important;
...@@ -173,6 +175,7 @@ ...@@ -173,6 +175,7 @@
173 .alert { 175 .alert {
174 padding: 4px 36px 4px 12px; 176 padding: 4px 36px 4px 12px;
175 177
176 .icon {} 178 .icon {
179 }
177 } 180 }
178 } 181 }
......
...@@ -152,6 +152,7 @@ ...@@ -152,6 +152,7 @@
152 @mixin content-percent($percent:4%) { 152 @mixin content-percent($percent:4%) {
153 box-sizing: border-box; 153 box-sizing: border-box;
154 padding: 0 $percent; 154 padding: 0 $percent;
155
155 } 156 }
156 157
157 @mixin border-tans($borderRadius:1px, $borderSize:2px) { 158 @mixin border-tans($borderRadius:1px, $borderSize:2px) {
......
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
2 $--color-primary: #f05a23; 2 $--color-primary: #f05a23;
3 3
4 /* 改变 icon 字体路径变量，必需 */ 4 /* 改变 icon 字体路径变量，必需 */
5 $--font-path: '~element-ui/lib/theme-chalk/fonts'; 5 $--font-path: "~element-ui/lib/theme-chalk/fonts";
6 6
7 @import "~element-ui/packages/theme-chalk/src/index"; 7 @import "~element-ui/packages/theme-chalk/src/index";
8 8
9 // @import '@/styles/_support.scss'; 9 @import "@/styles/_var.scss";
10 10
11 .filter-comp{ 11 .filter-comp {
12 .el-checkbox-group { 12 .el-checkbox-group {
13 display: flex; 13 display: flex;
14 flex-wrap: wrap; 14 flex-wrap: wrap;
...@@ -22,5 +22,39 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; ...@@ -22,5 +22,39 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
22 font-size: 24px; 22 font-size: 24px;
23 } 23 }
24 } 24 }
25 }
26
27 .el-select .el-input.is-focus .el-input__inner {
28 border-color: transparent !important;
29 }
30
31 .ipt .el-input__inner {
32 border: none !important;
33 background-color: transparent !important;
34 padding: 0 !important;
35 }
36
37 .el-select-dropdown__item.selected {
38 color: $cOrange !important;
39 }
40
41 .el-input__suffix {
42 display: none;
43 }
44
45 .page-index .el-input__inner,
46 .clarms .el-input__inner {
47 font-size: 22px;
48 border: none;
49 }
50
51 .page-index .contact .el-input__inner {
52 text-align: center;
53 }
25 54
55 .page-index .quote .el-input__inner {
56 text-align: center;
57 color: $cOrange2;
58 font-size: 22px;
59 font-weight: bold;
26 } 60 }
......