3368a543 by simon

nav分段样式

1 parent 79d71512
......@@ -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;
}
}
......@@ -251,11 +262,11 @@
margin-left: -120px;
&:first-child{
margin-left: 0 ;
&: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="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 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>
<!-- 推荐 为什么选择平安人寿 -->
......