Project_yhfu/src/components/v-header.vue

<template>
	<!--头部-->
	<div class="header">
		<Clock></Clock>
		<!--中间LOGO -->
		<div class="title">
			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-left2.png" /> -->
			<h3><img class="logo" src="@/assets/images/integrated/logo-small.png" />{{systemTitle.title}} {{titlename}}
			</h3>
			<!-- <img src="@/assets/images/integrated/bigdata-header-nav-right2.png" /> -->
		</div>

		<!--中间导航-->
		<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' // 头部右侧菜单
  import {
    fontConfig
  } from '@/api/login'


	export default{
		components:{
			VfastMenu,
			Clock

		},
		created(){
      this.fontConfig()
      this.navbar
		},
		data(){
			return{
        systemTitle: {
          title: '',  //标题
        },
			}
		},
		methods:{
      fontConfig(){
        fontConfig().then(res => {
          this.systemTitle.title = res.data.fontTitle;
        })
      },
		},
		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: fixed;
		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>