student

src/App.vue

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

src/components/courseDetail.vue

@@ -1,359 +1,317 @@
 <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="../assets/wheel2.png" alt="" /></div>
-						<div class="right_box">
-							<div class="right_box_title">认识木头制作|颗粒板和胶合板制作</div>
-							<div class="people">
-								<div class="man">
-									<img src="../assets/people.png" alt="" />
-								</div>
-								<div class="person">56人</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">
-						木工最早起源于鲁班，在以前被称之为"木匠"，随着科技的发达，这类工作逐渐成为广大市民的爱好，本专题为大家整理的就是各种木工的就是各种木，如果木头够长，加上几块木板安装在家的一角，仿佛把大树搬回了家做成了书架。
-						木工最早起源于鲁班，在以前被称之为"木匠"，随着科技的发达，这类工作逐渐成为广大市民的爱好，本专题为大家整理的就是各种木工的就是各种木，如果木头够长，加上几块木板安装在家的一角，仿佛把大树搬回了家做成了书架。
-					</div>
-					<div class="pic">
-						<div class="Img"><img src="../assets/game.png" alt="" /></div>
-						<div class="Img"><img src="../assets/piano.png" alt="" /></div>
-						<div class="Img"><img src="../assets/moonLight.png" alt="" /></div>
-						<div class="Img"><img src="../assets/music.png" alt="" /></div>
-					</div>
-				</div>
-				<div class="student_body_one" v-else>
-					<div class="student">
-						<div>西英凡</div>
-						<div>侣浩洋</div>
-						<div>李浩宇</div>
-						<div>赵雨辰</div>
-						<div>董佳杰</div>
-						<div>张馨予</div>
-						<div>闫艺馨</div>
-						<div>谭宏说</div>
-						<div>西英凡</div>
-						<div>侣浩洋</div>
-						<div>李浩宇</div>
-						<div>赵雨辰</div>
-						<div>董佳杰</div>
-						<div>张馨予</div>
-						<div>闫艺馨</div>
-						<div>谭宏说</div>
-						<div>西英凡</div>
-						<div>侣浩洋</div>
-						<div>李浩宇</div>
-						<div>赵雨辰</div>
-						<div>董佳杰</div>
-						<div>张馨予</div>
-						<div>闫艺馨</div>
-						<div>谭宏说</div>
-						<div>西英凡</div>
-						<div>侣浩洋</div>
-						<div>李浩宇</div>
-						<div>赵雨辰</div>
-						<div>董佳杰</div>
-						<div>张馨予</div>
-						<div>闫艺馨</div>
-						<div>谭宏说</div>
-						<div>西英凡</div>
-						<div>侣浩洋</div>
-						<div>李浩宇</div>
-						<div>赵雨辰</div>
-						<div>董佳杰</div>
-						<div>张馨予</div>
-						<div>闫艺馨</div>
-						<div>谭宏说</div>
-						<div>西英凡</div>
-						<div>侣浩洋</div>
-					</div>
-				</div>
-				<div
-					style="
-						text-align: center;
-						padding: 30px 0 20px 0;
-						box-sizing: border-box;
-					"
-				>
-					此处滚动加载..
-				</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">
-						<div class="blue_box" @click="goTo('/study')">
-							<div>第一阶段</div>
-							<div>木头的基本认识与实操</div>
-						</div>
-						<div class="blue_box" @click="goTo('/study')">
-							<div>第二阶段</div>
-							<div>木头的组合知识</div>
-						</div>
-						<div class="blue_box" @click="goTo('/study')">
-							<div>第三阶段</div>
-							<div>简介各种类型的保险箱</div>
-						</div>
-					</div>
-				</el-dialog>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body" style="height: 100%">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/wheel2.png" alt="" /></div>
+            <div class="right_box">
+              <div class="right_box_title">认识木头制作|颗粒板和胶合板制作</div>
+              <div class="people">
+                <div class="man">
+                  <img src="../assets/people.png" alt="" />
+                </div>
+                <div class="person">56人</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">
+            木工最早起源于鲁班，在以前被称之为"木匠"，随着科技的发达，这类工作逐渐成为广大市民的爱好，本专题为大家整理的就是各种木工的就是各种木，如果木头够长，加上几块木板安装在家的一角，仿佛把大树搬回了家做成了书架。
+            木工最早起源于鲁班，在以前被称之为"木匠"，随着科技的发达，这类工作逐渐成为广大市民的爱好，本专题为大家整理的就是各种木工的就是各种木，如果木头够长，加上几块木板安装在家的一角，仿佛把大树搬回了家做成了书架。
+          </div>
+          <div class="pic">
+            <div class="Img"><img src="../assets/game.png" alt="" /></div>
+            <div class="Img"><img src="../assets/piano.png" alt="" /></div>
+            <div class="Img"><img src="../assets/moonLight.png" alt="" /></div>
+            <div class="Img"><img src="../assets/music.png" alt="" /></div>
+          </div>
+        </div>
+        <div class="student_body_one" v-else>
+          <div class="student">
+            <div>西英凡</div>
+            <div>侣浩洋</div>
+            <div>李浩宇</div>
+            <div>赵雨辰</div>
+            <div>董佳杰</div>
+            <div>张馨予</div>
+            <div>闫艺馨</div>
+            <div>谭宏说</div>
+            <div>西英凡</div>
+            <div>侣浩洋</div>
+            <div>李浩宇</div>
+            <div>赵雨辰</div>
+            <div>董佳杰</div>
+            <div>张馨予</div>
+            <div>闫艺馨</div>
+            <div>谭宏说</div>
+            <div>西英凡</div>
+            <div>侣浩洋</div>
+            <div>李浩宇</div>
+            <div>赵雨辰</div>
+            <div>董佳杰</div>
+            <div>张馨予</div>
+            <div>闫艺馨</div>
+            <div>谭宏说</div>
+            <div>西英凡</div>
+            <div>侣浩洋</div>
+            <div>李浩宇</div>
+            <div>赵雨辰</div>
+            <div>董佳杰</div>
+            <div>张馨予</div>
+            <div>闫艺馨</div>
+            <div>谭宏说</div>
+            <div>西英凡</div>
+            <div>侣浩洋</div>
+            <div>李浩宇</div>
+            <div>赵雨辰</div>
+            <div>董佳杰</div>
+            <div>张馨予</div>
+            <div>闫艺馨</div>
+            <div>谭宏说</div>
+            <div>西英凡</div>
+            <div>侣浩洋</div>
+          </div>
+        </div>
+        <!-- <div
+          style="
+            text-align: center;
+            padding: 30px 0 20px 0;
+            box-sizing: border-box;
+          "
+        >
+          此处滚动加载..
+        </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">
+            <div class="blue_box" @click="goTo('/study')">
+              <div>第一阶段</div>
+              <div>木头的基本认识与实操</div>
+            </div>
+            <div class="blue_box" @click="goTo('/study')">
+              <div>第二阶段</div>
+              <div>木头的组合知识</div>
+            </div>
+            <div class="blue_box" @click="goTo('/study')">
+              <div>第三阶段</div>
+              <div>简介各种类型的保险箱</div>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				choose: 0,
-				dialogVisible: false,
-			};
-		},
-		methods: {
-			handleClose(done) {
-				done();
-			},
-			goTo(path) {
-				this.$router.push(path);
-			},
-		},
-		created() {},
-	};
+export default {
+  data() {
+    return {
+      choose: 0,
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+  created() {},
+};
 </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;
-	}
-	.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-around;
-	}
-	.Img {
-		width: 35%;
-		margin: 20px 0;
-		border: 1px solid #999;
-	}
-	.Img > img {
-		width: 100%;
-		height: 100%;
-	}
-	.student_body_one {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		height: 100%;
-		margin-top: 20px;
-	}
-	.student {
-		width: 85%;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: space-around;
-		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;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
-	.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: 33%;
-		height: 100px;
-		text-align: center;
-		color: #fff;
-		background-image: linear-gradient(to right, #35bafd, #0ba2f4);
-		border-radius: 7px;
-		margin: 0 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: 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: space-around;
+  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: 33%;
+  height: 100px;
+  text-align: center;
+  color: #fff;
+  background-image: linear-gradient(to right, #35bafd, #0ba2f4);
+  border-radius: 7px;
+  margin: 0 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

@@ -1,338 +1,337 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<img src="../assets/banner.png" alt="" />
-				</div>
-				<div class="student_body">
-					<div class="top">
-						<div class="box_fk"></div>
-						推荐课程
-					</div>
-					<div class="main_box">
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/robot.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/piano.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel">
-								<img src="../assets/moonLight.png" alt="" />
-							</div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel">
-								<img src="../assets/music.png" alt="" />
-							</div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel">
-								<img src="../assets/moonLight.png" alt="" />
-							</div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel">
-								<img src="../assets/game.png" alt="" />
-							</div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/piano.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/music.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-						<div class="box_course">
-							<div class="wheel"><img src="../assets/robot.png" alt="" /></div>
-							<div class="middle_white">
-								<div>认识木头制作|颗粒板和胶合板制作</div>
-								<div class="people">
-									<div class="man">
-										<img src="../assets/people.png" alt="" />
-									</div>
-									<div>56人学习</div>
-								</div>
-							</div>
-							<div class="now_study" @click="goTo('/courseDetail')">立即学习</div>
-						</div>
-					</div>
-					<div
-						style="
-							text-align: center;
-							padding: 30px 0 20px 0;
-							box-sizing: border-box;
-						"
-					>
-						此处滚动加载..
-					</div>
-				</div>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <img src="../assets/banner.png" alt="" />
+        </div>
+        <div class="student_body">
+          <div class="top">
+            <div class="box_fk"></div>
+            推荐课程
+          </div>
+          <div class="main_box">
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/robot.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/piano.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel">
+                <img src="../assets/moonLight.png" alt="" />
+              </div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel">
+                <img src="../assets/music.png" alt="" />
+              </div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel">
+                <img src="../assets/moonLight.png" alt="" />
+              </div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel">
+                <img src="../assets/game.png" alt="" />
+              </div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/wheel.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/piano.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/music.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+            <div class="box_course">
+              <div class="wheel"><img src="../assets/robot.png" alt="" /></div>
+              <div class="middle_white">
+                <div class="textOverflow">认识木头制作|颗粒板和胶合板制作</div>
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>56人学习</div>
+                </div>
+              </div>
+              <div class="now_study" @click="goTo('/courseDetail')">
+                立即学习
+              </div>
+            </div>
+          </div>
+          <div
+            style="
+              text-align: center;
+              padding: 30px 0 20px 0;
+              box-sizing: border-box;
+            "
+          >
+            此处滚动加载..
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {};
-		},
-		methods: {
-            goTo(path) {
-				this.$router.push(path);
-			},
-        },
-		created() {},
-	};
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+  created() {},
+};
 </script>
 
 <style scoped>
