学生端

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-	<div id="app">
-		<!-- <div class="app_head" :class="{ stuWidth: $route.path == '/student' }">
+  <div id="app">
+    <!-- <div class="app_head" :class="{ stuWidth: $route.path == '/student' }">
 			<div class="logo" @click="goTo('/')"></div>
 			<div class="app_right">
 				<div class="box_right_three">
@@ -29,28 +29,28 @@
 				</div>
 			</div>
 		</div> -->
-		<div>
-			<!-- main 内容 -->
-			<keep-alive v-if="$route.meta.keepAlive">
-				<!-- 这里是会被缓存的视图组件 -->
-				<router-view
-					v-if="$route.meta.keepAlive"
-					:class="{ pb_body: isShowNav }"
-				/>
-			</keep-alive>
-			<!-- 这里是不被缓存的视图组件 -->
-			<router-view
-				v-if="!$route.meta.keepAlive"
-				:class="{ pb_body: isShowNav }"
-			/>
+    <div :class="{ liveCss: $route.path == '/liveProjectDetail' }">
+      <!-- main 内容 -->
+      <keep-alive v-if="$route.meta.keepAlive">
+        <!-- 这里是会被缓存的视图组件 -->
+        <router-view
+          v-if="$route.meta.keepAlive"
+          :class="{ pb_body: isShowNav }"
+        />
+      </keep-alive>
+      <!-- 这里是不被缓存的视图组件 -->
+      <router-view
+        v-if="!$route.meta.keepAlive"
+        :class="{ pb_body: isShowNav }"
+      />
 
-			<!-- 底部导航 -->
-			<!-- <footer-nav
+      <!-- 底部导航 -->
+      <!-- <footer-nav
 				v-if="isShowNav"
 				:luyou="this.$store.state.luyou"
 			></footer-nav> -->
-		</div>
-		<!-- <div class="bottom">
+    </div>
+    <!-- <div class="bottom">
 			<div class="bottom_flex">
 				<div class="left_bottom_flex">
 					<div class="left_title">联系我们</div>
@@ -67,283 +67,287 @@
 				</div>
 			</div>
 		</div> -->
-	</div>
+  </div>
 </template>
 
 <script>
