yichael_zhongchuang_front_2/components/introductionToTheExperiment/syjj_second.vue

<template>
	<!-- 实验简介二级 -->
	<view class="myComRoot df jcc syjj-root">
		
		<view class="syjj-body" v-for="(page,pageI) in data_SYJJ" :key="pageI"  v-show="checkedIndex_second==pageI">
			<!-- 标题 -->
			<view class="titleBox df fdr jcc" v-show="data_SYJJ[checkedIndex_second].page.length>1">
				<view v-for="(item,i) in data_SYJJ[checkedIndex_second].page" :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.title}}
				</view>
			</view>
			<!-- 内容 -->
			<view class="df fdc">
				<view class="syjj-content" v-for="(content,contentI) in data_SYJJ[checkedIndex_second].page[checkedIndex_bodyTitle].content" :key="contentI">
					<!-- 文字 -->
					<view v-show="content.type=='text'">
						<text selectable="true"v-for="(text,textI) in content.textList" :key="textI" :class="'syjj-text-'+text.textType" v-show="text.textType!='link'">
							{{text.text}}
						</text>
						<!-- link -->
						<text selectable="true"v-for="(link,index) in content.textList" v-show="link.textType=='link'">
							<!-- <uni-link href="link.text" text="下载" :showUnderLine="true" style="text-decoration:underline;color:blue"></uni-link> -->
							<!-- <a :href="url" style="text-decoration:underline;color:blue">{{link.text}}</a> -->
							<a :href="link.text" style="text-decoration:underline;color:blue">下载</a>
						</text>
					</view>
					<!-- 图片 -->
					<view class="syjj-pic df jcc" v-show="content.type=='pic'">
						<img :src="content.src"></img>
					</view>
				
				</view>
			</view>
			<view class='videoControl' v-show="checkedIndex_second==4">
				<video class='aVideo' :src="videoLink"></video>
			</view>
		</view>
	</view>
</template>

<script>
	// import '../../assets/myData/mydata_SYJJ.js';
	export default {
		data() {
			return {
				videoLink:'https://zhongchuan1.oss-cn-beijing.aliyuncs.com/Video/项目简介视频.mp4?versionId=CAEQDxiBgICV.9qf1hciIGU4MDVlNDk4YjY0NDQyZGRhOTVjMzg3YmNmZTdkY2M2',
				
				url:'https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7B7869C644-40DB-D051-55C1-EF1EA244A890%7D%26lang%3Dzh-CN%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Dempty/update2/installers/ChromeSetup.exe',
				
				checkedIndex_second: 0, //二级页面选择、外部调用：如，评审账号、快速进入实验等
				checkedIndex_bodyTitle: 0, //正文小标题选择

				//以下为静态
				data_SYJJ: [
					myData_SYJJ_PSZH, //评审账号
					myData_SYJJ_KSJRSY, //快速进入实验
					myData_SYJJ_SYGS, //实验概述
					myData_SYJJ_SYHJYJSGJ, //使用环境与技术构架
					myData_SYJJ_XMJJSP //项目简介视频
				],
				checkedColor: "#EA252C",
				unCheckedColor_text: "#0E0E0E",
				unCheckedColor_border: "#C4C4C4",
			}
		},
		methods: {
			// initData(){
			// 	this.checkedIndex_second=0;
			// 	this.checkedIndex_bodyTitle=0;
			// },
			onTitleClick(index) {
				this.checkedIndex_bodyTitle = index;
				// console.log("***", this.data_SYJJ[this.checkedIndex_second][this.checkedIndex_bodyTitle].content.src.type);
			},
			showPage(pageIndex) {
				// console.log("切换页面", pageIndex);
				this.checkedIndex_second = pageIndex;
				this.checkedIndex_bodyTitle = 0;
				
				console.log('contentI=',this.data_SYJJ[this.checkedIndex_second].page[this.checkedIndex_bodyTitle].content)
			}
		}
	}
</script>

<style lang="scss">
	.syjj-root{
		background: #FFFFFF;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
	}
	.syjj-body {
		// width: px2vw(1789);
		width: px2vw(1150);
		margin-bottom: px2vw(63);
	}

	.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;
	}
	.syjj-content{
		margin-top: px2vw(34);
	}
	.syjj-content text{
		font-size: px2vw(22);
		line-height: px2vw(46);
	}

	.syjj-text-nor{
		color: #020202;
	}
	.syjj-text-dif{
		color: #EA252C;
	}
	.syjj-text-dif2{
		color: #EA252C;
		font-weight: bold;
	}
	// .syjj-text-link{
	// 	color: #EA252C;
	// }
	.syjj-pic img {
		// max-width: 100%;
		width: px2vw(1000);
	}
	
	.videoControl{
		width: 100%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		flex-direction: row;
		
		border: 3rpx solid #D7D7D7;
	}
	.aVideo
	{
		width: 100%;
		height: 100%;
	}
</style>