fx66/src/components/header-nav.vue

<template>
  <div class="header-nav" :class="{'scroll':isscroll}">
    <div class="nav-content">
    	<div class="logo">
    		<img src="../assets/img/mainLogo.png" v-show='!isscroll'>
    		<img src="../assets/img/logo2.png" v-show='isscroll'>
    	</div>
			<ul class="nav-line clearfix">
				<li v-on:click='cut("/")' :class="{'active':'/'==isActive}"><span>首页</span></li>
				<li v-on:click='cut("/apply")' :class="{'active':'/apply'==isActive}">
					<span>申请经纪商</span>
					<i class="badge">HOT</i>
				</li>
			</ul>
			<div class="usermsg" v-show="username!=''">
				<div class="item" :class="{'scroll':isscroll}">
					<i class="iconfont icon-user"></i>
					<span>{{username}}</span>
				</div>
				<div class="item" :class="{'scroll':isscroll}">
					<i class="iconfont icon-tuichu"></i>
					<span @click="quit()">退出</span>
				</div>
			</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'header-nav',
  data () {
    return {
      isActive:'/',
      isscroll:false
    }
  },
  props:['username'],
  methods:{
  	cut(e){
  		if (!window.localStorage.username) {
  			alert('请先登陆')
  		}else{
  			this.$router.push(e)
  			this.isActive=e
  		}
  	},
  	scrollFunc(){
  		let t = document.documentElement.scrollTop || document.body.scrollTop
  		if (t===0&&this.$route.path=='/') {
  			this.isscroll=false
  		}else {
  			this.isscroll=true
  		}
  	},
  	quit(){
  		window.localStorage.clear()
  		this.$router.push('/')
  		this.$emit('quit')
  		this.isActive='/'
  	}
  },
  mounted(){
  		window.addEventListener('scroll',this.scrollFunc,false)
  		this.isActive=this.$route.path
  },
  updated(){
  	this.scrollFunc()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.header-nav{
		width: 100%;
		height: 75px;
		background-color: rgba(0, 0, 0, .2);
		position: fixed;
		top: 0;
		z-index: 999;
		.nav-content{
			width: 1200px;
			margin: 0 auto;
			height: 100%;
			display: flex;
			justify-content: space-between;
			.logo{
				height: 100%;
				line-height: 75px;
				width: 98px;
				float: left;
				margin-right: 55px;
				display: flex;
				align-items: center;
				img{
					height: 33px;
				}
			}
			.nav-line{
				flex-grow: 1;
				li{
					float: left;
					width: 118px;
					height: 75px;
					font-size: 14px;
					line-height: 75px;
					text-align: center;
					color: #fff;
					&.active{
						background: white;
						color: #1a6fa6;
					}
					.badge{
						background: #ff4e00;
						color: #fff;
						display: block;
						width: 38px;
						height: 18px;
						line-height: 18px;
						font-size: 12px;
						border-radius: 2px;
						position: absolute;
						top: 8px;
						right: 0;
					}
					.badge::after{
						content: '';
						position: absolute;
						width: 0;
						height: 0;
						left: 30%;
						bottom: 0;
						border-left: 5px solid transparent;
						border-right: 5px solid transparent;
						border-top: 14px solid #ff4e00;
						margin-bottom: -8px;
						transform: rotate(30deg);
						z-index: -1;
					}
				}
				li:nth-child(2){
					position: relative;
				}
			}
			.usermsg{
				float: right;
				color: white;
				line-height: 72px;
				.item{
					float: left;
					font-size: 14px;
					cursor: pointer;
				}
				.item:nth-child(1){
					margin-right: 25px;
				}
			}
		}
	}
	.scroll{
		background-color: white;
		color: #333;
	}
	.scroll .nav-line li.active{
		color: #fff!important;
		background-color: #1a6fa6!important;
	}
	.scroll .nav-line li{
		color: #333!important;
	}
</style>