nav分段样式

@@ -39,33 +39,6 @@ export default {
 			bannerCandidateList: [],
 
 			// 导航菜单
-			// dataList: [
-			// 	{
-			// 		name: "平安“好e時”<br>自願醫保標準計劃",
-			// 		url: "",
-			// 		index: 0
-			// 	},
-			// 	{
-			// 		name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
-			// 		url: "",
-			// 		index: 1
-			// 	},
-			// 	{
-			// 		name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
-			// 		url: "",
-			// 		index: 2
-			// 	},
-			// 	{
-			// 		name: "Ping An GenRich<br>Insurance Plan",
-			// 		url: "",
-			// 		index: 3
-			// 	},
-			// 	{
-			// 		name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
-			// 		url: "",
-			// 		index: 4
-			// 	}
-			// ],
 			curTab: {},
 
 			// 投保
@@ -110,7 +83,7 @@ export default {
 			let result = {};
 			let mar = 0; // 两边缩进
 			let ind = 0; // 缩进简介
-			let wid = 0;
+			let wid = 240;
 			let dataList = this.dataList;
 			let len = dataList.length;
 			switch (len) {
@@ -152,23 +125,10 @@ export default {
 				ind,
 				wid
 			};
-			console.log("result:", result);
 			return result;
 		},
-		// tabClassObject() {
-		// 	return {
-		// 		active: this.isActive && !this.error,
-		// 		'text-danger': this.error && this.error.type === 'fatal'
-		// 	}
-		// }
-		// tableTapOpt(){
-		// 	let result = {
-		// 		width:
-		// 	}
-		// },
 	},
 	methods: {
-
 		// fetchBanner() {
 		// 	return new Promise((resolve, reject) => {
 		// 		httpPost({
@@ -275,7 +235,6 @@ export default {
 				sid: true
 			}).then((result) => {
 				this.dataList = [];
-				// console.log("11111");
 				result.forEach(element => {
 					let content = JSON.parse(element.content);
 					let item = {}
@@ -292,6 +251,12 @@ export default {
 					}
 					this.dataList.push(item);
 				});
+
+				// 增加一个tap
+				// this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
+				// this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
+				// this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
+
 				this.dataList.forEach((element, idx) => {
 					element.index = idx;
 					element.describeList = element.describe.split("\n");

@@ -104,23 +104,34 @@
 .nav-tab {
   min-height: 100px;
   display: flex;
+  justify-content: center;
   font-size: 22px;
   text-align: center;
   font-weight: bold;
   color: $cOrange2;
 
-  max-width: 1200px;
+  // max-width: 1200px;
+  width: 100%;
   margin: 0 auto;
 
   &-item {
+    @extend .bb;
     @extend .fcc;
     border-right: solid 2px #ffffff;
     cursor: pointer;
-    color: #ff6839;
+    color: $cOrange2;
     background-color: #fff1ed;
+    padding: 12px 30px;
 
     &:last-child {
       border-right: none;
+      flex: 1;
+      justify-content: flex-start;
+    }
+
+    &:first-child {
+      flex: 1;
+      justify-content: flex-end;
     }
   }
 
@@ -248,14 +259,14 @@
         cursor: pointer;
 
         filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
-       
-        margin-left: -120px; 
 
-        &:first-child{
-          margin-left: 0 ;
+        margin-left: -120px;
+
+        &:first-child {
+          margin-left: 0;
         }
 
-        &:last-child{
+        &:last-child {
           filter: none;
         }
 
@@ -613,6 +624,12 @@
       width: 100% !important;
       border-right: none;
       border-bottom: solid 2px #ffffff;
+      &:first-child{
+        justify-content: center;
+      }
+      &:last-child{
+        justify-content: center;
+      }
     }
   }
 
@@ -649,6 +666,7 @@
   .nav-tab {
     font-size: $fontSize-M2;
     &-item {
+    
     }
   }
 

@@ -35,11 +35,12 @@
       <!-- <div class="swiper-button-prev" slot="button-prev"></div>
       <div class="swiper-button-next" slot="button-next"></div>-->
     </div>
-    <!-- 导航菜单切换 -->
 
-    <div class="gird-g nav-tab">
-      <div class="nav-tab-item" :class="{ 'nav-tab-item-act': item.index == curTab.index }" :style="'width: calc(100% / ' + 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 pure-u-1 pure-u-md-1-5" :class="{ 'nav-tab-item-act': item.index == curTab.index }"  @click="onTabHandler(item)" v-html="item.tabName" v-for="item in dataList" :key="item.id" >{{ item.tabName }}</div> -->
+    <!-- 导航菜单切换 -->
+    <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 }" :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>
 
     <!-- 推荐 为什么选择平安人寿 -->