1.首页滑动

2.页脚样式调整

@@ -66,10 +66,6 @@
     }
   }
 }
-.drop-list:lang(en) {
-  min-width: 0;
-  margin: 0 13px;
-}
 
 .user {
   @include border-tans-rev;

@@ -216,6 +216,11 @@
             display: none;
 
             .nav-v {
+              
+              .n-item {
+                width: auto;
+                margin-right: 24px;
+              }
             }
 
             .n-item {

@@ -31,20 +31,14 @@ export default {
 			PRODUCT_REN_RICH: "PRODUCT_REN_RICH", // 平安福
 			// swiper
 			swiperOption: {
-				navigation: {
-					nextEl: ".swiper-button-next",
-					prevEl: ".swiper-button-prev"
-				},
-				pagination: {
-					el: ".swiper-pagination",
-					clickable: true
-				},
-				// autoplay: {
-				// 	delay: 5000,
-				// 	stopOnLastSlide: false,
-				// 	disableOnInteraction: false
+				// navigation: {
+				// 	nextEl: ".swiper-button-next",
+				// 	prevEl: ".swiper-button-prev"
+				// },
+				// pagination: {
+				// 	el: ".swiper-pagination",
+				// 	clickable: true
 				// },
-				// speed: 1000
 			},
 
 			loading: false,
@@ -287,14 +281,15 @@ export default {
 		onSelectPaymentOptionHandler(item) {
 			this.curPaymentOption = item;
 		},
-		// 选择标签
-		onTabHandler(item) {
-			this.curTab = item;
-		},
 		// 投保组件性别选择
 		onQuoteSexHandler(gender) {
 			this.quoteData.gender = gender;
 		},
+		// 选择标签
+		onTabHandler(item) {
+			this.curTab = item;
+			this.swiperSiderTo(this.curTab.index);
+		},
 		// 上一个tab
 		onPrevTabHandler() {
 			if (this.dataList.length <= 0) return;
@@ -304,6 +299,7 @@ export default {
 				index = this.dataList.length - 1;
 			}
 			this.curTab = this.dataList[index];
+			this.swiperSiderTo(this.curTab.index);
 		},
 		// 下一个tab
 		onNextTabHandler() {
@@ -314,7 +310,17 @@ export default {
 				index = 0;
 			}
 			this.curTab = this.dataList[index];
+			this.swiperSiderTo(this.curTab.index);
+		},
+		swiperSiderTo(index) {
+			this.$nextTick(function () {
+				let durTime = 600;
+				this.$refs.bannerSwiper.swiper.slideTo(index, durTime, true);
+				this.$refs.quoteBgSwiper.swiper.slideTo(index, durTime, true);
+				this.$refs.quoteSwiper.swiper.slideTo(index, durTime, true);
+			})
 		},
+
 		// 联系我们
 		toContactUs() {
 			this.$router.push({
@@ -511,6 +517,9 @@ export default {
 				});
 				this.curTab = this.dataList[0];
 				this.bannerList = this.dataList;
+				this.bannerList.forEach(element => {
+					element.btns = element.btnDescribe;
+				});
 				console.log("this.dataList:", this.dataList);
 			})
 

@@ -139,6 +139,10 @@
     color: #ffffff;
     @include linear-bg();
   }
+
+  &-item-single {
+    justify-content: center !important;
+  }
 }
 
 // 推荐 为什么选择平安人寿
@@ -207,26 +211,51 @@
 
 // 线上报价
 .quote {
+  position: relative;
   width: 100%;
   min-height: 1440px;
   margin: 52px auto 0;
+
+  &-bg-swiper {
+    position: absolute;
+    width: 100%;
+    min-height: 1440px;
+    .ebg {
+      position: absolute;
+      width: 100%;
+      min-height: 1440px;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
+    }
+  }
+
+  .quote-cont {
+    position: relative;
+    z-index: 11;
+  }
+
+  .table-cont {
+    position: relative;
+    z-index: 11;
+  }
 
   .space1 {
-    height: 540px;
+    height: 670px;
   }
 
   .tit-wrap {
+    position: relative;
+    z-index: 11;
     height: 670px;
     display: flex;
-    // align-items: flex-end;
     align-content: flex-end;
     flex-wrap: wrap;
     width: 100%;
 
     .tit {
+      position: relative;
+      z-index: 11;
       width: 100%;
       font-size: 36px;
       font-weight: bold;
@@ -238,6 +267,8 @@
       }
     }
     .tit2 {
+      position: relative;
+      z-index: 11;
       width: 720px;
       margin: 40px auto 0;
       text-align: center;
@@ -296,6 +327,10 @@
       z-index: 11;
     }
 
+    &-wrap {
+      position: relative;
+    }
+
     &-cont {
       min-height: 384px;
       margin: 0 auto 0;
@@ -527,6 +562,7 @@
           }
         }
       }
+    }
 
     .arrow {
       position: absolute;
@@ -546,7 +582,6 @@
       right: -64px;
     }
   }