-	.student_head {
-		width: 80%;
-		margin: 0 auto;
-	}
-	.student_head > img {
-		width: 100%;
-		height: 100%;
-	}
-	.student_body {
-		width: 80%;
-		height: 100%;
-		margin: 0 auto;
-		background: #fff;
-	}
-	.top {
-		padding: 20px 30px;
-		box-sizing: border-box;
-		display: flex;
-	}
-	.box_fk {
-		width: 8px;
-		height: 21px;
-		background: #0e71e6;
-		margin-right: 5px;
-	}
-	.wheel {
-		width: 100%;
-		height: 140px;
-	}
-	.man {
-		width: 16px;
-		height: 16px;
-	}
-	.wheel > img,
-	.man > img {
-		width: 100%;
-		height: 100%;
-	}
-	.box_course {
-		display: flex;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		margin: 5px 0 25px 15px;
-		width: 20%;
-		border: 1px solid #cecece;
-		border-radius: 5px;
-	}
-	.middle_white {
-		font-size: 14px;
-		margin: 5px 0 5px 10px;
-	}
-	.people {
-		display: flex;
-		margin-top: 5px;
-	}
-	.people > div:nth-child(2) {
-		margin-left: 10px;
-	}
-	.now_study {
-		width: 100%;
-		height: 40px;
-		color: #fff;
-		background: #0e71e6;
-		text-align: center;
-		line-height: 40px;
-		font-size: 13px;
-        cursor: pointer;
-	}
-	.main_box {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: space-evenly;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
-	.body_student {
-		margin: 0px auto;
-		width: 80%;
-		height: 100%;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+}
+.student_head > img {
+  width: 100%;
+  height: 100%;
+}
+.student_body {
+  width: 80%;
+  height: 100%;
+  margin: 0 auto;
+  background: #fff;
+  padding: 0 0 20px;
+  min-height: 1000px;
+}
+.top {
+  padding: 20px 30px;
+  box-sizing: border-box;
+  display: flex;
+}
+.box_fk {
+  width: 8px;
+  height: 21px;
+  background: #0e71e6;
+  margin-right: 5px;
+}
+.wheel {
+  width: 100%;
+  height: 140px;
+}
+.man {
+  width: 16px;
+  height: 16px;
+}
+.wheel > img,
+.man > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.box_course {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  margin: 0px 10px 20px;
+  width: 23%;
+  /*border: 1px solid #cecece; */
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+    0px 2px 1px -1px rgb(0 0 0 / 12%);
+}
+.middle_white {
+  font-size: 14px;
+  margin: 5px 0 5px 10px;
+}
+.people {
+  display: flex;
+  margin-top: 5px;
+}
+.people > div:nth-child(2) {
+  margin-left: 10px;
+}
+.now_study {
+  width: 100%;
+  height: 40px;
+  color: #fff;
+  background: #579ef5;
+  text-align: center;
+  line-height: 40px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.main_box {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 auto;
+}
+.right_bottom_flex {
+  width: 219px;
+  height: 144px;
+  margin: auto 0;
+}
+.right_bottom_flex > img {
+  width: 100%;
+  height: 100%;
+}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+
+.textOverflow {
+  padding: 0 5px 0 0px;
+  width: 95%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>

src/components/mine.vue

@@ -1,185 +1,140 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel"><img src="../assets/tx.png" alt="" /></div>
-						<div class="right_box">
-							<div class="right_box_title">张子林</div>
-							<div class="people">
-								<div>
-									<span>班级：</span><span style="color: #999">六年3班</span>
-								</div>
-								<div style="margin-left: 50px">
-									<span>所属学校：</span
-									><span style="color: #999">罗浮名剑中学</span>
-								</div>
-							</div>
-							<div>
-								<span>手机号码：</span
-								><span style="color: #999">13751117529</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div class="box_three_pic">
-						<div class="pic_box" @click="goTo('/project')">
-							<div class="mine_pic">
-								<img src="../assets/book.png" alt="" />
-							</div>
-							<div>我的课程</div>
-						</div>
-						<div class="pic_box" @click="goTo('/works')">
-							<div class="mine_pic">
-								<img src="../assets/zp.png" alt="" />
-							</div>
-							<div>我的作品</div>
-						</div>
-						<div class="pic_box">
-							<div class="mine_pic">
-								<img src="../assets/study.png" alt="" />
-							</div>
-							<div>学习数据</div>
-						</div>
-						<div class="pic_box" @click="goTo('/notice')">
-							<div class="mine_pic">
-								<img src="../assets/notice.png" alt="" />
-							</div>
-							<div>消息通知</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
+            <div class="right_box">
+              <div class="right_box_title">张子林</div>
+              <div class="people">
+                <div>
+                  <span>班级：</span><span style="color: #999">六年3班</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span
+                  ><span style="color: #999">罗浮名剑中学</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span style="color: #999">13751117529</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div class="box_three_pic">
+            <div class="pic_box" @click="goTo('/project')">
+              <div class="mine_pic">
+                <img src="../assets/book.png" alt="" />
+              </div>
+              <div>我的课程</div>
+            </div>
+            <div class="pic_box" @click="goTo('/works')">
+              <div class="mine_pic">
+                <img src="../assets/zp.png" alt="" />
+              </div>
+              <div>我的作品</div>
+            </div>
+            <div class="pic_box">
+              <div class="mine_pic">
+                <img src="../assets/study.png" alt="" />
+              </div>
+              <div>学习数据</div>
+            </div>
+            <div class="pic_box" @click="goTo('/notice')">
+              <div class="mine_pic">
+                <img src="../assets/notice.png" alt="" />
+              </div>
+              <div>消息通知</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-		},
-		created() {},
-	};
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+  created() {},
+};
 </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;
