Project_yhfu/src/components/v-fastmenu.vue

<template>
	<div class="fast-menu">
		<div class="menu-list">
			<!-- 	<a  @click="backToMainPage" class="header-right">
				<span><i class="el-icon-s-home"></i>返回首页</span>
			</a>
			<a  @click="backToMainPage" class="header-right">
				<span><i class="el-icon-monitor"></i>管理端</span>
			</a> -->
			<el-popover placement="top-start" trigger="hover" width="300px">
				<div class="user-tip">
					<div class="u-tip-1">
						<img src="@/assets/images/user-photo.png" />
						<div class="user-info">
							<div class="user-name">
								<h2>张三</h2><span>某某部门</span>
							</div>
							<div class="phone-number">18686688888</div>
						</div>
					</div>
					<div style="margin-bottom: 1rem;">
						<el-button type="primary" size="small">修改密码</el-button>
						<el-button type="warning" size="small">退出登录</el-button>
					</div>
					<a href="#" style="border-top: 1px solid #334780;"><i class="el-icon-s-home"></i>返回首页</a>
					<a href="#"><i class="el-icon-monitor"></i>管理系统</a>
				</div>
				<div slot="reference" style="text-align: center; width:4rem;height:3rem;">
					<img src="@/assets/images/mascot-small.png" />
				</div>
			</el-popover>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				visible: false
				// fastMenu: [{
				// 		name: '返回首页',
				// 		path: '/',
				// 		icon: 'el-icon-s-home',
				// 		// msValue: 1
				// 	},
				// 	{
				// 		name: '管理端',
				// 		path: '/',
				// 		icon: 'sj-icon-rwzx',
				// 		// msValue: 2
				// 	},
				// ],

			}
		},
		methods: {
			backToMainPage() {
				let href = window.location.href
				let protacal = href.substr(0, href.indexOf("://") + 3)
				let mo = href.lastIndexOf(":") > 6 ? href.lastIndexOf(":") : href.lastIndexOf("/")
				let ip = href.substr(href.indexOf("://") + 3, mo);
				let url = href.substr(0, mo)
				let toUrl = url + ":15001/index58"
				window.location.href = toUrl
			},
		},
		computed: {},


	}
</script>

<style rel="stylesheet/scss" lang="scss">
	@import '@/assets/styles/base.scss';

	.user-tip {
		width: 100%;
		display: flex;
		font-size: .8rem;
		flex-direction: column;

		.u-tip-1 {
			display: flex;
			margin-bottom: 1rem;

			img {
				margin-right: 1rem;
				border-radius: .3rem;
			}

			.user-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.user-name {
					display: flex;
					align-items: flex-end;

					h2 {
						color: $inBlue;
						margin-right: .5rem;
						font-weight: bolder;
					}

					span {
						color: $grayBlue;
					}
				}

				.phone-number {
					color: $inBlue;
				}
			}
		}

		a {
			color: $inBlue;
			display: flex;
			border-bottom: 1px solid #334780;
			justify-content: center;
			align-items: center;
			height: 2rem;
			i{
				margin-right:.3rem ;
			}
		}
		a:hover{
			color: $inBlueHover;
			box-shadow:$shadowTip
		}
	}


	.fast-menu {
		right: 0.5rem;
		position: absolute;
		display: flex;

		.menu-list {
			margin-left: 20px;
			display: flex;
			align-items: center;

		}

		.el-badge__content.is-fixed {
			right: 3px;
		}

		.el-badge__content {
			border: 0;
		}


	}
	.el-popover{
		background:#0c1327;
		border:1px solid #334780; 
		box-shadow:$shadowListHover;
		border-radius: 1rem;
	}
</style>