-  }
 
   // 只有一个tab时候
   .table-1 {

@@ -8,9 +8,8 @@
     <input type="password" style="display: none;" />
     <div class="banner-contaner">
       <!-- banner 轮播 -->
-
       <div class="banner banner-pc">
-        <swiper :options="swiperOption">
+        <swiper :options="swiperOption" ref="bannerSwiper">
           <swiper-slide v-for="(item, index) in bannerList" :key="index">
             <img class="banner-img" :src="item.pcBannerUrl" />
             <div class="btn-wrap">
@@ -42,7 +41,7 @@
 
     <!-- 导航菜单切换 -->
     <div class="nav-tab">
-      <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>
+      <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>
       <!-- <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> -->
 
     </div>
@@ -77,15 +76,21 @@
     </div>
 
     <!-- 线上报价 -->
-    <div class="quote" :style="'background-image: url(' + curTab.pageMidImage + ');'">
-      <!-- <div class="space1"></div> -->
+    <div class="quote">
+      <swiper :options="swiperOption" ref="quoteBgSwiper" class="quote-bg-swiper">
+        <swiper-slide v-for="(item, index) in dataList" :key="index">
+          <div class="ebg" :style="'background-image: url(' + item.pageMidImage + ');'"></div>
           <div class="tit-wrap">
             <div class="tit">{{curTab.pageMidTitle}}</div>
             <div class="tit2">
               {{curTab.pageMidDescribe}}
             </div>
           </div>
+        </swiper-slide>
+      </swiper>
 
+      <div class="space1"></div>
+      <div class="quote-cont">
         <!-- tab表格 -->
         <div class="table" :class="{'table-1':dataList.length<=1}">
           <div class="table-tab">
@@ -98,13 +103,12 @@
 							';width: '+(index == 0 ? 'calc(100% / ' +	dataList.length +	')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' +	(dataList.length - index) +	''">{{ item.name }}</div>
           </div>
           <div class="linear"></div>
+          <div class="table-wrap">
+            <swiper :options="swiperOption" ref="quoteSwiper" class="quote-swiper">
+              <swiper-slide v-for="(item, index) in dataList" :key="index">
                 <div class="table-cont">
-
                   <div class="panel panel-left">
-            <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
-            <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
                     <div class="desc">
-
                       <div class="desc-item" v-for="item in curTab.describeList" :key="item.id">
                         {{ item }}
                       </div>
@@ -181,10 +185,6 @@
                           <div class="form-item">
                             <div class="label">繳費選項</div>
                             <div class="val val2">
-                      <!-- <div class="item">每年</div>
-                      <div class="item">每半年</div>
-                      <div class="item">每季度</div>
-                      <div class="item">每月</div> -->
                               <div @click="onSelectPaymentOptionHandler(item)" class="item" :class="{'item-act':curPaymentOption.v==item.v}" v-for="item in paymentOptionList" :key="item.id">
                                 {{ item.n }}
                               </div>
@@ -205,7 +205,15 @@
                     </div>
 
                   </div>
+
+                </div>
+              </swiper-slide>
+            </swiper>
+
+            <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
+            <div @click="onNextTabHandler()" class="arrow arrow-right"></div>
           </div>
+
         </div>
         <div @click="onQuoteHandler" class="quote-btn">{{$t('index.quote.quote')}}</div>
         <div class="customer-service">
@@ -213,6 +221,7 @@
           <span @click="toContactUs" class="udl pointer">{{$t('index.quote.service')}}</span>
         </div>
       </div>
+    </div>
 
     <!-- 联系我们表单 -->
     <div class="contact">