Merge branch 'master' of http://120.27.44.69/dev/pingan-life-index-pro
# Conflicts: # src/pages/vhis-detail/vhis-detail.vue
Showing
22 changed files
with
646 additions
and
639 deletions
src/assets/images/index/index-tab-1.png
0 → 100644
865 Bytes
src/assets/images/index/index-tab-2.png
0 → 100644
865 Bytes
src/assets/images/index/index-tab-3.png
0 → 100644
823 Bytes
src/assets/images/index/index-tab-4.png
0 → 100644
780 Bytes
src/assets/images/index/index-tab-5.png
0 → 100644
767 Bytes
src/assets/images/index/index-tab-act-1.png
0 → 100644
26.8 KB
src/assets/images/index/index-tab-act-2.png
0 → 100644
26.8 KB
src/assets/images/index/index-tab-act-3.png
0 → 100644
18.8 KB
src/assets/images/index/index-tab-act-4.png
0 → 100644
14.5 KB
src/assets/images/index/index-tab-act-5.png
0 → 100644
12 KB
14.2 KB
13.3 KB
1.65 KB
796 Bytes
1 | @import '@/styles/_support.scss'; | 1 | @import "@/styles/_support.scss"; |
2 | 2 | ||
3 | $borderSize: 6px; | 3 | $borderSize: 6px; |
4 | 4 | ||
... | @@ -69,8 +69,6 @@ $borderSize: 6px; | ... | @@ -69,8 +69,6 @@ $borderSize: 6px; |
69 | letter-spacing: 1.5px; | 69 | letter-spacing: 1.5px; |
70 | } | 70 | } |
71 | } | 71 | } |
72 | |||
73 | |||
74 | } | 72 | } |
75 | } | 73 | } |
76 | 74 | ||
... | @@ -101,7 +99,6 @@ $borderSize: 6px; | ... | @@ -101,7 +99,6 @@ $borderSize: 6px; |
101 | } | 99 | } |
102 | 100 | ||
103 | .banner-tips { | 101 | .banner-tips { |
104 | |||
105 | position: absolute; | 102 | position: absolute; |
106 | z-index: 2; | 103 | z-index: 2; |
107 | width: 422px; | 104 | width: 422px; |
... | @@ -110,7 +107,7 @@ $borderSize: 6px; | ... | @@ -110,7 +107,7 @@ $borderSize: 6px; |
110 | top: 50px; | 107 | top: 50px; |
111 | padding: 2px; | 108 | padding: 2px; |
112 | // border-radius: $borderSize; | 109 | // border-radius: $borderSize; |
113 | background-image: url('~@assets/images/vhis/vhis-tips-bg.png'); | 110 | background-image: url("~@assets/images/vhis/vhis-tips-bg.png"); |
114 | @extend .bis; | 111 | @extend .bis; |
115 | 112 | ||
116 | .close { | 113 | .close { |
... | @@ -151,7 +148,6 @@ $borderSize: 6px; | ... | @@ -151,7 +148,6 @@ $borderSize: 6px; |
151 | font-weight: bold; | 148 | font-weight: bold; |
152 | color: $cOrange2; | 149 | color: $cOrange2; |
153 | } | 150 | } |
154 | |||
155 | } | 151 | } |
156 | } | 152 | } |
157 | } | 153 | } |
... | @@ -164,7 +160,8 @@ $borderSize: 6px; | ... | @@ -164,7 +160,8 @@ $borderSize: 6px; |
164 | text-align: center; | 160 | text-align: center; |
165 | font-size: $fontSize; | 161 | font-size: $fontSize; |
166 | 162 | ||
167 | .tt {} | 163 | .tt { |
164 | } | ||
168 | 165 | ||
169 | .t1 { | 166 | .t1 { |
170 | color: $cOrange2; | 167 | color: $cOrange2; |
... | @@ -176,8 +173,6 @@ $borderSize: 6px; | ... | @@ -176,8 +173,6 @@ $borderSize: 6px; |
176 | } | 173 | } |
177 | } | 174 | } |
178 | 175 | ||
179 | |||
180 | |||
181 | .t2 { | 176 | .t2 { |
182 | font-size: 24px; | 177 | font-size: 24px; |
183 | line-height: 1.39; | 178 | line-height: 1.39; |
... | @@ -189,8 +184,6 @@ $borderSize: 6px; | ... | @@ -189,8 +184,6 @@ $borderSize: 6px; |
189 | letter-spacing: 2px; | 184 | letter-spacing: 2px; |
190 | } | 185 | } |
191 | } | 186 | } |
192 | |||
193 | |||
194 | } | 187 | } |
195 | 188 | ||
196 | // 产品 | 189 | // 产品 |
... | @@ -208,8 +201,6 @@ $borderSize: 6px; | ... | @@ -208,8 +201,6 @@ $borderSize: 6px; |
208 | } | 201 | } |
209 | } | 202 | } |
210 | 203 | ||
211 | |||
212 | |||
213 | .prod { | 204 | .prod { |
214 | margin: 24px auto 0; | 205 | margin: 24px auto 0; |
215 | color: $cOrange2; | 206 | color: $cOrange2; |
... | @@ -217,7 +208,6 @@ $borderSize: 6px; | ... | @@ -217,7 +208,6 @@ $borderSize: 6px; |
217 | justify-content: space-between; | 208 | justify-content: space-between; |
218 | flex-wrap: wrap; | 209 | flex-wrap: wrap; |
219 | 210 | ||
220 | |||
221 | &-item { | 211 | &-item { |
222 | @extend .fcc; | 212 | @extend .fcc; |
223 | width: 582px; | 213 | width: 582px; |
... | @@ -260,8 +250,6 @@ $borderSize: 6px; | ... | @@ -260,8 +250,6 @@ $borderSize: 6px; |
260 | } | 250 | } |
261 | } | 251 | } |
262 | 252 | ||
263 | |||
264 | |||
265 | .more { | 253 | .more { |
266 | display: flex; | 254 | display: flex; |
267 | margin-top: 6px; | 255 | margin-top: 6px; |
... | @@ -280,8 +268,6 @@ $borderSize: 6px; | ... | @@ -280,8 +268,6 @@ $borderSize: 6px; |
280 | letter-spacing: 1.2px; | 268 | letter-spacing: 1.2px; |
281 | } | 269 | } |
282 | } | 270 | } |
283 | |||
284 | |||
285 | } | 271 | } |
286 | 272 | ||
287 | .desc { | 273 | .desc { |
... | @@ -331,8 +317,6 @@ $borderSize: 6px; | ... | @@ -331,8 +317,6 @@ $borderSize: 6px; |
331 | } | 317 | } |
332 | } | 318 | } |
333 | 319 | ||
334 | |||
335 | |||
336 | .tit-s { | 320 | .tit-s { |
337 | font-size: $fontSize-M2; | 321 | font-size: $fontSize-M2; |
338 | color: $cFontGray2; | 322 | color: $cFontGray2; |
... | @@ -401,7 +385,6 @@ $borderSize: 6px; | ... | @@ -401,7 +385,6 @@ $borderSize: 6px; |
401 | } | 385 | } |
402 | } | 386 | } |
403 | 387 | ||
404 | |||
405 | .label { | 388 | .label { |
406 | padding-left: 28px; | 389 | padding-left: 28px; |
407 | border-right: solid 1px #e4e4e5; | 390 | border-right: solid 1px #e4e4e5; |
... | @@ -414,7 +397,7 @@ $borderSize: 6px; | ... | @@ -414,7 +397,7 @@ $borderSize: 6px; |
414 | .val { | 397 | .val { |
415 | flex: 1; | 398 | flex: 1; |
416 | 399 | ||
417 | .mark{ | 400 | .mark { |
418 | display: inline-block; | 401 | display: inline-block; |
419 | color: $cOrange2; | 402 | color: $cOrange2; |
420 | } | 403 | } |
... | @@ -423,7 +406,7 @@ $borderSize: 6px; | ... | @@ -423,7 +406,7 @@ $borderSize: 6px; |
423 | margin-left: -13px; | 406 | margin-left: -13px; |
424 | } | 407 | } |
425 | 408 | ||
426 | .star{ | 409 | .star { |
427 | margin-right: 4px; | 410 | margin-right: 4px; |
428 | margin-top: 4px; | 411 | margin-top: 4px; |
429 | } | 412 | } |
... | @@ -491,7 +474,7 @@ $borderSize: 6px; | ... | @@ -491,7 +474,7 @@ $borderSize: 6px; |
491 | li { | 474 | li { |
492 | @extend .bb; | 475 | @extend .bb; |
493 | position: relative; | 476 | position: relative; |
494 | background-image: url('~@assets/images/vhis/vhis-tick.png'); | 477 | background-image: url("~@assets/images/vhis/vhis-tick.png"); |
495 | background-repeat: no-repeat; | 478 | background-repeat: no-repeat; |
496 | background-position: 0 5px; | 479 | background-position: 0 5px; |
497 | padding-left: 40px; | 480 | padding-left: 40px; |
... | @@ -506,7 +489,7 @@ $borderSize: 6px; | ... | @@ -506,7 +489,7 @@ $borderSize: 6px; |
506 | 489 | ||
507 | .label2 { | 490 | .label2 { |
508 | li { | 491 | li { |
509 | background-image: url('~@assets/images/vhis/vhis-cross.png'); | 492 | background-image: url("~@assets/images/vhis/vhis-cross.png"); |
510 | } | 493 | } |
511 | 494 | ||
512 | .t1 { | 495 | .t1 { |
... | @@ -519,7 +502,8 @@ $borderSize: 6px; | ... | @@ -519,7 +502,8 @@ $borderSize: 6px; |
519 | } | 502 | } |
520 | } | 503 | } |
521 | 504 | ||
522 | .val {} | 505 | .val { |
506 | } | ||
523 | } | 507 | } |
524 | } | 508 | } |
525 | } | 509 | } |
... | @@ -528,7 +512,8 @@ $borderSize: 6px; | ... | @@ -528,7 +512,8 @@ $borderSize: 6px; |
528 | .guarantee2 { | 512 | .guarantee2 { |
529 | $cellPadding: 6px; | 513 | $cellPadding: 6px; |
530 | 514 | ||
531 | .tit {} | 515 | .tit { |
516 | } | ||
532 | 517 | ||
533 | .container { | 518 | .container { |
534 | display: flex; | 519 | display: flex; |
... | @@ -565,7 +550,8 @@ $borderSize: 6px; | ... | @@ -565,7 +550,8 @@ $borderSize: 6px; |
565 | padding-right: 2px; | 550 | padding-right: 2px; |
566 | justify-content: flex-start; | 551 | justify-content: flex-start; |
567 | 552 | ||
568 | .nn {} | 553 | .nn { |
554 | } | ||
569 | 555 | ||
570 | .n1 { | 556 | .n1 { |
571 | text-align: left; | 557 | text-align: left; |
... | @@ -602,11 +588,9 @@ $borderSize: 6px; | ... | @@ -602,11 +588,9 @@ $borderSize: 6px; |
602 | // padding: 0 4px; | 588 | // padding: 0 4px; |
603 | } | 589 | } |
604 | } | 590 | } |
605 | |||
606 | } | 591 | } |
607 | 592 | ||
608 | &-item-4 { | 593 | &-item-4 { |
609 | |||
610 | .val { | 594 | .val { |
611 | align-items: flex-start; | 595 | align-items: flex-start; |
612 | text-align: center; | 596 | text-align: center; |
... | @@ -627,7 +611,6 @@ $borderSize: 6px; | ... | @@ -627,7 +611,6 @@ $borderSize: 6px; |
627 | } | 611 | } |
628 | 612 | ||
629 | &-item-3 { | 613 | &-item-3 { |
630 | |||
631 | .val { | 614 | .val { |
632 | align-items: flex-start; | 615 | align-items: flex-start; |
633 | text-align: center; | 616 | text-align: center; |
... | @@ -665,7 +648,6 @@ $borderSize: 6px; | ... | @@ -665,7 +648,6 @@ $borderSize: 6px; |
665 | } | 648 | } |
666 | } | 649 | } |
667 | } | 650 | } |
668 | |||
669 | } | 651 | } |
670 | } | 652 | } |
671 | } | 653 | } |
... | @@ -682,7 +664,7 @@ $borderSize: 6px; | ... | @@ -682,7 +664,7 @@ $borderSize: 6px; |
682 | margin: 0 auto 24px; | 664 | margin: 0 auto 24px; |
683 | max-width: 602px; | 665 | max-width: 602px; |
684 | height: 67px; | 666 | height: 67px; |
685 | line-height: 67px; | 667 | // line-height: 67px; |
686 | cursor: pointer; | 668 | cursor: pointer; |
687 | @include border-tans($borderSize); | 669 | @include border-tans($borderSize); |
688 | 670 | ||
... | @@ -704,41 +686,53 @@ $borderSize: 6px; | ... | @@ -704,41 +686,53 @@ $borderSize: 6px; |
704 | margin-right: 48px; | 686 | margin-right: 48px; |
705 | } | 687 | } |
706 | 688 | ||
707 | 689 | &:lang(zh) { | |
708 | &:lang(zh){ | ||
709 | padding-left: 178px; | 690 | padding-left: 178px; |
710 | } | 691 | } |
711 | } | ||
712 | |||
713 | 692 | ||
693 | .desc{ | ||
694 | flex: 1; | ||
695 | text-align: left; | ||
696 | } | ||
697 | } | ||
714 | } | 698 | } |
715 | } | 699 | } |
716 | 700 | ||
717 | // 提交订单 | 701 | // 立即投保 |
718 | .submit-btn { | 702 | .btn-wrap { |
719 | margin: 50px auto 100px; | 703 | margin: 50px auto 100px; |
720 | @extend .pointer; | 704 | display: flex; |
721 | @extend .bb; | 705 | justify-content: center; |
722 | @include btc4(300px, 50px, 22px); | 706 | |
723 | font-weight: bold; | 707 | .submit-btn { |
708 | @extend .fcc; | ||
709 | @extend .bb; | ||
710 | @include btc4(300px, 50px, 22px); | ||
711 | line-height: normal; | ||
712 | min-width: 300px; | ||
713 | min-height: 50px; | ||
714 | height: auto; | ||
715 | width: auto; | ||
716 | font-weight: bold; | ||
717 | // display: inline-block; | ||
718 | padding: 4px 20px; | ||
719 | } | ||
724 | } | 720 | } |
725 | 721 | ||
726 | |||
727 | .small { | 722 | .small { |
728 | font-size: 14px; | 723 | font-size: 14px; |
729 | display: inline-block; | 724 | display: inline-block; |
730 | vertical-align: text-top; | 725 | vertical-align: text-top; |
731 | } | 726 | } |
732 | 727 | ||
733 | |||
734 | // banner点点 | 728 | // banner点点 |
735 | .swiper-button-prev { | 729 | .swiper-button-prev { |
736 | background-image: url('~@/assets/images/common/button-prev.png'); | 730 | background-image: url("~@/assets/images/common/button-prev.png"); |
737 | left: 360px; | 731 | left: 360px; |
738 | } | 732 | } |
739 | 733 | ||
740 | .swiper-button-next { | 734 | .swiper-button-next { |
741 | background-image: url('~@/assets/images/common/button-next.png'); | 735 | background-image: url("~@/assets/images/common/button-next.png"); |
742 | right: 360px; | 736 | right: 360px; |
743 | } | 737 | } |
744 | 738 | ||
... | @@ -748,7 +742,7 @@ $borderSize: 6px; | ... | @@ -748,7 +742,7 @@ $borderSize: 6px; |
748 | 742 | ||
749 | .swiper-pagination-fraction, | 743 | .swiper-pagination-fraction, |
750 | .swiper-pagination-custom, | 744 | .swiper-pagination-custom, |
751 | .swiper-container-horizontal>.swiper-pagination-bullets { | 745 | .swiper-container-horizontal > .swiper-pagination-bullets { |
752 | bottom: 48px; | 746 | bottom: 48px; |
753 | } | 747 | } |
754 | 748 | ||
... | @@ -768,7 +762,6 @@ $borderSize: 6px; | ... | @@ -768,7 +762,6 @@ $borderSize: 6px; |
768 | width: 100%; | 762 | width: 100%; |
769 | } | 763 | } |
770 | 764 | ||
771 | |||
772 | @media (max-width: 1200px) { | 765 | @media (max-width: 1200px) { |
773 | .content { | 766 | .content { |
774 | @include content-percent(); | 767 | @include content-percent(); |
... | @@ -794,11 +787,9 @@ $borderSize: 6px; | ... | @@ -794,11 +787,9 @@ $borderSize: 6px; |
794 | } | 787 | } |
795 | } | 788 | } |
796 | } | 789 | } |
797 | |||
798 | } | 790 | } |
799 | 791 | ||
800 | @media (max-width: 768px) { | 792 | @media (max-width: 768px) { |
801 | |||
802 | .banner-tips { | 793 | .banner-tips { |
803 | display: none; | 794 | display: none; |
804 | } | 795 | } |
... | @@ -821,7 +812,6 @@ $borderSize: 6px; | ... | @@ -821,7 +812,6 @@ $borderSize: 6px; |
821 | } | 812 | } |
822 | 813 | ||
823 | .content { | 814 | .content { |
824 | |||
825 | // 产品 | 815 | // 产品 |
826 | .product { | 816 | .product { |
827 | margin: 48px auto 0; | 817 | margin: 48px auto 0; |
... | @@ -873,7 +863,6 @@ $borderSize: 6px; | ... | @@ -873,7 +863,6 @@ $borderSize: 6px; |
873 | .guarantee { | 863 | .guarantee { |
874 | margin: 32px auto 0; | 864 | margin: 32px auto 0; |
875 | 865 | ||
876 | |||
877 | .tit { | 866 | .tit { |
878 | font-size: $fontSizeTitle-M2; | 867 | font-size: $fontSizeTitle-M2; |
879 | } | 868 | } |
... | @@ -885,15 +874,14 @@ $borderSize: 6px; | ... | @@ -885,15 +874,14 @@ $borderSize: 6px; |
885 | .table { | 874 | .table { |
886 | font-size: $fontSize-M2; | 875 | font-size: $fontSize-M2; |
887 | 876 | ||
888 | |||
889 | &-item { | 877 | &-item { |
890 | display: flex; | 878 | display: flex; |
891 | flex-wrap: nowrap; | 879 | flex-wrap: nowrap; |
892 | 880 | ||
893 | .tt { | 881 | .tt { |
894 | // width: 100%; | 882 | // width: 100%; |
895 | .ff{ | 883 | .ff { |
896 | .nn{ | 884 | .nn { |
897 | padding: 24px 0; | 885 | padding: 24px 0; |
898 | } | 886 | } |
899 | } | 887 | } |
... | @@ -912,12 +900,11 @@ $borderSize: 6px; | ... | @@ -912,12 +900,11 @@ $borderSize: 6px; |
912 | } | 900 | } |
913 | } | 901 | } |
914 | 902 | ||
915 | &-item2{ | 903 | &-item2 { |
916 | } | 904 | } |
917 | } | 905 | } |
918 | } | 906 | } |
919 | 907 | ||
920 | |||
921 | // 下载 | 908 | // 下载 |
922 | .download { | 909 | .download { |
923 | margin: 48px auto 0; | 910 | margin: 48px auto 0; |
... | @@ -937,7 +924,6 @@ $borderSize: 6px; | ... | @@ -937,7 +924,6 @@ $borderSize: 6px; |
937 | .icon { | 924 | .icon { |
938 | margin-right: 24px; | 925 | margin-right: 24px; |
939 | } | 926 | } |
940 | |||
941 | } | 927 | } |
942 | } | 928 | } |
943 | } | 929 | } | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="page page-vhis"> | 3 | <div class="page page-vhis"> |
4 | <div class="banner-contaner"> | 4 | <div class="banner-contaner"> |
5 | <!-- banner 轮播 --> | 5 | <!-- banner 轮播 --> |
6 | 6 | ||
7 | <div class="banner banner-pc"> | 7 | <div class="banner banner-pc"> |
8 | <swiper :options="swiperOption"> | 8 | <swiper :options="swiperOption"> |
9 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> | 9 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> |
10 | <img class="banner-img" :src="item.pcBannerUrl" /> | 10 | <img class="banner-img" :src="item.pcBannerUrl" /> |
11 | <div class="btn-wrap"> | 11 | <div class="btn-wrap"> |
12 | <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex"> | 12 | <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> | 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> |
14 | </div> | 14 | </div> |
15 | </div> | 15 | </div> |
16 | </swiper-slide> | 16 | </swiper-slide> |
17 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> | 17 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> |
18 | <div class="swiper-button-next" slot="button-next"></div>--> | 18 | <div class="swiper-button-next" slot="button-next"></div>--> |
19 | <!-- <div class="swiper-pagination" slot="pagination"></div> --> | 19 | <!-- <div class="swiper-pagination" slot="pagination"></div> --> |
20 | </swiper> | 20 | </swiper> |
21 | </div> | 21 | </div> |
22 | 22 | ||
23 | <div class="banner banner-mobile"> | 23 | <div class="banner banner-mobile"> |
24 | <swiper class="swiper" :options="swiperOption"> | 24 | <swiper class="swiper" :options="swiperOption"> |
25 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> | 25 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> |
26 | <img class="banner-img" :src="item.mobileBannerUrl" /> | 26 | <img class="banner-img" :src="item.mobileBannerUrl" /> |
27 | <div class="btn-wrap"> | 27 | <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}} ></div> | 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}} ></div> |
29 | </div> | 29 | </div> |
30 | </swiper-slide> | 30 | </swiper-slide> |
31 | <div class="swiper-pagination" slot="pagination"></div> | 31 | <div class="swiper-pagination" slot="pagination"></div> |
32 | </swiper> | 32 | </swiper> |
33 | </div> | 33 | </div> |
34 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> | 34 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> |
35 | <div class="swiper-button-next" slot="button-next"></div>--> | 35 | <div class="swiper-button-next" slot="button-next"></div>--> |
36 | 36 | ||
37 | <div v-if="bannerTipsVisible" class="banner-tips"> | 37 | <div v-if="bannerTipsVisible" class="banner-tips"> |
38 | <div class="cont"> | 38 | <div class="cont"> |
39 | <div class="tit"> | 39 | <div class="tit"> |
40 | <img class="icon" src="@/assets/images/vhis/hot-deal-icon.png" /> {{$t('genRich.bannerTips.t1')}} | 40 | <img class="icon" src="@/assets/images/vhis/hot-deal-icon.png" /> {{$t('genRich.bannerTips.t1')}} |
41 | </div> | 41 | </div> |
42 | <div class="desc"> | 42 | <div class="desc"> |
43 | <div class="t1">{{$t('genRich.bannerTips.t2')}}</div> | 43 | <div class="t1">{{$t('genRich.bannerTips.t2')}}</div> |
44 | <div class="t2">{{$t('genRich.bannerTips.t3')}}</div> | 44 | <div class="t2">{{$t('genRich.bannerTips.t3')}}</div> |
45 | </div> | 45 | </div> |
46 | </div> | 46 | </div> |
47 | <img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png" /> | 47 | <img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png" /> |
48 | </div> | 48 | </div> |
49 | </div> | 49 | </div> |
50 | <!-- 标题 --> | 50 | <!-- 标题 --> |
51 | <div class="title"> | 51 | <div class="title"> |
52 | <div class="title-wrap"> | 52 | <div class="title-wrap"> |
53 | <div class="tt t1">{{$t('genRich.title.t1')}}</div> | 53 | <div class="tt t1">{{$t('genRich.title.t1')}}</div> |
54 | <div class="tt t2">{{$t('genRich.title.t2')}}{{$t('genRich.title.t3')}}</div> | 54 | <div class="tt t2">{{$t('genRich.title.t2')}}{{$t('genRich.title.t3')}}</div> |
55 | </div> | 55 | </div> |
56 | </div> | 56 | </div> |
57 | 57 | ||
58 | <div class="content"> | 58 | <div class="content"> |
59 | <!-- 产品特点 --> | 59 | <!-- 产品特点 --> |
60 | <div class="box product"> | 60 | <div class="box product"> |
61 | <div class="tit">{{$t('genRich.main.t1')}}</div> | 61 | <div class="tit">{{$t('genRich.main.t1')}}</div> |
62 | <div class="prod"> | 62 | <div class="prod"> |
63 | <div v-for="(item,index) in productList" :key="item.id" class="prod-item"> | 63 | <div v-for="(item,index) in productList" :key="item.id" class="prod-item"> |
64 | <div class="cont"> | 64 | <div class="cont"> |
65 | <div class="icon-wrap"> | 65 | <div class="icon-wrap"> |
66 | <img :src="require('@/assets/images/gen-rich/gen-rich-icon'+(index+1)+'.png')" /> | 66 | <img :src="require('@/assets/images/gen-rich/gen-rich-icon'+(index+1)+'.png')" /> |
67 | </div> | 67 | </div> |
68 | <div class="detail"> | 68 | <div class="detail"> |
69 | <div class="t1" v-html="item.title">{{item.title}}</div> | 69 | <div class="t1" v-html="item.title">{{item.title}}</div> |
70 | <div class="more pointer" @click="onShowMoreHandler(index)"> | 70 | <div class="more pointer" @click="onShowMoreHandler(index)"> |
71 | <div class="more-icon-wrap"> | 71 | <div class="more-icon-wrap"> |
72 | <img v-if="item.showMore" src="@/assets/images/vhis/vhis-mine.png" /> | 72 | <img v-if="item.showMore" src="@/assets/images/vhis/vhis-mine.png" /> |
73 | <img v-else src="@/assets/images/vhis/vhis-plus.png" /> | 73 | <img v-else src="@/assets/images/vhis/vhis-plus.png" /> |
74 | </div> | 74 | </div> |
75 | <div class="c1">{{item.showMore ? $t('genRich.close') : $t('genRich.expand')}}</div> | 75 | <div class="c1">{{item.showMore ? $t('genRich.close') : $t('genRich.expand')}}</div> |
76 | </div> | 76 | </div> |
77 | <div v-if="item.showMore" class="desc"> | 77 | <div v-if="item.showMore" class="desc"> |
78 | {{item.desc}} | 78 | {{item.desc}} |
79 | <div class="tips">{{item.tips}}</div> | 79 | <div class="tips">{{item.tips}}</div> |
80 | </div> | 80 | </div> |
81 | </div> | 81 | </div> |
82 | </div> | 82 | </div> |
83 | </div> | 83 | </div> |
84 | </div> | 84 | </div> |
85 | </div> | 85 | </div> |
86 | 86 | ||
87 | <!-- 视频 --> | 87 | <!-- 视频 --> |
88 | <div class="box video"> | 88 | <div class="box video"> |
89 | <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"></video-player> | 89 | <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"></video-player> |
90 | </div> | 90 | </div> |
91 | 91 | ||
92 | <!-- 计划总览 --> | 92 | <!-- 计划总览 --> |
93 | <div class="guarantee"> | 93 | <div class="guarantee"> |
94 | <div class="tit-wrap"> | 94 | <div class="tit-wrap"> |
95 | <div class="tit">{{$t('genRich.guarantee1.title')}}</div> | 95 | <div class="tit">{{$t('genRich.guarantee1.title')}}</div> |
96 | <div class="tit-s"> | 96 | <div class="tit-s"> |
97 | {{$t('genRich.guarantee1.titleT1')}} | 97 | {{$t('genRich.guarantee1.titleT1')}} |
98 | <span>{{$t('genRich.guarantee1.titleNum')}}</span> | 98 | <span>{{$t('genRich.guarantee1.titleNum')}}</span> |
99 | {{$t('genRich.guarantee1.titleT2')}} | 99 | {{$t('genRich.guarantee1.titleT2')}} |
100 | </div> | 100 | </div> |
101 | </div> | 101 | </div> |
102 | <div class="tit-lt">{{$t('genRich.guarantee1.titleLt')}}</div> | 102 | <div class="tit-lt">{{$t('genRich.guarantee1.titleLt')}}</div> |
103 | 103 | ||
104 | <div class="container"> | 104 | <div class="container"> |
105 | <div class="table"> | 105 | <div class="table"> |
106 | <div class="border2 table-border"></div> | 106 | <div class="border2 table-border"></div> |
107 | <div class="table-item table-item2"> | 107 | <div class="table-item table-item2"> |
108 | <div class="tt label">{{$t('genRich.guarantee1.k1')}}</div> | 108 | <div class="tt label">{{$t('genRich.guarantee1.k1')}}</div> |
109 | <div class="tt val tt2"> | 109 | <div class="tt val tt2"> |
110 | <div class="ff"> | 110 | <div class="ff"> |
111 | <div class="nn nn1">{{$t('genRich.guarantee1.k11')}}</div> | 111 | <div class="nn nn1">{{$t('genRich.guarantee1.k11')}}</div> |
112 | <div class="nn nn2">{{$t('genRich.guarantee1.v11')}}</div> | 112 | <div class="nn nn2">{{$t('genRich.guarantee1.v11')}}</div> |
113 | </div> | 113 | </div> |
114 | <div class="ff"> | 114 | <div class="ff"> |
115 | <div class="nn nn1">{{$t('genRich.guarantee1.k12')}}</div> | 115 | <div class="nn nn1">{{$t('genRich.guarantee1.k12')}}</div> |
116 | <div v-html="$t('genRich.guarantee1.v12')" class="nn nn2">{{$t('genRich.guarantee1.v12')}}</div> | 116 | <div v-html="$t('genRich.guarantee1.v12')" class="nn nn2">{{$t('genRich.guarantee1.v12')}}</div> |
117 | </div> | 117 | </div> |
118 | </div> | 118 | </div> |
119 | </div> | 119 | </div> |
120 | <div class="table-item"> | 120 | <div class="table-item"> |
121 | <div class="tt label">{{$t('genRich.guarantee1.k2')}}</div> | 121 | <div class="tt label">{{$t('genRich.guarantee1.k2')}}</div> |
122 | <div class="tt val text-c">{{$t('genRich.guarantee1.v2')}}</div> | 122 | <div class="tt val text-c">{{$t('genRich.guarantee1.v2')}}</div> |
123 | </div> | 123 | </div> |
124 | <div class="table-item"> | 124 | <div class="table-item"> |
125 | <div class="tt label">{{$t('genRich.guarantee1.k3')}}</div> | 125 | <div class="tt label">{{$t('genRich.guarantee1.k3')}}</div> |
126 | <div class="tt val text-c">{{$t('genRich.guarantee1.v3')}}</div> | 126 | <div class="tt val text-c">{{$t('genRich.guarantee1.v3')}}</div> |
127 | </div> | 127 | </div> |
128 | <div class="table-item"> | 128 | <div class="table-item"> |
129 | <div class="tt label">{{$t('genRich.guarantee1.k4')}}</div> | 129 | <div class="tt label">{{$t('genRich.guarantee1.k4')}}</div> |
130 | <div class="tt val text-c">{{$t('genRich.guarantee1.v4')}}</div> | 130 | <div class="tt val text-c">{{$t('genRich.guarantee1.v4')}}</div> |
131 | </div> | 131 | </div> |
132 | <div class="table-item"> | 132 | <div class="table-item"> |
133 | <div class="tt label">{{$t('genRich.guarantee1.k5')}}</div> | 133 | <div class="tt label">{{$t('genRich.guarantee1.k5')}}</div> |
134 | <div class="tt val"> | 134 | <div class="tt val"> |
135 | {{$t('genRich.guarantee1.v5')}} | 135 | {{$t('genRich.guarantee1.v5')}} |
136 | <div class="fl"> | 136 | <div class="fl"> |
137 | <span class="mark num">{{$t('genRich.guarantee1.num1')}}</span> | 137 | <span class="mark num">{{$t('genRich.guarantee1.num1')}}</span> |
138 | <div class="d1">{{$t('genRich.guarantee1.v51')}}</div> | 138 | <div class="d1">{{$t('genRich.guarantee1.v51')}}</div> |
139 | </div> | 139 | </div> |
140 | <div class="fl"> | 140 | <div class="fl"> |
141 | <span class="mark num">{{$t('genRich.guarantee1.num2')}}</span> | 141 | <span class="mark num">{{$t('genRich.guarantee1.num2')}}</span> |
142 | <div class="d1">{{$t('genRich.guarantee1.v52')}}</div> | 142 | <div class="d1">{{$t('genRich.guarantee1.v52')}}</div> |
143 | </div> | 143 | </div> |
144 | </div> | 144 | </div> |
145 | </div> | 145 | </div> |
146 | <div class="table-item"> | 146 | <div class="table-item"> |
147 | <div class="tt label">{{$t('genRich.guarantee1.k6')}}</div> | 147 | <div class="tt label">{{$t('genRich.guarantee1.k6')}}</div> |
148 | <div class="tt val"> | 148 | <div class="tt val"> |
149 | {{$t('genRich.guarantee1.v6')}} | 149 | {{$t('genRich.guarantee1.v6')}} |
150 | <div class="fl"> | 150 | <div class="fl"> |
151 | <span class="mark star">*</span> | 151 | <span class="mark star">*</span> |
152 | <div class="d1">{{$t('genRich.guarantee1.v61')}}</div> | 152 | <div class="d1">{{$t('genRich.guarantee1.v61')}}</div> |
153 | </div> | 153 | </div> |
154 | </div> | 154 | </div> |
155 | </div> | 155 | </div> |
156 | <div class="table-item"> | 156 | <div class="table-item"> |
157 | <div class="tt label">{{$t('genRich.guarantee1.k7')}}</div> | 157 | <div class="tt label">{{$t('genRich.guarantee1.k7')}}</div> |
158 | <div class="tt val"> | 158 | <div class="tt val"> |
159 | {{$t('genRich.guarantee1.v7')}} | 159 | {{$t('genRich.guarantee1.v7')}} |
160 | <div class="fl"> | 160 | <div class="fl"> |
161 | <span class="mark star">*</span> | 161 | <span class="mark star">*</span> |
162 | <div class="d1">{{$t('genRich.guarantee1.v71')}}</div> | 162 | <div class="d1">{{$t('genRich.guarantee1.v71')}}</div> |
163 | </div> | 163 | </div> |
164 | <div class="fl"> | 164 | <div class="fl"> |
165 | <span class="mark star">*</span> | 165 | <span class="mark star">*</span> |
166 | <div class="d1">{{$t('genRich.guarantee1.v72')}}</div> | 166 | <div class="d1">{{$t('genRich.guarantee1.v72')}}</div> |
167 | </div> | 167 | </div> |
168 | <div class="fl" v-if="$t('genRich.guarantee1.v73')"> | 168 | <div class="fl" v-if="$t('genRich.guarantee1.v73')"> |
169 | <span class="mark star">*</span> | 169 | <span class="mark star">*</span> |
170 | <div class="d1">{{$t('genRich.guarantee1.v73')}}</div> | 170 | <div class="d1">{{$t('genRich.guarantee1.v73')}}</div> |
171 | </div> | 171 | </div> |
172 | </div> | 172 | </div> |
173 | </div> | 173 | </div> |
174 | <div class="table-item"> | 174 | <div class="table-item"> |
175 | <div class="tt label">{{$t('genRich.guarantee1.k8')}}</div> | 175 | <div class="tt label">{{$t('genRich.guarantee1.k8')}}</div> |
176 | <div class="tt val">{{$t('genRich.guarantee1.v8')}}</div> | 176 | <div class="tt val">{{$t('genRich.guarantee1.v8')}}</div> |
177 | </div> | 177 | </div> |
178 | <div class="table-item"> | 178 | <div class="table-item"> |
179 | <div class="tt label">{{$t('genRich.guarantee1.k9')}}</div> | 179 | <div class="tt label">{{$t('genRich.guarantee1.k9')}}</div> |
180 | <div class="tt val">{{$t('genRich.guarantee1.v9')}}</div> | 180 | <div class="tt val">{{$t('genRich.guarantee1.v9')}}</div> |
181 | </div> | 181 | </div> |
182 | <div class="table-item"> | 182 | <div class="table-item"> |
183 | <div class="tt label">{{$t('genRich.guarantee1.k10')}}</div> | 183 | <div class="tt label">{{$t('genRich.guarantee1.k10')}}</div> |
184 | <div class="tt val">{{$t('genRich.guarantee1.v10')}}</div> | 184 | <div class="tt val">{{$t('genRich.guarantee1.v10')}}</div> |
185 | </div> | 185 | </div> |
186 | </div> | 186 | </div> |
187 | </div> | 187 | </div> |
188 | </div> | 188 | </div> |
189 | 189 | ||
190 | <!-- 下载 --> | 190 | <!-- 下载 --> |
191 | <div class="download"> | 191 | <div class="download"> |
192 | <div class="border2 download-item"> | 192 | <div class="border2 download-item"> |
193 | <div class="cont" @click="downloadFile('file1')"> | 193 | <div class="cont" @click="downloadFile('file1')"> |
194 | <div class="icon-wrap"> | 194 | <div class="icon-wrap"> |
195 | <img class="icon" src="@/assets/images/vhis/vhis-download.png" /> | 195 | <img class="icon" src="@/assets/images/vhis/vhis-download.png" /> |
196 | </div> | 196 | </div> |
197 | {{$t('genRich.download.t1')}} | 197 | <div class="desc">{{$t('genRich.download.t1')}}</div> |
198 | </div> | ||
199 | </div> | ||
200 | <div class="border2 download-item"> | ||
201 | <div class="cont" @click="downloadFile('file1')"> | ||
202 | <div class="icon-wrap"> | ||
203 | <img class="icon" src="@/assets/images/vhis/vhis-download.png" /> | ||
204 | </div> | ||
205 | {{$t('genRich.download.t2')}} | ||
206 | </div> | ||
207 | </div> | ||
208 | </div> | ||
209 | 198 | ||
210 | <!-- 立即投保 --> | 199 | </div> |
211 | <div class="submit-btn" @click="bottomBtnHandle()">{{$t('genRich.submitBtn')}}</div> | 200 | </div> |
212 | </div> | 201 | <div class="border2 download-item"> |
213 | </div> | 202 | <div class="cont" @click="downloadFile('file1')"> |
203 | <div class="icon-wrap"> | ||
204 | <img class="icon" src="@/assets/images/vhis/vhis-download.png" /> | ||
205 | </div> | ||
206 | <div class="desc">{{$t('genRich.download.t2')}}</div> | ||
207 | |||
208 | </div> | ||
209 | </div> | ||
210 | </div> | ||
211 | |||
212 | <!-- 立即投保 --> | ||
213 | <div class="btn-wrap"> | ||
214 | <div class="submit-btn" @click="bottomBtnHandle()">{{$t('genRich.submitBtn')}}</div> | ||
215 | </div> | ||
216 | </div> | ||
217 | </div> | ||
214 | </template> | 218 | </template> |
215 | 219 | ||
216 | <script src="./gen-rich.js"></script> | 220 | <script src="./gen-rich.js"></script> | ... | ... |
... | @@ -26,7 +26,7 @@ export default { | ... | @@ -26,7 +26,7 @@ export default { |
26 | data() { | 26 | data() { |
27 | return { | 27 | return { |
28 | key: "value", | 28 | key: "value", |
29 | 29 | img:require("@/assets/images/index/index-tab-2.png"), | |
30 | PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时 | 30 | PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时 |
31 | PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福 | 31 | PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福 |
32 | // swiper | 32 | // swiper |
... | @@ -558,6 +558,7 @@ export default { | ... | @@ -558,6 +558,7 @@ export default { |
558 | element.btns = element.btnDescribe; | 558 | element.btns = element.btnDescribe; |
559 | }); | 559 | }); |
560 | 560 | ||
561 | |||
561 | // 设置缓存 | 562 | // 设置缓存 |
562 | sessionStorage.setItem("_pingan_index_datalist", JSON.stringify(this.dataList)); | 563 | sessionStorage.setItem("_pingan_index_datalist", JSON.stringify(this.dataList)); |
563 | sessionStorage.setItem("_pingan_index_bannerlist", JSON.stringify(this.bannerList)); | 564 | sessionStorage.setItem("_pingan_index_bannerlist", JSON.stringify(this.bannerList)); | ... | ... |
... | @@ -289,11 +289,11 @@ | ... | @@ -289,11 +289,11 @@ |
289 | display: flex; | 289 | display: flex; |
290 | justify-content: space-between; | 290 | justify-content: space-between; |
291 | &-item { | 291 | &-item { |
292 | background-image: url("~@/assets/images/index/index-tab.png"); | 292 | // background-image: url("~@/assets/images/index/index-tab-2.png"); |
293 | 293 | @extend .bb; | |
294 | @extend .bis; | 294 | @extend .bis; |
295 | @extend .fcc; | 295 | @extend .fcc; |
296 | height: 73px; | 296 | min-height: 73px; |
297 | font-size: $fontSize-M2; | 297 | font-size: $fontSize-M2; |
298 | color: $cOrange2; | 298 | color: $cOrange2; |
299 | font-weight: bold; | 299 | font-weight: bold; |
... | @@ -302,6 +302,7 @@ | ... | @@ -302,6 +302,7 @@ |
302 | filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3)); | 302 | filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3)); |
303 | 303 | ||
304 | margin-left: -120px; | 304 | margin-left: -120px; |
305 | padding: 12px 40px; | ||
305 | 306 | ||
306 | &:first-child { | 307 | &:first-child { |
307 | margin-left: 0; | 308 | margin-left: 0; |
... | @@ -312,7 +313,7 @@ | ... | @@ -312,7 +313,7 @@ |
312 | } | 313 | } |
313 | 314 | ||
314 | &-act { | 315 | &-act { |
315 | background-image: url("~@/assets/images/index/index-tab-act.png"); | 316 | // background-image: url("~@/assets/images/index/index-tab-act-2.png"); |
316 | color: #ffffff; | 317 | color: #ffffff; |
317 | } | 318 | } |
318 | } | 319 | } | ... | ... |
... | @@ -95,12 +95,9 @@ | ... | @@ -95,12 +95,9 @@ |
95 | <div class="table" :class="{'table-1':dataList.length<=1}"> | 95 | <div class="table" :class="{'table-1':dataList.length<=1}"> |
96 | <div class="table-tab" ref="quote"> | 96 | <div class="table-tab" ref="quote"> |
97 | <!-- <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=" | 97 | <!-- <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=" |
98 | 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> | 98 | ';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> --> |
99 | </div> --> | ||
100 | <!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div> | ||
101 | <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> --> | ||
102 | <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=" | 99 | <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=" |
103 | ';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> | 100 | 'width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ';backgroundImage:url('+require('@/assets/images/index/index-tab'+(item.index == curTab.index?'-act':'')+'-'+dataList.length+'.png')+')'">{{ item.name }}</div> |
104 | </div> | 101 | </div> |
105 | <div class="linear"></div> | 102 | <div class="linear"></div> |
106 | <div class="table-wrap"> | 103 | <div class="table-wrap"> | ... | ... |
... | @@ -619,7 +619,7 @@ $borderSize: 6px; | ... | @@ -619,7 +619,7 @@ $borderSize: 6px; |
619 | margin: 0 auto 24px; | 619 | margin: 0 auto 24px; |
620 | max-width: 602px; | 620 | max-width: 602px; |
621 | height: 67px; | 621 | height: 67px; |
622 | line-height: 67px; | 622 | // line-height: 67px; |
623 | cursor: pointer; | 623 | cursor: pointer; |
624 | @include border-tans($borderSize); | 624 | @include border-tans($borderSize); |
625 | 625 | ||
... | @@ -645,16 +645,34 @@ $borderSize: 6px; | ... | @@ -645,16 +645,34 @@ $borderSize: 6px; |
645 | .enCont { | 645 | .enCont { |
646 | padding-left: 76px !important; | 646 | padding-left: 76px !important; |
647 | } | 647 | } |
648 | |||
649 | .desc{ | ||
650 | flex: 1; | ||
651 | text-align: left; | ||
652 | } | ||
648 | } | 653 | } |
649 | } | 654 | } |
650 | 655 | ||
651 | // 提交订单 | 656 | |
652 | .submit-btn { | 657 | // 立即投保 |
658 | .btn-wrap { | ||
653 | margin: 50px auto 100px; | 659 | margin: 50px auto 100px; |
654 | @extend .pointer; | 660 | display: flex; |
655 | @extend .bb; | 661 | justify-content: center; |
656 | @include btc4(300px, 50px, 22px); | 662 | |
657 | font-weight: bold; | 663 | .submit-btn { |
664 | @extend .fcc; | ||
665 | @extend .bb; | ||
666 | @include btc4(300px, 50px, 22px); | ||
667 | line-height: normal; | ||
668 | min-width: 300px; | ||
669 | min-height: 50px; | ||
670 | height: auto; | ||
671 | width: auto; | ||
672 | font-weight: bold; | ||
673 | // display: inline-block; | ||
674 | padding: 4px 20px; | ||
675 | } | ||
658 | } | 676 | } |
659 | 677 | ||
660 | 678 | ||
... | @@ -900,6 +918,7 @@ $borderSize: 6px; | ... | @@ -900,6 +918,7 @@ $borderSize: 6px; |
900 | } | 918 | } |
901 | 919 | ||
902 | .icon-wrap { | 920 | .icon-wrap { |
921 | // width: 34%; | ||
903 | width: 40%; | 922 | width: 40%; |
904 | display: flex; | 923 | display: flex; |
905 | justify-content: flex-end; | 924 | justify-content: flex-end; | ... | ... |
1 | 1 | ||
2 | <template> | 2 | <template> |
3 | <div class="page page-vhis"> | 3 | <div class="page page-vhis"> |
4 | <div class="banner-contaner"> | 4 | <div class="banner-contaner"> |
5 | <!-- banner 轮播 --> | 5 | <!-- banner 轮播 --> |
6 | 6 | ||
7 | <div class="banner banner-pc"> | 7 | <div class="banner banner-pc"> |
8 | <swiper :options="swiperOption"> | 8 | <swiper :options="swiperOption"> |
9 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> | 9 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> |
10 | <img class="banner-img" :src="item.pcBannerUrl"> | 10 | <img class="banner-img" :src="item.pcBannerUrl"> |
11 | <div class="btn-wrap"> | 11 | <div class="btn-wrap"> |
12 | <div v-for="(btnItem, btnIndex) in item.btns" :key="btnIndex"> | 12 | <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> | 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> |
14 | </div> | 14 | </div> |
15 | </div> | 15 | </div> |
16 | </swiper-slide> | 16 | </swiper-slide> |
17 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> | 17 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> |
18 | <div class="swiper-button-next" slot="button-next"></div> --> | 18 | <div class="swiper-button-next" slot="button-next"></div> --> |
19 | <!-- <div class="swiper-pagination" slot="pagination"></div> --> | 19 | <!-- <div class="swiper-pagination" slot="pagination"></div> --> |
20 | </swiper> | 20 | </swiper> |
21 | </div> | 21 | </div> |
22 | 22 | ||
23 | <div class="banner banner-mobile"> | 23 | <div class="banner banner-mobile"> |
24 | <swiper class="swiper" :options="swiperOption"> | 24 | <swiper class="swiper" :options="swiperOption"> |
25 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> | 25 | <swiper-slide v-for="(item,index) in bannerList" :key="index"> |
26 | <img class="banner-img" :src="item.mobileBannerUrl"> | 26 | <img class="banner-img" :src="item.mobileBannerUrl"> |
27 | <div class="btn-wrap"> | 27 | <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}} ></div> | 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}} ></div> |
29 | </div> | 29 | </div> |
30 | </swiper-slide> | 30 | </swiper-slide> |
31 | <div class="swiper-pagination" slot="pagination"></div> | 31 | <div class="swiper-pagination" slot="pagination"></div> |
32 | </swiper> | 32 | </swiper> |
33 | </div> | 33 | </div> |
34 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> | 34 | <!-- <div class="swiper-button-prev" slot="button-prev"></div> |
35 | <div class="swiper-button-next" slot="button-next"></div> --> | 35 | <div class="swiper-button-next" slot="button-next"></div> --> |
36 | 36 | ||
37 | <div v-if="bannerTipsVisible" class="banner-tips"> | 37 | <div v-if="bannerTipsVisible" class="banner-tips"> |
38 | <div class="cont"> | 38 | <div class="cont"> |
39 | <div class="tit"> | 39 | <div class="tit"> |
40 | <img class="icon" src="@/assets/images/vhis/hot-deal-icon.png"> {{$t('vhisDetail.bannerTips.t1')}} | 40 | <img class="icon" src="@/assets/images/vhis/hot-deal-icon.png"> {{$t('vhisDetail.bannerTips.t1')}} |
41 | </div> | 41 | </div> |
42 | <div class="desc"> | 42 | <div class="desc"> |
43 | <div class="t1"> {{$t('vhisDetail.bannerTips.t2')}}</div> | 43 | <div class="t1"> {{$t('vhisDetail.bannerTips.t2')}}</div> |
44 | <div class="t2"> {{$t('vhisDetail.bannerTips.t3')}}</div> | 44 | <div class="t2"> {{$t('vhisDetail.bannerTips.t3')}}</div> |
45 | </div> | 45 | </div> |
46 | </div> | 46 | </div> |
47 | <img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png"> | 47 | <img @click="onHideBannerTipsHandler" class="close" src="@/assets/images/vhis/close2.png"> |
48 | </div> | 48 | </div> |
49 | </div> | 49 | </div> |
50 | <!-- 标题 --> | 50 | <!-- 标题 --> |
51 | <div class="title"> | 51 | <div class="title"> |
52 | <div class="title-wrap"> | 52 | <div class="title-wrap"> |
53 | <div class="tt t1">{{$t('vhisDetail.title.t1')}}</div> | 53 | <div class="tt t1">{{$t('vhisDetail.title.t1')}}</div> |
54 | <div class="tt t2"> | 54 | <div class="tt t2"> |
55 | {{$t('vhisDetail.title.t2')}}{{$t('vhisDetail.title.t3')}} | 55 | {{$t('vhisDetail.title.t2')}}{{$t('vhisDetail.title.t3')}} |
56 | </div> | 56 | </div> |
57 | </div> | 57 | </div> |
58 | 58 | ||
59 | </div> | 59 | </div> |
60 | 60 | ||
61 | <div class="content"> | 61 | <div class="content"> |
62 | 62 | ||
63 | <!-- 产品特点 --> | 63 | <!-- 产品特点 --> |
64 | <div class="box product"> | 64 | <div class="box product"> |
65 | <div class="tit">{{$t('vhisDetail.main.t1')}}</div> | 65 | <div class="tit">{{$t('vhisDetail.main.t1')}}</div> |
66 | <div class="prod"> | 66 | <div class="prod"> |
67 | <div v-for="(item,index) in productList" :key="item.id" class=" prod-item"> | 67 | <div v-for="(item,index) in productList" :key="item.id" class=" prod-item"> |
68 | <div class="cont"> | 68 | <div class="cont"> |
69 | <div class="icon-wrap"> | 69 | <div class="icon-wrap"> |
70 | <img :src="require('@/assets/images/vhis/vhis-icon'+(index+1)+'.png')"> | 70 | <img :src="require('@/assets/images/vhis/vhis-icon'+(index+1)+'.png')"> |
71 | </div> | 71 | </div> |
72 | <div class="detail"> | 72 | <div class="detail"> |
73 | <div class="t1" v-html="item.title">{{item.title}}</div> | 73 | <div class="t1" v-html="item.title">{{item.title}}</div> |
74 | <div class="more pointer" @click="onShowMoreHandler(index)"> | 74 | <div class="more pointer" @click="onShowMoreHandler(index)"> |
75 | <div class="more-icon-wrap"> | 75 | <div class="more-icon-wrap"> |
76 | <img v-if="item.showMore" src="@/assets/images/vhis/vhis-mine.png"> | 76 | <img v-if="item.showMore" src="@/assets/images/vhis/vhis-mine.png"> |
77 | <img v-else src="@/assets/images/vhis/vhis-plus.png"> | 77 | <img v-else src="@/assets/images/vhis/vhis-plus.png"> |
78 | </div> | 78 | </div> |
79 | <div class="c1">{{item.showMore ? $t('vhisDetail.close') : $t('vhisDetail.expand')}}</div> | 79 | <div class="c1">{{item.showMore ? $t('vhisDetail.close') : $t('vhisDetail.expand')}}</div> |
80 | </div> | 80 | </div> |
81 | <div v-if="item.showMore" class="desc"> | 81 | <div v-if="item.showMore" class="desc"> |
82 | {{item.desc}} | 82 | {{item.desc}} |
83 | <div class="tips">{{item.tips}}</div> | 83 | <div class="tips">{{item.tips}}</div> |
84 | </div> | 84 | </div> |
85 | </div> | 85 | </div> |
86 | </div> | 86 | </div> |
87 | </div> | 87 | </div> |
88 | </div> | 88 | </div> |
89 | </div> | 89 | </div> |
90 | 90 | ||
91 | <!-- 视频 --> | 91 | <!-- 视频 --> |
92 | <div class="box video"> | 92 | <div class="box video"> |
93 | <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"> | 93 | <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"> |
94 | </video-player> | 94 | </video-player> |
95 | </div> | 95 | </div> |
96 | 96 | ||
97 | <!-- 计划概览 --> | 97 | <!-- 计划概览 --> |
98 | <div class="guarantee"> | 98 | <div class="guarantee"> |
99 | <div class="tit-wrap"> | 99 | <div class="tit-wrap"> |
100 | <div class="tit">{{$t('vhisDetail.guarantee1.title')}}</div> | 100 | <div class="tit">{{$t('vhisDetail.guarantee1.title')}}</div> |
101 | <div class="tit-s"> | 101 | <div class="tit-s"> |
102 | {{$t('vhisDetail.guarantee1.titleT1')}} | 102 | {{$t('vhisDetail.guarantee1.titleT1')}} |
103 | <span>{{$t('vhisDetail.guarantee1.titleNum')}}</span> | 103 | <span>{{$t('vhisDetail.guarantee1.titleNum')}}</span> |
104 | {{$t('vhisDetail.guarantee1.titleT2')}} | 104 | {{$t('vhisDetail.guarantee1.titleT2')}} |
105 | </div> | 105 | </div> |
106 | </div> | 106 | </div> |
107 | 107 | ||
108 | <div class="container"> | 108 | <div class="container"> |
109 | <div class="table"> | 109 | <div class="table"> |
110 | <div class="border2 table-border"></div> | 110 | <div class="border2 table-border"></div> |
111 | <div class="table-item"> | 111 | <div class="table-item"> |
112 | <div class="tt label">{{$t('vhisDetail.guarantee1.k1')}}</div> | 112 | <div class="tt label">{{$t('vhisDetail.guarantee1.k1')}}</div> |
113 | <div class="tt val">{{$t('vhisDetail.guarantee1.v1')}}</div> | 113 | <div class="tt val">{{$t('vhisDetail.guarantee1.v1')}}</div> |
114 | </div> | 114 | </div> |
115 | <div class="table-item"> | 115 | <div class="table-item"> |
116 | <div class="tt label">{{$t('vhisDetail.guarantee1.k2')}}</div> | 116 | <div class="tt label">{{$t('vhisDetail.guarantee1.k2')}}</div> |
117 | <div class="tt val">{{$t('vhisDetail.guarantee1.v2')}}</div> | 117 | <div class="tt val">{{$t('vhisDetail.guarantee1.v2')}}</div> |
118 | </div> | 118 | </div> |
119 | <div class="table-item"> | 119 | <div class="table-item"> |
120 | <div class="tt label">{{$t('vhisDetail.guarantee1.k3')}}</div> | 120 | <div class="tt label">{{$t('vhisDetail.guarantee1.k3')}}</div> |
121 | <div class="tt val">{{$t('vhisDetail.guarantee1.v3')}}</div> | 121 | <div class="tt val">{{$t('vhisDetail.guarantee1.v3')}}</div> |
122 | </div> | 122 | </div> |
123 | <div class="table-item"> | 123 | <div class="table-item"> |
124 | <div class="tt label">{{$t('vhisDetail.guarantee1.k4')}}</div> | 124 | <div class="tt label">{{$t('vhisDetail.guarantee1.k4')}}</div> |
125 | <div class="tt val">{{$t('vhisDetail.guarantee1.v4')}}</div> | 125 | <div class="tt val">{{$t('vhisDetail.guarantee1.v4')}}</div> |
126 | </div> | 126 | </div> |
127 | <div class="table-item"> | 127 | <div class="table-item"> |
128 | <div class="tt label">{{$t('vhisDetail.guarantee1.k5')}}</div> | 128 | <div class="tt label">{{$t('vhisDetail.guarantee1.k5')}}</div> |
129 | <div class="tt val">{{$t('vhisDetail.guarantee1.v5')}}</div> | 129 | <div class="tt val">{{$t('vhisDetail.guarantee1.v5')}}</div> |
130 | </div> | 130 | </div> |
131 | </div> | 131 | </div> |
132 | </div> | 132 | </div> |
133 | 133 | ||
134 | </div> | 134 | </div> |
135 | 135 | ||
136 | <!-- 保障内容 --> | 136 | <!-- 保障内容 --> |
137 | <div class="guarantee guarantee2"> | 137 | <div class="guarantee guarantee2"> |
138 | <div class="tit">{{$t('vhisDetail.guarantee2.title')}}</div> | 138 | <div class="tit">{{$t('vhisDetail.guarantee2.title')}}</div> |
139 | 139 | ||
140 | <div class="container"> | 140 | <div class="container"> |
141 | <!-- 左表 --> | 141 | <!-- 左表 --> |
142 | <div class="table"> | 142 | <div class="table"> |
143 | <div class="titl"> | 143 | <div class="titl"> |
144 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titK')}} | 144 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titK')}} |
145 | <!-- <span class="small">(1)</span> --> | 145 | </div> |
146 | </div> | 146 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titV')}}</div> |
147 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titV')}}</div> | 147 | </div> |
148 | </div> | 148 | <div class="border2 table-border"></div> |
149 | <div class="border2 table-border"></div> | 149 | <div class="table-item"> |
150 | <div class="table-item"> | 150 | <div class="tt label"> |
151 | <div class="tt label"> | 151 | <div class="fl"> |
152 | <div class="fl"> | 152 | <div class="nn n1">(a)</div> |
153 | <div class="nn n1">(a)</div> | 153 | <div v-html="$t('vhisDetail.guarantee2.ak')" class="nn n2">{{$t('vhisDetail.guarantee2.ak')}}</div> |
154 | <div v-html="$t('vhisDetail.guarantee2.ak')" class="nn n2">{{$t('vhisDetail.guarantee2.ak')}}</div> | 154 | </div> |
155 | </div> | 155 | </div> |
156 | </div> | 156 | <div v-html="$t('vhisDetail.guarantee2.av')" class="tt val">{{$t('vhisDetail.guarantee2.av')}}</div> |
157 | <div v-html="$t('vhisDetail.guarantee2.av')" class="tt val">{{$t('vhisDetail.guarantee2.av')}}</div> | 157 | </div> |
158 | </div> | 158 | <div class="table-item"> |
159 | <div class="table-item"> | 159 | <div class="tt label"> |
160 | <div class="tt label"> | 160 | <div class="fl"> |
161 | <div class="fl"> | 161 | <div class="nn n1">(b)</div> |
162 | <div class="nn n1">(b)</div> | 162 | <div v-html="$t('vhisDetail.guarantee2.bk')" class="nn n2">{{$t('vhisDetail.guarantee2.bk')}}</div> |
163 | <div v-html="$t('vhisDetail.guarantee2.bk')" class="nn n2">{{$t('vhisDetail.guarantee2.bk')}}</div> | 163 | </div> |
164 | </div> | 164 | </div> |
165 | </div> | 165 | <div v-html="$t('vhisDetail.guarantee2.bv')" class="tt val">{{$t('vhisDetail.guarantee2.bv')}}</div> |
166 | <div v-html="$t('vhisDetail.guarantee2.bv')" class="tt val">{{$t('vhisDetail.guarantee2.bv')}}</div> | 166 | </div> |
167 | </div> | 167 | <div class="table-item"> |
168 | <div class="table-item"> | 168 | <div class="tt label"> |
169 | <div class="tt label"> | 169 | <div class="fl"> |
170 | <div class="fl"> | 170 | <div class="nn n1">(c)</div> |
171 | <div class="nn n1">(c)</div> | 171 | <div v-html="$t('vhisDetail.guarantee2.ck')" class="nn n2">{{$t('vhisDetail.guarantee2.ck')}}</div> |
172 | <div v-html="$t('vhisDetail.guarantee2.ck')" class="nn n2">{{$t('vhisDetail.guarantee2.ck')}}</div> | 172 | </div> |
173 | </div> | 173 | </div> |
174 | </div> | 174 | <div v-html="$t('vhisDetail.guarantee2.cv')" class="tt val">{{$t('vhisDetail.guarantee2.cv')}}</div> |
175 | <div v-html="$t('vhisDetail.guarantee2.cv')" class="tt val">{{$t('vhisDetail.guarantee2.cv')}}</div> | 175 | </div> |
176 | </div> | 176 | <div class="table-item"> |
177 | <div class="table-item"> | 177 | <div class="tt label"> |
178 | <div class="tt label"> | 178 | <div class="fl"> |
179 | <div class="fl"> | 179 | <div class="nn n1">(d)</div> |
180 | <div class="nn n1">(d)</div> | 180 | <div class="nn n2"> |
181 | <div class="nn n2"> | 181 | <span v-html="$t('vhisDetail.guarantee2.dk')">{{$t('vhisDetail.guarantee2.dk')}}</span> |
182 | <span v-html="$t('vhisDetail.guarantee2.dk')">{{$t('vhisDetail.guarantee2.dk')}}</span> | 182 | </div> |
183 | <!-- <span class="small">(2)</span> --> | 183 | </div> |
184 | </div> | 184 | </div> |
185 | </div> | 185 | <div v-html="$t('vhisDetail.guarantee2.dv')" class="tt val">{{$t('vhisDetail.guarantee2.dv')}}</div> |
186 | </div> | 186 | </div> |
187 | <div v-html="$t('vhisDetail.guarantee2.dv')" class="tt val">{{$t('vhisDetail.guarantee2.dv')}}</div> | 187 | <div class="table-item"> |
188 | </div> | 188 | <div class="tt label"> |
189 | <div class="table-item"> | 189 | <div class="fl"> |
190 | <div class="tt label"> | 190 | <div class="nn n1">(e)</div> |
191 | <div class="fl"> | 191 | <div v-html="$t('vhisDetail.guarantee2.ek')" class="nn n2">{{$t('vhisDetail.guarantee2.ek')}}</div> |
192 | <div class="nn n1">(e)</div> | 192 | </div> |
193 | <div v-html="$t('vhisDetail.guarantee2.ek')" class="nn n2">{{$t('vhisDetail.guarantee2.ek')}}</div> | 193 | </div> |
194 | </div> | 194 | <div v-html="$t('vhisDetail.guarantee2.ev')" class="tt val">{{$t('vhisDetail.guarantee2.ev')}}</div> |
195 | </div> | 195 | </div> |
196 | <div v-html="$t('vhisDetail.guarantee2.ev')" class="tt val">{{$t('vhisDetail.guarantee2.ev')}}</div> | 196 | <!-- 4分 --> |
197 | </div> | 197 | <div class="table-item table-item-4"> |
198 | <!-- 4分 --> | 198 | <div class="tt label label2"> |
199 | <div class="table-item table-item-4"> | 199 | <div class="fl"> |
200 | <div class="tt label label2"> | 200 | <div class="nn n1">(f)</div> |
201 | <div class="fl"> | 201 | <div v-html="$t('vhisDetail.guarantee2.fk')" class="nn n2">{{$t('vhisDetail.guarantee2.fk')}}</div> |
202 | <div class="nn n1">(f)</div> | 202 | </div> |
203 | <div v-html="$t('vhisDetail.guarantee2.fk')" class="nn n2">{{$t('vhisDetail.guarantee2.fk')}}</div> | 203 | </div> |
204 | </div> | 204 | <div class="tt val"> |
205 | </div> | 205 | <div class="val-item"> |
206 | <div class="tt val"> | 206 | {{$t('vhisDetail.guarantee2.fv0')}} |
207 | <div class="val-item"> | 207 | </div> |
208 | {{$t('vhisDetail.guarantee2.fv0')}} | 208 | <div class="val-item"> |
209 | </div> | 209 | {{$t('vhisDetail.guarantee2.fv1')}} |
210 | <div class="val-item"> | 210 | </div> |
211 | {{$t('vhisDetail.guarantee2.fv1')}} | 211 | <div class="val-item"> |
212 | </div> | 212 | {{$t('vhisDetail.guarantee2.fv2')}} |
213 | <div class="val-item"> | 213 | </div> |
214 | {{$t('vhisDetail.guarantee2.fv2')}} | 214 | <div class="val-item"> |
215 | </div> | 215 | {{$t('vhisDetail.guarantee2.fv3')}} |
216 | <div class="val-item"> | 216 | </div> |
217 | {{$t('vhisDetail.guarantee2.fv3')}} | 217 | <div class="val-item"> |
218 | </div> | 218 | {{$t('vhisDetail.guarantee2.fv4')}} |
219 | <div class="val-item"> | 219 | </div> |
220 | {{$t('vhisDetail.guarantee2.fv4')}} | 220 | </div> |
221 | </div> | 221 | </div> |
222 | </div> | 222 | </div> |
223 | </div> | ||
224 | </div> | ||
225 | 223 | ||
226 | <!-- 右表 --> | 224 | <!-- 右表 --> |
227 | <div class="table"> | 225 | <div class="table"> |
228 | <div class="titl"> | 226 | <div class="titl"> |
229 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titK')}} | 227 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titK')}} |
230 | <!-- <span class="small">(1)</span> --> | 228 | </div> |
231 | </div> | 229 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titV')}}</div> |
232 | <div class="titl-item">{{$t('vhisDetail.guarantee2.titV')}}</div> | 230 | </div> |
233 | </div> | 231 | <div class="border2 table-border"></div> |
234 | <div class="border2 table-border"></div> | 232 | <div class="table-item"> |
235 | <div class="table-item"> | 233 | <div class="tt label"> |
236 | <div class="tt label"> | 234 | <div class="fl"> |
237 | <div class="fl"> | 235 | <div class="nn n1">(g)</div> |
238 | <div class="nn n1">(g)</div> | 236 | <div v-html="$t('vhisDetail.guarantee2.gk')" class="nn n2">{{$t('vhisDetail.guarantee2.gk')}}</div> |
239 | <div v-html="$t('vhisDetail.guarantee2.gk')" class="nn n2">{{$t('vhisDetail.guarantee2.gk')}}</div> | 237 | </div> |
240 | </div> | 238 | </div> |
241 | </div> | 239 | <div class="tt val"> |
242 | <div class="tt val"> | 240 | <div> |
243 | <div> | 241 | <span v-html="$t('vhisDetail.guarantee2.gv')">{{$t('vhisDetail.guarantee2.gv')}}</span> |
244 | <span v-html="$t('vhisDetail.guarantee2.gv')">{{$t('vhisDetail.guarantee2.gv')}}</span> | 242 | </div> |
245 | <!-- <span class="small">(5)</span> --> | 243 | </div> |
246 | </div> | 244 | </div> |
247 | </div> | 245 | <div class="table-item"> |
248 | </div> | 246 | <div class="tt label"> |
249 | <div class="table-item"> | 247 | <div class="fl"> |
250 | <div class="tt label"> | 248 | <div class="nn n1">(h)</div> |
251 | <div class="fl"> | 249 | <div v-html="$t('vhisDetail.guarantee2.hk')" class="nn n2">{{$t('vhisDetail.guarantee2.hk')}}</div> |
252 | <div class="nn n1">(h)</div> | 250 | </div> |
253 | <div v-html="$t('vhisDetail.guarantee2.hk')" class="nn n2">{{$t('vhisDetail.guarantee2.hk')}}</div> | 251 | </div> |
254 | </div> | 252 | <div class="tt val"> |
255 | </div> | 253 | <div> |
256 | <div class="tt val"> | 254 | <span v-html="$t('vhisDetail.guarantee2.hv')">{{$t('vhisDetail.guarantee2.hv')}}</span> |
257 | <div> | 255 | </div> |
258 | <span v-html="$t('vhisDetail.guarantee2.hv')">{{$t('vhisDetail.guarantee2.hv')}}</span> | 256 | </div> |
259 | <!-- <span class="small">(5)</span> --> | 257 | </div> |
260 | </div> | 258 | <div class="table-item"> |
261 | </div> | 259 | <div class="tt label "> |
262 | </div> | 260 | <div class="fl"> |
263 | <div class="table-item"> | 261 | <div class="nn n1">(i)</div> |
264 | <div class="tt label "> | 262 | <div class="nn n2"> |
265 | <div class="fl"> | 263 | <span v-html="$t('vhisDetail.guarantee2.ik')">{{$t('vhisDetail.guarantee2.ik')}}</span> |
266 | <div class="nn n1">(i)</div> | 264 | </div> |
267 | <div class="nn n2"> | 265 | </div> |
268 | <span v-html="$t('vhisDetail.guarantee2.ik')">{{$t('vhisDetail.guarantee2.ik')}}</span> | 266 | </div> |
269 | <!-- <span class="small">(2)(3)</span> --> | 267 | <div v-html="$t('vhisDetail.guarantee2.iv')" class="tt val">{{$t('vhisDetail.guarantee2.iv')}}</div> |
270 | </div> | 268 | </div> |
271 | </div> | 269 | <div class="table-item"> |
272 | </div> | 270 | <div class="tt label "> |
273 | <div v-html="$t('vhisDetail.guarantee2.iv')" class="tt val">{{$t('vhisDetail.guarantee2.iv')}}</div> | 271 | <div class="fl"> |
274 | </div> | 272 | <div class="nn n1">(j)</div> |
275 | <div class="table-item"> | 273 | <div class="nn n2"> |
276 | <div class="tt label "> | 274 | <span v-html="$t('vhisDetail.guarantee2.jk')">{{$t('vhisDetail.guarantee2.jk')}}</span> |
277 | <div class="fl"> | 275 | </div> |
278 | <div class="nn n1">(j)</div> | 276 | </div> |
279 | <div class="nn n2"> | 277 | </div> |
280 | <span v-html="$t('vhisDetail.guarantee2.jk')">{{$t('vhisDetail.guarantee2.jk')}}</span> | 278 | <div v-html="$t('vhisDetail.guarantee2.jv')" class="tt val">{{$t('vhisDetail.guarantee2.jv')}}</div> |
281 | <!-- <span class="small">(4)</span> --> | 279 | </div> |
282 | </div> | 280 | <div class="table-item table-item-3"> |
283 | </div> | 281 | <div class="tt label label2"> |
284 | </div> | 282 | <div class="fl"> |
285 | <div v-html="$t('vhisDetail.guarantee2.jv')" class="tt val">{{$t('vhisDetail.guarantee2.jv')}}</div> | 283 | <div class="nn n1">(k)</div> |
286 | </div> | 284 | <div class="nn n2"> |
287 | <div class="table-item table-item-3"> | 285 | <span v-html="$t('vhisDetail.guarantee2.kk')">{{$t('vhisDetail.guarantee2.kk')}}</span> |
288 | <div class="tt label label2"> | 286 | |
289 | <div class="fl"> | 287 | </div> |
290 | <div class="nn n1">(k)</div> | 288 | </div> |
291 | <div class="nn n2"> | 289 | </div> |
292 | <span v-html="$t('vhisDetail.guarantee2.kk')">{{$t('vhisDetail.guarantee2.kk')}}</span> | 290 | <div class="tt val"> |
293 | <!-- <span class="small">(2)</span> --> | 291 | <div class="val-item val-item-thr"> |
294 | </div> | 292 | <div v-html="$t('vhisDetail.guarantee2.kv11')" class="thr">{{$t('vhisDetail.guarantee2.kv11')}}</div> |
295 | </div> | 293 | <div v-html="$t('vhisDetail.guarantee2.kv12')" class="thr">{{$t('vhisDetail.guarantee2.kv12')}}</div> |
296 | </div> | 294 | </div> |
297 | <div class="tt val"> | 295 | <div v-html="$t('vhisDetail.guarantee2.kv2')" class="val-item"> |
298 | <div class="val-item val-item-thr"> | 296 | {{$t('vhisDetail.guarantee2.kv2')}} |
299 | <div v-html="$t('vhisDetail.guarantee2.kv11')" class="thr">{{$t('vhisDetail.guarantee2.kv11')}}</div> | 297 | </div> |
300 | <div v-html="$t('vhisDetail.guarantee2.kv12')" class="thr">{{$t('vhisDetail.guarantee2.kv12')}}</div> | 298 | <div v-html="$t('vhisDetail.guarantee2.kv3')" class="val-item"> |
301 | </div> | 299 | {{$t('vhisDetail.guarantee2.kv3')}} |
302 | <div v-html="$t('vhisDetail.guarantee2.kv2')" class="val-item"> | 300 | </div> |
303 | {{$t('vhisDetail.guarantee2.kv2')}} | 301 | </div> |
304 | </div> | 302 | </div> |
305 | <div v-html="$t('vhisDetail.guarantee2.kv3')" class="val-item"> | 303 | <!-- 4分 --> |
306 | {{$t('vhisDetail.guarantee2.kv3')}} | 304 | <div class="table-item table-item"> |
307 | </div> | 305 | <div class="tt label"> |
308 | </div> | 306 | <div class="fl"> |
309 | </div> | 307 | <div class="nn n1">(l)</div> |
310 | <!-- 4分 --> | 308 | <div v-html="$t('vhisDetail.guarantee2.lk')" class="nn n2">{{$t('vhisDetail.guarantee2.lk')}}</div> |
311 | <div class="table-item table-item"> | 309 | </div> |
312 | <div class="tt label"> | 310 | </div> |
313 | <div class="fl"> | 311 | <div v-html="$t('vhisDetail.guarantee2.lv')" class="tt val">{{$t('vhisDetail.guarantee2.lv')}}</div> |
314 | <div class="nn n1">(l)</div> | 312 | </div> |
315 | <div v-html="$t('vhisDetail.guarantee2.lk')" class="nn n2">{{$t('vhisDetail.guarantee2.lk')}}</div> | 313 | </div> |
316 | </div> | 314 | </div> |
317 | </div> | ||
318 | <div v-html="$t('vhisDetail.guarantee2.lv')" class="tt val">{{$t('vhisDetail.guarantee2.lv')}}</div> | ||
319 | </div> | ||
320 | </div> | ||
321 | </div> | ||
322 | 315 | ||
323 | </div> | 316 | </div> |
324 | 317 | ||
325 | <!-- 其他限额 --> | 318 | <!-- 其他限额 --> |
326 | <div class="guarantee"> | 319 | <div class="guarantee"> |
327 | <div class="tit">{{$t('vhisDetail.guarantee3.title')}}</div> | 320 | <div class="tit">{{$t('vhisDetail.guarantee3.title')}}</div> |
328 | 321 | ||
329 | <div class="container"> | 322 | <div class="container"> |
330 | <div class="table"> | 323 | <div class="table"> |
331 | <div class="border2 table-border"></div> | 324 | <div class="border2 table-border"></div> |
332 | <div class="table-item"> | 325 | <div class="table-item"> |
333 | <div class="tt label">{{$t('vhisDetail.guarantee3.k1')}}</div> | 326 | <div class="tt label">{{$t('vhisDetail.guarantee3.k1')}}</div> |
334 | <div class="tt val">{{$t('vhisDetail.guarantee3.v1')}}</div> | 327 | <div class="tt val">{{$t('vhisDetail.guarantee3.v1')}}</div> |
335 | </div> | 328 | </div> |
336 | <div class="table-item"> | 329 | <div class="table-item"> |
337 | <div class="tt label">{{$t('vhisDetail.guarantee3.k2')}}</div> | 330 | <div class="tt label">{{$t('vhisDetail.guarantee3.k2')}}</div> |
338 | <div class="tt val">{{$t('vhisDetail.guarantee3.v2')}}</div> | 331 | <div class="tt val">{{$t('vhisDetail.guarantee3.v2')}}</div> |
339 | </div> | 332 | </div> |
340 | </div> | 333 | </div> |
341 | </div> | 334 | </div> |
342 | </div> | 335 | </div> |
343 | 336 | ||
344 | <!-- 其他保障 --> | 337 | <!-- 其他保障 --> |
345 | <div class="guarantee"> | 338 | <div class="guarantee"> |
346 | <div class="tit">{{$t('vhisDetail.guarantee4.title')}}</div> | 339 | <div class="tit">{{$t('vhisDetail.guarantee4.title')}}</div> |
347 | 340 | ||
348 | <div class="container"> | 341 | <div class="container"> |
349 | <div class="table"> | 342 | <div class="table"> |
350 | <div class="border2 table-border"></div> | 343 | <div class="border2 table-border"></div> |
351 | <div class="table-item"> | 344 | <div class="table-item"> |
352 | <div class="tt label">{{$t('vhisDetail.guarantee4.k1')}}</div> | 345 | <div class="tt label">{{$t('vhisDetail.guarantee4.k1')}}</div> |
353 | <div class="tt val">{{$t('vhisDetail.guarantee4.v1')}}</div> | 346 | <div class="tt val">{{$t('vhisDetail.guarantee4.v1')}}</div> |
354 | </div> | 347 | </div> |
355 | <div class="table-item"> | 348 | <div class="table-item"> |
356 | <div class="tt label">{{$t('vhisDetail.guarantee4.k2')}}</div> | 349 | <div class="tt label">{{$t('vhisDetail.guarantee4.k2')}}</div> |
357 | <div class="tt val">{{$t('vhisDetail.guarantee4.v2')}}</div> | 350 | <div class="tt val">{{$t('vhisDetail.guarantee4.v2')}}</div> |
358 | </div> | 351 | </div> |
359 | </div> | 352 | </div> |
360 | </div> | 353 | </div> |
361 | </div> | 354 | </div> |
362 | 355 | ||
363 | <!-- 下载 --> | 356 | <!-- 下载 --> |
364 | <div class="download"> | 357 | <div class="download"> |
365 | <div class="border2 download-item"> | 358 | <div class="border2 download-item"> |
366 | <div :class="{enCont : locale == 'en'}" class="cont" @click="downloadFile('file1')"> | 359 | <div :class="{enCont : locale == 'en'}" class="cont" @click="downloadFile('file1')"> |
367 | <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('vhisDetail.download.t1')}} | 360 | <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> |
368 | </div> | 361 | <div class="desc">{{$t('vhisDetail.download.t1')}}</div> |
369 | </div> | 362 | </div> |
370 | <div class="border2 download-item"> | 363 | </div> |
371 | <div :class="{enCont : locale == 'en'}" class="cont" @click="downloadFile('file2')"> | 364 | <div class="border2 download-item"> |
372 | <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('vhisDetail.download.t2')}} | 365 | <div :class="{enCont : locale == 'en'}" class="cont" @click="downloadFile('file2')"> |
373 | </div> | 366 | <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> |
374 | </div> | 367 | <div class="desc">{{$t('vhisDetail.download.t2')}}</div> |
375 | <div class="border2 download-item"> | 368 | </div> |
376 | <div :class="{enCont : locale == 'en'}" class="cont" @click="downloadFile('file3')"> | 369 | </div> |
377 | <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> {{$t('vhisDetail.download.t3')}} | 370 | <div class="border2 download-item"> |
378 | </div> | 371 | <div :class="{enCont : locale == 'en'}" class="cont" @click="downloadFile('file3')"> |
379 | </div> | 372 | <div class="icon-wrap"><img class="icon" src="@/assets/images/vhis/vhis-download.png"></div> |
380 | </div> | 373 | <div class="desc">{{$t('vhisDetail.download.t3')}}</div> |
374 | </div> | ||
375 | </div> | ||
376 | </div> | ||
381 | 377 | ||
382 | <!-- 立即投保 --> | 378 | <!-- 立即投保 --> |
383 | <div class="submit-btn" @click="bottomBtnHandle()"> | 379 | <div class="btn-wrap"> |
384 | {{$t('vhisDetail.submitBtn')}} | 380 | <div class="submit-btn" @click="bottomBtnHandle()"> |
385 | </div> | 381 | {{$t('vhisDetail.submitBtn')}} |
382 | </div> | ||
383 | </div> | ||
386 | 384 | ||
387 | </div> | 385 | </div> |
388 | </div> | 386 | </div> |
389 | 387 | ||
390 | </template> | 388 | </template> |
391 | 389 | ... | ... |
-
Please register or sign in to post a comment