webglToy/src/page/index/Home/index.vue

<!--
 * @Author: your name
 * @Date: 2020-08-28 15:20:15
 * @LastEditTime: 2020-10-10 17:19:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
-->
<template>
	<div class="home">
		<Shader></Shader>
		<div class="overlay"></div>
		<div class="page grid js_show dialog">
			<div class="page__hd">
				<h1 class="page__title" style="font-size: 20px">
					大板栗的玩具屋
				</h1>
				<p class="page__desc" style="font-size: 18px">玩具列表</p>
				<p class="page__desc">have fun！</p>
			</div>
			<div class="weui-grids" style="margin-top: 100px">
				<div
					style="opacity: 0.5"
					@click="jump(1)"
					class="weui-grid link"
				>
					<div class="weui-grid__icon">
						<span class="iconfont">&#xe603;</span>
					</div>
					<p class="weui-grid__label">Color</p>
				</div>
				<div
					style="opacity: 0.5"
					@click="jump(2)"
					class="weui-grid link"
				>
					<div class="weui-grid__icon">
						<span class="iconfont">&#xe606;</span>
					</div>
					<p class="weui-grid__label">AR Paint</p>
				</div>
				<div style="opacity: 0.5" @click="jump(3)" class="weui-grid">
					<div class="weui-grid__icon">
						<span class="iconfont">&#xe605;</span>
					</div>
					<p class="weui-grid__label">AR HIT</p>
				</div>
				<div
					style="opacity: 0.5"
					@click="jump(4)"
					class="weui-grid link"
				>
					<div class="weui-grid__icon">
						<span class="iconfont">&#xe604;</span>
					</div>
					<p class="weui-grid__label">摄像机</p>
				</div>
				<div
					class="weui-grid link"
					style="opacity: 0.5"
					@click="jump(5)"
				>
					<div class="weui-grid__icon">
						<span class="iconfont">&#xe602;</span>
					</div>
					<p class="weui-grid__label">手势检测</p>
				</div>
				<div
					class="weui-grid link"
					style="opacity: 0.5"
					@click="jump(6)"
				>
					<div class="weui-grid__icon">
						<span class="iconfont">&#xe607;</span>
					</div>
					<p class="weui-grid__label">视频</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// @ is an alias to /src
import Shader from "@/components/shader/index.vue";

export default {
	name: "Index",
	components: {
		Shader,
	},
	mounted() {
		// this.$weui.toast('即将跳转至项目列表页', {
		//     duration: 3500,
		//     className: "toast-warn",
		// });
		// setTimeout(() => {
		//     location.href = './project-list.html'
		// }, 3500);
	},
	methods: {
		// 跳转
		jump(id) {
			// 第一个游戏
			if (id == 1) {
				this.$router.push({
					name: "Color",
					params: {},
				});
			} else if (id == 2) {
				this.$router.push({
					name: "AR",
					params: {},
				});
			} else if (id == 3) {
				this.$router.push({
					name: "ARHit",
					params: {},
				});
			} else if (id == 4) {
				this.$router.push({
					name: "Camera",
					params: {},
				});
			} else if (id == 5) {
				this.$router.push({
					name: "HandTrack",
				});
			} else if (id == 6) {
				this.$router.push({
					name: "Video",
				});
			}
		},
		showTips() {},
	},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.home {
	min-height: 100vh;
	.overlay {
		background-color: rgba(0, 0, 0, 0.5);
		.paLayout(0,0,100%,100%,101);
		pointer-events: none;
	}
	.link {
		cursor: pointer;
	}
	.dialog {
		.paLayout(0,0,100%,50%,102);
		color: #fff;
		.weui-grids {
			display: flex;
			flex-direction: row;
			justify-content: center;
			flex-wrap: wrap;
			font-size: 30px;
			.weui-grid {
				display: inline-block;
				width: 33.33%;
				height: 150px;
				margin-top: 10px;
				.iconfont {
					font-size: 40px;
				}
				.weui-grid__label {
					line-height: 80px;
					text-align: center;
				}
			}
		}
		.weui-grids::before,
		.weui-grids::after,
		.weui-grid:before,
		.weui-grid:after {
			display: none;
		}
		.weui-grid__label {
			color: #fff;
		}
		.weui-grid__icon {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.iconfont {
				font-size: 30px;
			}
		}
		.page__hd {
			padding: 40px;
		}
	}
}
</style>