Merge branch 'master' of https://git.cocorobo.cn/CocoRoboLabs/cocoroboBlockly

src/App.vue

@@ -1,14 +1,14 @@
 <template>
-  <div id="app">
-    <div class="head">
-      <div class="logo">
-        <img
-          style="height: 40px; margin-top: 10px"
-          class="left nav-icon"
-          src="https://x.cocorobo.cn/icons/logo.png"
-          @click="goto()"
-        />
-        <!-- <span
+	<div id="app">
+		<div class="head">
+			<div class="logo">
+				<img
+					style="height: 40px; margin-top: 10px"
+					class="left nav-icon"
+					src="https://x.cocorobo.cn/icons/logo.png"
+					@click="goto()"
+				/>
+				<!-- <span
           style="
             font-size: 28px;
             font-family: 'GT Walsheim Pro Trial Bold';
@@ -17,158 +17,159 @@
           "
           >CocoBlockly</span
         > -->
-      </div>
-      <div class="user_head" v-if="this.$store.state.userId">
-        <span class="user_name">{{ this.$store.state.userName }}</span>
-        <div>
-          <i></i>
-          <el-button type="text" style="color: white" @click="logout"
-            >退出</el-button
-          >
-        </div>
-      </div>
-    </div>
+			</div>
+			<div class="user_head" v-if="this.$store.state.userId">
+				<span class="user_name">{{ this.$store.state.userName }}</span>
+				<div>
+					<i></i>
+					<el-button type="text" style="color: white" @click="logout"
+						>退出</el-button
+					>
+				</div>
+			</div>
+		</div>
 
-    <div style="background: #fff; height: calc(100% - 67.5px); width: 100%">
-      <!-- main 内容 -->
-      <keep-alive v-if="$route.meta.keepAlive">
-        <!-- 这里是会被缓存的视图组件 -->
-        <router-view v-if="$route.meta.keepAlive" />
-      </keep-alive>
-      <!-- 这里是不被缓存的视图组件 -->
-      <router-view v-if="!$route.meta.keepAlive" />
-    </div>
-  </div>
+		<div style="background: #e5e5e5; height: calc(100% - 88.5px); width: 100%">
+			<!-- main 内容 -->
+			<keep-alive v-if="$route.meta.keepAlive">
+				<!-- 这里是会被缓存的视图组件 -->
+				<router-view v-if="$route.meta.keepAlive" />
+			</keep-alive>
+			<!-- 这里是不被缓存的视图组件 -->
+			<router-view v-if="!$route.meta.keepAlive" />
+		</div>
+	</div>
 </template>
 
 <script>
