商学院优化

public/appnew/src/components/businessCollege/articleList.vue

@@ -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