Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
3368a543 by simon
Options

nav分段样式

1 parent 79d71512
Inline Side-by-side
Showing 3 changed files with 34 additions and 50 deletions
...@@ -39,33 +39,6 @@ export default { ...@@ -39,33 +39,6 @@ export default {
39 bannerCandidateList: [], 39 bannerCandidateList: [],
40 40
41 // 导航菜单 41 // 导航菜单
42 // dataList: [
43 // {
44 // name: "平安“好e時”<br>自願醫保標準計劃",
45 // url: "",
46 // index: 0
47 // },
48 // {
49 // name: "「平安 ‧ 傳家福<br>分紅終身壽險計劃",
50 // url: "",
51 // index: 1
52 // },
53 // {
54 // name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
55 // url: "",
56 // index: 2
57 // },
58 // {
59 // name: "Ping An GenRich<br>Insurance Plan",
60 // url: "",
61 // index: 3
62 // },
63 // {
64 // name: "Ping An 'Pro Easy'<br>VHIS Standard Plan",
65 // url: "",
66 // index: 4
67 // }
68 // ],
69 curTab: {}, 42 curTab: {},
70 43
71 // 投保 44 // 投保
...@@ -110,7 +83,7 @@ export default { ...@@ -110,7 +83,7 @@ export default {
110 let result = {}; 83 let result = {};
111 let mar = 0; // 两边缩进 84 let mar = 0; // 两边缩进
112 let ind = 0; // 缩进简介 85 let ind = 0; // 缩进简介
113 let wid = 0; 86 let wid = 240;
114 let dataList = this.dataList; 87 let dataList = this.dataList;
115 let len = dataList.length; 88 let len = dataList.length;
116 switch (len) { 89 switch (len) {
...@@ -152,23 +125,10 @@ export default { ...@@ -152,23 +125,10 @@ export default {
152 ind, 125 ind,
153 wid 126 wid
154 }; 127 };
155 console.log("result:", result);
156 return result; 128 return result;
157 }, 129 },
158 // tabClassObject() {
159 // return {
160 // active: this.isActive && !this.error,
161 // 'text-danger': this.error && this.error.type === 'fatal'
162 // }
163 // }
164 // tableTapOpt(){
165 // let result = {
166 // width:
167 // }
168 // },
169 }, 130 },
170 methods: { 131 methods: {
171
172 // fetchBanner() { 132 // fetchBanner() {
173 // return new Promise((resolve, reject) => { 133 // return new Promise((resolve, reject) => {
174 // httpPost({ 134 // httpPost({
...@@ -275,7 +235,6 @@ export default { ...@@ -275,7 +235,6 @@ export default {
275 sid: true 235 sid: true
276 }).then((result) => { 236 }).then((result) => {
277 this.dataList = []; 237 this.dataList = [];
278 // console.log("11111");
279 result.forEach(element => { 238 result.forEach(element => {
280 let content = JSON.parse(element.content); 239 let content = JSON.parse(element.content);
281 let item = {} 240 let item = {}
...@@ -292,6 +251,12 @@ export default { ...@@ -292,6 +251,12 @@ export default {
292 } 251 }
293 this.dataList.push(item); 252 this.dataList.push(item);
294 }); 253 });
254
255 // 增加一个tap
256 // this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
257 // this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
258 // this.dataList.push(JSON.parse(JSON.stringify(this.dataList[0])));
259
295 this.dataList.forEach((element, idx) => { 260 this.dataList.forEach((element, idx) => {
296 element.index = idx; 261 element.index = idx;
297 element.describeList = element.describe.split("\n"); 262 element.describeList = element.describe.split("\n");
......
...@@ -104,23 +104,34 @@ ...@@ -104,23 +104,34 @@
104 .nav-tab { 104 .nav-tab {
105 min-height: 100px; 105 min-height: 100px;
106 display: flex; 106 display: flex;
107 justify-content: center;
107 font-size: 22px; 108 font-size: 22px;
108 text-align: center; 109 text-align: center;
109 font-weight: bold; 110 font-weight: bold;
110 color: $cOrange2; 111 color: $cOrange2;
111 112
112 max-width: 1200px; 113 // max-width: 1200px;
114 width: 100%;
113 margin: 0 auto; 115 margin: 0 auto;
114 116
115 &-item { 117 &-item {
118 @extend .bb;
116 @extend .fcc; 119 @extend .fcc;
117 border-right: solid 2px #ffffff; 120 border-right: solid 2px #ffffff;
118 cursor: pointer; 121 cursor: pointer;
119 color: #ff6839; 122 color: $cOrange2;
120 background-color: #fff1ed; 123 background-color: #fff1ed;
124 padding: 12px 30px;
121 125
122 &:last-child { 126 &:last-child {
123 border-right: none; 127 border-right: none;
128 flex: 1;
129 justify-content: flex-start;
130 }
131
132 &:first-child {
133 flex: 1;
134 justify-content: flex-end;
124 } 135 }
125 } 136 }
126 137
...@@ -251,11 +262,11 @@ ...@@ -251,11 +262,11 @@
251 262
252 margin-left: -120px; 263 margin-left: -120px;
253 264
254 &:first-child{ 265 &:first-child {
255 margin-left: 0 ; 266 margin-left: 0;
256 } 267 }
257 268
258 &:last-child{ 269 &:last-child {
259 filter: none; 270 filter: none;
260 } 271 }
261 272
...@@ -613,6 +624,12 @@ ...@@ -613,6 +624,12 @@
613 width: 100% !important; 624 width: 100% !important;
614 border-right: none; 625 border-right: none;
615 border-bottom: solid 2px #ffffff; 626 border-bottom: solid 2px #ffffff;
627 &:first-child{
628 justify-content: center;
629 }
630 &:last-child{
631 justify-content: center;
632 }
616 } 633 }
617 } 634 }
618 635
...@@ -649,6 +666,7 @@ ...@@ -649,6 +666,7 @@
649 .nav-tab { 666 .nav-tab {
650 font-size: $fontSize-M2; 667 font-size: $fontSize-M2;
651 &-item { 668 &-item {
669
652 } 670 }
653 } 671 }
654 672
......
...@@ -35,11 +35,12 @@ ...@@ -35,11 +35,12 @@
35 <!-- <div class="swiper-button-prev" slot="button-prev"></div> 35 <!-- <div class="swiper-button-prev" slot="button-prev"></div>
36 <div class="swiper-button-next" slot="button-next"></div>--> 36 <div class="swiper-button-next" slot="button-next"></div>-->
37 </div> 37 </div>
38
38 <!-- 导航菜单切换 --> 39 <!-- 导航菜单切换 -->
40 <div class="nav-tab">
41 <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>
42 <!-- <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> -->
39 43
40 <div class="gird-g nav-tab">
41 <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>
42 <!-- <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> -->
43 </div> 44 </div>
44 45
45 <!-- 推荐 为什么选择平安人寿 --> 46 <!-- 推荐 为什么选择平安人寿 -->
......