fx66/src/views/brokers/nHeader.vue

<template>
	<div class="bheader">
		<div class="bg-topbar">
			<div class="b-bg"></div>
			<div class="b-navbar">
				<div class="left logo"><img src="../../assets/img/logo.png"></div>			
				<router-link to='/home'>
					<div class="left nav-title"><p>首页</p></div>
				</router-link>
				<div class="left nav-title active"><p>申请经纪商</p><i class="hot">HOT</i></div>
				<div class="right" v-show='usertip==2'>	
					<router-link to='/'>
					<div class="nav-log">注册</div>
					</router-link>
					<router-link to='/'>
 					<div class="nav-register">登陆</div>
					</router-link>
				</div>
				<div class="user" v-show='usertip==1'>
					<span><img src="../../../static/img/usericon2.png"><p>{{username}}</p></span>
					<span @click='toLoginOut()'><img src="../../../static/img/logout2.png"><p>退出</p></span>
				</div>	
			</div>
		</div>
	</div>
</template>

<script>
	

	export default{
		data(){
			return{
				username:'',
				usertip:2,
				Authorization:'',
				regshow:2,
			}
		},
		methods:{
			toLoginOut: function(){
				this.axios({
					method: 'get',
     		  url: 'https://dev407.33.cn/api/member/loginout',
     		  headers: {Authorization: this.Authorization}
				}).then((res)=>{
					const result = res.data;
						if(result.code!=200){
							this.$notify({
									title:'提示',
									message: result.message,
									type:'warning',
								})
						}else{
							this.$notify({
								title:'成功',
								message:'退出成功',
								type:'success'
							})
							this.regshow=2;
							this.usertip=2;
							this.username='';
							this.Authorization='';
							sessionStorage.setItem('regshow',this.regshow);
							sessionStorage.setItem('usertip',this.usertip);
							sessionStorage.setItem('username',this.username);
							sessionStorage.setItem('token_code',this.Authorization);
						}
				})
			},
			changemsg: function(){
				this.regshow = sessionStorage.getItem('regshow')? sessionStorage.getItem('regshow'):2;
				this.usertip = sessionStorage.getItem('usertip')? sessionStorage.getItem('usertip'):2;
				this.username = sessionStorage.getItem('username')? sessionStorage.getItem('username'):'';
				this.Authorization = sessionStorage.getItem('token_code')? sessionStorage.getItem('token_code'):'';
			}
		},
		watch:{
			'$route':'changemsg'
		},
		mounted(){
			this.changemsg();
		}
	}
</script>

<style scoped>
.bheader{
	position: relative;
	.bg-topbar{
		z-index: 30;
		position: fixed;
		top: 0;
		width: 100%;
		.b-bg{
			position: absolute;
			width: 100%;
			height: 75px;
			background-color: rgba(255, 255, 255, 1);
			opacity: 1;
		}
		.b-navbar{
			position: relative;
			margin: 0 auto;
			width: 1200px;
			height: 75px;
				.hot{
						position: absolute;
				    background-color: #ff4e00;
				    color: #fff;
				    display: block;
				    width: 38px;
				    height: 18px;
				    line-height: 18px;
				    font-size: 12px;
				    border-radius: 2px;
				    top: 8px;
				    left: 350px;
					}
			.user{
				display: inline;
				float: right;
				margin-top: 25px;
				span{
					float: left;
					cursor: pointer;
					margin-left: 30px;
				}
				p{
					float: right;
					margin-left: 5px;
					font-size: 14px;
				}
				img{
					width: 20px;
				}
			}
			.hot{
					position: absolute;
			    background-color: #ff4e00;
			    color: #fff;
			    display: block;
			    width: 38px;
			    height: 18px;
			    line-height: 18px;
			    font-size: 12px;
			    border-radius: 2px;
			    top: 8px;
			    left: 350px;
				}
			.left{
				float: left;
				line-height: 75px;
				img{
					margin-top: 20px;
				}
				p{
					font-family: MicrosoftYaHei;
					font-size: 14px;
					line-height: 24px;
					color: #333;
					line-height: 75px;
				}
			}
			.right{
				float: right;
				color: #333;
				margin-top: 27px;
			}
			.nav-log{
				float: right;
				height: 17px;
				width: 55px;
				font-size: 14px;
			}
			.nav-register{
				float: right;
				height: 17px;
				width: 55px;
				font-size: 14px;
			}

			.logo{
				margin-right: 55px;
				img{
					width: 98px;
					height: 33px;
				}
			}
			.nav-title{
				width: 118px;
				cursor: pointer;
			}
			.active{
				background: #1a6fa6;
				p{
				color: #fff;
				}
			}
		}
	}
}
</style>