首頁 探索 說明
登入
CocoRoboLabs
/
pbl-student
3
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

1

Signed-off-by: lcw <1324309909@qq.com>
lcw 3 年之前
父節點
ff147a6a8a
當前提交
2ddb42710b
共有 13 個文件被更改，包括 2185 次插入 和 1502 次删除
分割檢視 顯示文件統計
  1. 12 9
      index.html
  2. 336 332
      src/App.vue
  3. 二進制
      src/assets/icon/kc1.png
  4. 29 2
      src/components/courseDetail.vue
  5. 331 279
      src/components/index.vue
  6. 162 132
      src/components/mine.vue
  7. 192 130
      src/components/notice.vue
  8. 168 124
      src/components/noticeDetail.vue
  9. 200 141
      src/components/project.vue
  10. 533 153
      src/components/score.vue
  11. 10 14
      src/components/study.vue
  12. 210 186
      src/components/works.vue
  13. 2 0
      src/main.js

+ 12 - 9
index.html
查看文件 

@@ -1,12 +1,15 @@
 
 <!DOCTYPE html>
 
 <html>
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <title>pbl-student</title>
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
-  </body>
 
+
 
+<head>
 
+  <meta charset="utf-8">
 
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+  <title>pbl-student</title>
 
+</head>
 
+
 
+<body>
 
+  <div id="app"></div>
 
+  <!-- built files will be auto injected -->
 
+</body>
 
+
 
 </html>

+ 336 - 332
src/App.vue
查看文件 

@@ -1,344 +1,348 @@
 
 <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>
 
+		</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.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);
 
-    },
 
-  },
 
-};
 
+	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;
 
-								  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;
 
-}
 
+	* {
 
+		margin: 0;
 
+		padding: 0;
 
+	}
 
+	ul,
 
+	li {
 
+		list-style: none;
 
+	}
 
+	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 .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/assets/icon/kc1.png
查看文件


+ 29 - 2
src/components/courseDetail.vue
查看文件 

@@ -84,7 +84,14 @@
 
 					class="dialog_change"
 
 				>
 
 					<div style="font-size: 20px">请选择阶段</div>
 
-					<div style="padding: 20px 30px; display: flex;flex-direction: row;flex-wrap: wrap;">
 
+					<div
 
+						style="
 
+							padding: 20px 30px;
 
+							display: flex;
 
+							flex-direction: row;
 
+							flex-wrap: wrap;
 
+						"
 
+					>
 
 						<div
 
 							class="blue_box"
 
 							v-for="(item, index) in chapInfo"
 
@@ -122,19 +129,38 @@
 
 				this.$router.push(path);
 
 			},
 
 			addUserRate(i) {
 
+				var suid = this.$store.state.studentInfo.userid;
 
+				if (JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1 && JSON.parse(this.courseDetail.userid) != suid) {
 
+					this.$message.error("你没有该权限");
 
+					return;
 
+				}
 
 				let params = {
 
 					uid: this.$store.state.studentInfo.userid,
 
 					cid: this.id,
 
 				};
 
 				this.ajax
 
 					.get(this.$store.state.api + "addUserR", params)
 
+					.then((res) => {
 
+						console.log(res.data);
 
+						this.updateVc();
 
+						this.goTo("/study?type=" + i + "&courseId=" + this.id);
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+			updateVc() {
 
+				let params = {
 
+					cid: this.id,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "updateVc", params)
 
 					.then((res) => {
 
 						console.log(res.data);
 
 					})
 
 					.catch((err) => {
 
 						console.error(err);
 
 					});
 
-				this.goTo("/study?type=" + i + "&courseId=" + this.id);
 
 			},
 
 			getCourseDetail() {
 
 				const loading = this.$loading.service({
 
@@ -174,6 +200,7 @@
 
 		},
 
 		created() {
 
 			this.getCourseDetail();
 
+			document.scrollingElement.scrollTop = 0;
 
 			// this.getSName();
 
 		},
 
 	};

+ 331 - 279
src/components/index.vue
查看文件 

@@ -1,292 +1,344 @@
 
 <template>
 
-  <div class="pb_content">
 
-    <div class="pb_content_body">
 
-      <div class="body_student">
 
-        <div class="student_head">
 
-          <!-- <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="{ active: item.id == zoneListId }"
 
-              v-for="(item, index) in zoneList"
 
-              :key="index"
 
-              @click="checkZone(item.id)"
 
-            >
 
-              {{ item.name }}
 
-            </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 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>
 
-                <div
 
-                  class="now_study"
 
-                  @click="goTo('/courseDetail?courseId=' + item.courseId)"
 
-                >
 
-                  立即学习
 
-                </div>
 
-              </div>
 
-              <div class="course_empty" v-if="zoneClass.length == 0">
 
-                暂无数据
 
-              </div>
 
-            </div>
 
-          </div>
 
-          <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>
 
-    </div>
 
-  </div>
 
+	<div class="pb_content">
 
+		<div class="pb_content_body">
 
+			<div class="body_student">
 
+				<div class="student_head">
 
+					<!-- <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="{ active: 0 == zoneListId }" @click="selectAll()">
 
+							所有课程
 
+						</div>
 
+						<div
 
+							:class="{ active: item.id == zoneListId }"
 
+							v-for="(item, index) in zoneList"
 
+							:key="index"
 
+							@click="checkZone(item.id)"
 
+						>
 
+							{{ item.name }}
 
+						</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 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 != null && item.pNum != '' ? item.pNum : '0' }}人学习</div>
 
+									</div>
 
+								</div>
 
+								<div
 
+									class="now_study"
 
+									@click="goTo('/courseDetail?courseId=' + item.courseId)"
 
+								>
 
+									立即学习
 
+								</div>
 
+							</div>
 
+							<div class="course_empty" v-if="zoneClass.length == 0">
 
+								暂无数据
 
+							</div>
 
+						</div>
 
+					</div>
 
+					<div class="student_page" style="margin: 15px 0 0">
 
+						<el-pagination
 
+							background
 
+							layout="prev, pager, next"
 
+							:page-size="10"
 
+							:total="total"
 
+							v-if="page && zoneListId != 0"
 
+							@current-change="handleCurrentChange"
 
+						>
 
+						</el-pagination>
 
+						<el-pagination
 
+							background
 
+							layout="prev, pager, next"
 
+							:page-size="10"
 
+							:total="total"
 
+							v-if=" page && zoneListId == 0"
 
+							@current-change="handleCurrentChange1"
 
+						>
 
+						</el-pagination>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 </template>
 
 
 <script>
 
-export default {
 
-  data() {
 
-    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();
 
-  },
 
-};
 
+	export default {
 
+		data() {
 
+			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);
 
+						this.selectAll();
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+			//获取专区下的课程
 
+			getZoneClass(zid) {
 
+				this.isListAjax = true;
 
+				const loading = this.openLoading(document.querySelector(".main_box"));
 
+				let params = {
 
+					bid: zid,
 
+					oid: this.$store.state.studentInfo.organizeid,
 
+					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);
 
+					});
 
+			},
 
+			selectAll() {
 
+				this.zoneListId = 0;
 
+				this.isListAjax = true;
 
+				const loading = this.openLoading(document.querySelector(".main_box"));
 
+				let params = {
 
+					oid: this.$store.state.studentInfo.organizeid,
 
+					page: this.page,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectAllCourse", 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);
 
+			},
 
+			handleCurrentChange1(val) {
 
+				this.page = val;
 
+				this.selectAll();
 
+			},
 
+			//获取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();
 
+      document.scrollingElement.scrollTop = 0;
 
+		},
 
+	};
 
 </script>
 
 
 <style scoped>
 
-.student_head {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-}
 
-.student_head .imgS {
 
-  width: 100%;
 
-  height: 100%;
 
-  cursor: pointer;
 
-}
 
-.student_body {
 
-  width: 80%;
 
-  height: 100%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  padding: 0 0 20px;
 
-}
 
-.top {
 
-  padding: 20px 30px;
 
-  box-sizing: border-box;
 
-  display: flex;
 
-  align-items: center;
 
-}
 
+	.student_head {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+	}
 
+	.student_head .imgS {
 
+		width: 100%;
 
+		height: 100%;
 
+		cursor: pointer;
 
+	}
 
+	.student_body {
 
+		width: 80%;
 
+		height: 100%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		padding: 0 0 20px;
 
+	}
 
+	.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 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;
 
-}
 
+	.top .active {
 
+		border-bottom: 3px solid #0e71e6;
 
+	}
 
 
-.box_fk {
 
-  width: 8px;
 
-  height: 21px;
 
-  background: #0e71e6;
 
-  margin-right: 5px;
 
-}
 
-.wheel {
 
-  width: 100%;
 
-  height: 140px;
 
-}
 
-.man {
 
-  width: 16px;
 
-  height: 16px;
 
-}
 
-.wheel > img,
 
-.man > img {
 
-  width: 100%;
 
-  height: 100%;
 
-  object-fit: cover;
 
-}
 
-.box_course {
 
-  display: flex;
 
-  flex-direction: column;
 
-  flex-wrap: nowrap;
 
-  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;
 
-  margin: 5px 0 5px 10px;
 
-}
 
-.people {
 
-  display: flex;
 
-  margin-top: 5px;
 
-}
 
-.people > div:nth-child(2) {
 
-  margin-left: 10px;
 
-}
 
-.now_study {
 
-  width: 100%;
 
-  height: 40px;
 
-  color: #fff;
 
-  background: #579ef5;
 
-  text-align: center;
 
-  line-height: 40px;
 
-  font-size: 13px;
 
-  cursor: pointer;
 
-}
 
-.main_box {
 
-  width: 100%;
 
-  display: flex;
 
-  flex-direction: row;
 
-  flex-wrap: wrap;
 
-  justify-content: flex-start;
 
-  margin: 0 auto;
 
-}
 
-.right_bottom_flex {
 
-  width: 219px;
 
-  height: 144px;
 
-  margin: auto 0;
 
-}
 