-export default {
-  name: "App",
-  created() {
-    //在页面加载时读取sessionStorage里的状态信息
-    if (sessionStorage.getItem("store")) {
-      this.$store.replaceState(
-        Object.assign(
-          {},
-          this.$store.state,
-          JSON.parse(sessionStorage.getItem("store"))
-        )
-      );
-    }
+	export default {
+		name: "App",
+		created() {
+			//在页面加载时读取sessionStorage里的状态信息
+			if (sessionStorage.getItem("store")) {
+				this.$store.replaceState(
+					Object.assign(
+						{},
+						this.$store.state,
+						JSON.parse(sessionStorage.getItem("store"))
+					)
+				);
+			}
 
-    //在页面刷新时将vuex里的信息保存到sessionStorage里
-    window.addEventListener("beforeunload", () => {
-      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
-    });
-    this.login();
-  },
-  methods: {
-    goto() {
-      this.$router.push("/");
-    },
-    login() {
-      //debugger;
-      // console.log("1");
-      var _this = this;
-      _this.ajax
-        .get(`${_this.$store.state.server}getcookieuserid`)
-        .then((res) => {
-          var userid = res.data[0][0].userid;
-          var userid = "4be5e344-ce1a-11e9-a839-028edca3b798";
-          _this.$store.commit("update", ["userId", userid]);
-          _this.ajax
-            .get(
-              `${_this.$store.state.edu}admin/userinfo/userinfoById/${userid}/`
-            )
-            .then((r) => {
-              let data = r.data[0][0];
-              console.log(data);
-              _this.$store.commit("update", [
-                "userName",
-                data.alias || data.username,
-              ]);
-            });
-          if (res.data[0][0]) {
-            _this.setState({
-              userId: res.data[0][0].userid,
-            });
-          }
-        })
-        .catch((err) => {
-          // _this.props.history.push("/login");
-          // window.alert(err.response.data)
-          window.location.href = "https://edu.cocorobo.cn/course/login?type=1";
-        });
-    },
-    logout() {
-      this.ajax
-        .post(`${this.$store.state.server}logout`)
-        .then((res) => {
-          if (res.data) {
-            window.location.href =
-              "https://edu.cocorobo.cn/course/login?type=1";
-          }
-        })
-        .catch((err) => {});
-    },
-  },
-};
+			//在页面刷新时将vuex里的信息保存到sessionStorage里
+			window.addEventListener("beforeunload", () => {
+				sessionStorage.setItem("store", JSON.stringify(this.$store.state));
+			});
+			this.login();
+		},
+		methods: {
+			goto() {
+				this.$router.push("/");
+			},
+			login() {
+				//debugger;
+				// console.log("1");
+				var _this = this;
+				_this.ajax
+					.get(`${_this.$store.state.server}getcookieuserid`)
+					.then((res) => {
+						var userid = res.data[0][0].userid;
+						// var userid = "4be5e344-ce1a-11e9-a839-028edca3b798";
+						_this.$store.commit("update", ["userId", userid]);
+						_this.ajax
+							.get(
+								`${_this.$store.state.edu}admin/userinfo/userinfoById/${userid}/`
+							)
+							.then((r) => {
+								let data = r.data[0][0];
+								console.log(data);
+								_this.$store.commit("update", [
+									"userName",
+									data.alias || data.username,
+								]);
+							});
+						if (res.data[0][0]) {
+							_this.setState({
+								userId: res.data[0][0].userid,
+							});
+						}
+					})
+					.catch((err) => {
+						// _this.props.history.push("/login");
+						// window.alert(err.response.data)
+						window.location.href = "https://edu.cocorobo.cn/course/login?type=1";
+					});
+			},
+			logout() {
+				this.ajax
+					.post(`${this.$store.state.server}logout`)
+					.then((res) => {
+						if (res.data) {
+							window.location.href =
+								"https://edu.cocorobo.cn/course/login?type=1";
+						}
+					})
+					.catch((err) => {});
+			},
+		},
+	};
 </script>
 
 <style>
