yichael_zhongchuang_front_2/components/home/sy.vue

<template>
	<view class="myComRoot">
		<view class="df homeBG">
			<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>
			<img src="../../assets/home/homeBG.png" />
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		onLoad() {

		},
		data() {
			return {
				showIndex: -1,

				menu: [{
						"title": '虚拟仿真资产库',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
					{
						"title": '虚拟仿真1号摄影棚',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
					{
						"title": '影视项目开发管理中心',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
					{
						"title": '虚拟仿真主题拍摄基地',
						"text": '科学实验，是指根据一定目的，运用一定的仪器、设备等物质手'
					},
				]
			}
		},
		methods: {
			initData() {
				this.showIndex = -1;
				this.$forceUpdate()
			},
			onClick_menu(index) {
				this.showIndex = index;
			},
			onClick_menu_btn(index) {
				this.$emit("onClick_menu_btn", index);
			}
		}
	}
</script>

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

	.sy-menu {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.sy-menu-box {
		position: absolute;
		// background: #FFFFFF;
	}

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