修改滚动条问题

src/components/pages/advanced.vue

@@ -1,96 +1,96 @@
 <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">
+  <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-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>
@@ -107,38 +107,38 @@
 						      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-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 type="primary" plain icon="el-icon-plus" @click="add"
 							>加</el-button
 						> -->
-				<!-- <div class="add" @click="add"></div>
+        <!-- <div class="add" @click="add"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4"> -->
-				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+        <!-- <el-col :span="4"> -->
+        <!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
 							>减</el-button
 						> -->
-				<!-- <div class="inc" @click="inc"></div>
+        <!-- <div class="inc" @click="inc"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4">
+        <!-- <el-col :span="4">
 						<el-button type="primary" plain icon="el-icon-close" @click="mul"
 							>乘</el-button
 						>
@@ -169,9 +169,9 @@
 							>号</el-button
 						>
 					</el-col> -->
-				<!-- </el-row> -->
+        <!-- </el-row> -->
 
-				<!-- <el-row :gutter="20" class="footBtn">
+        <!-- <el-row :gutter="20" class="footBtn">
 					<el-col :span="4">
 						<el-button
 							type="primary"
@@ -200,16 +200,16 @@
 						>
 					</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
+        <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;
@@ -219,769 +219,773 @@
 				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 style="font-size: 0.9rem;">24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24 的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成 24。</div>
