yichael_zhongchuan_manager/components/topMenu.vue

<template>
	<!-- 顶部导航栏 -->
	<view class="topMenuBox df jcsb">
		<view class="df fdr">
			<!-- 左侧导航icon -->
			<view class="df aic jcc topMenu-lefticon" @click="onTopMenuIconClick">
				<img src="../assets/topMenu/leftUpIcon.png" />
			</view>
			<!-- 左上角标题 -->
			<view class="df aic topMenu-lefttitle-box">
				<view v-show="middleShowIndex==0">影视现场实时特效虚拟仿真实验</view>
				<view v-show="middleShowIndex==1" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>前序准备</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==2" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_xxysy.png"></img>
					<view>学习与实验</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==3" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>原理认知</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==4" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view v-for="(syjjTitle,syjjTitleI) in titleSYJJ" :key="syjjTitleI" v-show="syjjTitleI==checkedIndexSYJJ">
						{{syjjTitle}}
					</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==9">虚拟仿真实验后台</view>
				<view v-show="middleShowIndex==10">虚拟仿真1号摄影棚</view>
				<view v-show="middleShowIndex==11">虚拟仿真资产库</view>
			</view>
		</view>

		<!-- 中间几个导航标题 -->
		<!-- 首页开始学习那几个 -->
		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==0">
			<view v-for="(item,i) in titleText" :key="i" @click="onTitleClick_SY(i)" class="df fdr aic jcc topMenu-middleMenu-item">
				<view>
					<img :src="curTitleSrc[i]"></img>
				</view>
				<view class="topMenu-middleMenu-item-text" :style="{color:curTitleColor[i]}">{{item}}</view>
			</view>
		</view>
		<!-- 前序准备 -->
		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==1">
			<view v-for="(item,i) in titleQXZB" :key="i" @click="onTitleClick_QXZB(i)" class="df fdc aic jcc top2thTitle-item">
				<view class="top2thTitle-item-text df aic" :style="{color:checkedIndexQXZB==i?titleColorChecked:titleColorUnchecked}">{{item}}</view>
				<view class="top2thTitle-item-line" :style="{opacity: checkedIndexQXZB==i?1:0}"></view>
			</view>
		</view>
		<!-- 学习与实验 -->
		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==2">
			<view v-for="(item,i) in titleXXYSY" :key="i" @click="onTitleClick_XXYSY(i)" class="df fdc aic jcc top2thTitle-item">
				<view class="top2thTitle-item-text df aic" :style="{color:checkedIndexXXYSY==i?titleColorChecked:titleColorUnchecked}">{{item}}</view>
				<view class="top2thTitle-item-line" :style="{opacity: checkedIndexXXYSY==i?1:0}"></view>
			</view>
		</view>

		<!-- 右侧登录或个人头像名字等 -->
		<view class="df jcc aic topMenu-rightbox">
			<!-- 原理认知页面-返回上一层 -->
			<view class="ylrz-return df aic fdr" v-show="returnShowIndex==1" @click="onClick_return">
				<view class="df">
					<img src="../assets/topMenu/icon_return.png" />
				</view>
				<view class="ylrz-return-text">返回上一层</view>
			</view>
			<!-- 登录按钮 -->
			<view v-show="loginShowIndex==0" class="df jcc aic btnLogin" id="btnLogin" @click="onLoginClick">登录</view>
			<!-- 头像名字 -->
			<view v-show="loginShowIndex==1" class="df aic">
				<view>
					<img src="../assets/topMenu/introductionToTheExperimentChecked.png" />
				</view>
				<view class="topMenu-rightbox-text">学生</view>
				<view>
					<img src="../assets/topMenu/arrowDown.png" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//中间导航状态 0首页1前序准备2学习与实验3原理认知
				middleShowIndex: 0,

				// //右侧显示信息0登录按钮1个人头像信息2返回上一层
				// rightShowIndex: 0,
				//0登录按钮1个人头像信息
				loginShowIndex: 0,
				//返回上一层 0不显示1显示
				returnShowIndex: 0,
				// visibleLogin: true,
				// visibleInfo: false,
				visibleMiddle: true,

				curTitleSrc: [
					require("../assets/topMenu/introductionToTheExperimentUnchecked.png"),
					require("../assets/topMenu/learningProcessUnchecked.png"),
					require("../assets/topMenu/startLearningUnchecked.png")
				],
				curTitleColor: [
					"#020202",
					"#020202",
					"#020202"
				],

				checkedIndexQXZB: 0, //选中的前序准备的菜单
				checkedIndexXXYSY: 0, //选中的学习与实验的菜单
				checkedIndexSYJJ: 0, //选中的实验简介的菜单

				//////////////////////以下皆为静态
				titleText: ["实验简介", "学习流程", "开始学习"],
				//首页-中间标题选中时icon
				titleSrcChecked: [
					require("../assets/topMenu/introductionToTheExperimentChecked.png"),
					require("../assets/topMenu/learningProcessChecked.png"),
					require("../assets/topMenu/startLearningChecked.png")
				],
				//首页-中间标题未选中时icon
				titleSrcUnchecked: [
					require("../assets/topMenu/introductionToTheExperimentUnchecked.png"),
					require("../assets/topMenu/learningProcessUnchecked.png"),
					require("../assets/topMenu/startLearningUnchecked.png")
				],
				//首页-中间标题选中时颜色
				titleColorChecked: "#EA252C",
				//首页-中间标题未选中时颜色
				titleColorUnchecked: "#020202",
				//前序准备
				titleQXZB: ["实验前言", "实验流程步骤", "教学引导视频", "基础知识"],
				//学习与实验
				titleXXYSY: ["原理认知", "实景勘察", "虚拟技术搭建", "虚拟艺术创作", "虚拟资源库建设"],
				//实验简介
				titleSYJJ: ['评审账号', '快速进入实验', '实验概述', '使用环境与技术构架', '项目简介视频'],
				titleManager: ["虚拟仿真实验后台"]
			}
		},
		methods: {
			//初始化数据
			initData() {
				this.curTitleSrc = this.titleSrcUnchecked;
				this.curTitleColor = this.titleColorUnchecked;
			},
			onLoginClick() {
				this.$emit("onLoginClick");
			},
			//首页标题点击
			onTitleClick_SY(index) {
				// console.log("点击了", index);
				this.$emit("onTopSYClick", index);
				this.$forceUpdate();
				//改变颜色
				for (let i = 0; i < 3; i++) {
					if (i == index) {
						this.curTitleSrc[i] = this.titleSrcChecked[i];
						this.curTitleColor[i] = this.titleColorChecked;
					} else {
						this.curTitleSrc[i] = this.titleSrcUnchecked[i];
						this.curTitleColor[i] = this.titleColorUnchecked;
					}
				}
			},
			//切换右侧状态
			// switchRightState(index) {
			// 	this.rightShowIndex = index;
			// },
			//切换登录状态
			switchLoginState(isLogged) {
				if (isLogged) {
					// this.visibleLogin = false;
					// this.visibleInfo = true;
					// this.switchRightState(1);
					this.loginShowIndex = 1;
				} else {
					// this.visibleLogin = true;
					// this.visibleInfo = false;
					// this.switchRightState(0);
					this.loginShowIndex = 0;
				}
			},
			//切换中间导航状态
			switchMiddleState(state) {
				switch (state) {
					case topMenuS.SY:
						this.middleShowIndex = 0;
						// this.switchRightState(0);
						this.returnShowIndex = 0;
						this.loginShowIndex = 0;
						break;
					case topMenuS.QXZB:
						this.middleShowIndex = 1
						// this.switchRightState(0);
						this.returnShowIndex = 0;
						this.loginShowIndex = 0;
						break;
					case topMenuS.XXYSY:
						this.middleShowIndex = 2
						// this.switchRightState(0);
						this.returnShowIndex = 0;
						this.loginShowIndex = 0;
						break;
					case topMenuS.YLRZ:
						this.middleShowIndex = 3
						// this.switchRightState(2);
						this.returnShowIndex = 1;
						this.loginShowIndex = -1;
						break;
					case topMenuS.SYJJ:
						this.middleShowIndex = 4
						// this.switchRightState(2);
						this.returnShowIndex = 1;
						this.loginShowIndex = 0;
						break;
					case topMenuS.manager:
						this.middleShowIndex = 9;
						this.returnShowIndex = 2;
						this.loginShowIndex = -1;
						break;
					case topMenuS.home_1:
						this.middleShowIndex = 10;
						this.returnShowIndex = 1;
						this.loginShowIndex = 1;
						break;
					case topMenuS.home_2:
						this.middleShowIndex = 11;
						this.returnShowIndex = 1;
						this.loginShowIndex = 1;
						break;
					default:
						console.log("切换中间导航状态", state);
				}
			},
			//前序准备标题点击
			onTitleClick_QXZB(index) {
				// console.log("前序准备标题点击",index);
				this.checkedIndexQXZB = index;
				this.$emit("onTopQXZBClick", index);
				// this.$forceUpdate();
			},
			onTitleClick_XXYSY(index) {
				this.checkedIndexXXYSY = index;
				this.$emit("onTopXXYSYClick", index);
				// console.log("学习与实验topmenu",index);
			},
			onTopMenuIconClick() {
				this.$emit("onTopMenuIconClick");
				console.log("顶部icon点击");
			},
			//原理认知-返回上一层:返回到开始学习-学习与实验的展开页 type-3
			//实验简介-返回上一层：返回到实验简介的展开页 type-4
			onClick_return() {
				let type = this.middleShowIndex;
				this.$emit("onClick_return", type);

				this.switchMiddleState(topMenuS.SY);
			},
			switchState_syjj(index) {
				this.checkedIndexSYJJ = index;
			}
		}
	}
