yichael_zhongchuan_manager/components/leftMenu.vue

<template>
	<view class="leftMenuRoot df fdr" v-show="isShow">
		<!-- 左边导航栏 -->
		<view class="leftBox">
			<view class="leftMenu-topIcon df aic" @click="hide">
				<img src="../assets/leftMenu/icon_leftUp.png"></img>
			</view>
			<view class="df fdc" v-for="(menu1,i) in btnList" :key="i" @click="onLeftBtn1Click(i)">
				<view class="leftMenu-btn1 df fdr aic">
					<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>
		</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": []
					},
					{
						"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": []
					}
				],
				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;
					}
					// 展开
					else {
						this.checkedIndex1 = index;
					}
				} else {
					this.hide();
					this.$emit("onLeftMenuClick", [index,-1])
				}
			},
			onLeftBtn2Click(index) {
				this.checkedIndex2 = index;
				this.hide();
				this.$emit("onLeftMenuClick", [this.checkedIndex1,index])
			}
		}
	}
</script>

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

	.leftBox {
		width: px2vw(226);
		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);
	}

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