yichael_zhongchuang_front_2/components/home/sy.vue

<template>
	<view class="myComRoot">
		<view class="df homeBG">
			<!-- <image class="homeBG" mode="aspectFill" src="../../assets/home/homeBG.jpg"></image> -->
			<!-- <view class="sy-menu">
				<view class="sy-menu-box menu-box1 df jcc" @click="onClick_menu(0)">
					<view class="sy-menu-text menu-text1">{{menu[0].title}}</view>
				</view>
				<view class="sy-menu-box menu-box2 df jcc" @click="onClick_menu(1)">
					<view class="sy-menu-text menu-text2">{{menu[1].title}}</view>
				</view>
				<view class="sy-menu-box menu-box3 df jcc" @click="onClick_menu(2)">
					<view class="sy-menu-text menu-text3">{{menu[2].title}}</view>
				</view>
				<view class="sy-menu-box menu-box4 df jcc" @click="onClick_menu(3)">
					<view class="sy-menu-text menu-text4">{{menu[3].title}}</view>
				</view>
				<view class="sy-show-box menu-show-box1 df jcc" v-show="showIndex==0">
					<view class="sy-show-content df fdc aic">
						<view class="menu-show-title">{{menu[0].title}}</view>
						<view class="menu-show-text">{{menu[0].text}}</view>
						<view class="menu-show-btn df jcc aic" @click="onClick_menu_btn(0)">进入资产库</view>
					</view>
					<img src="../../assets/home/home_bubble.png" />
				</view>
				<view class="sy-show-box menu-show-box2 df jcc" v-show="showIndex==1">
					<view class="sy-show-content df fdc aic">
						<view class="menu-show-title">{{menu[1].title}}</view>
						<view class="menu-show-text">{{menu[1].text}}</view>
						<view class="menu-show-btn df jcc aic" @click="onClick_menu_btn(1)">进入摄影棚</view>
					</view>
					<img src="../../assets/home/home_bubble_02.png" />
				</view>
				<view class="sy-show-box menu-show-box3 df jcc" v-show="showIndex==2">
					<view class="sy-show-content df fdc aic">
						<view class="menu-show-title">{{menu[2].title}}</view>
						<view class="menu-show-text">{{menu[2].text}}</view>
						<view class="menu-show-btn df jcc aic" @click="onClick_menu_btn(2)">进入管理中心</view>
					</view>
					<img src="../../assets/home/home_bubble.png" />
				</view>
				<view class="sy-show-box menu-show-box4 df jcc" v-show="showIndex==3">
					<view class="sy-show-content df fdc aic">
						<view class="menu-show-title">{{menu[3].title}}</view>
						<view class="menu-show-text">{{menu[3].text}}</view>
						<view class="menu-show-btn-gray df jcc aic" @click="onClick_menu_btn(3)">规划建设中</view>
					</view>
					<img src="../../assets/home/home_bubble_02.png" />
				</view>
			</view> -->
			<!-- <image class="BG" src="../../assets/home/homeBG.jpg" mode="widthFix" ></image> -->
			
			
			<img src="../../assets/home/homeBG.jpg" />

			<!-- <video class="myVideo" 
				:src="src"
				:controls="controls"
			     preload="auto"
			     autoplay
			     loop muted>
			</video> -->
			<view class='introVideo'>
				<video class="myVideo"
					:src="src">
				</video>
				<view class='videoControl'>
					<!-- <view class='experimentIntro' :class="[bExperimentIntroSelected==1?'experimentIntro-selected':'experimentIntro-noselect']" @click="onClickExperimentIntro">实验简介视频</view>
					<view class='slice'> / </view>
					<view class='teachingGuide' :class="[bTeachingGuideSelected==1?'teachingGuide-selected':'teachingGuide-noselect']" @click="onClickTeachingGuide">教学引导视频</view> -->
					<view :class="[bExperimentIntroSelected==1?'experimentIntro-selected':'experimentIntro-noselect']" @click="onClickExperimentIntro">实验简介视频</view>
					<view class='slice'> / </view>
					<view :class="[bteachingGuideSelected==1?'teachingGuide-selected':'teachingGuide-noselect']" @click="onClickTeachingGuide">教学引导视频</view>			
				</view>	
			</view>	
			
			
		<!-- 	<view class = 'theoryLearn' @click="onTheoryLearn()">理论学习</view>
			<view class = 'startExperiment' @click="onStartExperiment()">开始实验</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showIndex: -1,
				src:'https://zhongchuan1.oss-cn-beijing.aliyuncs.com/Video/home.MP4?versionId=CAEQDxiBgIDmyO_o0BciIGExNjQ1ZmJkNTVkOTRlMWRhNGRkZjAxNTEzZTMxOTll',
				// controls:false,
				bExperimentIntroSelected:1,
				bteachingGuideSelected:0,
				menu: [{
						"title": '虚拟仿真资产库',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
					{
						"title": '虚拟仿真1号摄影棚',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
					{
						"title": '影视项目开发管理中心',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
					{
						"title": '虚拟仿真主题拍摄基地',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
				]
			}
		},
		methods: {
			initData() {
				this.showIndex = -1;
				this.$forceUpdate()
			},
			onClick_menu(index) {
				if(!getApp().globalData.bLogin) {
					uni.showModal({
							title: '提示',
							showCancel: false,
							content: '请先点击右上角登录？',
							success: function(res) {
							if (res.confirm) {
								console.log('点击了确认')
							} else {
								console.log('点击了取消')
							}
						}
					})
					return
				};
				this.showIndex = index;
			},
			onClick_menu_btn(index) {
				if(!getApp().globalData.bLogin) {
					uni.showModal({
							title: '提示',
							showCancel: false,
							content: '请先点击右上角登录？',
							success: function(res) {
							if (res.confirm) {
								console.log('点击了确认')
							} else {
								console.log('点击了取消')
							}
						}
					})
					return
				};
				
				this.$emit("onClick_menu_btn", index);
			},
			onTheoryLearn(){
				if(!getApp().globalData.bLogin) {
					uni.showModal({
							title: '提示',
							showCancel: false,
							content: '请先点击右上角登录？',
							success: function(res) {
							if (res.confirm) {
								console.log('点击了确认')
							} else {
								console.log('点击了取消')
							}
						}
					})
					return
				};
				
				this.$emit("onTheoryLearnu_btn");
			},
			onStartExperiment(){
				if(!getApp().globalData.bLogin) {
					uni.showModal({
							title: '提示',
							content: '请先点击右上角登录？',
							success: function(res) {
							if (res.confirm) {
								console.log('点击了确认')
							} else {
								console.log('点击了取消')
							}
						}
					})
					return
				};
				
				this.$emit("onStartExperiment_btn");
			},
			onClickExperimentIntro(){
				this.bExperimentIntroSelected=1;
				this.bteachingGuideSelected=0;
				this.src='https://zhongchuan1.oss-cn-beijing.aliyuncs.com/Video/home.MP4?versionId=CAEQDxiBgIDmyO_o0BciIGExNjQ1ZmJkNTVkOTRlMWRhNGRkZjAxNTEzZTMxOTll';
			},
			onClickTeachingGuide(){
				this.bExperimentIntroSelected=0;
				this.bteachingGuideSelected=1;
				this.src='https://zhongchuan1.oss-cn-beijing.aliyuncs.com/Video/home.MP4?versionId=CAEQDxiBgIDmyO_o0BciIGExNjQ1ZmJkNTVkOTRlMWRhNGRkZjAxNTEzZTMxOTll';
			}
		}
	}
</script>

<style lang="scss">
	.homeBG {
		width: 100%;
		height: 100%;
	}

	.homeBG img {
		width: 100%;
	}
	
	.theoryLearn{
		position: absolute;
		
		left: 35%;
		bottom: 10%;
		
		width: 10%;
		height: 5%;
		
		display: flex;
		justify-content: center;
		align-items:center;
		
		background-color: #ff0000;
		color: #ffffff;
		
		border-radius: 15px 15px 15px 15px;
	}
		
	.startExperiment{
		position: absolute;
		right: 35%;
		bottom: 10%;
			
		width: 10%;
		height: 5%;	
			
		display: flex;
		justify-content: center;
		align-items:center;	
		
		
		background-color: #ff0000;
		color: #ffffff;
		
		border-radius: 15px 15px 15px 15px;
	}
	
	.sy-menu {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.sy-menu-box {
		position: absolute;
	}

	.sy-menu-text {
		color: #046093;
	}

	.menu-box1 {
		width: px2vw(350);
		height: px2vw(180);
		margin-left: px2vw(430);
		margin-top: px2vw(588);
	}

	.menu-text1 {
		font-size: px2vw(30);
		line-height: px2vw(40);
		margin-top: px2vw(40);
	}

	.menu-box2 {
		width: px2vw(350);
		height: px2vw(150);
		margin-left: px2vw(1150);
		margin-top: px2vw(588);
	}

	.menu-text2 {
		font-size: px2vw(26);
		line-height: px2vw(35);
		margin-top: px2vw(40);
	}

	.menu-box3 {
		width: px2vw(300);
		height: px2vw(80);
		margin-left: px2vw(600);
		margin-top: px2vw(450);
	}

	.menu-text3 {
		font-size: px2vw(20);
		line-height: px2vw(26);
		margin-top: px2vw(26);
	}

	.menu-box4 {
		width: px2vw(270);
		height: px2vw(80);
		margin-left: px2vw(1050);
		margin-top: px2vw(440);
	}

	.menu-text4 {
		font-size: px2vw(19);
		line-height: px2vw(25);
		margin-top: px2vw(25);
	}

	.sy-show-box {
		position: absolute;
		width: px2vw(361);
		height: px2vw(243);
	}

	.sy-show-content {
		position: absolute;
		width: px2vw(281);
	}

	.menu-show-title {
		margin-top: px2vw(23);
		font-size: px2vw(22);
		color: #EA252C;
		line-height: px2vw(29);
	}

	.menu-show-text {
		margin-top: px2vw(15);
		font-size: px2vw(16);
		color: #555555;
		line-height: px2vw(30);
		text-align: center;
	}

	.menu-show-btn {
		margin-top: px2vw(19);
		width: px2vw(183);
		height: px2vw(33);
		background: #EA252C;
		border-radius: px2vw(4);
		font-size: px2vw(16);
		color: #FFFFFF;
		line-height: px2vw(21);
	}
	.menu-show-btn-gray{
		margin-top: px2vw(19);
		width: px2vw(183);
		height: px2vw(33);
		background: #CCCCCC;
		border-radius: px2vw(4);
		font-size: px2vw(16);
		color: #FFFFFF;
		line-height: px2vw(21);
	}

	.menu-show-box1 {
		margin-left: px2vw(167);
		margin-top: px2vw(299);
	}

	.menu-show-box2 {
		margin-left: px2vw(1373);
		margin-top: px2vw(306);
	}

	.menu-show-box3 {
		margin-left: px2vw(670);
		margin-top: px2vw(171);
	}

	.menu-show-box4 {
		margin-left: px2vw(1144);
		margin-top: px2vw(171);
	}
	
	.introVideo{
		position: absolute;
		
		left: px2vw(24);
		top: px2vw(154);
		
		// width: px2vw(380);
		// height: px2vw(232);
		
		display: flex;
		justify-content: center;
		align-items:center;	
		flex-direction: column;
		
		// border: 3rpx solid #D7D7D7;
	}
	.myVideo{
		width: px2vw(380);
		height: px2vw(232);
	}
	.videoControl{
		width: 100%;
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		flex-direction: row;
		
		// border: 3rpx solid #D7D7D7;
	}
	.experimentIntro-selected{
		width: 100%;
		height: 100%;
		
		font-size: 30rpx;
		color: #ff0000;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		
		margin-left: 15%;
		// border: 3rpx solid #D7D7D7;
	}
	.experimentIntro-noselect{
		width: 100%;
		height: 100%;
		
		font-size: 30rpx;
		color: #c0c0c0;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		
		margin-left: 15%;
		// border: 3rpx solid #D7D7D7;
	}
	.slice{
		// width: 100%;
		height: 100%;
		
		font-size: 30rpx;
		color: #c0c0c0;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		
		// border: 3rpx solid #D7D7D7;
	}
	.teachingGuide-selected{
		width: 100%;
		height: 100%;
		
		font-size: 30rpx;
		color: #ff0000;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		
		margin-right: 15%;
		// border: 3rpx solid #D7D7D7;
	}
	.teachingGuide-noselect{
		width: 100%;
		height: 100%;
		
		font-size: 30rpx;
		color: #c0c0c0;
		
		display: flex;
		justify-content: center;
		align-items:center;	
		
		margin-right: 15%;
		// border: 3rpx solid #D7D7D7;
	}			
</style>