Skip to content

T
tl_estate
Commit fbc7394e authored by xishifeng's avatar xishifeng
Browse files
Options

商学院优化

parent 55d9b61e
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 46 deletions
public/appnew/src/components/businessCollege/articleList.vue
View file @ fbc7394e
...@@ -3,10 +3,12 @@ ...@@ -3,10 +3,12 @@
<header-pulic :data="headerData"></header-pulic> <header-pulic :data="headerData"></header-pulic>
<nav> <nav>
<div class="nav-main"> <div class="nav-main">
<ul class="oh" :style="'width: '+ulWid+'rem'"> <ul class="oh">
<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> <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> </ul>
<div class="nav-bg-right"></div>
</div> </div>
<div class="nav-seat"></div> <div class="nav-seat"></div>
</nav> </nav>
...@@ -57,22 +59,24 @@ ...@@ -57,22 +59,24 @@
return { return {
headerData: { headerData: {
'title': '商学院', 'title': '商学院',
'noborder': true, 'noborder': false,
'isBack': false 'isBack': false
}, },
token: _token, token: _token,
ulWid: 6.9,
pageSize: 10, pageSize: 10,
initTabNumMain: 0, initTabNumMain: 0,
isLoading: false,//是否正在加载 isLoading: false,//是否正在加载
mainData: [{ mainData: [{
'dataList': [], 'dataList': [],
'id': 0,
'page': 1,//页码 'page': 1,//页码
'isLoadOnce': false,//是否请求过一次数据 'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕 'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': false,//是否是无数据 'noDataFlag': false,//是否是无数据
'labelName': '全部' 'label': {
'icon': 'icon_all@2x.png',
'id': 0,
'label_name': '全部'
}
}] }]
} }
}, },
...@@ -94,6 +98,12 @@ ...@@ -94,6 +98,12 @@
}); });
}, },
methods: { 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() { loadMain() {
let _this = this; let _this = this;
_this.token = localStorage.getItem('token'); _this.token = localStorage.getItem('token');
...@@ -115,29 +125,24 @@ ...@@ -115,29 +125,24 @@
url: '/broker/getNewsLabel', url: '/broker/getNewsLabel',
responseType: 'json', responseType: 'json',
data: { data: {
'AuthToken': _this.token, 'AuthToken': _this.token
} }
}) })
.then(function(response) { .then(function(response) {
if(response.data.code == 200) { if(response.data.code == 200) {
let _data = response.data.data; let _data = response.data.data;
let _len = _data.length;//标签个数 let _len = _data.length;//标签个数
let _txtLen = 0;//记录总字数
for(let i = 0;i<_len;i++){ for(let i = 0;i<_len;i++){
_this.mainData.push({ _this.mainData.push({
'isLoadOnce': false, 'isLoadOnce': false,
'dataList': [], 'dataList': [],
'id': _data[i].id,
'page': 1,//页码 'page': 1,//页码
'isLoadOnce': false,//是否请求过一次数据 'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕 'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': 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(); fn && fn();
} else { } else {
layer.tipsX(response.data.msg); layer.tipsX(response.data.msg);
...@@ -195,56 +200,48 @@ ...@@ -195,56 +200,48 @@
<style scoped> <style scoped>
nav{ nav{
width: 7.5rem; width: 7.5rem;
margin-bottom: .2rem;
} }
nav>.nav-main { nav>.nav-main {
background-color: white; background-color: white;
width: 6.9rem;
height: .9rem;
line-height: .9rem;
padding: 0 .3rem;
border-bottom: 1px solid #eee;
position: fixed; position: fixed;
left: 0; left: 0;
top: .88rem; top: .88rem;
overflow-x: scroll; overflow-x: scroll;
} }
nav>.nav-main>ul{ 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 { nav>.nav-seat {
height: .9rem; height: calc(1.66*3rem);
} }
nav>.nav-main>ul>li { nav>.nav-main>ul>li {
float: left; width: 25%;
height: 1.66rem;
font-size: .28rem; font-size: .28rem;
text-align: center; text-align: center;
color: #4c4c4c; color: #4c4c4c;
padding: 0 .15rem; flex-direction: column;
/*width: 1.8rem;*/ justify-content: center;
border-bottom: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
} }
nav>.nav-main>ul>li:nth-of-type(4n){
nav>.nav-main>ul>li.active { border-right: none;
color: rgb(255, 148, 25); }
position: relative; 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 { nav>.nav-main>ul>li.active {
content: ''; background-color: #f7f7f7;
position: absolute;
left: 50%;
bottom: 0;
width: .4rem;
margin-left: -.2rem;
height: .06rem;
border-radius: .03rem;
background-color: rgb(255, 161, 50);
} }
</style> </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