Skip to content

dev / pingan-life-index-pro

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

1.首页滑动 

2.页脚样式调整
1 parent 9ea63100
Inline Side-by-side
Showing 5 changed files with 202 additions and 148 deletions
...@@ -66,10 +66,6 @@ ...@@ -66,10 +66,6 @@
66 } 66 }
67 } 67 }
68 } 68 }
69 .drop-list:lang(en) {
70 min-width: 0;
71 margin: 0 13px;
72 }
73 69
74 .user { 70 .user {
75 @include border-tans-rev; 71 @include border-tans-rev;
......
...@@ -216,6 +216,11 @@ ...@@ -216,6 +216,11 @@
216 display: none; 216 display: none;
217 217
218 .nav-v { 218 .nav-v {
219
220 .n-item {
221 width: auto;
222 margin-right: 24px;
223 }
219 } 224 }
220 225
221 .n-item { 226 .n-item {
......
...@@ -31,20 +31,14 @@ export default { ...@@ -31,20 +31,14 @@ export default {
31 PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福 31 PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
32 // swiper 32 // swiper
33 swiperOption: { 33 swiperOption: {
34 navigation: { 34 // navigation: {
35 nextEl: ".swiper-button-next", 35 // nextEl: ".swiper-button-next",
36 prevEl: ".swiper-button-prev" 36 // prevEl: ".swiper-button-prev"
37 }, 37 // },
38 pagination: { 38 // pagination: {
39 el: ".swiper-pagination", 39 // el: ".swiper-pagination",
40 clickable: true 40 // clickable: true
41 },
42 // autoplay: {
43 // delay: 5000,
44 // stopOnLastSlide: false,
45 // disableOnInteraction: false
46 // }, 41 // },
47 // speed: 1000
48 }, 42 },
49 43
50 loading: false, 44 loading: false,
...@@ -287,14 +281,15 @@ export default { ...@@ -287,14 +281,15 @@ export default {
287 onSelectPaymentOptionHandler(item) { 281 onSelectPaymentOptionHandler(item) {
288 this.curPaymentOption = item; 282 this.curPaymentOption = item;
289 }, 283 },
290 // 选择标签
291 onTabHandler(item) {
292 this.curTab = item;
293 },
294 // 投保组件性别选择 284 // 投保组件性别选择
295 onQuoteSexHandler(gender) { 285 onQuoteSexHandler(gender) {
296 this.quoteData.gender = gender; 286 this.quoteData.gender = gender;
297 }, 287 },
288 // 选择标签
289 onTabHandler(item) {
290 this.curTab = item;
291 this.swiperSiderTo(this.curTab.index);
292 },
298 // 上一个tab 293 // 上一个tab
299 onPrevTabHandler() { 294 onPrevTabHandler() {
300 if (this.dataList.length <= 0) return; 295 if (this.dataList.length <= 0) return;
...@@ -304,6 +299,7 @@ export default { ...@@ -304,6 +299,7 @@ export default {
304 index = this.dataList.length - 1; 299 index = this.dataList.length - 1;
305 } 300 }
306 this.curTab = this.dataList[index]; 301 this.curTab = this.dataList[index];
302 this.swiperSiderTo(this.curTab.index);
307 }, 303 },
308 // 下一个tab 304 // 下一个tab
309 onNextTabHandler() { 305 onNextTabHandler() {
...@@ -314,7 +310,17 @@ export default { ...@@ -314,7 +310,17 @@ export default {
314 index = 0; 310 index = 0;
315 } 311 }
316 this.curTab = this.dataList[index]; 312 this.curTab = this.dataList[index];
313 this.swiperSiderTo(this.curTab.index);
317 }, 314 },
315 swiperSiderTo(index) {
316 this.$nextTick(function () {
317 let durTime = 600;
318 this.$refs.bannerSwiper.swiper.slideTo(index, durTime, true);
319 this.$refs.quoteBgSwiper.swiper.slideTo(index, durTime, true);
320 this.$refs.quoteSwiper.swiper.slideTo(index, durTime, true);
321 })
322 },
323
318 // 联系我们 324 // 联系我们
319 toContactUs() { 325 toContactUs() {
320 this.$router.push({ 326 this.$router.push({
...@@ -511,6 +517,9 @@ export default { ...@@ -511,6 +517,9 @@ export default {
511 }); 517 });
512 this.curTab = this.dataList[0]; 518 this.curTab = this.dataList[0];
513 this.bannerList = this.dataList; 519 this.bannerList = this.dataList;
520 this.bannerList.forEach(element => {
521 element.btns = element.btnDescribe;
522 });
514 console.log("this.dataList:", this.dataList); 523 console.log("this.dataList:", this.dataList);
515 }) 524 })
516 525
......
...@@ -139,6 +139,10 @@ ...@@ -139,6 +139,10 @@
139 color: #ffffff; 139 color: #ffffff;
140 @include linear-bg(); 140 @include linear-bg();
141 } 141 }
142
143 &-item-single {
144 justify-content: center !important;
145 }
142 } 146 }
143 147
144 // 推荐 为什么选择平安人寿 148 // 推荐 为什么选择平安人寿
...@@ -207,26 +211,51 @@ ...@@ -207,26 +211,51 @@
207 211
208 // 线上报价 212 // 线上报价
209 .quote { 213 .quote {
214 position: relative;
210 width: 100%; 215 width: 100%;
211 min-height: 1440px; 216 min-height: 1440px;
212 margin: 52px auto 0; 217 margin: 52px auto 0;
213 background-repeat: no-repeat; 218
214 background-position: center; 219 &-bg-swiper {
215 background-size: cover; 220 position: absolute;
221 width: 100%;
222 min-height: 1440px;
223 .ebg {
224 position: absolute;
225 width: 100%;
226 min-height: 1440px;
227 background-repeat: no-repeat;
228 background-position: center;
229 background-size: cover;
230 }
231 }
232
233 .quote-cont {
234 position: relative;
235 z-index: 11;
236 }
237
238 .table-cont {
239 position: relative;
240 z-index: 11;
241 }
216 242
217 .space1 { 243 .space1 {
218 height: 540px; 244 height: 670px;
219 } 245 }
220 246
221 .tit-wrap { 247 .tit-wrap {
248 position: relative;
249 z-index: 11;
222 height: 670px; 250 height: 670px;
223 display: flex; 251 display: flex;
224 // align-items: flex-end;
225 align-content: flex-end; 252 align-content: flex-end;
226 flex-wrap: wrap; 253 flex-wrap: wrap;
227 width: 100%; 254 width: 100%;
228 255
229 .tit { 256 .tit {
257 position: relative;
258 z-index: 11;
230 width: 100%; 259 width: 100%;
231 font-size: 36px; 260 font-size: 36px;
232 font-weight: bold; 261 font-weight: bold;
...@@ -238,6 +267,8 @@ ...@@ -238,6 +267,8 @@
238 } 267 }
239 } 268 }
240 .tit2 { 269 .tit2 {
270 position: relative;
271 z-index: 11;
241 width: 720px; 272 width: 720px;
242 margin: 40px auto 0; 273 margin: 40px auto 0;
243 text-align: center; 274 text-align: center;
...@@ -296,6 +327,10 @@ ...@@ -296,6 +327,10 @@
296 z-index: 11; 327 z-index: 11;
297 } 328 }
298 329
330 &-wrap {
331 position: relative;
332 }
333
299 &-cont { 334 &-cont {
300 min-height: 384px; 335 min-height: 384px;
301 margin: 0 auto 0; 336 margin: 0 auto 0;
...@@ -397,9 +432,9 @@ ...@@ -397,9 +432,9 @@
397 432
398 // 滑动条 433 // 滑动条
399 .slider { 434 .slider {
400 position: relative; 435 position: relative;
401 max-width: 100%; 436 max-width: 100%;
402 margin: 38px auto 0; 437 margin: 38px auto 0;
403 } 438 }
404 439
405 // 滑动条 440 // 滑动条
...@@ -527,24 +562,24 @@ ...@@ -527,24 +562,24 @@
527 } 562 }
528 } 563 }
529 } 564 }
565 }
530 566
531 .arrow { 567 .arrow {
532 position: absolute; 568 position: absolute;
533 width: 44px; 569 width: 44px;
534 height: 73px; 570 height: 73px;
535 top: 32%; 571 top: 32%;
536 cursor: pointer; 572 cursor: pointer;
537 z-index: 21; 573 z-index: 21;
538 } 574 }
539 575
540 .arrow-left { 576 .arrow-left {
541 background-image: url("~@/assets/images/index/arrow-left.png"); 577 background-image: url("~@/assets/images/index/arrow-left.png");
542 left: -64px; 578 left: -64px;
543 } 579 }
544 .arrow-right { 580 .arrow-right {
545 background-image: url("~@/assets/images/index/arrow-right.png"); 581 background-image: url("~@/assets/images/index/arrow-right.png");
546 right: -64px; 582 right: -64px;
547 }
548 } 583 }
549 } 584 }
550 585
......
...@@ -8,9 +8,8 @@ ...@@ -8,9 +8,8 @@
8 <input type="password" style="display: none;" /> 8 <input type="password" style="display: none;" />
9 <div class="banner-contaner"> 9 <div class="banner-contaner">
10 <!-- banner 轮播 --> 10 <!-- banner 轮播 -->
11
12 <div class="banner banner-pc"> 11 <div class="banner banner-pc">
13 <swiper :options="swiperOption"> 12 <swiper :options="swiperOption" ref="bannerSwiper">
14 <swiper-slide v-for="(item, index) in bannerList" :key="index"> 13 <swiper-slide v-for="(item, index) in bannerList" :key="index">
15 <img class="banner-img" :src="item.pcBannerUrl" /> 14 <img class="banner-img" :src="item.pcBannerUrl" />
16 <div class="btn-wrap"> 15 <div class="btn-wrap">
...@@ -42,7 +41,7 @@ ...@@ -42,7 +41,7 @@
42 41
43 <!-- 导航菜单切换 --> 42 <!-- 导航菜单切换 -->
44 <div class="nav-tab"> 43 <div class="nav-tab">
45 <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(1200px / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> 44 <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index,'nav-tab-item-single':dataList.length<=1 }" :style="'width: calc(1200px / ' + dataList.length + ');'" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div>
46 <!-- <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + dataList.length + '); '+ (index == dataList.length-1 ?'':'width:50%;') +' '" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> --> 45 <!-- <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + dataList.length + '); '+ (index == dataList.length-1 ?'':'width:50%;') +' '" @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id">{{ item.tabName }}</div> -->
47 46
48 </div> 47 </div>
...@@ -77,88 +76,93 @@ ...@@ -77,88 +76,93 @@
77 </div> 76 </div>
78 77
79 <!-- 线上报价 --> 78 <!-- 线上报价 -->
80 <div class="quote" :style="'background-image: url(' + curTab.pageMidImage + ');'"> 79 <div class="quote">
81 <!-- <div class="space1"></div> --> 80 <swiper :options="swiperOption" ref="quoteBgSwiper" class="quote-bg-swiper">
82 <div class="tit-wrap"> 81 <swiper-slide v-for="(item, index) in dataList" :key="index">
83 <div class="tit">{{curTab.pageMidTitle}}</div> 82 <div class="ebg" :style="'background-image: url(' + item.pageMidImage + ');'"></div>
84 <div class="tit2"> 83 <div class="tit-wrap">
85 {{curTab.pageMidDescribe}} 84 <div class="tit">{{curTab.pageMidTitle}}</div>
86 </div> 85 <div class="tit2">
87 </div> 86 {{curTab.pageMidDescribe}}
87 </div>
88 </div>
89 </swiper-slide>
90 </swiper>
88 91
89 <!-- tab表格 --> 92 <div class="space1"></div>
90 <div class="table" :class="{'table-1':dataList.length<=1}"> 93 <div class="quote-cont">
91 <div class="table-tab"> 94 <!-- tab表格 -->
92 <!-- <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=" 95 <div class="table" :class="{'table-1':dataList.length<=1}">
96 <div class="table-tab">
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="
93 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> 98 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
94 </div> --> 99 </div> -->
95 <!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div> 100 <!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
96 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> --> 101 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> -->
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=" 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="
98 ';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> 103 ';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
99 </div>
100 <div class="linear"></div>
101 <div class="table-cont">
102
103 <div class="panel panel-left">
104 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
105 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
106 <div class="desc">
107
108 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
109 {{ item }}
110 </div>
111 </div>
112 </div> 104 </div>
113 <div class="panel panel-right"> 105 <div class="linear"></div>
114 <!-- 好医时 --> 106 <div class="table-wrap">
115 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc"> 107 <swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper">
116 <div class="func func1"> 108 <swiper-slide v-for="(item, index) in dataList" :key="index">
117 <div class="func1-item"> 109 <div class="table-cont">
118 <div class="k"> {{$t('common.Sex')}}</div> 110 <div class="panel panel-left">
119 <div class="gender"> 111 <div class="desc">
120 <div class="gender-item" @click="onQuoteSexHandler('M')"> 112 <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
121 {{$t('common.Male')}} 113 {{ item }}
122 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt /> 114 </div>
123 <img v-else src="@/assets/images/common/icon-male.png" alt />
124 </div>
125 <div class="gender-item" @click="onQuoteSexHandler('F')">
126 {{$t('common.Female')}}
127 <img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
128 <img v-else src="@/assets/images/common/icon-female.png" alt />
129 </div> 115 </div>
130 </div> 116 </div>
131 </div> 117 <div class="panel panel-right">
132 <div class="func1-item"> 118 <!-- 好医时 -->
133 <div class="k">{{$t('common.Birthday')}}</div> 119 <div v-if="curTab.relation == PRODUCT_PRO_EASY " class="plugin fcc">
134 <div class="age"> 120 <div class="func func1">
135 <div class="ipt-wrap-linear"> 121 <div class="func1-item">
136 <div class="down-arrow"></div> 122 <div class="k"> {{$t('common.Sex')}}</div>
137 <div class="cont"> 123 <div class="gender">
138 <!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')"> 124 <div class="gender-item" @click="onQuoteSexHandler('M')">
125 {{$t('common.Male')}}
126 <img v-if="quoteData.gender == 'M'" src="@/assets/images/common/icon-male-act.png" alt />
127 <img v-else src="@/assets/images/common/icon-male.png" alt />
128 </div>
129 <div class="gender-item" @click="onQuoteSexHandler('F')">
130 {{$t('common.Female')}}
131 <img v-if="quoteData.gender == 'F'" src="@/assets/images/common/icon-female-act.png" alt />
132 <img v-else src="@/assets/images/common/icon-female.png" alt />
133 </div>
134 </div>
135 </div>
136 <div class="func1-item">
137 <div class="k">{{$t('common.Birthday')}}</div>
138 <div class="age">
139 <div class="ipt-wrap-linear">
140 <div class="down-arrow"></div>
141 <div class="cont">
142 <!-- <el-select class="ipt" v-model="quoteData.age" :placeholder="$t('common.Age')">
139 <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option> 143 <el-option v-for="(item, index) in 100" :key="index" :label="item" :value="item"></el-option>
140 </el-select> --> 144 </el-select> -->
141 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{ 145 <date-picker class="ipt-date" :placeholder="$t('common.Birthday') + '*'" v-model="quoteData.birthday" :filtModel="['future']" :cusStyle="{
142 border: 'none !important', 146 border: 'none !important',
143 'background-color': 'transparent !important', 147 'background-color': 'transparent !important',
144 padding: '16px 24px', 148 padding: '16px 24px',
145 color: '#606266', 149 color: '#606266',
146 'text-align': 'center' 150 'text-align': 'center'
147 }"> 151 }">
148 </date-picker> 152 </date-picker>
153 </div>
154 </div>
155 </div>
156 </div>
149 </div> 157 </div>
150 </div> 158 </div>
151 </div>
152 </div>
153 </div>
154 </div>
155 159
156 <!-- 传家福 --> 160 <!-- 传家福 -->
157 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin "> 161 <div v-if="curTab.relation == PRODUCT_REN_RICH " class="plugin ">
158 <div class="func func2"> 162 <div class="func func2">
159 <div class="func2-tit">滑動選擇保額</div> 163 <div class="func2-tit">滑動選擇保額</div>
160 <div class="func2-tit2">保額（萬美元）</div> 164 <div class="func2-tit2">保額（萬美元）</div>
161 <!-- <div class="slider"> 165 <!-- <div class="slider">
162 <div class="slider-bar"> 166 <div class="slider-bar">
163 <div class="slider-bar-thumb" > 167 <div class="slider-bar-thumb" >
164 <div class="num">300</div> 168 <div class="num">300</div>
...@@ -167,50 +171,55 @@ ...@@ -167,50 +171,55 @@
167 </div> 171 </div>
168 </div> --> 172 </div> -->
169 173
170 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider> 174 <slider class="slider" :min="sliderMin" :max="sliderMax" v-model="sliderPer"></slider>
171 <!-- 表格选择 --> 175 <!-- 表格选择 -->
172 <div class="form"> 176 <div class="form">
173 <div class="form-item"> 177 <div class="form-item">
174 <div class="label">繳費期</div> 178 <div class="label">繳費期</div>
175 <div class="val"> 179 <div class="val">
176 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id"> 180 <div @click="onSelectPaymentPeriodHandler(item)" class="item" :class="{'item-act':curPaymentPeriod.v==item.v}" v-for="item in paymentPeriodList" :key="item.id">
177 {{ item.n }} 181 {{ item.n }}
178 </div> 182 </div>
179 </div> 183 </div>
180 </div> 184 </div>
181 <div class="form-item"> 185 <div class="form-item">
182 <div class="label">繳費選項</div> 186 <div class="label">繳費選項</div>
183 <div class="val val2"> 187 <div class="val val2">
184 <!-- <div class="item">每年</div> 188 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
185 <div class="item">每半年</div> 189 {{ item.n }}
186 <div class="item">每季度</div> 190 </div>
187 <div class="item">每月</div> --> 191 </div>
188 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id"> 192 </div>
189 {{ item.n }} 193 </div>
194 <!-- 分割线 -->
195 <div class="line"></div>
196 <!-- 计算 -->
197 <div class="calculation">
198 <div class="label">每月保费</div>
199 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
200 </div>
201 <!-- 提示 -->
202 <div class="tips">Please contact your financial consultant to quote for insured
203 amount that exceeds USD 3 million</div>
190 </div> 204 </div>
191 </div> 205 </div>
206
192 </div> 207 </div>
208
193 </div> 209 </div>
194 <!-- 分割线 --> 210 </swiper-slide>
195 <div class="line"></div> 211 </swiper>
196 <!-- 计算 -->
197 <div class="calculation">
198 <div class="label">每月保费</div>
199 <div class="value">$ <span class="price">{{sumAssured}}</span></div>
200 </div>
201 <!-- 提示 -->
202 <div class="tips">Please contact your financial consultant to quote for insured
203 amount that exceeds USD 3 million</div>
204 </div>
205 </div>
206 212
213 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
214 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
207 </div> 215 </div>
216
217 </div>
218 <div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div>
219 <div class="customer-service">
220 {{$t('index.quote.want')}}
221 <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span>
208 </div> 222 </div>
209 </div>
210 <div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div>
211 <div class="customer-service">
212 {{$t('index.quote.want')}}
213 <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span>
214 </div> 223 </div>
215 </div> 224 </div>
216 225
......