-	}
-	.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;
-	}
-	.student_body {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		height: 500px;
-	}
-	.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: space-between;
-	}
-	.pic_box {
-		text-align: center;
-		width: 33%;
-		cursor: pointer;
-	}
-	.pic_box > div:nth-child(2) {
-		margin-top: 12px;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  height: 30%;
+}
+.wheel > img， .mine_pic > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  padding: 35px 0 25px 60px;
+  align-items: center;
+}
+.wheel {
+  width: 210px;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  /* justify-content: space-around; */
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+  margin: 30px 0 15px 0px;
+}
+.student_body {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  min-height: 1000px;
+}
+.mine_pic {
+  width: 120px;
+  height: 116px;
+  margin: 0 auto;
+}
+.box_three_pic {
+  margin: 0 auto;
+  width: 80%;
+  padding: 50px 0 20px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.pic_box {
+  text-align: center;
+  width: 33%;
+  cursor: pointer;
+  margin-bottom: 100px;
+}
+.pic_box > div:nth-child(2) {
+  margin-top: 12px;
+}
 </style>

src/components/notice.vue

@@ -1,178 +1,138 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel"><img src="../assets/tx.png" alt="" /></div>
-						<div class="right_box">
-							<div class="right_box_title">张子林</div>
-							<div class="people">
-								<div>
-									<span>班级：</span><span style="color: #999">六年3班</span>
-								</div>
-								<div style="margin-left: 50px">
-									<span>所属学校：</span
-									><span style="color: #999">罗浮名剑中学</span>
-								</div>
-							</div>
-							<div>
-								<span>手机号码：</span
-								><span style="color: #999">13751117529</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div style="padding: 20px 30px">个人中心 > 消息通知</div>
-					<div class="project_box">
-						<div class="notice_box">
-							<div class="notice_message">
-								<div class="notice_title" @click="goTo('/noticeDetail')">关于长乐基地-新教育活动相关通知</div>
-								<div class="notice_time">2021-09-08 10:01</div>
-							</div>
-							<div class="notice_message">
-								<div class="notice_title" @click="goTo('/noticeDetail')">关于'一校一案'劳动有关通知</div>
-								<div class="notice_time">2021-09-08 10:01</div>
-							</div>
-							<div class="notice_message">
-								<div class="notice_title" @click="goTo('/noticeDetail')">实践出真知，最光荣</div>
-								<div class="notice_time">2021-09-08 10:01</div>
-							</div>
-							<div class="notice_message">
-								<div class="notice_title" @click="goTo('/noticeDetail')">基于项目学习Shine相关通知</div>
-								<div class="notice_time">2021-09-08 10:01</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
+            <div class="right_box">
+              <div class="right_box_title">张子林</div>
+              <div class="people">
+                <div>
+                  <span>班级：</span><span style="color: #999">六年3班</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span
+                  ><span style="color: #999">罗浮名剑中学</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span style="color: #999">13751117529</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div style="padding: 20px 30px">个人中心 > 消息通知</div>
+          <div class="project_box">
+            <div class="notice_box">
+              <div class="notice_message">
+                <div class="notice_title" @click="goTo('/noticeDetail')">
+                  关于长乐基地-新教育活动相关通知
+                </div>
+                <div class="notice_time">2021-09-08 10:01</div>
+              </div>
+              <div class="notice_message">
+                <div class="notice_title" @click="goTo('/noticeDetail')">
+                  关于'一校一案'劳动有关通知
+                </div>
+                <div class="notice_time">2021-09-08 10:01</div>
+              </div>
+              <div class="notice_message">
+                <div class="notice_title" @click="goTo('/noticeDetail')">
+                  实践出真知，最光荣
+                </div>
+                <div class="notice_time">2021-09-08 10:01</div>
+              </div>
+              <div class="notice_message">
+                <div class="notice_title" @click="goTo('/noticeDetail')">
+                  基于项目学习Shine相关通知
+                </div>
+                <div class="notice_time">2021-09-08 10:01</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {};
-		},
-		methods: {
-            goTo(path) {
-				this.$router.push(path);
-			},
-        },
-		created() {},
-	};
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+  created() {},
+};
 </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;
-	}
-	.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;
-	}
-	.student_body {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		height: 500px;
-		overflow: auto;
-	}
-	.project {
-		width: 165px;
-	}
-	.project_box {
-		margin: 0 0 10px 30px;
-	}
-	.notice_message {
-		padding: 10px 0 15px 0;
-		border-bottom: 1px solid #ccc;
-	}
-	.notice_time {
-		font-size: 14px;
-		margin-top: 15px;
-	}
-    .notice_title{
-        cursor: pointer;
-    }
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  height: 30%;
+}
+.wheel > img,
+.project > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  padding: 35px 0 25px 60px;
+  align-items: center;
+}
+.wheel {
+  width: 210px;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  /* justify-content: space-around; */
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+  margin: 30px 0 20px 0px;
+}
+.student_body {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  min-height: 1000px;
+}
+.project {
+  width: 165px;
+}
+.project_box {
+  margin: 0 0 10px 30px;
+}
+.notice_message {
+  padding: 30px 0;
+  border-bottom: 1px solid #ccc;
+}
+.notice_time {
+  font-size: 14px;
+  margin-top: 15px;
+}
+.notice_title {
+  cursor: pointer;
+}
 </style>

src/components/noticeDetail.vue

