cocorobo-24/src/components/pages/index.vue

<template>
	<div class="pb_content2" style="background: #fff; display: inline">
		<div class="pb_content_body">
			<div class="top">
				<div class="pk">> PK赛</div>
				<div class="right">
					<div class="hg" @click="goTo('/leader')"></div>
					<div class="ts" @click="dialogVisible1 = true"></div>
				</div>
			</div>
			<div class="logo"></div>
			<div class="games">
				<div @click="goTo('/twentyFour')">> 入门级</div>
				<div @click="goTo('/advanced')">> 进阶级</div>
				<div @click="goTo('/master')">> 大师级</div>
				<div @click="goTo('/fun')">> 奇趣级</div>
			</div>
		</div>
		<el-dialog
			title="24点游戏玩法介绍"
			:visible.sync="dialogVisible1"
			:append-to-body="true"
			width="80%"
			:before-close="handleClose"
			class="dialog_diy1"
		>
			<div style="font-size: 0.9rem;">24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24 的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成 24。</div>
			<!-- <div>汇总数字得24则通关！</div> -->
		</el-dialog>
	</div>
</template>

<script>
	import "../../common/aws-sdk-2.235.1.min";

	export default {
		data() {
			return {
				dialogVisible1: false,
			};
		},
		computed: {
			playsinline() {
				let ua = navigator.userAgent.toLocaleLowerCase();
				// x5内核
				if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
					return false;
				} else {
					// ios端
					return true;
				}
			},
		},
		methods: {
			goBack() {
				document.getElementsByClassName("pb_content2")[0].style.display = "block";
				this.$router.isBack = true;
				if (window.history.length <= 1) {
					this.$router.push({ path: "/" });
					return false;
				} else {
					this.$router.go(-1);
				}
			},
			goTo(path) {
				this.$router.push(path);
			},
			handleClose(done) {
				done();
			},
		},
		created() {},
	};
</script>

<style scoped>
	.pb_content_body {
		font-size: 0.9rem;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		background-image: url("../../assets/twentyFour/sBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100%;
		position: relative;
	}

	.pb_content_body div {
		margin: 0.5rem 0 0;
	}
	.pb_content_body div > img {
		width: 5rem;
	}
	.pb_content_body .van-cell {
		margin: 0;
	}
	.pk {
		background: #e4c449;
		border: 4px solid #fff;
		border-radius: 8px;
		/* width: 100px; */
		padding: 0.3rem 1rem;
		text-align: center;
		font-size: 1rem;
		/* height: 25px;
		line-height: 25px; */
		color: #fff;
	}
	.top {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}
	.right {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 40%;
	}
	.hg {
		background-image: url(/static/img/hg.a65138c.png);
		background-size: 100% 100%;
		width: 30px;
		background-repeat: no-repeat;
		height: 30px;
		margin: 0 !important;
	}
	.ts {
		background-image: url("../../assets/twentyFour/ts.png");
		background-size: 100% 100%;
		width: 45px;
		height: 45px;
		background-repeat: no-repeat;
	}

	.right > div:nth-child(2) {
		margin: 0 0 0 15px !important;
	}
	.logo {
		height: 2rem;
		width: 80%;
		margin: 6rem auto 3rem auto !important;
		background-image: url(/static/img/logo.b64f47e.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.games {
		margin: 2rem auto;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}
	.games > div {
		background: #60a4e5;
		border: 4px solid #fff;
		border-radius: 8px;
		padding: 0.3rem 1rem;
		/* width: 100px; */
		text-align: center;
		font-size: 1.4rem;
		/* height: 30px;
		line-height: 30px; */
		color: #fff;
		cursor: pointer;
	}
	.dialog_diy1 >>> .el-dialog__header {
		background: #f6c14a;
		text-align: center;
		padding: 10px 0 !important;
	}
	.dialog_diy1 >>> .el-dialog__body {
		padding: 20px;
	}
	.dialog_diy1 >>> .el-dialog__title {
		color: #fff !important;
	}
	.dialog_diy1 >>> .el-dialog__headerbtn {
		background: url("../../assets/twentyFour/close.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		top: 13px !important;
		right: 13px !important;
	}

	.dialog_diy1 >>> .el-dialog__close {
		color: transparent !important;
	}
</style>