Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
5b2e2e4b by simon
Options

首页极端情况下兼容ie11

1 parent 5eb34117
Inline Side-by-side
Showing 2 changed files with 90 additions and 153 deletions
......@@ -330,19 +330,21 @@
position: relative;
}
// .quote-swiper {
// min-height: 600px;
// }
.table-fl {
display: flex;
}
&-cont {
.table-cont {
min-height: 384px;
margin: 0 auto 0;
position: relative;
display: flex;
width: 100%; /* 增加宽度100% */
.panel {
// position: relative;
position: relative;
width: 50%;
flex-grow: 1;
}
.panel-left {
......@@ -366,7 +368,6 @@
background-color: #ffffff;
// @extend .fcc;
.plugin {
width: 100%;
height: 100%;
......@@ -916,6 +917,22 @@
// 投保
.quote {
min-height: 0;
&-bg-swiper {
min-height: 0;
.ebg {
min-height: 0;
height: 800px;
}
.tit-wrap{
height: 470px;
}
}
.space1 {
height: 500px;
}
.tit {
font-size: $fontSizeTitle-M2;
}
......@@ -931,13 +948,19 @@
&-tab {
}
&-cont {
.table-fl {
// display: block;
}
.table-cont {
display: block;
height: auto;
width: 100% !important;
font-size: $fontSize-M2;
.panel {
width: 100%;
.func1 {
&-item {
display: block;
......
......@@ -104,182 +104,96 @@
</div>
<div class="linear"></div>
<div class="table-wrap">
<!-- <swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper">
<swiper-slide v-for="(item, index) in dataList" :key="index">
<div class="table-cont">
<div class="panel panel-left">
<div class="desc">
<div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
{{ item }}
</div>
<div class="table-fl">
<div class="table-cont">
<div class="panel panel-left">
<div class="desc">
<div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
{{ item }}
</div>
</div>
<div class="panel panel-right">
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
<div class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
</div>
</div>
<div class="panel panel-right">
<!-- 好医时 -->
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
<div class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
</div>
</div>
<div class="func1-item">
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
</div>
<div class="func1-item">
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
border: 'none !important',
'background-color': 'transparent !important',
padding: '16px 24px',
color: '#606266',
'text-align': 'center'
}">
</date-picker>
</div>
</date-picker>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
<div class="func func2">
<div class="func2-tit">{{$t('index.quote.vhis.t1')}}</div>
<div class="func2-tit2">{{$t('index.quote.vhis.t2')}}</div>
<!-- 传家福 -->
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
<div class="func func2">
<div class="func2-tit">{{$t('index.quote.genRich.t1')}}</div>
<div class="func2-tit2">{{$t('index.quote.genRich.t2')}}</div>
<slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
<div class="form">
<div class="form-item">
<div class="label">{{$t('index.quote.vhis.PaymentPeriod')}}</div>
<div class="val">
<div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
{{ item.n }}
</div>
<slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
<!-- 表格选择 -->
<div class="form">
<div class="form-item">
<div class="label">{{$t('index.quote.genRich.PaymentPeriod')}}</div>
<div class="val">
<div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
{{ item.n }}
</div>
</div>
<div class="form-item">
<div class="label">{{$t('index.quote.vhis.PaymentOptions')}}</div>
<div class="val val2">
<div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
{{ item.n }}
</div>
</div>
<div class="form-item">
<div class="label">{{$t('index.quote.genRich.PaymentOptions')}}</div>
<div class="val val2">
<div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
<div class="line"></div>
<div class="calculation">
<div class="label">{{$t('index.quote.vhis.quotePerMonth')}}</div>
<div class="value">$ <span class="price">{{sumAssured}}</span></div>
</div>
<div class="tips">{{$t('index.quote.vhis.tips')}}</div>
</div>
</div>
</div>
</div>
</swiper-slide>
</swiper> -->
<div class="table-cont">
<div class="panel panel-left">
<div class="desc">
<div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
{{ item }}
</div>
</div>
</div>
<div class="panel panel-right">
<!-- 好医时 -->
<div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
<div class="func func1">
<div class="func1-item">
<div class="k"> {{$t('common.Sex')}}</div>
<div class="gender">
<div class="gender-item" @click="onQuoteSexHandler('M')">
{{$t('common.Male')}}
<img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
<img v-else src="@/assets/images/common/icon-male.png" alt />
</div>
<div class="gender-item" @click="onQuoteSexHandler('F')">
{{$t('common.Female')}}
<img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
<img v-else src="@/assets/images/common/icon-female.png" alt />
</div>
</div>
</div>
<div class="func1-item">
<div class="k">{{$t('common.Birthday')}}</div>
<div class="age">
<div class="ipt-wrap-linear">
<div class="down-arrow"></div>
<div class="cont">
<date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
border: 'none !important',
'background-color': 'transparent !important',
padding: '16px 24px',
color: '#606266',
'text-align': 'center'
}">
</date-picker>
</div>
</div>
<!-- 分割线 -->
<div class="line"></div>
<!-- 计算 -->
<div class="calculation">
<div class="label">{{curPaymentOption.n}}{{locale == 'en' ? ' ' : ''}}{{$t('index.quote.genRich.Premium')}}</div>
<div class="value">$ <span class="price">{{sumAssured}}</span></div>
</div>
<!-- 提示 -->
<div class="tips">{{$t('index.quote.genRich.tips')}}</div>
</div>
</div>
</div>
<!-- 传家福 -->
<div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
<div class="func func2">
<div class="func2-tit">{{$t('index.quote.genRich.t1')}}</div>
<div class="func2-tit2">{{$t('index.quote.genRich.t2')}}</div>
<slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
<!-- 表格选择 -->
<div class="form">
<div class="form-item">
<div class="label">{{$t('index.quote.genRich.PaymentPeriod')}}</div>
<div class="val">
<div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
<div class="form-item">
<div class="label">{{$t('index.quote.genRich.PaymentOptions')}}</div>
<div class="val val2">
<div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
{{ item.n }}
</div>
</div>
</div>
</div>
<!-- 分割线 -->
<div class="line"></div>
<!-- 计算 -->
<div class="calculation">
<div class="label">{{curPaymentOption.n}}{{locale == 'en' ? ' ' : ''}}{{$t('index.quote.genRich.Premium')}}</div>
<div class="value">$ <span class="price">{{sumAssured}}</span></div>
</div>
<!-- 提示 -->
<div class="tips">{{$t('index.quote.genRich.tips')}}</div>
</div>
</div>
</div>
</div>
<div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
......