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