college/components/pcNav/pcNav.vue

<template>
	<view>
		<view class="nav">
			<view class="navCont">
				<view class="logo">
					<image :src="info.logo" mode="" class="logoImg"></image>
				</view>
				<view class="navTitle">{{info.title}}</view>
				<view class="indexNav" :class="{'indexActive':data=='index'}" @click="goIndex">首页</view>
				<view class="allCategory">
					<view class="allCategoryLine" :class="{'indexActive':itemName==item.name}" v-for="(item,index) in allCategory" v-if="index<5" @click="goItem(item)">{{item.name}}</view>
				    <view class="allCategoryMore" v-if="allCategory.length>1">
					 <span @click="moreBtn">更多</span> 
					 <image @click="moreBtn" src="../../static/pcimg/icon_arrow_xia@2x.png" mode="widthFix" class="navmoreImg"></image>
					 <view class="navMoret" >
					 	<view class="navMoreTline" v-for="(item,index) in allCategory" v-if="index>4" @click="goItem(item)">{{item.name}}</view>
					 </view>
					
					</view>
					
				</view>
				<view class="navSs" @click="gosearchlist">
					<image src="../../static/pcimg/icon_search@2x.png" mode="widthFix" class="navSsimg"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "searchBox",
		props: ['data','itemName'],
		data() {
			return {
				allCategory:[],
				navMoret:false,
				info:'',
			};
		},
		onLoad() {
			 
		},
		created(){
			this.getallCategory();
			this.getInfo()
		},
		methods:{
			gosearchlist(){
				uni.navigateTo({
					url:'../../pages/pc/searchlist'
				})
			},
			goItem(item){
				console.log(item)
				uni.navigateTo({
					url:'list?code='+item.code+'&topName='+item.name+'&comment='+item.comment
				})
			},
			getInfo(){
				this.$http('/trainingOpenApi/getInfo', {}, 'GET').then(res => {
					this.info = res.data
				})
			},
			goIndex(){
				uni.navigateTo({
					url:'../../pages/pc/index'
				})
			},
			getallCategory(){
				this.$http('/trainingOpenApi/allCategory', {}, 'GET').then(res => {
					this.allCategory = res.data
				})
			},
			moreBtn(){
				this.navMoret=!this.navMoret
			},
		}
	}
</script>

<style scoped>
	.nav{
		width: 100%;
		height: 72rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(153, 153, 153, 0.12);
		display: flex;
		justify-content: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11;
	}
	.navCont{
		width: 1200rpx;
		display: flex;
		position: relative;
	}
	.logoImg{
		width: 77rpx;
		height: 36rpx;
		margin-top: 19rpx;
	}
	.navTitle{
		line-height: 72rpx;
		font-weight: 500;
		color: #3C3C3C;
		font-size: 22rpx;
		padding-left: 24rpx;
	}
	.indexNav{
		line-height: 72rpx;
		font-weight: 500;
		color: #3C3C3C;
		font-size: 20rpx;
		padding-left: 54rpx;
		cursor: pointer;
	}
	.indexActive{
		color: #FF4F00 !important;
	}
	.allCategory{
		display: flex;
		line-height: 72rpx;
	}
	.allCategoryLine{
		padding-left: 44rpx;
		color: #3C3C3C;
		font-size: 18rpx;
		cursor: pointer;
	}
	.allCategoryMore{
		padding-left: 44rpx;
		color: #3C3C3C;
		font-size: 18rpx;
		display: flex;
		cursor: pointer;
		position: relative;
	}
	.navMoret{
		position: absolute;
		width: 130rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(153, 153, 153, 0.12);
		border-radius: 6rpx;
		top: 72rpx;
		left:0 ;
		font-size: 18rpx;
		 display: none; 
	}
	.allCategoryMore:hover .navMoret{
		display: block;
	}
	.navMoreTline{
		width: 130rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 60rpx;
	}
	.navmoreImg{
		width: 12rpx;
		height: 8rpx;
		margin-top: 32rpx;
		margin-left: 10rpx;
	}
	.navSsimg{
		width: 24rpx;
		height: 24rpx;
	}
	.navSs{
		position: absolute;
		cursor: pointer;
		top:24rpx;
		right: 0;
	}
</style>