-	import { Message } from "element-ui";
-	export default {
-		// name: "App",
-		data() {
-			return {
-				isShowNav: true, // 是否显示导航 Tab
-			};
-		},
-		components: {},
-		created: function () {
-			// this.isLogin();
-			// this.getnCount();
-			setInterval(() => {
-				// this.getnCount();
-			}, 60000);
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			isLogin() {
-				const loading = this.$loading.service({
-					background: "rgba(255, 255, 255)",
-					target: document.querySelector("body"),
-				});
-				var _isLogin = this.$cookies.get("slogin");
-				var studentInfo = this.$cookies.get("studentInfo");
-				if (_isLogin == "1" && studentInfo) {
-					loading.close();
-					this.$store.commit("update", ["isLogin", true]);
-					// var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
-					this.$store.commit("update", ["studentInfo", studentInfo]);
-					let router_path = this.$route.path;
-					if (router_path == "/") {
-						this.$router.push("/index");
-					}
-				}
-				//  else {
-				// 	this.$store.commit("update", ["isLogin", false]);
-				// 	Message({
-				// 		message: "未登录，请登录",
-				// 		type: "warning",
-				// 	});
-				// 	setTimeout(() => {
-				// 		loading.close();
-				// 		this.$router.push("/login");
-				// 	}, 2000);
-				// }
-			},
-			getnCount() {
-				let params = {
-					bid: this.$store.state.studentInfo.userid,
-				};
-				this.ajax
-					.get(this.$store.state.api + "getNcount", params)
-					.then((res) => {
-						console.log(res);
-						if (res.data[0].length > 0) {
-							this.$store.commit("update", ["nCount", res.data[0][0].num]);
-						} else {
-							this.$store.commit("update", ["nCount", 0]);
-						}
-					})
-					.catch((err) => {
-						console.error(err);
-					});
-			},
-			exit() {
-				sessionStorage.clear();
-				this.$cookies.remove("slogin");
-				this.$cookies.remove("studentInfo");
-				this.$store.commit("update", ["isLogin", false]);
-				this.$store.commit("update", ["studentInfo", {}]);
-				Message({
-					message: "退出成功",
-					type: "success",
-				});
-				this.$router.push("/login");
-			},
-			goTo(path) {
-				this.$router.push(path);
-			},
-		},
-	};
+import { Message } from "element-ui";
+export default {
+  // name: "App",
+  data() {
+    return {
+      isShowNav: true, // 是否显示导航 Tab
+    };
+  },
+  components: {},
+  created: function () {
+    // this.isLogin();
+    // this.getnCount();
+    setInterval(() => {
+      // this.getnCount();
+    }, 60000);
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    isLogin() {
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255)",
+        target: document.querySelector("body"),
+      });
+      var _isLogin = this.$cookies.get("slogin");
+      var studentInfo = this.$cookies.get("studentInfo");
+      if (_isLogin == "1" && studentInfo) {
+        loading.close();
+        this.$store.commit("update", ["isLogin", true]);
+        // var info = JSON.parse(window.sessionStorage.getItem("userInfo"));
+        this.$store.commit("update", ["studentInfo", studentInfo]);
+        let router_path = this.$route.path;
+        if (router_path == "/") {
+          this.$router.push("/index");
+        }
+      }
+      //  else {
+      // 	this.$store.commit("update", ["isLogin", false]);
+      // 	Message({
+      // 		message: "未登录，请登录",
+      // 		type: "warning",
+      // 	});
+      // 	setTimeout(() => {
+      // 		loading.close();
+      // 		this.$router.push("/login");
+      // 	}, 2000);
+      // }
+    },
+    getnCount() {
+      let params = {
+        bid: this.$store.state.studentInfo.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getNcount", params)
+        .then((res) => {
+          console.log(res);
+          if (res.data[0].length > 0) {
+            this.$store.commit("update", ["nCount", res.data[0][0].num]);
+          } else {
+            this.$store.commit("update", ["nCount", 0]);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    exit() {
+      sessionStorage.clear();
+      this.$cookies.remove("slogin");
+      this.$cookies.remove("studentInfo");
+      this.$store.commit("update", ["isLogin", false]);
+      this.$store.commit("update", ["studentInfo", {}]);
+      Message({
+        message: "退出成功",
+        type: "success",
+      });
+      this.$router.push("/login");
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+};
 </script>
 <style>
-	* {
-		margin: 0;
-		padding: 0;
-	}
-	ul,
-	li {
-		list-style: none;
-	}
-	html,
-	body {
-		height: 100%;
-		width: 100%;
-		background: #f2f2f2;
-	}
-	body {
-		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-			"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-	}
-	#app {
-		height: 100%;
-		width: 100%;
-		background: #f2f2f2;
-		/* min-width: 1380px; */
-		min-width: 1000px;
-	}
-	.app_head {
-		height: 67.5px;
-		width: 100%;
-		background-color: rgb(129, 179, 253);
-		display: flex;
-		align-items: center;
-		min-width: 1000px;
-		flex-direction: row;
-		justify-content: space-around;
-	}
-	.logo {
-		height: 48px;
-		width: 73px;
-		background: url("./assets/logo.png");
-		background-size: 100% 100%;
-		margin-left: 20px;
-		cursor: pointer;
-	}
-	.pb_body {
-		width: 100%;
-		min-width: 1140px;
-		min-width: 745px;
-		display: inline-block;
-		height: calc(100% - 67.5px);
-		/* height: calc(100% - 67.5px - 226px); */
-		min-height: 750px;
-		background: #f2f2f2;
-		border-radius: 5px;
-		position: relative;
-		overflow: auto;
-	}
-	.pb_head {
-		font-size: 26px;
-		/* font-weight: 600; */
-		width: 95%;
-		margin: 10px auto;
-		padding: 10px 5px;
-		border-bottom: 3px solid #eee;
-	}
-	.pb_content {
-		/* height: 100%; */
-	}
-	.pb_content_body {
-		margin: 0px auto;
-		width: 100%;
-		/* overflow: auto;
+* {
+  margin: 0;
+  padding: 0;
+}
+ul,
+li {
+  list-style: none;
+}
+html,
+body {
+  height: 100%;
+  width: 100%;
+  background: #f2f2f2;
+}
+body {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+#app {
+  height: 100%;
+  width: 100%;
+  background: #f2f2f2;
+  /* 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;
+}
+.liveCss {
+  height: 100%;
+  overflow: hidden;
+}
+.pb_body {
+  width: 100%;
+  min-width: 1140px;
+  min-width: 745px;
+  display: inline-block;
+  height: calc(100% - 67.5px);
+  /* height: calc(100% - 67.5px - 226px); */
+  min-height: 750px;
+  background: #f2f2f2;
+  border-radius: 5px;
+  position: relative;
+  overflow: auto;
+}
+.pb_head {
+  font-size: 26px;
+  /* font-weight: 600; */
+  width: 95%;
+  margin: 10px auto;
+  padding: 10px 5px;
+  border-bottom: 3px solid #eee;
+}
+.pb_content {
+  /* height: 100%; */
+}
+.pb_content_body {
+  margin: 0px auto;
+  width: 100%;
+  /* overflow: auto;
 									  height: calc(100% - 120px); */
-	}
-	.user_head {
-		display: flex;
-		align-items: center;
-		margin-right: 20px;
-		font-size: 18px;
-		font-weight: 600;
-	}
-	.user_head .user_name {
-		color: #fff;
-		margin-right: 10px;
-	}
-	.user_head div {
-		display: flex;
-		align-items: center;
-		cursor: pointer;
-	}
-	.user_head .exitI {
-		background-image: url("./assets/exit.png");
-		width: 25px;
-		height: 25px;
-		background-size: 100% 100%;
-		margin-top: 1px;
-		line-height: 25px;
-		vertical-align: text-top;
-		background-repeat: no-repeat;
-	}
-	.noticeBox {
-		position: relative;
-		margin-right: 10px;
-	}
+}
+.user_head {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  font-size: 18px;
+  font-weight: 600;
+}
+.user_head .user_name {
+  color: #fff;
+  margin-right: 10px;
+}
+.user_head div {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.user_head .exitI {
+  background-image: url("./assets/exit.png");
+  width: 25px;
+  height: 25px;
+  background-size: 100% 100%;
+  margin-top: 1px;
+  line-height: 25px;
+  vertical-align: text-top;
+  background-repeat: no-repeat;
+}
+.noticeBox {
+  position: relative;
+  margin-right: 10px;
+}
 
-	.user_head .noticeI {
-		background-image: url("./assets/icon/noticeA.png");
-		width: 25px;
-		height: 25px;
-		background-size: 100% 100%;
-		margin-top: 1px;
-		line-height: 25px;
-		vertical-align: text-top;
-		background-repeat: no-repeat;
-		cursor: pointer;
-	}
-	.noticeBox span {
-		position: absolute;
-		background: red;
-		width: 15px;
-		height: 15px;
-		border-radius: 30px;
-		color: #fff;
-		text-align: center;
-		font-size: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		top: -3px;
-		right: -3px;
-	}
-	.stuWidth {
-		min-width: 1180px;
-	}
-	.app_right {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		color: #fff;
-		align-items: center;
-	}
-	.pic_img {
-		width: 30px;
-		height: 30px;
-	}
-	.pic_img > img {
-		width: 100%;
-		height: 100%;
-	}
-	.box_right_three {
-		display: flex;
-		margin: 0 25px 0px 0;
-	}
-	.box_right_three > div:nth-child(2) {
-		margin: 5px 10px 0 5px;
-		cursor: pointer;
-		line-height: 22px;
-	}
-	.bottom {
-		background: #ccc;
-		width: 100%;
-	}
-	.bottom_flex {
-		display: flex;
-		justify-content: space-around;
-	}
-	.left_bottom_flex {
-		margin: 10px 0 5px 0;
-	}
-	.left_title {
-		font-size: 18px;
-		margin: 5px 0 15px 5px;
-		color: #747474;
-	}
-	.left_content {
-		color: #767676;
-		font-size: 14px;
-	}
-	.left_content > div {
-		margin-bottom: 15px;
-	}
-	.right_bottom_flex {
-		width: 219px;
-		height: 144px;
-		margin: auto 0;
-	}
-	.right_bottom_flex > img {
-		width: 100%;
-		height: 100%;
-	}
+.user_head .noticeI {
+  background-image: url("./assets/icon/noticeA.png");
+  width: 25px;
+  height: 25px;
+  background-size: 100% 100%;
+  margin-top: 1px;
+  line-height: 25px;
+  vertical-align: text-top;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.noticeBox span {
+  position: absolute;
+  background: red;
+  width: 15px;
+  height: 15px;
+  border-radius: 30px;
+  color: #fff;
+  text-align: center;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: -3px;
+  right: -3px;
+}
+.stuWidth {
+  min-width: 1180px;
+}
+.app_right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  color: #fff;
+  align-items: center;
+}
+.pic_img {
+  width: 30px;
+  height: 30px;
+}
+.pic_img > img {
+  width: 100%;
+  height: 100%;
+}
+.box_right_three {
+  display: flex;
+  margin: 0 25px 0px 0;
+}
+.box_right_three > div:nth-child(2) {
+  margin: 5px 10px 0 5px;
+  cursor: pointer;
+  line-height: 22px;
+}
+.bottom {
+  background: #ccc;
+  width: 100%;
+}
+.bottom_flex {
+  display: flex;
+  justify-content: space-around;
+}
+.left_bottom_flex {
+  margin: 10px 0 5px 0;
+}
+.left_title {
+  font-size: 18px;
+  margin: 5px 0 15px 5px;
+  color: #747474;
+}
+.left_content {
+  color: #767676;
+  font-size: 14px;
+}
+.left_content > div {
+  margin-bottom: 15px;
+}
+.right_bottom_flex {
+  width: 219px;
+  height: 144px;
+  margin: auto 0;
+}
+.right_bottom_flex > img {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/liveProjectDetail.vue

@@ -0,0 +1,767 @@
+<template>
+  <div
+    style="
+      background: rgb(230, 234, 240);
+      width: 100%;
+      margin: 0;
+      position: relate;
+      height: 100%;
+    "
+  >
+    <div class="blackBottom">
+      <div style="color: #fff; line-height: 45px; padding-left: 15px">
+        人工智能风车实践课程
+      </div>
+      <div
+        style="
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+        "
+      >
+        <div class="blackButton" @click="answerWork" v-if="steps == 0">
+          下一步
+        </div>
+        <div class="blackButton" @click="steps = 3">提交作业</div>
+      </div>
+    </div>
+    <div class="isNoOther">
+      <div class="imgMiddle" :class="steps > 0 ? 'imghalf' : 'imgMiddle'">
+        <iframe
+          style="width: 100%; height: 100%; border: none"
+          src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/05_IoT%E5%B0%8F%E8%BD%A6%E4%B8%8E%E7%89%A9%E6%B5%81%E5%B0%8F%E8%BD%A61656484402500.pptx"
+        ></iframe>
+      </div>
+      <div
+        v-if="steps > 0 && steps < 3"
+        style="
+          background: #d0d6e4;
+          width: 40%;
+          height: 100%;
+          max-width: 40%;
+          overflow: auto;
+        "
+      >
+        <div
+          style="
+            background: #fff;
+            width: 96%;
+            margin: 10px auto;
+            height: 96%;
+            position: relative;
+          "
+          v-if="steps < 3"
+        >
+          <div
+            style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px"
+          >
+            课堂实践
+          </div>
+          <div
+            style="
+              margin-left: 25px;
+              border-bottom: 3px solid #2c83ee;
+              width: 70px;
+              padding-bottom: 3px;
+              text-align: center;
+            "
+            v-if="steps == 1"
+          >
+            开始答题
+          </div>
+          <div
+            style="
+              margin-left: 25px;
+              border-bottom: 3px solid #2c83ee;
+              width: 70px;
+              padding-bottom: 3px;
+              text-align: center;
+            "
+            v-if="steps == 2"
+          >
+            选择工具
+          </div>
+          <div class="answerBox" v-if="steps == 1">
+            <div>
+              <span class="timuButton">题目</span>
+              <span style="letter-spacing: 3px; line-height: 35px"
+                >小明有3本不同的语文书，2本不同的数学书，4本不同的英语书，小明整理书架时，要把这些书放在同一层，且相同科目的书要相邻摆放，问共有多少种摆放方式？</span
+              >
+            </div>
+            <el-radio-group v-model="answerBox" class="anserBoxCss">
+              <el-radio v-for="item1 in answer" :key="item1" :label="item1">{{
+                item1.name
+              }}</el-radio>
+            </el-radio-group>
+            <span slot="footer" class="dialog-footer sztFooter">
+              <el-button type="primary" @click="answerQue">确定</el-button>
+            </span>
+            <div class="nextStepOne" @click="answerWork">下一步</div>
+          </div>
+          <div class="answerBox" v-if="steps == 2">
+            <div class="toolList">
+              <div class="tools">
+                <div>
+                  <img
+                    src="../assets/icon/mindNetwork.png"
+                    alt=""
+                    @click="addTool(7)"
+                  />
+                </div>
+                <div>思维网格</div>
+              </div>
+              <div class="tools">
+                <div>
+                  <img
+                    src="../assets/icon/whiteBoard.png"
+                    alt=""
+                    @click="addTool(1)"
+                  />
+                </div>
+                <div>电子白板</div>
+              </div>
+              <div class="tools">
+                <div>
+                  <img
+                    src="../assets/icon/note.png"
+                    alt=""
+                    @click="addTool(2)"
+                  />
+                </div>
+                <div>便签</div>
+              </div>
+            </div>
+            <div class="nextStepOne" @click="answerWork">下一步</div>
+          </div>
+        </div>
+      </div>
+      <div v-if="steps == 3" style="width: 40%; height: 96%">
+        <div
+          style="
+            box-sizing: border-box;
+            background: rgb(255, 255, 255);
+            width: 96%;
+            height: 96%;
+            margin: 10px auto;
+            overflow: auto;
+          "
+        >
+          <div style="color: #b6b6b6; font-size: 20px; padding: 20px">
+            上传作业
+          </div>
+          <div>
+            <div v-if="upload[0].upImg.length > 0" class="hengCss">
+              <div
+                v-for="(uImg, imgIndex) in upload[0].upImg"
+                :key="imgIndex"
+                class="uploadImgPic"
+              >
+                <img :src="uImg.url" alt="" />
+                <div>{{ uImg.name }}</div>
+              </div>
+            </div>
+            <div class="uploadImg" @click="addImg($event)">
+              <img src="../assets/icon/uploadImg.png" alt="" />
+              <input
+                type="file"
+                accept="image/png,image/gif,image/jpeg"
+                style="display: none"
+                @change="beforeUpload1($event, 1)"
+              />
+            </div>
+            <div
+              style="
+                text-align: center;
+                color: rgb(182, 182, 182);
+                font-size: 20px;
+              "
+            >
+              上传截图
+            </div>
+          </div>
+          <div>
+            <div v-if="upload[0].upVedio.length > 0" class="hengCss">
+              <div
+                v-for="(uVedio, vedioIndex) in upload[0].upVedio"
+                :key="vedioIndex"
+                class="uploadImgPic"
+              >
+                <img src="../assets/uploadMp4.png" alt="" />
+                <div>{{ uVedio.name }}</div>
+              </div>
+            </div>
+            <div class="uploadImg" @click="addImg($event)">
+              <img src="../assets/icon/uploadVedio.png" alt="" />
+              <input
+                type="file"
+                accept="video/mp4,video/quicktime,video/x-msvideo"
+                style="display: none"
+                @change="beforeUpload1($event, 2)"
+              />
+            </div>
+            <div
+              style="
+                text-align: center;
+                color: rgb(182, 182, 182);
+                font-size: 20px;
+              "
+            >
+              点击上传视频
+            </div>
+          </div>
+          <div style="padding-left: 25px">
+            <span style="color: red">*</span> 简要描述
+          </div>
+          <div style="padding: 10px 0 0 25px">
+            <textarea
+              rows="6"
+              class="binfo_input"
+              cols
+              style="width: 95%; height: 120px"
+              v-model="upload[0].upIntro"
+            ></textarea>
+          </div>
+          <span
+            slot="footer"
+            class="dialog-footer sztFooter"
+            style="padding: 10% 10px 50px 0px"
+          >
+            <el-button @click="steps = 1">返回答题</el-button>
+            <el-button type="primary" @click="dialogVisible = true"
+              >确定</el-button
+            >
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="blackBottomB"></div>
+    <div v-if="proVisible" class="mask">
+      <div class="progressBox">
+        <div class="lbox">
+          <img src="../assets/loading.gif" />上传中，请稍后
+        </div>
+        <el-progress
+          :text-inside="true"
+          :stroke-width="20"
+          :percentage="progress"
+          style="width: 80%"
+        ></el-progress>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
+        提交成功
+      </div>
+      <div
+        style="
+          width: 200px;
+          background: #4d8ae0;
+          height: 35px;
+          margin: 0 auto;
+          text-align: center;
+          line-height: 35px;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+        @click="dialogVisible = false"
+      >
+        确定
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isLoading: false,
+      formLabelWidth: "100px",
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      mr: require("../assets/kc1.png"),
+      timu: [],
+      dialogVisible: false,
+      answerBox: "",
+      answer: [
+        { name: "A.1568" },
+        { name: "B.720" },
+        { name: "C.1728" },
+        { name: "D.480" },
+      ],
+      steps: 0,
+      upload: [
+        {
+          upImg: [],
+          upVedio: [],
+          upIntro: "",
+        },
+      ],
+      noneBtnImg: false,
+      proVisible: false,
+      progress: 0,
+    };
+  },
+  methods: {
+    change(val) {
+      console.log(val);
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    jump(cid) {
+      window.parent.postMessage({ cid: cid, type: "1" }, "*");
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.page = val;
+    },
+    init() {},
+    handleClose(done) {
+      done();
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    onExceed() {
+      this.$message.error("课程海报仅支持上传一张，请删除后再进行上传");
+    },
+    //uuid生成
+    guid() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
+    },
+    time() {
+      if (!this.now) {
+        this.now = new Date().getTime();
+        return true;
+      } else {
+        let time = new Date().getTime();
+        if (time - this.now > 3000) {
+          this.now = time;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    answerWork() {
+      this.steps++;
+    },
+    addTool(t) {
+      if (t == 1) {
+        window.parent.postMessage({ tools: "1" }, "*");
+      } else if (t == 2) {
+        window.parent.postMessage({ tools: "2" }, "*");
+      } else if (t == 7) {
+        window.parent.postMessage({ tools: "7" }, "*");
+      }
+    },
+    answerQue() {
+      this.dialogVisible = true;
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    imgChange(file, fileList, type) {
+      if (type == 1) {
+        var _tmp = this.upload[0].upImg;
+      } else if (type == 2) {
+        var _tmp = this.upload[0].upVedio;
+      }
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    beforeUpload1(event, type) {
+      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;
+      _this.progress = 0;
+      _this.proVisible = true;
+
+      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) + '%');
+            _this.progress = parseInt((evt.loaded * 80) / evt.total);
+          })
+          .send(function (err, data) {
+            _this.progress = 100;
+            setTimeout(() => {
+              _this.proVisible = false;
+            }, 1000);
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              if (type == 1) {
+                _this.upload[0].upImg.push({
+                  name: file.name,
+                  url: data.Location,
+                  uid: file.uid,
+                });
+                _this.imgChange(null, null, type);
+              } else if (type == 2) {
+                _this.upload[0].upVedio.push({
+                  name: file.name,
+                  url: data.Location,
+                  uid: file.uid,
+                });
+                _this.imgChange(null, null, type);
+              }
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+    search() {},
+  },
+  created() {},
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog__header {
+  background: #3d67bc !important;
+  padding: 15px 20px;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 9px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.blackBottom {
+  background: rgb(0, 0, 0);
+  height: 45px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.imgMiddle {
+  width: 100%;
+}
+
+.imgMiddle > img,
+.imghalf > img,
+.szt > img,
+.uploadImg > img,
+.uploadVedio > img,
+.uploadImgPic > img {
+  width: 100%;
+  height: 100%;
+}
+
+.blackBottomB {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+  background: rgb(0, 0, 0);
+  height: 45px;
+  width: 100%;
+}
+
+.blackBottomB > div:nth-child(1) {
+  margin-left: 10px !important;
+}
+
+.blackButton {
+  color: #fff;
+  background: rgb(179, 62, 117);
+  width: 100px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  margin: 0 25px;
+  border-radius: 5px;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.isNoOther {
+  width: 100%;
+  display: flex;
+  height: calc(100% - 90px);
+}
+
+.imghalf {
+  width: 60% !important;
+}
+.answerBox {
+  padding: 25px;
+  overflow: auto;
+  height: 70%;
+  box-sizing: border-box;
+}
+.answerTimuBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+}
+.memberBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.memberBox > div {
+  background: rgb(240, 185, 204);
+  width: 120px;
+  color: #fff;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 5px;
+  margin: 0 15px 15px 0;
+  cursor: pointer;
+}
+.viewSta {
+  background: rgb(97, 97, 97);
+  color: #bebebe;
+  margin: 20% auto 20px;
+  width: 300px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.szt {
+  width: 450px;
+  margin: 20px auto;
+}
+.sztFooter {
+  padding: 20px 10px 50px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.timuButton {
+  background: #649ef2;
+  width: 75px;
+  height: 27px;
+  line-height: 27px;
+  text-align: center;
+  border-radius: 5px;
+  color: #fff;
+  margin-right: 20px;
+  display: inline-block;
+}
+.anserBoxCss {
+  margin: 30px 0 20px 0;
+}
+.anserBoxCss >>> .el-radio__label {
+  font-size: 18px;
+}
+.anserBoxCss >>> .el-radio__inner {
+  border-radius: 0px !important;
+}
+.nextStepOne {
+  background: #6b92c9;
+  color: #fff;
+  width: 110px;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  font-size: 14px;
+  border-radius: 5px;
+  position: absolute;
+  bottom: 50px;
+  left: 40%;
+  cursor: pointer;
+}
+.toolList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.tools {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 20px;
+}
+.tools > div:nth-child(1) {
+  width: 60px;
+}
+.tools > div:nth-child(1) > img {
+  width: 100%;
+  height: 100%;
+}
+.uploadImg {
+  width: 200px;
+  margin: 10px auto 0;
+  cursor: pointer;
+}
+.upImg {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  color: rgb(182, 182, 182);
+  font-size: 20px;
+}
+
+.binfo_input {
+  font: inherit;
+  color: currentColor;
+  width: 100%;
+  margin: 0;
+  padding: 15px 14px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  box-sizing: content-box;
+  background: none;
+  -webkit-tap-highlight-color: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  box-sizing: border-box;
+  resize: none;
+}
+
+.binfo_input:focus-visible {
+  border: 1px solid rgba(61, 103, 188);
+}
+.hengCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 5px 0 20px 20px;
+}
+.uploadImgPic {
+  width: 100px;
+  height: 100px;
+  margin: 0 20px 30px 0;
+}
+.uploadImgPic > div {
+  width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mask {
+  background-color: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.progressBox {
+  width: 500px;
+  height: 180px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox >>> .el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+</style>

src/components/liveRoom.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="body_student">
+        <div class="student_head">
+          <div class="box_course">
+            <div class="wheel">
+              <img
+                :src="
+                  studentMessage.headportrait != null
+                    ? studentMessage.headportrait
+                    : tx
+                "
+                alt=""
+              />
+            </div>
+            <div class="right_box">
+              <div class="right_box_title">{{ studentMessage.name ? studentMessage.name : "暂无名称" }}</div>
+              <div class="people">
+                <div>
+                  <span>班级：</span><span>{{ studentMessage.cname ? studentMessage.cname : "暂无班级" }}</span>
+                </div>
+                <div style="margin-left: 50px">
+                  <span>所属学校：</span><span>{{ studentMessage.sname ? studentMessage.sname : "暂无学校" }}</span>
+                </div>
+              </div>
+              <div>
+                <span>手机号码：</span
+                ><span>{{ studentMessage.phonenumber ? studentMessage.phonenumber : "暂无手机号" }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div class="myProject">我的项目</div>
+          <div class="project_box">
+            <div
+              class="three_box_inthis"
+              v-for="(item, index) in myCourse"
+              :key="index"
+            >
+              <div
+                class="project"
+                @click="
+                  goTo(
+                    '/liveProjectDetail?courseId=' +
+                      item.courseid +
+                      '&userid=' +
+                      userid + '&oid=' + oid
+                  )
+                "
+              >
+                <!-- <img
+                  :src="
+                    item.cover != null && item.cover != ''
+                      ? JSON.parse(item.cover)[0].url
+                      : mpj
+                  "
+                  alt=""
+                /> -->
+				<img
+                  :src="
+                    mpj
+                  "
+                  alt=""
+                />
+              </div>
+              <div class="projct_nav">
+                <div
+                  style="font-size: 18px"
+                  @click="
+                    goTo(
+                      '/courseDetail?courseId=' +
+                        item.courseid +
+                        '&userid=' +
+                        userid + '&oid=' + oid
+                    )
+                  "
+                >
+                  {{ item.title }}
+                </div>
+				<div style="color: #2FDB88">
+                  <!-- 共{{ JSON.parse(item.chapters).length }}讲 -->
+                  共4讲
+                </div>
+                <div>
+                  <span style="color: #999">{{ item.createTime }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myCourse: [
+          {cover:[],title:"认识种子的起源",chapters:[],createTime:new Date().getTime()},
+          {cover:[],title:"人工智能风车实践课程",chapters:[],createTime:new Date().getTime()},
+      ],
+      studentMessage: [],
+      tx: require("../assets/avatar.png"),
+      mpj: require("../assets/project.png"),
+      userid: this.$route.query.userid,
+      oid:this.$route.query.oid,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    selectSDetail() {
+      let params = {
+        uid: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectSDetail", params)
+        .then((res) => {
+          this.studentMessage = res.data[0][0];
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        }); 
+    },
+    
+  },
+  created() {
+    this.selectSDetail();
+    document.scrollingElement.scrollTop = 0;
+  },
+};
+</script>
+
+<style scoped>
+.body_student {
+  margin: 0px auto;
+  width: 98%;
+  height: 100%;
+}
+.student_head {
+  width: 100%;
+  margin: 0 auto;
+  height: 30%;
+  background-image: linear-gradient(90deg, #30c499, #75ceba);
+  color: #fff;
+}
+.wheel > img,
+.project > img {
+  width: 100%;
+  height: 100%;
+}
+.box_course {
+  display: flex;
+  padding: 35px 0 25px 60px;
+  align-items: center;
+}
+.wheel {
+  width: 210px;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  /* justify-content: space-around; */
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+  margin: 30px 0 20px 0px;
+}
+.student_body {
+  width: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+  min-height: 1000px;
+}
+.project {
+  width: 100%;
+}
+.project_box {
+      display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.three_box_inthis {
+  display: flex;
+    width: 21%;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 1px solid #ccc;
+    margin: 15px;
+}
+.projct_nav {
+  margin-left: 5px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+}
+
+.projct_nav > div:nth-child(1) {
+  cursor: pointer;
+}
+
+.projct_nav > div{
+	margin-bottom: 5px;
+}
+
+.myProject {
+  padding: 20px 20px 10px 0;
+  border-bottom: 1px solid #ccc;
+  margin-left: 20px;
+  width: 95%;
+}
+</style>

src/components/tools/leftBar.vue

@@ -86,6 +86,24 @@
             </div>
             <span slot="title">素材库</span>
           </el-menu-item>
+          <el-menu-item index="/liveRoom">
+            <div class="img" v-if="path == '/liveRoom'">
+              <img src="../../assets/icon/new-active.svg" alt="" />
+            </div>
+            <div class="img" v-else>
+              <img src="../../assets/icon/notice.png" alt="" />
+            </div>
+            <span slot="title">实时课程</span>
+          </el-menu-item>
+          <el-menu-item index="/liveProjectDetail">
+            <div class="img" v-if="path == '/liveProjectDetail'">
+              <img src="../../assets/icon/new-active.svg" alt="" />
+            </div>
+            <div class="img" v-else>
+              <img src="../../assets/icon/notice.png" alt="" />
+            </div>
+            <span slot="title">我的项目详情</span>
+          </el-menu-item>
           <!-- <el-menu-item index="/ask">
             <div class="img" v-if="path == '/ask'">
               <img

src/router/index.js

@@ -12,73 +12,87 @@ import score from '@/components/score'
 import notice from '@/components/notice'
 import noticeDetail from '@/components/noticeDetail'
 import study from '@/components/study'
+import liveRoom from '@/components/liveRoom'
+import liveProjectDetail from '@/components/liveProjectDetail'
 
 Vue.use(Router).use(ElementUI)
 
 export default new Router({
-  routes: [
-    // {
-    //   path: '/login',
-    //   name: 'login',
-    //   component: login
-    // },
-    {
-      path:'/',
-      redirect:'/index'
-    },
-    {
-      path: '/index',
-      name: 'index',
-      component: index,
-      requireAuth:''
-    },
-    {
-      path: '/courseDetail',
-      name: 'courseDetail',
-      component: courseDetail,
-      requireAuth: ''
-    },
-    {
-      path: '/mine',
-      name: 'mine',
-      component: mine,
-      requireAuth: ''
-    },
-    {
-      path: '/project',
-      name: 'project',
-      component: project,
-      requireAuth: ''
-    },
-    {
-      path: '/works',
-      name: 'works',
-      component: works,
-      requireAuth: ''
-    },
-    {
-      path: '/score',
-      name: 'score',
-      component: score,
-      requireAuth: ''
-    },
-    {
-      path: '/notice',
-      name: 'notice',
-      component: notice,
-      requireAuth: ''
-    },
-    {
-      path: '/noticeDetail',
-      name: 'noticeDetail',
-      component: noticeDetail,
-      requireAuth: ''
-    },
-    {
-      path: '/study',
-      name: 'study',
-      component: study,
-      requireAuth: ''
-    },
-  ]
-})
+    routes: [
+        // {
+        //   path: '/login',
+        //   name: 'login',
+        //   component: login
+        // },
+        {
+            path: '/',
+            redirect: '/index'
+        },
+        {
+            path: '/index',
+            name: 'index',
+            component: index,
+            requireAuth: ''
+        },
+        {
+            path: '/courseDetail',
+            name: 'courseDetail',
+            component: courseDetail,
+            requireAuth: ''
+        },
+        {
+            path: '/mine',
+            name: 'mine',
+            component: mine,
+            requireAuth: ''
+        },
+        {
+            path: '/project',
+            name: 'project',
+            component: project,
+            requireAuth: ''
+        },
+        {
+            path: '/works',
+            name: 'works',
+            component: works,
+            requireAuth: ''
+        },
+        {
+            path: '/score',
+            name: 'score',
+            component: score,
+            requireAuth: ''
+        },
+        {
+            path: '/notice',
+            name: 'notice',
+            component: notice,
+            requireAuth: ''
+        },
+        {
+            path: '/noticeDetail',
+            name: 'noticeDetail',
+            component: noticeDetail,
+            requireAuth: ''
+        },
+        {
+            path: '/study',
+            name: 'study',
+            component: study,
+            requireAuth: ''
+        },
+        {
+            path: '/liveRoom',
+            name: 'liveRoom',
+            component: liveRoom,
+            requireAuth: ''
+        },
+        {
+            path: '/liveProjectDetail',
+            name: 'liveProjectDetail',
+            component: liveProjectDetail,
+            requireAuth: ''
+        },
+    ]
+})