tab宽度计算兼容

@@ -110,32 +110,38 @@ export default {
 			let result = {};
 			let mar = 0; // 两边缩进
 			let ind = 0; // 缩进简介
+			let wid = 0;
 			let dataList = this.dataList;
 			let len = dataList.length;
 			switch (len) {
 				case 1:
 					mar = 100;
 					ind = 0;
+					wid = 1200;
 					break;
 
 				case 2:
 					mar = 60;
 					ind = 120;
+					wid = 600;
 					break;
 
 				case 3:
 					mar = 30;
 					ind = 60;
+					wid = 400;
 					break;
 
 				case 4:
 					mar = 20;
 					ind = 40;
+					wid = 300;
 					break;
 
 				case 5:
 					mar = 15;
 					ind = 30;
+					wid = 240;
 					break;
 
 				default:
@@ -143,11 +149,18 @@ export default {
 			}
 			result = {
 				mar,
-				ind
+				ind,
+				wid
 			};
-			// console.log("result:", result);
+			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:

@@ -226,16 +226,16 @@
   }
 
   .table {
-    width: 1200px;
+    // width: 1200px;
+    width: 1062px;
+    // background-color: wheat;
 
     margin: 56px auto 0;
     &-tab {
       position: relative;
       width: 100%;
       display: flex;
-      justify-content: center;
-      margin-left: 2px;
-      margin: 0 auto;
+      justify-content: space-between;
       &-item {
         background-image: url("~@/assets/images/index/index-tab.png");
 
@@ -247,7 +247,17 @@
         font-weight: bold;
         cursor: pointer;
 
-        // filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
+        filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
+       
+        margin-left: -120px; 
+
+        &:first-child{
+          margin-left: 0 ;
+        }
+
+        &:last-child{
+          filter: none;
+        }
 
         &-act {
           background-image: url("~@/assets/images/index/index-tab-act.png");

@@ -82,11 +82,16 @@
       <!-- tab表格 -->
       <div class="table" :class="{'table-1':dataList.length<=1}">
         <div class="table-tab">
-          <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="
+          <!-- <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="
 							'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' +	dataList.length +	');z-index:' +	(dataList.length - index) +	''">{{ item.name }}</div>
+        </div> -->
+          <!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
+        <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> -->
+          <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="
+							';width: '+(index == 0 ? 'calc(100% / ' +	dataList.length +	')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' +	(dataList.length - index) +	''">{{ item.name }}</div>
         </div>
-        <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
-        <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'">
+        <div class="linear"></div>
+        <div class="table-cont">
 
           <div class="panel panel-left">
             <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>