college/components/pcNav/pcNav.vue

<template>
	<view>
		<view class="nav">
			<view class="navCont">
				<view class="logo">
					<image src="../../static/pcimg/nav_logo@2x.png" mode="" class="logoImg"></image>
				</view>
				<view class="navTitle">门店学院</view>
				<view class="indexNav">首页</view>
				<view class="allCategory">
					<view class="allCategoryLine" v-for="(item,index) in allCategory" v-if="index<4">{{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" v-show="navMoret">
					 	<view class="navMoreTline" v-for="(item,index) in allCategory" v-if="index>3">{{item.name}}</view>
					 </view>
					
					</view>
					
				</view>
				<view class="navSs">
					<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() {
			return {
				allCategory:[],
				navMoret:false,
			};
		},
		onLoad() {
			 
		},
		created(){
			this.getallCategory();
		},
		methods:{
			getallCategory(){
				this.$http('/trainingOpenApi/allCategory', {}, 'GET').then(res => {
					this.allCategory = res.data
				})
			},
			moreBtn(){
				this.navMoret=!this.navMoret
			},
		}
	}
</script>

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