-* {
-  margin: 0;
-  padding: 0;
-}
-body {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-}
-#app {
-  height: 100%;
-  width: 100%;
-  /* background: #e6eaf0; */
-  /* min-width: 1380px; */
-  background: #fff;
-  min-width: 1000px;
-}
-.head {
-  height: 67.5px;
-  width: 100%;
-  background-color: #2c4fcd;
-  display: flex;
-  align-items: center;
-  min-width: 1000px;
-}
-.logo {
-  margin-left: 20px;
-  cursor: pointer;
-}
-.user_head {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  margin-right: 20px;
-  font-size: 18px;
-  font-weight: 600;
-}
-.user_head .user_name {
-  color: #fff;
-  margin-right: 10px;
-}
-.user_head div {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.user_head i {
-  background-image: url("./assets/exit.png");
-  width: 25px;
-  height: 25px;
-  background-size: 100% 100%;
-  margin-top: 1px;
-  line-height: 25px;
-  vertical-align: text-top;
-  background-repeat: no-repeat;
-}
+	* {
+		margin: 0;
+		padding: 0;
+	}
+	body {
+		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+			"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+	}
+	#app {
+		height: 100%;
+		width: 100%;
+		/* background: #e6eaf0; */
+		/* min-width: 1380px; */
+		/* background: #fff; */
+		background: #e5e5e5;
+		min-width: 1000px;
+	}
+	.head {
+		height: 67.5px;
+		width: 100%;
+		background-color: #2c4fcd;
+		display: flex;
+		align-items: center;
+		min-width: 1000px;
+	}
+	.logo {
+		margin-left: 20px;
+		cursor: pointer;
+	}
+	.user_head {
+		display: flex;
+		align-items: center;
+		margin-left: auto;
+		margin-right: 20px;
+		font-size: 18px;
+		font-weight: 600;
+	}
+	.user_head .user_name {
+		color: #fff;
+		margin-right: 10px;
+	}
+	.user_head div {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	}
+	.user_head i {
+		background-image: url("./assets/exit.png");
+		width: 25px;
+		height: 25px;
+		background-size: 100% 100%;
+		margin-top: 1px;
+		line-height: 25px;
+		vertical-align: text-top;
+		background-repeat: no-repeat;
+	}
 </style>

src/components/car.vue

@@ -1,11 +1,11 @@
 <template>
-	<div>
+	<div style="height: 98%; background: #fff; width: 98%; margin: 10px auto">
 		<div class="tip">
-			<img src="../assets/img/carJs.png" alt="" />
+			<img src="../assets/img/car/tips.png" alt="" />
 		</div>
 		<div class="img">
 			<div
-            v-show="f3 != 1"
+				v-show="f3 != 1"
 				id="screan"
 				v-drag="{
 					go,
@@ -25,22 +25,22 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/light/screan.png" alt="" />
 			</div>
 			<div
-            v-show="f3 != 1"
+				v-show="f3 != 1"
 				id="tou"
 				v-drag="{
 					go,
@@ -60,22 +60,22 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/tou1.png" alt="" />
 			</div>
 			<div
-            v-show="f3 != 1"
+				v-show="f3 != 1"
 				id="ai"
 				v-drag="{
 					go,
@@ -95,16 +95,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/ai.png" alt="" />
@@ -129,16 +129,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/lightBlue.png" alt="" />
@@ -163,22 +163,22 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/lightWhite.png" alt="" />
 			</div>
 			<div
-            v-show="f3 != 1"
+				v-show="f3 != 1"
 				id="F3"
 				v-drag="{
 					go,
@@ -198,16 +198,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/f3.png" alt="" />
@@ -232,16 +232,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/f4.png" alt="" />
@@ -266,16 +266,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/f2.png" alt="" />
@@ -300,16 +300,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/f1White.png" alt="" />
@@ -334,16 +334,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/f1Blue.png" alt="" />
@@ -368,16 +368,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/wheelWhite.png" alt="" />
@@ -402,16 +402,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/wheelBlack.png" alt="" />
@@ -436,21 +436,21 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/light.png" alt="" />
 			</div>
-            <div
+			<div
 				v-show="f3 == 1"
 				id="line"
 				v-drag="{
@@ -471,16 +471,16 @@
 					getf1White,
 					setF4,
 					getF4,
-                    setF2,
-                    getF2,
-                    setLight,
-                    getLight,
-                    setwheelWhite,
-                    getwheelWhite,
-                    setwheelBlack,
-                    getwheelBlack,
-                    setF3,
-                    getF3,
+					setF2,
+					getF2,
+					setLight,
+					getLight,
+					setwheelWhite,
+					getwheelWhite,
+					setwheelBlack,
+					getwheelBlack,
+					setF3,
+					getF3,
 				}"
 			>
 				<img src="../assets/img/car/line.png" alt="" />
@@ -508,11 +508,11 @@
 				lightBlue: "",
 				f1White: "",
 				f4: "",
