Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
938dc91c by simon
Options

默认提交

1 parent 35a25e80
Expand all
Inline Side-by-side
Showing 11 changed files with 334 additions and 126 deletions
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
89 @import "@/styles/_support.scss"; 89 @import "@/styles/_support.scss";
90 90
91 html { 91 html {
92 font-family:"Arial", "Microsoft YaHei"; 92 font-family: "Arial", "Microsoft YaHei";
93 font-size: 12px; 93 font-size: 12px;
94 word-spacing: 1px; 94 word-spacing: 1px;
95 word-break: break-word; 95 word-break: break-word;
...@@ -471,6 +471,12 @@ textarea { ...@@ -471,6 +471,12 @@ textarea {
471 max-width: 100% !important; 471 max-width: 100% !important;
472 } 472 }
473 } 473 }
474 .page-vhis {
475 .video-js {
476 width: 100% !important;
477 max-width: 100% !important;
478 }
479 }
474 480
475 #app { 481 #app {
476 .header { 482 .header {
......

4.04 KB | W: | H:

2.03 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

2.03 KB | W: | H:

4.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -936,16 +936,27 @@ module.exports = { ...@@ -936,16 +936,27 @@ module.exports = {
936 t3: "優惠碼：CISAVE20" 936 t3: "優惠碼：CISAVE20"
937 }, 937 },
938 title: { 938 title: {
939 t1: "自願醫保計劃", 939 t1: "平安“好e時”自願醫保標準計劃 ",
940 t2: "平安人壽（香港）", 940 t2: "平安「好e時」自願醫保標準計劃為政府自願醫保認可的標準計劃，涵蓋重點醫療保障，投保流程簡易，全程線上進行。",
941 t3: "自願醫保標準計劃", 941 t3: "",
942 t4: "為政府自願醫保認可的標準計劃，可同時申請享有稅務扣减優惠。", 942 t4: "",
943 }, 943 },
944 main: { 944 main: {
945 t1: "產品特點", 945 t1: "計劃特點",
946 }, 946 },
947 guarantee1: { 947 guarantee1: {
948 t1: "保障一覽", 948 title: "計劃概覽",
949 k1: "投保年齡（受保人的實際年齡)",
950 v1: "出生後15 天起至80 歲",
951 k2: "保障期",
952 v2: "1年，保證續保至100 歲",
953 k3: "保單貨幣",
954 v3: "港元",
955 k4: "保費繳交方式",
956 v4: "月繳/年繳",
957 k5: "合資格客戶（受保人）",
958 v5: "香港居民（持有由香港特區政府簽發的有效居民身份證人士）",
959
949 t2: "產品性質", 960 t2: "產品性質",
950 t3: "醫療保障保險計劃", 961 t3: "醫療保障保險計劃",
951 t4: "投保人投保時的年齡", 962 t4: "投保人投保時的年齡",
...@@ -959,15 +970,6 @@ module.exports = { ...@@ -959,15 +970,6 @@ module.exports = {
959 t12: "每年保障限額", 970 t12: "每年保障限額",
960 t13: "每保單年度420,000 港元", 971 t13: "每保單年度420,000 港元",
961 }, 972 },
962 guarantee2: {
963 t1: "更多特點：",
964 t2: "若您更改計劃、終止保單或您未能支付保費導致保單被終止，便有機會獲退還部分款項",
965 t3: "（如適用）。",
966 t4: "保證自動續保，無需進一步提供健康證明。",
967 t5: "保證於保費繳付期內保費不變。",
968 t6: "計劃不包括：",
969 t7: "若受保人於保單簽發日後一年內自殺，將不能獲發身故賠償，但將獲退還於現行保單保障期內所繳的總保費。",
970 },
971 download: { 973 download: {
972 t1: "下載產品簡介", 974 t1: "下載產品簡介",
973 t2: "下載標準保費表", 975 t2: "下載標準保費表",
...@@ -975,29 +977,29 @@ module.exports = { ...@@ -975,29 +977,29 @@ module.exports = {
975 }, 977 },
976 submitBtn: "立即投保", 978 submitBtn: "立即投保",
977 productList: [{ 979 productList: [{
978 title: "保證續保至100歲", 980 title: "政府認可 安心保障",
979 desc: "平安人壽（香港）「好e時」自願醫保標準計劃 接受任何介乎15天至80歲人士投保，您可以一直續保至100歲。計劃保證不會因您的索償記錄或身體狀況變而調高續保保費，而您的續保保費將根據當時保單週年日之保費表釐定。", 981 desc: "本計劃為政府自願醫保認可的標準計劃，讓您在需要時候可透過住院保險而使用私營醫療服務，並可同時申請享有稅務扣減優惠。此計劃獲食物及衞生局認可，讓您倍感安心。如欲了解更多自願醫保詳情，可瀏覽www.vhis.gov.hk。",
980 tips: "" 982 tips: ""
981 }, { 983 }, {
982 title: "不設終身保障限額", 984 title: "不設終身保障限額",
983 desc: "每年保障限額高達420,000 港元，並將每年重新設置至原先限額，讓您享有充裕的醫療保障，減輕因醫療需求而造成的財務負擔。", 985 desc: "本計劃不設終身保障限額，每年保障限額高達420,000 港元，並將每年重新設置至原先限額，讓您享有重點的醫療保障，減輕因醫療需求而造成的財務負擔。",
984 tips: "" 986 tips: ""
985 }, { 987 }, {
986 title: "一家投保 盡享稅務扣減", 988 title: "一家投保 盡享稅務扣減",
987 desc: "保費可用作申請稅務扣除，若保單持有人為納稅人，便可為自己及任何指明親屬，即每一名合資格受保人，申請每名受保人每年8,000 港元的扣稅額，可申請稅務扣減的指明親屬 數目更不設上限。", 989 desc: "本計劃的保費可用作申請稅務扣除，若保單持有人為納稅人，便可為自己及任何指明親屬*，即每一名合資格受保人，申請每名受保人每年8,000 港元的扣稅額，可申請稅務扣減的指明親屬 數目更不設上限。",
988 tips: "*需根據香港自願醫保計劃保單所繳付的合資格保費的扣稅安排" 990 tips: "*指明親屬包括納稅人配偶及子女、納稅人或其配偶的祖父母、外祖父母、父母和兄弟姐妹。"
989 }, { 991 }, {
990 title: "承保投保前未知的已有疾病", 992 title: "承保投保前未知的已有疾病",
991 desc: "承保您在投保時不察覺，及理應不察覺的已有病症。對上述有關病症，此計劃會在保單生效首3年的等候期間提供部份保障*，並由第4個保單年度起提供全面保障。", 993 desc: "現時一般醫療保險均不承保投保前的已有疾病，本計劃為您帶來多一份安心，承保您在投保時不察覺，及理應不察覺的已有病症。對上述有關病症，此計劃會在保單生效首3年的等候期間提供部份保障*，並由第4個保單年度起提供全面保障。",
992 tips: "*保單生效日後提供部分賠償(第二年25%、第三年50%)，其後提供全面賠償(100%) " 994 tips: "*保單生效日後提供部分賠償(第二年25%、第三年50%)，其後提供全面賠償(100%) "
993 }, { 995 }, {
994 title: "出院免找數 讓您安心無憂", 996 title: "保證續保至100歲",
995 desc: "只需完成簡單手續，我們便會直接向有關私家醫院繳付住院期間的醫療開支。", 997 desc: "本計劃接受任何介乎出生後15天至80歲人士投保，您可以一直續保至100歲。計劃保證不會因您的索償記錄或身體狀況改變而調高續保保費，而您的續保保費將根據當時保單週年日之保費表釐定。",
996 tips: "*有關詳情及指定醫院列表，請參閱「出院免找數服務」單張。" 998 tips: ""
997 }, { 999 }, {
998 title: "無索償折扣", 1000 title: "無索償保費折扣",
999 desc: "最高可獲得上一個保單年度有已繳總保費之10%。 如您在連續3個保單年度或以上沒有作出賠償，在下一個保單週年日您將可獲得此保費折扣。", 1001 desc: "為鼓勵您保持健康生活，如您於本計劃的連續3個保單年度內，沒有任何索償記錄，我們會於下一保單年度退還上一個保單年度保費的百分之十（10%）作為無索償折扣。",
1000 tips: "*有關詳情請參閱產品介紹書。" 1002 tips: ""
1001 }] 1003 }]
1002 } 1004 }
1003 } 1005 }
......
...@@ -27,7 +27,7 @@ $navHeiM: 6rem; ...@@ -27,7 +27,7 @@ $navHeiM: 6rem;
27 27
28 .logo-img { 28 .logo-img {
29 margin-right: 2rem; 29 margin-right: 2rem;
30 max-width: 17.75rem ; 30 max-width: 17.75rem;
31 cursor: pointer; 31 cursor: pointer;
32 } 32 }
33 33
...@@ -113,34 +113,42 @@ $navHeiM: 6rem; ...@@ -113,34 +113,42 @@ $navHeiM: 6rem;
113 113
114 } 114 }
115 115
116 @media (max-width: 1200px) { 116 // @media (max-width: 1200px) {
117 .v-header { 117 // .v-header {
118 @include content-percent(); 118 // @include content-percent();
119 119
120 .main-nav {} 120 // .main-nav {}
121 121
122 .logo-img { 122 // .logo-img {
123 max-width: 17.75rem ; 123 // max-width: 17.75rem ;
124 margin: 0; 124 // margin: 0;
125 } 125 // }
126 126
127 .pc { 127 // .pc {
128 display: none; 128 // display: none;
129 } 129 // }
130 130
131 .mobile { 131 // .mobile {
132 display: block; 132 // display: block;
133 &-nav-list { 133 // &-nav-list {
134 top: 32px; 134 // top: 32px;
135 } 135 // }
136 } 136 // }
137 } 137 // }
138 138
139 139
140 } 140 // }
141 141
142 @media (max-width: 768px) { 142 @media (max-width: 768px) {
143 .v-header { 143 .v-header {
144
145 // 原1200px临界样式
146 @include content-percent();
147
148 .pc {
149 display: none;
150 }
151
144 height: $navHeight-M; 152 height: $navHeight-M;
145 153
146 .logo-img { 154 .logo-img {
...@@ -150,6 +158,7 @@ $navHeiM: 6rem; ...@@ -150,6 +158,7 @@ $navHeiM: 6rem;
150 158
151 .mobile { 159 .mobile {
152 display: block; 160 display: block;
161
153 &-nav-list { 162 &-nav-list {
154 top: 24px; 163 top: 24px;
155 } 164 }
......
...@@ -13,7 +13,7 @@ var UA = require("ua-device") ...@@ -13,7 +13,7 @@ var UA = require("ua-device")
13 export default { 13 export default {
14 data() { 14 data() {
15 return { 15 return {
16 key: 'value', 16 key: '$750<br>每保单年度最多180日',
17 // swiper 17 // swiper
18 swiperOption: { 18 swiperOption: {
19 navigation: { 19 navigation: {
...@@ -64,26 +64,6 @@ export default { ...@@ -64,26 +64,6 @@ export default {
64 onHideBannerTipsHandler() { 64 onHideBannerTipsHandler() {
65 this.bannerTipsVisible = false; 65 this.bannerTipsVisible = false;
66 }, 66 },
67 // fetchBanner() {
68 // return new Promise((resolve, reject) => {
69 // httpPost({
70 // url: api.banner
71 // }).then(res => {
72 // resolve(res);
73 // });
74 // });
75 // },
76 // fetchIndexVideo() {
77 // return new Promise((resolve, reject) => {
78 // httpPost({
79 // url: api.indexVideo
80 // }).then(res => {
81 // sessionStorage.setItem("_video_url", res.videoUrl);
82 // sessionStorage.setItem("_poster_url", res.posterUrl);
83 // resolve(res);
84 // });
85 // });
86 // },
87 bottomBtnHandle() { 67 bottomBtnHandle() {
88 this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink); 68 this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink);
89 }, 69 },
...@@ -152,27 +132,6 @@ export default { ...@@ -152,27 +132,6 @@ export default {
152 this.playerOptions = playerOptions; 132 this.playerOptions = playerOptions;
153 }, 133 },
154 initProduct() { 134 initProduct() {
155 // let productList = [{
156 // showMore: false,
157 // title: "保證續保至100歲",
158 // desc: "平安人壽（香港）「好e時」自願醫保標準計劃 接受任何介乎14天至80歲人士投保，您可以一直續保至100歲。計劃保證不會因您的索償記錄或身體狀況變而調高續保保費，而您的續保保費將根據當時保單週年日之保費表釐定。",
159 // tips:"*需根據香港自願醫保計劃保單所繳付的合資格保費的扣稅安排"
160 // }, {
161 // showMore: false,
162 // title: "不設終身保障限額"
163 // }, {
164 // showMore: false,
165 // title: "一家投保 盡享稅務扣減"
166 // }, {
167 // showMore: false,
168 // title: "承保投保前未知的已有疾病"
169 // }, {
170 // showMore: false,
171 // title: "出院免找數 讓您安心無憂"
172 // }, {
173 // showMore: false,
174 // title: "無索償折扣"
175 // }];
176 let productList = this.i18n.vhisDetail.productList; 135 let productList = this.i18n.vhisDetail.productList;
177 if (this.productList && this.productList.length > 0) { 136 if (this.productList && this.productList.length > 0) {
178 for (let index = 0; index < productList.length; index++) { 137 for (let index = 0; index < productList.length; index++) {
......
...@@ -165,29 +165,7 @@ $borderSize: 6px; ...@@ -165,29 +165,7 @@ $borderSize: 6px;
165 text-align: center; 165 text-align: center;
166 font-size: $fontSize; 166 font-size: $fontSize;
167 167
168 .tt { 168 .tt {}
169 // display: flex;
170 // justify-content: center;
171 // align-items: center;
172 // text-align: center;
173 }
174
175 .easy {
176 display: inline;
177 vertical-align: middle;
178 }
179
180 .easy1 {
181 margin-right: 8px;
182 margin-top: -4px;
183 height: 36px;
184 }
185
186 .easy2 {
187 margin-right: 10px;
188 margin-top: -4px;
189 height: 26px;
190 }
191 169
192 .t1 { 170 .t1 {
193 color: $cOrange2; 171 color: $cOrange2;
...@@ -201,9 +179,10 @@ $borderSize: 6px; ...@@ -201,9 +179,10 @@ $borderSize: 6px;
201 179
202 .t2 { 180 .t2 {
203 font-size: 24px; 181 font-size: 24px;
204 margin-top: 36px;
205 line-height: 1.39; 182 line-height: 1.39;
206 183 // margin-top: 36px;
184 max-width: 780px;
185 margin: 36px auto 0;
207 } 186 }
208 187
209 .t2:lang(zh) { 188 .t2:lang(zh) {
...@@ -276,7 +255,7 @@ $borderSize: 6px; ...@@ -276,7 +255,7 @@ $borderSize: 6px;
276 display: flex; 255 display: flex;
277 margin-top: 6px; 256 margin-top: 6px;
278 // margin: 12px auto 0; 257 // margin: 12px auto 0;
279 258
280 &-icon-wrap { 259 &-icon-wrap {
281 @extend .fcc; 260 @extend .fcc;
282 cursor: pointer; 261 cursor: pointer;
...@@ -338,8 +317,7 @@ $borderSize: 6px; ...@@ -338,8 +317,7 @@ $borderSize: 6px;
338 317
339 &-border { 318 &-border {
340 width: 100%; 319 width: 100%;
341 height: 4px; 320 @include border-tans(0px, 1.5px);
342 background-color: $cOrange2;
343 } 321 }
344 322
345 .table-item { 323 .table-item {
...@@ -350,7 +328,7 @@ $borderSize: 6px; ...@@ -350,7 +328,7 @@ $borderSize: 6px;
350 .tt { 328 .tt {
351 @extend .bb; 329 @extend .bb;
352 width: 50%; 330 width: 50%;
353 padding: 18px 12px 18px 0; 331 padding: 18px 18px 18px 0;
354 color: $cFontGray3; 332 color: $cFontGray3;
355 } 333 }
356 334
...@@ -362,6 +340,8 @@ $borderSize: 6px; ...@@ -362,6 +340,8 @@ $borderSize: 6px;
362 background-color: #fef1ed; 340 background-color: #fef1ed;
363 padding-left: 100px; 341 padding-left: 100px;
364 border-right: solid 1px #e4e4e5; 342 border-right: solid 1px #e4e4e5;
343 display: flex;
344 align-items: center;
365 } 345 }
366 346
367 .val { 347 .val {
...@@ -443,6 +423,124 @@ $borderSize: 6px; ...@@ -443,6 +423,124 @@ $borderSize: 6px;
443 } 423 }
444 } 424 }
445 425
426 // 保障内容
427 .guarantee2 {
428
429 .tit {}
430
431 .container {
432 display: flex;
433 margin: 48px auto 0;
434
435 .table {
436 width: 582px;
437
438 .smal {
439 font-size: 18px;
440 }
441
442 .titl {
443 position: relative;
444 display: flex;
445 margin-bottom: 8px;
446
447 &-item {
448 width: 50%;
449 text-align: center;
450 color: $cOrange2;
451 font-size: 22px;
452 }
453 }
454
455 &-item {
456 height: 136px;
457
458 .label {
459 // padding: 0;
460 // @extend .fcc;
461 align-items: flex-start;
462 display: flex;
463 padding: 40px 12px 0;
464
465 .nn {}
466
467 .n1 {
468 text-align: right;
469 width: 44px;
470 margin-top: 2px;
471 margin-right: 8px;
472 color: $cOrange2;
473 }
474
475 .n2 {
476 flex: 1;
477 }
478 }
479
480 .val {
481 @extend .fcc;
482 flex-wrap: wrap;
483 padding: 0 0;
484 text-align: center;
485 line-height: 1.5;
486 flex: 1;
487
488 &-item {
489 width: 100%;
490 height: 81px;
491 }
492 }
493 }
494
495 &-item-4 {
496 height: 324px;
497
498 .val {
499 align-items: flex-start;
500 padding: 0 0;
501 text-align: center;
502 line-height: 1.5;
503
504
505 &-item {
506 @extend .bb;
507 @extend .fcc;
508 height: 81px;
509 border-bottom: solid 1px #e4e4e5;
510 }
511 }
512 }
513
514 &-item-3 {
515 height: 408px;
516
517 .val {
518 align-items: flex-start;
519 padding: 0 0;
520 text-align: center;
521 line-height: 1.5;
522
523 &-item {
524 @extend .bb;
525 @extend .fcc;
526 height: 136px;
527 border-bottom: solid 1px #e4e4e5;
528
529 .thr {
530 @extend .bb;
531 @extend .fcc;
532 width: 50%;
533 height: 100%;
534 border-right: solid 1px #e4e4e5;
535 }
536 }
537 }
538 }
539
540 }
541 }
542 }
543
446 // 下载 544 // 下载
447 .download { 545 .download {
448 margin: 100px auto 0; 546 margin: 100px auto 0;
...@@ -456,13 +554,10 @@ $borderSize: 6px; ...@@ -456,13 +554,10 @@ $borderSize: 6px;
456 max-width: 602px; 554 max-width: 602px;
457 height: 67px; 555 height: 67px;
458 line-height: 67px; 556 line-height: 67px;
459 // padding: 2px;
460 // border-radius: $borderSize;
461 cursor: pointer; 557 cursor: pointer;
462 @include border-tans($borderSize); 558 @include border-tans($borderSize);
463 559
464 .cont { 560 .cont {
465 // @extend .fcc;
466 @extend .bb; 561 @extend .bb;
467 display: flex; 562 display: flex;
468 align-items: center; 563 align-items: center;
...@@ -532,3 +627,137 @@ $borderSize: 6px; ...@@ -532,3 +627,137 @@ $borderSize: 6px;
532 height: 12px; 627 height: 12px;
533 background-color: $cOrange2; 628 background-color: $cOrange2;
534 } 629 }
630
631
632
633 @media (max-width: 1200px) {
634 .content {
635 @include content-percent();
636 padding-bottom: $marginMedium-M;
637
638 .vjs-custom-skin {
639 width: 100%;
640 }
641
642 .product {
643 .prod {
644 &-item {
645 width: 45vw;
646 }
647 }
648 }
649 }
650
651 }
652
653 @media (max-width: 768px) {
654
655 .title {
656 padding: 24px 0;
657
658 .title-wrap {
659 @include content-percent();
660 }
661
662 .t1 {
663 font-size: $fontSizeTitle-M2;
664 }
665
666 .t2 {
667 font-size: $fontSize-M2;
668 margin: 18px auto 0;
669 }
670 }
671
672 .content {
673
674 // 产品
675 .product {
676 margin: 48px auto 0;
677
678 .tit {
679 font-size: $fontSizeTitle-M2;
680 }
681
682 .prod {
683 justify-content: center;
684
685 &-item {
686 width: 100%;
687 min-height: 132px;
688
689 .icon-wrap {
690 width: 30%;
691 padding-top: 22px;
692
693 img {
694 width: 50%;
695 }
696 }
697
698 .detail {
699 padding: 22px 10px 12px 0;
700 margin-left: 0;
701 font-size: $fontSize-M2;
702
703 .more {
704 .c1 {
705 font-size: $fontSizeSmall-M2;
706 }
707 }
708 }
709 }
710 }
711 }
712
713 .video {
714 margin: 32px auto 0;
715 }
716
717 // 保障
718 .guarantee {
719 margin: 32px auto 0;
720
721 .tit {
722 font-size: $fontSizeTitle-M2;
723 }
724
725 .table {
726 font-size: $fontSize-M2;
727
728 &-item {
729 flex-wrap: wrap;
730
731 .tt {
732 width: 100%;
733 }
734
735 .label,
736 .val {
737 padding: 18px;
738 }
739 }
740 }
741 }
742
743
744
745 // 下载
746 .download {
747 margin: 48px auto 0;
748
749
750 &-item {
751 .cont {
752 padding: 0;
753 padding-left: 52px;
754 font-size: $fontSize-M2;
755 }
756
757 .icon {
758 margin-right: 24px;
759 }
760 }
761 }
762 }
763 }
......
...@@ -27,12 +27,15 @@ $fontSize:14px; ...@@ -27,12 +27,15 @@ $fontSize:14px;
27 $fontSizeSmall:12px; 27 $fontSizeSmall:12px;
28 28
29 29
30
31
32 $fontSizeTitle-M:17px; 30 $fontSizeTitle-M:17px;
33 $fontSize-M:14px; 31 $fontSize-M:14px;
34 $fontSizeSmall-M:12px; 32 $fontSizeSmall-M:12px;
35 33
34
35 $fontSizeTitle-M2:24px;
36 $fontSize-M2:20px;
37 $fontSizeSmall-M2:16px;
38
36 // Color 39 // Color
37 $cOrange:#f05a23; 40 $cOrange:#f05a23;
38 $cFontGray: #4c4948; 41 $cFontGray: #4c4948;
......