1

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

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,5 +1,5 @@
 <template>
-	<div>
+	<div style="height: 98%; background: #fff; width: 98%; margin: 10px auto">
 		<div class="tip">
 			<img src="../assets/img/carJs.png" alt="" />
 		</div>
@@ -1323,8 +1323,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip > img,
 	#screan > img,
 	#tou > img,
 	#ai > img,
@@ -1492,6 +1493,7 @@
 		height: 55px;
 		font-size: 20px;
 		text-align: center;
+		border-radius: 10px;
 		line-height: 55px;
 		position: absolute;
 		bottom: 10%;

src/components/curtain.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/curtainJs.png" alt="" />
 		</div>
@@ -1417,8 +1417,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#bottom > img,
 	#ai > img,
@@ -1585,6 +1586,7 @@
 		width: 550px;
 		height: 55px;
 		font-size: 20px;
+		border-radius: 10px;
 		text-align: center;
 		line-height: 55px;
 		position: absolute;

src/components/door.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/doorJs.png" alt="" />
 		</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>
@@ -207,7 +205,7 @@
 	}
 
 	.tp {
-		width: 300px;
+		width: 250px;
 		margin: 0 60px 40px 0;
 		cursor: pointer;
 	}
@@ -227,7 +225,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 +292,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,5 +1,5 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
 			<img src="../assets/img/necklace/necklaceJs.png" alt="" />
 		</div>
@@ -544,8 +544,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#ai > img,
 	#tou > img,
@@ -631,6 +632,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>
@@ -341,8 +341,9 @@
 
 	.tip {
 		margin: 25px 0 30px 20px;
+		width: 300px;
 	}
-
+	.tip>img,
 	#screan > img,
 	#tou > img,
 	#ai > img,
@@ -408,6 +409,7 @@
 		background: #8ca1de;
 		width: 550px;
 		height: 55px;
+		border-radius: 10px;
 		font-size: 20px;
 		text-align: center;
 		line-height: 55px;

src/components/robot.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/robotJs.png" alt="" />
 		</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,
@@ -574,6 +575,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,5 +1,5 @@
 <template>
-	<div>
+	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
 		<div class="tip">
 			<img src="../assets/img/lightJs.png" alt="" />
 		</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%);