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 @@ ...@@ -330,19 +330,21 @@
330 position: relative; 330 position: relative;
331 } 331 }
332 332
333 // .quote-swiper { 333 .table-fl {
334 // min-height: 600px; 334 display: flex;
335 // } 335 }
336 336
337 &-cont { 337 .table-cont {
338 min-height: 384px; 338 min-height: 384px;
339 margin: 0 auto 0; 339 margin: 0 auto 0;
340 position: relative; 340 position: relative;
341 display: flex; 341 display: flex;
342 width: 100%; /* 增加宽度100% */
342 343
343 .panel { 344 .panel {
344 // position: relative; 345 position: relative;
345 width: 50%; 346 width: 50%;
347 flex-grow: 1;
346 } 348 }
347 349
348 .panel-left { 350 .panel-left {
...@@ -366,7 +368,6 @@ ...@@ -366,7 +368,6 @@
366 background-color: #ffffff; 368 background-color: #ffffff;
367 // @extend .fcc; 369 // @extend .fcc;
368 370
369
370 .plugin { 371 .plugin {
371 width: 100%; 372 width: 100%;
372 height: 100%; 373 height: 100%;
...@@ -916,6 +917,22 @@ ...@@ -916,6 +917,22 @@
916 917
917 // 投保 918 // 投保
918 .quote { 919 .quote {
920 min-height: 0;
921 &-bg-swiper {
922 min-height: 0;
923 .ebg {
924 min-height: 0;
925 height: 800px;
926 }
927 .tit-wrap{
928 height: 470px;
929 }
930 }
931
932 .space1 {
933 height: 500px;
934 }
935
919 .tit { 936 .tit {
920 font-size: $fontSizeTitle-M2; 937 font-size: $fontSizeTitle-M2;
921 } 938 }
...@@ -931,13 +948,19 @@ ...@@ -931,13 +948,19 @@
931 &-tab { 948 &-tab {
932 } 949 }
933 950
934 &-cont { 951 .table-fl {
952 // display: block;
953 }
954
955 .table-cont {
935 display: block; 956 display: block;
936 height: auto; 957 height: auto;
937 width: 100% !important; 958 width: 100% !important;
938 font-size: $fontSize-M2; 959 font-size: $fontSize-M2;
939 960
940 .panel { 961 .panel {
962 width: 100%;
963
941 .func1 { 964 .func1 {
942 &-item { 965 &-item {
943 display: block; 966 display: block;
......
...@@ -104,182 +104,96 @@ ...@@ -104,182 +104,96 @@
104 </div> 104 </div>
105 <div class="linear"></div> 105 <div class="linear"></div>
106 <div class="table-wrap"> 106 <div class="table-wrap">
107 <!-- <swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper"> 107 <div class="table-fl">
108 <swiper-slide v-for="(item, index) in dataList" :key="index"> 108 <div class="table-cont">
109 <div class="table-cont"> 109 <div class="panel panel-left">
110 <div class="panel panel-left"> 110 <div class="desc">
111 <div class="desc"> 111 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
112 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id"> 112 {{ item }}
113 {{ item }}
114 </div>
115 </div> 113 </div>
116 </div> 114 </div>
117 <div class="panel panel-right"> 115 </div>
118 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc"> 116 <div class="panel panel-right">
119 <div class="func func1"> 117 <!-- 好医时 -->
120 <div class="func1-item"> 118 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
121 <div class="k"> {{$t('common.Sex')}}</div> 119 <div class="func func1">
122 <div class="gender"> 120 <div class="func1-item">
123 <div class="gender-item" @click="onQuoteSexHandler('M')"> 121 <div class="k"> {{$t('common.Sex')}}</div>
124 {{$t('common.Male')}} 122 <div class="gender">
125 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt /> 123 <div class="gender-item" @click="onQuoteSexHandler('M')">
126 <img v-else src="@/assets/images/common/icon-male.png" alt /> 124 {{$t('common.Male')}}
127 </div> 125 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
128 <div class="gender-item" @click="onQuoteSexHandler('F')"> 126 <img v-else src="@/assets/images/common/icon-male.png" alt />
129 {{$t('common.Female')}} 127 </div>
130 <img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt /> 128 <div class="gender-item" @click="onQuoteSexHandler('F')">
131 <img v-else src="@/assets/images/common/icon-female.png" alt /> 129 {{$t('common.Female')}}
132 </div> 130 <img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
131 <img v-else src="@/assets/images/common/icon-female.png" alt />
133 </div> 132 </div>
134 </div> 133 </div>
135 <div class="func1-item"> 134 </div>
136 <div class="k">{{$t('common.Birthday')}}</div> 135 <div class="func1-item">
137 <div class="age"> 136 <div class="k">{{$t('common.Birthday')}}</div>
138 <div class="ipt-wrap-linear"> 137 <div class="age">
139 <div class="down-arrow"></div> 138 <div class="ipt-wrap-linear">
140 <div class="cont"> 139 <div class="down-arrow"></div>
141 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{ 140 <div class="cont">
141 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
142 border: 'none !important', 142 border: 'none !important',
143 'background-color': 'transparent !important', 143 'background-color': 'transparent !important',
144 padding: '16px 24px', 144 padding: '16px 24px',
145 color: '#606266', 145 color: '#606266',
146 'text-align': 'center' 146 'text-align': 'center'
147 }"> 147 }">
148 </date-picker> 148 </date-picker>
149 </div>
150 </div> 149 </div>
151 </div> 150 </div>
152 </div> 151 </div>
153 </div> 152 </div>
154 </div> 153 </div>
154 </div>
155 155
156 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin "> 156 <!-- 传家福 -->
157 <div class="func func2"> 157 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
158 <div class="func2-tit">{{$t('index.quote.vhis.t1')}}</div> 158 <div class="func func2">
159 <div class="func2-tit2">{{$t('index.quote.vhis.t2')}}</div> 159 <div class="func2-tit">{{$t('index.quote.genRich.t1')}}</div>
160 <div class="func2-tit2">{{$t('index.quote.genRich.t2')}}</div>
160 161
161 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider> 162 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
162 163 <!-- 表格选择 -->
163 <div class="form"> 164 <div class="form">
164 <div class="form-item"> 165 <div class="form-item">
165 <div class="label">{{$t('index.quote.vhis.PaymentPeriod')}}</div> 166 <div class="label">{{$t('index.quote.genRich.PaymentPeriod')}}</div>
166 <div class="val"> 167 <div class="val">
167 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id"> 168 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
168 {{ item.n }} 169 {{ item.n }}
169 </div>
170 </div> 170 </div>
171 </div> 171 </div>
172 <div class="form-item"> 172 </div>
173 <div class="label">{{$t('index.quote.vhis.PaymentOptions')}}</div> 173 <div class="form-item">
174 <div class="val val2"> 174 <div class="label">{{$t('index.quote.genRich.PaymentOptions')}}</div>
175 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id"> 175 <div class="val val2">
176 {{ item.n }} 176 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
177 </div> 177 {{ item.n }}
178 </div> 178 </div>
179 </div> 179 </div>
180 </div> 180 </div>
181 <div class="line"></div>
182 <div class="calculation">
183 <div class="label">{{$t('index.quote.vhis.quotePerMonth')}}</div>
184 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
185 </div>
186 <div class="tips">{{$t('index.quote.vhis.tips')}}</div>
187 </div> 181 </div>
188 </div> 182 <!-- 分割线 -->
189 183 <div class="line"></div>
190 </div> 184 <!-- 计算 -->
191 185 <div class="calculation">
192 </div> 186 <div class="label">{{curPaymentOption.n}}{{locale == 'en' ? ' ' : ''}}{{$t('index.quote.genRich.Premium')}}</div>
193 </swiper-slide> 187 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
194 </swiper> -->
195 <div class="table-cont">
196 <div class="panel panel-left">
197 <div class="desc">
198 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
199 {{ item }}
200 </div>
201 </div>
202 </div>
203 <div class="panel panel-right">
204 <!-- 好医时 -->
205 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
206 <div class="func func1">
207 <div class="func1-item">
208 <div class="k"> {{$t('common.Sex')}}</div>
209 <div class="gender">
210 <div class="gender-item" @click="onQuoteSexHandler('M')">
211 {{$t('common.Male')}}
212 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
213 <img v-else src="@/assets/images/common/icon-male.png" alt />
214 </div>
215 <div class="gender-item" @click="onQuoteSexHandler('F')">
216 {{$t('common.Female')}}
217 <img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
218 <img v-else src="@/assets/images/common/icon-female.png" alt />
219 </div>
220 </div>
221 </div>
222 <div class="func1-item">
223 <div class="k">{{$t('common.Birthday')}}</div>
224 <div class="age">
225 <div class="ipt-wrap-linear">
226 <div class="down-arrow"></div>
227 <div class="cont">
228 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
229 border: 'none !important',
230 'background-color': 'transparent !important',
231 padding: '16px 24px',
232 color: '#606266',
233 'text-align': 'center'
234 }">
235 </date-picker>
236 </div>
237 </div>
238 </div> 188 </div>
189 <!-- 提示 -->
190 <div class="tips">{{$t('index.quote.genRich.tips')}}</div>
239 </div> 191 </div>
240 </div> 192 </div>
241 </div>
242
243 <!-- 传家福 -->
244 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
245 <div class="func func2">
246 <div class="func2-tit">{{$t('index.quote.genRich.t1')}}</div>
247 <div class="func2-tit2">{{$t('index.quote.genRich.t2')}}</div>
248 193
249 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
250 <!-- 表格选择 -->
251 <div class="form">
252 <div class="form-item">
253 <div class="label">{{$t('index.quote.genRich.PaymentPeriod')}}</div>
254 <div class="val">
255 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
256 {{ item.n }}
257 </div>
258 </div>
259 </div>
260 <div class="form-item">
261 <div class="label">{{$t('index.quote.genRich.PaymentOptions')}}</div>
262 <div class="val val2">
263 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
264 {{ item.n }}
265 </div>
266 </div>
267 </div>
268 </div>
269 <!-- 分割线 -->
270 <div class="line"></div>
271 <!-- 计算 -->
272 <div class="calculation">
273 <div class="label">{{curPaymentOption.n}}{{locale == 'en' ? ' ' : ''}}{{$t('index.quote.genRich.Premium')}}</div>
274 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
275 </div>
276 <!-- 提示 -->
277 <div class="tips">{{$t('index.quote.genRich.tips')}}</div>
278 </div>
279 </div> 194 </div>
280 195
281 </div> 196 </div>
282
283 </div> 197 </div>
284 198
285 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 199 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
......