1

src/App.vue

@@ -169,7 +169,7 @@
 	body {
 		height: 100%;
 		width: 100%;
-		background: #e6eaf0;
+		background: #f2f2f2;
 	}
 	body {
 		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
@@ -178,7 +178,7 @@
 	#app {
 		height: 100%;
 		width: 100%;
-		background: #e6eaf0;
+		background: #f2f2f2;
 		/* min-width: 1380px; */
 		min-width: 1000px;
 	}

src/components/courseDetail.vue

@@ -1,72 +1,72 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body" style="height: 100%">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel">
-							<img
-								:src="
-									this.courseDetail.cover != null &&
-									this.courseDetail.cover != ''
-										? JSON.parse(this.courseDetail.cover).length > 0
-											? JSON.parse(this.courseDetail.cover)[0].url
-											: mr
-										: mr
-								"
-								alt=""
-							/>
-						</div>
-						<div class="right_box">
-							<div class="right_box_title">
-								{{ courseDetail.title }}
-							</div>
-							<div class="people">
-								<div class="man">
-									<img src="../assets/people.png" alt="" />
-								</div>
-								<div class="person">
-									{{ courseDetail.vcount != null ? courseDetail.vcount : 0 }}人
-								</div>
-							</div>
-							<div class="now_study" @click="dialogVisible = true">
-								立即学习
-							</div>
-						</div>
-					</div>
-					<div class="choose_who">
-						<div
-							class="who_choose"
-							:class="choose == 0 ? 'choose' : ''"
-							@click="choose = 0"
-						>
-							课程简介
-						</div>
-						<div
-							class="who_choose"
-							:class="choose == 1 ? 'choose' : ''"
-							@click="choose = 1"
-						>
-							课程学员
-						</div>
-					</div>
-				</div>
-				<div class="student_body" v-if="choose == 0">
-					<div class="nav">
-						{{
-							courseDetail.brief != null ? courseDetail.brief : "暂无课程简介"
-						}}
-					</div>
-				</div>
-				<div class="student_body_one" v-else>
-					<div class="student" v-if="aStudentName.length > 0">
-						<div v-for="(item, index) in aStudentName" :key="index">
-							{{ item.name }}
-						</div>
-					</div>
-					<div class="student" v-else>暂无课程学员</div>
-				</div>
-				<!-- <div
+  <div class="pb_content">
+    <div class="pb_content_body" style="height: 100%">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel">
+              <img
+                :src="
+                  this.courseDetail.cover != null &&
+                  this.courseDetail.cover != ''
+                    ? JSON.parse(this.courseDetail.cover).length > 0
+                      ? JSON.parse(this.courseDetail.cover)[0].url
+                      : mr
+                    : mr
+                "
+                alt=""
+              />
+            </div>
+            <div class="right_box">
+              <div class="right_box_title">
+                {{ courseDetail.title }}
+              </div>
+              <div class="people">
+                <div class="man">
+                  <img src="../assets/people.png" alt="" />
+                </div>
+                <div class="person">
+                  {{ courseDetail.vcount != null ? courseDetail.vcount : 0 }}人
+                </div>
+              </div>
+              <div class="now_study" @click="dialogVisible = true">
+                立即学习
+              </div>
+            </div>
+          </div>
+          <div class="choose_who">
+            <div
+              class="who_choose"
+              :class="choose == 0 ? 'choose' : ''"
+              @click="choose = 0"
+            >
+              项目详情
+            </div>
+            <div
+              class="who_choose"
+              :class="choose == 1 ? 'choose' : ''"
+              @click="choose = 1"
+            >
+              项目学员
+            </div>
+          </div>
+        </div>
+        <div class="student_body" v-if="choose == 0">
+          <div class="nav">
+            {{
+              courseDetail.brief != null ? courseDetail.brief : "暂无课程简介"
+            }}
+          </div>
+        </div>
+        <div class="student_body_one" v-else>
+          <div class="student" v-if="aStudentName.length > 0">
+            <div v-for="(item, index) in aStudentName" :key="index">
+              {{ item.name }}
+            </div>
+          </div>
+          <div class="student" v-else>暂无课程学员</div>
+        </div>
+        <!-- <div
           style="
             text-align: center;
             padding: 30px 0 20px 0;
@@ -75,299 +75,310 @@
         >
           此处滚动加载..
         </div> -->
