yichael_zhongchuang_front_2/components/startLearning/learningAndExperiment/learningAndExperiment.vue

<template>
	<!-- 学习与实验 -->
	<view class="myComRoot df jcc bgclF8">
		<view class="df fdc contentBox" v-show='checkedIndex_topTitle!=4'>
			<!-- 首页大图 -->
			<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 content-paragraph" v-for="(paragraph,i) in data_XXYSY[checkedIndex_topTitle].content.paragraphList"
			 :key="i">
				<!-- 不换行文字 -->
				<view class="contentText">
					<text selectable="true"v-for="(text,m) in paragraph" :key="m" :style="{color:text.color,fontWeight:text.fontWeight}">
						{{text.text}}
					</text>
				</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 jcc fdc"> -->
					<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==1' @click="onClick_KSCY">开始测验</view> -->
				<!-- </view> -->
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==2' @click="onClick_download_btn">下载客户端</view>
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==3' @click="onClick_download_btn">下载客户端</view>
				<view class="df aic jcc btn-xxysy" v-show='checkedIndex_topTitle==4'>进入虚拟资源库</view>
			</view>
			<downloadInstruction ref="downloadInstruction" v-show='data_XXYSY[checkedIndex_topTitle].content.bShowDownloadInstr'></downloadInstruction>
		</view>
		<simulationLibrary ref="simulationLibrary" v-show='checkedIndex_topTitle==4'></simulationLibrary>
		
	</view>
</template>

<script>
	import simulationLibrary from "../../../components/home/simulationLibrary.vue"
	import downloadInstruction from "../../../components/startLearning/learningAndExperiment/downloadInstruction.vue"
	export default {
		components: {
			simulationLibrary,
			downloadInstruction
		},
		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);
				
				if(index == 4)
				{
					this.$refs.simulationLibrary.init();
				}
			},
			onClick_KSRZ(){
				this.$emit("onClick_KSRZ")
			},
			onClick_KSKC(){
				uni.pageScrollTo({ 
				　　scrollTop: 0, duration:1 
				}); 
				this.$emit("onShowWebview720");
				// this.$emit("onClick_KSKC")
			},
			onClick_KSCY(){
				this.$emit("onClick_KSKC");
			},
			onClick_download_btn() {
				//客户端下载
				window.location.href = 'https://zhongchuan1.oss-cn-beijing.aliyuncs.com/WebDownload/%E5%BD%B1%E8%A7%86%E7%8E%B0%E5%9C%BA%E5%AE%9E%E6%97%B6%E7%89%B9%E6%95%88%E5%88%9B%E4%BD%9C%E5%AE%9E%E9%AA%8C%E5%AE%A2%E6%88%B7%E7%AB%AF.rar?versionId=CAEQGxiBgIDo8L.sghgiIGQ1OWQwZDliMjgzMDQ5YmViN2U2ZTFmM2IzN2ViZjFm';
			}
		}
	}
</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);
		// border: 1px solid #B4B4B4;
		// margin-top: 1%;
		margin-bottom: 5%;
	}

	.contentMedia img {
		// width: px2vw(780);
		// margin-bottom: px2vw(63);
		width: 100%;
		height: 100%;
	}
	
	.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>