@@ -1,180 +1,132 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel"><img src="../assets/tx.png" alt="" /></div>
-						<div class="right_box">
-							<div class="right_box_title">张子林</div>
-							<div class="people">
-								<div>
-									<span>班级：</span><span style="color: #999">六年3班</span>
-								</div>
-								<div style="margin-left: 50px">
-									<span>所属学校：</span
-									><span style="color: #999">罗浮名剑中学</span>
-								</div>
-							</div>
-							<div>
-								<span>手机号码：</span
-								><span style="color: #999">13751117529</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div style="padding: 20px 30px">
-						个人中心 > 消息通知 > 关于辅修学士学位授予工作调整通知
-					</div>
-					<div class="project_box">
-						<div class="detail_content_top">
-							<div class="detail_title">关于辅修学士学位授予工作调整通知</div>
-							<div class="detail_time">2021-03-15 15:10:24</div>
-						</div>
-						<div class="detail_content">
-							根据国务院学位委员会发布的《学士学位授权与授予管理办法》和《上海市学位委员会关于做好本市高校学士学位授权与授予工作的通知》的要求：具有学士学位授予权的普通高等学校，可向本校符合学士学位授予标准的全日制本科毕业生授予辅修学士学位。辅修学士学位在主修学士学位证书中予以注明，不单独发放学位证书。2022年所有单位按《办法》执行。结合学生主修学业年限最长是六年以及辅修专业修读时间是三年，拟对我校辅修专业学士学位授予工作做如下调整：
-							一、自2021年起，凡辅读辅修专业的学生采用学士学位申请制。
-							二、举例说明，学生主修2016级，辅修2016-1或2017-1的情况：（同样适用于主修2017级的学生）
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
+            <div class="right_box">
+              <div class="right_box_title">张子林</div>
+              <div class="people">
+                <div>
+                  <span>班级：</span><span style="color: #999">六年3班</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span
+                  ><span style="color: #999">罗浮名剑中学</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span style="color: #999">13751117529</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div style="padding: 20px 30px">
+            个人中心 > 消息通知 > 关于辅修学士学位授予工作调整通知
+          </div>
+          <div class="project_box">
+            <div class="detail_content_top">
+              <div class="detail_title">关于辅修学士学位授予工作调整通知</div>
+              <div class="detail_time">2021-03-15 15:10:24</div>
+            </div>
+            <div class="detail_content">
+              根据国务院学位委员会发布的《学士学位授权与授予管理办法》和《上海市学位委员会关于做好本市高校学士学位授权与授予工作的通知》的要求：具有学士学位授予权的普通高等学校，可向本校符合学士学位授予标准的全日制本科毕业生授予辅修学士学位。辅修学士学位在主修学士学位证书中予以注明，不单独发放学位证书。2022年所有单位按《办法》执行。结合学生主修学业年限最长是六年以及辅修专业修读时间是三年，拟对我校辅修专业学士学位授予工作做如下调整：
+              一、自2021年起，凡辅读辅修专业的学生采用学士学位申请制。
+              二、举例说明，学生主修2016级，辅修2016-1或2017-1的情况：（同样适用于主修2017级的学生）
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-		},
-		created() {},
-	};
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+  created() {},
+};
 </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;
-	}
-	.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;
-	}
-	.student_body {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		height: 500px;
-		overflow: auto;
-	}
-	.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;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  height: 30%;
+}
+.wheel > img,
+.project > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  padding: 35px 0 25px 60px;
+  align-items: center;
+}
+.wheel {
+  width: 210px;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  /* justify-content: space-around; */
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+  margin: 30px 0 20px 0px;
+}
+.student_body {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  min-height: 1000px;
+}
+.project {
+  width: 165px;
+}
+.project_box {
+  padding: 0 30px 10px 30px;
+}
+.detail_content_top {
+  width: 100%;
+  padding: 25px 0 25px 0;
+  border-bottom: 1px solid #ccc;
+}
+.detail_title {
+  text-align: center;
+  font-size: 24px;
+}
+.detail_time {
+  font-size: 13px;
+  padding: 15px 0 0 40px;
+}
+.detail_content {
+  width: 90%;
+  line-height: 2pc;
+  margin: 0 auto;
+  padding-top: 30px;
+  text-indent: 30px;
+}
 </style>

src/components/project.vue

@@ -1,196 +1,149 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel"><img src="../assets/tx.png" alt="" /></div>
-						<div class="right_box">
-							<div class="right_box_title">张子林</div>
-							<div class="people">
-								<div>
-									<span>班级：</span><span style="color: #999">六年3班</span>
-								</div>
-								<div style="margin-left: 50px">
-									<span>所属学校：</span
-									><span style="color: #999">罗浮名剑中学</span>
-								</div>
-							</div>
-							<div>
-								<span>手机号码：</span
-								><span style="color: #999">13751117529</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div style="padding: 20px 30px">个人中心 > 我的课程</div>
-					<div class="project_box">
-						<div class="three_box_inthis">
-							<div class="project">
-								<img src="../assets/project.png" alt="" />
-							</div>
-							<div class="projct_nav">
-								<div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
-								<div>
-									<span>时间：</span
-									><span style="color: #999">2017-12-12 10:00-11:00</span>
-								</div>
-								<div style="color: #999">共一讲</div>
-							</div>
-						</div>
-						<div class="three_box_inthis">
-							<div class="project">
-								<img src="../assets/project.png" alt="" />
-							</div>
-							<div class="projct_nav">
-								<div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
-								<div>
-									<span>时间：</span
-									><span style="color: #999">2017-12-12 10:00-11:00</span>
-								</div>
-								<div style="color: #999">共一讲</div>
-							</div>
-						</div>
-						<div class="three_box_inthis">
-							<div class="project">
-								<img src="../assets/project.png" alt="" />
-							</div>
-							<div class="projct_nav">
-								<div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
-								<div>
-									<span>时间：</span
-									><span style="color: #999">2017-12-12 10:00-11:00</span>
-								</div>
-								<div style="color: #999">共一讲</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
+            <div class="right_box">
+              <div class="right_box_title">张子林</div>
+              <div class="people">
+                <div>
+                  <span>班级：</span><span style="color: #999">六年3班</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span
+                  ><span style="color: #999">罗浮名剑中学</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span style="color: #999">13751117529</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div style="padding: 20px 30px">个人中心 > 我的课程</div>
+          <div class="project_box">
+            <div class="three_box_inthis">
+              <div class="project">
+                <img src="../assets/project.png" alt="" />
+              </div>
+              <div class="projct_nav">
+                <div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
+                <div>
+                  <span>时间：</span
+                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
+                </div>
+                <div style="color: #999">共一讲</div>
+              </div>
+            </div>
+            <div class="three_box_inthis">
+              <div class="project">
+                <img src="../assets/project.png" alt="" />
+              </div>
+              <div class="projct_nav">
+                <div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
+                <div>
+                  <span>时间：</span
+                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
+                </div>
+                <div style="color: #999">共一讲</div>
+              </div>
+            </div>
+            <div class="three_box_inthis">
+              <div class="project">
+                <img src="../assets/project.png" alt="" />
+              </div>
+              <div class="projct_nav">
+                <div style="font-size: 18px">科学探究·材料与运动·认识木头</div>
+                <div>
+                  <span>时间：</span
+                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
+                </div>
+                <div style="color: #999">共一讲</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {};
-		},
-		methods: {},
-		created() {},
-	};
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+  created() {},
+};
 </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;
