Skip to content

dev / pingan-life-index-pro

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

#46 #23 修复

1 parent 5b9a2439
Expand all
Inline Side-by-side
Showing 21 changed files with 80 additions and 76 deletions
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 }
......
...@@ -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
...@@ -642,16 +642,34 @@ $borderSize: 6px; ...@@ -642,16 +642,34 @@ $borderSize: 6px;
642 } 642 }
643 643
644 } 644 }
645
646 .desc{
647 flex: 1;
648 text-align: left;
649 }
645 } 650 }
646 } 651 }
647 652
648 // 提交订单 653
649 .submit-btn { 654 // 立即投保
655 .btn-wrap {
650 margin: 50px auto 100px; 656 margin: 50px auto 100px;
651 @extend .pointer; 657 display: flex;
652 @extend .bb; 658 justify-content: center;
653 @include btc4(300px, 50px, 22px); 659
654 font-weight: bold; 660 .submit-btn {
661 @extend .fcc;
662 @extend .bb;
663 @include btc4(300px, 50px, 22px);
664 line-height: normal;
665 min-width: 300px;
666 min-height: 50px;
667 height: auto;
668 width: auto;
669 font-weight: bold;
670 // display: inline-block;
671 padding: 4px 20px;
672 }
655 } 673 }
656 674
657 675
...@@ -897,6 +915,7 @@ $borderSize: 6px; ...@@ -897,6 +915,7 @@ $borderSize: 6px;
897 } 915 }
898 916
899 .icon-wrap { 917 .icon-wrap {
918 // width: 34%;
900 width: 40%; 919 width: 40%;
901 display: flex; 920 display: flex;
902 justify-content: flex-end; 921 justify-content: flex-end;
......