-				<el-dialog
-					title="阶段选择"
-					:visible.sync="dialogVisible"
-					:append-to-body="true"
-					width="700px"
-					:before-close="handleClose"
-					class="dialog_change"
-				>
-					<div style="font-size: 20px">请选择阶段</div>
-					<div
-						style="
-							padding: 20px 30px;
-							display: flex;
-							flex-direction: row;
-							flex-wrap: wrap;
-						"
-					>
-						<div
-							class="blue_box"
-							v-for="(item, index) in chapInfo"
-							:key="index"
-							@click="addUserRate(index)"
-						>
-							<div>第{{ index + 1 }}阶段</div>
-							<div>{{ item.dyName }}</div>
-						</div>
-					</div>
-				</el-dialog>
-			</div>
-		</div>
-	</div>
+        <el-dialog
+          title="阶段选择"
+          :visible.sync="dialogVisible"
+          :append-to-body="true"
+          width="700px"
+          :before-close="handleClose"
+          class="dialog_change"
+        >
+          <div style="font-size: 20px">请选择阶段</div>
+          <div
+            style="
+              padding: 20px 30px;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: wrap;
+            "
+          >
+            <div
+              class="blue_box"
+              v-for="(item, index) in chapInfo"
+              :key="index"
+              @click="addUserRate(index)"
+            >
+              <div>第{{ index + 1 }}阶段</div>
+              <div>{{ item.dyName }}</div>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				choose: 0,
-				dialogVisible: false,
-				id: this.$route.query.courseId,
-				userid: this.$route.query.userid,
-				courseDetail: {},
-				aStudentName: [],
-				chapInfo: [],
-				mr: require("../assets/icon/wheel.png"),
-			};
-		},
-		methods: {
-			handleClose(done) {
-				done();
-			},
-			goTo(path) {
-				this.$router.push(path);
-			},
-			addUserRate(i) {
-				var suid = this.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.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 + '&userid=' + this.userid);
-					})
-					.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);
-					});
-			},
-			getCourseDetail() {
-				const loading = this.$loading.service({
-					background: "rgba(255, 255, 255, 0.7)",
-					target: document.querySelector(".student_table"),
-				});
-				let params = {
-					courseId: this.id,
-				};
-				this.ajax
-					.get(this.$store.state.api + "selectCourseDetail", params)
-					.then((res) => {
-						loading.close();
-						// this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
-						this.courseDetail = res.data[0][0];
-						this.aStudentName = res.data[1];
-						this.chapInfo = JSON.parse(this.courseDetail.chapters);
-					})
-					.catch((err) => {
-						loading.close();
-						console.error(err);
-					});
-			},
-			// getSName() {
-			// 	let params = {
-			// 		uid: JSON.stringify(this.courseDetail.course_student),
-			// 	};
-			// 	this.ajax
-			// 		.get(this.$store.state.api + "selectSName", params)
-			// 		.then((res) => {
-			// 			this.aStudentName = res.data[0];
-			// 		})
-			// 		.catch((err) => {
-			// 			console.error(err);
-			// 		});
-			// },
-		},
-		created() {
-			this.getCourseDetail();
-			document.scrollingElement.scrollTop = 0;
-			// this.getSName();
-		},
-	};
+export default {
+  data() {
+    return {
+      choose: 0,
+      dialogVisible: false,
+      id: this.$route.query.courseId,
+      userid: this.$route.query.userid,
+      courseDetail: {},
+      aStudentName: [],
+      chapInfo: [],
+      mr: require("../assets/icon/wheel.png"),
+    };
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    addUserRate(i) {
+      var suid = this.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.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 +
+              "&userid=" +
+              this.userid
+          );
+        })
+        .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);
+        });
+    },
+    getCourseDetail() {
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255, 0.7)",
+        target: document.querySelector(".student_table"),
+      });
+      let params = {
+        courseId: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectCourseDetail", params)
+        .then((res) => {
+          loading.close();
+          // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.courseDetail = res.data[0][0];
+          this.aStudentName = res.data[1];
+          this.chapInfo = JSON.parse(this.courseDetail.chapters);
+        })
+        .catch((err) => {
+          loading.close();
+          console.error(err);
+        });
+    },
+    // getSName() {
+    // 	let params = {
+    // 		uid: JSON.stringify(this.courseDetail.course_student),
+    // 	};
+    // 	this.ajax
+    // 		.get(this.$store.state.api + "selectSName", params)
+    // 		.then((res) => {
+    // 			this.aStudentName = res.data[0];
+    // 		})
+    // 		.catch((err) => {
+    // 			console.error(err);
+    // 		});
+    // },
+  },
+  created() {
+    this.getCourseDetail();
+    document.scrollingElement.scrollTop = 0;
+    // this.getSName();
+  },
+};
 </script>
 
 <style scoped>