-	}
-	.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;
-	}
-	.student_body {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		height: 500px;
-		overflow: auto;
-	}
-	.project {
-		width: 165px;
-	}
-	.project_box {
-		margin: 0 0 10px 30px;
-	}
-	.three_box_inthis {
-		display: flex;
-		padding: 20px 0 30px 0;
-		border-bottom: 1px solid #999;
-	}
-	.projct_nav {
-		margin-left: 15px;
-		display: flex;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		justify-content: space-around;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  height: 30%;
+}
+.wheel > img,
+.project > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  padding: 35px 0 25px 60px;
+  align-items: center;
+}
+.wheel {
+  width: 210px;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  /* justify-content: space-around; */
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+  margin: 30px 0 20px 0px;
+}
+.student_body {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+  min-height: 1000px;
+}
+.project {
+  width: 165px;
+}
+.project_box {
+  /* margin: 0 0 10px 30px; */
+}
+.three_box_inthis {
+  display: flex;
+  padding: 40px 30px;
+  border-bottom: 1px solid #cecece;
+}
+.projct_nav {
+  margin-left: 15px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+}
 </style>

src/components/score.vue

@@ -1,158 +1,161 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel"><img src="../assets/sp2.png" alt="" /></div>
-						<div style="font-size: 18px; margin: 15px;">
-							鱼类的起源2.0，实践课程
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div style="padding: 20px 30px">
-						个人中心 > 我的作品 > 鱼类的起源2.0，实践课程
-					</div>
-					<div class="project_box">
-						<div class="star"><img src="../assets/starts.png" alt="" /></div>
-					</div>
-				</div>
-				<div class="student_body1">
-					<div style="padding: 20px 30px">评论（2）</div>
-					<div class="two_ete_box">
-						<div class="other_evaluate">
-							<div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
-							<div class="right_ete">
-								<div class="first_other_ete">
-									<div class="ete_name">樟子松</div>
-									<div class="ete_time">2021/2/5</div>
-								</div>
-								<div class="ete_content">
-									作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不辜负老师的期望。
-								</div>
-							</div>
-						</div>
-						<div class="other_evaluate">
-							<div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
-							<div class="right_ete">
-								<div class="first_other_ete">
-									<div class="ete_name">灰色与青</div>
-									<div class="ete_time">2021/2/5</div>
-								</div>
-								<div class="ete_content">作品已经看完了，好看！！</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/sp2.png" alt="" /></div>
+            <div style="font-size: 18px; margin: 15px">
+              鱼类的起源2.0，实践课程
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div style="padding: 20px 30px">
+            个人中心 > 我的作品 > 鱼类的起源2.0，实践课程
+          </div>
+          <div class="project_box">
+            <div class="star"><img src="../assets/starts.png" alt="" /></div>
+          </div>
+        </div>
+        <div class="student_body1">
+          <div style="padding: 20px 30px">评论（2）</div>
+          <div class="two_ete_box">
+            <div class="other_evaluate">
+              <div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
+              <div class="right_ete">
+                <div class="first_other_ete">
+                  <div class="ete_name">樟子松</div>
+                  <div class="ete_time">2021/2/5</div>
+                </div>
+                <div class="ete_content">
+                  作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不辜负老师的期望。
+                </div>
+              </div>
+            </div>
+            <div class="other_evaluate">
+              <div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
+              <div class="right_ete">
+                <div class="first_other_ete">
+                  <div class="ete_name">灰色与青</div>
+                  <div class="ete_time">2021/2/5</div>
+                </div>
+                <div class="ete_content">作品已经看完了，好看！！</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {};
-		},
-		methods: {},
-		created() {},
-	};
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+  created() {},
+};
 </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;
-		height: 100%;
-	}
-	.student_body1 {
-		height: 500px !important;
-		overflow: auto !important;
-	}
-	.project {
-		width: 165px;
-	}
-	.project_box {
-		margin: 0 0 10px 30px;
-	}
-	.star {
-		width: 100%;
-	}
-	.evaluate {
-		width: auto;
-		height: 65px;
-		border-radius: 100%;
-		overflow: hidden;
-	}
-	.two_ete_box {
-		padding: 20px 0 5px 30px;
-		border-bottom: 1px solid #999;
-	}
-	.other_evaluate {
-		display: flex;
-		margin-bottom: 25px;
-	}
-	.right_ete {
-		margin-left: 15px;
-	}
-	.first_other_ete {
-		display: flex;
-	}
-	.ete_time {
-		margin-left: 10px;
-		line-height: 21px;
-		font-size: 13px;
-		color: #999;
-		margin-bottom: 10px;
-	}
-	.ete_content {
-		height: auto;
-		word-wrap: break-word;
-		word-break: break-all;
-		overflow: hidden;
-		width: 500px;
-		line-height: 20px;
-		font-size: 14px;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  height: 30%;
+}
+.wheel > img,
+.project > img,
+.star > img,
+.evaluate > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  flex-direction: column;
+}
+.wheel {
+  width: 100%;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  justify-content: space-around;
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+}
+.student_body,
+.student_body1 {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  /* min-height: 1000px; */
+  padding: 0 0 20px;
+}
+.student_body1 {
+  /* height: 500px !important; */
+  /* overflow: auto !important; */
+}
+.project {
+  width: 165px;
+}
+.project_box {
+  margin: 0 0 10px 30px;
+}
+.star {
+  width: 50%;
+  min-width: 400px;
+  margin: 0 auto;
+}
+.evaluate {
+  width: auto;
+  height: 65px;
+  border-radius: 100%;
+  overflow: hidden;
+}
+.two_ete_box {
+  padding: 20px 0 5px 30px;
+  border-bottom: 1px solid #cecece;
+}
+.other_evaluate {
+  display: flex;
+  margin-bottom: 25px;
+}
+.right_ete {
+  margin-left: 15px;
+}
+.first_other_ete {
+  display: flex;
+}
+.ete_time {
+  margin-left: 10px;
+  line-height: 21px;
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 10px;
+}
+.ete_content {
+  height: auto;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+  width: 500px;
+  line-height: 20px;
+  font-size: 14px;
+}
 </style>

src/components/study.vue