-			<div style="font-size: 0.9rem;">进阶级不提供提示</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>
-		<el-dialog
-			title="提示"
-			:visible.sync="dialogVisible3"
-			:append-to-body="true"
-			width="80%"
-			:before-close="handleClose"
-			class="dialog_diy1"
-		>
-			<div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
-		<audio ref="errs">
-			<source src="../../assets/twentyFour/err.mp3" type="audio/mpeg" />
-		</audio>
-	</el-container>
+    <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 style="font-size: 0.9rem">
+        24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24
+        的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成
+        24。
+      </div>
+      <div style="font-size: 0.9rem">进阶级不提供提示</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>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible3"
+      :append-to-body="true"
+      width="80%"
+      :before-close="handleClose"
+      class="dialog_diy1"
+    >
+      <div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
+    <audio ref="errs">
+      <source src="../../assets/twentyFour/err.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,
-				dialogVisible3: 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;
-				let a = 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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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();
-		},
-	};
+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,
+      dialogVisible3: 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;
+      let a = 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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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;
-		opacity: 0.4;
-	}
-	.cardS {
-		background-image: url("../../assets/twentyFour/xuanS.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardT {
-		background-image: url("../../assets/twentyFour/xuanT.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardFour {
-		background-image: url("../../assets/twentyFour/xuanFour.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-
-	.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;
-		opacity: 1;
-	}
-	.xuanSIsClick {
-		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanTIsClick {
-		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanFourIsClick {
-		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
-		opacity: 1;
-	}
-	.addIsClick {
-		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
-		opacity: 1;
-	}
-	.reduceIsClick {
-		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
-		opacity: 1;
-	}
-	.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;
-	}
+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;
+  opacity: 0.4;
+}
+.cardS {
+  background-image: url("../../assets/twentyFour/xuanS.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardT {
+  background-image: url("../../assets/twentyFour/xuanT.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardFour {
+  background-image: url("../../assets/twentyFour/xuanFour.png");
+  height: 120px;
+  opacity: 0.4;
+}
+
+.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;
+  opacity: 1;
+}
+.xuanSIsClick {
+  background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+  opacity: 1;
+}
+.xuanTIsClick {
+  background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+  opacity: 1;
+}
+.xuanFourIsClick {
+  background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+  opacity: 1;
+}
+.addIsClick {
+  background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+  opacity: 1;
+}
+.reduceIsClick {
+  background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+  opacity: 1;
+}
+.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

@@ -1,124 +1,124 @@
 <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">
+  <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-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>
@@ -135,48 +135,48 @@
 						      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-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 type="primary" plain icon="el-icon-plus" @click="add"
 							>加</el-button
 						> -->
-				<!-- <div class="add" @click="add"></div>
+        <!-- <div class="add" @click="add"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4"> -->
-				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+        <!-- <el-col :span="4"> -->
+        <!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
 							>减</el-button
 						> -->
-				<!-- <div class="inc" @click="inc"></div>
+        <!-- <div class="inc" @click="inc"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4">
+        <!-- <el-col :span="4">
 						<el-button type="primary" plain icon="el-icon-close" @click="mul"
 							>乘</el-button
 						>
@@ -207,9 +207,9 @@
 							>号</el-button
 						>
 					</el-col> -->
-				<!-- </el-row> -->
+        <!-- </el-row> -->
 
-				<!-- <el-row :gutter="20" class="footBtn">
+        <!-- <el-row :gutter="20" class="footBtn">
 					<el-col :span="4">
 						<el-button
 							type="primary"
@@ -238,16 +238,16 @@
 						>
 					</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
+        <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;
@@ -257,896 +257,900 @@
 				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 style="font-size: 0.9rem;">24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24 的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成 24。</div>
-			<div style="font-size: 0.9rem;">奇趣级不提供提示</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>
-		<el-dialog
-			title="提示"
-			:visible.sync="dialogVisible3"
-			:append-to-body="true"
-			width="80%"
-			:before-close="handleClose"
-			class="dialog_diy1"
-		>
-			<div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
-		<audio ref="errs">
-			<source src="../../assets/twentyFour/err.mp3" type="audio/mpeg" />
-		</audio>
-	</el-container>
+    <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 style="font-size: 0.9rem">
+        24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24
+        的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成
+        24。
+      </div>
+      <div style="font-size: 0.9rem">奇趣级不提供提示</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>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible3"
+      :append-to-body="true"
+      width="80%"
+      :before-close="handleClose"
+      class="dialog_diy1"
+    >
+      <div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
+    <audio ref="errs">
+      <source src="../../assets/twentyFour/err.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,
-				dialogVisible3: 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;
-				let a = 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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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();
-		},
-	};
+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,
+      dialogVisible3: 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;
+      let a = 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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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;
-		opacity: 0.4;
-	}
-	.cardS {
-		background-image: url("../../assets/twentyFour/xuanS.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardT {
-		background-image: url("../../assets/twentyFour/xuanT.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardFour {
-		background-image: url("../../assets/twentyFour/xuanFour.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-
-	.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;
-		opacity: 1;
-	}
-	.xuanSIsClick {
-		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanTIsClick {
-		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanFourIsClick {
-		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
-		opacity: 1;
-	}
-	.addIsClick {
-		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
-		opacity: 1;
-	}
-	.reduceIsClick {
-		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
-		opacity: 1;
-	}
-	.takeIsClick {
-		background-image: url("../../assets/twentyFour/takeIsClick.png") !important;
-		opacity: 1;
-	}
-	.removeIsClick {
-		background-image: url("../../assets/twentyFour/removeIsClick.png") !important;
-		opacity: 1;
-	}
-	.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;
-	}
+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;
+  opacity: 0.4;
+}
+.cardS {
+  background-image: url("../../assets/twentyFour/xuanS.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardT {
+  background-image: url("../../assets/twentyFour/xuanT.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardFour {
+  background-image: url("../../assets/twentyFour/xuanFour.png");
+  height: 120px;
+  opacity: 0.4;
+}
+
+.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;
+  opacity: 1;
+}
+.xuanSIsClick {
+  background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+  opacity: 1;
+}
+.xuanTIsClick {
+  background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+  opacity: 1;
+}
+.xuanFourIsClick {
+  background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+  opacity: 1;
+}
+.addIsClick {
+  background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+  opacity: 1;
+}
+.reduceIsClick {
+  background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+  opacity: 1;
+}
+.takeIsClick {
+  background-image: url("../../assets/twentyFour/takeIsClick.png") !important;
+  opacity: 1;
+}
+.removeIsClick {
+  background-image: url("../../assets/twentyFour/removeIsClick.png") !important;
+  opacity: 1;
+}
+.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/master.vue

@@ -1,96 +1,96 @@
 <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">
+  <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-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>
@@ -107,48 +107,48 @@
 						      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-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 type="primary" plain icon="el-icon-plus" @click="add"
 							>加</el-button
 						> -->
-				<!-- <div class="add" @click="add"></div>
+        <!-- <div class="add" @click="add"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4"> -->
-				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+        <!-- <el-col :span="4"> -->
+        <!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
 							>减</el-button
 						> -->
-				<!-- <div class="inc" @click="inc"></div>
+        <!-- <div class="inc" @click="inc"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4">
+        <!-- <el-col :span="4">
 						<el-button type="primary" plain icon="el-icon-close" @click="mul"
 							>乘</el-button
 						>
@@ -179,9 +179,9 @@
 							>号</el-button
 						>
 					</el-col> -->
-				<!-- </el-row> -->
+        <!-- </el-row> -->
 
-				<!-- <el-row :gutter="20" class="footBtn">
+        <!-- <el-row :gutter="20" class="footBtn">
 					<el-col :span="4">
 						<el-button
 							type="primary"
@@ -210,16 +210,16 @@
 						>
 					</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
+        <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;
@@ -229,884 +229,888 @@
 				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 style="font-size: 0.9rem;">24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24 的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成 24。</div>
-			<div style="font-size: 0.9rem;">大师级不提供提示</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>
-		<el-dialog
-			title="提示"
-			:visible.sync="dialogVisible3"
-			:append-to-body="true"
-			width="80%"
-			:before-close="handleClose"
-			class="dialog_diy1"
-		>
-			<div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
-		<audio ref="errs">
-			<source src="../../assets/twentyFour/err.mp3" type="audio/mpeg" />
-		</audio>
-	</el-container>
+    <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 style="font-size: 0.9rem">
+        24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24
+        的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成
+        24。
+      </div>
+      <div style="font-size: 0.9rem">大师级不提供提示</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>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible3"
+      :append-to-body="true"
+      width="80%"
+      :before-close="handleClose"
+      class="dialog_diy1"
+    >
+      <div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
+    <audio ref="errs">
+      <source src="../../assets/twentyFour/err.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,
-				dialogVisible3: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;
-				let a = 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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-								this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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();
-		},
-	};
+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,
+      dialogVisible3: 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;
+      let a = 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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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;
-		opacity: 0.4;
-	}
-	.cardS {
-		background-image: url("../../assets/twentyFour/xuanS.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardT {
-		background-image: url("../../assets/twentyFour/xuanT.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardFour {
-		background-image: url("../../assets/twentyFour/xuanFour.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-
-	.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;
-		opacity: 1;
-	}
-	.xuanSIsClick {
-		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanTIsClick {
-		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanFourIsClick {
-		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
-		opacity: 1;
-	}
-	.addIsClick {
-		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
-		opacity: 1;
-	}
-	.reduceIsClick {
-		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
-		opacity: 1;
-	}
-	.takeIsClick {
-		background-image: url("../../assets/twentyFour/takeIsClick.png") !important;
-		opacity: 1;
-	}
-	.removeIsClick {
-		background-image: url("../../assets/twentyFour/removeIsClick.png") !important;
-		opacity: 1;
-	}
-	.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;
-	}
+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;
+  opacity: 0.4;
+}
+.cardS {
+  background-image: url("../../assets/twentyFour/xuanS.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardT {
+  background-image: url("../../assets/twentyFour/xuanT.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardFour {
+  background-image: url("../../assets/twentyFour/xuanFour.png");
+  height: 120px;
+  opacity: 0.4;
+}
+
+.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;
+  opacity: 1;
+}
+.xuanSIsClick {
+  background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+  opacity: 1;
+}
+.xuanTIsClick {
+  background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+  opacity: 1;
+}
+.xuanFourIsClick {
+  background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+  opacity: 1;
+}
+.addIsClick {
+  background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+  opacity: 1;
+}
+.reduceIsClick {
+  background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+  opacity: 1;
+}
+.takeIsClick {
+  background-image: url("../../assets/twentyFour/takeIsClick.png") !important;
+  opacity: 1;
+}
+.removeIsClick {
+  background-image: url("../../assets/twentyFour/removeIsClick.png") !important;
+  opacity: 1;
+}
+.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,96 +1,96 @@
 <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">
+  <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-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>
@@ -107,38 +107,38 @@
 						      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-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 type="primary" plain icon="el-icon-plus" @click="add"
 							>加</el-button
 						> -->
-				<!-- <div class="add" @click="add"></div>
+        <!-- <div class="add" @click="add"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4"> -->
-				<!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
+        <!-- <el-col :span="4"> -->
+        <!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
 							>减</el-button
 						> -->
-				<!-- <div class="inc" @click="inc"></div>
+        <!-- <div class="inc" @click="inc"></div>
 					</el-col> -->
 
-				<!-- <el-col :span="4">
+        <!-- <el-col :span="4">
 						<el-button type="primary" plain icon="el-icon-close" @click="mul"
 							>乘</el-button
 						>
@@ -169,9 +169,9 @@
 							>号</el-button
 						>
 					</el-col> -->
-				<!-- </el-row> -->
+        <!-- </el-row> -->
 
-				<!-- <el-row :gutter="20" class="footBtn">
+        <!-- <el-row :gutter="20" class="footBtn">
 					<el-col :span="4">
 						<el-button
 							type="primary"
@@ -200,16 +200,16 @@
 						>
 					</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
+        <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;
@@ -219,766 +219,770 @@
 				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 style="font-size: 0.9rem;">24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24 的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成 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>
-		
-		<el-dialog
-			title="提示"
-			:visible.sync="dialogVisible3"
-			:append-to-body="true"
-			width="80%"
-			:before-close="handleClose"
-			class="dialog_diy1"
-		>
-			<div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
-		<audio ref="errs">
-			<source src="../../assets/twentyFour/err.mp3" type="audio/mpeg" />
-		</audio>
-	</el-container>
+    <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 style="font-size: 0.9rem">
+        24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24
+        的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成
+        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>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible3"
+      :append-to-body="true"
+      width="80%"
+      :before-close="handleClose"
+      class="dialog_diy1"
+    >
+      <div style="margin-bottom: 15px">计算错误！</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="dialogVisible3 = 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>
+    <audio ref="errs">
+      <source src="../../assets/twentyFour/err.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,
-				dialogVisible3: 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;
-				let a = 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++;
-								}else{
-									a++;
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-                				this.$refs.vm.play();
-							}else if( a ==  this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if( a ==  this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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++;
-								}else{
-									a++;
-								}
-							}
-							if (b == 1) {
-								this.dialogVisible2 = true;
-                				this.$refs.vm.play();
-							}else if(a == this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.play();
-							}
-						}else{
-							for (var i = 0; i < this.randomNum.length; i++) {
-								if (this.randomNum[i] == "") {
-									a++;
-								}
-							}
-							if( a ==  this.randomNum.length-1){
-								this.dialogVisible3 = true;
-								this.$refs.errs.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();
-		},
-	};
+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,
+      dialogVisible3: 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;
+      let a = 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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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++;
+              } else {
+                a++;
+              }
+            }
+            if (b == 1) {
+              this.dialogVisible2 = true;
+              this.$refs.vm.play();
+            } else if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.play();
+            }
+          } else {
+            for (var i = 0; i < this.randomNum.length; i++) {
+              if (this.randomNum[i] == "") {
+                a++;
+              }
+            }
+            if (a == this.randomNum.length - 1) {
+              this.dialogVisible3 = true;
+              this.$refs.errs.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;
-		opacity: 0.4;
-	}
-	.cardS {
-		background-image: url("../../assets/twentyFour/xuanS.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardT {
-		background-image: url("../../assets/twentyFour/xuanT.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-	.cardFour {
-		background-image: url("../../assets/twentyFour/xuanFour.png");
-		height: 120px;
-		opacity: 0.4;
-	}
-
-	.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;
-		opacity: 1;
-	}
-	.xuanSIsClick {
-		background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanTIsClick {
-		background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
-		opacity: 1;
-	}
-	.xuanFourIsClick {
-		background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
-		opacity: 1;
-	}
-	.addIsClick {
-		background-image: url("../../assets/twentyFour/addIsClick.png") !important;
-		opacity: 1;
-	}
-	.reduceIsClick {
-		background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
-		opacity: 1;
-	}
-	.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;
-	}
+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;
+  opacity: 0.4;
+}
+.cardS {
+  background-image: url("../../assets/twentyFour/xuanS.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardT {
+  background-image: url("../../assets/twentyFour/xuanT.png");
+  height: 120px;
+  opacity: 0.4;
+}
+.cardFour {
+  background-image: url("../../assets/twentyFour/xuanFour.png");
+  height: 120px;
+  opacity: 0.4;
+}
+
+.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;
+  opacity: 1;
+}
+.xuanSIsClick {
+  background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
+  opacity: 1;
+}
+.xuanTIsClick {
+  background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
+  opacity: 1;
+}
+.xuanFourIsClick {
+  background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
+  opacity: 1;
+}
+.addIsClick {
+  background-image: url("../../assets/twentyFour/addIsClick.png") !important;
+  opacity: 1;
+}
+.reduceIsClick {
+  background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
+  opacity: 1;
+}
+.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>