yichael_zhongchuan_manager/components/startLearning/preludePreparation/preludePreparation.vue

<template>
	<!-- 前序准备df fdc -->
	<view class="myComRoot df fdc bgclF8">
		<!-- 标题 -->
		<view class="titleBox df fdr jcc" v-show="data_QXZB[checkedIndex_topTitle].length>1">
			<view v-for="(item,i) in data_QXZB[checkedIndex_topTitle]" :key="i" @click="onTitleClick(i)" class="df fdc aic jcc title-item"
			 :style="{color:checkedIndex_bodyTitle==i?checkedColor:unCheckedColor_text,
			 borderColor:checkedIndex_bodyTitle==i?checkedColor:unCheckedColor_border,
			 borderLeftStyle:checkedIndex_bodyTitle==i-1?'none':((i!=0&&checkedIndex_bodyTitle!=i)?'none':'solid'),
			 borderRightStyle:checkedIndex_bodyTitle==i+1?'none':'solid'}">
				{{item.text}}
			</view>
		</view>
		<!-- 内容 -->
		<view class="df aic fdc">
			<!-- 文字 -->
			<view class="contentText">
				<text v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.text" :key="i+1" :style="{color:item.color}">
					{{item.text}}
				</text>
			</view>
			<!-- 媒体文件 -->
			<view class="contentMedia">
				<!-- <img v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "image"' v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.list"
				 :key="i+2" :src="item"></img> -->
				<!-- <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
				  enable-danmu danmu-btn controls></video> -->
				<!-- <video v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "video"' v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.list"
				 :key="i+2" :src="item"></video> -->
				<view v-for="(item,i) in data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.list" :key="i+2">
					<img v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "image"' :src="item"></img>
					<!-- <video v-show='data_QXZB[checkedIndex_topTitle][checkedIndex_bodyTitle].content.src.type=== "video"' :src="item" id="myVideo" ></video> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import '../../assets/myData/myData_QXZB.js';
	export default {
		data() {
			return {
				checkedIndex_topTitle: 0, //顶部标题选择
				checkedIndex_bodyTitle: 0, //正文小标题选择


				//以下为静态
				// myData_QXZB_SYQY: myData_QXZB_SYQY,
				data_QXZB: [
					myData_QXZB_SYQY, //实验前言
					myData_QXZB_SYLCBZ, //实验流程步骤
					myData_QXZB_JXYDSP, //教学引导视频
					myData_QXZB_JCZS, //基础知识
				],
				checkedColor: "#EA252C",
				unCheckedColor_text: "#0E0E0E",
				unCheckedColor_border: "#C4C4C4",

				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			// initData(){
			// 	this.checkedIndex_topTitle=0;
			// 	this.checkedIndex_bodyTitle=0;
			// },
			onTitleClick(index) {
				this.checkedIndex_bodyTitle = index
				// console.log("***", this.data_QXZB[this.checkedIndex_topTitle][this.checkedIndex_bodyTitle].content.src.type);
			},
			onTopQXZBClick(index) {
				// console.log("顶部点击",index);
				this.checkedIndex_topTitle = index;
				this.checkedIndex_bodyTitle = 0;
			},
		}
	}
</script>

<style lang="scss">
	.titleBox {
		margin-top: px2vw(63);
		margin-bottom: px2vw(63);
	}

	.title-item {
		font-size: px2vw(20);
		padding: px2vw(15) px2vw(56) px2vw(15) px2vw(56);
		border: 1px solid;
	}

	.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);
	// }
</style>