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 91 additions and 37 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);
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 })
317 }, 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;
218
219 &-bg-swiper {
220 position: absolute;
221 width: 100%;
222 min-height: 1440px;
223 .ebg {
224 position: absolute;
225 width: 100%;
226 min-height: 1440px;
213 background-repeat: no-repeat; 227 background-repeat: no-repeat;
214 background-position: center; 228 background-position: center;
215 background-size: cover; 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;
...@@ -527,6 +562,7 @@ ...@@ -527,6 +562,7 @@
527 } 562 }
528 } 563 }
529 } 564 }
565 }
530 566
531 .arrow { 567 .arrow {
532 position: absolute; 568 position: absolute;
...@@ -546,7 +582,6 @@ ...@@ -546,7 +582,6 @@
546 right: -64px; 582 right: -64px;
547 } 583 }
548 } 584 }
549 }
550 585
551 // 只有一个tab时候 586 // 只有一个tab时候
552 .table-1 { 587 .table-1 {
......
...@@ -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,15 +76,21 @@ ...@@ -77,15 +76,21 @@
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">
81 <swiper-slide v-for="(item, index) in dataList" :key="index">
82 <div class="ebg" :style="'background-image: url(' + item.pageMidImage + ');'"></div>
82 <div class="tit-wrap"> 83 <div class="tit-wrap">
83 <div class="tit">{{curTab.pageMidTitle}}</div> 84 <div class="tit">{{curTab.pageMidTitle}}</div>
84 <div class="tit2"> 85 <div class="tit2">
85 {{curTab.pageMidDescribe}} 86 {{curTab.pageMidDescribe}}
86 </div> 87 </div>
87 </div> 88 </div>
89 </swiper-slide>
90 </swiper>
88 91
92 <div class="space1"></div>
93 <div class="quote-cont">
89 <!-- tab表格 --> 94 <!-- tab表格 -->
90 <div class="table" :class="{'table-1':dataList.length<=1}"> 95 <div class="table" :class="{'table-1':dataList.length<=1}">
91 <div class="table-tab"> 96 <div class="table-tab">
...@@ -98,13 +103,12 @@ ...@@ -98,13 +103,12 @@
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> 104 </div>
100 <div class="linear"></div> 105 <div class="linear"></div>
106 <div class="table-wrap">
107 <swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper">
108 <swiper-slide v-for="(item, index) in dataList" :key="index">
101 <div class="table-cont"> 109 <div class="table-cont">
102
103 <div class="panel panel-left"> 110 <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"> 111 <div class="desc">
107
108 <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">
109 {{ item }} 113 {{ item }}
110 </div> 114 </div>
...@@ -181,10 +185,6 @@ ...@@ -181,10 +185,6 @@
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>
185 <div class="item">每半年</div>
186 <div class="item">每季度</div>
187 <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"> 188 <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
189 {{ item.n }} 189 {{ item.n }}
190 </div> 190 </div>
...@@ -205,7 +205,15 @@ ...@@ -205,7 +205,15 @@
205 </div> 205 </div>
206 206
207 </div> 207 </div>
208
209 </div>
210 </swiper-slide>
211 </swiper>
212
213 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
214 <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
208 </div> 215 </div>
216
209 </div> 217 </div>
210 <div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div> 218 <div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div>
211 <div class="customer-service"> 219 <div class="customer-service">
...@@ -213,6 +221,7 @@ ...@@ -213,6 +221,7 @@
213 <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span> 221 <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span>
214 </div> 222 </div>
215 </div> 223 </div>
224 </div>
216 225
217 <!-- 联系我们表单 --> 226 <!-- 联系我们表单 -->
218 <div class="contact"> 227 <div class="contact">
......