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
Expand all
Inline Side-by-side
Showing 5 changed files with 90 additions and 45 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
......