@@ -1,373 +1,456 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel"><img src="../assets/sp2.png" alt="" /></div>
-						<div style="font-size: 18px; margin: 15px">
-							鱼类的起源2.0，实践课程
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div class="study_top">
-						<div>文档资料</div>
-						<div @click="dialogVisible = true">提交实践作业</div>
-					</div>
-					<div class="project_box">
-						<div class="detail_content_top">
-							<div class="detail_title">鱼类的起源2.0，实践课程</div>
-							<div class="detail_time">2021-03-15 15:10:24</div>
-						</div>
-						<div class="detail_content">
-							<div>
-								鱼类的直接祖先目前尚无化石证据，因此鱼类的起源只能追溯到奥陶纪以前生活过的原始有头类，它们的后裔分支发展为无颌的甲胃类和有颌的鱼类。鱼类的化石最早发现于志留纪末期，主要是盾皮鱼（Placodermi）和棘鱼（Acan-thodii）两类。盾皮鱼类是一个种类繁多的类群，它代表着有颌类发展的早期阶段。
-							</div>
-							<div>
-								体外披有盾甲，有典型的下颌和与头骨愈合在一起的的上颌，有成对鼻孔，偶鳍和歪型尾，骨骼为软骨，它是志留纪与泥盆纪时期，沿着和早期的鲨类与硬骨鱼类不同的进化路线发展起来的，随着泥盆纪的结束而退出历史舞台。
-							</div>
-							<div>
-								鱼类的直接祖先目前尚无化石证据，因此鱼类的起源只能追溯到奥陶纪以前生活过的原始有头类，它们的后裔分支发展为无颌的甲胃类和有颌的鱼类。鱼类的化石最早发现于志留纪末期，主要是盾皮鱼（Placodermi）和棘鱼（Acan-thodii）两类。盾皮鱼类是一个种类繁多的类群，它代表着有颌类发展的早期阶段。
-							</div>
-							<div>
-								体外披有盾甲，有典型的下颌和与头骨愈合在一起的的上颌，有成对鼻孔，偶鳍和歪型尾，骨骼为软骨，它是志留纪与泥盆纪时期，沿着和早期的鲨类与硬骨鱼类不同的进化路线发展起来的，随着泥盆纪的结束而退出历史舞台。
-							</div>
-						</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; margin-bottom: 10px">上传作业</div>
-					<el-input
-						type="textarea"
-						:autosize="{ minRows: 2, maxRows: 4 }"
-						placeholder="输入文字描述..."
-						v-model="textarea"
-					>
-					</el-input>
-					<div class="score_box">
-						<span>课程评分</span
-						><el-rate
-							v-model="rateList.ca"
-							:disabled="rateParams[3] != '' && rateParams[3] != undefined"
-							:colors="colors"
-							:max="3"
-						></el-rate>
-					</div>
-					<div>
-						<div>上传图片</div>
-						<div
-							class="chapter_add"
-							v-if="unitJson[unitIndex].cover.length == 0"
-							@click="addImg($event)"
-						>
-							<div class="up_photo">
-								<img src="../assets/photo.png" alt="" />
-							</div>
-							<input
-								type="file"
-								accept="image/png,image/gif,image/jpeg"
-								style="display: none"
-								@change="beforeUpload1"
-							/>
-						</div>
-					</div>
-					<div>
-						<div>上传视频</div>
-						<div
-							class="chapter_add"
-							v-if="unitJson[unitIndex].cover.length == 0"
-							@click="addImg($event)"
-						>
-							<div class="up_photo">
-								<img src="../assets/vidio.png" alt="" />
-							</div>
-							<input
-								type="file"
-								accept="image/png,image/gif,image/jpeg"
-								style="display: none"
-								@change="beforeUpload1"
-							/>
-						</div>
-					</div>
-					<div class="upload_send">提交</div>
-				</el-dialog>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/sp2.png" alt="" /></div>
+            <div style="font-size: 18px; margin: 15px">
+              鱼类的起源2.0，实践课程
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div class="study_top">
+            <div class="checkbox">
+              <div
+                class="check"
+                :class="{ checked: type == 1 }"
+                @click="type = 1"
+              >
+                文档资料
+              </div>
+              <div
+                class="check"
+                :class="{ checked: type == 2 }"
+                @click="type = 2"
+              >
+                视频
+              </div>
+              <div
+                class="check"
+                :class="{ checked: type == 3 }"
+                @click="type = 3"
+              >
+                附件
+              </div>
+            </div>
+            <div @click="dialogVisible = true" class="btn">提交实践作业</div>
+          </div>
+          <div class="project_box" v-if="type == 1">
+            <div class="detail_content_top">
+              <div class="detail_title">鱼类的起源2.0，实践课程</div>
+              <div class="detail_time">2021-03-15 15:10:24</div>
+            </div>
+            <div class="detail_content">
+              <div>
+                鱼类的直接祖先目前尚无化石证据，因此鱼类的起源只能追溯到奥陶纪以前生活过的原始有头类，它们的后裔分支发展为无颌的甲胃类和有颌的鱼类。鱼类的化石最早发现于志留纪末期，主要是盾皮鱼（Placodermi）和棘鱼（Acan-thodii）两类。盾皮鱼类是一个种类繁多的类群，它代表着有颌类发展的早期阶段。
+              </div>
+              <div>
+                体外披有盾甲，有典型的下颌和与头骨愈合在一起的的上颌，有成对鼻孔，偶鳍和歪型尾，骨骼为软骨，它是志留纪与泥盆纪时期，沿着和早期的鲨类与硬骨鱼类不同的进化路线发展起来的，随着泥盆纪的结束而退出历史舞台。
+              </div>
+              <div>
+                鱼类的直接祖先目前尚无化石证据，因此鱼类的起源只能追溯到奥陶纪以前生活过的原始有头类，它们的后裔分支发展为无颌的甲胃类和有颌的鱼类。鱼类的化石最早发现于志留纪末期，主要是盾皮鱼（Placodermi）和棘鱼（Acan-thodii）两类。盾皮鱼类是一个种类繁多的类群，它代表着有颌类发展的早期阶段。
+              </div>
+              <div>
+                体外披有盾甲，有典型的下颌和与头骨愈合在一起的的上颌，有成对鼻孔，偶鳍和歪型尾，骨骼为软骨，它是志留纪与泥盆纪时期，沿着和早期的鲨类与硬骨鱼类不同的进化路线发展起来的，随着泥盆纪的结束而退出历史舞台。
+              </div>
+            </div>
+          </div>
+          <div class="project_box" v-if="type == 2">
+            <div class="filebox">
+              <div class="media" v-for="x in 30" :key="x">
+                <img :src="require('../assets/tu4.png')" alt="" />
+                <div class="title">认时木头制作|颗粒板和胶合板制作</div>
+                <div class="btn">点击播放</div>
+              </div>
+            </div>
+          </div>
+          <div class="project_box" v-if="type == 3">
+            <div class="filebox">
+              <div class="file" v-for="x in 30" :key="x">
+                <img :src="require('../assets/file.png')" alt="" />
+                <div>舵机实现.xml</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <el-dialog
+          title="提交实践作业"
+          :visible.sync="dialogVisible"
+          :append-to-body="true"
+          width="500px"
+          :before-close="handleClose"
+          class="dialog_change"
+        >
+          <div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
+          <el-input
+            type="textarea"
+            resize="none"
+            rows="7"
+            placeholder="输入文字描述..."
+            v-model="textarea"
+          >
+          </el-input>
+          <div class="marginT">
+            <div>上传图片</div>
+            <div
+              class="chapter_add"
+              v-if="unitJson[unitIndex].cover.length == 0"
+              @click="addImg($event)"
+            >
+              <div class="up_photo">
+                <img src="../assets/photo.png" alt="" />
+              </div>
+              <input
+                type="file"
+                accept="image/png,image/gif,image/jpeg"
+                style="display: none"
+                @change="beforeUpload1"
+              />
+            </div>
+          </div>
+          <div class="marginT">
+            <div>上传视频</div>
+            <div
+              class="chapter_add"
+              v-if="unitJson[unitIndex].cover.length == 0"
+              @click="addImg($event)"
+            >
+              <div class="up_photo">
+                <img src="../assets/vidio.png" alt="" />
+              </div>
+              <input
+                type="file"
+                accept="image/png,image/gif,image/jpeg"
+                style="display: none"
+                @change="beforeUpload1"
+              />
+            </div>
+          </div>
+          <div class="marginT">
+            <div>上传视频</div>
+            <div
+              class="chapter_add"
+              v-if="unitJson[unitIndex].cover.length == 0"
+              @click="addImg($event)"
+            >
+              <div class="up_photo">
+				  <el-button type="small" style="background:rgb(60,102,189);color:#fff">点击上传</el-button>
+              </div>
+              <input
+                type="file"
+                accept="image/png,image/gif,image/jpeg"
+                style="display: none"
+                @change="beforeUpload1"
+              />
+            </div>
+          </div>
+          <div class="upload_send">提交</div>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				dialogVisible: false,
-				textarea: "",
-				rateList: {
-					ca: 0,
-				},
-				rateParams: [],
-				colors: ["#000", "#000", "#000"],
-				unitIndex: 0,
-				unitJson: [
-					{
-						cover: [], //课程封面
-					},
-				],
-			};
-		},
-		methods: {
-			handleClose(done) {
-				done();
-			},
-			addImg(e) {
-				var el = e.currentTarget;
-				el.getElementsByTagName("input")[0].click();
-			},
-			beforeUpload1(event) {
-				this.uploadLoading1 = true;
-				var file = event.target.files[0];
-				var credentials = {
-					accessKeyId: "AKIATLPEDU37QV5CHLMH",
-					secretAccessKey: "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",
-				}; //秘钥形式的登录上传
-				window.AWS.config.update(credentials);
-				window.AWS.config.region = "cn-northwest-1"; //设置区域
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      textarea: "",
+      type: 1,
+      rateList: {
+        ca: 0,
+      },
+      rateParams: [],
+      colors: ["#000", "#000", "#000"],
+      unitIndex: 0,
+      unitJson: [
+        {
+          cover: [], //课程封面
+        },
+      ],
+    };
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    beforeUpload1(event) {
+      this.uploadLoading1 = true;
+      var file = event.target.files[0];
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
 
-				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
-				var _this = this;
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
 
-				if (file) {
-					var params = {
-						Key:
-							file.name.split(".")[0] +
-							new Date().getTime() +
-							"." +
-							file.name.split(".")[1],
-						ContentType: file.type,
-						Body: file,
-						"Access-Control-Allow-Credentials": "*",
-						ACL: "public-read",
-					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
-					var options = {
-						partSize: 2048 * 1024 * 1024,
-						queueSize: 2,
-						leavePartsOnError: true,
-					};
-					bucket
-						.upload(params, options)
-						.on("httpUploadProgress", function (evt) {
-							//这里可以写进度条
-							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
-						})
-						.send(function (err, data) {
-							_this.uploadLoading1 = false;
-							if (err) {
-								var a = _this.$refs.upload1.uploadFiles;
-								a.splice(a.length - 1, a.length);
-								_this.$message.error("上传失败");
-							} else {
-								//上传成功处理
-								_this.fileList1.push({
-									name: file.name,
-									url: data.Location,
-									uid: file.uid,
-								});
-								_this.imgChange();
-								console.log(data.Location);
-							}
-						});
-				}
-			},
-		},
-		created() {},
-	};
+      if (file) {
+        var params = {
+          Key:
+            file.name.split(".")[0] +
+            new Date().getTime() +
+            "." +
+            file.name.split(".")[1],
+          ContentType: file.type,
+          Body: file,
+          "Access-Control-Allow-Credentials": "*",
+          ACL: "public-read",
+        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true,
+        };
+        bucket
+          .upload(params, options)
+          .on("httpUploadProgress", function (evt) {
+            //这里可以写进度条
+            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+          })
+          .send(function (err, data) {
+            _this.uploadLoading1 = false;
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              //上传成功处理
+              _this.fileList1.push({
+                name: file.name,
+                url: data.Location,
+                uid: file.uid,
+              });
+              _this.imgChange();
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+  },
+  created() {},
+};
 </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,
-	.up_photo > 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 {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		height: 500px;
-		overflow: auto;
-	}
-	.study_top {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
-	.study_top > div:nth-child(1) {
-		margin: 25px;
-		border-bottom: 4px solid #ccc;
-		padding-bottom: 5px;
-	}
-	.study_top > div:nth-child(2) {
-		margin: 25px;
-		background: #0e71e6;
-		color: #fff;
-		width: 120px;
-		text-align: center;
-		height: 30px;
-		line-height: 30px;
-		font-size: 13px;
-		border-radius: 5px;
-		cursor: pointer;
-	}
-	.project_box {
-		padding: 0 30px 10px 30px;
-	}
-	.detail_content_top {
-		width: 100%;
-		padding: 25px 0 25px 0;
-	}
-	.detail_title {
-		text-align: center;
-		font-size: 24px;
-	}
-	.detail_time {
-		font-size: 13px;
-		padding: 15px 0 0 40px;
-	}
-	.detail_content {
-		line-height: 2pc;
-		width: 90%;
-		margin: 0 auto;
-		padding-top: 30px;
-		text-indent: 30px;
-	}
-	.score_box >>> .el-rate {
-		margin-left: 10px;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
-	.dialog_change >>> .el-dialog {
-		border-radius: 5px;
-	}
-	.dialog_change >>> .el-dialog__header {
-		background: #f2f2f2;
-		text-align: center;
-	}
-	.dialog_change >>> .el-dialog__title {
-		line-height: 5px;
-	}
-	.dialog_change >>> .el-dialog__body {
-		background: #fff;
-		padding: 10px 20px;
-	}
-	.score_box {
-		display: flex;
-		align-items: center;
-		margin-bottom: 18px;
-		margin-top: 20px;
-	}
-	.up_photo {
-		width: 60px;
-		cursor: pointer;
-		margin-top: 10px;
-	}
-	.upload_send {
-		margin: 20px auto;
-		width: 60%;
-		background: #169bd6;
-		text-align: center;
-		height: 35px;
-		line-height: 35px;
-		color: #fff;
-		border-radius: 5px;
-        cursor: pointer;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  height: 30%;
+}
+.wheel > img,
+.project > img,
+.star > img,
+.evaluate > img,
+.up_photo > 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 {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  min-height: 1000px;
+  padding: 0 0 20px;
+}
+.study_top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.study_top .checkbox {
+  display: flex;
+  align-items: center;
+  margin-left: 25px;
+}
+.study_top .check {
+  margin: 0 10px 0 0;
+  /* border-bottom: 4px solid #ccc; */
+  padding-bottom: 5px;
+  width: 80px;
+  text-align: center;
+  color: rgb(170, 170, 170);
+  cursor: pointer;
+  height: 30px;
+  box-sizing: border-box;
+}
+.study_top .checked {
+  border-bottom: 4px solid #ccc;
+  padding-bottom: 5px;
+  color: rgb(26, 26, 26);
+}
+.study_top .btn {
+  margin: 25px;
+  background: #0e71e6;
+  color: #fff;
+  width: 120px;
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.project_box {
+  padding: 0 30px 10px 30px;
+}
+
+.filebox {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20px 20px 0;
+  cursor: pointer;
+}
+
+.file div {
+  margin-top: 10px;
+  width: 150px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.media {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20px 20px 0;
+  cursor: pointer;
+  width: 250px;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+    0px 2px 1px -1px rgb(0 0 0 / 12%);
+  border-radius: 0 0 5px 5px;
+  /* border: 1px solid #cecece; */
+  box-sizing: border-box;
+}
+.media img {
+  width: 250px;
+  height: 150px;
+  object-fit: cover;
+}
+.media .title {
+  padding: 5px 10px;
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+.media .btn {
+  margin-top: 10px;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  color: #fff;
+  background: rgb(14, 114, 230);
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.detail_content_top {
+  width: 100%;
+  padding: 25px 0 25px 0;
+}
+.detail_title {
+  text-align: center;
+  font-size: 24px;
+}
+.detail_time {
+  font-size: 13px;
+  padding: 15px 0 0 40px;
+}
+.detail_content {
+  line-height: 2pc;
+  width: 90%;
+  margin: 0 auto;
+  padding-top: 30px;
+  text-indent: 30px;
+}
+.score_box >>> .el-rate {
+  margin-left: 10px;
+}
+.dialog_change >>> .el-dialog {
+  border-radius: 5px;
+}
+.dialog_change >>> .el-dialog__header {
+  background: #f2f2f2;
+  text-align: center;
+}
+.dialog_change >>> .el-dialog__title {
+  line-height: 5px;
+}
+.dialog_change >>> .el-dialog__body {
+  background: #fff;
+  padding: 10px 20px;
+}
+.score_box {
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+  margin-top: 20px;
+}
+.up_photo {
+  width: 60px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.upload_send {
+  margin: 20px auto;
+  width: 60%;
+  background: #169bd6;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  color: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.marginT{
+	margin-top: 20px;
+}
 </style>

src/components/works.vue

@@ -1,224 +1,194 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body">
-			<div class="body_student">
-				<div class="student_head">
-					<div class="box_course">
-						<div class="wheel"><img src="../assets/tx.png" alt="" /></div>
-						<div class="right_box">
-							<div class="right_box_title">张子林</div>
-							<div class="people">
-								<div>
-									<span>班级：</span><span style="color: #999">六年3班</span>
-								</div>
-								<div style="margin-left: 50px">
-									<span>所属学校：</span
-									><span style="color: #999">罗浮名剑中学</span>
-								</div>
-							</div>
-							<div>
-								<span>手机号码：</span
-								><span style="color: #999">13751117529</span>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div style="padding: 20px 30px">个人中心 > 我的作品</div>
-					<div class="project_box">
-						<div class="three_box_inthis">
-							<div class="project">
-								<img src="../assets/project.png" alt="" />
-							</div>
-							<div class="projct_nav">
-								<div style="font-size: 18px">
-									认识木头制作 | 颗粒板和胶合板制作
-								</div>
-								<div>
-									<span>时间：</span
-									><span style="color: #999">2017-12-12 10:00-11:00</span>
-								</div>
-								<div><span>提交人</span><span>提交人：张子林</span></div>
-							</div>
-							<div class="look_score" @click="goTo('/score')">查看评分</div>
-						</div>
-						<div class="three_box_inthis">
-							<div class="project">
-								<img src="../assets/project.png" alt="" />
-							</div>
-							<div class="projct_nav">
-								<div style="font-size: 18px">
-									认识木头制作 | 颗粒板和胶合板制作
-								</div>
-								<div>
-									<span>时间：</span
-									><span style="color: #999">2017-12-12 10:00-11:00</span>
-								</div>
-								<div><span>提交人</span><span>提交人：张子林</span></div>
-							</div>
-							<div class="look_score" @click="goTo('/score')">查看评分</div>
-						</div>
-						<div class="three_box_inthis">
-							<div class="project">
-								<img src="../assets/project.png" alt="" />
-							</div>
-							<div class="projct_nav">
-								<div style="font-size: 18px">
-									认识木头制作 | 颗粒板和胶合板制作
-								</div>
-								<div>
-									<span>时间：</span
-									><span style="color: #999">2017-12-12 10:00-11:00</span>
-								</div>
-								<div><span>提交人</span><span>提交人：张子林</span></div>
-							</div>
-							<div class="look_score" @click="goTo('/score')">查看评分</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="bottom">
-				<div class="bottom_flex">
-					<div class="left_bottom_flex">
-						<div class="left_title">联系我们</div>
-						<div class="left_content">
-							<div>地址：深圳市南山区</div>
-							<div>手机：13418906754</div>
-							<div>邮箱：win.wu@qichuangxin.com</div>
-							<div>电话：0755-84658992</div>
-							<div>邮编：518129</div>
-						</div>
-					</div>
-					<div class="right_bottom_flex">
-						<img src="../assets/logo.png" alt="" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel"><img src="../assets/tx.png" alt="" /></div>
+            <div class="right_box">
+              <div class="right_box_title">张子林</div>
+              <div class="people">
+                <div>
+                  <span>班级：</span><span style="color: #999">六年3班</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span
+                  ><span style="color: #999">罗浮名剑中学</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span style="color: #999">13751117529</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div style="padding: 20px 30px">个人中心 > 我的作品</div>
+          <div class="project_box">
+            <div class="three_box_inthis">
+              <div class="project">
+                <img src="../assets/project.png" alt="" />
+              </div>
+              <div class="projct_nav">
+                <div style="font-size: 18px">
+                  认识木头制作 | 颗粒板和胶合板制作
+                </div>
+                <div>
+                  <span>时间：</span
+                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
+                </div>
+                <div><span>提交人</span><span>提交人：张子林</span></div>
+              </div>
+              <div class="look_score" @click="goTo('/score')">查看评分</div>
+            </div>
+            <div class="three_box_inthis">
+              <div class="project">
+                <img src="../assets/project.png" alt="" />
+              </div>
+              <div class="projct_nav">
+                <div style="font-size: 18px">
+                  认识木头制作 | 颗粒板和胶合板制作
+                </div>
+                <div>
+                  <span>时间：</span
+                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
+                </div>
+                <div><span>提交人</span><span>提交人：张子林</span></div>
+              </div>
+              <div class="look_score" @click="goTo('/score')">查看评分</div>
+            </div>
+            <div class="three_box_inthis">
+              <div class="project">
+                <img src="../assets/project.png" alt="" />
+              </div>
+              <div class="projct_nav">
+                <div style="font-size: 18px">
+                  认识木头制作 | 颗粒板和胶合板制作
+                </div>
+                <div>
+                  <span>时间：</span
+                  ><span style="color: #999">2017-12-12 10:00-11:00</span>
+                </div>
+                <div><span>提交人</span><span>提交人：张子林</span></div>
+              </div>
+              <div class="look_score" @click="goTo('/score')">查看评分</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="bottom_flex">
+          <div class="left_bottom_flex">
+            <div class="left_title">联系我们</div>
+            <div class="left_content">
+              <div>地址：深圳市南山区</div>
+              <div>手机：13418906754</div>
+              <div>邮箱：win.wu@qichuangxin.com</div>
+              <div>电话：0755-84658992</div>
+              <div>邮编：518129</div>
+            </div>
+          </div>
+          <div class="right_bottom_flex">
+            <img src="../assets/logo.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {};
-		},
-		methods: {
-            goTo(path) {
-				this.$router.push(path);
-			},
-        },
-		created() {},
-	};
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+  created() {},
+};
 </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;
-	}
-	.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;
-	}
-	.student_body {
-		width: 80%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		height: 500px;
-		overflow: auto;
-	}
-	.project {
-		width: 165px;
-	}
-	.project_box {
-		margin: 0 0 10px 30px;
-	}
-	.three_box_inthis {
-		display: flex;
-		padding: 20px 0 30px 0;
-		border-bottom: 1px solid #999;
-		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;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 100px;
-		height: 100px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+}
+.student_head {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  height: 30%;
+}
+.wheel > img,
+.project > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  padding: 35px 0 25px 60px;
+  align-items: center;
+}
+.wheel {
+  width: 210px;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  /* justify-content: space-around; */
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+  margin: 30px 0 20px 0px;
+}
+.student_body {
+  width: 80%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+  min-height: 1000px;
+}
+.project {
+  width: 165px;
+}
+.project_box {
+  /* margin: 0 0 10px 30px; */
+}
+.three_box_inthis {
+  display: flex;
+  padding: 40px 30px;
+  border-bottom: 1px solid #cecece;
+  position: relative;
+}
+.projct_nav {
+  margin-left: 15px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+}
+.look_score {
+  border-radius: 5px;
+  text-align: center;
+  position: absolute;
+  right: 70px;
+  background: #0099ff;
+  width: 100px;
+  height: 35px;
+  font-size: 14px;
+  color: #fff;
+  line-height: 35px;
+  top: 35%;
+  cursor: pointer;
+}
 </style>