DSDSWeb/src/components/public/Header.vue

<template>
  <header>
	<div id="topnavbar">
		 <div class="logo logo2 cursor">
			<img src="../../../static/images/logo.png" alt="">
		</div>
		<div id="topnanv"  v-show="!collapse || navShow">
			<nav>
				<ul class="content clearfix">
					<li class="dropdown" v-for="(item,index) in menu" :key="index">
						<a href="javascript:void(0);" @click="routerTurn(item.path)">{{item.name}}<img v-show="item.children.length" src="../../../static/images/arrow-down.png" alt=""></a>
						<ul class="sub-menu" v-show="item.children.length">
							<li v-for="(item1,index1) in item.children" :key="index1">
								<a href="javascript:void(0);" @click="routerTurn(item1.path)">{{item1.name}}</a>
							</li>
						</ul>
					</li>
					<li class="dropdown">
						<el-dropdown  trigger="click">
							<span class="el-dropdown-link userClass">
									<a href="javascript:void(0);">admin<img src="../../../static/images/arrow-down.png" alt=""></a>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<a href="javascript:void(0);" @click="routerTurn('personalCenter')">个人中心</a>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>

				</ul>
			</nav>
		</div>
		<div class="menu2" >
			<i class="el-icon-menu" @click="handleMenu"></i>
		</div>
		<div class="fr">
			<i v-if="loginStatuss" class="logOut" @click="loginOut">logOut</i>
		</div>
		<!-- <div class="fr loginReg ovh">
			<div v-if="loginStatuss"FV>
				<span>welcome！</span>
				<el-tooltip v-if="loginStatuss.length>5" :content="loginStatuss" placement="bottom" effect="dark">
					<span class="ellCu">{{ loginStatuss }}</span>
				</el-tooltip>
				<span v-else class="ellCu">
					{{ $store.state.app.cu }}
				</span>
			</div>
			<div v-else class="login cursor" @click="loginIn"> <img src="../../../static/images/形状 1@2x.png" alt=""> LOGIN &nbsp;| &nbsp;REGISTER</div>
		</div>			 -->
	</div>
  </header>
</template>

