yichael_zhongchuan_manager/components/startLearning/startLearning.vue

<template>
	<!-- 开始学习 -->
	<view class="myComRoot df fdc  bgclF8">
		<view class="df jcc aic fdc firstTitleBox">
			<view class="df content-box jcsb">
				<view v-for="(item,i) in btn1List" :key="i" class="df jcc aic fdc btn1-box" @click="onClickBtn1(i)" :style=" {borderColor: current===i?btn1CheckedColor:btn1UncheckedColor, borderWidth: current===i?btn1CheckedPX:btn1UncheckedPX}">
					<view class="btn1-icon">
						<img :src="item.src"></img>
					</view>
					<view class="btn1-text">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="secondTitleBox df" v-show="current ===0||current ===1">
			<!-- 前序准备二级QXZB -->
			<view class="df fdr secondTitleBox2" v-show="current === 0">
				<view v-for="(item,i) in btn1List[0].list" :key="i"  class="secondTitleBox-item" @click="onQXZB2Click(i)">
					<view class="secondTitleBox-itemIndex">0{{i+1}}</view>
					<view class="secondTitleBox-itemText">{{item}}</view>
				</view>
			</view>
			<!-- 学习与实验二级XXYSY -->
			<view class="df fdr secondTitleBox2" v-show="current === 1">
				<view v-for="(item,i) in btn1List[1].list" :key="i"  class="secondTitleBox-item" @click="onXXYSY2Click(i)">
					<view class="secondTitleBox-itemIndex">0{{i+1}}</view>
					<view class="secondTitleBox-itemText">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopMenu from '../../components/topMenu.vue'
	export default {
		components: {
			TopMenu,
		},
		onLoad() {

		},
		data() {
			return {
				//0前序准备1学习与实验
				current: -1,
				
				//以下为静态
				btn1CheckedColor: "#EA252C",
				btn1CheckedPX: "2px",
				btn1UncheckedColor: "#C2C2C2",
				btn1UncheckedPX: "1px",

				btn1List: [{
						"src": require("../../assets/topMenu/preludePreparation.png"),
						"text": "前序准备",
						"list": ["实验前言", "实验流程步骤", "教学引导视频", "基础知识"]
					},
					{
						"src": require("../../assets/topMenu/learningAndExperiment.png"),
						"text": "学习与实验",
						"list": ["原理认知", "实景勘察", "虚拟技术搭建", "虚拟艺术创作", "虚拟资源库建设"]
					},
					{
						"src": require("../../assets/topMenu/testAndResult.png"),
						"text": "测试与结果",
						"list": []
					},
				],
			}
		},
		methods: {
			initData(){
				this.current=-1
			},
			//大标题
			onClickBtn1(index) {
				this.current = index
			},
			//前序准备二级
			onQXZB2Click(index){
				this.$emit("on2thTitleClick","QXZB-"+index)
			},
			//学习与实验二级
			onXXYSY2Click(index){
				this.$emit("on2thTitleClick","XXYSY-"+index)
			},
			//切换二级选择页，如：切换为“学习与实验”的展开页
			switchSecondTitle(index){
				this.current=index;
			}
		}
	}
</script>

<style lang="scss">
	$btnN:3;

	.content-box {
		width: px2vw(312*$btnN+67*(($btnN)-1));
		height: px2vw(367);
	}
	.firstTitleBox{
		flex: 1;
	}

	.secondTitleBox {
		width: 100%;
		height: 37%;
		background: #FFFFFF;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
		// margin-top: px2vw(120);
	}

	.secondTitleBox2 {
		margin-left: px2vw(395);
		margin-top: px2vw(92);
	}

	.secondTitleBox-item {
		margin-right: px2vw(92);
	}

	.secondTitleBox-itemIndex {
		font-size: px2vw(28);
		color: #B4B4B4;
	}

	.secondTitleBox-itemText {
		font-size: px2vw(26);
		color: #323232;
		margin-top: px2vw(17);
	}
</style>