yichael_zhongchuang_front_2/components/leftMenu.vue

<template>
	<view class="leftMenuRoot df fdr" v-show="isShow">
		<!-- 左边导航栏 -->
		<view class="leftBox df fdc">
			<view class="leftMenu-topIcon df aic" @click="hide">
				<img src="../assets/leftMenu/icon_leftUp.png"></img>
			</view>
			<!-- <scroll-view class="leftMenu-scroll df showboder" scroll-y="true"> -->
			<view class="df fdc" v-for="(menu1,i) in btnList" :key="i">
				<view class="leftMenu-btn1 df fdr aic" @click="onLeftBtn1Click(i)">
					<view class="leftMenu-btn1-icon df ">
						<img :src="checkedIndex1==i?menu1.icon_btn1_checked:menu1.icon_btn1_unchecked"></img>
					</view>
					<view class="leftMenu-btn1-text" :style="{color:checkedIndex1==i?color_checked:color_unchecked}">{{menu1.text}}</view>
				</view>
				<view class="leftMenu-line"></view>
				<view class="leftMenu-btn2-box1 df fdc" v-show="checkedIndex1==i" v-for="(menu2,m) in menu1.list" :key="m" @click="onLeftBtn2Click(m)">
					<view class="leftMenu-btn2-box2 df fdr aic">
						<view class="leftMenu-btn2-icon df">
							<img :src="checkedIndex2==m?icon_btn2_checked:icon_btn2_unchecked"></img>
						</view>
						<view class="leftMenu-btn2-text" :style="{color:checkedIndex2==m?color_checked:color_unchecked}">{{menu2}}</view>
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
		</view>
		<!-- 右边半透明 -->
		<view class="rightBox" @click="hide"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				checkedIndex1: 3,
				checkedIndex2: 0,

				// ------以下为静态
				btnList: [{
						"text": '首页',
						"icon_btn1_checked": require('../assets/leftMenu/icon_sy_02.png'),
						"icon_btn1_unchecked": require('../assets/leftMenu/icon_sy_01.png'),
						//"list": ["虚拟仿真1号摄影棚", '虚拟仿真库', '影视项目开发管理中心', '虚拟仿真主题拍摄基地', "学生创作项目管理平台老师"]
						 "list": []
					},
					{
						"text": '实验简介',
						"icon_btn1_checked": require('../assets/leftMenu/icon_syjj_02.png'),
						"icon_btn1_unchecked": require('../assets/leftMenu/icon_syjj_01.png'),
						"list": ['评审账号', '快速进入实验', '项目概述', '实验使用环境与技术架构', '项目简介视频']
					},
					{
						"text": '学前导览',
						"icon_btn1_checked": require('../assets/leftMenu/icon_xxlc_02.png'),
						"icon_btn1_unchecked": require('../assets/leftMenu/icon_xxlc_01.png'),
						"list": ['学习概要', '实验步骤', '实验引导视频', '学习资料下载']
					},
					{
						"text": '开始学习',
						"icon_btn1_checked": require('../assets/leftMenu/icon_ksxx_02.png'),
						"icon_btn1_unchecked": require('../assets/leftMenu/icon_ksxx_01.png'),
						"list": ["原理认知", "实景勘察", "虚拟技术搭建", "虚拟艺术创作", "虚拟资源库"]
					},
					// {
					// 	"text": '学生登录',
					// 	"icon_btn1_checked": require('../assets/leftMenu/icon_ksxx_02.png'),
					// 	"icon_btn1_unchecked": require('../assets/leftMenu/icon_ksxx_01.png'),
					// 	"list": []
					// },
					// {
					// 	"text": '学生创作项目管理平台',
					// 	"icon_btn1_checked": require('../assets/leftMenu/icon_ksxx_02.png'),
					// 	"icon_btn1_unchecked": require('../assets/leftMenu/icon_ksxx_01.png'),
					// 	"list": []
					// },
					// {
					// 	"text": '开始勘测',
					// 	"icon_btn1_checked": require('../assets/leftMenu/icon_ksxx_02.png'),
					// 	"icon_btn1_unchecked": require('../assets/leftMenu/icon_ksxx_01.png'),
					// 	"list": []
					// }
				],
				icon_btn2_checked: require('../assets/leftMenu/icon_btn2_02.png'),
				icon_btn2_unchecked: require('../assets/leftMenu/icon_btn2_01.png'),
				color_checked: '#EA252C',
				color_unchecked: '#020202'
			}
		},
		methods: {
			initData() {
				this.checkedIndex1 = -1;
				this.checkedIndex2 = -1;
			},
			hide() {
				this.isShow = false;
			},
			show(indexArr) {
				this.isShow = true;
				// console.log("左侧导航展示",indexArr);
				this.checkedIndex1 = indexArr[0];
				this.checkedIndex2 = indexArr[1];
			},
			onLeftBtn1Click(index) {
				this.checkedIndex2 = -1;
				if (this.btnList[index].list.length > 0) {
					//收起
					if (index == this.checkedIndex1) {
						this.checkedIndex1 = -1;
						// this.$emit("onLeftMenuClick", [index, -1])
					}
					// 展开
					else {
						this.checkedIndex1 = index;
						// this.$emit("onLeftMenuClick", [index, -1])
					}
				} else {
					// this.hide();
					this.checkedIndex1 = index;
					this.$emit("onLeftMenuClick", [index, -1])
				}
				// this.$forceUpdate();
				// console.log("点击1级目录",this.checkedIndex1,this.checkedIndex2);
			},
			onLeftBtn2Click(index) {
				this.checkedIndex2 = index;
				// this.hide();
				this.$emit("onLeftMenuClick", [this.checkedIndex1, index])
				// console.log("点击2级目录",this.checkedIndex1,this.checkedIndex2);
			}
		}
	}
</script>

<style lang="scss">
	.leftMenuRoot {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.leftBox {
		// width: px2vw(226);
		width: px2vw(300);
		height: 100%;
		background: #FFFFFF;
	}

	.rightBox {
		flex: 1;
		background: #000000;
		opacity: 0.24;
	}

	.leftMenu-topIcon {
		background: #EA252C;
		height: 6.2vw;
	}

	.leftMenu-topIcon img {
		margin-left: px2vw(41);
	}

	.leftMenu-btn1-icon {
		margin-left: px2vw(21);
		margin-top: px2vw(32);
		margin-bottom: px2vw(32);
	}

	.leftMenu-btn1-text {
		margin-left: px2vw(14);
		font-size: px2vw(22);
	}

	.leftMenu-line {
		height: 2px;
		background: #F2F2F2;
	}

	.leftMenu-btn2-box1 {
		background: #F2F2F2;
	}

	.leftMenu-btn2-box2 {
		margin-left: px2vw(48);
		margin-right: px2vw(45);
		// margin-top: px2vw(25);
		// margin-bottom: px2vw(25);
		margin-top: px2vw(20);
		margin-bottom: px2vw(20);
	}

	.leftMenu-btn2-text {
		margin-left: px2vw(14);
		font-size: px2vw(20);
	}
</style>