yichael_zhongchuang_front_2/components/startLearning/learningAndExperiment/learningAndExperiment.vue

<template>
	<!-- 学习与实验 -->
	<view class="myComRoot df jcc bgclF8">
		<view class="df fdc contentBox">
			<!-- 换行的段落文字 -->
			<view class="df content-paragraph" v-for="(paragraph,i) in data_XXYSY[checkedIndex_topTitle].content.paragraphList"
			 :key="i">
				<!-- 不换行文字 -->
				<view class="contentText">
					<text v-for="(text,m) in paragraph" :key="m" :style="{color:text.color,fontWeight:text.fontWeight}">
						{{text.text}}
					</text>
				</view>
			</view>
			<!-- 媒体文件 -->
			<view class="contentMedia df jcc">
				<view v-for="(media,n) in data_XXYSY[checkedIndex_topTitle].content.src.list" :key="n">
					<img v-show='data_XXYSY[checkedIndex_topTitle].content.src.type=== "image"' :src="media"></img>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="df jcc">
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==0' @click="onClick_KSRZ">开始认知</view>
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==1' @click="onClick_KSKC" >开始勘察</view>
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==2'>下载客户端</view>
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==3'>下载客户端</view>
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==4'>进入虚拟资源库</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedIndex_topTitle: 0, //顶部标题选择


				//以下为静态
				myData_QXZB_SYQY: myData_QXZB_SYQY,
				data_XXYSY: [
					myData_XXYSY_YLRZ, //原理认知
					myData_XXYSY_SJKC, //实景勘察
					myData_XXYSY_XNJSDJ, //虚拟技术搭建
					myData_XXYSY_XNYSZZ, //虚拟艺术创作
					myData_XXYSY_XNZYKJS, //虚拟资源库建设
				],
				checkedColor: "#EA252C",
				unCheckedColor_text: "#0E0E0E",
				unCheckedColor_border: "#C4C4C4",
			}
		},
		methods: {
			onTopXXYSYClick(index) {
				this.checkedIndex_topTitle = index;
				// console.log("2级点击", index, this.data_XXYSY[index].content);
				// console.log("***",this.myData_QXZB_SYQY);
			},
			onClick_KSRZ(){
				this.$emit("onClick_KSRZ")
			},
			onClick_KSKC(){
				this.$emit("onClick_KSKC")
			}
		}
	}
</script>

<style lang="scss">
	.contentBox {
		// width: px2vw(1789);
		width: px2vw(1150);
		margin-top: px2vw(66);
	}

	.content-paragraph {}

	.contentText {
		// width: px2vw(1789);
		font-size: px2vw(22);
		line-height: px2vw(46);
	}

	.contentMedia {
		margin-top: px2vw(66);
	}

	.contentMedia img {
		width: px2vw(780);
		margin-bottom: px2vw(63);
	}

	// .contentMedia video {
	// 	width: px2vw(1306);
	// }
	.btn-xxysy {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
		margin-bottom: px2vw(63);
	}
</style>