tougao_web/src/components/common/Lead.vue

<template>
	<div class="header">
		<div>
			<div class="logo">
				<img src="../../assets/img/bit_bug.png" alt="" style="width: 80px;margin-right: 10px;">
			</div>
			<div class="group">
				Window for manucripts <br />of Traditional Medicine Research
			</div>
			<div class="header-right">
				<div style="font-size: 18px;text-align: right;">
					<!-- <span style="color:#1c66c0" v-if="this.link_path == '/managing'">Chief editor</span>
					<span style="color:#e26a2d" v-if="this.link_path == '/editorial'">Editorial board</span>
					<span style="color:#4640c4" v-if="this.link_path == '/peerewer'">Reviewer</span>
					<span style="color:#cc3646" v-if="this.link_path == '/youthed'">Youth editorial board</span> -->
					<span v-if="this.link_path == '/managing' || this.link_path == '/man_text' || this.link_path == '/man_report'">Editor-in-Chief :</span>
					<span v-if="this.link_path == '/editorial' || this.link_path == '/edit_text' || this.link_path == '/edit_report'">Editorial board member :</span>
					<span v-if="this.link_path == '/peerewer' || this.link_path == '/per_text'">Reviewer :</span>
					<span v-if="this.link_path == '/youthed' || this.link_path == '/you_text' || this.link_path == '/you_taxt'">Young scientist member :</span>
					<b style="margin-left: 5px;">{{user_name}}</b>
				</div>
				<div class="header-user-con">
					<!-- 身份切换 -->
					<el-dropdown class="link_role" trigger="click">
						<span>
							View as :
							<span v-if="this.link_path == '/managing' || this.link_path == '/man_text' || this.link_path == '/man_report'">Editor-in-Chief</span>
							<span v-if="this.link_path == '/editorial' || this.link_path == '/edit_text' || this.link_path == '/edit_report'">Editorial board member</span>
							<span v-if="this.link_path == '/peerewer' || this.link_path == '/per_text'">Reviewer</span>
							<span v-if="this.link_path == '/youthed' || this.link_path == '/you_text' || this.link_path == '/you_taxt'">Young scientist member</span>
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu :default-active="onRoutes" router slot="dropdown">
							<router-link :to="{path:'/dashboard'}">
								<el-dropdown-item>Author</el-dropdown-item>
							</router-link>
							<router-link :to="{path:'/managing'}" v-if="this.user_cap.includes('chief')">
								<el-dropdown-item>Editor-in-Chief</el-dropdown-item>
							</router-link>
							<router-link :to="{path:'/editorial'}" v-if="this.user_cap.includes(',board')">
								<el-dropdown-item>Editorial board member</el-dropdown-item>
							</router-link>
							<router-link :to="{path:'/peerewer'}" v-if="this.user_cap.includes('reviewer')">
								<el-dropdown-item>Reviewer</el-dropdown-item>
							</router-link>
							<router-link :to="{path:'/youthed'}" v-if="this.user_cap.includes('yboard')">
								<el-dropdown-item>Young scientist member</el-dropdown-item>
							</router-link>
						</el-dropdown-menu>
					</el-dropdown>

				</div>

				<div>


				</div>
			</div>
			<br clear="both">
		</div>
	</div>

</template>
<script>
	import bus from '../common/bus';
	export default {
		data() {
			return {
				name: 'linxin',
				query: {
					user_id: localStorage.getItem('U_id')
				},
				link_path: '',
				user_name: localStorage.getItem('U_relname'),
				user_cap: localStorage.getItem('U_role'),
				cate_role: []

			};
		},
		computed: {
			username() {
				let username = localStorage.getItem('U_name');
				return username ? username : this.name;
			},
			onRoutes() {
				0
				return this.$route.path.replace('/', '');
			}
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				
			}
		},
		mounted() {},
		watch: {
			$route: {
				handler: function(route) {
					this.link_path = route.path
				},
				immediate: true
			}
		}
	};
</script>
<style scoped>
	.header {
		box-sizing: border-box;
		width: 100%;
		height: 100px;
		font-size: 22px;
		color: #333;
		border-bottom: 1px solid #000;
		background-color: #fff !important;
		margin-bottom: 15px;
		position: fixed;
		z-index: 10;
	}

	.header>div {
		position: relative;
		width: 1280px;
		margin: 0 auto;
	}

	.collapse-btn {
		float: left;
		padding: 0 21px;
		cursor: pointer;
		line-height: 70px;
	}

	.header .logo {
		line-height: 70px;
		height: 52px;
		float: left;
	}

	.header .logo i {
		margin-right: 10px;
	}

	.header .group {
		float: left;
		position: absolute;
		text-align: center;
		line-height: 30px;
		font-weight: bolder;
		left: 50%;
		top: 15px;
		margin-left: -171px;
	}

	.header-right {
		float: right;
		margin-top: 20px;
	}

	.header-user-con {
		text-align: right;
	}

	.link_role {
		font-weight: bold;
		align-items: center;
		cursor: pointer;
		/* margin-right: 20px; */
	}

	.user-name {
		margin-right: 20px;
	}

	.el-dropdown-link {
		color: #333;
		cursor: pointer;
	}
</style>