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 32 additions and 95 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,94 +104,7 @@ ...@@ -104,94 +104,7 @@
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">
109 <div class="table-cont">
110 <div class="panel panel-left">
111 <div class="desc">
112 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
113 {{ item }}
114 </div>
115 </div>
116 </div>
117 <div class="panel panel-right">
118 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
119 <div class="func func1">
120 <div class="func1-item">
121 <div class="k"> {{$t('common.Sex')}}</div>
122 <div class="gender">
123 <div class="gender-item" @click="onQuoteSexHandler('M')">
124 {{$t('common.Male')}}
125 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
126 <img v-else src="@/assets/images/common/icon-male.png" alt />
127 </div>
128 <div class="gender-item" @click="onQuoteSexHandler('F')">
129 {{$t('common.Female')}}
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 />
132 </div>
133 </div>
134 </div>
135 <div class="func1-item">
136 <div class="k">{{$t('common.Birthday')}}</div>
137 <div class="age">
138 <div class="ipt-wrap-linear">
139 <div class="down-arrow"></div>
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',
143 'background-color': 'transparent !important',
144 padding: '16px 24px',
145 color: '#606266',
146 'text-align': 'center'
147 }">
148 </date-picker>
149 </div>
150 </div>
151 </div>
152 </div>
153 </div>
154 </div>
155
156 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
157 <div class="func func2">
158 <div class="func2-tit">{{$t('index.quote.vhis.t1')}}</div>
159 <div class="func2-tit2">{{$t('index.quote.vhis.t2')}}</div>
160
161 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
162
163 <div class="form">
164 <div class="form-item">
165 <div class="label">{{$t('index.quote.vhis.PaymentPeriod')}}</div>
166 <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 {{ item.n }}
169 </div>
170 </div>
171 </div>
172 <div class="form-item">
173 <div class="label">{{$t('index.quote.vhis.PaymentOptions')}}</div>
174 <div class="val val2">
175 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
176 {{ item.n }}
177 </div>
178 </div>
179 </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>
188 </div>
189
190 </div>
191
192 </div>
193 </swiper-slide>
194 </swiper> -->
195 <div class="table-cont"> 108 <div class="table-cont">
196 <div class="panel panel-left"> 109 <div class="panel panel-left">
197 <div class="desc"> 110 <div class="desc">
...@@ -281,6 +194,7 @@ ...@@ -281,6 +194,7 @@
281 </div> 194 </div>
282 195
283 </div> 196 </div>
197 </div>
284 198
285 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 199 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
286 <div @click="onNextTabHandler()" class="arrow arrow-right"></div> 200 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
......