Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
79d71512 by simon
Options

tab宽度计算兼容

1 parent 1648c940
Inline Side-by-side
Showing 7 changed files with 39 additions and 11 deletions

14.2 KB | W: | H:

13.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.65 KB | W: | H:

796 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -110,32 +110,38 @@ export default { ...@@ -110,32 +110,38 @@ export default {
110 let result = {}; 110 let result = {};
111 let mar = 0; // 两边缩进 111 let mar = 0; // 两边缩进
112 let ind = 0; // 缩进简介 112 let ind = 0; // 缩进简介
113 let wid = 0;
113 let dataList = this.dataList; 114 let dataList = this.dataList;
114 let len = dataList.length; 115 let len = dataList.length;
115 switch (len) { 116 switch (len) {
116 case 1: 117 case 1:
117 mar = 100; 118 mar = 100;
118 ind = 0; 119 ind = 0;
120 wid = 1200;
119 break; 121 break;
120 122
121 case 2: 123 case 2:
122 mar = 60; 124 mar = 60;
123 ind = 120; 125 ind = 120;
126 wid = 600;
124 break; 127 break;
125 128
126 case 3: 129 case 3:
127 mar = 30; 130 mar = 30;
128 ind = 60; 131 ind = 60;
132 wid = 400;
129 break; 133 break;
130 134
131 case 4: 135 case 4:
132 mar = 20; 136 mar = 20;
133 ind = 40; 137 ind = 40;
138 wid = 300;
134 break; 139 break;
135 140
136 case 5: 141 case 5:
137 mar = 15; 142 mar = 15;
138 ind = 30; 143 ind = 30;
144 wid = 240;
139 break; 145 break;
140 146
141 default: 147 default:
...@@ -143,11 +149,18 @@ export default { ...@@ -143,11 +149,18 @@ export default {
143 } 149 }
144 result = { 150 result = {
145 mar, 151 mar,
146 ind 152 ind,
153 wid
147 }; 154 };
148 // console.log("result:", result); 155 console.log("result:", result);
149 return result; 156 return result;
150 } 157 },
158 // tabClassObject() {
159 // return {
160 // active: this.isActive && !this.error,
161 // 'text-danger': this.error && this.error.type === 'fatal'
162 // }
163 // }
151 // tableTapOpt(){ 164 // tableTapOpt(){
152 // let result = { 165 // let result = {
153 // width: 166 // width:
......
...@@ -226,16 +226,16 @@ ...@@ -226,16 +226,16 @@
226 } 226 }
227 227
228 .table { 228 .table {
229 width: 1200px; 229 // width: 1200px;
230 width: 1062px;
231 // background-color: wheat;
230 232
231 margin: 56px auto 0; 233 margin: 56px auto 0;
232 &-tab { 234 &-tab {
233 position: relative; 235 position: relative;
234 width: 100%; 236 width: 100%;
235 display: flex; 237 display: flex;
236 justify-content: center; 238 justify-content: space-between;
237 margin-left: 2px;
238 margin: 0 auto;
239 &-item { 239 &-item {
240 background-image: url("~@/assets/images/index/index-tab.png"); 240 background-image: url("~@/assets/images/index/index-tab.png");
241 241
...@@ -247,7 +247,17 @@ ...@@ -247,7 +247,17 @@
247 font-weight: bold; 247 font-weight: bold;
248 cursor: pointer; 248 cursor: pointer;
249 249
250 // filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3)); 250 filter: drop-shadow(2px 0px 0px rgba(0, 0, 0, 0.3));
251
252 margin-left: -120px;
253
254 &:first-child{
255 margin-left: 0 ;
256 }
257
258 &:last-child{
259 filter: none;
260 }
251 261
252 &-act { 262 &-act {
253 background-image: url("~@/assets/images/index/index-tab-act.png"); 263 background-image: url("~@/assets/images/index/index-tab-act.png");
......
...@@ -82,11 +82,16 @@ ...@@ -82,11 +82,16 @@
82 <!-- tab表格 --> 82 <!-- tab表格 -->
83 <div class="table" :class="{'table-1':dataList.length<=1}"> 83 <div class="table" :class="{'table-1':dataList.length<=1}">
84 <div class="table-tab"> 84 <div class="table-tab">
85 <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=" 85 <!-- <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="
86 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div> 86 'margin:0 -'+tableTapIndentation.mar+'px;width: calc(100% / ' + dataList.length + ');z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
87 </div> -->
88 <!-- <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div>
89 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> -->
90 <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="
91 ';width: '+(index == 0 ? 'calc(100% / ' + dataList.length + ')' : tableTapIndentation.wid + 'px' ) +' ;z-index:' + (dataList.length - index) + ''">{{ item.name }}</div>
87 </div> 92 </div>
88 <div class="linear" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"></div> 93 <div class="linear"></div>
89 <div class="table-cont" :style="'width: calc(100% - '+tableTapIndentation.ind+'px *' + (dataList.length - 1) + ')'"> 94 <div class="table-cont">
90 95
91 <div class="panel panel-left"> 96 <div class="panel panel-left">
92 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div> 97 <div @click="onPrevTabHandler()" class="arrow arrow-left"></div>
......