Project_yhfu/src/components/v-header.vue

<template>
	<!--头部-->
	<div class="header">
		<Clock></Clock>
		<!--中间LOGO -->
		<a class="title" href="/integrated/index" >
			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-left2.png" /> -->
			<h3><img class="logo" src="@/assets/images/integrated/logo-small.png" />四平市态势感知平台 {{titlename}}
			</h3>
			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-right2.png" /> -->
		</a>
		
		<!--中间导航-->
		<div class="bignav">
			<img src="@/assets/images/integrated/bigdata-header-nav-left2.png" />
			<router-link v-for="(navbar,index) in navbar" :key="index+'1'" :to="navbar.path"  class="bignav-list"
				exact>
				<a>{{navbar.meta.title}}</a>
			</router-link>
			<img src="@/assets/images/integrated/bigdata-header-nav-right2.png" />
		</div>
		<!-- 右侧5个中心 -->
		<VfastMenu></VfastMenu>
	</div>
</template>

<script>
	import {constantRoutes} from '@/router/index'//navbar导航引用了router路由的数组
	import Clock from '@/components/clock.vue' // 时钟+天气
	import VfastMenu from '@/components/v-fastmenu.vue' // 头部右侧菜单
	export default{
		components:{
			VfastMenu,
			Clock
			
		},
		created(){
			this.navbar
		},
		data(){
			return{
				
			}
		},
		methods:{
		},
		computed:{
			titlename(){
				return this.$route.meta.title
			},
			//导航菜单
			navbar(){
				return constantRoutes.slice(1)
			},
		},
		
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
	.header {
		width: 100%;
		background: #a7ec12;
		background: url(../assets/images/visual/header.png) no-repeat center center;
		background-size: cover;
		height: 4rem;
		display: flex;
		align-items: center;
		z-index: 1000;
		position: absolute;
		top: 0;
	
		.title {
			display: flex;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
	
			h3 {
				display: flex;
				align-items: center;
				text-align: center;
				color: $white;
				font-size: 1.8rem;
				font-family: $fontFk;
	
				img {
					margin-right: .5rem;
				}
			}
		}
	
		.bignav {
			height: 40px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 3.9rem;
			z-index: 1000;
			border-radius: 5px;
			display: flex;
			justify-content: cetner;
			align-items: center;
	
			.bignav-list {
				background: url(../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
				float: left;
				display: flex;
				justify-content: cetner;
				align-items: center;
				color: $fListTitle;	
				height: 40px;
				font-size: 12px;
				padding: 0 23px;
				cursor: pointer;
				-webkit-transform: translateY(0);
				transform: translateY(0);
				transition: all 0.3s ease-in-out;
			}
	
			.router-link-active,
			.bignav-list:hover {
				filter: brightness(2.3);
				-webkit-transform: translateY(-1px);
				transform: translateY(-1px);
				color: $inBlueHover;
				border-bottom: 1px solid $inBlueHover;
				transition: all 0.3s ease-in-out;
	
			}
		}
	
	}
</style>