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
@import '@/styles/_support.scss';
@import "@/styles/_support.scss";
$borderSize: 6px;
......@@ -69,8 +69,6 @@ $borderSize: 6px;
letter-spacing: 1.5px;
}
}
}
}
......@@ -101,7 +99,6 @@ $borderSize: 6px;
}
.banner-tips {
position: absolute;
z-index: 2;
width: 422px;
......@@ -110,7 +107,7 @@ $borderSize: 6px;
top: 50px;
padding: 2px;
// border-radius: $borderSize;
background-image: url('~@assets/images/vhis/vhis-tips-bg.png');
background-image: url("~@assets/images/vhis/vhis-tips-bg.png");
@extend .bis;
.close {
......@@ -151,7 +148,6 @@ $borderSize: 6px;
font-weight: bold;
color: $cOrange2;
}
}
}
}
......@@ -164,7 +160,8 @@ $borderSize: 6px;
text-align: center;
font-size: $fontSize;
.tt {}
.tt {
}
.t1 {
color: $cOrange2;
......@@ -176,8 +173,6 @@ $borderSize: 6px;
}
}
.t2 {
font-size: 24px;
line-height: 1.39;
......@@ -189,8 +184,6 @@ $borderSize: 6px;
letter-spacing: 2px;
}
}
}
// 产品
......@@ -208,8 +201,6 @@ $borderSize: 6px;
}
}
.prod {
margin: 24px auto 0;
color: $cOrange2;
......@@ -217,7 +208,6 @@ $borderSize: 6px;
justify-content: space-between;
flex-wrap: wrap;
&-item {
@extend .fcc;
width: 582px;
......@@ -260,8 +250,6 @@ $borderSize: 6px;
}
}
.more {
display: flex;
margin-top: 6px;
......@@ -280,8 +268,6 @@ $borderSize: 6px;
letter-spacing: 1.2px;
}
}
}
.desc {
......@@ -331,8 +317,6 @@ $borderSize: 6px;
}
}
.tit-s {
font-size: $fontSize-M2;
color: $cFontGray2;
......@@ -401,7 +385,6 @@ $borderSize: 6px;
}
}
.label {
padding-left: 28px;
border-right: solid 1px #e4e4e5;
......@@ -414,7 +397,7 @@ $borderSize: 6px;
.val {
flex: 1;
.mark{
.mark {
display: inline-block;
color: $cOrange2;
}
......@@ -423,7 +406,7 @@ $borderSize: 6px;
margin-left: -13px;
}
.star{
.star {
margin-right: 4px;
margin-top: 4px;
}
......@@ -491,7 +474,7 @@ $borderSize: 6px;
li {
@extend .bb;
position: relative;
background-image: url('~@assets/images/vhis/vhis-tick.png');
background-image: url("~@assets/images/vhis/vhis-tick.png");
background-repeat: no-repeat;
background-position: 0 5px;
padding-left: 40px;
......@@ -506,7 +489,7 @@ $borderSize: 6px;
.label2 {
li {
background-image: url('~@assets/images/vhis/vhis-cross.png');
background-image: url("~@assets/images/vhis/vhis-cross.png");
}
.t1 {
......@@ -519,7 +502,8 @@ $borderSize: 6px;
}
}
.val {}
.val {
}
}
}
}
......@@ -528,7 +512,8 @@ $borderSize: 6px;
.guarantee2 {
$cellPadding: 6px;
.tit {}
.tit {
}
.container {
display: flex;
......@@ -565,7 +550,8 @@ $borderSize: 6px;
padding-right: 2px;
justify-content: flex-start;
.nn {}
.nn {
}
.n1 {
text-align: left;
......@@ -602,11 +588,9 @@ $borderSize: 6px;
// padding: 0 4px;
}
}
}
&-item-4 {
.val {
align-items: flex-start;
text-align: center;
......@@ -627,7 +611,6 @@ $borderSize: 6px;
}
&-item-3 {
.val {
align-items: flex-start;
text-align: center;
......@@ -665,7 +648,6 @@ $borderSize: 6px;
}
}
}
}
}
}
......@@ -682,7 +664,7 @@ $borderSize: 6px;
margin: 0 auto 24px;
max-width: 602px;
height: 67px;
line-height: 67px;
// line-height: 67px;
cursor: pointer;
@include border-tans($borderSize);
......@@ -704,41 +686,53 @@ $borderSize: 6px;
margin-right: 48px;
}
&:lang(zh){
&:lang(zh) {
padding-left: 178px;
}
}
.desc{
flex: 1;
text-align: left;
}
}
}
}
// 提交订单
.submit-btn {
// 立即投保
.btn-wrap {
margin: 50px auto 100px;
@extend .pointer;
@extend .bb;
@include btc4(300px, 50px, 22px);
font-weight: bold;
display: flex;
justify-content: center;
.submit-btn {
@extend .fcc;
@extend .bb;
@include btc4(300px, 50px, 22px);
line-height: normal;
min-width: 300px;
min-height: 50px;
height: auto;
width: auto;
font-weight: bold;
// display: inline-block;
padding: 4px 20px;
}
}
.small {
font-size: 14px;
display: inline-block;
vertical-align: text-top;
}
// banner点点
.swiper-button-prev {
background-image: url('~@/assets/images/common/button-prev.png');
background-image: url("~@/assets/images/common/button-prev.png");
left: 360px;
}
.swiper-button-next {
background-image: url('~@/assets/images/common/button-next.png');
background-image: url("~@/assets/images/common/button-next.png");
right: 360px;
}
......@@ -748,7 +742,7 @@ $borderSize: 6px;
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 48px;
}
......@@ -768,7 +762,6 @@ $borderSize: 6px;
width: 100%;
}
@media (max-width: 1200px) {
.content {
@include content-percent();
......@@ -794,11 +787,9 @@ $borderSize: 6px;
}
}
}
}
@media (max-width: 768px) {
.banner-tips {
display: none;
}
......@@ -821,7 +812,6 @@ $borderSize: 6px;
}
.content {
// 产品
.product {
margin: 48px auto 0;
......@@ -873,7 +863,6 @@ $borderSize: 6px;
.guarantee {
margin: 32px auto 0;
.tit {
font-size: $fontSizeTitle-M2;
}
......@@ -885,15 +874,14 @@ $borderSize: 6px;
.table {
font-size: $fontSize-M2;
&-item {
display: flex;
flex-wrap: nowrap;
.tt {
// width: 100%;
.ff{
.nn{
.ff {
.nn {
padding: 24px 0;
}
}
......@@ -912,12 +900,11 @@ $borderSize: 6px;
}
}
&-item2{
&-item2 {
}
}
}
// 下载
.download {
margin: 48px auto 0;
......@@ -937,7 +924,6 @@ $borderSize: 6px;
.icon {
margin-right: 24px;
}
}
}
}
......
......@@ -26,7 +26,7 @@ export default {
data() {
return {
key: "value",
img:require("@/assets/images/index/index-tab-2.png"),
PRODUCT_PRO_EASY: "PRODUCT_PRO_EASY", // 好医时
PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
// swiper
......@@ -558,6 +558,7 @@ export default {
element.btns = element.btnDescribe;
});
// 设置缓存
sessionStorage.setItem("_pingan_index_datalist", JSON.stringify(this.dataList));
sessionStorage.setItem("_pingan_index_bannerlist", JSON.stringify(this.bannerList));
......
......@@ -289,11 +289,11 @@
display: flex;
justify-content: space-between;
&-item {
background-image: url("~@/assets/images/index/index-tab.png");
// background-image: url("~@/assets/images/index/index-tab-2.png");
@extend .bb;
@extend .bis;
@extend .fcc;
height: 73px;
min-height: 73px;
font-size: $fontSize-M2;
color: $cOrange2;
font-weight: bold;
......@@ -302,6 +302,7 @@
filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
margin-left: -120px;
padding: 12px 40px;
&:first-child {
margin-left: 0;
......@@ -312,7 +313,7 @@
}
&-act {
background-image: url("~@/assets/images/index/index-tab-act.png");
// background-image: url("~@/assets/images/index/index-tab-act-2.png");
color: #ffffff;
}
}
......
......@@ -95,12 +95,9 @@
<div class="table" :class="{'table-1':dataList.length<=1}">
<div class="table-tab" ref="quote">
<!-- <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="
'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
</div> -->
<!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
<div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> -->
';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> -->
<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="
';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
'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>
</div>
<div class="linear"></div>
<div class="table-wrap">
......
......@@ -619,7 +619,7 @@ $borderSize: 6px;
margin: 0 auto 24px;
max-width: 602px;
height: 67px;
line-height: 67px;
// line-height: 67px;
cursor: pointer;
@include border-tans($borderSize);
......@@ -642,16 +642,34 @@ $borderSize: 6px;
}
}
.desc{
flex: 1;
text-align: left;
}
}
}
// 提交订单
.submit-btn {
// 立即投保
.btn-wrap {
margin: 50px auto 100px;
@extend .pointer;
@extend .bb;
@include btc4(300px, 50px, 22px);
font-weight: bold;
display: flex;
justify-content: center;
.submit-btn {
@extend .fcc;
@extend .bb;
@include btc4(300px, 50px, 22px);
line-height: normal;
min-width: 300px;
min-height: 50px;
height: auto;
width: auto;
font-weight: bold;
// display: inline-block;
padding: 4px 20px;
}
}
......@@ -897,6 +915,7 @@ $borderSize: 6px;
}
.icon-wrap {
// width: 34%;
width: 40%;
display: flex;
justify-content: flex-end;
......