-.right_bottom_flex > img {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.body_student {
 
-  margin: 0px auto;
 
-  width: 80%;
 
-  height: 100%;
 
-}
 
+	.isactive {
 
+		border-bottom: 3px solid #0e71e6;
 
+	}
 
 
-.textOverflow {
 
-  padding: 0 5px 0 0px;
 
-  width: 95%;
 
-  overflow: hidden;
 
-  white-space: nowrap;
 
-  text-overflow: ellipsis;
 
-}
 
+	.box_fk {
 
+		width: 8px;
 
+		height: 21px;
 
+		background: #0e71e6;
 
+		margin-right: 5px;
 
+	}
 
+	.wheel {
 
+		width: 100%;
 
+		height: 140px;
 
+	}
 
+	.man {
 
+		width: 16px;
 
+		height: 16px;
 
+	}
 
+	.wheel > img,
 
+	.man > img {
 
+		width: 100%;
 
+		height: 100%;
 
+		object-fit: cover;
 
+	}
 
+	.box_course {
 
+		display: flex;
 
+		flex-direction: column;
 
+		flex-wrap: nowrap;
 
+		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;
 
+		margin: 5px 0 5px 10px;
 
+	}
 
+	.people {
 
+		display: flex;
 
+		margin-top: 5px;
 
+	}
 
+	.people > div:nth-child(2) {
 
+		margin-left: 10px;
 
+	}
 
+	.now_study {
 
+		width: 100%;
 
+		height: 40px;
 
+		color: #fff;
 
+		background: #579ef5;
 
+		text-align: center;
 
+		line-height: 40px;
 
+		font-size: 13px;
 
+		cursor: pointer;
 
+	}
 
+	.main_box {
 
+		width: 100%;
 
+		display: flex;
 
+		flex-direction: row;
 
+		flex-wrap: wrap;
 
+		justify-content: flex-start;
 
+		margin: 0 auto;
 
+	}
 
+	.right_bottom_flex {
 
+		width: 219px;
 
+		height: 144px;
 
+		margin: auto 0;
 
+	}
 
+	.right_bottom_flex > img {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+	.body_student {
 
+		margin: 0px auto;
 
+		width: 80%;
 
+		height: 100%;
 
+	}
 
 
-.student_page {
 
-  margin-top: 10px;
 
-}
 
-.course_empty {
 
-  width: 100%;
 
-  height: 800px;
 
-  display: flex;
 
-  align-items: center;
 
-  justify-content: center;
 
-}
 
+	.textOverflow {
 
+		padding: 0 5px 0 0px;
 
+		width: 95%;
 
+		overflow: hidden;
 
+		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>

+ 162 - 132
src/components/mine.vue
查看文件 

@@ -1,140 +1,170 @@
 
 <template>
 
-  <div class="pb_content">
 
-    <div class="pb_content_body">
 
-      <div class="body_student">
 
-        <div class="student_head">
 
-          <div class="box_course">
 
-            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
 
-            <div class="right_box">
 
-              <div class="right_box_title">张子林</div>
 
-              <div class="people">
 
-                <div>
 
-                  <span>班级：</span><span style="color: #999">六年3班</span>
 
-                </div>
 
-                <div style="margin-left: 50px">
 
-                  <span>所属学校：</span
 
-                  ><span style="color: #999">罗浮名剑中学</span>
 
-                </div>
 
-              </div>
 
-              <div>
 
-                <span>手机号码：</span
 
-                ><span style="color: #999">13751117529</span>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-        <div class="student_body">
 
-          <div class="box_three_pic">
 
-            <div class="pic_box" @click="goTo('/project')">
 
-              <div class="mine_pic">
 
-                <img src="../assets/book.png" alt="" />
 
-              </div>
 
-              <div>我的课程</div>
 
-            </div>
 
-            <div class="pic_box" @click="goTo('/works')">
 
-              <div class="mine_pic">
 
-                <img src="../assets/zp.png" alt="" />
 
-              </div>
 
-              <div>我的作品</div>
 
-            </div>
 
-            <div class="pic_box">
 
-              <div class="mine_pic">
 
-                <img src="../assets/study.png" alt="" />
 
-              </div>
 
-              <div>学习数据</div>
 
-            </div>
 
-            <div class="pic_box" @click="goTo('/notice')">
 
-              <div class="mine_pic">
 
-                <img src="../assets/notice.png" alt="" />
 
-              </div>
 
-              <div>消息通知</div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
+	<div class="pb_content">
 
+		<div class="pb_content_body">
 
+			<div class="body_student">
 
+				<div class="student_head">
 
+					<div class="box_course">
 
+						<div class="wheel">
 
+							<img
 
+								:src="
 
+									studentMessage.headportrait != null
 
+										? studentMessage.headportrait
 
+										: tx
 
+								"
 
+								alt=""
 
+							/>
 
+						</div>
 
+						<div class="right_box">
 
+							<div class="right_box_title">{{ studentMessage.name }}</div>
 
+							<div class="people">
 
+								<div>
 
+									<span>班级：</span
 
+									><span style="color: #999">{{ studentMessage.cname }}</span>
 
+								</div>
 
+								<div style="margin-left: 50px">
 
+									<span>所属学校：</span
 
+									><span style="color: #999">{{ studentMessage.sname }}</span>
 
+								</div>
 
+							</div>
 
+							<div>
 
+								<span>手机号码：</span
 
+								><span style="color: #999">{{
 
+									studentMessage.phonenumber
 
+								}}</span>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="student_body">
 
+					<div class="box_three_pic">
 
+						<div class="pic_box" @click="goTo('/project')">
 
+							<div class="mine_pic">
 
+								<img src="../assets/book.png" alt="" />
 
+							</div>
 
+							<div>我的课程</div>
 
+						</div>
 
+						<div class="pic_box" @click="goTo('/works')">
 
+							<div class="mine_pic">
 
+								<img src="../assets/zp.png" alt="" />
 
+							</div>
 
+							<div>我的作品</div>
 
+						</div>
 
+						<div class="pic_box">
 
+							<div class="mine_pic">
 
+								<img src="../assets/study.png" alt="" />
 
+							</div>
 
+							<div>学习数据</div>
 
+						</div>
 
+						<div class="pic_box" @click="goTo('/notice')">
 
+							<div class="mine_pic">
 
+								<img src="../assets/notice.png" alt="" />
 
+							</div>
 
+							<div>消息通知</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 </template>
 
 
 <script>
 
-export default {
 
-  data() {
 
-    return {};
 
-  },
 
-  methods: {
 
-    goTo(path) {
 
-      this.$router.push(path);
 
-    },
 
-  },
 
-  created() {},
 
-};
 
+	export default {
 
+		data() {
 
+			return {
 
+				studentMessage: [],
 
+				tx: require("../assets/tx.png"),
 
+			};
 
+		},
 
+		methods: {
 
+			goTo(path) {
 
+				this.$router.push(path);
 
+			},
 
+			selectSDetail() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectSDetail", params)
 
+					.then((res) => {
 
+						this.studentMessage = res.data[0][0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+		},
 
+		created() {
 
+			this.selectSDetail();
 
+		},
 
+	};
 
 </script>
 
 
 <style scoped>
 
-.body_student {
 
-  margin: 0px auto;
 
-  width: 80%;
 
-  height: 100%;
 
-}
 
-.student_head {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  height: 30%;
 
-}
 
-.wheel > img， .mine_pic > img {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.box_course {
 
-  display: flex;
 
-  padding: 35px 0 25px 60px;
 
-  align-items: center;
 
-}
 
-.wheel {
 
-  width: 210px;
 
-}
 
-.right_box {
 
-  display: flex;
 
-  flex-direction: column;
 
-  margin-left: 30px;
 
-  /* justify-content: space-around; */
 
-}
 
-.right_box_title {
 
-  font-size: 23px;
 
-}
 
-.people {
 
-  display: flex;
 
-  margin: 30px 0 15px 0px;
 
-}
 
-.student_body {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  margin-top: 20px;
 
-  min-height: 1000px;
 
-}
 
-.mine_pic {
 
-  width: 120px;
 
-  height: 116px;
 
-  margin: 0 auto;
 
-}
 
-.box_three_pic {
 
-  margin: 0 auto;
 
-  width: 80%;
 
-  padding: 50px 0 20px 0;
 
-  display: flex;
 
-  flex-direction: row;
 
-  justify-content: flex-start;
 
-  flex-wrap: wrap;
 
-}
 
-.pic_box {
 
-  text-align: center;
 
-  width: 33%;
 
-  cursor: pointer;
 
-  margin-bottom: 100px;
 
-}
 
-.pic_box > div:nth-child(2) {
 
-  margin-top: 12px;
 
-}
 
+	.body_student {
 
+		margin: 0px auto;
 
+		width: 80%;
 
+		height: 100%;
 
+	}
 
+	.student_head {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		height: 30%;
 
+	}
 
+	.wheel > img， .mine_pic > img {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+	.box_course {
 
+		display: flex;
 
+		padding: 35px 0 25px 60px;
 
+		align-items: center;
 
+	}
 
+	.wheel {
 
+		width: 210px;
 
+	}
 
+	.right_box {
 
+		display: flex;
 
+		flex-direction: column;
 
+		margin-left: 30px;
 
+		/* justify-content: space-around; */
 
+	}
 
+	.right_box_title {
 
+		font-size: 23px;
 
+	}
 
+	.people {
 
+		display: flex;
 
+		margin: 30px 0 15px 0px;
 
+	}
 
+	.student_body {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		margin-top: 20px;
 
+		min-height: 1000px;
 
+	}
 
+	.mine_pic {
 
+		width: 120px;
 
+		height: 116px;
 
+		margin: 0 auto;
 
+	}
 
+	.box_three_pic {
 
+		margin: 0 auto;
 
+		width: 80%;
 
+		padding: 50px 0 20px 0;
 
+		display: flex;
 
+		flex-direction: row;
 
+		justify-content: flex-start;
 
+		flex-wrap: wrap;
 
+	}
 
+	.pic_box {
 
+		text-align: center;
 
+		width: 33%;
 
+		cursor: pointer;
 
+		margin-bottom: 100px;
 
+	}
 
+	.pic_box > div:nth-child(2) {
 
+		margin-top: 12px;
 
+	}
 
 </style>

+ 192 - 130
src/components/notice.vue
查看文件 

@@ -1,138 +1,200 @@
 
 <template>
 
-  <div class="pb_content">
 
-    <div class="pb_content_body">
 
-      <div class="body_student">
 
-        <div class="student_head">
 
-          <div class="box_course">
 
-            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
 
-            <div class="right_box">
 
-              <div class="right_box_title">张子林</div>
 
-              <div class="people">
 
-                <div>
 
-                  <span>班级：</span><span style="color: #999">六年3班</span>
 
-                </div>
 
-                <div style="margin-left: 50px">
 
-                  <span>所属学校：</span
 
-                  ><span style="color: #999">罗浮名剑中学</span>
 
-                </div>
 
-              </div>
 
-              <div>
 
-                <span>手机号码：</span
 
-                ><span style="color: #999">13751117529</span>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-        <div class="student_body">
 
-          <div style="padding: 20px 30px">个人中心 > 消息通知</div>
 
-          <div class="project_box">
 
-            <div class="notice_box">
 
-              <div class="notice_message">
 
-                <div class="notice_title" @click="goTo('/noticeDetail')">
 
-                  关于长乐基地-新教育活动相关通知
 
-                </div>
 
-                <div class="notice_time">2021-09-08 10:01</div>
 
-              </div>
 
-              <div class="notice_message">
 
-                <div class="notice_title" @click="goTo('/noticeDetail')">
 
-                  关于'一校一案'劳动有关通知
 
-                </div>
 
-                <div class="notice_time">2021-09-08 10:01</div>
 
-              </div>
 
-              <div class="notice_message">
 
-                <div class="notice_title" @click="goTo('/noticeDetail')">
 
-                  实践出真知，最光荣
 
-                </div>
 
-                <div class="notice_time">2021-09-08 10:01</div>
 
-              </div>
 
-              <div class="notice_message">
 
-                <div class="notice_title" @click="goTo('/noticeDetail')">
 
-                  基于项目学习Shine相关通知
 
-                </div>
 
-                <div class="notice_time">2021-09-08 10:01</div>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
+	<div class="pb_content">
 
+		<div class="pb_content_body">
 
+			<div class="body_student">
 
+				<div class="student_head">
 
+					<div class="box_course">
 
+						<div class="wheel">
 
+							<img
 
+								:src="
 
+									studentMessage.headportrait != null
 
+										? studentMessage.headportrait
 
+										: tx
 
+								"
 
+								alt=""
 
+							/>
 
+						</div>
 
+						<div class="right_box">
 
+							<div class="right_box_title">{{ studentMessage.name }}</div>
 
+							<div class="people">
 
+								<div>
 
+									<span>班级：</span
 
+									><span style="color: #999">{{ studentMessage.cname }}</span>
 
+								</div>
 
+								<div style="margin-left: 50px">
 
+									<span>所属学校：</span
 
+									><span style="color: #999">{{ studentMessage.sname }}</span>
 
+								</div>
 
+							</div>
 
+							<div>
 
+								<span>手机号码：</span
 
+								><span style="color: #999">{{
 
+									studentMessage.phonenumber
 
+								}}</span>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="student_body">
 
+					<div style="padding: 20px 30px">
 
+						<el-breadcrumb separator-class="el-icon-arrow-right">
 
+							<el-breadcrumb-item :to="{ path: '/mine' }"
 
+								>个人中心</el-breadcrumb-item
 
+							>
 
+							<el-breadcrumb-item>消息通知</el-breadcrumb-item>
 
+						</el-breadcrumb>
 
+					</div>
 
+					<div class="project_box">
 
+						<div class="notice_box">
 
+							<div
 
+								class="notice_message"
 
+								v-for="(item, index) in newMessage"
 
+								:key="index"
 
+							>
 
+								<div
 
+									class="notice_title"
 
+									@click="goTo('/noticeDetail?newsid=' + item.newsid)"
 
+								>
 
+									{{ item.title }}
 
+								</div>
 
+								<div class="notice_time">{{ item.creatTime }}</div>
 
+							</div>
 
+							<!-- <div class="notice_message">
 
+								<div class="notice_title" @click="goTo('/noticeDetail')">
 
+									关于'一校一案'劳动有关通知
 
+								</div>
 
+								<div class="notice_time">2021-09-08 10:01</div>
 
+							</div>
 
+							<div class="notice_message">
 
+								<div class="notice_title" @click="goTo('/noticeDetail')">
 
+									实践出真知，最光荣
 
+								</div>
 
+								<div class="notice_time">2021-09-08 10:01</div>
 
+							</div>
 
+							<div class="notice_message">
 
+								<div class="notice_title" @click="goTo('/noticeDetail')">
 
+									基于项目学习Shine相关通知
 
+								</div>
 
+								<div class="notice_time">2021-09-08 10:01</div>
 
+							</div> -->
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 </template>
 
 
 <script>
 
-export default {
 
-  data() {
 
-    return {};
 
-  },
 
-  methods: {
 
-    goTo(path) {
 
-      this.$router.push(path);
 
-    },
 
-  },
 
-  created() {},
 
-};
 
+	export default {
 
+		data() {
 
+			return {
 
+				studentMessage: [],
 
+				newMessage: [],
 
+				tx: require("../assets/tx.png"),
 
+				page: 1,
 
+			};
 
+		},
 
+		methods: {
 
+			goTo(path) {
 
+				this.$router.push(path);
 
+			},
 
+			selectSDetail() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectSDetail", params)
 
+					.then((res) => {
 
+						this.studentMessage = res.data[0][0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+			getNews() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+					page: this.page,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "getNewsTeacher", params)
 
+					.then((res) => {
 
+						this.newMessage = res.data[0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+		},
 
+		created() {
 
+			this.selectSDetail();
 
+			this.getNews();
 
+			document.scrollingElement.scrollTop = 0;
 
+		},
 
+	};
 
 </script>
 
 
 <style scoped>
 
-.body_student {
 
-  margin: 0px auto;
 
-  width: 80%;
 
-  height: 100%;
 
-}
 
-.student_head {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  height: 30%;
 
-}
 
-.wheel > img,
 
-.project > img {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.box_course {
 
-  display: flex;
 
-  padding: 35px 0 25px 60px;
 
-  align-items: center;
 
-}
 
-.wheel {
 
-  width: 210px;
 
-}
 
-.right_box {
 
-  display: flex;
 
-  flex-direction: column;
 
-  margin-left: 30px;
 
-  /* justify-content: space-around; */
 
-}
 
-.right_box_title {
 
-  font-size: 23px;
 
-}
 
-.people {
 
-  display: flex;
 
-  margin: 30px 0 20px 0px;
 
-}
 
-.student_body {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  margin-top: 20px;
 
-  min-height: 1000px;
 
-}
 
-.project {
 
-  width: 165px;
 
-}
 
-.project_box {
 
-  margin: 0 0 10px 30px;
 
-}
 
-.notice_message {
 
-  padding: 30px 0;
 
-  border-bottom: 1px solid #ccc;
 
-}
 
-.notice_time {
 
-  font-size: 14px;
 
-  margin-top: 15px;
 
-}
 
-.notice_title {
 
-  cursor: pointer;
 
-}
 
+	.body_student {
 
+		margin: 0px auto;
 
+		width: 80%;
 
+		height: 100%;
 
+	}
 
+	.student_head {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		height: 30%;
 
+	}
 
+	.wheel > img,
 
+	.project > img {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+	.box_course {
 
+		display: flex;
 
+		padding: 35px 0 25px 60px;
 
+		align-items: center;
 
+	}
 
+	.wheel {
 
+		width: 210px;
 
+	}
 
+	.right_box {
 
+		display: flex;
 
+		flex-direction: column;
 
+		margin-left: 30px;
 
+		/* justify-content: space-around; */
 
+	}
 
+	.right_box_title {
 
+		font-size: 23px;
 
+	}
 
+	.people {
 
+		display: flex;
 
+		margin: 30px 0 20px 0px;
 
+	}
 
+	.student_body {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		margin-top: 20px;
 
+		min-height: 1000px;
 
+	}
 
+	.project {
 
+		width: 165px;
 
+	}
 
+	.project_box {
 
+		margin: 0 0 10px 30px;
 
+	}
 
+	.notice_message {
 
+		padding: 30px 0;
 
+		border-bottom: 1px solid #ccc;
 
+	}
 
+	.notice_time {
 
+		font-size: 14px;
 
+		margin-top: 15px;
 
+	}
 
+	.notice_title {
 
+		cursor: pointer;
 
+	}
 
 </style>

+ 168 - 124
src/components/noticeDetail.vue
查看文件 

@@ -1,132 +1,176 @@
 
 <template>
 
-  <div class="pb_content">
 
-    <div class="pb_content_body">
 
-      <div class="body_student">
 
-        <div class="student_head">
 
-          <div class="box_course">
 
-            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
 
-            <div class="right_box">
 
-              <div class="right_box_title">张子林</div>
 
-              <div class="people">
 
-                <div>
 
-                  <span>班级：</span><span style="color: #999">六年3班</span>
 
-                </div>
 
-                <div style="margin-left: 50px">
 
-                  <span>所属学校：</span
 
-                  ><span style="color: #999">罗浮名剑中学</span>
 
-                </div>
 
-              </div>
 
-              <div>
 
-                <span>手机号码：</span
 
-                ><span style="color: #999">13751117529</span>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-        <div class="student_body">
 
-          <div style="padding: 20px 30px">
 
-            个人中心 > 消息通知 > 关于辅修学士学位授予工作调整通知
 
-          </div>
 
-          <div class="project_box">
 
-            <div class="detail_content_top">
 
-              <div class="detail_title">关于辅修学士学位授予工作调整通知</div>
 
-              <div class="detail_time">2021-03-15 15:10:24</div>
 
-            </div>
 
-            <div class="detail_content">
 
-              根据国务院学位委员会发布的《学士学位授权与授予管理办法》和《上海市学位委员会关于做好本市高校学士学位授权与授予工作的通知》的要求：具有学士学位授予权的普通高等学校，可向本校符合学士学位授予标准的全日制本科毕业生授予辅修学士学位。辅修学士学位在主修学士学位证书中予以注明，不单独发放学位证书。2022年所有单位按《办法》执行。结合学生主修学业年限最长是六年以及辅修专业修读时间是三年，拟对我校辅修专业学士学位授予工作做如下调整：
 
-              一、自2021年起，凡辅读辅修专业的学生采用学士学位申请制。
 
-              二、举例说明，学生主修2016级，辅修2016-1或2017-1的情况：（同样适用于主修2017级的学生）
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
+	<div class="pb_content">
 
+		<div class="pb_content_body">
 
+			<div class="body_student">
 
+				<div class="student_head">
 
+					<div class="box_course">
 
+						<div class="wheel"><img src="../assets/tx.png" alt="" /></div>
 
+						<div class="right_box">
 
+							<div class="right_box_title">张子林</div>
 
+							<div class="people">
 
+								<div>
 
+									<span>班级：</span><span style="color: #999">六年3班</span>
 
+								</div>
 
+								<div style="margin-left: 50px">
 
+									<span>所属学校：</span
 
+									><span style="color: #999">罗浮名剑中学</span>
 
+								</div>
 
+							</div>
 
+							<div>
 
+								<span>手机号码：</span
 
+								><span style="color: #999">13751117529</span>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="student_body">
 
+					<div style="padding: 20px 30px">
 
+						<el-breadcrumb separator-class="el-icon-arrow-right">
 
+							<el-breadcrumb-item :to="{ path: '/mine' }"
 
+								>个人中心</el-breadcrumb-item
 
+							>
 
+							<el-breadcrumb-item :to="{ path: '/notice' }"
 
+								>消息通知</el-breadcrumb-item
 
+							>
 
+							<el-breadcrumb-item>{{
 
+								newDetailMessage.title
 
+							}}</el-breadcrumb-item>
 
+						</el-breadcrumb>
 
+					</div>
 
+					<div class="project_box">
 
+						<div class="detail_content_top">
 
+							<div class="detail_title">{{ newDetailMessage.title }}</div>
 
+							<div class="detail_time">{{ newDetailMessage.creatTime }}</div>
 
+						</div>
 
+						<div
 
+							class="detail_content"
 
+							v-html="newDetailMessage.newscontent"
 
+						></div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 </template>
 
 
 <script>
 
-export default {
 
-  data() {
 
-    return {};
 
-  },
 
-  methods: {
 
-    goTo(path) {
 
-      this.$router.push(path);
 
-    },
 
-  },
 
-  created() {},
 
-};
 
+	export default {
 
+		data() {
 
+			return {
 
+				studentMessage: [],
 
+				newDetailMessage: [],
 
+				tx: require("../assets/tx.png"),
 
+				newsid: this.$route.query.newsid,
 
+			};
 
+		},
 
+		methods: {
 
+			goTo(path) {
 
+				this.$router.push(path);
 
+			},
 
+			selectSDetail() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectSDetail", params)
 
+					.then((res) => {
 
+						this.studentMessage = res.data[0][0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+			selectNewDetail() {
 
+				let params = {
 
+					nid: this.newsid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectNewDetail", params)
 
+					.then((res) => {
 
+						this.newDetailMessage = res.data[0][0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+		},
 
+		created() {
 
+			this.selectSDetail();
 
+			this.selectNewDetail();
 
+			document.scrollingElement.scrollTop = 0;
 
+		},
 
+	};
 
 </script>
 
 
 <style scoped>
 
-.body_student {
 
-  margin: 0px auto;
 
-  width: 80%;
 
-  height: 100%;
 
-}
 
-.student_head {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  height: 30%;
 
-}
 
-.wheel > img,
 
-.project > img {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.box_course {
 
-  display: flex;
 
-  padding: 35px 0 25px 60px;
 
-  align-items: center;
 
-}
 
-.wheel {
 
-  width: 210px;
 
-}
 
-.right_box {
 
-  display: flex;
 
-  flex-direction: column;
 
-  margin-left: 30px;
 
-  /* justify-content: space-around; */
 
-}
 
-.right_box_title {
 
-  font-size: 23px;
 
-}
 
-.people {
 
-  display: flex;
 
-  margin: 30px 0 20px 0px;
 
-}
 
-.student_body {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  margin-top: 20px;
 
-  min-height: 1000px;
 
-}
 
-.project {
 
-  width: 165px;
 
-}
 
-.project_box {
 
-  padding: 0 30px 10px 30px;
 
-}
 
-.detail_content_top {
 
-  width: 100%;
 
-  padding: 25px 0 25px 0;
 
-  border-bottom: 1px solid #ccc;
 
-}
 
-.detail_title {
 
-  text-align: center;
 
-  font-size: 24px;
 
-}
 
-.detail_time {
 
-  font-size: 13px;
 
-  padding: 15px 0 0 40px;
 
-}
 
-.detail_content {
 
-  width: 90%;
 
-  line-height: 2pc;
 
-  margin: 0 auto;
 
-  padding-top: 30px;
 
-  text-indent: 30px;
 
-}
 
+	.body_student {
 
+		margin: 0px auto;
 
+		width: 80%;
 
+		height: 100%;
 
+	}
 
+	.student_head {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		height: 30%;
 
+	}
 
+	.wheel > img,
 
+	.project > img {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+	.box_course {
 
+		display: flex;
 
+		padding: 35px 0 25px 60px;
 
+		align-items: center;
 
+	}
 
+	.wheel {
 
+		width: 210px;
 
+	}
 
+	.right_box {
 
+		display: flex;
 
+		flex-direction: column;
 
+		margin-left: 30px;
 
+		/* justify-content: space-around; */
 
+	}
 
+	.right_box_title {
 
+		font-size: 23px;
 
+	}
 
+	.people {
 
+		display: flex;
 
+		margin: 30px 0 20px 0px;
 
+	}
 
+	.student_body {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		margin-top: 20px;
 
+		min-height: 1000px;
 
+	}
 
+	.project {
 
+		width: 165px;
 
+	}
 
+	.project_box {
 
+		padding: 0 30px 10px 30px;
 
+	}
 
+	.detail_content_top {
 
+		width: 100%;
 
+		padding: 25px 0 25px 0;
 
+		border-bottom: 1px solid #ccc;
 
+	}
 
+	.detail_title {
 
+		text-align: center;
 
+		font-size: 24px;
 
+	}
 
+	.detail_time {
 
+		font-size: 13px;
 
+		padding: 15px 0 0 40px;
 
+	}
 
+	.detail_content {
 
+		width: 90%;
 
+		line-height: 2pc;
 
+		margin: 0 auto;
 
+		padding-top: 30px;
 
+		text-indent: 30px;
 
+	}
 
 </style>

+ 200 - 141
src/components/project.vue
查看文件 

@@ -1,149 +1,208 @@
 
 <template>
 
-  <div class="pb_content">
 
-    <div class="pb_content_body">
 
-      <div class="body_student">
 
-        <div class="student_head">
 
-          <div class="box_course">
 
-            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
 
-            <div class="right_box">
 
-              <div class="right_box_title">张子林</div>
 
-              <div class="people">
 
-                <div>
 
-                  <span>班级：</span><span style="color: #999">六年3班</span>
 
-                </div>
 
-                <div style="margin-left: 50px">
 
-                  <span>所属学校：</span
 
-                  ><span style="color: #999">罗浮名剑中学</span>
 
-                </div>
 
-              </div>
 
-              <div>
 
-                <span>手机号码：</span
 
-                ><span style="color: #999">13751117529</span>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-        <div class="student_body">
 
-          <div style="padding: 20px 30px">个人中心 > 我的课程</div>
 
-          <div class="project_box">
 
-            <div class="three_box_inthis">
 
-              <div class="project">
 
-                <img src="../assets/project.png" alt="" />
 
-              </div>
 
-              <div class="projct_nav">
 
-                <div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
 
-                <div>
 
-                  <span>时间：</span
 
-                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
 
-                </div>
 
-                <div style="color: #999">共一讲</div>
 
-              </div>
 
-            </div>
 
-            <div class="three_box_inthis">
 
-              <div class="project">
 
-                <img src="../assets/project.png" alt="" />
 
-              </div>
 
-              <div class="projct_nav">
 
-                <div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
 
-                <div>
 
-                  <span>时间：</span
 
-                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
 
-                </div>
 
-                <div style="color: #999">共一讲</div>
 
-              </div>
 
-            </div>
 
-            <div class="three_box_inthis">
 
-              <div class="project">
 
-                <img src="../assets/project.png" alt="" />
 
-              </div>
 
-              <div class="projct_nav">
 
-                <div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
 
-                <div>
 
-                  <span>时间：</span
 
-                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
 
-                </div>
 
-                <div style="color: #999">共一讲</div>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
+	<div class="pb_content">
 
+		<div class="pb_content_body">
 
+			<div class="body_student">
 
+				<div class="student_head">
 
+					<div class="box_course">
 
+						<div class="wheel">
 
+							<img
 
+								:src="
 
+									studentMessage.headportrait != null
 
+										? studentMessage.headportrait
 
+										: tx
 
+								"
 
+								alt=""
 
+							/>
 
+						</div>
 
+						<div class="right_box">
 
+							<div class="right_box_title">{{ studentMessage.name }}</div>
 
+							<div class="people">
 
+								<div>
 
+									<span>班级：</span
 
+									><span style="color: #999">{{ studentMessage.cname }}</span>
 
+								</div>
 
+								<div style="margin-left: 50px">
 
+									<span>所属学校：</span
 
+									><span style="color: #999">{{ studentMessage.sname }}</span>
 
+								</div>
 
+							</div>
 
+							<div>
 
+								<span>手机号码：</span
 
+								><span style="color: #999">{{
 
+									studentMessage.phonenumber
 
+								}}</span>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="student_body">
 
+					<div style="padding: 20px 30px">
 
+						<el-breadcrumb separator-class="el-icon-arrow-right">
 
+							<el-breadcrumb-item :to="{ path: '/mine' }"
 
+								>个人中心</el-breadcrumb-item
 
+							>
 
+							<el-breadcrumb-item>我的课程</el-breadcrumb-item>
 
+						</el-breadcrumb>
 
+					</div>
 
+					<div class="project_box">
 
+						<div
 
+							class="three_box_inthis"
 
+							v-for="(item, index) in myCourse"
 
+							:key="index"
 
+						>
 
+							<div
 
+								class="project"
 
+								@click="goTo('/courseDetail?courseId=' + item.courseid)"
 
+							>
 
+								<img
 
+									:src="
 
+										item.cover != null && item.cover != ''
 
+											? JSON.parse(item.cover)[0].url
 
+											: mpj
 
+									"
 
+									alt=""
 
+								/>
 
+							</div>
 
+							<div class="projct_nav">
 
+								<div
 
+									style="font-size: 18px"
 
+									@click="goTo('/courseDetail?courseId=' + item.courseid)"
 
+								>
 
+									{{ item.title }}
 
+								</div>
 
+								<div>
 
+									<span>时间：</span
 
+									><span style="color: #999">{{ item.createTime }}</span>
 
+								</div>
 
+								<div style="color: #999">
 
+									共{{ JSON.parse(item.chapters).length }}讲
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 </template>
 
 
 <script>
 
-export default {
 
-  data() {
 
-    return {};
 
-  },
 
-  methods: {},
 
-  created() {},
 
-};
 
+	export default {
 
+		data() {
 
+			return {
 
+				myCourse: [],
 
+				studentMessage: [],
 
+				tx: require("../assets/tx.png"),
 
+				mpj: require("../assets/project.png"),
 
+			};
 
+		},
 
+		methods: {
 
+			goTo(path) {
 
+				this.$router.push(path);
 
+			},
 
+			selectSDetail() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectSDetail", params)
 
+					.then((res) => {
 
+						this.studentMessage = res.data[0][0];
 
+					})
 
+					.catch((err) => {
 
+						this.isLoading = false;
 
+						console.error(err);
 
+					});
 
+			},
 
+			selectMyCourse() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectMyCourseBycid", params)
 
+					.then((res) => {
 
+						this.myCourse = res.data[0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+		},
 
+		created() {
 
+			this.selectSDetail();
 
+			this.selectMyCourse();
 
+			document.scrollingElement.scrollTop = 0;
 
+		},
 
+	};
 
 </script>
 
 
 <style scoped>
 
-.body_student {
 
-  margin: 0px auto;
 
-  width: 80%;
 
-  height: 100%;
 
-}
 
-.student_head {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  height: 30%;
 
-}
 
-.wheel > img,
 
-.project > img {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.box_course {
 
-  display: flex;
 
-  padding: 35px 0 25px 60px;
 
-  align-items: center;
 
-}
 
-.wheel {
 
-  width: 210px;
 
-}
 
-.right_box {
 
-  display: flex;
 
-  flex-direction: column;
 
-  margin-left: 30px;
 
-  /* justify-content: space-around; */
 
-}
 
-.right_box_title {
 
-  font-size: 23px;
 
-}
 
-.people {
 
-  display: flex;
 
-  margin: 30px 0 20px 0px;
 
-}
 
-.student_body {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  margin-top: 20px;
 
-  padding: 0 0 20px;
 
-  min-height: 1000px;
 
-}
 
-.project {
 
-  width: 165px;
 
-}
 
-.project_box {
 
-  /* margin: 0 0 10px 30px; */
 
-}
 
-.three_box_inthis {
 
-  display: flex;
 
-  padding: 40px 30px;
 
-  border-bottom: 1px solid #cecece;
 
-}
 
-.projct_nav {
 
-  margin-left: 15px;
 
-  display: flex;
 
-  flex-direction: column;
 
-  flex-wrap: nowrap;
 
-  justify-content: space-around;
 
-}
 
+	.body_student {
 
+		margin: 0px auto;
 
+		width: 80%;
 
+		height: 100%;
 
+	}
 
+	.student_head {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		height: 30%;
 
+	}
 
+	.wheel > img,
 
+	.project > img {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+	.box_course {
 
+		display: flex;
 
+		padding: 35px 0 25px 60px;
 
+		align-items: center;
 
+	}
 
+	.wheel {
 
+		width: 210px;
 
+	}
 
+	.right_box {
 
+		display: flex;
 
+		flex-direction: column;
 
+		margin-left: 30px;
 
+		/* justify-content: space-around; */
 
+	}
 
+	.right_box_title {
 
+		font-size: 23px;
 
+	}
 
+	.people {
 
+		display: flex;
 
+		margin: 30px 0 20px 0px;
 
+	}
 
+	.student_body {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		margin-top: 20px;
 
+		padding: 0 0 20px;
 
+		min-height: 1000px;
 
+	}
 
+	.project {
 
+		width: 165px;
 
+		height: 109px;
 
+		cursor: pointer;
 
+	}
 
+	.project_box {
 
+		/* margin: 0 0 10px 30px; */
 
+	}
 
+	.three_box_inthis {
 
+		display: flex;
 
+		padding: 40px 30px;
 
+		border-bottom: 1px solid #cecece;
 
+	}
 
+	.projct_nav {
 
+		margin-left: 15px;
 
+		display: flex;
 
+		flex-direction: column;
 
+		flex-wrap: nowrap;
 
+		justify-content: space-around;
 
+	}
 
+	.projct_nav > div:nth-child(1) {
 
+		cursor: pointer;
 
+	}
 
 </style>

+ 533 - 153
src/components/score.vue
查看文件 

@@ -1,161 +1,541 @@
 
 <template>
 
-  <div class="pb_content">
 
-    <div class="pb_content_body">
 
-      <div class="body_student">
 
-        <div class="student_head">
 
-          <div class="box_course">
 
-            <div class="wheel"><img src="../assets/sp2.png" alt="" /></div>
 
-            <div style="font-size: 18px; margin: 15px">
 
-              鱼类的起源2.0，实践课程
 
-            </div>
 
-          </div>
 
-        </div>
 
-        <div class="student_body">
 
-          <div style="padding: 20px 30px">
 
-            个人中心 > 我的作品 > 鱼类的起源2.0，实践课程
 
-          </div>
 
-          <div class="project_box">
 
-            <div class="star"><img src="../assets/starts.png" alt="" /></div>
 
-          </div>
 
-        </div>
 
-        <div class="student_body1">
 
-          <div style="padding: 20px 30px">评论（2）</div>
 
-          <div class="two_ete_box">
 
-            <div class="other_evaluate">
 
-              <div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
 
-              <div class="right_ete">
 
-                <div class="first_other_ete">
 
-                  <div class="ete_name">樟子松</div>
 
-                  <div class="ete_time">2021/2/5</div>
 
-                </div>
 
-                <div class="ete_content">
 
-                  作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不辜负老师的期望。
 
-                </div>
 
-              </div>
 
-            </div>
 
-            <div class="other_evaluate">
 
-              <div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
 
-              <div class="right_ete">
 
-                <div class="first_other_ete">
 
-                  <div class="ete_name">灰色与青</div>
 
-                  <div class="ete_time">2021/2/5</div>
 
-                </div>
 
-                <div class="ete_content">作品已经看完了，好看！！</div>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
+	<div class="pb_content">
 
+		<div class="pb_content_body">
 
+			<div class="body_student">
 
+				<div class="student_head">
 
+					<div class="box_course">
 
+						<div class="wheel">
 
+							<video-player
 
+								class="video-player vjs-custom-skin"
 
+								ref="videoPlayer"
 
+								:playsinline="true"
 
+								:options="playerO"
 
+								@play="onPlayerPlay($event)"
 
+								style="width: 100%; height: 100%"
 
+							></video-player>
 
+						</div>
 
+						<div style="font-size: 18px; margin: 15px">
 
+							{{
 
+								chapInfo.length > 0
 
+									? chapInfo[parseInt(this.stage)].dyName
 
+									: "暂无标题"
 
+							}}
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="student_body">
 
+					<div style="padding: 20px 30px">
 
+						<el-breadcrumb separator-class="el-icon-arrow-right">
 
+							<el-breadcrumb-item :to="{ path: '/mine' }"
 
+								>个人中心</el-breadcrumb-item
 
+							>
 
+							<el-breadcrumb-item :to="{ path: '/works' }"
 
+								>我的作品</el-breadcrumb-item
 
+							>
 
+							<el-breadcrumb-item>{{
 
+								chapInfo.length > 0
 
+									? chapInfo[parseInt(this.stage)].dyName
 
+									: "暂无标题"
 
+							}}</el-breadcrumb-item>
 
+						</el-breadcrumb>
 
+					</div>
 
+					<div
 
+						class="project_box"
 
+						v-if="
 
+							chapInfo.length > 0 &&
 
+							chapInfo[parseInt(this.stage)].tname != null &&
 
+							chapInfo[parseInt(this.stage)].tname != ''
 
+						"
 
+					>
 
+						<div class="mywd_rate_leida">
 
+							<!-- <img src="../../assets/icon/leida.png" alt="" /> -->
 
+							<div
 
+								id="radar_canvas"
 
+								class="echart"
 
+								style="width: 100%; height: 100%"
 
+							></div>
 
+						</div>
 
+						<!-- <div class="star"><img src="../assets/starts.png" alt="" /></div> -->
 
+					</div>
 
+					<div class="project_box" v-else>老师暂未评分</div>
 
+				</div>
 
+				<div class="student_body1">
 
+					<div style="padding: 20px 30px">评价</div>
 
+					<div class="two_ete_box">
 
+						<div
 
+							class="other_evaluate"
 
+							v-if="
 
+								chapInfo.length > 0 &&
 
+								chapInfo[parseInt(this.stage)].tname != null &&
 
+								chapInfo[parseInt(this.stage)].tname != ''
 
+							"
 
+						>
 
+							<div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
 
+							<div class="right_ete">
 
+								<div class="first_other_ete">
 
+									<div class="ete_name">
 
+										{{
 
+											chapInfo.length > 0
 
+												? chapInfo[parseInt(this.stage)].tname
 
+												: "暂无名称"
 
+										}}
 
+									</div>
 
+									<div class="ete_time">
 
+										{{
 
+											chapInfo.length > 0
 
+												? chapInfo[parseInt(this.stage)].tTime
 
+												: "暂无评价"
 
+										}}
 
+									</div>
 
+								</div>
 
+								<div class="ete_content">
 
+									{{
 
+										chapInfo.length > 0
 
+											? chapInfo[parseInt(this.stage)].rate.content
 
+											: "暂无评价"
 
+									}}
 
+								</div>
 
+							</div>
 
+						</div>
 
+						<div class="other_evaluate" v-else>老师暂未评价</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 </template>
 
 
 <script>
 
-export default {
 
-  data() {
 
-    return {};
 
-  },
 
-  methods: {},
 
-  created() {},
 
-};
 
+	export default {
 
+		data() {
 
+			return {
 
+				chapInfo: [],
 
+				res: "",
 
+				courseId: this.$route.query.courseId,
 
+				stage: this.$route.query.stage,
 
+				myCourse: [],
 
+				playerOptions: {
 
+					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
 
+					autoplay: false, //如果true,浏览器准备好时开始回放。
 
+					muted: false, // 默认情况下将会消除任何音频。
 
+					loop: false, // 导致视频一结束就重新开始。
 
+					preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
 
+					language: "zh-CN",
 
+					aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
 
+					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
 
+					sources: [
 
+						{
 
+							type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
 
+							src: "", //url地址require("../../assets/media/aaa.mp4")
 
+						},
 
+					],
 
+					// poster: require("../../assets/tu31.png"), //你的封面地址
 
+					// poster: dataRes.imgUrl, //你的封面地址
 
+					notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
 
+					controlBar: {
 
+						timeDivider: true, //当前时间和持续时间的分隔符
 
+						durationDisplay: true, //显示持续时间
 
+						remainingTimeDisplay: false, //是否显示剩余时间功能
 
+						fullscreenToggle: true, //全屏按钮
 
+					},
 
+				},
 
+				playerO: {},
 
+				rate: {
 
+					ca: 0,
 
+					sia: 0,
 
+					eta: 0,
 
+					pia: 0,
 
+					lra: 0,
 
+				},
 
+				// 雷达图的数据
 
+				radarOption: {
 
+					splitNumber: 5,
 
+					// tooltip: {
 
+					//   triggerOn: "mousemove",
 
+					//   //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
 
+					//   confine: true,
 
+					//   enterable: true, //鼠标是否可以移动到tooltip区域内
 
+					//   backgroundColor: "rgba(255,255,255,0.7)",
 
+					//   textStyle: {
 
+					//     // 文字样式
 
+					//     align: "left",
 
+					//   },
 
+					//   left: "right",
 
+					//   top: "bottom",
 
+					// },
 
+					radar: {
 
+						shape: "circle",
 
+						center: ["50%", "50%"],
 
+						name: {
 
+							formatter: function (value, indicator) {
 
+								return (
 
+									"{a|" + value + "}" + "{b|(" + indicator.value + ")}"
 
+								);
 
+							}, //富文本编辑 修改文字展示样式
 
+							rich: {
 
+								a: {
 
+									color: "rgb(58,155,83)",
 
+									fontSize: 12,
 
+									align: "center",
 
+									width: "200px",
 
+								},
 
+								b: {
 
+									color: "rgb(58,155,83)",
 
+									fontSize: 12,
 
+									align: "center",
 
+								},
 
+							},
 
+							textStyle: {
 
+								// 文字样式
 
+								color: "rgb(58,155,83)",
 
+							},
 
+						},
 
+						indicator: [
 
+							// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
 
+							{
 
+								name: "意识能力",
 
+								max: 5,
 
+							},
 
+							{
 
+								name: "科学探究能力",
 
+								max: 5,
 
+							},
 
+							{
 
+								name: "实践创新能力",
 
+								max: 5,
 
+							},
 
+							{
 
+								name: "学习反思能力",
 
+								max: 5,
 
+							},
 
+							{
 
+								name: "工程思维能力",
 
+								max: 5,
 
+							},
 
+						],
 
+					},
 
+					// 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
 
+					splitArea: {
 
+						show: true,
 
+						areaStyle: {
 
+							color: "rgba(255,0,0,0)", // 图表背景的颜色
 
+						},
 
+					},
 
+					splitLine: {
 
+						show: true,
 
+						lineStyle: {
 
+							width: 1,
 
+							color: "rgba(131,141,158,.1)", // 设置网格的颜色
 
+						},
 
+					},
 
+					series: [
 
+						{
 
+							name: "能力图", // tooltip中的标题
 
+							type: "radar", // 表示是雷达图
 
+							symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
 
+							symbolSize: 8, // 拐点的大小
 
+							areaStyle: {
 
+								normal: {
 
+									width: 1,
 
+									opacity: 0.2,
 
+								},
 
+							},
 
+							data: [
 
+								{
 
+									// 设置各个指标原始值
 
+									value: [0, 0, 0, 0, 0, 0],
 
+									// 设置区域边框和区域的颜色
 
+									itemStyle: {
 
+										normal: {
 
+											color: "rgba(78,187,101)",
 
+											lineStyle: {
 
+												color: "rgba(78,187,101)",
 
+											},
 
+										},
 
+									},
 
+								},
 
+							],
 
+						},
 
+					],
 
+				},
 
+			};
 
+		},
 
+		methods: {
 
+			selectMyCourse() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectMyCourse", params)
 
+					.then((res) => {
 
+						this.myCourse = res.data[0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+			selectWorksDetail() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+					cid: this.courseId,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectWorksDetail", params)
 
+					.then((res) => {
 
+						this.chapInfo = JSON.parse(res.data[0][0].chapters);
 
+						var worksDetail = res.data[1];
 
+						this.chapInfo.filter((value, index, array) => {
 
+							for (var i = 0; i < worksDetail.length; i++) {
 
+								if (index == worksDetail[i].stage) {
 
+									var c = JSON.parse(worksDetail[i].content)[0];
 
+									var d =
 
+										worksDetail[i].rate != null && worksDetail[i].rate != ""
 
+											? JSON.parse(worksDetail[i].rate)
 
+											: { ca: 0, sia: 0, eta: 0, pia: 0, lra: 0, content: "" };
 
+									var e =
 
+										worksDetail[i].rate != null && worksDetail[i].rate != ""
 
+											? 0
 
+											: 1;
 
+									var f = worksDetail[i].tTime;
 
+									var g = worksDetail[i].tname;
 
+									value.rateWrong = e;
 
+									value.content = c.content;
 
+									value.rate = d;
 
+									value.tTime = f;
 
+									value.tname = g;
 
+									// this.rateList = d;
 
+									// this.rateList = value.rate;
 
+									value.cover = c.cover;
 
+									value.upVedio = c.upVedio;
 
+									break;
 
+								}
 
+							}
 
+						});
 
+						this.switchVideo();
 
+						this.leidaPic();
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+			leidaPic() {
 
+				// this.chapInfo[parseInt(this.stage)].forEach((cn) => {
 
+				var rate = this.chapInfo[parseInt(this.stage)].rate;
 
+				this.rate.ca += rate.ca;
 
+				this.rate.sia += rate.sia;
 
+				this.rate.eta += rate.eta;
 
+				this.rate.pia += rate.pia;
 
+				this.rate.lra += rate.lra;
 
+				// });
 
+				this.rate.ca = this.rate.ca;
 
+				this.rate.sia = this.rate.sia;
 
+				this.rate.eta = this.rate.eta;
 
+				this.rate.pia = this.rate.pia;
 
+				this.rate.lra = this.rate.lra;
 
+				this.leida();
 
+			},
 
+			leida() {
 
+				// 雷达图显示的标签
 
+				let newPromise = new Promise((resolve) => {
 
+					resolve();
 
+				});
 
+				//然后异步执行echarts的初始化函数
 
+				newPromise.then(() => {
 
+					const chartObj = this.$echarts.init(
 
+						this.$el.querySelector("#radar_canvas")
 
+						// document.getElementById("radar_canvas")
 
+					);
 
+					//   var rate = JSON.parse(this.res.rate);
 
+					this.radarOption.radar.indicator.filter((value, index, array) => {
 
+            if(value.name == "意识能力"){
 
+              value.value = this.rate.ca;
 
+            }
 
+            if(value.name == "科学探究能力"){
 
+              value.value = this.rate.sia;
 
+            }
 
+            if(value.name == "实践创新能力"){
 
+              value.value = this.rate.eta;
 
+            }
 
+            if(value.name == "学习反思能力"){
 
+              value.value = this.rate.pia;
 
+            }
 
+            if(value.name == "工程思维能力"){
 
+              value.value = this.rate.lra;
 
+            }
 
+          })
 
+					this.radarOption.series[0].data[0].value[0] = this.rate.ca; //意识能力
 
+					this.radarOption.series[0].data[0].value[1] = this.rate.sia; //科学探究能力
 
+					this.radarOption.series[0].data[0].value[2] = this.rate.eta; //实践创新能力
 
+					this.radarOption.series[0].data[0].value[3] = this.rate.pia; //学习反思能力
 
+					this.radarOption.series[0].data[0].value[4] = this.rate.lra; //工程思维能力
 
+					//格式tooltip
 
+					this.radarOption.tooltip = {
 
+						// triggerOn: "mousemove",
 
+						//雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
 
+						confine: true,
 
+						enterable: true, //鼠标是否可以移动到tooltip区域内
 
+						backgroundColor: "rgba(255,255,255,0.7)",
 
+						textStyle: {
 
+							// 文字样式
 
+							align: "left",
 
+						},
 
+						left: "right",
 
+						top: "bottom",
 
+						formatter: function (params) {
 
+							let relVal = "<ul>" + params.name + params.seriesName;
 
+							var a = [
 
+								"意识能力",
 
+								"科学探究能力",
 
+								"实践创新能力",
 
+								"学习反思能力",
 
+								"工程思维能力",
 
+							];
 
+							for (let i = 0; i < params.data.value.length - 1; i++) {
 
+								relVal +=
 
+									"<li>" +
 
+									`<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:rgba(78,187,101);"></span>` +
 
+									`<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${a[i]}</span>` +
 
+									`<span style="float:right;margin-left:20px;font-size:14px;color:#666;">${
 
+										params.data.value[i] + " 星"
 
+									}</span>` +
 
+									"</li>";
 
+							}
 
+							relVal += "</ul>";
 
+							return relVal;
 
+						},
 
+					};
 
+
 
+					// 初始化雷达图
 
+					chartObj.setOption(this.radarOption);
 
+				});
 
+			},
 
+			switchVideo() {
 
+				this.playerO = {};
 
+				this.playerOptions.poster = "";
 
+				this.playerOptions.sources[0].src =
 
+					this.chapInfo[parseInt(this.stage)].upVedio.length > 0
 
+						? this.chapInfo[parseInt(this.stage)].upVedio[0].url
 
+						: require("../assets/icon/kc1.png");
 
+				this.playerO = this.playerOptions;
 
+			},
 
+			onPlayerPlay() {},
 
+		},
 
+		created() {
 
+			this.selectWorksDetail();
 
+			this.selectMyCourse();
 
+		},
 
+	};
 
 </script>
 
 
 <style scoped>
 
-.body_student {
 
-  margin: 0px auto;
 
-  width: 80%;
 
-  height: 100%;
 
-}
 
-.student_head {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  height: 30%;
 
-}
 
-.wheel > img,
 
-.project > img,
 
-.star > img,
 
-.evaluate > img {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.box_course {
 
-  display: flex;
 
-  flex-direction: column;
 
-}
 
-.wheel {
 
-  width: 100%;
 
-}
 
-.right_box {
 
-  display: flex;
 
-  flex-direction: column;
 
-  margin-left: 30px;
 
-  justify-content: space-around;
 
-}
 
-.right_box_title {
 
-  font-size: 23px;
 
-}
 
-.people {
 
-  display: flex;
 
-}
 
-.student_body,
 
-.student_body1 {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  margin-top: 20px;
 
-  /* min-height: 1000px; */
 
-  padding: 0 0 20px;
 
-}
 
-.student_body1 {
 
-  /* height: 500px !important; */
 
-  /* overflow: auto !important; */
 
-}
 
-.project {
 
-  width: 165px;
 
-}
 
-.project_box {
 
-  margin: 0 0 10px 30px;
 
-}
 
-.star {
 
-  width: 50%;
 
-  min-width: 400px;
 
-  margin: 0 auto;
 
-}
 
-.evaluate {
 
-  width: auto;
 
-  height: 65px;
 
-  border-radius: 100%;
 
-  overflow: hidden;
 
-}
 
-.two_ete_box {
 
-  padding: 20px 0 5px 30px;
 
-  border-bottom: 1px solid #cecece;
 
-}
 
-.other_evaluate {
 
-  display: flex;
 
-  margin-bottom: 25px;
 
-}
 
-.right_ete {
 
-  margin-left: 15px;
 
-}
 
-.first_other_ete {
 
-  display: flex;
 
-}
 
-.ete_time {
 
-  margin-left: 10px;
 
-  line-height: 21px;
 
-  font-size: 13px;
 
-  color: #999;
 
-  margin-bottom: 10px;
 
-}
 
-.ete_content {
 
-  height: auto;
 
-  word-wrap: break-word;
 
-  word-break: break-all;
 
-  overflow: hidden;
 
-  width: 500px;
 
-  line-height: 20px;
 
-  font-size: 14px;
 
-}
 
+	.body_student {
 
+		margin: 0px auto;
 
+		width: 80%;
 
+		height: 100%;
 
+	}
 
+	.student_head {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		height: 30%;
 
+	}
 
+	.wheel > img,
 
+	.project > img,
 
+	.star > img,
 
+	.evaluate > img {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+	.box_course {
 
+		display: flex;
 
+		flex-direction: column;
 
+	}
 
+	.wheel {
 
+		width: 100%;
 
+	}
 
+	.right_box {
 
+		display: flex;
 
+		flex-direction: column;
 
+		margin-left: 30px;
 
+		justify-content: space-around;
 
+	}
 
+	.right_box_title {
 
+		font-size: 23px;
 
+	}
 
+	.people {
 
+		display: flex;
 
+	}
 
+	.student_body,
 
+	.student_body1 {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		margin-top: 20px;
 
+		/* min-height: 1000px; */
 
+		padding: 0 0 20px;
 
+	}
 
+	.student_body1 {
 
+		/* height: 500px !important; */
 
+		/* overflow: auto !important; */
 
+	}
 
+	.project {
 
+		width: 165px;
 
+	}
 
+	.project_box {
 
+		margin: 0 0 10px 30px;
 
+	}
 
+	.star {
 
+		width: 50%;
 
+		min-width: 400px;
 
+		margin: 0 auto;
 
+	}
 
+	.evaluate {
 
+		width: auto;
 
+		height: 65px;
 
+		border-radius: 100%;
 
+		overflow: hidden;
 
+	}
 
+	.two_ete_box {
 
+		padding: 0px 0 5px 30px;
 
+		border-bottom: 1px solid #cecece;
 
+	}
 
+	.other_evaluate {
 
+		display: flex;
 
+		margin-bottom: 25px;
 
+	}
 
+	.right_ete {
 
+		margin-left: 15px;
 
+	}
 
+	.first_other_ete {
 
+		display: flex;
 
+	}
 
+	.ete_time {
 
+		margin-left: 10px;
 
+		line-height: 21px;
 
+		font-size: 13px;
 
+		color: #999;
 
+		margin-bottom: 10px;
 
+	}
 
+	.ete_content {
 
+		height: auto;
 
+		word-wrap: break-word;
 
+		word-break: break-all;
 
+		overflow: hidden;
 
+		width: 500px;
 
+		line-height: 20px;
 
+		font-size: 14px;
 
+		padding-top: 10px;
 
+	}
 
+	.mywd_rate_leida {
 
+		width: 95%;
 
+		margin: 0 auto;
 
+		text-align: center;
 
+		height: 300px;
 
+		display: flex;
 
+		align-items: center;
 
+		justify-content: center;
 
+	}
 
+	.mywd_rate_leida img {
 
+		width: inherit;
 
+	}
 
 </style>

+ 10 - 14
src/components/study.vue
查看文件 

@@ -3,10 +3,7 @@
 
 		<div class="pb_content_body">
 
 			<div class="body_student">
 
 				<div class="student_head">
 
-					<div
 
-						class="box_course"
 
-						
-					>
 
+					<div class="box_course">
 
 						<div class="wheel">
 
 							<div class="workd_media">
 
 								<!-- <el-image
 
@@ -40,7 +37,7 @@
 
 							</div> -->
 
 							<!-- <img src="../assets/sp2.png" alt="" /> -->
 
 						</div>
 
-						<div style="font-size: 18px; margin: 15px" >
 
+						<div style="font-size: 18px; margin: 15px">
 
 							{{ chapInfo.dyName }}
 
 						</div>
 
 					</div>
 
@@ -73,14 +70,11 @@
 
 						<div @click="openAddWork" class="btn">提交实践作业</div>
 
 					</div>
 
 					<div class="project_box" v-if="type == 1">
 
-						<div
 
-							class="detail_content_top"
 
-						>
 
+						<div class="detail_content_top">
 
 							<div class="detail_title">{{ chapInfo.dyName }}</div>
 
 							<div class="detail_time">{{ courseDetail.time }}</div>
 
 						</div>
 
-						<div class="detail_content" v-html="courseDetail.template">
 
-						</div>
 
+						<div class="detail_content" v-html="courseDetail.template"></div>
 
 					</div>
 
 					<div class="project_box" v-if="type == 2">
 
 						<div class="filebox">
 
@@ -122,7 +116,7 @@
 
 					:before-close="handleClose"
 
 					class="dialog_change"
 
 				>
 
-					<div class="first" >
 
+					<div class="first">
 
 						<div>作业名称:</div>
 
 						<div>{{ chapInfo.dyName }}</div>
 
 					</div>
 
@@ -193,7 +187,7 @@
 
 							</div>
 
 						</div>
 
 					</div>
 
-					<div class="marginT">
 
+					<!-- <div class="marginT">
 
 						<div>附件上传</div>
 
 						<div
 
 							class="chapter_add"
 
@@ -221,7 +215,7 @@
 
 								<img src="../assets/icon/delete.png" alt="" />
 
 							</div>
 
 						</div>
 
-					</div>
 
+					</div> -->
 
 					<div class="upload_send" @click="addWork">提交</div>
 
 				</el-dialog>
 
 			</div>
 
@@ -447,7 +441,8 @@
 
 					.then((res) => {
 
 						loading.close();
 
 						// element.imgUrl = JSON.parse(element.chapters).poster;
 
-						var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0].chapterData;
 
+						var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
 
+							.chapterData;
 
 						var b = [
 
 							"AVI",
 
 							"NAVI",
 
@@ -571,6 +566,7 @@
 
 		},
 
 		created() {
 
 			this.getCourseDetail();
 
+			document.scrollingElement.scrollTop = 0;
 
 		},
 
 	};
 
 </script>

+ 210 - 186
src/components/works.vue
查看文件 

@@ -1,194 +1,218 @@
 
 <template>
 
-  <div class="pb_content">
 
-    <div class="pb_content_body">
 
-      <div class="body_student">
 
-        <div class="student_head">
 
-          <div class="box_course">
 
-            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
 
-            <div class="right_box">
 
-              <div class="right_box_title">张子林</div>
 
-              <div class="people">
 
-                <div>
 
-                  <span>班级：</span><span style="color: #999">六年3班</span>
 
-                </div>
 
-                <div style="margin-left: 50px">
 
-                  <span>所属学校：</span
 
-                  ><span style="color: #999">罗浮名剑中学</span>
 
-                </div>
 
-              </div>
 
-              <div>
 
-                <span>手机号码：</span
 
-                ><span style="color: #999">13751117529</span>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-        <div class="student_body">
 
-          <div style="padding: 20px 30px">个人中心 > 我的作品</div>
 
-          <div class="project_box">
 
-            <div class="three_box_inthis">
 
-              <div class="project">
 
-                <img src="../assets/project.png" alt="" />
 
-              </div>
 
-              <div class="projct_nav">
 
-                <div style="font-size: 18px">
 
-                  认识木头制作 | 颗粒板和胶合板制作
 
-                </div>
 
-                <div>
 
-                  <span>时间：</span
 
-                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
 
-                </div>
 
-                <div><span>提交人</span><span>提交人：张子林</span></div>
 
-              </div>
 
-              <div class="look_score" @click="goTo('/score')">查看评分</div>
 
-            </div>
 
-            <div class="three_box_inthis">
 
-              <div class="project">
 
-                <img src="../assets/project.png" alt="" />
 
-              </div>
 
-              <div class="projct_nav">
 
-                <div style="font-size: 18px">
 
-                  认识木头制作 | 颗粒板和胶合板制作
 
-                </div>
 
-                <div>
 
-                  <span>时间：</span
 
-                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
 
-                </div>
 
-                <div><span>提交人</span><span>提交人：张子林</span></div>
 
-              </div>
 
-              <div class="look_score" @click="goTo('/score')">查看评分</div>
 
-            </div>
 
-            <div class="three_box_inthis">
 
-              <div class="project">
 
-                <img src="../assets/project.png" alt="" />
 
-              </div>
 
-              <div class="projct_nav">
 
-                <div style="font-size: 18px">
 
-                  认识木头制作 | 颗粒板和胶合板制作
 
-                </div>
 
-                <div>
 
-                  <span>时间：</span
 
-                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
 
-                </div>
 
-                <div><span>提交人</span><span>提交人：张子林</span></div>
 
-              </div>
 
-              <div class="look_score" @click="goTo('/score')">查看评分</div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-      <div class="bottom">
 
-        <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/logo.png" alt="" />
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
+	<div class="pb_content">
 
+		<div class="pb_content_body">
 
+			<div class="body_student">
 
+				<div class="student_head">
 
+					<div class="box_course">
 
+						<div class="wheel">
 
+							<img
 
+								:src="
 
+									studentMessage.headportrait != null
 
+										? studentMessage.headportrait
 
+										: tx
 
+								"
 
+								alt=""
 
+							/>
 
+						</div>
 
+						<div class="right_box">
 
+							<div class="right_box_title">{{ studentMessage.name }}</div>
 
+							<div class="people">
 
+								<div>
 
+									<span>班级：</span
 
+									><span style="color: #999">{{ studentMessage.cname }}</span>
 
+								</div>
 
+								<div style="margin-left: 50px">
 
+									<span>所属学校：</span
 
+									><span style="color: #999">{{ studentMessage.sname }}</span>
 
+								</div>
 
+							</div>
 
+							<div>
 
+								<span>手机号码：</span
 
+								><span style="color: #999">{{
 
+									studentMessage.phonenumber
 
+								}}</span>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="student_body">
 
+					<div style="padding: 20px 30px">
 
+						<el-breadcrumb separator-class="el-icon-arrow-right">
 
+							<el-breadcrumb-item :to="{ path: '/mine' }"
 
+								>个人中心</el-breadcrumb-item
 
+							>
 
+							<el-breadcrumb-item>我的作品</el-breadcrumb-item>
 
+						</el-breadcrumb>
 
+					</div>
 
+					<div class="project_box">
 
+						<div
 
+							class="three_box_inthis"
 
+							v-for="(item, index) in myCourse"
 
+							:key="index"
 
+						>
 
+							<div class="project">
 
+								<img
 
+									:src="
 
+										item.cover != null && item.cover != ''
 
+											? JSON.parse(item.cover)[0].url
 
+											: mpj
 
+									"
 
+									alt=""
 
+								/>
 
+							</div>
 
+							<div class="projct_nav">
 
+								<div style="font-size: 18px">
 
+									{{ item.title }} - {{ JSON.parse(item.chapters)[item.stage].dyName }}
 
+								</div>
 
+								<div>
 
+									<span>时间：</span
 
+									><span style="color: #999">{{ item.createTime }}</span>
 
+								</div>
 
+								<div>
 
+									<span>提交人：</span><span>{{ studentMessage.name }}</span>
 
+								</div>
 
+							</div>
 
+							<div
 
+								class="look_score"
 
+								@click="goTo('/score?courseId=' + item.courseId + '&stage=' + item.stage) "
 
+							>
 
+								查看评分
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
 </template>
 
 
 <script>
 
-export default {
 
-  data() {
 
-    return {};
 
-  },
 
-  methods: {
 
-    goTo(path) {
 
-      this.$router.push(path);
 
-    },
 
-  },
 
-  created() {},
 
-};
 
+	export default {
 
+		data() {
 
+			return {
 
+				myCourse: [],
 
+				studentMessage: [],
 
+				tx: require("../assets/tx.png"),
 
+				mpj: require("../assets/project.png"),
 
+			};
 
+		},
 
+		methods: {
 
+			goTo(path) {
 
+				this.$router.push(path);
 
+			},
 
+			selectSDetail() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectSDetail", params)
 
+					.then((res) => {
 
+						this.studentMessage = res.data[0][0];
 
+					})
 
+					.catch((err) => {
 
+						this.isLoading = false;
 
+						console.error(err);
 
+					});
 
+			},
 
+			selectMyCourse() {
 
+				let params = {
 
+					uid: this.$store.state.studentInfo.userid,
 
+				};
 
+				this.ajax
 
+					.get(this.$store.state.api + "selectMyCourse", params)
 
+					.then((res) => {
 
+						this.myCourse = res.data[0];
 
+					})
 
+					.catch((err) => {
 
+						console.error(err);
 
+					});
 
+			},
 
+		},
 
+		created() {
 
+			this.selectSDetail();
 
+			this.selectMyCourse();
 
+			document.scrollingElement.scrollTop = 0;
 
+		},
 
+	};
 
 </script>
 
 
 <style scoped>
 
-.body_student {
 
-  margin: 0px auto;
 
-  width: 80%;
 
-  height: 100%;
 
-}
 
-.student_head {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  height: 30%;
 
-}
 
-.wheel > img,
 
-.project > img {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.box_course {
 
-  display: flex;
 
-  padding: 35px 0 25px 60px;
 
-  align-items: center;
 
-}
 
-.wheel {
 
-  width: 210px;
 
-}
 
-.right_box {
 
-  display: flex;
 
-  flex-direction: column;
 
-  margin-left: 30px;
 
-  /* justify-content: space-around; */
 
-}
 
-.right_box_title {
 
-  font-size: 23px;
 
-}
 
-.people {
 
-  display: flex;
 
-  margin: 30px 0 20px 0px;
 
-}
 
-.student_body {
 
-  width: 80%;
 
-  margin: 0 auto;
 
-  background: #fff;
 
-  margin-top: 20px;
 
-  padding: 0 0 20px;
 
-  min-height: 1000px;
 
-}
 
-.project {
 
-  width: 165px;
 
-}
 
-.project_box {
 
-  /* margin: 0 0 10px 30px; */
 
-}
 
-.three_box_inthis {
 
-  display: flex;
 
-  padding: 40px 30px;
 
-  border-bottom: 1px solid #cecece;
 
-  position: relative;
 
-}
 
-.projct_nav {
 
-  margin-left: 15px;
 
-  display: flex;
 
-  flex-direction: column;
 
-  flex-wrap: nowrap;
 
-  justify-content: space-around;
 
-}
 
-.look_score {
 
-  border-radius: 5px;
 
-  text-align: center;
 
-  position: absolute;
 
-  right: 70px;
 
-  background: #0099ff;
 
-  width: 100px;
 
-  height: 35px;
 
-  font-size: 14px;
 
-  color: #fff;
 
-  line-height: 35px;
 
-  top: 35%;
 
-  cursor: pointer;
 
-}
 
+	.body_student {
 
+		margin: 0px auto;
 
+		width: 80%;
 
+		height: 100%;
 
+	}
 
+	.student_head {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		height: 30%;
 
+	}
 
+	.wheel > img,
 
+	.project > img {
 
+		width: 100%;
 
+		height: 100%;
 
+	}
 
+	.box_course {
 
+		display: flex;
 
+		padding: 35px 0 25px 60px;
 
+		align-items: center;
 
+	}
 
+	.wheel {
 
+		width: 210px;
 
+	}
 
+	.right_box {
 
+		display: flex;
 
+		flex-direction: column;
 
+		margin-left: 30px;
 
+		/* justify-content: space-around; */
 
+	}
 
+	.right_box_title {
 
+		font-size: 23px;
 
+	}
 
+	.people {
 
+		display: flex;
 
+		margin: 30px 0 20px 0px;
 
+	}
 
+	.student_body {
 
+		width: 80%;
 
+		margin: 0 auto;
 
+		background: #fff;
 
+		margin-top: 20px;
 
+		padding: 0 0 20px;
 
+		min-height: 1000px;
 
+	}
 
+	.project {
 
+		width: 165px;
 
+	}
 
+	.project_box {
 
+		/* margin: 0 0 10px 30px; */
 
+	}
 
+	.three_box_inthis {
 
+		display: flex;
 
+		padding: 40px 30px;
 
+		border-bottom: 1px solid #cecece;
 
+		position: relative;
 
+	}
 
+	.projct_nav {
 
+		margin-left: 15px;
 
+		display: flex;
 
+		flex-direction: column;
 
+		flex-wrap: nowrap;
 
+		justify-content: space-around;
 
+	}
 
+	.look_score {
 
+		border-radius: 5px;
 
+		text-align: center;
 
+		position: absolute;
 
+		right: 70px;
 
+		background: #0099ff;
 
+		width: 100px;
 
+		height: 35px;
 
+		font-size: 14px;
 
+		color: #fff;
 
+		line-height: 35px;
 
+		top: 35%;
 
+		cursor: pointer;
 
+	}
 
 </style>

+ 2 - 0
src/main.js
查看文件 

@@ -9,11 +9,13 @@ import ajax from './common/axios.config'
 
 import qs from 'qs'
 
 import './common/player.css'
 
 import VideoPlayer from 'vue-video-player'
 
+const echarts = require('echarts');
 
 import 'video.js/dist/video-js.css' //videoJs的样式
 
 import 'vue-video-player/src/custom-theme.css' //vue-video-player的样式
 
 import VueCookies from 'vue-cookies'
 
 
 Vue.use(VideoPlayer).use(VueCookies)
 
+Vue.prototype.$echarts = echarts
 
 Vue.config.productionTip = false
 
 Vue.prototype.$store = store;// 将store实例挂在vue原型上
 
 Vue.prototype.ajax = ajax