1

Signed-off-by: lcw <1324309909@qq.com>

src/components/pages/advanced.vue

@@ -0,0 +1,918 @@
+<template>
+	<el-container class="content">
+		<el-header style="text-align: center">
+			<div @click="goTo('/index')" class="return"></div>
+			<div style="margin: 0 auto">进阶级</div>
+		</el-header>
+
+		<el-main>
+			<div class="main">
+				<div class="top">
+					<div style="color: #fff">
+						当前为第<span style="color: #2c628a; margin: 0 5px">{{
+							count + 1
+						}}</span
+						>关
+					</div>
+					<!-- <div class="left"></div> -->
+					<div class="right">
+						<div class="ts" @click="reduceTs"></div>
+						<div class="howPlay" @click="dialogVisible1 = true"></div>
+					</div>
+				</div>
+				<!-- 计算公式 -->
+
+				<!-- <el-card shadow="always">
+					{{ result }}
+				</el-card> -->
+
+				<!-- 随机数字 -->
+
+				<el-row :gutter="20">
+					<el-col :span="12" v-for="(num, index) in randomNum" :key="index">
+						<div class="card-sep">
+							<el-card
+								v-if="index == 0"
+								class="cardF"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 1"
+								class="cardS"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanSIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 2"
+								class="cardT"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanTIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else
+								class="cardFour"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFourIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+						</div>
+					</el-col>
+
+					<!-- <el-col :span="12">
+						    <el-card shadow="hover">
+						      3
+						    </el-card>
+						  </el-col>
+						</el-row>
+						<el-row :gutter="20">
+						  <el-col :span="12">
+						    <el-card shadow="always">
+						      8
+						    </el-card>
+						  </el-col>
+						  <el-col :span="12">
+						    <el-card shadow="hover">
+						      9
+						    </el-card>
+						  </el-col> -->
+				</el-row>
+
+				<!-- 运算符选择 -->
+				<div class="operator">
+					<div
+						class="add"
+						:class="{ addIsClick: calc == '+' }"
+						@click="add"
+					></div>
+
+					<div
+						class="inc"
+						:class="{ reduceIsClick: calc == '-' }"
+						@click="inc"
+					></div>
+				</div>
+				<!-- <el-row class="h-sep">
+					<el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-plus" @click="add"
+							>加</el-button
+						> -->
+				<!-- <div class="add" @click="add"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+							>减</el-button
+						> -->
+				<!-- <div class="inc" @click="inc"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4">
+						<el-button type="primary" plain icon="el-icon-close" @click="mul"
+							>乘</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button type="primary" plain icon="" @click="div"
+							>/&nbsp;&nbsp;除</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-left"
+							@click="left"
+							>括</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-right"
+							@click="right"
+							>号</el-button
+						>
+					</el-col> -->
+				<!-- </el-row> -->
+
+				<!-- <el-row :gutter="20" class="footBtn">
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-success"
+							@click="confirm"
+							>确定</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh-right"
+							@click="clean"
+							>清除</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh"
+							@click="resert"
+							>换题</el-button
+						>
+					</el-col>
+				</el-row> -->
+				<div class="bottom">
+					<div class="bottomT">
+						<div class="answer" @click="reduceTs"></div>
+						<div class="clean" @click="clean"></div>
+					</div>
+					<div class="next" @click="confirm"></div>
+				</div>
+			</div>
+		</el-main>
+		<!-- <div
+			id="cas"
+			style="
+				position: absolute;
+				width: 200px;
+				height: 200px;
+				left: 200px;
+				z-index: 99999;
+			"
+		></div> -->
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy"
+		>
+			<div class="tsAnswer">进阶级不提供提示</div>
+			<dir class="haveCount">今天还剩0次提示喔</dir>
+			<!-- <div class="tsAnswer">{{ rightAnswer }}</div> -->
+			<!-- <dir class="haveCount">今天还剩{{ ts }}次提示喔</dir> -->
+		</el-dialog>
+		<el-dialog
+			title="进阶级玩法介绍"
+			:visible.sync="dialogVisible1"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div>只用1-10的数字和加减法进行运算.</div>
+			<div>汇总数字得24则通关！</div>
+			<div>进阶级不提供提示</div>
+		</el-dialog>
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible2"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div style="margin-bottom: 15px">您已成功算成24点，恭喜你！</div>
+			<div
+				style="
+					width: 90px;
+					height: 25px;
+					border: 1px solid #75a8da;
+					text-align: center;
+					margin: 0 auto;
+					background: #75a8da;
+					color: #fff;
+					line-height: 25px;
+				"
+				@click="dialogVisible2 = false"
+			>
+				确定
+			</div>
+		</el-dialog>
+		<audio ref="source">
+			<source src="../../assets/twentyFour/clickM.mp3" type="audio/mpeg" />
+		</audio>
+        <audio ref="vm">
+			<source src="../../assets/twentyFour/vM.mp3" type="audio/mpeg" />
+		</audio>
+	</el-container>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				randomNum: ["", "", "", ""],
+				result: "",
+				tempResult: "",
+				flag0: false,
+				flag1: false,
+				flag2: false,
+				flag3: false,
+				calc: "",
+				num1: "",
+				nIndex: "",
+				nIndex2: "",
+				num2: "",
+				saveRandomNum: ["", "", "", ""],
+				count: 0,
+				rightAnswer: "",
+				dialogVisible: false,
+				dialogVisible1: false,
+				dialogVisible2: false,
+				ts: 3,
+				tiMu: [],
+				nowGq: 0,
+			};
+		},
+
+		mounted() {
+			this.getRandomNum();
+		},
+		watch: {},
+
+		methods: {
+			cards(randomNum) {
+				var array = randomNum;
+				var args = [];
+				if (array.length == 4) {
+					for (var i = 0; i < 4; i++) {
+						var j = parseInt(array[i]);
+						if (isNaN(j)) {
+							return;
+						}
+						args[i] = j;
+					}
+					var ret = this.find(args, 24);
+					var a = args.sort().toString();
+					if (ret.length == 0) {
+						this.getRandomNum();
+					} else {
+						if (this.tiMu.length > 0) {
+							for (var i = 0; i < this.tiMu.length; i++) {
+								if (this.tiMu[i] == a) {
+									this.getRandomNum();
+								}
+							}
+							this.rightAnswer = ret + "=24";
+						} else {
+							this.rightAnswer = ret + "=24";
+						}
+					}
+				} else {
+					console.log("len: " + array.length);
+				}
+			},
+
+			handleClose(done) {
+				done();
+			},
+
+			goTo(path) {
+				this.$router.push(path);
+			},
+
+			reduceTs() {
+				this.dialogVisible = true;
+				if (this.nowGq > 0) {
+					return;
+				}
+				this.ts -= 1;
+				this.nowGq++;
+				if (this.ts == -1) {
+					this.rightAnswer = "今日提示已达上限";
+					this.ts = 0;
+				}
+			},
+
+			find3(a, b, target) {
+				if (a + b === target) {
+					return a + "+" + b;
+				} else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+			remove(array, index) {
+				var out = [];
+				var j = 0;
+				for (var i = 0; i < array.length; i++) {
+					if (i == index) {
+						continue;
+					}
+					out[j] = array[i];
+					j++;
+				}
+				return out;
+			},
+			find(array, target) {
+				// js 中必须用var声明，限制作用域。
+				var out = "";
+				var ret = "";
+				var i = 0;
+				var left;
+
+				if (array.length == 2) {
+					out = this.find3(array[0], array[1], target);
+					if (out.length > 0) {
+						return "(" + out + ")";
+					}
+					return "";
+				}
+
+				var x;
+				for (i = 0; i < array.length; i++) {
+					x = array[i];
+					left = this.remove(array, i);
+
+					// if (target != 0 && (target % x == 0 || x % target == 0)) {
+					// 	if (target > x) {
+					// 		ret = find(left, target / x);
+					// 		if (ret.length > 0) {
+					// 			out = x + "*" + ret;
+					// 			break;
+					// 		}
+					// 	} else {
+					// 		ret = find(left, x / target);
+					// 		if (ret.length > 0) {
+					// 			out = x + "/" + ret;
+					// 			break;
+					// 		}
+					// 	}
+					// }
+
+					if (target > x) {
+						ret = this.find(left, target - x);
+						if (ret.length > 0) {
+							out = x + "+" + ret;
+							break;
+						}
+					} else {
+						ret = this.find(left, x - target);
+						if (ret.length > 0) {
+							out = x + "-" + ret;
+							break;
+						}
+					}
+
+					// ret = this.find(left, x * target);
+					// if (ret.length > 0) {
+					// 	out = ret + "/" + x;
+					// 	break;
+					// }
+					ret = this.find(left, target + x);
+					if (ret.length > 0) {
+						out = ret + "-" + x;
+						break;
+					}
+				}
+
+				if (out.length > 0) {
+					if (array.length == 4) {
+						return out;
+					} else {
+						return "(" + out + ")";
+					}
+				}
+				return "";
+			},
+			getRandomNum() {
+				this.randomNum = [];
+
+				for (var i = 0; i < 4; i++) {
+					// 生成1-9的随机数
+
+					this.randomNum.push(Math.floor(Math.random(9) * 25 + 1));
+				}
+				this.saveRandomNum = [...this.randomNum];
+				this.cards(this.randomNum);
+			},
+			// isTrue(){
+
+			// },
+			getVal(num, index) {
+				var num = parseInt(num);
+				var b = 0;
+				this.$refs.source.play();
+				if (this.num1 && this.calc) {
+					this.num2 = num;
+				} else {
+					this.num1 = num;
+				}
+
+				if (this.nIndex === index) {
+					this.nIndex = "";
+					this.num1 = "";
+				} else if (this.nIndex === "") {
+					this.nIndex = index;
+				} else if (this.nIndex !== "" && this.calc) {
+					this.nIndex2 = index;
+				} else {
+					this.nIndex = index;
+				}
+				if (
+					(this.nIndex || this.nIndex === 0) &&
+					(this.nIndex2 || this.nIndex2 === 0) &&
+					this.calc
+				) {
+					// this.result += num;
+					if (this.calc === "+") {
+						this.result = this.num1 + this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+                                this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					} else if (this.calc === "-") {
+						this.result = this.num1 - this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+                                this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}
+				}
+				// this.randomNum[0] = num;
+			},
+
+			// 重置flag标识
+
+			resertFlag() {
+				this.nIndex = "";
+				this.nIndex2 = "";
+				this.calc = "";
+				this.num2 = "";
+				this.num1 = "";
+			},
+
+			add() {
+				this.$refs.source.play();
+				if (this.calc == "+") {
+					this.calc = "";
+				} else {
+					this.result += "+";
+					this.calc = "+";
+				}
+			},
+
+			inc() {
+				this.$refs.source.play();
+				if (this.calc == "-") {
+					this.calc = "";
+				} else {
+					this.result += "-";
+					this.calc = "-";
+				}
+			},
+
+			// mul() {
+			// 	this.result += "*";
+			// },
+
+			// div() {
+			// 	this.result += "/";
+			// },
+
+			// left() {
+			// 	this.result += "(";
+			// },
+
+			// right() {
+			// 	this.result += ")";
+			// },
+
+			clean() {
+				this.result = "";
+				this.randomNum = [...this.saveRandomNum];
+				this.resertFlag();
+			},
+
+			confirm() {
+				// 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现
+				var count = 0;
+				for (var i = 0; i < this.randomNum.length; i++) {
+					if (this.randomNum[i] == "") {
+						count++;
+					}
+				}
+				this.tempResult = eval(this.result);
+				if (count == 3) {
+					if (this.tempResult === 24) {
+						this.$message.success("计算正确！");
+						this.tiMu.push([...this.saveRandomNum].sort().toString());
+
+						// this.$message({
+
+						//   showClose: true,
+
+						//   message: '正确',
+
+						//   type: 'success'
+
+						// });
+						this.nowGq = 0;
+						this.result = "";
+						this.count += 1;
+						if (this.count == 4) {
+							this.$message.success("恭喜你通关成功");
+							this.$router.push("/index");
+						} else {
+							this.getRandomNum();
+						}
+					} else {
+						this.$message.error("计算错误！");
+
+						this.result = "";
+
+						this.resertFlag();
+					}
+				} else {
+					this.$message.error("每个数字都要用到！");
+				}
+			},
+
+			resert() {
+				//刷新题目
+				this.getRandomNum();
+
+				this.resertFlag();
+
+				this.result = "";
+			},
+		},
+		created() {
+			this.getRandomNum();
+		},
+	};
+</script>
+
+
+
+<style scoped>
+	html,
+	body,
+	#app {
+		text-align: center;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+	}
+
+	.el-header {
+		height: 40px !important;
+		background: #f4f4f4;
+		text-align: center;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		position: relative;
+	}
+
+	.el-container {
+		height: 100%;
+	}
+
+	.el-row {
+		margin-top: 2.5rem;
+		height: 260px;
+	}
+
+	.el-col-12 {
+		height: 130px;
+	}
+
+	.el-card__body {
+		height: 3.75rem;
+		font-size: xx-large;
+		line-height: 3.75rem;
+	}
+
+	.footBtn {
+		margin-left: 0 !important;
+	}
+
+	.card-sep {
+		margin-bottom: 0.5rem;
+	}
+
+	.cardF {
+		background-image: url("../../assets/twentyFour/xuanF.png");
+		height: 120px;
+	}
+	.cardS {
+		background-image: url("../../assets/twentyFour/xuanS.png");
+		height: 120px;
+	}
+	.cardT {
+		background-image: url("../../assets/twentyFour/xuanT.png");
+		height: 120px;
+	}
+	.cardFour {
+		background-image: url("../../assets/twentyFour/xuanFour.png");
+		height: 120px;
+	}
+
+	.h-sep {
+		margin-top: 1.375rem;
+	}
+
+	.top {
+		height: 35px;
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.content,
+	.left,
+	.ts,
+	.howPlay,
+	.cardF,
+	.cardS,
+	.cardT,
+	.cardFour,
+	.add,
+	.inc,
+	.answer,
+	.clean,
+	.next,
+	.xuanFIsClick,
+	.xuanSIsClick,
+	.xuanTIsClick,
+	.xuanFourIsClick,
+	.addIsClick,
+	.reduceIsClick {
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+	.content {
+		background-image: url("../../assets/twentyFour/gameBg.png");
+		position: relative;
+	}
+	.content >>> .el-main {
+		padding: 60px 20px 20px 20px !important;
+	}
+
+	.left {
+		background-image: url("../../assets/twentyFour/now.png");
+		width: 40%;
+		height: 20px;
+	}
+	.right {
+		width: 60%;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		height: 35px;
+	}
+	.ts {
+		background-image: url("../../assets/twentyFour/ts.png");
+		width: 35px;
+	}
+	.howPlay {
+		background-image: url("../../assets/twentyFour/howPlay.png");
+		width: 35px;
+		margin-left: 5px;
+	}
+
+	.card-sep >>> .is-always-shadow {
+		box-shadow: none !important;
+	}
+	.card-sep >>> .el-card {
+		border: none !important;
+		background-color: transparent !important;
+	}
+	.card-sep >>> .el-card__body {
+		color: #fff;
+		text-align: center;
+		height: 120px;
+		line-height: 120px;
+		font-size: 60px;
+		padding: 0 !important;
+	}
+
+	.add {
+		background-image: url("../../assets/twentyFour/add.png");
+		height: 60px;
+		width: 60px;
+	}
+	.inc {
+		background-image: url("../../assets/twentyFour/reduce.png");
+		height: 60px;
+		width: 60px;
+	}
+	.operator {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+		align-items: center;
+		margin-top: 35px;
+	}
+	.bottom {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		margin-top: 25px;
+	}
+	.bottomT {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+	.answer {
+		background-image: url("../../assets/twentyFour/answer.png");
+		height: 45px;
+		width: 50%;
+	}
+	.clean {
+		background-image: url("../../assets/twentyFour/clean.png");
+		height: 45px;
+		width: 50%;
+	}
+	.next {
+		background-image: url("../../assets/twentyFour/next.png");
+		height: 50px;
+		width: 100%;
+		margin-top: 10px;
+	}
+	.xuanFIsClick {
+		background-image: url("../../assets/twentyFour/xuanFIsClick.png") !important;
+	}
+	.xuanSIsClick {
+		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+	}
+	.xuanTIsClick {
+		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+	}
+	.xuanFourIsClick {
+		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+	}
+	.addIsClick {
+		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+	}
+	.reduceIsClick {
+		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+	}
+	.dialog_diy >>> .el-dialog__header {
+		background: #fa7258;
+		text-align: center;
+		padding: 10px 0 !important;
+	}
+	.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_diy >>> .el-dialog__title {
+		color: #fff !important;
+	}
+	.tsAnswer {
+		color: #fa7258;
+		font-size: 20px;
+		text-align: center;
+	}
+	.haveCount {
+		text-align: center;
+		padding: 0;
+		margin-top: 20px;
+		font-size: 11px;
+		color: #cbcbcb;
+		font-family: FZShuTi;
+	}
+	.dialog_diy >>> .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__headerbtn {
+		background: url("../../assets/twentyFour/close.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		top: 13px !important;
+		right: 13px !important;
+	}
+	.dialog_diy >>> .el-dialog__close,
+	.dialog_diy1 >>> .el-dialog__close {
+		color: transparent !important;
+	}
+
+	.return {
+		background: url("../../assets/twentyFour/fanhui.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		width: 25px;
+		height: 25px;
+		position: absolute;
+	}
+</style>

src/components/pages/fun.vue

@@ -0,0 +1,1051 @@
+<template>
+	<el-container class="content">
+		<el-header style="text-align: center">
+			<div @click="goTo('/index')" class="return"></div>
+			<div style="margin: 0 auto">奇趣级</div>
+		</el-header>
+
+		<el-main>
+			<div class="main">
+				<div class="top">
+					<div style="color: #fff">
+						当前为第<span style="color: #2c628a; margin: 0 5px">{{
+							count + 1
+						}}</span
+						>关
+					</div>
+					<!-- <div class="left"></div> -->
+					<div class="right">
+						<div class="ts" @click="reduceTs"></div>
+						<div class="howPlay" @click="dialogVisible1 = true"></div>
+					</div>
+				</div>
+				<!-- 计算公式 -->
+
+				<!-- <el-card shadow="always">
+					{{ result }}
+				</el-card> -->
+
+				<!-- 随机数字 -->
+
+				<el-row :gutter="20">
+					<el-col :span="12" v-for="(num, index) in randomNum" :key="index">
+						<div class="card-sep">
+							<el-card
+								v-if="index == 0"
+								class="cardF"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 1"
+								class="cardS"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanSIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 2"
+								class="cardT"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanTIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 3"
+								class="cardFour"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFourIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+                            <el-card
+								v-else-if="index == 4"
+								class="cardFour"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFourIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+                            <el-card
+								v-else
+								class="cardFour"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFourIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+						</div>
+					</el-col>
+
+					<!-- <el-col :span="12">
+						    <el-card shadow="hover">
+						      3
+						    </el-card>
+						  </el-col>
+						</el-row>
+						<el-row :gutter="20">
+						  <el-col :span="12">
+						    <el-card shadow="always">
+						      8
+						    </el-card>
+						  </el-col>
+						  <el-col :span="12">
+						    <el-card shadow="hover">
+						      9
+						    </el-card>
+						  </el-col> -->
+				</el-row>
+
+				<!-- 运算符选择 -->
+				<div class="operator">
+					<div
+						class="add"
+						:class="{ addIsClick: calc == '+' }"
+						@click="add"
+					></div>
+
+					<div
+						class="inc"
+						:class="{ reduceIsClick: calc == '-' }"
+						@click="inc"
+					></div>
+					<div
+						class="take"
+						:class="{ takeIsClick: calc == '*' }"
+						@click="mul"
+					></div>
+					<div
+						class="remove"
+						:class="{ removeIsClick: calc == '/' }"
+						@click="div"
+					></div>
+				</div>
+				<!-- <el-row class="h-sep">
+					<el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-plus" @click="add"
+							>加</el-button
+						> -->
+				<!-- <div class="add" @click="add"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+							>减</el-button
+						> -->
+				<!-- <div class="inc" @click="inc"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4">
+						<el-button type="primary" plain icon="el-icon-close" @click="mul"
+							>乘</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button type="primary" plain icon="" @click="div"
+							>/&nbsp;&nbsp;除</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-left"
+							@click="left"
+							>括</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-right"
+							@click="right"
+							>号</el-button
+						>
+					</el-col> -->
+				<!-- </el-row> -->
+
+				<!-- <el-row :gutter="20" class="footBtn">
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-success"
+							@click="confirm"
+							>确定</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh-right"
+							@click="clean"
+							>清除</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh"
+							@click="resert"
+							>换题</el-button
+						>
+					</el-col>
+				</el-row> -->
+				<div class="bottom">
+					<div class="bottomT">
+						<div class="answer" @click="reduceTs"></div>
+						<div class="clean" @click="clean"></div>
+					</div>
+					<div class="next" @click="confirm"></div>
+				</div>
+			</div>
+		</el-main>
+		<!-- <div
+			id="cas"
+			style="
+				position: absolute;
+				width: 200px;
+				height: 200px;
+				left: 200px;
+				z-index: 99999;
+			"
+		></div> -->
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy"
+		>
+			<div class="tsAnswer">奇趣级不提供提示</div>
+			<dir class="haveCount">今天还剩0次提示喔</dir>
+			<!-- <div class="tsAnswer">{{ rightAnswer }}</div> -->
+			<!-- <dir class="haveCount">今天还剩{{ ts }}次提示喔</dir> -->
+		</el-dialog>
+		<el-dialog
+			title="奇趣级玩法介绍"
+			:visible.sync="dialogVisible1"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div>只用1-10的数字和加减法进行运算.</div>
+			<div>汇总数字得24则通关！</div>
+			<div>奇趣级不提供提示</div>
+		</el-dialog>
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible2"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div style="margin-bottom: 15px">您已成功算成24点，恭喜你！</div>
+			<div
+				style="
+					width: 90px;
+					height: 25px;
+					border: 1px solid #75a8da;
+					text-align: center;
+					margin: 0 auto;
+					background: #75a8da;
+					color: #fff;
+					line-height: 25px;
+				"
+				@click="dialogVisible2 = false"
+			>
+				确定
+			</div>
+		</el-dialog>
+		<audio ref="source">
+			<source src="../../assets/twentyFour/clickM.mp3" type="audio/mpeg" />
+		</audio>
+		<audio ref="vm">
+			<source src="../../assets/twentyFour/vM.mp3" type="audio/mpeg" />
+		</audio>
+	</el-container>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				randomNum: ["", "", "", "","",""],
+				result: "",
+				tempResult: "",
+				flag0: false,
+				flag1: false,
+				flag2: false,
+				flag3: false,
+				calc: "",
+				num1: "",
+				nIndex: "",
+				nIndex2: "",
+				num2: "",
+				saveRandomNum: ["", "", "", "","",""],
+				count: 0,
+				rightAnswer: "",
+				dialogVisible: false,
+				dialogVisible1: false,
+				dialogVisible2: false,
+				ts: 3,
+				tiMu: [],
+				nowGq: 0,
+			};
+		},
+
+		mounted() {
+			this.getRandomNum();
+		},
+		watch: {},
+
+		methods: {
+			cards(randomNum) {
+				var array = randomNum;
+				var args = [];
+				if (array.length == 4) {
+					for (var i = 0; i < 4; i++) {
+						var j = parseInt(array[i]);
+						if (isNaN(j)) {
+							return;
+						}
+						args[i] = j;
+					}
+					var ret = this.find(args, 24);
+					var a = args.sort().toString();
+					if (ret.length == 0) {
+						this.getRandomNum();
+					} else {
+						if (this.tiMu.length > 0) {
+							for (var i = 0; i < this.tiMu.length; i++) {
+								if (this.tiMu[i] == a) {
+									this.getRandomNum();
+								}
+							}
+							this.rightAnswer = ret + "=24";
+						} else {
+							this.rightAnswer = ret + "=24";
+						}
+					}
+				} else {
+					console.log("len: " + array.length);
+				}
+			},
+
+			handleClose(done) {
+				done();
+			},
+
+			goTo(path) {
+				this.$router.push(path);
+			},
+
+			reduceTs() {
+				this.dialogVisible = true;
+				if (this.nowGq > 0) {
+					return;
+				}
+				this.ts -= 1;
+				this.nowGq++;
+				if (this.ts == -1) {
+					this.rightAnswer = "今日提示已达上限";
+					this.ts = 0;
+				}
+			},
+
+			find3(a, b, target) {
+				if (a + b === target) {
+					return a + "+" + b;
+				} else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+            find2(a, b, target) {
+				if (a * b === target) {
+					return a + "*" + b;
+				} else if (a + b === target) {
+					return a + "+" + b;
+				} else if (a % b === 0 || b % a === 0) {
+					if (a / b === target) {
+						return a + "/" + b;
+					}
+					if (b / a === target) {
+						return b + "/" + a;
+					}
+				} else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+			remove(array, index) {
+				var out = [];
+				var j = 0;
+				for (var i = 0; i < array.length; i++) {
+					if (i == index) {
+						continue;
+					}
+					out[j] = array[i];
+					j++;
+				}
+				return out;
+			},
+			find(array, target) {
+				// js 中必须用var声明，限制作用域。
+				var out = "";
+				var ret = "";
+				var i = 0;
+				var left;
+
+				if (array.length == 2) {
+					out = this.find2(array[0], array[1], target);
+					if (out.length > 0) {
+						return "(" + out + ")";
+					}
+					return "";
+				}
+
+				var x;
+				for (i = 0; i < array.length; i++) {
+					x = array[i];
+					left = this.remove(array, i);
+
+					if (target != 0 && (target % x == 0 || x % target == 0)) {
+						if (target > x) {
+							ret = find(left, target / x);
+							if (ret.length > 0) {
+								out = x + "*" + ret;
+								break;
+							}
+						} else {
+							ret = find(left, x / target);
+							if (ret.length > 0) {
+								out = x + "/" + ret;
+								break;
+							}
+						}
+					}
+
+					if (target > x) {
+						ret = this.find(left, target - x);
+						if (ret.length > 0) {
+							out = x + "+" + ret;
+							break;
+						}
+					} else {
+						ret = this.find(left, x - target);
+						if (ret.length > 0) {
+							out = x + "-" + ret;
+							break;
+						}
+					}
+
+					ret = this.find(left, x * target);
+					if (ret.length > 0) {
+						out = ret + "/" + x;
+						break;
+					}
+					ret = this.find(left, target + x);
+					if (ret.length > 0) {
+						out = ret + "-" + x;
+						break;
+					}
+				}
+
+				if (out.length > 0) {
+					if (array.length == 4) {
+						return out;
+					} else {
+						return "(" + out + ")";
+					}
+				}
+				return "";
+			},
+			getRandomNum() {
+				this.randomNum = [];
+                // this.randomNum = ["","","","","",""];
+				for (var i = 0; i < 6; i++) {
+					// 生成1-9的随机数
+
+					this.randomNum.push(Math.floor(Math.random(9) * 25 + 1));
+				}
+				this.saveRandomNum = [...this.randomNum];
+				this.cards(this.randomNum);
+			},
+			// isTrue(){
+
+			// },
+			getVal(num, index) {
+				var num = parseInt(num);
+				var b = 0;
+				this.$refs.source.play();
+				if (this.num1 && this.calc) {
+					this.num2 = num;
+				} else {
+					this.num1 = num;
+				}
+
+				if (this.nIndex === index) {
+					this.nIndex = "";
+					this.num1 = "";
+				} else if (this.nIndex === "") {
+					this.nIndex = index;
+				} else if (this.nIndex !== "" && this.calc) {
+					this.nIndex2 = index;
+				} else {
+					this.nIndex = index;
+				}
+				if (
+					(this.nIndex || this.nIndex === 0) &&
+					(this.nIndex2 || this.nIndex2 === 0) &&
+					this.calc
+				) {
+					// this.result += num;
+					if (this.calc === "+") {
+						this.result = this.num1 + this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "" || this.randomNum[i] === 0) {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					} else if (this.calc === "-") {
+						this.result = this.num1 - this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "" || this.randomNum[i] === 0) {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}else if (this.calc === "*") {
+						this.result = this.num1 * this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "" || this.randomNum[i] === 0) {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}else if (this.calc === "/") {
+                        if(this.num1 === ""){
+                            this.num1 = 0;
+                        }else if(this.num2 === ""){
+                            this.num2 = 0;
+                        }
+						this.result = this.num1 / this.num2;
+                        if(this.result === Infinity){
+                            this.result = 0;
+                        }
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "" || this.randomNum[i] === 0) {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}
+				}
+				// this.randomNum[0] = num;
+			},
+
+			// 重置flag标识
+
+			resertFlag() {
+				this.nIndex = "";
+				this.nIndex2 = "";
+				this.calc = "";
+				this.num2 = "";
+				this.num1 = "";
+			},
+
+			add() {
+				this.$refs.source.play();
+				if (this.calc == "+") {
+					this.calc = "";
+				} else {
+					this.result += "+";
+					this.calc = "+";
+				}
+			},
+
+			inc() {
+				this.$refs.source.play();
+				if (this.calc == "-") {
+					this.calc = "";
+				} else {
+					this.result += "-";
+					this.calc = "-";
+				}
+			},
+
+			mul() {
+				this.$refs.source.play();
+				if (this.calc == "*") {
+					this.calc = "";
+				} else {
+					this.result += "*";
+					this.calc = "*";
+				}
+			},
+
+			div() {
+                this.$refs.source.play();
+				if (this.calc == "/") {
+					this.calc = "";
+				} else {
+					this.result += "/";
+					this.calc = "/";
+				}
+			},
+
+			// left() {
+			// 	this.result += "(";
+			// },
+
+			// right() {
+			// 	this.result += ")";
+			// },
+
+			clean() {
+				this.result = "";
+				this.randomNum = [...this.saveRandomNum];
+				this.resertFlag();
+			},
+
+			confirm() {
+				// 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现
+				var count = 0;
+				for (var i = 0; i < this.randomNum.length; i++) {
+					if (this.randomNum[i] == "") {
+						count++;
+					}
+				}
+				this.tempResult = eval(this.result);
+				if (count == 3) {
+					if (this.tempResult === 24) {
+						this.$message.success("计算正确！");
+						this.tiMu.push([...this.saveRandomNum].sort().toString());
+
+						// this.$message({
+
+						//   showClose: true,
+
+						//   message: '正确',
+
+						//   type: 'success'
+
+						// });
+						this.nowGq = 0;
+						this.result = "";
+						this.count += 1;
+						if (this.count == 4) {
+							this.$message.success("恭喜你通关成功");
+							this.$router.push("/index");
+						} else {
+							this.getRandomNum();
+						}
+					} else {
+						this.$message.error("计算错误！");
+
+						this.result = "";
+
+						this.resertFlag();
+					}
+				} else {
+					this.$message.error("每个数字都要用到！");
+				}
+			},
+
+			resert() {
+				//刷新题目
+				this.getRandomNum();
+
+				this.resertFlag();
+
+				this.result = "";
+			},
+		},
+		created() {
+			this.getRandomNum();
+		},
+	};
+</script>
+
+
+
+<style scoped>
+	html,
+	body,
+	#app {
+		text-align: center;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+	}
+
+	.el-header {
+		height: 40px !important;
+		background: #f4f4f4;
+		text-align: center;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		position: relative;
+	}
+
+    .el-main{
+        overflow: unset !important;
+    }
+
+	.el-container {
+		height: 100%;
+	}
+
+	.el-row {
+		margin-top: 2.5rem;
+		height: 400px;
+	}
+
+	.el-col-12 {
+		height: 130px;
+	}
+
+	.el-card__body {
+		height: 3.75rem;
+		font-size: xx-large;
+		line-height: 3.75rem;
+	}
+
+	.footBtn {
+		margin-left: 0 !important;
+	}
+
+	.card-sep {
+		margin-bottom: 0.5rem;
+	}
+
+	.cardF {
+		background-image: url("../../assets/twentyFour/xuanF.png");
+		height: 120px;
+	}
+	.cardS {
+		background-image: url("../../assets/twentyFour/xuanS.png");
+		height: 120px;
+	}
+	.cardT {
+		background-image: url("../../assets/twentyFour/xuanT.png");
+		height: 120px;
+	}
+	.cardFour {
+		background-image: url("../../assets/twentyFour/xuanFour.png");
+		height: 120px;
+	}
+
+	.h-sep {
+		margin-top: 1.375rem;
+	}
+
+	.top {
+		height: 35px;
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.content,
+	.left,
+	.ts,
+	.howPlay,
+	.cardF,
+	.cardS,
+	.cardT,
+	.cardFour,
+	.add,
+	.inc,
+	.answer,
+	.clean,
+	.next,
+    .take,
+    .remove,
+	.xuanFIsClick,
+	.xuanSIsClick,
+	.xuanTIsClick,
+	.xuanFourIsClick,
+	.addIsClick,
+	.reduceIsClick,
+    .takeIsClick,
+    .removeIsClick {
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+	.content {
+		background-image: url("../../assets/twentyFour/gameBg.png");
+		position: relative;
+	}
+	.content >>> .el-main {
+		padding: 60px 20px 20px 20px !important;
+	}
+
+	.left {
+		background-image: url("../../assets/twentyFour/now.png");
+		width: 40%;
+		height: 20px;
+	}
+	.right {
+		width: 60%;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		height: 35px;
+	}
+	.ts {
+		background-image: url("../../assets/twentyFour/ts.png");
+		width: 35px;
+	}
+	.howPlay {
+		background-image: url("../../assets/twentyFour/howPlay.png");
+		width: 35px;
+		margin-left: 5px;
+	}
+
+	.card-sep >>> .is-always-shadow {
+		box-shadow: none !important;
+	}
+	.card-sep >>> .el-card {
+		border: none !important;
+		background-color: transparent !important;
+	}
+	.card-sep >>> .el-card__body {
+		color: #fff;
+		text-align: center;
+		height: 120px;
+		line-height: 120px;
+		font-size: 60px;
+		padding: 0 !important;
+	}
+
+	.add {
+		background-image: url("../../assets/twentyFour/add.png");
+		height: 60px;
+		width: 60px;
+	}
+	.inc {
+		background-image: url("../../assets/twentyFour/reduce.png");
+		height: 60px;
+		width: 60px;
+	}
+	.take {
+		background-image: url("../../assets/twentyFour/take.png");
+		height: 60px;
+		width: 60px;
+	}
+	.remove {
+		background-image: url("../../assets/twentyFour/remove.png");
+		height: 60px;
+		width: 60px;
+	}
+	.operator {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+		align-items: center;
+		margin-top: 35px;
+	}
+	.bottom {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		margin-top: 25px;
+	}
+	.bottomT {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+	.answer {
+		background-image: url("../../assets/twentyFour/answer.png");
+		height: 45px;
+		width: 50%;
+	}
+	.clean {
+		background-image: url("../../assets/twentyFour/clean.png");
+		height: 45px;
+		width: 50%;
+	}
+	.next {
+		background-image: url("../../assets/twentyFour/next.png");
+		height: 50px;
+		width: 100%;
+		margin-top: 10px;
+	}
+	.xuanFIsClick {
+		background-image: url("../../assets/twentyFour/xuanFIsClick.png") !important;
+	}
+	.xuanSIsClick {
+		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+	}
+	.xuanTIsClick {
+		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+	}
+	.xuanFourIsClick {
+		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+	}
+	.addIsClick {
+		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+	}
+	.reduceIsClick {
+		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+	}
+	.takeIsClick {
+		background-image: url("../../assets/twentyFour/takeIsClick.png") !important;
+	}
+	.removeIsClick {
+		background-image: url("../../assets/twentyFour/removeIsClick.png") !important;
+	}
+	.dialog_diy >>> .el-dialog__header {
+		background: #fa7258;
+		text-align: center;
+		padding: 10px 0 !important;
+	}
+	.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_diy >>> .el-dialog__title {
+		color: #fff !important;
+	}
+	.tsAnswer {
+		color: #fa7258;
+		font-size: 20px;
+		text-align: center;
+	}
+	.haveCount {
+		text-align: center;
+		padding: 0;
+		margin-top: 20px;
+		font-size: 11px;
+		color: #cbcbcb;
+		font-family: FZShuTi;
+	}
+	.dialog_diy >>> .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__headerbtn {
+		background: url("../../assets/twentyFour/close.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		top: 13px !important;
+		right: 13px !important;
+	}
+	.dialog_diy >>> .el-dialog__close,
+	.dialog_diy1 >>> .el-dialog__close {
+		color: transparent !important;
+	}
+
+	.return {
+		background: url("../../assets/twentyFour/fanhui.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		width: 25px;
+		height: 25px;
+		position: absolute;
+	}
+</style>

src/components/pages/index.vue

@@ -0,0 +1,153 @@
+<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"></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>
+	</div>
+</template>
+
+<script>
+	import "../../common/aws-sdk-2.235.1.min";
+
+	export default {
+		data() {
+			return {};
+		},
+		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);
+			},
+		},
+		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;
+		text-align: center;
+		font-size: 16px;
+		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: 30px;
+		height: 30px;
+		background-repeat: no-repeat;
+	}
+
+	.right > div:nth-child(2) {
+		margin: 0 0 0 15px !important;
+	}
+	.logo {
+		height: 5rem;
+		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;
+		width: 100px;
+		text-align: center;
+		font-size: 16px;
+		height: 30px;
+		line-height: 30px;
+		color: #fff;
+		cursor: pointer;
+	}
+</style>

src/components/pages/isRight.vue

@@ -0,0 +1,192 @@
+<template>
+	<div class="container" id="app">
+		<div class="row">
+			<nav class="navbar navbar-expand-lg navbar-light">
+				<a class="navbar-brand" href="#">首页</a>
+			</nav>
+		</div>
+		<div class="row align-items-start mx-auto">
+			<form class="form-horizontal" role="form">
+				<div class="alert alert-success">输入4张扑克牌的点数：如2 3 5 8</div>
+				<div class="form-group row">
+					<label class="col-5">4张扑克牌</label>
+					<div class="col">
+						<input
+							type="text"
+							v-model="cards"
+							class="form-control"
+							id="cards"
+							value=""
+						/>
+					</div>
+				</div>
+				<div class="form-group row">
+					<label class="col-5">结果</label>
+					<div class="col">
+						<input type="text" v-model="result" class="form-control" />
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+</template>
+
+        <script>
+	export default {
+		data() {
+			return {
+				show: "get",
+				cards: "",
+				result: "",
+			};
+		},
+
+		watch: {
+			cards(newVal, oldVal) {
+				var stripped = newVal.trim();
+				var array = stripped.split(" ");
+				var args = [];
+				if (array.length == 6) {
+					for (var i = 0; i < 6; i++) {
+						var j = parseInt(array[i]);
+						if (isNaN(j)) {
+							return;
+						}
+						args[i] = j;
+					}
+					var ret = this.find(args, 24);
+					if (ret.length > 0) {
+						this.result = ret + "=24";
+					} else {
+						this.result = "没有找到";
+					}
+				} else {
+					console.log("len: " + array.length);
+				}
+			},
+		},
+		methods: {
+			calc() {
+				console.log("start calculate");
+				console.log(find([8, 2, 3, 5], 24));
+			},
+            find3(a, b, target) {
+				if (a + b === target) {
+					return a + "+" + b;
+				}  else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+			find2(a, b, target) {
+				if (a * b === target) {
+					return a + "*" + b;
+				} else if (a + b === target) {
+					return a + "+" + b;
+				} else if (a % b === 0 || b % a === 0) {
+					if (a / b === target) {
+						return a + "/" + b;
+					}
+					if (b / a === target) {
+						return b + "/" + a;
+					}
+				} else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+
+			remove(array, index) {
+				var out = [];
+				var j = 0;
+				for (var i = 0; i < array.length; i++) {
+					if (i == index) {
+						continue;
+					}
+					out[j] = array[i];
+					j++;
+				}
+				return out;
+			},
+
+			find(array, target) {
+                	// js 中必须用var声明，限制作用域。
+				var out = "";
+				var ret = "";
+				var i = 0;
+				var left;
+
+				if (array.length == 2) {
+					out = this.find3(array[0], array[1], target);
+					if (out.length > 0) {
+						return "(" + out + ")";
+					}
+					return "";
+				}
+
+			
+
+				var x;
+				for (i = 0; i < array.length; i++) {
+					x = array[i];
+					left = this.remove(array, i);
+					console.log(left);
+
+					if (target != 0 && (target % x == 0 || x % target == 0)) {
+						if (target > x) {
+							ret = find(left, target / x);
+							if (ret.length > 0) {
+								out = x + "*" + ret;
+								break;
+							}
+						} else {
+							ret = find(left, x / target);
+							if (ret.length > 0) {
+								out = x + "/" + ret;
+								break;
+							}
+						}
+					}
+
+					if (target > x) {
+						ret = this.find(left, target - x);
+						if (ret.length > 0) {
+							out = x + "+" + ret;
+							break;
+						}
+					} else {
+						ret = this.find(left, x - target);
+						if (ret.length > 0) {
+							out = x + "-" + ret;
+							break;
+						}
+					}
+
+					ret = this.find(left, x * target);
+					if (ret.length > 0) {
+						out = ret + "/" + x;
+						break;
+					}
+					ret = this.find(left, target + x);
+					if (ret.length > 0) {
+						out = ret + "-" + x;
+						break;
+					}
+				}
+
+				if (out.length > 0) {
+					if (array.length == 4) {
+						return out;
+					} else {
+						return "(" + out + ")";
+					}
+				}
+				return "";
+			},
+		},
+	};
+</script>

src/components/pages/leader.vue

@@ -0,0 +1,213 @@
+<template>
+	<div class="pb_content2" style="background: #fff; display: inline">
+		<div class="pb_content_body">
+			<div class="fanhui" @click="goTo('/index')"></div>
+			<div class="logo"></div>
+			<div class="leader">
+				<div class="top">
+					<div>排名</div>
+					<div>姓名</div>
+					<div style="width: 20%">总分</div>
+				</div>
+				<div class="leaderBody">
+					<div v-for="(item, index) in leader" :key="index" class="hang">
+						<div v-if="index + 1 == 1" class="first">
+							<img src="../../assets/twentyFour/first.png" alt="" />
+						</div>
+						<div v-else-if="index + 1 == 2" class="second">
+							<img src="../../assets/twentyFour/second.png" alt="" />
+						</div>
+						<div v-else-if="index + 1 == 3" class="third">
+							<img src="../../assets/twentyFour/third.png" alt="" />
+						</div>
+						<div v-else class="num">{{ index + 1 }}</div>
+						<div class="name">
+							<div class="tx">
+								<img src="../../assets/icon/portal.png" alt="" />
+							</div>
+							<div class="userName">{{ item.name }}</div>
+						</div>
+						<div style="width: 10%; display: flex; justify-content: center">
+							{{ item.score }}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="returnIndex" @click="goTo('/index')"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import "../../common/aws-sdk-2.235.1.min";
+
+	export default {
+		data() {
+			return {
+				leader: [
+					{ name: "林嘉琪", score: "120" },
+					{ name: "文泉", score: "88" },
+					{ name: "ZHANGAl", score: "86" },
+					{ name: "苏苏", score: "74" },
+					{ name: "华佳琪", score: "72" },
+					{ name: "林伟清", score: "70" },
+					{ name: "彭于晏", score: "60" },
+					{ name: "吴彦祖", score: "40" },
+				],
+			};
+		},
+		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);
+			},
+		},
+		created() {},
+	};
+</script>
+
+<style scoped>
+	.pb_content_body {
+		font-size: 0.9rem;
+		display: flex;
+		flex-direction: column;
+		margin: 0 auto;
+		background-image: url("../../assets/twentyFour/phBg.png");
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		height: auto;
+		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;
+	}
+
+	.fanhui {
+		background: url("../../assets/twentyFour/phfh.png");
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		position: absolute;
+		width: 40px;
+		height: 40px;
+		top: 35px;
+		left: 20px;
+	}
+	.logo {
+		min-height: 7rem;
+		min-width: 8rem;
+		margin: 3rem auto 1rem auto !important;
+		background-image: url("../../assets/twentyFour/phLogo.png");
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+
+	.leader {
+		background-image: url("../../assets/twentyFour/leader.png");
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		width: 90%;
+		min-height: 28.3rem;
+		overflow: auto;
+		margin: 0 auto !important;
+	}
+	.top {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+		color: #b2b2b2;
+		margin: 10px 0 10px 25px !important;
+	}
+
+	.top > div {
+		width: calc(100% / 3);
+	}
+
+	.top > div:nth-child(2),
+	.hang > div:nth-child(2) {
+		margin-right: 55px;
+	}
+	.leaderBody {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+	.hang {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+		width: 100%;
+	}
+	.name {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin: 0 15px 0 0 !important;
+		width: 140px;
+	}
+	.userName {
+		width: 100px;
+		margin: 0 !important;
+		color: #b4b4b4;
+	}
+	.tx {
+		width: 40px;
+		margin: 0 10px 0 0 !important;
+	}
+	.tx > img {
+		width: 100% !important;
+		height: 100%;
+	}
+	.first,
+	.second,
+	.third,
+	.num {
+		width: 10%;
+		height: 37px;
+		display: flex;
+		justify-content: center;
+	}
+	.first > img,
+	.second > img,
+	.third > img {
+		width: 30px !important;
+	}
+	.returnIndex {
+		background-image: url("../../assets/twentyFour/returnIndex.png");
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		width: 11rem;
+		min-height: 2.6rem;
+		margin: 10px auto !important;
+	}
+</style>

src/components/pages/login.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="pb_content2" style="background: #fff; display: inline">
-    <div class="pb_head">
-      <!-- <van-icon
-        name="arrow-left"
-        color="#fff"
-        class="pb_back"
-        size="1.2rem"
-        @click="goBack"
-      /> -->
-      <span>登录</span>
-    </div>
-    <div class="pb_content_body">
-      
-    </div>
-    
-  </div>
-</template>
-
-<script>
-import "../../common/aws-sdk-2.235.1.min";
-
-export default {
-  data() {
-    return {
-      
-    };
-  },
-  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);
-      }
-    },
-    
-  },
-  created() {
-  },
-};
-</script>
-
-<style scoped>
-
-.pb_content_body {
-  font-size: 0.9rem;
-  display: flex;
-  flex-direction: column;
-  /* justify-content: space-around; */
-  width: 90%;
-  margin: 0 auto;
-}
-
-.pb_content_body div {
-  margin: 0.5rem 0 0;
-}
-.pb_content_body div > img {
-  width: 5rem;
-}
-.pb_content_body .van-cell {
-  margin: 0;
-}
-
-</style>

src/components/pages/master.vue

@@ -0,0 +1,1011 @@
+<template>
+	<el-container class="content">
+		<el-header style="text-align: center">
+			<div @click="goTo('/index')" class="return"></div>
+			<div style="margin: 0 auto">大师级</div>
+		</el-header>
+
+		<el-main>
+			<div class="main">
+				<div class="top">
+					<div style="color: #fff">
+						当前为第<span style="color: #2c628a; margin: 0 5px">{{
+							count + 1
+						}}</span
+						>关
+					</div>
+					<!-- <div class="left"></div> -->
+					<div class="right">
+						<div class="ts" @click="reduceTs"></div>
+						<div class="howPlay" @click="dialogVisible1 = true"></div>
+					</div>
+				</div>
+				<!-- 计算公式 -->
+
+				<!-- <el-card shadow="always">
+					{{ result }}
+				</el-card> -->
+
+				<!-- 随机数字 -->
+
+				<el-row :gutter="20">
+					<el-col :span="12" v-for="(num, index) in randomNum" :key="index">
+						<div class="card-sep">
+							<el-card
+								v-if="index == 0"
+								class="cardF"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 1"
+								class="cardS"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanSIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 2"
+								class="cardT"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanTIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else
+								class="cardFour"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFourIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+						</div>
+					</el-col>
+
+					<!-- <el-col :span="12">
+						    <el-card shadow="hover">
+						      3
+						    </el-card>
+						  </el-col>
+						</el-row>
+						<el-row :gutter="20">
+						  <el-col :span="12">
+						    <el-card shadow="always">
+						      8
+						    </el-card>
+						  </el-col>
+						  <el-col :span="12">
+						    <el-card shadow="hover">
+						      9
+						    </el-card>
+						  </el-col> -->
+				</el-row>
+
+				<!-- 运算符选择 -->
+				<div class="operator">
+					<div
+						class="add"
+						:class="{ addIsClick: calc == '+' }"
+						@click="add"
+					></div>
+
+					<div
+						class="inc"
+						:class="{ reduceIsClick: calc == '-' }"
+						@click="inc"
+					></div>
+					<div
+						class="take"
+						:class="{ takeIsClick: calc == '*' }"
+						@click="mul"
+					></div>
+					<div
+						class="remove"
+						:class="{ removeIsClick: calc == '/' }"
+						@click="div"
+					></div>
+				</div>
+				<!-- <el-row class="h-sep">
+					<el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-plus" @click="add"
+							>加</el-button
+						> -->
+				<!-- <div class="add" @click="add"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+							>减</el-button
+						> -->
+				<!-- <div class="inc" @click="inc"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4">
+						<el-button type="primary" plain icon="el-icon-close" @click="mul"
+							>乘</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button type="primary" plain icon="" @click="div"
+							>/&nbsp;&nbsp;除</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-left"
+							@click="left"
+							>括</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-right"
+							@click="right"
+							>号</el-button
+						>
+					</el-col> -->
+				<!-- </el-row> -->
+
+				<!-- <el-row :gutter="20" class="footBtn">
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-success"
+							@click="confirm"
+							>确定</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh-right"
+							@click="clean"
+							>清除</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh"
+							@click="resert"
+							>换题</el-button
+						>
+					</el-col>
+				</el-row> -->
+				<div class="bottom">
+					<div class="bottomT">
+						<div class="answer" @click="reduceTs"></div>
+						<div class="clean" @click="clean"></div>
+					</div>
+					<div class="next" @click="confirm"></div>
+				</div>
+			</div>
+		</el-main>
+		<!-- <div
+			id="cas"
+			style="
+				position: absolute;
+				width: 200px;
+				height: 200px;
+				left: 200px;
+				z-index: 99999;
+			"
+		></div> -->
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy"
+		>
+			<div class="tsAnswer">大师级不提供提示</div>
+			<dir class="haveCount">今天还剩0次提示喔</dir>
+			<!-- <div class="tsAnswer">{{ rightAnswer }}</div> -->
+			<!-- <dir class="haveCount">今天还剩{{ ts }}次提示喔</dir> -->
+		</el-dialog>
+		<el-dialog
+			title="大师级玩法介绍"
+			:visible.sync="dialogVisible1"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div>只用1-10的数字和加减法进行运算.</div>
+			<div>汇总数字得24则通关！</div>
+			<div>大师级不提供提示</div>
+		</el-dialog>
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible2"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div style="margin-bottom: 15px">您已成功算成24点，恭喜你！</div>
+			<div
+				style="
+					width: 90px;
+					height: 25px;
+					border: 1px solid #75a8da;
+					text-align: center;
+					margin: 0 auto;
+					background: #75a8da;
+					color: #fff;
+					line-height: 25px;
+				"
+				@click="dialogVisible2 = false"
+			>
+				确定
+			</div>
+		</el-dialog>
+		<audio ref="source">
+			<source src="../../assets/twentyFour/clickM.mp3" type="audio/mpeg" />
+		</audio>
+		<audio ref="vm">
+			<source src="../../assets/twentyFour/vM.mp3" type="audio/mpeg" />
+		</audio>
+	</el-container>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				randomNum: ["", "", "", ""],
+				result: "",
+				tempResult: "",
+				flag0: false,
+				flag1: false,
+				flag2: false,
+				flag3: false,
+				calc: "",
+				num1: "",
+				nIndex: "",
+				nIndex2: "",
+				num2: "",
+				saveRandomNum: ["", "", "", ""],
+				count: 0,
+				rightAnswer: "",
+				dialogVisible: false,
+				dialogVisible1: false,
+				dialogVisible2: false,
+				ts: 3,
+				tiMu: [],
+				nowGq: 0,
+			};
+		},
+
+		mounted() {
+			this.getRandomNum();
+		},
+		watch: {},
+
+		methods: {
+			cards(randomNum) {
+				var array = randomNum;
+				var args = [];
+				if (array.length == 4) {
+					for (var i = 0; i < 4; i++) {
+						var j = parseInt(array[i]);
+						if (isNaN(j)) {
+							return;
+						}
+						args[i] = j;
+					}
+					var ret = this.find(args, 24);
+					var a = args.sort().toString();
+					if (ret.length == 0) {
+						this.getRandomNum();
+					} else {
+						if (this.tiMu.length > 0) {
+							for (var i = 0; i < this.tiMu.length; i++) {
+								if (this.tiMu[i] == a) {
+									this.getRandomNum();
+								}
+							}
+							this.rightAnswer = ret + "=24";
+						} else {
+							this.rightAnswer = ret + "=24";
+						}
+					}
+				} else {
+					console.log("len: " + array.length);
+				}
+			},
+
+			handleClose(done) {
+				done();
+			},
+
+			goTo(path) {
+				this.$router.push(path);
+			},
+
+			reduceTs() {
+				this.dialogVisible = true;
+				if (this.nowGq > 0) {
+					return;
+				}
+				this.ts -= 1;
+				this.nowGq++;
+				if (this.ts == -1) {
+					this.rightAnswer = "今日提示已达上限";
+					this.ts = 0;
+				}
+			},
+
+			find3(a, b, target) {
+				if (a + b === target) {
+					return a + "+" + b;
+				} else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+            find2(a, b, target) {
+				if (a * b === target) {
+					return a + "*" + b;
+				} else if (a + b === target) {
+					return a + "+" + b;
+				} else if (a % b === 0 || b % a === 0) {
+					if (a / b === target) {
+						return a + "/" + b;
+					}
+					if (b / a === target) {
+						return b + "/" + a;
+					}
+				} else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+			remove(array, index) {
+				var out = [];
+				var j = 0;
+				for (var i = 0; i < array.length; i++) {
+					if (i == index) {
+						continue;
+					}
+					out[j] = array[i];
+					j++;
+				}
+				return out;
+			},
+			find(array, target) {
+				// js 中必须用var声明，限制作用域。
+				var out = "";
+				var ret = "";
+				var i = 0;
+				var left;
+
+				if (array.length == 2) {
+					out = this.find2(array[0], array[1], target);
+					if (out.length > 0) {
+						return "(" + out + ")";
+					}
+					return "";
+				}
+
+				var x;
+				for (i = 0; i < array.length; i++) {
+					x = array[i];
+					left = this.remove(array, i);
+
+					if (target != 0 && (target % x == 0 || x % target == 0)) {
+						if (target > x) {
+							ret = find(left, target / x);
+							if (ret.length > 0) {
+								out = x + "*" + ret;
+								break;
+							}
+						} else {
+							ret = find(left, x / target);
+							if (ret.length > 0) {
+								out = x + "/" + ret;
+								break;
+							}
+						}
+					}
+
+					if (target > x) {
+						ret = this.find(left, target - x);
+						if (ret.length > 0) {
+							out = x + "+" + ret;
+							break;
+						}
+					} else {
+						ret = this.find(left, x - target);
+						if (ret.length > 0) {
+							out = x + "-" + ret;
+							break;
+						}
+					}
+
+					ret = this.find(left, x * target);
+					if (ret.length > 0) {
+						out = ret + "/" + x;
+						break;
+					}
+					ret = this.find(left, target + x);
+					if (ret.length > 0) {
+						out = ret + "-" + x;
+						break;
+					}
+				}
+
+				if (out.length > 0) {
+					if (array.length == 4) {
+						return out;
+					} else {
+						return "(" + out + ")";
+					}
+				}
+				return "";
+			},
+			getRandomNum() {
+				this.randomNum = [];
+
+				for (var i = 0; i < 4; i++) {
+					// 生成1-9的随机数
+
+					this.randomNum.push(Math.floor(Math.random(9) * 25 + 1));
+				}
+				this.saveRandomNum = [...this.randomNum];
+				this.cards(this.randomNum);
+			},
+			// isTrue(){
+
+			// },
+			getVal(num, index) {
+				var num = parseInt(num);
+				var b = 0;
+				this.$refs.source.play();
+				if (this.num1 && this.calc) {
+					this.num2 = num;
+				} else {
+					this.num1 = num;
+				}
+
+				if (this.nIndex === index) {
+					this.nIndex = "";
+					this.num1 = "";
+				} else if (this.nIndex === "") {
+					this.nIndex = index;
+				} else if (this.nIndex !== "" && this.calc) {
+					this.nIndex2 = index;
+				} else {
+					this.nIndex = index;
+				}
+				if (
+					(this.nIndex || this.nIndex === 0) &&
+					(this.nIndex2 || this.nIndex2 === 0) &&
+					this.calc
+				) {
+					// this.result += num;
+					if (this.calc === "+") {
+						this.result = this.num1 + this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					} else if (this.calc === "-") {
+						this.result = this.num1 - this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}else if (this.calc === "*") {
+						this.result = this.num1 * this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}else if (this.calc === "/") {
+						this.result = this.num1 / this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+								this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}
+				}
+				// this.randomNum[0] = num;
+			},
+
+			// 重置flag标识
+
+			resertFlag() {
+				this.nIndex = "";
+				this.nIndex2 = "";
+				this.calc = "";
+				this.num2 = "";
+				this.num1 = "";
+			},
+
+			add() {
+				this.$refs.source.play();
+				if (this.calc == "+") {
+					this.calc = "";
+				} else {
+					this.result += "+";
+					this.calc = "+";
+				}
+			},
+
+			inc() {
+				this.$refs.source.play();
+				if (this.calc == "-") {
+					this.calc = "";
+				} else {
+					this.result += "-";
+					this.calc = "-";
+				}
+			},
+
+			mul() {
+				this.$refs.source.play();
+				if (this.calc == "*") {
+					this.calc = "";
+				} else {
+					this.result += "*";
+					this.calc = "*";
+				}
+			},
+
+			div() {
+                this.$refs.source.play();
+				if (this.calc == "/") {
+					this.calc = "";
+				} else {
+					this.result += "/";
+					this.calc = "/";
+				}
+			},
+
+			// left() {
+			// 	this.result += "(";
+			// },
+
+			// right() {
+			// 	this.result += ")";
+			// },
+
+			clean() {
+				this.result = "";
+				this.randomNum = [...this.saveRandomNum];
+				this.resertFlag();
+			},
+
+			confirm() {
+				// 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现
+				var count = 0;
+				for (var i = 0; i < this.randomNum.length; i++) {
+					if (this.randomNum[i] == "") {
+						count++;
+					}
+				}
+				this.tempResult = eval(this.result);
+				if (count == 3) {
+					if (this.tempResult === 24) {
+						this.$message.success("计算正确！");
+						this.tiMu.push([...this.saveRandomNum].sort().toString());
+
+						// this.$message({
+
+						//   showClose: true,
+
+						//   message: '正确',
+
+						//   type: 'success'
+
+						// });
+						this.nowGq = 0;
+						this.result = "";
+						this.count += 1;
+						if (this.count == 4) {
+							this.$message.success("恭喜你通关成功");
+							this.$router.push("/index");
+						} else {
+							this.getRandomNum();
+						}
+					} else {
+						this.$message.error("计算错误！");
+
+						this.result = "";
+
+						this.resertFlag();
+					}
+				} else {
+					this.$message.error("每个数字都要用到！");
+				}
+			},
+
+			resert() {
+				//刷新题目
+				this.getRandomNum();
+
+				this.resertFlag();
+
+				this.result = "";
+			},
+		},
+		created() {
+			this.getRandomNum();
+		},
+	};
+</script>
+
+
+
+<style scoped>
+	html,
+	body,
+	#app {
+		text-align: center;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+	}
+
+	.el-header {
+		height: 40px !important;
+		background: #f4f4f4;
+		text-align: center;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		position: relative;
+	}
+
+	.el-container {
+		height: 100%;
+	}
+
+	.el-row {
+		margin-top: 2.5rem;
+		height: 260px;
+	}
+
+	.el-col-12 {
+		height: 130px;
+	}
+
+	.el-card__body {
+		height: 3.75rem;
+		font-size: xx-large;
+		line-height: 3.75rem;
+	}
+
+	.footBtn {
+		margin-left: 0 !important;
+	}
+
+	.card-sep {
+		margin-bottom: 0.5rem;
+	}
+
+	.cardF {
+		background-image: url("../../assets/twentyFour/xuanF.png");
+		height: 120px;
+	}
+	.cardS {
+		background-image: url("../../assets/twentyFour/xuanS.png");
+		height: 120px;
+	}
+	.cardT {
+		background-image: url("../../assets/twentyFour/xuanT.png");
+		height: 120px;
+	}
+	.cardFour {
+		background-image: url("../../assets/twentyFour/xuanFour.png");
+		height: 120px;
+	}
+
+	.h-sep {
+		margin-top: 1.375rem;
+	}
+
+	.top {
+		height: 35px;
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.content,
+	.left,
+	.ts,
+	.howPlay,
+	.cardF,
+	.cardS,
+	.cardT,
+	.cardFour,
+	.add,
+	.inc,
+	.answer,
+	.clean,
+	.next,
+    .take,
+    .remove,
+	.xuanFIsClick,
+	.xuanSIsClick,
+	.xuanTIsClick,
+	.xuanFourIsClick,
+	.addIsClick,
+	.reduceIsClick,
+    .takeIsClick,
+    .removeIsClick {
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+	.content {
+		background-image: url("../../assets/twentyFour/gameBg.png");
+		position: relative;
+	}
+	.content >>> .el-main {
+		padding: 60px 20px 20px 20px !important;
+	}
+
+	.left {
+		background-image: url("../../assets/twentyFour/now.png");
+		width: 40%;
+		height: 20px;
+	}
+	.right {
+		width: 60%;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		height: 35px;
+	}
+	.ts {
+		background-image: url("../../assets/twentyFour/ts.png");
+		width: 35px;
+	}
+	.howPlay {
+		background-image: url("../../assets/twentyFour/howPlay.png");
+		width: 35px;
+		margin-left: 5px;
+	}
+
+	.card-sep >>> .is-always-shadow {
+		box-shadow: none !important;
+	}
+	.card-sep >>> .el-card {
+		border: none !important;
+		background-color: transparent !important;
+	}
+	.card-sep >>> .el-card__body {
+		color: #fff;
+		text-align: center;
+		height: 120px;
+		line-height: 120px;
+		font-size: 60px;
+		padding: 0 !important;
+	}
+
+	.add {
+		background-image: url("../../assets/twentyFour/add.png");
+		height: 60px;
+		width: 60px;
+	}
+	.inc {
+		background-image: url("../../assets/twentyFour/reduce.png");
+		height: 60px;
+		width: 60px;
+	}
+	.take {
+		background-image: url("../../assets/twentyFour/take.png");
+		height: 60px;
+		width: 60px;
+	}
+	.remove {
+		background-image: url("../../assets/twentyFour/remove.png");
+		height: 60px;
+		width: 60px;
+	}
+	.operator {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+		align-items: center;
+		margin-top: 35px;
+	}
+	.bottom {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		margin-top: 25px;
+	}
+	.bottomT {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+	.answer {
+		background-image: url("../../assets/twentyFour/answer.png");
+		height: 45px;
+		width: 50%;
+	}
+	.clean {
+		background-image: url("../../assets/twentyFour/clean.png");
+		height: 45px;
+		width: 50%;
+	}
+	.next {
+		background-image: url("../../assets/twentyFour/next.png");
+		height: 50px;
+		width: 100%;
+		margin-top: 10px;
+	}
+	.xuanFIsClick {
+		background-image: url("../../assets/twentyFour/xuanFIsClick.png") !important;
+	}
+	.xuanSIsClick {
+		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+	}
+	.xuanTIsClick {
+		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+	}
+	.xuanFourIsClick {
+		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+	}
+	.addIsClick {
+		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+	}
+	.reduceIsClick {
+		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+	}
+	.takeIsClick {
+		background-image: url("../../assets/twentyFour/takeIsClick.png") !important;
+	}
+	.removeIsClick {
+		background-image: url("../../assets/twentyFour/removeIsClick.png") !important;
+	}
+	.dialog_diy >>> .el-dialog__header {
+		background: #fa7258;
+		text-align: center;
+		padding: 10px 0 !important;
+	}
+	.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_diy >>> .el-dialog__title {
+		color: #fff !important;
+	}
+	.tsAnswer {
+		color: #fa7258;
+		font-size: 20px;
+		text-align: center;
+	}
+	.haveCount {
+		text-align: center;
+		padding: 0;
+		margin-top: 20px;
+		font-size: 11px;
+		color: #cbcbcb;
+		font-family: FZShuTi;
+	}
+	.dialog_diy >>> .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__headerbtn {
+		background: url("../../assets/twentyFour/close.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		top: 13px !important;
+		right: 13px !important;
+	}
+	.dialog_diy >>> .el-dialog__close,
+	.dialog_diy1 >>> .el-dialog__close {
+		color: transparent !important;
+	}
+
+	.return {
+		background: url("../../assets/twentyFour/fanhui.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		width: 25px;
+		height: 25px;
+		position: absolute;
+	}
+</style>

src/components/pages/twentyFour.vue

@@ -1,33 +1,96 @@
 <template>
-  <el-container>
-    <el-header>
-      <h1>24点</h1>
-    </el-header>
-
-    <el-main>
-      <div class="main">
-        <!-- 计算公式 -->
-
-        <el-card shadow="always">
-          {{ result }}
-        </el-card>
-
-        <!-- 随机数字 -->
-
-        <el-row :gutter="20">
-          <el-col :span="12" v-for="(num, index) in randomNum" :key="index">
-            <div class="card-sep">
-              <el-card
-                class="card-sep"
-                shadow="always"
-                @click.native="getVal(num, index)"
-              >
-                {{ num }}
-              </el-card>
-            </div>
-          </el-col>
-
-          <!-- <el-col :span="12">
+	<el-container class="content">
+		<el-header style="text-align: center">
+			<div @click="goTo('/index')" class="return"></div>
+			<div style="margin: 0 auto">入门级</div>
+		</el-header>
+
+		<el-main>
+			<div class="main">
+				<div class="top">
+					<div style="color: #fff">
+						当前为第<span style="color: #2c628a; margin: 0 5px">{{
+							count + 1
+						}}</span
+						>关
+					</div>
+					<!-- <div class="left"></div> -->
+					<div class="right">
+						<div class="ts" @click="reduceTs"></div>
+						<div class="howPlay" @click="dialogVisible1 = true"></div>
+					</div>
+				</div>
+				<!-- 计算公式 -->
+
+				<!-- <el-card shadow="always">
+					{{ result }}
+				</el-card> -->
+
+				<!-- 随机数字 -->
+
+				<el-row :gutter="20">
+					<el-col :span="12" v-for="(num, index) in randomNum" :key="index">
+						<div class="card-sep">
+							<el-card
+								v-if="index == 0"
+								class="cardF"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 1"
+								class="cardS"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanSIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else-if="index == 2"
+								class="cardT"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanTIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+							<el-card
+								v-else
+								class="cardFour"
+								v-show="!num == '' || num === 0"
+								:class="{
+									xuanFourIsClick:
+										(num1 == num && nIndex == index) ||
+										(num2 == num && nIndex2 == index),
+								}"
+								shadow="always"
+								@click.native="getVal(num, index)"
+							>
+								{{ num }}
+							</el-card>
+						</div>
+					</el-col>
+
+					<!-- <el-col :span="12">
 						    <el-card shadow="hover">
 						      3
 						    </el-card>
@@ -44,309 +107,808 @@
 						      9
 						    </el-card>
 						  </el-col> -->
-        </el-row>
-
-        <!-- 运算符选择 -->
-
-        <el-row class="h-sep">
-          <el-col :span="4">
-            <el-button type="primary" plain icon="el-icon-plus" @click="add"
-              >加</el-button
-            >
-          </el-col>
-
-          <el-col :span="4">
-            <el-button type="primary" plain icon="el-icon-minus" @click="inc"
-              >减</el-button
-            >
-          </el-col>
-
-          <el-col :span="4">
-            <el-button type="primary" plain icon="el-icon-close" @click="mul"
-              >乘</el-button
-            >
-          </el-col>
-
-          <el-col :span="4">
-            <el-button type="primary" plain icon="" @click="div"
-              >/&nbsp;&nbsp;除</el-button
-            >
-          </el-col>
-
-          <el-col :span="4">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-arrow-left"
-              @click="left"
-              >括</el-button
-            >
-          </el-col>
-
-          <el-col :span="4">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-arrow-right"
-              @click="right"
-              >号</el-button
-            >
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20" class="footBtn">
-          <el-col :span="4">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-refresh-right"
-              @click="clean"
-              >清除</el-button
-            >
-          </el-col>
-
-          <el-col :span="4">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-success"
-              @click="confirm"
-              >确定</el-button
-            >
-          </el-col>
-
-          <el-col :span="4">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-refresh"
-              @click="resert"
-              >换题</el-button
-            >
-          </el-col>
-        </el-row>
-      </div>
-    </el-main>
-    <div
-      id="cas"
-      style="
-        position: absolute;
-        width: 200px;
-        height: 200px;
-        left: 200px;
-        z-index: 99999;
-      "
-    ></div>
-  </el-container>
+				</el-row>
+
+				<!-- 运算符选择 -->
+				<div class="operator">
+					<div
+						class="add"
+						:class="{ addIsClick: calc == '+' }"
+						@click="add"
+					></div>
+
+					<div
+						class="inc"
+						:class="{ reduceIsClick: calc == '-' }"
+						@click="inc"
+					></div>
+				</div>
+				<!-- <el-row class="h-sep">
+					<el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-plus" @click="add"
+							>加</el-button
+						> -->
+				<!-- <div class="add" @click="add"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4"> -->
+				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+							>减</el-button
+						> -->
+				<!-- <div class="inc" @click="inc"></div>
+					</el-col> -->
+
+				<!-- <el-col :span="4">
+						<el-button type="primary" plain icon="el-icon-close" @click="mul"
+							>乘</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button type="primary" plain icon="" @click="div"
+							>/&nbsp;&nbsp;除</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-left"
+							@click="left"
+							>括</el-button
+						>
+					</el-col>
+
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-arrow-right"
+							@click="right"
+							>号</el-button
+						>
+					</el-col> -->
+				<!-- </el-row> -->
+
+				<!-- <el-row :gutter="20" class="footBtn">
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-success"
+							@click="confirm"
+							>确定</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh-right"
+							@click="clean"
+							>清除</el-button
+						>
+					</el-col>
+					<el-col :span="4">
+						<el-button
+							type="primary"
+							plain
+							icon="el-icon-refresh"
+							@click="resert"
+							>换题</el-button
+						>
+					</el-col>
+				</el-row> -->
+				<div class="bottom">
+					<div class="bottomT">
+						<div class="answer" @click="reduceTs"></div>
+						<div class="clean" @click="clean"></div>
+					</div>
+					<div class="next" @click="confirm"></div>
+				</div>
+			</div>
+		</el-main>
+		<!-- <div
+			id="cas"
+			style="
+				position: absolute;
+				width: 200px;
+				height: 200px;
+				left: 200px;
+				z-index: 99999;
+			"
+		></div> -->
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy"
+		>
+			<div class="tsAnswer">{{ rightAnswer }}</div>
+			<dir class="haveCount">今天还剩{{ ts }}次提示喔</dir>
+		</el-dialog>
+		<el-dialog
+			title="入门级玩法介绍"
+			:visible.sync="dialogVisible1"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div>只用1-10的数字和加减法进行运算.</div>
+			<div>汇总数字得24则通关！</div>
+		</el-dialog>
+		<el-dialog
+			title="提示"
+			:visible.sync="dialogVisible2"
+			:append-to-body="true"
+			width="80%"
+			:before-close="handleClose"
+			class="dialog_diy1"
+		>
+			<div style="margin-bottom: 15px">您已成功算成24点，恭喜你！</div>
+			<div
+				style="
+					width: 90px;
+					height: 25px;
+					border: 1px solid #75a8da;
+					text-align: center;
+					margin: 0 auto;
+					background: #75a8da;
+					color: #fff;
+					line-height: 25px;
+				"
+				@click="dialogVisible2 = false"
+			>
+				确定
+			</div>
+		</el-dialog>
+		<audio ref="source">
+			<source src="../../assets/twentyFour/clickM.mp3" type="audio/mpeg" />
+		</audio>
+    <audio ref="vm">
+			<source src="../../assets/twentyFour/vM.mp3" type="audio/mpeg" />
+		</audio>
+	</el-container>
 </template>
 
 <script>
-export default {
-  el: "#app", //选择器
-
-  data() {
-    return {
-      msg: "hello",
-
-      randomNum: [],
-
-      result: "",
-
-      tempResult: "",
-
-      flag0: false,
-
-      flag1: false,
-
-      flag2: false,
-
-      flag3: false,
-    };
-  },
-
-  mounted() {
-    this.getRandomNum();
-  },
-
-  methods: {
-    getRandomNum() {
-      this.randomNum = [];
-
-      for (var i = 0; i < 4; i++) {
-        // 生成1-9的随机数
-
-        this.randomNum.push(Math.floor(Math.random(9) * 10 + 1));
-      }
-    },
-
-    getVal(num, index) {
-      let selNum = num;
-
-      this.result += num;
-
-      switch (index) {
-        case 0:
-          this.flag0 = !this.flag0;
-
-          break;
-
-        case 1:
-          this.flag1 = !this.flag1;
-
-          break;
-
-        case 2:
-          this.flag2 = !this.flag2;
-
-          break;
-
-        case 3:
-          this.flag3 = !this.flag3;
-
-          break;
-      }
-    },
-
-    // 重置flag标识
-
-    resertFlag() {
-      this.flag0 = false;
-
-      this.flag1 = false;
-
-      this.flag2 = false;
-
-      this.flag3 = false;
-    },
-
-    add() {
-      this.result += "+";
-    },
-
-    inc() {
-      this.result += "-";
-    },
-
-    mul() {
-      this.result += "*";
-    },
-
-    div() {
-      this.result += "/";
-    },
-
-    left() {
-      this.result += "(";
-    },
-
-    right() {
-      this.result += ")";
-    },
-
-    clean() {
-      this.result = "";
-
-      this.resertFlag();
-    },
-
-    confirm() {
-      try {
-        var flag = this.flag0 && this.flag1 && this.flag2 && this.flag3;
-
-        console.log("res:", this.result);
-
-        if (flag) {
-          // 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现
-
-          this.tempResult = eval(this.result);
-
-          if (this.tempResult === 24) {
-            this.$message.success("计算正确！");
-
-            // this.$message({
-
-            //   showClose: true,
-
-            //   message: '正确',
-
-            //   type: 'success'
-
-            // });
-
-            this.result = "";
-
-            this.getRandomNum();
-          } else {
-            this.$message.error("计算错误！");
-
-            this.result = "";
-
-            this.resertFlag();
-          }
-        } else {
-          this.$message.error("每个数字仅可使用1次！");
-        }
-      } catch (err) {
-        this.$message.error("输入有误！");
-
-        this.result = "";
-      }
-    },
-
-    resert() {
-      this.getRandomNum();
-
-      this.resertFlag();
-
-      this.result = "";
-    },
-  },
-  created() {
-    this.getRandomNum();
-  },
-};
+	export default {
+		data() {
+			return {
+				randomNum: ["", "", "", ""],
+				result: "",
+				tempResult: "",
+				flag0: false,
+				flag1: false,
+				flag2: false,
+				flag3: false,
+				calc: "",
+				num1: "",
+				nIndex: "",
+				nIndex2: "",
+				num2: "",
+				saveRandomNum: ["", "", "", ""],
+				count: 0,
+				rightAnswer: "",
+				dialogVisible: false,
+				dialogVisible1: false,
+				dialogVisible2: false,
+				ts: 3,
+				tiMu: [],
+				nowGq: 0,
+			};
+		},
+
+		mounted() {
+			this.getRandomNum();
+		},
+		watch: {},
+
+		methods: {
+			cards(randomNum) {
+				var array = randomNum;
+				var args = [];
+				if (array.length == 4) {
+					for (var i = 0; i < 4; i++) {
+						var j = parseInt(array[i]);
+						if (isNaN(j)) {
+							return;
+						}
+						args[i] = j;
+					}
+					var ret = this.find(args, 24);
+					var a = args.sort().toString();
+					if (ret.length == 0) {
+						this.getRandomNum();
+					} else {
+						if (this.tiMu.length > 0) {
+							for (var i = 0; i < this.tiMu.length; i++) {
+								if (this.tiMu[i] == a) {
+									this.getRandomNum();
+								}
+							}
+							this.rightAnswer = ret + "=24";
+						} else {
+							this.rightAnswer = ret + "=24";
+						}
+					}
+				} else {
+					console.log("len: " + array.length);
+				}
+			},
+
+			handleClose(done) {
+				done();
+			},
+
+			goTo(path) {
+				this.$router.push(path);
+			},
+
+			reduceTs() {
+				this.dialogVisible = true;
+				if (this.nowGq > 0) {
+					return;
+				}
+				this.ts -= 1;
+				this.nowGq++;
+				if (this.ts == -1) {
+					this.rightAnswer = "今日提示已达上限";
+					this.ts = 0;
+				}
+			},
+
+			find3(a, b, target) {
+				if (a + b === target) {
+					return a + "+" + b;
+				} else if (a - b == target) {
+					return a + "-" + b;
+				} else if (b - a == target) {
+					return b + "-" + a;
+				}
+				return "";
+			},
+			remove(array, index) {
+				var out = [];
+				var j = 0;
+				for (var i = 0; i < array.length; i++) {
+					if (i == index) {
+						continue;
+					}
+					out[j] = array[i];
+					j++;
+				}
+				return out;
+			},
+			find(array, target) {
+				// js 中必须用var声明，限制作用域。
+				var out = "";
+				var ret = "";
+				var i = 0;
+				var left;
+
+				if (array.length == 2) {
+					out = this.find3(array[0], array[1], target);
+					if (out.length > 0) {
+						return "(" + out + ")";
+					}
+					return "";
+				}
+
+				var x;
+				for (i = 0; i < array.length; i++) {
+					x = array[i];
+					left = this.remove(array, i);
+
+					// if (target != 0 && (target % x == 0 || x % target == 0)) {
+					// 	if (target > x) {
+					// 		ret = find(left, target / x);
+					// 		if (ret.length > 0) {
+					// 			out = x + "*" + ret;
+					// 			break;
+					// 		}
+					// 	} else {
+					// 		ret = find(left, x / target);
+					// 		if (ret.length > 0) {
+					// 			out = x + "/" + ret;
+					// 			break;
+					// 		}
+					// 	}
+					// }
+
+					if (target > x) {
+						ret = this.find(left, target - x);
+						if (ret.length > 0) {
+							out = x + "+" + ret;
+							break;
+						}
+					} else {
+						ret = this.find(left, x - target);
+						if (ret.length > 0) {
+							out = x + "-" + ret;
+							break;
+						}
+					}
+
+					// ret = this.find(left, x * target);
+					// if (ret.length > 0) {
+					// 	out = ret + "/" + x;
+					// 	break;
+					// }
+					ret = this.find(left, target + x);
+					if (ret.length > 0) {
+						out = ret + "-" + x;
+						break;
+					}
+				}
+
+				if (out.length > 0) {
+					if (array.length == 4) {
+						return out;
+					} else {
+						return "(" + out + ")";
+					}
+				}
+				return "";
+			},
+			getRandomNum() {
+				this.randomNum = [];
+				for (var i = 0; i < 4; i++) {
+					// 生成1-9的随机数
+
+					this.randomNum.push(Math.floor(Math.random(9) * 10 + 1));
+				}
+				this.saveRandomNum = [...this.randomNum];
+				this.cards(this.randomNum);
+			},
+			// isTrue(){
+
+			// },
+			getVal(num, index) {
+				var num = parseInt(num);
+				var b = 0;
+				this.$refs.source.play();
+				if (this.num1 && this.calc) {
+					this.num2 = num;
+				} else {
+					this.num1 = num;
+				}
+
+				if (this.nIndex === index) {
+					this.nIndex = "";
+					this.num1 = "";
+				} else if (this.nIndex === "") {
+					this.nIndex = index;
+				} else if (this.nIndex !== "" && this.calc) {
+					this.nIndex2 = index;
+				} else {
+					this.nIndex = index;
+				}
+				if (
+					(this.nIndex || this.nIndex === 0) &&
+					(this.nIndex2 || this.nIndex2 === 0) &&
+					this.calc
+				) {
+					// this.result += num;
+					if (this.calc === "+") {
+						this.result = this.num1 + this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+                this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					} else if (this.calc === "-") {
+						this.result = this.num1 - this.num2;
+						this.randomNum[this.nIndex] = "";
+						this.randomNum[this.nIndex2] = this.result;
+						if (this.result == "24") {
+							for (var i = 0; i < this.randomNum.length; i++) {
+								if (this.randomNum[i] != "") {
+									b++;
+								}
+							}
+							if (b == 1) {
+								this.dialogVisible2 = true;
+                this.$refs.vm.play();
+							}
+						}
+						this.resertFlag();
+					}
+				}
+				// this.randomNum[0] = num;
+			},
+
+			// 重置flag标识
+
+			resertFlag() {
+				this.nIndex = "";
+				this.nIndex2 = "";
+				this.calc = "";
+				this.num2 = "";
+				this.num1 = "";
+			},
+
+			add() {
+				this.$refs.source.play();
+				if (this.calc == "+") {
+					this.calc = "";
+				} else {
+					this.result += "+";
+					this.calc = "+";
+				}
+			},
+
+			inc() {
+				this.$refs.source.play();
+				if (this.calc == "-") {
+					this.calc = "";
+				} else {
+					this.result += "-";
+					this.calc = "-";
+				}
+			},
+
+			// mul() {
+			// 	this.result += "*";
+			// },
+
+			// div() {
+			// 	this.result += "/";
+			// },
+
+			// left() {
+			// 	this.result += "(";
+			// },
+
+			// right() {
+			// 	this.result += ")";
+			// },
+
+			clean() {
+				this.result = "";
+				this.randomNum = [...this.saveRandomNum];
+				this.resertFlag();
+			},
+
+			confirm() {
+				// 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现
+				var count = 0;
+				for (var i = 0; i < this.randomNum.length; i++) {
+					if (this.randomNum[i] == "") {
+						count++;
+					}
+				}
+				this.tempResult = eval(this.result);
+				if (count == 3) {
+					if (this.tempResult === 24) {
+						this.$message.success("计算正确！");
+						this.tiMu.push([...this.saveRandomNum].sort().toString());
+
+						// this.$message({
+
+						//   showClose: true,
+
+						//   message: '正确',
+
+						//   type: 'success'
+
+						// });
+						this.nowGq = 0;
+						this.result = "";
+						this.count += 1;
+						if (this.count == 4) {
+							this.$message.success("恭喜你通关成功");
+							this.$router.push("/index");
+						} else {
+							this.getRandomNum();
+						}
+					} else {
+						this.$message.error("计算错误！");
+
+						this.result = "";
+
+						this.resertFlag();
+					}
+				} else {
+					this.$message.error("每个数字都要用到！");
+				}
+			},
+
+			resert() {
+				//刷新题目
+				this.getRandomNum();
+
+				this.resertFlag();
+
+				this.result = "";
+			},
+		},
+		created() {
+			this.getRandomNum();
+		},
+	};
 </script>
 
 
 
 <style scoped>
-html,
-body,
-#app {
-  text-align: center;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-.el-container {
-  height: 100%;
-}
-
-.main {
-  width: 40%;
-  margin-left: 30%;
-}
-
-.el-row {
-  margin-top: 2.5rem;
-}
-
-.el-card__body {
-  height: 3.75rem;
-  font-size: xx-large;
-  line-height: 3.75rem;
-}
-
-.footBtn {
-  margin-left: 0 !important;
-}
-
-.card-sep {
-  margin-bottom: 1.25rem;
-}
-
-.h-sep {
-  margin-top: 1.375rem;
-}
+	html,
+	body,
+	#app {
+		text-align: center;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+	}
+
+	.el-header {
+		height: 40px !important;
+		background: #f4f4f4;
+		text-align: center;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		position: relative;
+	}
+
+	.el-container {
+		height: 100%;
+	}
+
+	.el-row {
+		margin-top: 2.5rem;
+		height: 260px;
+	}
+
+	.el-col-12 {
+		height: 130px;
+	}
+
+	.el-card__body {
+		height: 3.75rem;
+		font-size: xx-large;
+		line-height: 3.75rem;
+	}
+
+	.footBtn {
+		margin-left: 0 !important;
+	}
+
+	.card-sep {
+		margin-bottom: 0.5rem;
+	}
+
+	.cardF {
+		background-image: url("../../assets/twentyFour/xuanF.png");
+		height: 120px;
+	}
+	.cardS {
+		background-image: url("../../assets/twentyFour/xuanS.png");
+		height: 120px;
+	}
+	.cardT {
+		background-image: url("../../assets/twentyFour/xuanT.png");
+		height: 120px;
+	}
+	.cardFour {
+		background-image: url("../../assets/twentyFour/xuanFour.png");
+		height: 120px;
+	}
+
+	.h-sep {
+		margin-top: 1.375rem;
+	}
+
+	.top {
+		height: 35px;
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.content,
+	.left,
+	.ts,
+	.howPlay,
+	.cardF,
+	.cardS,
+	.cardT,
+	.cardFour,
+	.add,
+	.inc,
+	.answer,
+	.clean,
+	.next,
+	.xuanFIsClick,
+	.xuanSIsClick,
+	.xuanTIsClick,
+	.xuanFourIsClick,
+	.addIsClick,
+	.reduceIsClick {
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+	}
+	.content {
+		background-image: url("../../assets/twentyFour/gameBg.png");
+		position: relative;
+	}
+	.content >>> .el-main {
+		padding: 60px 20px 20px 20px !important;
+	}
+
+	.left {
+		background-image: url("../../assets/twentyFour/now.png");
+		width: 40%;
+		height: 20px;
+	}
+	.right {
+		width: 60%;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		height: 35px;
+	}
+	.ts {
+		background-image: url("../../assets/twentyFour/ts.png");
+		width: 35px;
+	}
+	.howPlay {
+		background-image: url("../../assets/twentyFour/howPlay.png");
+		width: 35px;
+		margin-left: 5px;
+	}
+
+	.card-sep >>> .is-always-shadow {
+		box-shadow: none !important;
+	}
+	.card-sep >>> .el-card {
+		border: none !important;
+		background-color: transparent !important;
+	}
+	.card-sep >>> .el-card__body {
+		color: #fff;
+		text-align: center;
+		height: 120px;
+		line-height: 120px;
+		font-size: 60px;
+		padding: 0 !important;
+	}
+
+	.add {
+		background-image: url("../../assets/twentyFour/add.png");
+		height: 60px;
+		width: 60px;
+	}
+	.inc {
+		background-image: url("../../assets/twentyFour/reduce.png");
+		height: 60px;
+		width: 60px;
+	}
+	.operator {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+		align-items: center;
+		margin-top: 35px;
+	}
+	.bottom {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		margin-top: 25px;
+	}
+	.bottomT {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+	.answer {
+		background-image: url("../../assets/twentyFour/answer.png");
+		height: 45px;
+		width: 50%;
+	}
+	.clean {
+		background-image: url("../../assets/twentyFour/clean.png");
+		height: 45px;
+		width: 50%;
+	}
+	.next {
+		background-image: url("../../assets/twentyFour/next.png");
+		height: 50px;
+		width: 100%;
+		margin-top: 10px;
+	}
+	.xuanFIsClick {
+		background-image: url("../../assets/twentyFour/xuanFIsClick.png") !important;
+	}
+	.xuanSIsClick {
+		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+	}
+	.xuanTIsClick {
+		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+	}
+	.xuanFourIsClick {
+		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+	}
+	.addIsClick {
+		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+	}
+	.reduceIsClick {
+		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+	}
+	.dialog_diy >>> .el-dialog__header {
+		background: #fa7258;
+		text-align: center;
+		padding: 10px 0 !important;
+	}
+	.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_diy >>> .el-dialog__title {
+		color: #fff !important;
+	}
+	.tsAnswer {
+		color: #fa7258;
+		font-size: 20px;
+		text-align: center;
+	}
+	.haveCount {
+		text-align: center;
+		padding: 0;
+		margin-top: 20px;
+		font-size: 11px;
+		color: #cbcbcb;
+		font-family: FZShuTi;
+	}
+	.dialog_diy >>> .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__headerbtn {
+		background: url("../../assets/twentyFour/close.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		top: 13px !important;
+		right: 13px !important;
+	}
+	.dialog_diy >>> .el-dialog__close,
+	.dialog_diy1 >>> .el-dialog__close {
+		color: transparent !important;
+	}
+
+	.return {
+		background: url("../../assets/twentyFour/fanhui.png");
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		width: 25px;
+		height: 25px;
+		position: absolute;
+	}
 </style>

src/router/index.js

@@ -2,17 +2,22 @@ import Vue from 'vue'
 import Router from 'vue-router'
 // import vantui from 'vant'
 // import 'vant/lib/index.css'
-import login from '@/components/pages/login'
+import index from '@/components/pages/index'
 import twentyFour from '@/components/pages/twentyFour'
+import isRight from '@/components/pages/isRight'
+import advanced from '@/components/pages/advanced'
+import master from '@/components/pages/master'
+import fun from '@/components/pages/fun'
+import leader from '@/components/pages/leader'
 Vue.use(Router)
 
 export default new Router({
     routes: [{
-        path: '/',
-        name: 'login',
-        component: login,
+        path: '/index',
+        name: 'index',
+        component: index,
         meta: {
-            title: '上传作业',
+            title: '首页',
             requireAuth: '' // 是否需要判断是否登录,这里是需要判断
         }
     }, {
@@ -20,10 +25,56 @@ export default new Router({
         name: 'twentyFour',
         component: twentyFour,
         meta: {
-            title: '24点功能',
+            title: '入门级24点功能',
             requireAuth: '' // 是否需要判断是否登录,这里是需要判断
         }
-    }, ]
+    },
+    {
+        path: '/advanced',
+        name: 'advanced',
+        component: advanced,
+        meta: {
+            title: '进阶级24点功能',
+            requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+        }
+    },
+    {
+        path: '/master',
+        name: 'master',
+        component: master,
+        meta: {
+            title: '大师级24点功能',
+            requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+        }
+    },
+    {
+        path: '/fun',
+        name: 'fun',
+        component: fun,
+        meta: {
+            title: '奇趣级24点功能',
+            requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+        }
+    },
+    {
+        path: '/leader',
+        name: 'leader',
+        component: leader,
+        meta: {
+            title: '排行榜',
+            requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+        }
+    },
+    {
+        path: '/isRight',
+        name: 'isRight',
+        component: isRight,
+        meta: {
+            title: '验证24点功能',
+            requireAuth: '' // 是否需要判断是否登录,这里是需要判断
+        }
+    },
+ ]
 })
 
 const VueRouterPush = Router.prototype.push