-                f2: "",
-                light: "",
-                wheelWhite: "",
-                wheelBlack: "",
-                f3: "",
+				f2: "",
+				light: "",
+				wheelWhite: "",
+				wheelBlack: "",
+				f3: "",
 			};
 		},
 		directives: {
@@ -541,7 +541,7 @@
 					var _wheelWhite = document.getElementById("wheelWhite");
 					var _wheelBlack = document.getElementById("wheelBlack");
 					var _light = document.getElementById("light");
-                    var _line = document.getElementById("line");
+					var _line = document.getElementById("line");
 					var musicC = document.getElementById("musicC");
 
 					//鼠标按下事件
@@ -710,18 +710,20 @@
 						var btn = document.getElementsByClassName("button")[0];
 						var right = document.getElementsByClassName("right")[0];
 
-                        var policeL = _wheelWhite.offsetLeft;
-                        var policeT = _wheelWhite.offsetTop;
+						var policeL = _wheelWhite.offsetLeft;
+						var policeT = _wheelWhite.offsetTop;
 
-						if (binding.value.getlightWhite() == 1 &&
+						if (
+							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getf1White() == 1 &&
 							binding.value.getF4() == 1 &&
 							binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
-                            binding.value.getwheelWhite() == 1 &&
-                            binding.value.getwheelBlack() == 1 &&
-                            binding.value.getF3() == 1) {
+							binding.value.getLight() == 1 &&
+							binding.value.getwheelWhite() == 1 &&
+							binding.value.getwheelBlack() == 1 &&
+							binding.value.getF3() == 1
+						) {
 							btn.className = "button dark";
 							btn.onclick = function () {
 								binding.value.go();
@@ -775,8 +777,8 @@
 						var lightL = _light.offsetLeft;
 						var lightT = _light.offsetTop;
 
-                        var lineL = _line.offsetLeft;
-                        var lineT = _line.offsetTop;
+						var lineL = _line.offsetLeft;
+						var lineT = _line.offsetTop;
 
 						var firstL = screanL - touL;
 						var firstT = screanT - touT;
@@ -802,17 +804,17 @@
 						var eighthL = f1WhiteL - f2L;
 						var eighthT = f1WhiteT - f2T;
 
-                        var nighthL = f2L - lightL;
-                        var nighthT = f2T - lightT; 
+						var nighthL = f2L - lightL;
+						var nighthT = f2T - lightT;
+
+						var tenthL = f1WhiteL - wheelWhiteL;
+						var tenthT = f1WhiteT - wheelWhiteT;
 
-                        var tenthL = f1WhiteL - wheelWhiteL;
-                        var tenthT = f1WhiteT - wheelWhiteT;
+						var eleventhL = f1WhiteL - wheelBlackL;
+						var eleventhT = f1WhiteT - wheelBlackT;
 
-                        var eleventhL = f1WhiteL - wheelBlackL;
-                        var eleventhT = f1WhiteT - wheelBlackT;
-                        
-                        var twlevethL = f1WhiteL - f3L;
-                        var twlevethT = f1WhiteT - f3T;
+						var twlevethL = f1WhiteL - f3L;
+						var twlevethT = f1WhiteT - f3T;
 
 						if (
 							-70 < firstL &&
@@ -945,7 +947,7 @@
 							binding.value.setF2(0);
 						}
 
-                        if (
+						if (
 							-393 < nighthL &&
 							nighthL < -302 &&
 							-113 < nighthT &&
@@ -953,7 +955,7 @@
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getF4() == 1 &&
-                            binding.value.getF2() == 1 &&
+							binding.value.getF2() == 1 &&
 							type == "light"
 						) {
 							_light.style.left = f2L + 354 + "px";
@@ -964,7 +966,7 @@
 							binding.value.setLight(0);
 						}
 
-                        if (
+						if (
 							-5 < tenthL &&
 							tenthL < 28 &&
 							-42 < tenthT &&
@@ -972,8 +974,8 @@
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getF4() == 1 &&
-                            binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
+							binding.value.getF2() == 1 &&
+							binding.value.getLight() == 1 &&
 							type == "wheelWhite"
 						) {
 							_wheelWhite.style.left = f1WhiteL - 11 + "px";
@@ -983,7 +985,7 @@
 						} else if (type == "wheelWhite") {
 							binding.value.setwheelWhite(0);
 						}
-                        if (
+						if (
 							-5 < eleventhL &&
 							eleventhL < 28 &&
 							-42 < eleventhT &&
@@ -991,9 +993,9 @@
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getF4() == 1 &&
-                            binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
-                            binding.value.getwheelWhite() == 1 &&
+							binding.value.getF2() == 1 &&
+							binding.value.getLight() == 1 &&
+							binding.value.getwheelWhite() == 1 &&
 							type == "wheelBlack"
 						) {
 							_wheelBlack.style.left = f1WhiteL - 11 + "px";
@@ -1004,7 +1006,7 @@
 							binding.value.setwheelBlack(0);
 						}
 
-                        if (
+						if (
 							-436 < twlevethL &&
 							twlevethL < -152 &&
 							-136 < twlevethT &&
@@ -1012,13 +1014,13 @@
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getF4() == 1 &&
-                            binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
-                            binding.value.getwheelWhite() == 1 &&
-                            binding.value.getwheelBlack() == 1 &&
-                            binding.value.getScrean() == 1 &&
-                            binding.value.getAi() == 1 &&
-                            binding.value.getTou() == 1 &&
+							binding.value.getF2() == 1 &&
+							binding.value.getLight() == 1 &&
+							binding.value.getwheelWhite() == 1 &&
+							binding.value.getwheelBlack() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getTou() == 1 &&
 							type == "F3"
 						) {
 							binding.value.setF3(1);
@@ -1114,13 +1116,13 @@
 							_F2.style.left = nl - 2 + "px";
 							_F2.style.top = nt + 67 + "px";
 						}
-                        if (
+						if (
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getf1White() == 1 &&
 							binding.value.getF4() == 1 &&
 							binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
+							binding.value.getLight() == 1 &&
 							type == "f1White"
 						) {
 							_lightWhite.style.left = nl + 42 + "px";
@@ -1133,17 +1135,17 @@
 							_F4.style.top = nt - 4 + "px";
 							_F2.style.left = nl - 2 + "px";
 							_F2.style.top = nt + 67 + "px";
-                            _light.style.left = nl + 352 + "px";
+							_light.style.left = nl + 352 + "px";
 							_light.style.top = nt + 90 + "px";
 						}
-                        if (
+						if (
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getf1White() == 1 &&
 							binding.value.getF4() == 1 &&
 							binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
-                            binding.value.getwheelWhite() == 1 &&
+							binding.value.getLight() == 1 &&
+							binding.value.getwheelWhite() == 1 &&
 							type == "f1White"
 						) {
 							_lightWhite.style.left = nl + 42 + "px";
@@ -1156,21 +1158,21 @@
 							_F4.style.top = nt - 4 + "px";
 							_F2.style.left = nl - 2 + "px";
 							_F2.style.top = nt + 67 + "px";
-                            _light.style.left = nl + 352 + "px";
+							_light.style.left = nl + 352 + "px";
 							_light.style.top = nt + 90 + "px";
-                            _wheelWhite.style.left = nl - 11 + "px";
+							_wheelWhite.style.left = nl - 11 + "px";
 							_wheelWhite.style.top = nt + 23 + "px";
 						}
 
-                        if (
+						if (
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getf1White() == 1 &&
 							binding.value.getF4() == 1 &&
 							binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
-                            binding.value.getwheelWhite() == 1 &&
-                            binding.value.getwheelBlack() == 1 &&
+							binding.value.getLight() == 1 &&
+							binding.value.getwheelWhite() == 1 &&
+							binding.value.getwheelBlack() == 1 &&
 							type == "f1White"
 						) {
 							_lightWhite.style.left = nl + 42 + "px";
@@ -1183,23 +1185,23 @@
 							_F4.style.top = nt - 4 + "px";
 							_F2.style.left = nl - 2 + "px";
 							_F2.style.top = nt + 67 + "px";
-                            _light.style.left = nl + 352 + "px";
+							_light.style.left = nl + 352 + "px";
 							_light.style.top = nt + 90 + "px";
-                            _wheelWhite.style.left = nl - 11 + "px";
+							_wheelWhite.style.left = nl - 11 + "px";
 							_wheelWhite.style.top = nt + 23 + "px";
-                            _wheelBlack.style.left = nl - 11 + "px";
+							_wheelBlack.style.left = nl - 11 + "px";
 							_wheelBlack.style.top = nt + 23 + "px";
 						}
-                        if (
+						if (
 							binding.value.getlightWhite() == 1 &&
 							binding.value.getlightBlue() == 1 &&
 							binding.value.getf1White() == 1 &&
 							binding.value.getF4() == 1 &&
 							binding.value.getF2() == 1 &&
-                            binding.value.getLight() == 1 &&
-                            binding.value.getwheelWhite() == 1 &&
-                            binding.value.getwheelBlack() == 1 &&
-                            binding.value.getF3() == 1 &&
+							binding.value.getLight() == 1 &&
+							binding.value.getwheelWhite() == 1 &&
+							binding.value.getwheelBlack() == 1 &&
+							binding.value.getF3() == 1 &&
 							type == "f1White"
 						) {
 							_lightWhite.style.left = nl + 42 + "px";
@@ -1212,14 +1214,14 @@
 							_F4.style.top = nt - 4 + "px";
 							_F2.style.left = nl - 2 + "px";
 							_F2.style.top = nt + 67 + "px";
-                            _light.style.left = nl + 352 + "px";
+							_light.style.left = nl + 352 + "px";
 							_light.style.top = nt + 90 + "px";
-                            _wheelWhite.style.left = nl - 11 + "px";
+							_wheelWhite.style.left = nl - 11 + "px";
 							_wheelWhite.style.top = nt + 23 + "px";
-                            _wheelBlack.style.left = nl - 11 + "px";
+							_wheelBlack.style.left = nl - 11 + "px";
 							_wheelBlack.style.top = nt + 23 + "px";
-                            _line.style.left = nl + 73 + "px";
-							_line.style.top = nt -22 + "px";
+							_line.style.left = nl + 73 + "px";
+							_line.style.top = nt - 22 + "px";
 						}
 					}
 				},
@@ -1277,31 +1279,31 @@
 			getF4() {
 				return this.f4;
 			},
-            setF2(value) {
+			setF2(value) {
 				this.f2 = value;
 			},
 			getF2() {
 				return this.f2;
 			},
-            setLight(value) {
+			setLight(value) {
 				this.light = value;
 			},
 			getLight() {
 				return this.light;
 			},
-            setwheelWhite(value) {
+			setwheelWhite(value) {
 				this.wheelWhite = value;
 			},
 			getwheelWhite() {
 				return this.wheelWhite;
 			},
-            setwheelBlack(value) {
+			setwheelBlack(value) {
 				this.wheelBlack = value;
 			},
 			getwheelBlack() {
 				return this.wheelBlack;
 			},
-            setF3(value) {
+			setF3(value) {
 				this.f3 = value;
 			},
 			getF3() {
@@ -1321,8 +1323,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip > img,
 	#screan > img,
 	#tou > img,
 	#ai > img,
@@ -1335,7 +1338,7 @@
 	#f1Blue > img,
 	#wheelWhite > img,
 	#wheelBlack > img,
-    #line>img,
+	#line > img,
 	#light > img,
 	.right > img {
 		width: 100%;
@@ -1469,7 +1472,7 @@
 		z-index: 10;
 	}
 
-    #line {
+	#line {
 		width: 450px;
 		position: absolute;
 		top: 37%;
@@ -1485,6 +1488,7 @@
 		height: 55px;
 		font-size: 20px;
 		text-align: center;
+		border-radius: 10px;
 		line-height: 55px;
 		position: absolute;
 		bottom: 10%;

src/components/curtain.vue

@@ -1,7 +1,7 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
-			<img src="../assets/img/curtainJs.png" alt="" />
+			<img src="../assets/img/curtains/tips.png" alt="" />
 		</div>
 		<div class="img">
 			<div
@@ -749,16 +749,16 @@
 							binding.value.getduoBi() == 1 &&
 							binding.value.getC5One() == 1 &&
 							binding.value.getC5Two() == 1 &&
-              binding.value.getPj() == 1 &&
-              binding.value.getC6() == 1 &&
-              binding.value.getButtom() == 1 &&
-              binding.value.getAi() == 1 &&
-              binding.value.getScrean() == 1 &&
-              binding.value.getC4() == 1 &&
-              binding.value.getC3() == 1 &&
-              binding.value.getC1() == 1 &&
-              binding.value.getCurtains() == 1 &&
-              binding.value.getLine() == 1
+							binding.value.getPj() == 1 &&
+							binding.value.getC6() == 1 &&
+							binding.value.getButtom() == 1 &&
+							binding.value.getAi() == 1 &&
+							binding.value.getScrean() == 1 &&
+							binding.value.getC4() == 1 &&
+							binding.value.getC3() == 1 &&
+							binding.value.getC1() == 1 &&
+							binding.value.getCurtains() == 1 &&
+							binding.value.getLine() == 1
 						) {
 							btn.className = "button dark";
 							btn.onclick = function () {
@@ -1417,8 +1417,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#bottom > img,
 	#ai > img,
@@ -1580,6 +1581,7 @@
 		width: 550px;
 		height: 55px;
 		font-size: 20px;
+		border-radius: 10px;
 		text-align: center;
 		line-height: 55px;
 		position: absolute;

src/components/door.vue

@@ -1,7 +1,7 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
-			<img src="../assets/img/doorJs.png" alt="" />
+			<img src="../assets/img/door/tips.png" alt="" />
 		</div>
 		<div class="img">
 			<div
@@ -1226,8 +1226,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#two > img,
 	#door > img,
 	#three > img,
@@ -1371,6 +1372,7 @@
 		width: 550px;
 		height: 55px;
 		font-size: 20px;
+		border-radius: 10px;
 		text-align: center;
 		line-height: 55px;
 		position: absolute;

src/components/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div style="background: #fff">
+	<div style="height: 98%; background: #fff; width: 98%; margin: 10px auto">
 		<div class="one">
 			<div class="class"><img src="../assets/img/class.png" alt="" /></div>
 			<div class="right">
@@ -69,23 +69,21 @@
 			</div>
 		</div>
 		<div class="three" v-if="res[type].length > 0 && type1 == 0">
-			<div v-for="(r, index) in res[type]" :key="index">
+			<div v-for="(r, index) in res[type]" :key="index" class="tp">
 				<img
 					:src="r.poster"
 					alt=""
 					@click="goto(r.path)"
-					class="tp"
 					:class="{ dan: r.path == '' }"
 				/>
 			</div>
 		</div>
 		<div class="six" v-else-if="res1[type2].length > 0 && type1 == 1">
-			<div v-for="(r, index) in res1[type2]" :key="index">
+			<div v-for="(r, index) in res1[type2]" :key="index" class="tp">
 				<img
 					:src="r.poster"
 					alt=""
 					@click="goto(r.path)"
-					class="tp"
 					:class="{ dan: r.path == '' }"
 				/>
 			</div>
@@ -172,7 +170,11 @@
 	.one {
 		display: flex;
 		flex-direction: row;
+		margin: 0 auto;
 		justify-content: space-between;
+		border-bottom: 1px solid #ebebeb;
+		width: 95%;
+		height: 88px;
 	}
 
 	.four {
@@ -187,8 +189,8 @@
 	}
 
 	.class {
-		margin: 30px 0 0 35px;
-		width: 250px;
+		margin: 30px 0 0 0;
+		width: 300px;
 	}
 
 	.grade {
@@ -207,7 +209,7 @@
 	}
 
 	.tp {
-		width: 300px;
+		width: 250px;
 		margin: 0 60px 40px 0;
 		cursor: pointer;
 	}
@@ -227,7 +229,7 @@
 		-webkit-box-orient: horizontal;
 		-webkit-box-direction: normal;
 		flex-direction: row;
-		padding: 50px 0 0 45px;
+		padding: 10px 0 0 45px;
 		box-sizing: border-box;
 		flex-wrap: wrap;
 		justify-content: flex-start;
@@ -294,7 +296,8 @@
 	.null > img,
 	.traffic > img,
 	.pay > img,
-	.police > img {
+	.police > img,
+	.tp > img {
 		width: 100%;
 	}
 </style>

src/components/light.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
 			<img src="../assets/img/light/tips.png" alt="" />
 		</div>
@@ -391,8 +391,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#tou > img,
 	#ai > img,
@@ -453,6 +454,7 @@
 		background: #8ca1de;
 		width: 550px;
 		height: 55px;
+		border-radius: 10px;
 		font-size: 20px;
 		text-align: center;
 		line-height: 55px;

src/components/necklace.vue

@@ -1,7 +1,7 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
-			<img src="../assets/img/necklace/necklaceJs.png" alt="" />
+			<img src="../assets/img/necklace/tips.png" alt="" />
 		</div>
 		<div class="img">
 			<div
@@ -544,8 +544,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#ai > img,
 	#tou > img,
@@ -626,6 +627,7 @@
 		background: #8ca1de;
 		width: 550px;
 		height: 55px;
+		border-radius: 10px;
 		font-size: 20px;
 		text-align: center;
 		line-height: 55px;

src/components/police.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
 			<img src="../assets/img/tips.png" alt="" />
 		</div>
@@ -266,10 +266,14 @@
 							dv.style.top = nt - 75 + "px";
 						}
 
-            if (binding.value.getC() == 1 && binding.value.getK() == 1 && type == 3) {
+						if (
+							binding.value.getC() == 1 &&
+							binding.value.getK() == 1 &&
+							type == 3
+						) {
 							dv.style.left = nl + 51 + "px";
 							dv.style.top = nt - 75 + "px";
-              dv1.style.left = nl + 98 + "px";
+							dv1.style.left = nl + 98 + "px";
 							dv1.style.top = nt - 153 + "px";
 						}
 
@@ -337,8 +341,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#tou > img,
 	#ai > img,
@@ -399,6 +404,7 @@
 		background: #8ca1de;
 		width: 550px;
 		height: 55px;
+		border-radius: 10px;
 		font-size: 20px;
 		text-align: center;
 		line-height: 55px;

src/components/robot.vue

@@ -1,7 +1,7 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
-			<img src="../assets/img/robotJs.png" alt="" />
+			<img src="../assets/img/robot/tips.png" alt="" />
 		</div>
 		<div class="img">
 			<div
@@ -1835,8 +1835,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#tou > img,
 	#ai > img,
@@ -2020,6 +2021,7 @@
 		font-size: 20px;
 		text-align: center;
 		line-height: 55px;
+		border-radius: 10px;
 		position: absolute;
 		bottom: 10%;
 		left: 50%;

src/components/shop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
     <div class="tip">
       <img src="../assets/img/shop/tips.png" alt="" />
     </div>
@@ -487,9 +487,10 @@ body {
 }
 
 .tip {
-  margin: 25px 0 30px 20px;
-}
-
+		margin: 25px 0 30px 20px;
+		width: 300px;
+	}
+	.tip>img,
 #screan > img,
 #tou > img,
 #ai > img,
@@ -569,6 +570,7 @@ body {
   width: 550px;
   height: 55px;
   font-size: 20px;
+  border-radius: 10px;
   text-align: center;
   line-height: 55px;
   position: absolute;

src/components/traffic.vue

@@ -1,7 +1,7 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
-			<img src="../assets/img/lightJs.png" alt="" />
+			<img src="../assets/img/traffic/tips.png" alt="" />
 		</div>
 		<div class="img">
 			<div
@@ -814,8 +814,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	.right > img,
 	#ai > img,
 	#light1 > img,
@@ -923,6 +924,7 @@
 		text-align: center;
 		line-height: 55px;
 		position: absolute;
+		border-radius: 10px;
 		bottom: 10%;
 		left: 50%;
 		transform: translateX(-50%);