pxx-user/src/views/Home.vue

<template>
	<div class="home">
		<el-container class="home-wrapper">
			<!-- 头部 -->
			<el-header class="home-header">
				<div class="home-loge">
					<!-- <el-image
					      style="width: 50px; height: 50px;border-radius: 50%;"
					      :src="userInfo.avatar"></el-image>
					<div class="flex user-ifno">
						<span class="name">{{userInfo.username}}</span>
					</div> -->
				</div>
				<div class="out-wrapper">
					<!-- <el-button type="info" @click="logout">退出</el-button> -->
					<div class="hand u-name" @click="kf">
						客服
					</div>
					<div class="hand u-name" >
						余额：{{userInfo.money}}
					</div>
					<div class="hand u-name">
						{{userInfo.username}}
						<div class="u-ban ">
							<div class="u-wrap">
								<el-image style="width: 40px; height: 40px;border-radius: 50%;"
									:src="userInfo.avatar"></el-image>
								<div class="info">
									用户ID： {{userInfo.id}}
								</div>
								<div class="info">
									用户名： {{userInfo.username}}
								</div>
								<div class="info">
									昵称： {{userInfo.nickname}}
								</div>
								<div class="info">
									余额： {{userInfo.money}}
								</div>
								<el-button @click="logout">退出登录</el-button>
							</div>
							
						</div>
					</div>
				</div>
			</el-header>
			<div class="boddy-wrap">
				<div class="el-menu-wrap ">
					<el-menu active-text-color="#0f83fe" unique-opened :collapse="!isopen" :collapse-transition="false"
						router :default-active="currenIndex">
						<el-submenu v-for="item in menulist" :key="item.id" :index="item.id + ''">
							<template slot="title">
								<i :class="item.icon"></i>
								<span>{{ item.authName }}</span>
							</template>
							<el-menu-item :index="'/' + subItem.path + ''" v-for="subItem in item.children"
								:key="subItem.id">
								<template slot="title">
									<i class="el-icon-menu"></i>
									<span>{{ subItem.authName }}</span>
								</template>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>

				<div class="home-main">
					<router-view></router-view>
				</div>
			</div>

		</el-container>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { munList } from '@/assets/js/admun.js'
	export default {
		name: 'Home',
		data() {
			
			return {
				menulist: munList,
				menulogonj: {
					1:'el-icon-s-order',
					4: 'el-icon-s-custom',
					103: 'el-icon-s-cooperation',
					101: 'el-icon-s-goods',
					102: 'el-icon-s-order',
					145: 'el-icon-s-marketing',
				},
				isopen: true,
				openOrClose: ['el-icon-arrow-right', 'el-icon-arrow-left'],
			}
		},
		computed: {
			...mapState(['userInfo','baseInfo']),
			currenIndex() {
				return this.$route.path
			},
		},
		methods: {
			kf() {
				if(this.baseInfo.service_kf) {
					window.open(this.baseInfo.service_kf)
				}
			},
			logout() {
				window.sessionStorage.clear()
				this.$router.push('/login')
			},
			async getMenList() {
				const {
					data: res
				} = await this.$http.get('menus')
				if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
				this.menulist = res.data
			},
			closeBtn() {
				this.isopen = !this.isopen
			},
		},
		created() {
		},
	}
</script>

<style scoped lang="scss">
	.home {
		height: 100%;
		background-color: #eaedf2;
	}

	.home-wrapper {
		height: 100%;
	}

	.home-header {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.01);
	}

	.home-loge {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.home-loge img {
		height: 100%;
	}

	.home-loge span {
		margin-left: 15px;
		color: rgb(234, 237, 242);
		font-size: 18px;
	}

	.out-wrapper {
		display: flex;
		align-items: center;
		padding-right: 50px;
	
		.u-name {
			text-decoration: underline;
			// width: 100px;
			padding: 0 20px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&:hover {
				.u-ban {
					display: block;
				}
			}
			.u-ban {
				position: absolute;
				width: 200px;
				height: 300px;
				display: none;
				bottom: -300px;
				left:-50px;
				margin: auto;
				z-index: 99;
				.u-wrap {
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #fff;
					box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
					padding: 10px;
					
					.info {
						color: #333;
						font-size: 14px;
						padding: 10px 0;
					}
				}
				
			}
		}
	}

	.home-nav {
		/* background-color: rgb(50, 55, 68); */
		/* padding: 0 200px; */
	}

	.close-btn {
		color: aliceblue;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		background-color: rgb(72, 81, 101);
		font-size: 25px;
	}

	.el-menu-wrap {
		width: 250px;
		display: inline-block;
		position: relative;
	}

	.home-main {
		/* width: 900px; */
		/* background-color: rgb(234, 237, 242); */
		width: 1130px;
		min-height: 800px;
		margin-left: 20px;
	}

	/deep/ .el-card__body {
		min-height: 700px;
		margin-top: 0;
	}

	/deep/ .el-card {
		margin-top: 0;
	}

	.boddy-wrap {
		min-width: 1200px;
		height: 100%;
		display: flex;
		justify-content: center;
	}
	.user-ifno {
		
		flex-direction: column;
		.name {
			color: black;
			font-weight: bold;
		}
		.user-id {
			color: black;
			font-size: 14px;
			padding-top: 10px;
			/* font-weight: bold; */
		}
	}
	.m-l-20 {
		margin-left: 20px;
	}
</style>