yichael_zhongchuang_front_2/components/learningProcess/learningProcess.vue

<template>
	<!-- 学习流程 -->
	<view class="myComRoot df fdc xxlc-body">
		<view class="topTitle-box df jcc">
			<view class="topTitle-box2 df fdr">
				<view class="topTitle df fdr aic" v-for="(title,titleI) in titleList" :key="titleI">
					<view class="df fdc aic" @click="onClick_title(titleI)">
						<view class="df topTitle-icon">
							<img :src="titleI<=checkedIndex?title.icon_checked:title.icon_unchecked"></img>
						</view>
						<view :class="'topTitle-text-'+(titleI<=checkedIndex?'checked':'unchecked')">{{title.text}}</view>
					</view>
					<view class="topTitle-line" v-show="titleI!=titleList.length-1">
						<img :src="titleI<checkedIndex?titleLine_checked:titleLine_unchecked"></img>
					</view>
				</view>
			</view>
		</view>
		<view class="xxlc-line"></view>
		<view class="xxlc-content df fdc aic">
			<view class="xxlc-content-title">流程步骤</view>
			<!-- 内容 -->
			<view class="df fdc">
				<view class="xxlc-content-box" v-for="(data,dataI) in data_XXLC[checkedIndex].content" :key="dataI">
					<view class="xxlc-content-box2">
						<view class="xxlc-content-box3" v-for="(content,contentI) in data" :key="contentI">
							<!-- 文字 -->
							<view v-show="content.type=='text'">
								<text v-for="(text,textI) in content.textList" :key="textI" :class="'xxlc-text-'+text.textType">
									{{text.text}}
								</text>
							</view>
							<!-- 图片 -->
							<view class="xxlc-pic df jcc" v-show="content.type=='pic'">
								<img :src="content.src"></img>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xxlc-btn-box df fdr jcc">
			<view class="xxlc-btn df jcc aic" v-show="checkedIndex>0" @click="onClick_last">上一模块</view>
			<view class="xxlc-btn df jcc aic xxlc-btn2" v-show="checkedIndex<data_XXLC.length-1" @click="onClick_next">下一模块</view>
			<view class="xxlc-btn df jcc aic xxlc-btn2" v-show="checkedIndex==data_XXLC.length-1" @click="onClick_ksxx">开始学习</view>
		</view>
	</view>
</template>

<script>
	import TopMenu from '../../components/topMenu.vue'
	export default {
		components: {
			TopMenu,
		},
		onLoad() {

		},
		data() {
			return {
				checkedIndex: 0,

				//以下为静态
				titleList: [{
						"icon_checked": require("../../assets/learning/icon_xxlc_01_01.png"),
						"icon_unchecked": require("../../assets/learning/icon_xxlc_01_02.png"),
						"text": "原理认知"
					},
					{
						"icon_checked": require("../../assets/learning/icon_xxlc_02_01.png"),
						"icon_unchecked": require("../../assets/learning/icon_xxlc_02_02.png"),
						"text": "实景勘察"
					},
					{
						"icon_checked": require("../../assets/learning/icon_xxlc_03_01.png"),
						"icon_unchecked": require("../../assets/learning/icon_xxlc_03_02.png"),
						"text": "虚拟技术搭建"
					},
					{
						"icon_checked": require("../../assets/learning/icon_xxlc_04_01.png"),
						"icon_unchecked": require("../../assets/learning/icon_xxlc_04_02.png"),
						"text": "虚拟艺术创作"
					},
					{
						"icon_checked": require("../../assets/learning/icon_xxlc_05_01.png"),
						"icon_unchecked": require("../../assets/learning/icon_xxlc_05_02.png"),
						"text": "虚拟资源库建设"
					},
				],
				titleLine_checked: require("../../assets/learning/pic_xxlc_01_01.png"),
				titleLine_unchecked: require("../../assets/learning/pic_xxlc_01_02.png"),
				data_XXLC: [
					myData_XXLC_YLRZ,
					myData_XXLC_SJKC,
					myData_XXLC_XNJSDJ,
					myData_XXLC_XNYSCZ,
					myData_XXLC_XNZYKJS
				]
			}
		},
		methods: {
			onClick_last(){
				this.checkedIndex--;
			},
			onClick_next(){
				this.checkedIndex++;
			},
			onClick_ksxx(){
				this.$emit("onClick_ksxx")
			},
			onClick_title(titleI){
				this.checkedIndex=titleI;
			}
		}
	}
</script>

<style lang="scss">
	.xxlc-body {
		margin-top: px2vw(11);
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
	}

	.topTitle-box {
		width: 100%;
	}

	.topTitle-box2 {
		// margin-left: px2vw(240);
		margin-top: px2vw(39);
	}

	.topTitle-line {
		margin-left: px2vw(40);
		margin-right: px2vw(40);
	}

	.topTitle-line img {
		width: px2vw(132);
	}

	.topTitle-icon img {
		width: px2vw(76);
	}

	.xxlc-line {
		height: px2vw(1);
		background: #DDDDDD;
		margin-top: px2vw(51);
	}

	.xxlc-content-title {
		font-size: px2vw(30);
		font-weight: 500;
		color: #EA252C;
		line-height: px2vw(42);
		margin-top: px2vw(55);
	}

	.xxlc-content-box {
		width: px2vw(1080);
		border: 1px solid #979797;
		margin-top: px2vw(30);
	}

	.xxlc-content-box2 {
		margin: px2vw(50) px2vw(60) px2vw(50) px2vw(60);
	}

	.xxlc-text-nor {
		font-size: px2vw(24);
		color: #020202;
		line-height: px2vw(31);
	}

	.xxlc-btn-box {
		margin-top: px2vw(40);
	}

	.xxlc-btn {
		width: px2vw(200);
		height: px2vw(58);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(24);
		color: #FFFFFF;
		line-height: px2vw(31);
	}

	.xxlc-btn2 {
		margin-left: px2vw(30);
		margin-bottom: px2vw(72);
	}
	.xxlc-pic{
		margin-top: px2vw(30);
	}
	.xxlc-pic img{
		max-width: 100%;
	}
	.topTitle-text-checked{
		font-size: px2vw(24);
		color: #EA252C;
		margin-top: px2vw(5);
	}
	.topTitle-text-unchecked{
		font-size: px2vw(24);
		color: #B3B3B3;
		margin-top: px2vw(5);
	}
</style>