app

src/App.vue

@@ -1,343 +1,344 @@
 <template>
-	<div id="app">
-		<div class="app_head" :class="{ stuWidth: $route.path == '/student' }">
-			<div class="logo" @click="goTo('/')"></div>
-			<div class="app_right">
-				<div class="box_right_three" v-if="this.$store.state.isLogin">
-					<div class="pic_img"><img src="./assets/myProject.png" alt="" /></div>
-					<div @click="goTo('/project')">我的课程</div>
-				</div>
-				<div class="box_right_three" v-if="this.$store.state.isLogin">
-					<div class="pic_img"><img src="./assets/myMessage.png" alt="" /></div>
-					<div @click="goTo('/mine')">个人中心</div>
-				</div>
-				<div class="box_right_three" v-if="this.$store.state.isLogin">
-					<div class="pic_img"><img src="./assets/mine.png" alt="" /></div>
-					<div>
-						{{
-							this.$store.state.studentInfo
-								? this.$store.state.studentInfo.name
-								: "用户"
-						}}
-					</div>
-				</div>
-				<div class="user_head" v-if="this.$store.state.isLogin" @click="exit">
-					<div>
-						<i class="exitI"></i>
-						<el-button type="text" style="color: white">退出</el-button>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div>
-			<!-- main 内容 -->
-			<keep-alive v-if="$route.meta.keepAlive">
-				<!-- 这里是会被缓存的视图组件 -->
-				<router-view
-					v-if="$route.meta.keepAlive"
-					:class="{ pb_body: isShowNav }"
-				/>
-			</keep-alive>
-			<!-- 这里是不被缓存的视图组件 -->
-			<router-view
-				v-if="!$route.meta.keepAlive"
-				:class="{ pb_body: isShowNav }"
-			/>
+  <div id="app">
+    <div class="app_head" :class="{ stuWidth: $route.path == '/student' }">
+      <div class="logo" @click="goTo('/')"></div>
+      <div class="app_right">
+        <div class="box_right_three" v-if="this.$store.state.isLogin">
+          <div class="pic_img"><img src="./assets/myProject.png" alt="" /></div>
+          <div @click="goTo('/project')">我的课程</div>
+        </div>
+        <div class="box_right_three" v-if="this.$store.state.isLogin">
+          <div class="pic_img"><img src="./assets/myMessage.png" alt="" /></div>
+          <div @click="goTo('/mine')">个人中心</div>
+        </div>
+        <div class="box_right_three" v-if="this.$store.state.isLogin">
+          <div class="pic_img"><img src="./assets/mine.png" alt="" /></div>
+          <div>
+            {{
+              this.$store.state.studentInfo
+                ? this.$store.state.studentInfo.name
+                : "用户"
+            }}
+          </div>
+        </div>
+        <div class="user_head" v-if="this.$store.state.isLogin" @click="exit">
+          <div>
+            <i class="exitI"></i>
+            <el-button type="text" style="color: white">退出</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <!-- main 内容 -->
+      <keep-alive v-if="$route.meta.keepAlive">
+        <!-- 这里是会被缓存的视图组件 -->
+        <router-view
+          v-if="$route.meta.keepAlive"
+          :class="{ pb_body: isShowNav }"
+        />
+      </keep-alive>
+      <!-- 这里是不被缓存的视图组件 -->
+      <router-view
+        v-if="!$route.meta.keepAlive"
+        :class="{ pb_body: isShowNav }"
+      />
 
-			<!-- 底部导航 -->
-			<footer-nav
+      <!-- 底部导航 -->
+      <!-- <footer-nav
 				v-if="isShowNav"
 				:luyou="this.$store.state.luyou"