</script>

<style lang="scss">
	.topMenuBox {
		width: 100%;
		// height: px2vw(119);
		// height: 11%;
		background: #FFFFFF;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
		position: fixed;
		z-index: 1;
	}

	.topMenu-lefticon {
		width: 6.2vw;
		height: 6.2vw;
		background: #EA252C;
	}

	.topMenu-lefttitle-box {
		margin-left: 2.4vw;
		font-size: 1.5vw;
		font-family: MicrosoftYaHei;
		color: #323232;
		margin-right: 2.4vw;
	}

	.topMenu-lefttitle-box img {
		width: px2vw(50);
		margin-right: px2vw(18);
	}

	.topMenu-lefttitle-line {
		width: px2vw(2);
		// width: 1px;
		height: px2vw(53);
		background: #D5D5D5;
		margin-left: px2vw(32);
	}

	.topMenu-middleMenu {
		/* display: none; */
		flex-grow: 1;
		/* justify-content: center; */
		justify-content: space-evenly;
	}

	/* 	.topMenu-middleMenu-item {
		margin-left: 71px;
	} */
	.topMenu-middleMenu-item-text {
		margin-left: px2vw(20);
	}

	.topMenu-rightbox {
		margin-right: px2vw(58);
		margin-left: px2vw(58);
	}

	.btnLogin {
		width: 6.2vw;
		height: 3vw;
		background: #EA252C;
		border-radius: 8px;
		font-size: 1.14vw;
		font-family: MicrosoftYaHei;
		color: #FFFFFF;
		line-height: 1.5vw;
		letter-spacing: 1px;
	}

	.topMenu-rightbox-text {
		margin-left: px2vw(18);
		margin-right: px2vw(23);
	}

	.top2thTitle-item {
		height: 100%;
	}

	// 二级目录标题字
	.top2thTitle-item-text {
		flex: 1;
		font-size: px2vw(24);
		color: #323232;
	}

	// 二级目录标题红线
	.top2thTitle-item-line {
		width: px2vw(110);
		height: px2vw(6);
		background: #EA252C;
		border-radius: px2vw(5);
	}

	//返回上一层
	.ylrz-return {
		margin-right: px2vw(43);
	}

	.ylrz-return img {
		width: px2vw(23);
	}

	.ylrz-return-text {
		font-size: px2vw(24);
		color: #EA252C;
		margin-left: px2vw(14);
	}
</style>