Commit fbc7394e authored by xishifeng's avatar xishifeng

商学院优化

parent 55d9b61e
......@@ -3,10 +3,12 @@
<header-pulic :data="headerData"></header-pulic>
<nav>
<div class="nav-main">
<ul class="oh" :style="'width: '+ulWid+'rem'">
<li v-for="(item, index) in mainData" :key="item.labelName" :data-id="item.id" class="pointer-click-item" :class="{active:index === initTabNumMain}" @click="tabMain(index)">{{item.labelName}}</li>
<ul class="oh">
<li v-for="(item, index) in mainData" :key="item.labelName" :data-id="item.id" class="pointer-click-item fl bsb flex" :class="{active:index === initTabNumMain}" @click="tabMain(index)">
<p><img-error :datasrc="urlImg(item.label.icon)" :imgtype="'div'"></img-error></p>
<p class="flex-center">{{item.label.label_name}}</p>
</li>
</ul>
<div class="nav-bg-right"></div>
</div>
<div class="nav-seat"></div>
</nav>
......@@ -57,22 +59,24 @@
return {
headerData: {
'title': '商学院',
'noborder': true,
'noborder': false,
'isBack': false
},
token: _token,
ulWid: 6.9,
pageSize: 10,
initTabNumMain: 0,
isLoading: false,//是否正在加载
mainData: [{
'dataList': [],
'id': 0,
'page': 1,//页码
'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': false,//是否是无数据
'labelName': '全部'
'label': {
'icon': 'icon_all@2x.png',
'id': 0,
'label_name': '全部'
}
}]
}
},
......@@ -94,6 +98,12 @@
});
},
methods: {
urlImg(u) {
let _this = this;
console.log(_this.common.ServerHost + '/app/images/' +u);
//return _this.common.ServerHost + '/app/images/' +u;
return 'http://c.tonglianjituan.com' + '/app/images/' +u;
},
loadMain() {
let _this = this;
_this.token = localStorage.getItem('token');
......@@ -115,29 +125,24 @@
url: '/broker/getNewsLabel',
responseType: 'json',
data: {
'AuthToken': _this.token,
'AuthToken': _this.token
}
})
.then(function(response) {
if(response.data.code == 200) {
let _data = response.data.data;
let _len = _data.length;//标签个数
let _txtLen = 0;//记录总字数
for(let i = 0;i<_len;i++){
_this.mainData.push({
'isLoadOnce': false,
'dataList': [],
'id': _data[i].id,
'page': 1,//页码
'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': false,//是否是无数据
'labelName': _data[i].label_name
'label': _data[i]
});
_txtLen += _data[i].label_name.length;
};
let _sunLen = (_txtLen+2+_len+1)*0.29;//粗略计算长度,因为有一个全部,多两个字,以及一个标签
_this.ulWid = (_sunLen>_this.ulWid)?_sunLen:_this.ulWid;
fn && fn();
} else {
layer.tipsX(response.data.msg);
......@@ -195,56 +200,48 @@
<style scoped>
nav{
width: 7.5rem;
margin-bottom: .2rem;
}
nav>.nav-main {
background-color: white;
width: 6.9rem;
height: .9rem;
line-height: .9rem;
padding: 0 .3rem;
border-bottom: 1px solid #eee;
position: fixed;
left: 0;
top: .88rem;
overflow-x: scroll;
}
nav>.nav-main>ul{
/*width: 10rem;*/
}
nav>.nav-main>.nav-bg-right{
position: fixed;
right: 0;
top: .88rem;
width: .8rem;
height: .9rem;
background: url(images/img_more@2x.png) repeat-y center center/.8rem .27rem;
}
nav>.nav-seat {
height: .9rem;
height: calc(1.66*3rem);
}
nav>.nav-main>ul>li {
float: left;
width: 25%;
height: 1.66rem;
font-size: .28rem;
text-align: center;
color: #4c4c4c;
padding: 0 .15rem;
/*width: 1.8rem;*/
flex-direction: column;
justify-content: center;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
}
nav>.nav-main>ul>li.active {
color: rgb(255, 148, 25);
position: relative;
nav>.nav-main>ul>li:nth-of-type(4n){
border-right: none;
}
nav>.nav-main>ul>li>p{
/*flex: 1;*/
}
nav>.nav-main>ul>li>p:nth-of-type(1){
height: .46rem;
}
nav>.nav-main>ul>li>p:nth-of-type(1)>img{
width: .46rem;
}
nav>.nav-main>ul>li>p:nth-of-type(2){
color: #4c4c4c;
}
nav>.nav-main>ul>li.active::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: .4rem;
margin-left: -.2rem;
height: .06rem;
border-radius: .03rem;
background-color: rgb(255, 161, 50);
nav>.nav-main>ul>li.active {
background-color: #f7f7f7;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment