yichael_zhongchuan_manager/components/introductionToTheExperiment/syjj_second.vue

<template>
	<!-- 实验简介二级 -->
	<view class="myComRoot df jcc syjj-root">
		<view class="syjj-body" v-for="(page,pageI) in data_SYJJ" 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 v-for="(text,textI) in content.textList" :key="textI" :class="'syjj-text-'+text.textType">
							{{text.text}}
						</text>
					</view>
					<!-- 图片 -->
					<view class="syjj-pic" v-show="content.type=='pic'">
						<img :src="content.src"></img>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import '../../assets/myData/mydata_SYJJ.js';
	export default {
		data() {
			return {
				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;
			}
		}
	}
</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);
		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-link{
		color: #EA252C;
	}
	.syjj-pic img {
		max-width: 100%;
	}
</style>