-			></footer-nav>
-		</div>
-		<div class="bottom" v-if="this.$store.state.isLogin">
-			<div class="bottom_flex">
-				<div class="left_bottom_flex">
-					<div class="left_title">联系我们</div>
-					<div class="left_content">
-						<div>地址：深圳市南山区</div>
-						<div>手机：13418906754</div>
-						<div>邮箱：win.wu@qichuangxin.com</div>
-						<div>电话：0755-84658992</div>
-						<div>邮编：518129</div>
-					</div>
-				</div>
-				<div class="right_bottom_flex">
-					<img src="./assets/logo2.png" alt="" />
-				</div>
-			</div>
-		</div>
-	</div>
+			></footer-nav> -->
+    </div>
+    <div class="bottom" v-if="this.$store.state.isLogin">
+      <div class="bottom_flex">
+        <div class="left_bottom_flex">
+          <div class="left_title">联系我们</div>
+          <div class="left_content">
+            <div>地址：深圳市南山区</div>
+            <div>手机：13418906754</div>
+            <div>邮箱：win.wu@qichuangxin.com</div>
+            <div>电话：0755-84658992</div>
+            <div>邮编：518129</div>
+          </div>
+        </div>
+        <div class="right_bottom_flex">
+          <img src="./assets/logo2.png" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import { Message } from "element-ui";
-	export default {
-		// name: "App",
-		data() {
-			return {
-				isShowNav: true, // 是否显示导航 Tab
-			};
-		},
-		components: {},
-		created: function () {
-			// this.getnCount();
-			setInterval(() => {
-				// this.getnCount();
-			}, 60000);
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			isLogin() {
-				const loading = this.$loading.service({
-					background: "rgba(255, 255, 255)",
-					target: document.querySelector("body"),
-				});
-				var _isLogin = this.$cookies.get("slogin");
-				var studentInfo = this.$cookies.get("studentInfo");
-				// if (_isLogin == "1" && userInfo) {
-				loading.close();
-				this.$store.commit("update", ["isLogin", true]);
-				// var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
-				this.$store.commit("update", ["studentInfo", studentInfo]);
-				let router_path = this.$route.path;
-				if (router_path == "/") {
-					this.$router.push("/index");
-				}
-				// } else {
-				//   this.$store.commit("update", ["isLogin", false]);
-				//   Message({
-				//     message: "未登录，请登录",
-				//     type: "warning",
-				//   });
-				//   setTimeout(() => {
-				//     loading.close();
-				//     this.$router.push("/login");
-				//   }, 2000);
-				// }
-			},
-			getnCount() {
-				let params = {
-					bid: this.$store.state.studentInfo.userid,
-				};
-				this.ajax
-					.get(this.$store.state.api + "getNcount", params)
-					.then((res) => {
-						console.log(res);
-						if (res.data[0].length > 0) {
-							this.$store.commit("update", ["nCount", res.data[0][0].num]);
-						} else {
-							this.$store.commit("update", ["nCount", 0]);
-						}
-					})
-					.catch((err) => {
-						console.error(err);
-					});
-			},
-			exit() {
-				sessionStorage.clear();
-				this.$cookies.remove("slogin");
-				this.$cookies.remove("studentInfo");
-				this.$store.commit("update", ["isLogin", false]);
-				this.$store.commit("update", ["studentInfo", {}]);
-				Message({
-					message: "退出成功",
-					type: "success",
-				});
-				this.$router.push("/login");
-			},
-			goTo(path) {
-				this.$router.push(path);
-			},
-		},
-	};
+import { Message } from "element-ui";
+export default {
+  // name: "App",
+  data() {
+    return {
+      isShowNav: true, // 是否显示导航 Tab
+    };
+  },
+  components: {},
+  created: function () {
+	  this.isLogin();
+    // this.getnCount();
+    setInterval(() => {
+      // this.getnCount();
+    }, 60000);
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    isLogin() {
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255)",
+        target: document.querySelector("body"),
+      });
+      var _isLogin = this.$cookies.get("slogin");
+      var studentInfo = this.$cookies.get("studentInfo");
+      if (_isLogin == "1" && studentInfo) {
+        loading.close();
+        this.$store.commit("update", ["isLogin", true]);
+        // var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
+        this.$store.commit("update", ["studentInfo", studentInfo]);
+        let router_path = this.$route.path;
+        if (router_path == "/") {
+          this.$router.push("/index");
+        }
+      } else {
+        this.$store.commit("update", ["isLogin", false]);
+        Message({
+          message: "未登录，请登录",
+          type: "warning",
+        });
+        setTimeout(() => {
+          loading.close();
+          this.$router.push("/login");
+        }, 2000);
+      }
+    },
+    getnCount() {
+      let params = {
+        bid: this.$store.state.studentInfo.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getNcount", params)
+        .then((res) => {
+          console.log(res);
+          if (res.data[0].length > 0) {
+            this.$store.commit("update", ["nCount", res.data[0][0].num]);
+          } else {
+            this.$store.commit("update", ["nCount", 0]);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    exit() {
+      sessionStorage.clear();
+      this.$cookies.remove("slogin");
+      this.$cookies.remove("studentInfo");
+      this.$store.commit("update", ["isLogin", false]);
+      this.$store.commit("update", ["studentInfo", {}]);
+      Message({
+        message: "退出成功",
+        type: "success",
+      });
+      this.$router.push("/login");
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+};
 </script>
 <style>
-	* {
-		margin: 0;
-		padding: 0;
-	}
-	html,
-	body {
-		height: 100%;
-		width: 100%;
-		background: #e6eaf0;
-	}
-	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; */
-		min-width: 1000px;
-	}
-	.app_head {
-		height: 67.5px;
-		width: 100%;
-		background-color: rgb(129, 179, 253);
-		display: flex;
-		align-items: center;
-		min-width: 1000px;
-		flex-direction: row;
-		justify-content: space-around;
-	}
-	.logo {
-		height: 48px;
-		width: 73px;
-		background: url("./assets/logo.png");
-		background-size: 100% 100%;
-		margin-left: 20px;
-		cursor: pointer;
-	}
-	.pb_body {
-		width: 100%;
-		min-width: 1140px;
-		min-width: 745px;
-		display: inline-block;
-		height: calc(100% - 67.5px);
-		/* height: calc(100% - 67.5px - 226px); */
-		min-height: 750px;
-		background: #f2f2f2;
-		border-radius: 5px;
-		position: relative;
-		overflow: auto;
-	}
-	.pb_head {
-		font-size: 26px;
-		/* font-weight: 600; */
-		width: 95%;
-		margin: 10px auto;
-		padding: 10px 5px;
-		border-bottom: 3px solid #eee;
-	}
-	.pb_content {
-		/* height: 100%; */
-	}
-	.pb_content_body {
-		margin: 0px auto;
-		width: 100%;
-		/* overflow: auto;
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body {
+  height: 100%;
+  width: 100%;
+  background: #e6eaf0;
+}
+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; */
+  min-width: 1000px;
+}
+.app_head {
+  height: 67.5px;
+  width: 100%;
+  background-color: rgb(129, 179, 253);
+  display: flex;
+  align-items: center;
+  min-width: 1000px;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.logo {
+  height: 48px;
+  width: 73px;
+  background: url("./assets/logo.png");
+  background-size: 100% 100%;
+  margin-left: 20px;
+  cursor: pointer;
+}
+.pb_body {
+  width: 100%;
+  min-width: 1140px;
+  min-width: 745px;
+  display: inline-block;
+  height: calc(100% - 67.5px);
+  /* height: calc(100% - 67.5px - 226px); */
+  min-height: 750px;
+  background: #f2f2f2;
+  border-radius: 5px;
+  position: relative;
+  overflow: auto;
+}
+.pb_head {
+  font-size: 26px;
+  /* font-weight: 600; */
+  width: 95%;
+  margin: 10px auto;
+  padding: 10px 5px;
+  border-bottom: 3px solid #eee;
+}
+.pb_content {
+  /* height: 100%; */
+}
+.pb_content_body {
+  margin: 0px auto;
+  width: 100%;
+  /* overflow: auto;
 								  height: calc(100% - 120px); */
-	}
-	.user_head {
-		display: flex;
-		align-items: center;
-		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 .exitI {
-		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;
-	}
-	.noticeBox {
-		position: relative;
-		margin-right: 10px;
-	}
+}
+.user_head {
+  display: flex;
+  align-items: center;
+  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 .exitI {
+  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;
+}
+.noticeBox {
+  position: relative;
+  margin-right: 10px;
+}
 
-	.user_head .noticeI {
-		background-image: url("./assets/icon/noticeA.png");
-		width: 25px;
-		height: 25px;
-		background-size: 100% 100%;
-		margin-top: 1px;
-		line-height: 25px;
-		vertical-align: text-top;
-		background-repeat: no-repeat;
-		cursor: pointer;
-	}
-	.noticeBox span {
-		position: absolute;
-		background: red;
-		width: 15px;
-		height: 15px;
-		border-radius: 30px;
-		color: #fff;
-		text-align: center;
-		font-size: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		top: -3px;
-		right: -3px;
-	}
-	.stuWidth {
-		min-width: 1180px;
-	}
-	.app_right {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		color: #fff;
-		align-items: center;
-	}
-	.pic_img {
-		width: 30px;
-		height: 30px;
-	}
-	.pic_img > img {
-		width: 100%;
-		height: 100%;
-	}
-	.box_right_three {
-		display: flex;
-		margin: 0 25px 0px 0;
-	}
-	.box_right_three > div:nth-child(2) {
-		margin: 5px 10px 0 5px;
-		cursor: pointer;
-		line-height: 22px;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 219px;
-		height: 144px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
+.user_head .noticeI {
+  background-image: url("./assets/icon/noticeA.png");
+  width: 25px;
+  height: 25px;
+  background-size: 100% 100%;
+  margin-top: 1px;
+  line-height: 25px;
+  vertical-align: text-top;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.noticeBox span {
+  position: absolute;
+  background: red;
+  width: 15px;
+  height: 15px;
+  border-radius: 30px;
+  color: #fff;
+  text-align: center;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: -3px;
+  right: -3px;
+}
+.stuWidth {
+  min-width: 1180px;
+}
+.app_right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  color: #fff;
+  align-items: center;
+}
+.pic_img {
+  width: 30px;
+  height: 30px;
+}
+.pic_img > img {
+  width: 100%;
+  height: 100%;
+}
+.box_right_three {
+  display: flex;
+  margin: 0 25px 0px 0;
+}
+.box_right_three > div:nth-child(2) {
+  margin: 5px 10px 0 5px;
+  cursor: pointer;
+  line-height: 22px;
+}
+.bottom {
+  background: #ccc;
+  width: 100%;
+}
+.bottom_flex {
+  display: flex;
+  justify-content: space-around;
+}
+.left_bottom_flex {
+  margin: 10px 0 5px 0;
+}
+.left_title {
+  font-size: 18px;
+  margin: 5px 0 15px 5px;
+  color: #747474;
+}
+.left_content {
+  color: #767676;
+  font-size: 14px;
+}
+.left_content > div {
+  margin-bottom: 15px;
+}
+.right_bottom_flex {
+  width: 219px;
+  height: 144px;
+  margin: auto 0;
+}
+.right_bottom_flex > img {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/index.vue

@@ -3,211 +3,73 @@
     <div class="pb_content_body">
       <div class="body_student">
         <div class="student_head">
-          <img src="../assets/banner.png" alt="" />
+          <!-- <img src="../assets/banner.png" alt="" /> -->
+          <el-carousel trigger="click" style="width: 100%; height: 300px">
+            <el-carousel-item v-for="item in bannerList" :key="item.id">
+              <!-- <h3 class="small">{{ item }}</h3> -->
+              <img class="imgS" :src="item.poster" alt="" @click.stop="goTo('/courseDetail?courseId=' + item.url)" />
+            </el-carousel-item>
+          </el-carousel>
         </div>
         <div class="student_body">
           <div class="top">
-            <div class="box_fk"></div>
-            推荐课程
-          </div>
-          <div class="main_box">
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail?courseId='+ '94c3f2d9-356f-11ec-80ad-005056b86db5')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/robot.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/piano.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel">
-                <img src="../assets/moonLight.png" alt="" />
-              </div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel">
-                <img src="../assets/music.png" alt="" />
-              </div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel">
-                <img src="../assets/moonLight.png" alt="" />
-              </div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel">
-                <img src="../assets/game.png" alt="" />
-              </div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
+            <div
+              :class="{ active: item.id == zoneListId }"
+              v-for="(item, index) in zoneList"
+              :key="index"
+              @click="checkZone(item.id)"
+            >
+              {{ item.name }}
             </div>
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
-                </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/piano.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
+          </div>
+          <div style="min-height: 800px">
+            <div class="main_box">
+              <div
+                class="box_course"
+                v-for="(item, index) in zoneClass"
+                :key="index"
+              >
+                <div class="wheel">
+                  <img
+                    :src="
+                      item.cover
+                        ? JSON.parse(item.cover)[0].url
+                        : require('../assets/wheel.png')
+                    "
+                    alt=""
+                  />
                 </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/music.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
+                <div class="middle_white">
+                  <div class="textOverflow">{{ item.title }}</div>
+                  <div class="people">
+                    <div class="man">
+                      <img src="../assets/people.png" alt="" />
+                    </div>
+                    <div>{{ item.pNum }}人学习</div>
                   </div>
-                  <div>56人学习</div>
                 </div>
-              </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
-              </div>
-            </div>
-            <div class="box_course">
-              <div class="wheel"><img src="../assets/robot.png" alt="" /></div>
-              <div class="middle_white">
-                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
-                <div class="people">
-                  <div class="man">
-                    <img src="../assets/people.png" alt="" />
-                  </div>
-                  <div>56人学习</div>
+                <div
+                  class="now_study"
+                  @click="goTo('/courseDetail?courseId=' + item.courseId)"
+                >
+                  立即学习
                 </div>
               </div>
-              <div class="now_study" @click="goTo('/courseDetail')">
-                立即学习
+              <div class="course_empty" v-if="zoneClass.length == 0">
+                暂无数据
               </div>
             </div>
           </div>
-          <div
-            style="
-              text-align: center;
-              padding: 30px 0 20px 0;
-              box-sizing: border-box;
-            "
-          >
-            此处滚动加载..
+          <div class="student_page" style="margin: 15px 0 0">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="total"
+              v-if="!isListAjax && page && zoneClass.length"
+              @current-change="handleCurrentChange"
+            >
+            </el-pagination>
           </div>
         </div>
       </div>
@@ -218,14 +80,77 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      zoneList: [],
+      zoneClass: [],
+      page: 1,
+      total: 0,
+      isListAjax: false,
+      zoneListId: "",
+      bannerList: [],
+    };
   },
   methods: {
     goTo(path) {
       this.$router.push(path);
     },
+    getZone() {
+      this.ajax
+        .get(this.$store.state.api + "getZone", "")
+        .then((res) => {
+          console.log(res.data[0]);
+          this.zoneList = res.data[0];
+          this.zoneListId = this.zoneList[0].id;
+          this.getZoneClass(this.zoneList[0].id);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    //获取专区下的课程
+    getZoneClass(zid) {
+      this.isListAjax = true;
+      const loading = this.openLoading(document.querySelector(".main_box"));
+      let params = { bid: zid, page: this.page };
+      this.ajax
+        .get(this.$store.state.api + "getZoneClassStudent", params)
+        .then((res) => {
+          loading.close();
+          this.isListAjax = false;
+          this.zoneClass = res.data[0];
+          this.total = res.data[0].length ? res.data[0][0].num : 0;
+          console.log(this.zoneClass);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    checkZone(id) {
+      this.page = 1;
+      this.zoneListId = id;
+      this.getZoneClass(id);
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getZoneClass(this.zoneListId);
+    },
+    //获取banner
+    getBanner() {
+      this.ajax
+        .get(this.$store.state.api + "getBanner", "")
+        .then((res) => {
+          this.bannerList = res.data[0];
+          console.log(this.bannerList);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
+  created() {
+    this.getZone();
+    this.getBanner();
   },
-  created() {},
 };
 </script>
 
@@ -234,9 +159,10 @@ export default {
   width: 80%;
   margin: 0 auto;
 }
-.student_head > img {
+.student_head .imgS {
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 .student_body {
   width: 80%;
@@ -244,13 +170,29 @@ export default {
   margin: 0 auto;
   background: #fff;
   padding: 0 0 20px;
-  min-height: 1000px;
 }
 .top {
   padding: 20px 30px;
   box-sizing: border-box;
   display: flex;
+  align-items: center;
 }
+
+.top div {
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 35px;
+  line-height: 35px;
+  margin: 0 10px 0 0;
+  padding-bottom: 5px;
+  width: 80px;
+  text-align: center;
+}
+
+.top .active {
+  border-bottom: 3px solid #0e71e6;
+}
+
 .box_fk {
   width: 8px;
   height: 21px;
@@ -275,13 +217,15 @@ export default {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  margin: 0px 10px 20px;
+  margin: 0px 1% 20px;
   width: 23%;
   /*border: 1px solid #cecece; */
   border-radius: 5px;
   overflow: hidden;
   box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
     0px 2px 1px -1px rgb(0 0 0 / 12%);
+  justify-content: space-between;
+  height: 240px;
 }
 .middle_white {
   font-size: 14px;
@@ -334,4 +278,15 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.student_page {
+  margin-top: 10px;
+}
+.course_empty {
+  width: 100%;
+  height: 800px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/main.js

@@ -37,3 +37,42 @@ new Vue({
   components: { App },
   template: '<App/>'
 })
+
+VueCookies.config('30d')
+
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  const requireAuth = to.meta.requireAuth
+  // 判断该路由是否需要登录权限
+  if (requireAuth) {
+    var isLogin = VueCookies.get('tlogin')
+    if (isLogin == "1") {
+      var userinfo = VueCookies.get('studentInfo')
+      store.commit("update", ["isLogin", true]);
+
+      // var info = JSON.parse(window.sessionStorage.getItem("userInfo"))
+      store.commit("update", ["userInfo", userinfo]);
+      store.state.luyou = store.state.luyou + 1
+      store.commit("update", ["luyou", store.state.luyou]);
+      next()
+    } else {
+      const loading = Loading.service({
+        background: "rgba(255, 255, 255)",
+        target: document.querySelector("body"),
+      });
+      store.commit("update", ["isLogin", false]);
+      Message({
+        message: '未登录，请登录',
+        type: 'warning'
+      });
+      setTimeout(() => {
+        loading.close();
+        next('/login')
+      }, 2000);
+    }
+  } else {
+    next()  // 确保一定要有next()被调用
+  }
+})

src/router/index.js

@@ -22,50 +22,63 @@ export default new Router({
       name: 'login',
       component: login
     },
+    {
+      path:'/',
+      redirect:'/index'
+    },
     {
       path: '/index',
       name: 'index',
-      component: index
+      component: index,
+      requireAuth:true
     },
     {
       path: '/courseDetail',
       name: 'courseDetail',
-      component: courseDetail
+      component: courseDetail,
+      requireAuth: true
     },
     {
       path: '/mine',
       name: 'mine',
-      component: mine
+      component: mine,
+      requireAuth: true
     },
     {
       path: '/project',
       name: 'project',
-      component: project
+      component: project,
+      requireAuth: true
     },
     {
       path: '/works',
       name: 'works',
-      component: works
+      component: works,
+      requireAuth: true
     },
     {
       path: '/score',
       name: 'score',
-      component: score
+      component: score,
+      requireAuth: true
     },
     {
       path: '/notice',
       name: 'notice',
-      component: notice
+      component: notice,
+      requireAuth: true
     },
     {
       path: '/noticeDetail',
       name: 'noticeDetail',
-      component: noticeDetail
+      component: noticeDetail,
+      requireAuth: true
     },
     {
       path: '/study',
       name: 'study',
-      component: study
+      component: study,
+      requireAuth: true
     },
   ]
 })