<script>
import {
  logoutCas
} from '@/utils/logoutCas' // get token from cookie
import {
  removeToken
} from '@/utils/auth' // get token from cookie
export default {
  name: 'headers',
  props: {
    msg: String
  },
  data(){
	  return {
		  collapse:true,
		  loginStatuss: '',
		  menu:[
			  {
				  name:"首页",
				  path:"home",
				  children:[]
			  },
			  {
				  name:"数据检索",
				  path:"",
				  children:[
					  {
						name:"数据检索",
				 		path:"dataSearch",
				  		children:[]
					  },
					   {
						name:"航次详情",
				 		path:"voyagedetail",
				  		children:[]
					  }
				  ]
			  },
			  {
				  name:"统计分析",
				  path:"analyse",
				  children:[]
			  },
			  {
				  name:"数据资源",
				  path:"",
				  children:[
					  {
						name:"海洋地球物理与物理海洋信息库",
				 		path:"physicalIndex",
				  		children:[]
					  },
					   {
						name:"海洋生物样品信息库",
				 		path:"biologyIndex",
				  		children:[]
					  },
					  {
						name:"深海海洋视频音像信息库",
				 		path:"phoneVideoIndex",
				  		children:[]
					  }
				  ]
			  },
			  {
				  name:"数据汇交",
				  path:"voyageDelivery",
				  children:[
					  {
						name:"航次数据汇交",
				 		path:"voyageDelivery",
				  		children:[]
					  },
					   {
						name:"数据样品信息汇交",
				 		path:"sampleRemitt",
				  		children:[]
					  }
				  ]
			  },
			  {
				  name:"字典管理",
				  children:[
					  {
						name:"数据样品类型",
						path:"dataSampleType",
						children:[]
					  },
					  {
						name:"设备类型",
						path:"docType",
						children:[]
					  },
					  {
						name:"平台类型",
						path:"platformType",
						children:[]
					  },
					  {
						name:"参航单位",
						path:"visitorUnit",
						children:[]
					  },
					  {
						name:"共享单位",
						path:"sharedUnit",
						children:[]
					  },
				  ]
			  },
			  {
				  name:"系统管理",
				  children:[
					  {
						name:"用户管理",
						path:"userManage",
						children:[]
					  },
					  {
						name:"角色管理",
						path:"roleManage",
						children:[]
					  },
					  {
						name:"单位管理",
						path:"unitManage",
						children:[]
					  }
				  ]
			  },
			  {
				  name:"关于我们",
				  path:"",
				  children:[]
			  },
			//    {
			// 	  name:"个人中心",
			// 	  path:"personalCenter",
			// 	  children:[]
			//   },
			//   {
			// 	  name:"登录",
			// 	  path:"login",
			// 	  children:[]
			//   },

		  ],
		   nowPathName: '',
		   navShow:false,
	  }
  },
    created() {
		this.loginStatuss = this.$store.state.app.cu
		// this.loginStatuss = 'test_jisjf'

  },
  mounted(){
	$('.dropdown').hover(
			function () {
				$(this).children('.sub-menu').slideDown(200);
			},
			function () {
				$(this).children('.sub-menu').slideUp(200);
			}
	);
	this.changeClass()
	//浏览器的窗口大小发生改变时执行
	window.onresize = () => {
		return (() => {
			this.changeClass();
		})()
	}
	this.nowPathName = this.$route.name

  },
  methods:{
	  //当屏幕小于1400时添加一个属性，大于的时候删除属性
	  changeClass() {
		let ww = document.body.clientWidth;
		if( ww > 1300 ){
			this.navShow=true
		} else{
			this.navShow=false

		}
	  },
	  handleMenu(){
		  this.collapse=!this.collapse
	  },
	  activeMethod(item){
		  if(this.nowPathName==item.path){
			  return 'activeClass'
		  }else{
			  return ''
		  }
	  },
	  routerTurn(name){
		this.nowPathName = name
		if(name!=this.$route.name && name){
		//   debugger
			this.$router.push({name:name})
			this.collapse=true
		}
	  },
	  // 中英文切换
    handleCommand(value) {
      localStorage.setItem('user_lang', value)
      this.$i18n.locale = value// 改变当前语言
      location.reload()
    },
    handleClick() {
      console.log(this.activeName)
    },
    loginIn() {
      window.location.href = process.env.VUE_APP_CAS_LOGIN_FRONT
    },
    loginOut() {
      this.$confirm('Are you sure you want to log out?', 'hint', {
        confirmButtonText: 'Sure',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        removeToken()
        this.loginStatuss = ''
        window.sessionStorage.setItem('cu', '')
        window.sessionStorage.setItem('userID', '')
		logoutCas(process.env.VUE_APP_CAS_LOGOUT_URL_FRONT, true)
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss">
.fr {
    float: right;
}
.loginReg {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-top: 24px;
}
.topic {
    width: 100%;
    height: 50px;
    position: relative;
    background: #1d2a73;
    // padding: 0 20px;
    overflow: hidden;
}
.loginReg .login{
	color:white;

	// text-decoration: underline;
}
.loginReg img{
	width:13px;
	padding-right:10px;
	margin-bottom:-2px;
}
.topic .fr i{
	font-style: normal;
	color:white;
	width: 56px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: #fff;
	margin-top: 9px;
	display: inline-block;
	cursor: pointer;
}
.ellCu{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:40px;

  }
  .loginReg>div{
    display: inline-block;
    width:148px;
  }
  .loginReg>div span{
    float:left;
  }
.el-icon-menu{
	float:right;
	font-size: 20px;
	cursor: pointer;
}
.el-icon-menu:hover{
	color:red;
}
.menu2{
	width:25%;
	display: none;
}

// .menu>li>a
@media (max-width: 1300px){
  .container_a{
		padding-top:0;
	}
	.menu2{
		display: block;
	}
	header{
		position: relative;
	}
	header #topnanv{
		width: 50%;
		margin:0 auto;
		left: 22%;
		top: 90px;
		position: absolute;
		z-index: 45;

		nav>ul{
			background: #253340;
		}
		nav>ul>li{
			text-align: left;
			display: block;
			float:none;
			line-height: 60px;
		}
		nav a{
			margin: -3px 35px;
		}
		nav>ul li>ul{
			width:87%;
			left: 34px;
    		top: 50px;
		}
  }
}
.userClass{
	color:white;
	font-size: 15px;
}


</style>