JT-CIM/src/views/Main/components/header.vue

<script setup>
	/**
	 * element-plus字体
	 */
	import {
		ArrowDown
	}
	from '@element-plus/icons-vue';

	import {
		Store
	} from '@/store/index'
	store = Store()

	/* 
	 *全屏方法引入
	 */
	import screenfull from "screenfull";
</script>
<template>
	<div class="header">
		<!-- logo标题 -->
		<div></div>
		<!-- 导航菜单 -->
		<div>
			<el-menu :default-active="activeIndex" mode="horizontal" ellipsis="false" background-color="rgb(16,96,210)" text-color="#fff" active-text-color="#fff">
				<el-menu-item index="0">
					<router-link to="/home/Map3d">三维地图</router-link>
				</el-menu-item>
				<el-menu-item index="1">
					<router-link to="/home/SysAdmin">系统管理</router-link>
				</el-menu-item>
				<!-- 				<el-menu-item index="2">
					<router-link to="/home/table">数据维护</router-link>
				</el-menu-item>
				<el-menu-item index="3">
					<router-link to="/home/test">嵌套页面</router-link>
				</el-menu-item> -->
			</el-menu>
		</div>
		<!-- 用户信息 -->
		<div>
			<ul>
				<li @click="fullscreen()">
					<i :class="isfullscreen == '全屏'? 'iconfont icon-quanping': 'iconfont icon-cancel-full-screen'"></i>
					{{ isfullscreen }}
				</li>
				<li>
					<el-dropdown size="medium">
						<div class="avatar-wrapper">

							<el-avatar shape="circle" style="width: 30rem;height:30rem;">
								<img src="@/assets/images/logo.ico" />
							</el-avatar>
							<span style="font-size: 16rem;">{{ userName }}</span>
							<el-icon>
								<ArrowDown />
							</el-icon>
						</div>

						<template #dropdown>
							<span slot="slot" class="text"></span>
							<el-dropdown-menu>
								<!-- <el-dropdown-item command="system">个人中心</el-dropdown-item> -->
								<el-dropdown-item command="system" @click="modifypassword">修改密码</el-dropdown-item>
								<el-dropdown-item command="logout" divided @click="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	let store = undefined
	export default {
		/* 数据 */
		data() {
			return {
				appName: '金田智慧产业应用事业部基础框架',
				userName: store.realName,
				activeIndex: "0",
				isfullscreen: '全屏', //控制是否全屏
			}
		},

		/* 方法 */
		methods: {
			//修改密码弹出框
			modifypassword() {
				this.$parent.modifyMoudle()
			},

			//全屏或退出全屏事件
			fullscreen() {
				screenfull.toggle();
				if (!screenfull.isEnabled) {
					this.$Message.error("该浏览器不支持全屏功能");
				}
				if (this.isfullscreen == '全屏') {
					this.isfullscreen = '退出全屏'
				} else {
					this.isfullscreen = '全屏'
				}
			},

			//退出登录事件
			logout() {
				this.$router.replace({
					path: '/login'
				});

				//去掉卷帘对比
				let sliderDiv = document.getElementById("image_slider");
				if (sliderDiv) {
					document.body.removeChild(sliderDiv);
				}

				//去掉分屏对比
				let mapView2 = document.getElementById("cesiumContainer2");
				if (mapView2) {
					mapView2.style.display = "none";
					mapView2.innerHTML = "";
				}
			},

			//全屏
			fullele() {
				return (
					document.fullscreenElement ||
					document.webkitFullscreenElement ||
					document.msFullscreenElement ||
					document.mozFullScreenElement ||
					null
				);
			},

			//判断是否全屏
			isFullScreen() {
				return !!(document.webkitIsFullScreen || this.fullele());
			},
		},

		mounted() {

			let that = this
			window.addEventListener('resize', function() {
				if (!that.isFullScreen()) {
					// 非全屏状态
					//业务逻辑
					that.isfullscreen = '全屏'
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	$fontColor: #fff;
	$fullsize: calc(100% - 0rem);
	$header-title-bg: url(@/assets/images/header/header-title-bg.png) 0rem no-repeat;
	$header-title: url(@/assets/images/header/header-1.webp) 0rem no-repeat;
	$header-bg: url(@/assets/images/header/header-bg.png) 0rem no-repeat;
	$header-bg-color: linear-gradient(100deg,
		rgb(16, 96, 210) 30%,
		rgb(16, 106, 250) 70%);

	::v-deep .el-popper__arrow::before {
		background: rgba(5, 45, 115, 0.8) !important;
	}

	.text::before {
		position: absolute;
		width: 0rem;
		height: 0rem;
		left: calc(50% - 5rem);
		top: -5rem;
		content: "";
		transform: rotate(45deg);
		z-index: 10;
		box-sizing: border-box;
		border-bottom: 5rem solid transparent;
		border-right: 5rem solid transparent;
		border-top: 5rem solid rgba(5, 45, 115, 0.8);
		border-left: 5rem solid rgba(5, 45, 115, 0.8);
		// background: rgba(5, 45, 115, .8) !important;
	}

	.el-dropdown-menu {
		background-color: rgba(5, 45, 115, 0.8) !important;
	}

	::v-deep .el-dropdown-menu__item {
		color: #fff !important;
	}

	::v-deep .el-dropdown-menu__item--divided {
		border: 0 !important;
	}

	::v-deep .el-dropdown-menu__item:hover {
		color: rgb(255, 255, 255) !important;
		background-color: rgba(255, 255, 255, 0.3) !important;
	}

	//routerlink下划线
	a {
		text-decoration: none;
		color: #000;
	}

	.header {
		display: flex;
		width: $fullsize;
		height: 70rem;
		background: $header-title, $header-title-bg, $header-bg, $header-bg-color;
		background-size: 470rem 70rem, 700rem 70rem, 100% 70rem, 100% 70rem;
		background-repeat: no-repeat;
		user-select: none;
		position: absolute;
		z-index: 999;

		&>div:nth-child(1) {
			width: 470rem;
			height: $fullsize;
		}

		&>div:nth-child(2) {
			width: calc(100% - 590rem);
			height: calc(100% - 0rem);
			padding-left: 100rem;

			& ul li {
				font-weight: bolder;
				font-size: 15rem;

				&:hover {
					color: rgb(110, 210, 255) !important;
					transform: scale(1.03);
				}

				& i {
					padding-right: 5rem;
				}
			}

			.el-menu {
				border: 0;
				height: 70rem;
				background-color: transparent;

				.el-menu-item {
					background-color: transparent;
					transition: all 0.5s;
				}
			}
		}

		&>div:nth-child(3) {
			position: absolute;
			height: 70rem;
			right: 0rem;

			& ul {
				margin: 0rem;
				color: rgb(255, 255, 255);
				display: block;
				overflow: hidden;
				white-space: nowrap; //处理块元素中的空白符和换行符的，这个属性保证图片不换行

				& li {
					list-style: none;
					display: inline-block; //使li对象显示为一行
					padding: 0rem 15rem;
					height: 70rem;
					line-height: 70rem;
					cursor: pointer;
					color: rgb(255, 255, 255);

					&:hover {
						color: rgb(110, 210, 255);
						transition: all 0.5s;
					}

					& i {
						padding-right: 10rem;
					}
				}
			}
		}
	}

	.el-avatar>img {
		width: 30rem;
		height: 30rem;
	}

	.avatar-wrapper {
		display: flex;
		align-items: center;
		white-space: nowrap;
		cursor: pointer;
		color:$fontColor;
		height: 70rem;
		line-height: 70rem;

		.el-avatar {
			--el-avatar-bg-color: #ffffff;
			margin: 0rem 10rem !important;
		}
	}
</style>