-	.body_student {
-		margin: 0px auto;
-		width: 80%;
-		height: 100%;
-	}
-	.student_head {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		height: 30%;
-	}
-	.wheel {
-		width: 210px;
-	}
-	.man {
-		width: 16px;
-		height: 16px;
-	}
-	.wheel > img,
-	.man > img {
-		width: 100%;
-		height: 100%;
-	}
-	.box_course {
-		display: flex;
-		padding: 35px 0 0 60px;
-	}
-	.right_box {
-		display: flex;
-		flex-direction: column;
-		margin-left: 30px;
-	}
-	.right_box_title {
-		font-size: 23px;
-	}
-	.people {
-		display: flex;
-		margin-top: 20px;
-	}
-	.person {
-		margin-left: 10px;
-		line-height: 18px;
-	}
-	.now_study {
-		width: 150px;
-		height: 35px;
-		color: #fff;
-		background: #0e71e6;
-		text-align: center;
-		line-height: 35px;
-		border-radius: 5px;
-		font-size: 13px;
-		cursor: pointer;
-		margin-top: 60px;
-	}
-	.choose_who {
-		display: flex;
-		margin: 30px 0 0 60px;
-	}
-	.who_choose {
-		height: 28px;
-		cursor: pointer;
-	}
-	.choose_who > div:nth-child(2) {
-		margin-left: 35px;
-	}
-	.choose {
-		border-bottom: 5px solid #d7d7d7;
-	}
-	.student_body {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		padding: 0 0 20px;
-		min-height: 1000px;
-	}
-	.nav {
-		margin: 0 auto;
-		width: 80%;
-		padding-top: 20px;
-		text-indent: 25px;
-	}
-	.pic {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		height: 100%;
-		justify-content: space-evenly;
-	}
-	.Img {
-		/*width: 30%; */
-		width: 300px;
-		margin: 20px 50px;
-		margin: 20px 10px;
-		border: 1px solid #dbdbdb;
-		border-radius: 5px;
-		overflow: hidden;
-	}
-	.Img > img {
-		width: 100%;
-		height: 100%;
-	}
-	.student_body_one {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		height: 100%;
-		margin-top: 20px;
-		min-height: 1000px;
-	}
-	.student {
-		width: 85%;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: flex-start;
-		margin: 0 auto;
-		padding: 20px 0;
-	}
-	.student > div {
-		width: 12%;
-		height: 35px;
-		background: #e3759a;
-		text-align: center;
-		border: 1px solid #e3759a;
-		border-radius: 5px;
-		color: #fff;
-		line-height: 35px;
-		margin: 10px;
-	}
-	.dialog_change >>> .el-dialog {
-		border-radius: 5px;
-	}
-	.dialog_change >>> .el-dialog__header {
-		background: #537bb8;
-	}
-	.dialog_change >>> .el-dialog__title {
-		color: #fff;
-		line-height: 5px;
-	}
-	.dialog_change >>> .el-dialog__body {
-		background: #f5f5f5;
-	}
-	.blue_box {
-		width: 30%;
-		height: 100px;
-		text-align: center;
-		color: #fff;
-		background-image: linear-gradient(to right, #35bafd, #0ba2f4);
-		border-radius: 7px;
-		margin: 10px;
-		cursor: pointer;
-	}
-	.blue_box > div:nth-child(1) {
-		font-size: 17px;
-		line-height: 65px;
-	}
-	.blue_box > div:nth-child(2) {
-		line-height: 0px;
-	}
+.body_student {
+  margin: 10px auto;
+  width: 98%;
+  height: 100%;
+}
+.student_head {
+  width: 100%;
+  background: #fff;
+  height: 30%;
+}
+.wheel {
+  width: 210px;
+}
+.man {
+  width: 16px;
+  height: 16px;
+}
+.wheel > img,
+.man > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  padding: 35px 0 0 60px;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  align-items: flex-start;
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+  margin-top: 20px;
+}
+.person {
+  margin-left: 10px;
+  line-height: 18px;
+}
+.now_study {
+  width: 150px;
+  height: 35px;
+  color: #fff;
+  background: #41cda6;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 5px;
+  font-size: 13px;
+  cursor: pointer;
+  margin-top: 30px;
+}
+.choose_who {
+  display: flex;
+  margin: 30px 0 0 60px;
+}
+.who_choose {
+  height: 28px;
+  cursor: pointer;
+}
+.choose_who > div:nth-child(2) {
+  margin-left: 35px;
+}
+.choose {
+  border-bottom: 5px solid #3ec6a0;
+  color: #57cdac;
+}
+.student_body {
+  width: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+  min-height: 1000px;
+}
+.nav {
+  margin: 0 auto;
+  width: 80%;
+  padding-top: 20px;
+  text-indent: 25px;
+}
+.pic {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 100%;
+  justify-content: space-evenly;
+}
+.Img {
+  /*width: 30%; */
+  width: 300px;
+  margin: 20px 50px;
+  margin: 20px 10px;
+  border: 1px solid #dbdbdb;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.Img > img {
+  width: 100%;
+  height: 100%;
+}
+.student_body_one {
+  width: 100%;
+  margin: 0 auto;
+  background: #fff;
+  height: 100%;
+  margin-top: 20px;
+  min-height: 1000px;
+}
+.student {
+  width: 85%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+.student > div {
+  width: 12%;
+  height: 35px;
+  background: #e3759a;
+  text-align: center;
+  border: 1px solid #e3759a;
+  border-radius: 5px;
+  color: #fff;
+  line-height: 35px;
+  margin: 10px;
+}
+.dialog_change >>> .el-dialog {
+  border-radius: 5px;
+}
+.dialog_change >>> .el-dialog__header {
+  background: #537bb8;
+}
+.dialog_change >>> .el-dialog__title {
+  color: #fff;
+  line-height: 5px;
+}
+.dialog_change >>> .el-dialog__body {
+  background: #f5f5f5;
+}
+.blue_box {
+  width: 30%;
+  height: 100px;
+  text-align: center;
+  color: #fff;
+  background-image: linear-gradient(to right, #30c499, #75ceba);
+  border-radius: 7px;
+  margin: 10px;
+  cursor: pointer;
+}
+.blue_box > div:nth-child(1) {
+  font-size: 17px;
+  line-height: 65px;
+}
+.blue_box > div:nth-child(2) {
+  line-height: 0px;
+}
 </style>

src/components/index.vue

@@ -205,17 +205,13 @@
 </script>
 
 <style scoped>
-	.student_head {
-		width: 80%;
-		margin: 0 auto;
-	}
 	.student_head .imgS {
 		width: 100%;
 		height: 100%;
 		cursor: pointer;
 	}
 	.student_body {
-		width: 80%;
+		width: 100%;
 		height: 100%;
 		margin: 0 auto;
 		background: #fff;
@@ -320,10 +316,15 @@
 		height: 100%;
 	}
 	.body_student {
-		margin: 0px auto;
-		width: 80%;
-		height: 100%;
-	}
+  margin: 10px auto;
+  width: 98%;
+  height: 100%;
+}
+.student_head {
+  width: 100%;
+  background: #fff;
+  height: 30%;
+}
 
 	.textOverflow {
 		padding: 0 5px 0 0px;

src/components/mine.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
+  <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
@@ -34,138 +34,279 @@
 							</div>
 						</div>
 					</div>
-				</div>
-				<div class="student_body">
-					<div class="box_three_pic">
-						<div class="pic_box" @click="goTo('/project?userid=' + userid)">
-							<div class="mine_pic">
-								<img src="../assets/book.png" alt="" />
-							</div>
-							<div>我的课程</div>
-						</div>
-						<div class="pic_box" @click="goTo('/works?userid=' + userid)">
-							<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?userid=' + userid)">
-							<div class="mine_pic">
-								<img src="../assets/notice.png" alt="" />
-							</div>
-							<div>消息通知</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+				</div> -->
+        <div class="student_body">
+          <div class="tx">
+            <img
+              :src="ruleForm.headportrait != null ? ruleForm.headportrait : tx"
+              alt=""
+            />
+          </div>
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="100px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="姓名：" prop="name">
+              <el-input
+                v-model="ruleForm.name"
+                style="width: 250px"
+                placeholder="请输入名字"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="性别：">
+              <el-radio-group v-model="ruleForm.sex">
+                <el-radio label="男"></el-radio>
+                <el-radio label="女"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电子邮箱：" prop="mail">
+              <el-input
+                v-model="ruleForm.mail"
+                style="width: 300px"
+                placeholder="请输入电子邮箱"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="手机号码：" prop="phonenumber">
+              <el-input
+                disabled
+                v-model="ruleForm.phonenumber"
+                style="width: 300px"
+                placeholder="请输入手机号码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="学校：" prop="sname">
+              <el-input
+                disabled
+                v-model="ruleForm.sname"
+                style="width: 300px"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="班级：" prop="cname">
+              <el-input
+                disabled
+                v-model="ruleForm.cname"
+                style="width: 300px"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="个人简介：" prop="intro">
+              <el-input
+                v-model="ruleForm.intro"
+                type="textarea"
+                :rows="5"
+                resize="none"
+                placeholder="想说点什么..."
+                style="width: 300px"
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                style="
+                  background: #41cda6;
+                  border-color: #41cda6;
+                  width: 200px;
+                  height: 20px;
+                  line-height: 0px;
+                "
+                @click="submitForm('ruleForm')"
+                >修改</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				studentMessage: [],
-				tx: require("../assets/tx.png"),
-				userid: this.$route.query.userid,
-			};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			selectSDetail() {
-				let params = {
-					uid: this.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();
-		},
-	};
+export default {
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value == "") {
+        return;
+      }
+      var reg =
+        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
+      if (!reg.test(value)) {
+        callback(new Error("请输入正确的邮箱"));
+      } else {
+        callback();
+      }
+    };
+    var validatePass1 = (rule, value, callback) => {
+      var reg = /^1\d{10}$/;
+      if (!reg.test(value)) {
+        callback(new Error("请输入正确的手机号码"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      studentMessage: [],
+      tx: require("../assets/tx.png"),
+      userid: this.$route.query.userid,
+      ruleForm: {
+        name: "",
+        sex: "男",
+        intro: "",
+        mail: "",
+        phonenumber: "",
+        sname: "",
+        headportrait: "",
+        cname: "",
+      },
+      rules: {
+        pass: [{ validator: validatePass, trigger: "blur" }],
+        name: [{ required: true, message: "请输入你的名字", trigger: "blur" }],
+        mail: [
+          {
+            validator: validatePass,
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          { required: true, message: "请输入你的手机号码", trigger: "blur" },
+
+          {
+            validator: validatePass1,
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    selectSDetail() {
+      let params = {
+        uid: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectSDetail", params)
+        .then((res) => {
+          res.data[0][0].sex = res.data[0][0].sex ? "女" : "男";
+          this.ruleForm = res.data[0][0];
+          console.log(this.ruleForm);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    submitForm(formName) {
+      this.$refs[formName];
+      let params = [
+        {
+          uid: this.userid,
+          sname: this.ruleForm.name,
+          ph: this.ruleForm.phonenumber,
+          sex: this.ruleForm.sex == "男" ? "0" : "1",
+          email: this.ruleForm.mail == null ? "" : this.ruleForm.mail,
+          js: this.ruleForm.intro == null ? "" : this.ruleForm.intro,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updateUser", params)
+        .then((res) => {
+          this.$message({
+            message: "修改成功",
+            type: "success",
+          });
+          this.selectSDetail();
+        })
+        .catch((err) => {
+          this.$message.error("修改失败");
+          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: 98%;
+  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: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  min-height: 1000px;
+  display: flex;
+  padding: 5% 0 0 0;
+  justify-content: center;
+}
+.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;
+}
+.tx {
+  width: 200px;
+  height: 200px;
+}
+.tx > img {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/notice.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
+  <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
@@ -34,32 +34,32 @@
 							</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?userid=' + userid }"
-								>个人中心</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 + '&userid=' + userid)"
-								>
-									{{ item.title }}
-								</div>
-								<div class="notice_time">{{ item.creatTime }}</div>
-							</div>
-							<!-- <div class="notice_message">
+				</div> -->
+        <div class="student_body">
+          <div class="noticeTitle">通知内容</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 +
+                        '&userid=' +
+                        userid
+                    )
+                  "
+                >
+                  {{ item.title }}
+                </div>
+                <div class="notice_time">{{ item.creatTime }}</div>
+              </div>
+              <!-- <div class="notice_message">
 								<div class="notice_title" @click="goTo('/noticeDetail')">
 									关于'一校一案'劳动有关通知
 								</div>
@@ -77,125 +77,137 @@
 								</div>
 								<div class="notice_time">2021-09-08 10:01</div>
 							</div> -->
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				studentMessage: [],
-				newMessage: [],
-				tx: require("../assets/tx.png"),
-				page: 1,
-				userid: this.$route.query.userid,
-			};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			selectSDetail() {
-				let params = {
-					uid: this.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.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;
-		},
-	};
+export default {
+  data() {
+    return {
+      studentMessage: [],
+      newMessage: [],
+      tx: require("../assets/tx.png"),
+      page: 1,
+      userid: this.$route.query.userid,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    selectSDetail() {
+      let params = {
+        uid: this.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.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: 20px auto;
+  width: 98%;
+  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: 100%;
+  background: #fff;
+  min-height: 1000px;
+  position: relative;
+}
+.project {
+  width: 165px;
+}
+.project_box {
+  margin: 0 0 10px 30px;
+  padding-top: 40px;
+}
+.notice_message {
+  padding: 30px 0;
+  border-bottom: 1px solid #ccc;
+}
+.notice_time {
+  font-size: 14px;
+  margin-top: 15px;
+}
+.notice_title {
+  cursor: pointer;
+}
+
+.noticeTitle {
+  background: #eeeeee;
+  width: 95%;
+  position: absolute;
+  top: 15px;
+  left: 20px;
+  font-weight: 600;
+  height: 35px;
+  line-height: 35px;
+  padding-left: 10px;
+}
 </style>

src/components/noticeDetail.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
+  <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">
@@ -22,156 +22,162 @@
 							</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?userid=' + userid }"
-								>个人中心</el-breadcrumb-item
-							>
-							<el-breadcrumb-item :to="{ path: '/notice?userid=' + userid }"
-								>消息通知</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>
+				</div> -->
+        <div class="student_body">
+          <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 class="returnPage" @click="goTo('/notice?userid=' + userid)">
+            返回
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				studentMessage: [],
-				newDetailMessage: [],
-				tx: require("../assets/tx.png"),
-				newsid: this.$route.query.newsid,
-				userid: this.$route.query.userid,
-			};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			selectSDetail() {
-				let params = {
-					uid: this.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;
-		},
-	};
+export default {
+  data() {
+    return {
+      studentMessage: [],
+      newDetailMessage: [],
+      tx: require("../assets/tx.png"),
+      newsid: this.$route.query.newsid,
+      userid: this.$route.query.userid,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    selectSDetail() {
+      let params = {
+        uid: this.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: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  min-height: 800px;
+  position: relative;
+}
+.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;
+}
+
+.returnPage {
+  position: absolute;
+  bottom: 30px;
+  right: 10%;
+  background: #41cda6;
+  width: 100px;
+  color: #fff;
+  height: 25px;
+  border-radius: 3px;
+  text-align: center;
+  line-height: 25px;
+  font-size: 13px;
+  cursor: pointer;
+}
 </style>

src/components/project.vue

@@ -1,209 +1,235 @@
 <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="
-									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?userid=' + userid }"
-								>个人中心</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 + '&userid=' + userid)"
-							>
-								<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 + '&userid=' + userid)"
-								>
-									{{ 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>
+  <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>{{ studentMessage.cname }}</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span><span>{{ studentMessage.sname }}</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span>{{ studentMessage.phonenumber }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div class="myProject">我的项目</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 +
+                      '&userid=' +
+                      userid
+                  )
+                "
+              >
+                <!-- <img
+                  :src="
+                    item.cover != null && item.cover != ''
+                      ? JSON.parse(item.cover)[0].url
+                      : mpj
+                  "
+                  alt=""
+                /> -->
+				<img
+                  :src="
+                    mpj
+                  "
+                  alt=""
+                />
+              </div>
+              <div class="projct_nav">
+                <div
+                  style="font-size: 18px"
+                  @click="
+                    goTo(
+                      '/courseDetail?courseId=' +
+                        item.courseid +
+                        '&userid=' +
+                        userid
+                    )
+                  "
+                >
+                  {{ item.title }}
+                </div>
+				<div style="color: #2FDB88">
+                  共{{ JSON.parse(item.chapters).length }}讲
+                </div>
+                <div>
+                  <span style="color: #999">{{ item.createTime }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				myCourse: [],
-				studentMessage: [],
-				tx: require("../assets/tx.png"),
-				mpj: require("../assets/project.png"),
-				userid: this.$route.query.userid,
-			};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			selectSDetail() {
-				let params = {
-					uid: this.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.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;
-		},
-	};
+export default {
+  data() {
+    return {
+      myCourse: [],
+      studentMessage: [],
+      tx: require("../assets/tx.png"),
+      mpj: require("../assets/project.png"),
+      userid: this.$route.query.userid,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    selectSDetail() {
+      let params = {
+        uid: this.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.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;
-		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;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 98%;
+  height: 100%;
+}
+.student_head {
+  width: 100%;
+  margin: 0 auto;
+  height: 30%;
+  background-image: linear-gradient(90deg, #30c499, #75ceba);
+  color: #fff;
+}
+.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: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+  min-height: 1000px;
+}
+.project {
+  width: 100%;
+}
+.project_box {
+      display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.three_box_inthis {
+  display: flex;
+    width: 21%;
+    flex-direction: column;
+    height: 330px;
+    align-items: flex-start;
+    border: 1px solid #ccc;
+    margin: 15px;
+}
+.projct_nav {
+  margin-left: 5px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+}
+
+.projct_nav > div:nth-child(1) {
+  cursor: pointer;
+}
+
+.projct_nav > div{
+	margin-bottom: 5px;
+}
+
+.myProject {
+  padding: 20px 20px 10px 0;
+  border-bottom: 1px solid #ccc;
+  margin-left: 20px;
+  width: 95%;
+}
 </style>

src/components/score.vue

@@ -1,542 +1,558 @@
 <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">
-							<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?userid=' + userid }"
-								>个人中心</el-breadcrumb-item
-							>
-							<el-breadcrumb-item :to="{ path: '/works?userid=' + userid }"
-								>我的作品</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>
+  <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 class="myProject">我的评分</div>
+          <div
+            class="project_box"
+            style="display: flex"
+            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 style="display: flex; align-items: center; width: 20%">
+              <span style="margin: 20px 10px 0 0">综合评分</span>
+              <el-rate
+                v-model="countPoint"
+                disabled
+                show-score
+                text-color="#ff9900"
+                score-template="{value}"
+                class="stars"
+              >
+              </el-rate>
+            </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 0px;
+              border-bottom: 1px solid #ccc;
+              margin: 0 0 15px 35px;
+              width: 95%;
+            "
+          >
+            评价
+          </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 {
-				chapInfo: [],
-				res: "",
-				courseId: this.$route.query.courseId,
-				userid: this.$route.query.userid,
-				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.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.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;
+export default {
+  data() {
+    return {
+      chapInfo: [],
+      res: "",
+      courseId: this.$route.query.courseId,
+      userid: this.$route.query.userid,
+      stage: this.$route.query.stage,
+      myCourse: [],
+      countPoint: 0,
+      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.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.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.countPoint = Math.round(
+                  (d.ca + d.sia + d.eta + d.pia + d.lra) / 5
+                );
+                // this.rateList = d;
+                // this.rateList = value.rate;
+                value.cover = c.cover;
+                value.upVedio = c.upVedio;
+                break;
+              }
             }
-            if(value.name == "科学探究能力"){
-              value.value = this.rate.sia;
+          });
+          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>";
             }
-            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;
-						},
-					};
+            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();
-		},
-	};
+        // 初始化雷达图
+        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: 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;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 98%;
+  height: 100%;
+}
+.student_head {
+  width: 100%;
+  margin: 0 auto;
+  background: #fff;
+}
+.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: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+}
+.project {
+  width: 165px;
+}
+.project_box {
+  margin: 80px 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;
+}
+.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: 80%;
+  text-align: center;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mywd_rate_leida img {
+  width: inherit;
+}
+.myProject {
+  padding: 20px 20px 10px 0;
+  border-bottom: 1px solid #ccc;
+  margin-left: 20px;
+  width: 95%;
+  color: #61d3b3;
+}
+
+.stars >>> .el-rate__icon {
+  font-size: 40px !important;
+}
+.stars >>> .el-rate__text {
+  font-size: 25px !important;
+}
 </style>

src/components/study.vue

@@ -575,14 +575,13 @@
 <style scoped>
 	.body_student {
 		margin: 0px auto;
-		width: 80%;
+		width: 98%;
 		height: 100%;
 	}
 	.student_head {
-		width: 80%;
+		width: 100%;
 		margin: 0 auto;
 		background: #fff;
-		height: 30%;
 	}
 	.wheel > img,
 	.project > img,
@@ -611,7 +610,6 @@
 	.box_course {
 		display: flex;
 		flex-direction: column;
-		height: 740px;
 	}
 	.wheel {
 		width: 100%;
@@ -629,7 +627,7 @@
 		display: flex;
 	}
 	.student_body {
-		width: 80%;
+		width: 100%;
 		margin: 0 auto;
 		background: #fff;
 		margin-top: 20px;
@@ -658,13 +656,13 @@
 		box-sizing: border-box;
 	}
 	.study_top .checked {
-		border-bottom: 4px solid #ccc;
+		border-bottom: 4px solid #3FC6A0;
 		padding-bottom: 5px;
-		color: rgb(26, 26, 26);
+		color: #3FC6A0;
 	}
 	.study_top .btn {
 		margin: 25px;
-		background: #0e71e6;
+		background: #41CDA6;
 		color: #fff;
 		width: 120px;
 		text-align: center;
@@ -732,7 +730,7 @@
 		height: 35px;
 		line-height: 35px;
 		color: #fff;
-		background: rgb(14, 114, 230);
+		background: #41CDA6;
 		text-align: center;
 		overflow: hidden;
 		white-space: nowrap;

src/components/works.vue

@@ -1,219 +1,230 @@
 <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="
-									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?userid=' + userid }"
-								>个人中心</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 + '&userid=' + userid + '&stage=' + item.stage) "
-							>
-								查看评分
-							</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>{{ studentMessage.cname }}</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span><span>{{ studentMessage.sname }}</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span>{{ studentMessage.phonenumber }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <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=""
+                /> -->
+				<img
+                  :src="
+                    mpj
+                  "
+                  alt=""
+                />
+              </div>
+              <div class="projct_nav">
+                <div style="font-size: 18px">
+                  {{ item.title }} -
+                  {{ JSON.parse(item.chapters)[item.stage].dyName }}
+                </div>
+                <div>
+                  <span style="color: #999">{{ item.createTime }}</span>
+                </div>
+                <div style="color: #999">
+                  <span>提交人：</span><span>{{ studentMessage.name }}</span>
+                </div>
+              </div>
+              <div
+                class="look_score"
+                @click="
+                  goTo(
+                    '/score?courseId=' +
+                      item.courseId +
+                      '&userid=' +
+                      userid +
+                      '&stage=' +
+                      item.stage
+                  )
+                "
+              >
+                查看评分
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				myCourse: [],
-				studentMessage: [],
-				tx: require("../assets/tx.png"),
-				mpj: require("../assets/project.png"),
-				userid: this.$route.query.userid,
-			};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			selectSDetail() {
-				let params = {
-					uid: this.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.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;
-		},
-	};
+export default {
+  data() {
+    return {
+      myCourse: [],
+      studentMessage: [],
+      tx: require("../assets/tx.png"),
+      mpj: require("../assets/project.png"),
+      userid: this.$route.query.userid,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    selectSDetail() {
+      let params = {
+        uid: this.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.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: 98%;
+  height: 100%;
+}
+.student_head {
+  width: 100%;
+  margin: 0 auto;
+  height: 30%;
+  background-image: linear-gradient(90deg, #30c499, #75ceba);
+  color: #fff;
+}
+.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: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+  min-height: 1000px;
+}
+.project {
+  width: 100%;
+}
+.project_box {
+      display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.three_box_inthis {
+  display: flex;
+    width: 21%;
+    flex-direction: column;
+    height: 360px;
+    align-items: flex-start;
+    border: 1px solid #ccc;
+    margin: 15px;
+}
+.projct_nav {
+  margin-left: 5px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+}
+.projct_nav>div{
+	margin-bottom: 5px;
+}
+.look_score {
+      border-radius: 0px 0px 5px 5px;
+    text-align: center;
+    background: #41CDA6;
+    width: 100%;
+    height: 35px;
+    font-size: 14px;
+    color: #fff;
+    line-height: 35px;
+    cursor: pointer;
+    margin-top: 10px;
+}
 </style>