lsc 1 year ago
parent
commit
dbf7683535

+ 1 - 1
dist/index.html

@@ -18,7 +18,7 @@
       border-radius: 10px;
       -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
       background-color: rgba(0, 0, 0, 0.1);
-    }</style><link href=./static/css/app.79a0197e04769d4c71412c28f3046d9e.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.8d7171b1fe858bda1433.js></script><script type=text/javascript src=./static/js/app.bd28461ad1ae4d42ff07.js></script></body></html><script>function stopSafari() {
+    }</style><link href=./static/css/app.2e62ef2f0f752469c44e6bf875fdb7a3.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.8d7171b1fe858bda1433.js></script><script type=text/javascript src=./static/js/app.81590561af5eddf7434b.js></script></body></html><script>function stopSafari() {
     //阻止safari浏览器双击放大功能
     let lastTouchEnd = 0  //更新手指弹起的时间
     document.documentElement.addEventListener("touchstart", function (event) {

File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.2e62ef2f0f752469c44e6bf875fdb7a3.css


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.2e62ef2f0f752469c44e6bf875fdb7a3.css.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.79a0197e04769d4c71412c28f3046d9e.css


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.79a0197e04769d4c71412c28f3046d9e.css.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.81590561af5eddf7434b.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.81590561af5eddf7434b.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.bd28461ad1ae4d42ff07.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map


+ 12 - 3
src/components/studentIndex.vue

@@ -652,10 +652,19 @@ export default {
             }
 
             if (res.data[2].length == 0 && res.data[3].length == 0) {
-              for (var j = 0; j < res.data[1].length; j++) {
-                if (res.data[0][i].id == res.data[1][j].pid) {
-                  this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
+              // for (var j = 0; j < res.data[1].length; j++) {
+              //   if (res.data[0][i].id == res.data[1][j].pid) {
+              //     this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
+              //   }
+              // }
+              if(this.org == '150e3120-9195-11ed-b13d-005056b86db5'){
+                for (var j = 0; j < res.data[1].length; j++) {
+                  if (res.data[0][i].id == res.data[1][j].pid) {
+                    this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
+                  }
                 }
+              }else{
+                this.CourseType = []
               }
             } else {
               if (res.data[2].length > 0) {

+ 1134 - 0
src/components/studio/courseDetail.vue

@@ -0,0 +1,1134 @@
+<template>
+  <div class="pb_content">
+    <div class="pb_content_body" style="height: 100%">
+      <div class="body_student">
+        <div class="student_head">
+          <div v-if="screenType != 2 && screenType != '2s'" class="return" @click.stop="
+            goTo(
+              '/studioIndex?userid=' +
+              userid +
+              '&oid=' +
+              oid +
+              '&org=' +
+              org +
+              '&cid=' +
+              classId +
+              '&tType=' +
+              tType +
+              '&role=' +
+              role +
+              '&screenType=' +
+              screenType
+            )
+          ">
+            返回
+          </div>
+          <div class="box_course">
+            <div class="wheel">
+              <img style="object-fit: cover" :src="
+                this.courseDetail.cover != null &&
+                  this.courseDetail.cover != ''
+                  ? JSON.parse(this.courseDetail.cover).length > 0
+                    ? JSON.parse(this.courseDetail.cover)[0].url
+                    : mr
+                  : mr
+              " alt />
+            </div>
+            <div class="right_box">
+              <div class="rightT">
+                <div class="right_box_title">{{ courseDetail.title }}</div>
+                <div class="jd">{{ chapInfo.length }}阶段</div>
+                <div class="jd">{{ rw }}任务</div>
+              </div>
+              <div class="cType">
+                <div class="all_choose" v-for="(item, index) in courseType" :key="index">
+                  <span style="color: #6c6c6c">{{ item + ":" }}</span>
+                  <span class="type_children" v-for="(item2, index2) in courseTypeJson[item]" :key="index2">{{ item2
+                  }}</span>
+                </div>
+              </div>
+              <div class="cType" style="font-size: 18px; color: #6c6c6c">
+                <div style="min-width:150px">
+                  创建者:<span style="color: #000">{{
+                      courseDetail.username
+                  }}</span>
+                </div>
+                <div class="Tname" v-if="Tname.length > 0" @click="TnameCheck = !TnameCheck">
+                  协同人员:<span v-for="(tname, tIndex) in  TnameCheck ? Tname : Tname.slice(0,6)" :key="tIndex" style="margin: 0 5px; color: #000">{{ tname
+                  }}</span><span style="margin: 0 5px; color: #b2b2b2" v-if="!TnameCheck && Tname.length > 6">更多....</span>
+                </div>
+              </div>
+              <div class="cType" style="font-size: 18px; color: #6c6c6c">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div class="sLeft" v-if="courseDetail.brief">
+            <div class="courseT">课程详情</div>
+            <div class="courseTd">{{ courseDetail.brief }}</div>
+          </div>
+          <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
+            <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
+              <div class="blue_box_one" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
+                <div>第{{ index + 1 }}阶段</div>
+                <div :title="item.dyName">{{ item.dyName }}</div>
+                <div>{{ item.chapterInfo[0].taskJson.length }}个任务</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">请选择阶段</div>
+          <div style="
+              padding: 20px 30px;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: wrap;
+            ">
+            <div class="blue_box" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
+              <div>第{{ index + 1 }}阶段</div>
+              <div>{{ item.dyName }}</div>
+              <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
+            </div>
+          </div>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Heatmap from '../tools/heatmap.vue'
+export default {
+  components: {
+    Heatmap,
+  },
+  data() {
+    return {
+      choose: 0,
+      dialogVisible: false,
+      id: this.$route.query.courseId,
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      classId: this.$route.query.cid,
+      tType: this.$route.query.tType,
+      role: this.$route.query.role,
+      screenType: this.$route.query.screenType,
+      courseDetail: {},
+      aStudentName: [],
+      chapInfo: [],
+      courseType: [],
+      Tname: [],
+      TnameCheck:false,
+      courseTypeJson: {},
+      userinfo: [],
+      mr: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/noBanner1656409780264.jpg",
+      rw: 0,
+      chaptersJson: {},
+      type: 1,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    addUserRate(i) {
+      // var suid = this.userid;
+      // if (
+      //   JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1 &&
+      //   JSON.parse(this.courseDetail.userid) != suid
+      // ) {
+      //   this.$message.error("你没有该权限");
+      //   return;
+      // }
+      // var a =
+      //   this.courseDetail.course_student != ""
+      //     ? JSON.parse(this.courseDetail.course_student)
+      //     : "";
+      // if (this.courseDetail.userid != suid) {
+      //   if (this.userinfo.type == 2) {
+      //     if (a != "") {
+      //       if (
+      //         JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1
+      //       ) {
+      //         this.$message.error("你没有该权限");
+      //         return;
+      //       }
+      //     } else {
+      //       this.$message.error("暂无项目学员,请联系老师添加项目学员!");
+      //       return;
+      //     }
+      //   }
+      // }
+      // let params = {
+      //   uid: this.userid,
+      //   cid: this.id,
+      // };
+      // this.ajax
+      //   .get(this.$store.state.api + "addUserR", params)
+      //   .then((res) => {
+      //     console.log(res.data);
+      //     this.updateVc();
+      this.goTo(
+        "/studyStudentStudio?type=" +
+        i +
+        "&courseId=" +
+        this.id +
+        "&userid=" +
+        this.userid +
+        "&oid=" +
+        this.oid +
+        "&org=" +
+        this.org +
+        "&cid=" +
+        this.classId +
+        '&role=' +
+        this.role +
+        "&tType=" +
+        this.tType +
+        "&screenType=" +
+        this.screenType
+      );
+
+      // })
+      // .catch((err) => {
+      //   console.error(err);
+      // });
+    },
+    getCourseDetail() {
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255, 0.7)",
+        target: document.querySelector(".student_table"),
+      });
+      let params = {
+        courseId: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectStudioCourseDetail2", params)
+        .then((res) => {
+          loading.close();
+          // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.courseDetail = res.data[0][0];
+          var a = res.data[0];
+          var b = res.data[1];
+          var c = res.data[2];
+          for (var i = 0; i < b.length; i++) {
+            // if (!this.id) {
+            //   this.courseType[b[i].id] = [];
+            // }
+            for (var j = 0; j < a.length; j++) {
+              if (b[i].id == a[j].pid) {
+                if (!this.courseTypeJson[b[i].name]) {
+                  this.courseType.push(b[i].name);
+                  this.courseTypeJson[b[i].name] = [];
+                }
+                this.courseTypeJson[b[i].name].push(a[j].name);
+              }
+            }
+          }
+          for (var k = 0; k < c.length; k++) {
+            this.Tname.push(c[k].name);
+          }
+          console.log(this.courseTypeJson.length);
+          this.aStudentName = res.data[2];
+          this.chapInfo = JSON.parse(this.courseDetail.chapters);
+          for (var z = 0; z < this.chapInfo.length; z++) {
+            this.rw += this.chapInfo[z].chapterInfo[0].taskJson.length;
+          }
+
+
+          let _chapters = JSON.parse(a[0].chapters)
+          let _works = res.data[3];
+          let _sCont = res.data[4];
+          let _comment = res.data[5];
+
+          let _chaptersJson = {
+            chapterState: _chapters,
+            state: {
+              stage: _chapters.length,
+              finish: 0,
+              learing: 0,
+            },
+            tool: [],
+            chapter: [],
+            time: {},
+            startTime: _works.length ? _works[0].time : '',
+            work: [],
+            studentCount: _sCont[0].usercount
+          }
+          let timeAarry = []
+          for (var j = 0; j < _works.length; j++) {
+            timeAarry.push(_works[j].vtime)
+          }
+          timeAarry.forEach(item => {
+            _chaptersJson.time[item] = (_chaptersJson.time[item] + 1) || 1
+          })
+          for (var i = 0; i < _chapters.length; i++) {
+            _chaptersJson.chapterState[i].isFinsh = false;
+            _chaptersJson.tool[i] = []
+            _chaptersJson.chapter[i] = []
+            _chaptersJson.work[i] = { name: _chapters[i].dyName, chapter: [] }
+            for (var j = 0; j < _works.length; j++) {
+              if (i == _works[j].stage) {
+                _chaptersJson.chapterState[i].isFinsh = true;
+                _chaptersJson.state.finish++
+                break;
+              }
+            }
+            let el = _chapters[i].chapterInfo[0].taskJson;
+            for (var z = 0; z < el.length; z++) {
+              _chaptersJson.tool[i][z] = []
+              _chaptersJson.chapter[i][z] = []
+              _chaptersJson.work[i].chapter[z] = { name: el[z].task, task: [] }
+              _chaptersJson.work[i].is = false;
+              let tools = el[z].toolChoose
+              for (var k = 0; k < tools.length; k++) {
+                _chaptersJson.work[i].chapter[z].task[k] = { tool: tools[k].tool[0], works: [], likeCount: 0, commentCount: 0, score: 0, isScore: 0 }
+                for (var j = 0; j < _works.length; j++) {
+                  if (i == _works[j].stage && z == _works[j].task && k == _works[j].tool) {
+                    _chaptersJson.work[i].chapter[z].task[k].works.push(_works[j])
+                    if (_works[j].score) {
+                      _chaptersJson.work[i].chapter[z].task[k].score += JSON.parse(_works[j].score).wScore
+                      _chaptersJson.work[i].chapter[z].task[k].isScore++
+                    }
+                  }
+                }
+                for (var j = 0; j < _comment.length; j++) {
+                  if (i == _comment[j].stage && z == _comment[j].task && k == _comment[j].tool) {
+                    if (_comment[j].cType == 1) {
+                      _chaptersJson.work[i].chapter[z].task[k].likeCount++
+                    }
+
+                    if (_comment[j].cType == 2) {
+                      _chaptersJson.work[i].chapter[z].task[k].commentCount++
+                    }
+                  }
+                }
+                // if (_chaptersJson.chapter[i][z].indexOf(tools[k].tool[0]) == -1) {
+                //   _chaptersJson.tool[i][z].push(tools[k].tool[0])
+                // }
+                _chaptersJson.chapter[i][z][k] = { tool: tools[k].tool[0] }
+                _chaptersJson.tool[i][z][k] = { tool: tools[k].tool[0] }
+              }
+            }
+          }
+          _chaptersJson.state.learing = _chaptersJson.state.stage - _chaptersJson.state.finish
+          this.chaptersJson = _chaptersJson
+          // debugger
+        })
+        .catch((err) => {
+          loading.close();
+          console.error(err);
+        });
+    },
+    getUser() {
+      let params = { uid: this.userid };
+      this.ajax
+        .get(this.$store.state.api + "getUser", params)
+        .then((res) => {
+          this.userinfo = res.data[0][0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    // getSName() {
+    // 	let params = {
+    // 		uid: JSON.stringify(this.courseDetail.course_student),
+    // 	};
+    // 	this.ajax
+    // 		.get(this.$store.state.api + "selectSName", params)
+    // 		.then((res) => {
+    // 			this.aStudentName = res.data[0];
+    // 		})
+    // 		.catch((err) => {
+    // 			console.error(err);
+    // 		});
+    // },
+  },
+  created() {
+    this.getCourseDetail();
+    this.getUser();
+    document.scrollingElement.scrollTop = 0;
+    // this.getSName();
+  },
+};
+</script>
+
+<style scoped>
+@media screen and (max-width: 1024px) {
+  /* .Tname {
+    width: 500px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  } */
+}
+
+.body_student {
+  margin: 10px auto;
+  width: 98%;
+  height: 100%;
+}
+
+.student_head {
+  width: 100%;
+  background: #fff;
+  height: 30%;
+  position: relative;
+}
+
+.wheel {
+  width: 250px;
+  max-height: 146px;
+  display: flex;
+  align-items: center;
+}
+
+.man {
+  width: 16px;
+  height: 16px;
+}
+
+.wheel>img,
+.man>img {
+  width: 100%;
+  height: 100%;
+}
+
+.box_course {
+  display: flex;
+  padding: 25px 0 20px 60px;
+}
+
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  align-items: flex-start;
+  width: calc(100% - 350px);
+}
+
+.right_box_title {
+  font-size: 23px;
+  max-width: calc(100% - 190px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.people {
+  display: flex;
+  margin-top: 20px;
+}
+
+.person {
+  margin-left: 10px;
+  /* line-height: 18px; */
+}
+
+.now_study {
+  width: 150px;
+  height: 35px;
+  color: #fff;
+  background: #4a9eed;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 5px;
+  font-size: 13px;
+  cursor: pointer;
+  margin-top: 30px;
+}
+
+.choose_who {
+  display: flex;
+  margin: 15px 0 0 25px;
+}
+
+.who_choose {
+  height: 28px;
+  cursor: pointer;
+}
+
+.choose_who>div:nth-child(2) {
+  margin-left: 35px;
+}
+
+.choose {
+  border-bottom: 5px solid #4a9eed;
+  color: #4a9eed;
+}
+
+.student_body {
+  display: flex;
+}
+
+.student_body,
+.right {
+  width: 100%;
+  margin: 10px auto;
+  min-height: 688px;
+}
+
+.nav {
+  margin: auto 25px;
+  width: 80%;
+  padding-top: 5px;
+  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,
+.right_one {
+  width: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 10px;
+  min-height: 688px;
+}
+
+.student {
+  width: 85%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: auto 10px;
+}
+
+.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: #303030;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 10px;
+  padding: 0px 10px 0px;
+}
+
+.dialog_change>>>.el-dialog__headerbtn {
+  top: 10px !important;
+  right: 10px !important;
+}
+
+.dialog_change>>>.el-dialog__title {
+  color: #fff;
+  font-size: 14px;
+  line-height: 5px;
+}
+
+.dialog_change>>>.el-dialog__body {
+  background: #f5f5f5;
+}
+
+.blue_box {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.blue_box,
+.blue_box_one {
+  width: 30%;
+  height: 100px;
+  text-align: center;
+  color: #fff;
+  background-image: linear-gradient(90deg, #477cd7, #65b9fc);
+  border-radius: 15px;
+  margin: 15px 0 15px 15px;
+  cursor: pointer;
+}
+
+.blue_box_one {
+  width: 200px;
+  height: 200px;
+  background-image: linear-gradient(90deg, #477cd7, #65b9fc);
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.blue_box_one>div {
+  margin: 5px 0;
+}
+
+.blue_box_one>div:nth-child(1) {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.blue_box>div:nth-child(2) {
+  margin-top: 10px;
+}
+
+.blue_box_one>div:nth-child(2) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 100%;
+  text-align: center;
+  max-width: calc(100% - 85px);
+  margin: 0 auto;
+}
+
+.return {
+  background: #205cc6;
+  width: 70px;
+  height: 30px;
+  color: #fff;
+  text-align: center;
+  line-height: 32px;
+  margin-right: 20px;
+  cursor: pointer;
+  border-radius: 5px;
+  position: absolute;
+  right: 0;
+  top: 24px;
+  font-size: 14px;
+}
+
+.return>img {
+  width: 100%;
+  height: 100%;
+}
+
+.cType {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.cType>div>span {
+  font-size: 18px;
+}
+
+.type_children+.type_children {
+  margin-left: 10px;
+}
+
+.all_choose {
+  margin-right: 10px;
+  /* max-width: 250px; */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rightT {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: calc(100% - 20px);
+}
+
+.jd {
+  background: #4a9eed;
+  margin-left: 15px;
+  border-radius: 10px;
+  color: #fff;
+  width: 70px;
+  height: 25px;
+  text-align: center;
+  line-height: 25px;
+}
+
+.sLeft {
+  width: 14%;
+  margin-right: 10px;
+  background: rgb(255, 255, 255);
+  padding: 20px 15px 0 15px;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+
+.courseT {
+  border-left: 3px solid #2e66c9;
+  padding-left: 5px;
+  color: #2e66c9;
+  font-weight: bold;
+}
+
+.courseTd {
+  padding-top: 15px;
+  height: 700px;
+  overflow: auto;
+  word-break: break-word;
+}
+
+.courseTd::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.courseTd::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #eee;
+}
+
+/*定义滑块 内阴影+圆角*/
+.courseTd::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.rightTd,
+.noBRight {
+  width: 84%;
+  background: #fff;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.noBRight {
+  width: 100%;
+}
+
+.Tname {
+  cursor: pointer;
+  margin-left: 40px;
+  word-break: break-all;
+  width:auto;
+  /* overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis; */
+}
+
+/* .TnameC{
+  width:auto;
+  overflow: unset;
+  white-space: unset;
+  text-overflow: unset;
+} */
+
+
+.detail {
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.statebox {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin-left: 30px;
+}
+
+.statebox div {
+  padding: 10px 20px;
+  border-radius: 5px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+}
+
+.statebox div+div {
+  margin-left: 20px;
+}
+
+.statebox div span {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.statebox div span+span {
+  margin-left: 10px;
+  color: #1463eb;
+}
+
+
+.p_tool_box {
+  display: flex;
+  flex-wrap: wrap;
+  background: rgb(217, 227, 239);
+  /* color: #fff; */
+  padding: 0 15px 10px;
+  align-items: center;
+  justify-content: space-evenly;
+  border-radius: 5px;
+  height: 200px;
+  overflow: auto;
+}
+
+.p_tool {
+  display: flex;
+  margin-top: 10px;
+}
+
+.p_tool>div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 60px;
+}
+
+.p_tool>div img {
+  width: 50px;
+  height: 50px;
+}
+
+.p_tool>div>div {
+  margin-top: 5px;
+  font-size: 12px;
+}
+
+.p_tool_box2 {
+  padding: 10px 15px;
+}
+
+
+.p_tool2 {
+  margin-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* margin-bottom: 10px; */
+}
+
+.p_tool2>div:nth-child(1) {
+  margin-bottom: 10px;
+}
+
+.toolBigBox {
+  display: flex;
+  flex-direction: column;
+}
+
+.toolSta {
+  display: flex;
+  margin: 20px 0 0;
+}
+
+.toolSta>div {
+  display: flex;
+}
+
+.toolSta>div+div {
+  margin-left: 50px;
+}
+
+.toolSta>div>div:nth-child(1) {
+  margin: 10px 10px 0 0;
+}
+
+.toolSta>div>div:nth-child(2)>div {
+  background: rgb(79, 140, 223);
+  color: #fff;
+  display: flex;
+  padding: 10px 15px;
+  min-width: 150px;
+  font-size: 16px;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.toolSta>div:nth-child(2)>div:nth-child(2)>div {
+  background: rgb(53, 103, 172);
+}
+
+.toolSta>div>div:nth-child(2)>div+div {
+  margin-top: 10px;
+}
+
+.toolSta>div>div:nth-child(2)>div>div+div {
+  margin: 0 20px;
+}
+
+.p_tool2 .toolbox {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.checkBox {
+  display: flex;
+  padding: 20px 0 0 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.checkBox span {
+  padding: 0 10px 5px;
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.checkBox span+span {
+  margin-left: 20px;
+}
+
+.checkBox .active {
+  border-bottom: 2px solid rgb(75, 151, 229);
+  cursor: pointer;
+}
+
+.detail_box {
+  background-color: rgb(231, 240, 247);
+  padding: 15px 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.detail_box+.detail_box {
+  margin-top: 20px;
+}
+
+.detail_box .title {
+  display: flex;
+  align-items: center;
+
+}
+
+.detail_box .title>span:nth-child(1) {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.detail_box .box {
+  margin-top: 20px;
+  background-color: #fff;
+  padding: 15px 20px;
+  border-radius: 5px;
+  /* width: 100%; */
+  box-sizing: border-box;
+  overflow: auto;
+
+}
+
+.progress {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  width: 100%;
+  overflow: auto;
+  padding: 15px 0;
+}
+
+.chapter {
+  margin-right: 10px;
+}
+
+.chapter+.chapter {
+  padding-left: 10px;
+  border-left: 1px solid rgb(220, 220, 220);
+}
+
+.chapter .stage {
+  width: 100%;
+  color: #fff;
+  background: linear-gradient(90deg, #477cd7, #65b9fc);
+  border-radius: 5px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 18px;
+  text-align: center;
+}
+
+.chapter .task {
+  display: flex;
+  width: 100%;
+}
+
+.chapter .task .taskBox {
+  min-width: 110px;
+  max-width: 180px;
+  height: 100%;
+}
+
+.chapter .task .taskBox+.taskBox {
+  margin-left: 10px;
+}
+
+.chapter .task .taskBox .taskName {
+  text-align: center;
+  margin: 10px
+}
+
+.toolIcon::before {
+  content: '';
+  width: 26px;
+  height: 26px;
+  display: inline-block;
+  background-image: url(../../assets/icon/toolion.png);
+  background-size: 100% 100%;
+}
+
+.toolIcon::before {
+  content: '';
+  width: 26px;
+  height: 26px;
+  display: inline-block;
+  background-image: url(../../assets/icon/toolion.png);
+  background-size: 100% 100%;
+}
+
+.taskIcon::before {
+  content: '';
+  width: 26px;
+  height: 26px;
+  display: inline-block;
+  background-image: url(../../assets/icon/task.png);
+  background-size: 100% 100%;
+}
+
+.finishIcon::before {
+  content: '';
+  width: 26px;
+  height: 26px;
+  display: inline-block;
+  background-image: url(../../assets/icon/finish.png);
+  background-size: 100% 100%;
+}
+
+.learningIcon::before {
+  content: '';
+  width: 22px;
+  height: 22px;
+  display: inline-block;
+  background-image: url(../../assets/icon/learning.png);
+  background-size: 100% 100%;
+}
+
+.frequencyIcon::before {
+  content: '';
+  width: 26px;
+  height: 26px;
+  display: inline-block;
+  background-image: url(../../assets/icon/frequency.png);
+  background-size: 100% 100%;
+}
+
+.timeIcon::before {
+  content: '';
+  width: 26px;
+  height: 26px;
+  display: inline-block;
+  background-image: url(../../assets/icon/time.png);
+  background-size: 100% 100%;
+}
+
+
+.chapter_time_box {
+  border-left: 5px solid #f0f0f0;
+  padding: 0 30px;
+  box-sizing: border-box;
+  margin-top: 35px;
+}
+
+.c_box {
+  padding-top: 40px;
+  position: relative;
+  margin-top: 45px;
+}
+
+.c_box .stage_box {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -20px;
+  left: -45px;
+}
+
+.c_box .stage_box .yuan {
+  width: 25px;
+  height: 25px;
+  background: rgb(244, 244, 244);
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.c_box .stage_box .yuan::before {
+  content: '';
+  width: 15px;
+  height: 15px;
+  background: rgb(59, 149, 238);
+  border-radius: 25px;
+}
+
+.c_box .stage_box .stage {
+  background: linear-gradient(90deg, #477cd7, #65b9fc);
+  border-radius: 5px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 18px;
+  color: #fff;
+  width: fit-content;
+  padding: 0 20px;
+}
+
+.s_up {
+  cursor: pointer;
+  transition: all .5s;
+}
+
+.s_up img {
+  width: 35px;
+}
+
+.s_up2 {
+  transform: rotate(90deg);
+}
+</style>

+ 977 - 0
src/components/studio/index.vue

@@ -0,0 +1,977 @@
+<template>
+  <div class="pb_content">
+    <div class="pb_content_body">
+      <div class="student_head">
+        <!-- <img src="../../assets/banner.png" alt="" /> -->
+        <el-carousel trigger="click" style="width: 100%; height: 100%">
+          <el-carousel-item v-for="item in bannerList" :key="item.id">
+            <!-- <h3 class="small">{{ item }}</h3> -->
+            <img class="imgS" :src="item.poster" alt="" />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+      <div class="reBox">
+        <div class="reTop">
+          <div>课程</div>
+          <div>
+            <div class="search" @click="search">
+              <img src="../../assets/icon/search.png" alt="" />
+            </div>
+            <input class="sInput" type="text" placeholder="请输入关键字" v-model="sCourse" @keyup.enter="search"/>
+          </div>
+        </div>
+        <div class="choose">
+          <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index"
+            :style="{ margin: !CourseTypeJson[item.id].length && 0 }">
+            <div v-if="CourseTypeJson[item.id].length"><span>{{ item.name }}</span>:</div>
+            <div class="typeCss" v-if="CourseTypeJson[item.id].length">
+              <div class="cName" @click="getCourse(item.name, '', item.id, 1)"
+                :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''" style="min-width: fit-content;width: auto;">
+                全部
+              </div>
+              <div v-for="(item1, index1) in CourseTypeJson[item.id]" :key="index + '-' + index1" :label="item1.id"
+                @click="getCourse(item.name, item.id, item1.id, 2)">
+                <div class="cName" :class="
+                  typea == item1.id || typeb == item1.id || typec == item1.id
+                    ? 'isCType'
+                    : ''
+                ">
+                  {{ item1.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="body_student">
+        <div class="typeCheck">
+          <el-switch v-model="typeCheck"></el-switch><span>分类显示</span>
+        </div>
+        <div>
+          <div class="main_box" v-loading="loading">
+            <div style="display:flex;flex-wrap:wrap" v-if="!typeCheck">
+              <div class="box_course" v-for="(item, index) in zoneClass" :key="index">
+                <div class="wheel">
+                  <img :src="
+                    item.cover
+                      ? JSON.parse(item.cover)[0].url
+                      : require('../../assets/wheel.png')
+                  " alt="" />
+                </div>
+                <div class="middle_white">
+                  <div class="textOverflow">{{ item.title }}</div>
+                  <div class="nameAndLength">
+                    <el-tooltip class="typeN" effect="light" :content="item.typename" placement="top">
+                      <div>{{ item.typename }}</div>
+                    </el-tooltip>
+
+                    <div>{{ JSON.parse(item.chapters).length }}阶段</div>
+                  </div>
+                  <div class="school_box">
+                    <el-tooltip effect="light" :content="item.school" placement="top">
+                      <div class="school">
+                        {{ item.school }}
+                      </div>
+                    </el-tooltip>
+                    <div style="color: #b4b4b4">{{ item.utime }}</div>
+                  </div>
+                </div>
+                <div class="now_study" @click="
+                  goTo(
+                    '/coursedetailStudio?courseId=' +
+                    item.courseId +
+                    '&userid=' +
+                    userid +
+                    '&oid=' +
+                    oid +
+                    '&org=' +
+                    org +
+                    '&cid=' +
+                    classId +
+                    '&tType=' +
+                    tType +
+                    '&role=' +
+                    role +
+                    '&screenType=' +
+                    screenType
+                  )
+                ">
+                  立即学习
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <div class="FirstTypeBox" v-for="(type, tindex) in CourseType2" :key="tindex">
+                <div class="title">{{ type.name }}</div>
+                <div style="display: flex;flex-flow: wrap;margin-top: 20px;">
+                  <div class="box_course" v-for="(item, index) in type.course" :key="tindex + '-' + index">
+                    <div class="wheel">
+                      <img :src="
+                        item.cover
+                          ? JSON.parse(item.cover)[0].url
+                          : require('../../assets/wheel.png')
+                      " alt="" />
+                    </div>
+                    <div class="middle_white">
+                      <div class="textOverflow">{{ item.title }}</div>
+                      <div class="nameAndLength">
+                        <el-tooltip class="typeN" effect="light" :content="item.typename" placement="top">
+                          <div>{{ item.typename }}</div>
+                        </el-tooltip>
+
+                        <div>{{ JSON.parse(item.chapters).length }}阶段</div>
+                      </div>
+                      <div class="school_box">
+                        <el-tooltip effect="light" :content="item.school" placement="top">
+                          <div class="school">
+                            {{ item.school }}
+                          </div>
+                        </el-tooltip>
+                        <div style="color: #b4b4b4">{{ item.utime }}</div>
+                      </div>
+                    </div>
+                    <div class="now_study" @click="
+                      goTo(
+                        '/coursedetailStudio?courseId=' +
+                        item.courseId +
+                        '&userid=' +
+                        userid +
+                        '&oid=' +
+                        oid +
+                        '&org=' +
+                        org +
+                        '&cid=' +
+                        classId +
+                        '&tType=' +
+                        tType +
+                        '&role=' +
+                        role +
+                        '&screenType=' +
+                        screenType
+                      )
+                    ">
+                      立即学习
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="course_empty" v-if="zoneClass.length == 0">
+              暂无课程
+            </div>
+          </div>
+        </div>
+        <div class="student_page" style="margin: 15px 0 0" v-if="zoneClass.length > 0 && !typeCheck">
+          <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" v-if="page"
+            @current-change="handleCurrentChange">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      zoneList: [],
+      zoneClass: [],
+      page: 1,
+      total: 0,
+      pageSize: 20,
+      isListAjax: false,
+      zoneListId: "",
+      bannerList: [],
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      classId: this.$route.query.cid,
+      tType: this.$route.query.tType,
+      org: this.$route.query.org,
+      role: this.$route.query.role,
+      screenType: this.$route.query.screenType,
+      CourseType: [],
+      CourseType2: [],
+      CourseTypeJson: {},
+      courseTypeId: {},
+      sCourse: "",
+      isCType: "",
+      typea: "",
+      typeb: "",
+      typed: "",
+      typef: "",
+      typeE: [],
+      loading: "",
+      typeCheck:false,
+    };
+  },
+  watch: {
+    typeCheck(newValue, oldValue) {
+      this.loading = true
+      if(newValue){
+        this.selectAll()
+      }else{
+        this.page = 1
+        this.selectAll2()
+      }
+    }
+  },
+  methods: {
+    search(){
+      if(this.typeCheck){
+        this.selectAll()
+      }else{
+        this.page = 1
+        this.selectAll2()
+      }
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    getCourse(typeName, ftypeId, typeid, type) {
+      this.page = 1;
+      this.zoneClass = [];
+      if (typeName == "类型") {
+        if (type == 1) {
+          if (this.typeE.indexOf(typeid) != -1) {
+            this.typeE.splice(this.typeE.indexOf(typeid), 1);
+          } else {
+            this.typeE.push(typeid);
+            if (this.typea != "") {
+              this.typea = "";
+            }
+          }
+        } else {
+          if (this.typea == typeid) {
+            this.typea = "";
+          } else {
+            this.typea = typeid;
+            if (this.typeE.indexOf(ftypeId) != -1) {
+              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
+            }
+          }
+        }
+      } else if (typeName == "对象") {
+        if (type == 1) {
+          if (this.typeE.indexOf(typeid) != -1) {
+            this.typeE.splice(this.typeE.indexOf(typeid), 1);
+          } else {
+            this.typeE.push(typeid);
+            if (this.typeb != "") {
+              this.typeb = "";
+            }
+          }
+        } else {
+          if (this.typeb == typeid) {
+            this.typeb = "";
+          } else {
+            this.typeb = typeid;
+            if (this.typeE.indexOf(ftypeId) != -1) {
+              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
+            }
+          }
+        }
+      } else if (typeName == "主题") {
+        if (type == 1) {
+          if (this.typeE.indexOf(typeid) != -1) {
+            this.typeE.splice(this.typeE.indexOf(typeid), 1);
+          } else {
+            this.typeE.push(typeid);
+            if (this.typec != "") {
+              this.typec = "";
+            }
+          }
+        } else {
+          if (this.typec == typeid) {
+            this.typec = "";
+          } else {
+            this.typec = typeid;
+            if (this.typeE.indexOf(ftypeId) != -1) {
+              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
+            }
+          }
+        }
+      }
+      // this.loading = this.openLoading(document.querySelector(".main_box"));
+      // if (!this.loading) {
+      //   this.loading = this.openLoading(document.querySelector(".main_box"));
+      // }
+      this.loading = true
+      if (this.typeCheck) {
+        this.selectAll();
+      } else {
+        this.selectAll2();
+      }
+    },
+    selectAll() {
+      this.zoneListId = 0;
+      this.isListAjax = true;
+      let type = '0'
+      if (!this.org || this.org == "undefined" || this.org == "null") {
+        if (this.tType == 1) {
+          type = '2'
+        }
+      } else {
+        if (this.role == 1) {
+          type = '2'
+        }
+      }
+      let params = {
+        type: type,
+        uid: this.userid,
+        oid: this.oid,
+        org: this.org,
+        typea: this.typea != undefined ? this.typea : "",
+        typeb: this.typeb != undefined ? this.typeb : "",
+        typec: this.typec != undefined ? this.typec : "",
+        typed: this.typed != undefined ? this.typed : "",
+        typef: this.typef != undefined ? this.typef : "",
+        typeE: this.typeE.join(","),
+        cu: "",
+        cn: this.sCourse,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectStudioCourseNew22Mode", params)
+        .then((res) => {
+          this.loading = false
+          this.isListAjax = false;
+          this.zoneClass = res.data[0];
+          // this.total = res.data[0].length ? res.data[0][0].num : 0;
+          let CourseType2 = JSON.parse(JSON.stringify(this.CourseType[0]))
+          for (var i = 0; i < CourseType2.length; i++) {
+            CourseType2[i].course = []
+            for (var j = 0; j < res.data[0].length; j++) {
+              if (res.data[0][j].pid && res.data[0][j].pid.indexOf(CourseType2[i].id) != -1) {
+                CourseType2[i].course.push(res.data[0][j])
+              }
+            }
+          }
+          let noTypeCourse = []
+          for (var j = 0; j < res.data[0].length; j++) {
+            if (!res.data[0][j].pid) {
+              noTypeCourse.push(res.data[0][j])
+            }
+          }
+          if (noTypeCourse.length > 0) {
+            CourseType2.push({
+              course: noTypeCourse,
+              name: '其他'
+            })
+          }
+          CourseType2 = CourseType2.filter(item => {
+            return item.course.length > 0;
+          })
+          this.CourseType2 = CourseType2
+
+          // this.selectType({
+          //   data: [res.data[1], res.data[2], res.data[3], res.data[4]],
+          // });
+          // this.selectAllType();
+          // this.getBanner({
+          //   data: [res.data[6], res.data[5], res.data[7]],
+          // });
+          this.getBanner()
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectAll2() {
+      this.zoneListId = 0;
+      this.isListAjax = true;
+      let type = '0'
+      if (!this.org || this.org == "undefined" || this.org == "null") {
+        if (this.tType == 1) {
+          type = '2'
+        }
+      } else {
+        if (this.role == 1) {
+          type = '2'
+        }
+      }
+      let params = {
+        type: type,
+        uid: this.userid,
+        oid: this.oid,
+        org: this.org,
+        typea: this.typea != undefined ? this.typea : "",
+        typeb: this.typeb != undefined ? this.typeb : "",
+        typec: this.typec != undefined ? this.typec : "",
+        typed: this.typed != undefined ? this.typed : "",
+        typef: this.typef != undefined ? this.typef : "",
+        typeE: this.typeE.join(","),
+        cu: "",
+        cn: this.sCourse,
+        page: this.page,
+        pageSize: this.pageSize,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectStudioCourseNew22", params)
+        .then((res) => {
+          this.loading = false
+          this.isListAjax = false;
+          this.zoneClass = res.data[0];
+          this.total = res.data[0].length ? res.data[0][0].num : 0;
+          let CourseType2 = []
+
+          // this.selectType({
+          //   data: [res.data[1], res.data[2], res.data[3], res.data[4]],
+          // });
+          // this.selectAllType();
+          // this.getBanner({
+          //   data: [res.data[6], res.data[5], res.data[7]],
+          // });
+          this.getBanner()
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    checkZone(id) {
+      this.page = 1;
+      this.zoneListId = id;
+      this.getZoneClass(id);
+    },
+    // handleCurrentChange(val) {
+    //   this.page = val;
+    //   this.getZoneClass(this.zoneListId);
+    // },
+    handleCurrentChange(val) {
+      // if (!this.loading) {
+      //   this.loading = this.openLoading(document.querySelector(".main_box"));
+      // }
+      this.page = val;
+      this.loading = true
+      this.selectAll2();
+    },
+    //获取banner
+    getBanner(res) {
+      let params = {
+        oid: this.org,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectBannerByOidStudio", params)
+        .then((res) => {
+          if (res.data[0].length > 0) {
+            this.bannerList = res.data[0];
+          } else {
+            // this.getBannerByOid({
+            //   data: [res.data[1], res.data[2]],
+            // });
+            this.getBannerByOid();
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    getBannerByOid(res) {
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectBannerByOidStudio", params)
+        .then((res) => {
+          if (res.data[0].length > 0) {
+            this.bannerList = res.data[0];
+          } else {
+            // this.getOldBanner({
+            //   data: [res.data[1]],
+            // });
+            this.getOldBanner();
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    getOldBanner(res) {
+      this.ajax
+        .get(this.$store.state.api + "getBannerStudio", "")
+        .then((res) => {
+          this.bannerList = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectAllType() {
+      let params = {
+        org: this.org && this.org != "" ? this.org : "",
+        oid: this.oid && this.oid != "" ? this.oid : "",
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectAllTypeStudio", params)
+        .then((res) => {
+          this.CourseTypeJson = {}
+          this.CourseType = res.data;
+
+          for (var i = 0; i < res.data[0].length; i++) {
+            if (!this.CourseTypeJson[res.data[0][i].id]) {
+              this.CourseTypeJson[res.data[0][i].id] = [];
+            }
+            if (res.data[2].length == 0 && res.data[3].length == 0) {
+              for (var j = 0; j < res.data[1].length; j++) {
+                if (res.data[0][i].id == res.data[1][j].pid) {
+                  this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
+                }
+              }
+            } else {
+              if (res.data[2].length > 0) {
+                for (var j = 0; j < res.data[2].length; j++) {
+                  if (res.data[0][i].id == res.data[2][j].pid) {
+                    this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
+                  }
+                }
+              }
+              if (res.data[3].length > 0) {
+                for (var j = 0; j < res.data[3].length; j++) {
+                  if (res.data[0][i].id == res.data[3][j].pid) {
+                    this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
+                  }
+                }
+              }
+            }
+          }
+          this.$forceUpdate();
+          if (this.typeCheck) {
+            this.selectAll();
+          } else {
+            this.selectAll2();
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectType(res) {
+      this.CourseTypeJson = {};
+      this.CourseType = res.data;
+      for (var i = 0; i < res.data[0].length; i++) {
+        if (!this.cid) {
+          this.courseTypeId[res.data[0][i].id] = "";
+        }
+        for (var j = 0; j < res.data[1].length; j++) {
+          if (res.data[0][i].id == res.data[1][j].pid) {
+            if (!this.CourseTypeJson[res.data[0][i].id]) {
+              this.CourseTypeJson[res.data[0][i].id] = [];
+            }
+            this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
+          }
+        }
+      }
+      this.selectTypeByOid({ data: [res.data[0], res.data[2]] });
+      this.selectTypeByOrg({ data: [res.data[0], res.data[3]] });
+      // })
+      // .catch((err) => {
+      //   console.error(err);
+      // });
+    },
+    selectTypeByOid(res) {
+      for (var i = 0; i < res.data[0].length; i++) {
+        for (var j = 0; j < res.data[1].length; j++) {
+          if (res.data[0][i].id == res.data[1][j].pid) {
+            if (!this.CourseTypeJson[res.data[0][i].id]) {
+              this.CourseTypeJson[res.data[0][i].id] = [];
+            }
+            this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
+          }
+        }
+      }
+      this.$forceUpdate();
+    },
+    selectTypeByOrg(res) {
+      for (var i = 0; i < res.data[0].length; i++) {
+        for (var j = 0; j < res.data[1].length; j++) {
+          if (res.data[0][i].id == res.data[1][j].pid) {
+            if (!this.CourseTypeJson[res.data[0][i].id]) {
+              this.CourseTypeJson[res.data[0][i].id] = [];
+            }
+            this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
+          }
+        }
+      }
+      this.$forceUpdate();
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+  created() {
+    // this.loading = this.openLoading(document.querySelector(".main_box"));
+    // this.selectType();
+    this.loading = true
+
+    this.selectAllType();
+    // this.getBanner();
+    this.timer = setInterval(() => {
+      this.selectAllType();
+      // this.getBanner();
+    }, 60000);
+    document.scrollingElement.scrollTop = 0;
+  },
+};
+</script>
+
+<style scoped>
+@media screen and (max-width: 1024px) {
+  .box_course {
+    margin: 0px 5px 20px 5px !important;
+  }
+}
+
+.student_head .imgS {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+.top {
+  padding: 20px 30px 20px 1%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.top div {
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 35px;
+  line-height: 35px;
+  margin: 0 10px 0 0;
+  padding-bottom: 5px;
+  width: 80px;
+  text-align: center;
+}
+
+.top .active {
+  border-bottom: 3px solid #0e71e6;
+}
+
+.isactive {
+  border-bottom: 3px solid #0e71e6;
+}
+
+.box_fk {
+  width: 8px;
+  height: 21px;
+  background: #0e71e6;
+  margin-right: 5px;
+}
+
+.wheel {
+  width: 100%;
+  height: 140px;
+}
+
+.man {
+  width: 16px;
+  height: 16px;
+}
+
+.wheel>img,
+.man>img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.box_course {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  /* margin: 0px 1% 20px; */
+  margin: 0 15px 20px 0;
+  width: 300px;
+  height: 260px;
+  /*border: 1px solid #cecece; */
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+    0px 2px 1px -1px rgb(0 0 0 / 12%);
+  justify-content: space-between;
+}
+
+.middle_white {
+  font-size: 14px;
+  margin: 5px 10px;
+}
+
+.people {
+  display: flex;
+  align-items: center;
+}
+
+.people>div:nth-child(2) {
+  margin-left: 10px;
+}
+
+.now_study {
+  width: 100%;
+  height: 40px;
+  color: #fff;
+  background: #4a9eed;
+  text-align: center;
+  line-height: 40px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.now_study:hover {
+  background: #205cc6;
+}
+
+.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: 0 auto;
+  width: 90%;
+  height: 100%;
+}
+
+.student_head {
+  width: 100%;
+  /* height: 30%; */
+}
+
+.textOverflow {
+  padding: 0 5px 0 0px;
+  width: 95%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.student_page {
+  margin-top: 10px;
+}
+
+.course_empty {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.choose {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  padding: 10px 0;
+}
+
+.all_choose {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  margin: 10px 0;
+  width: 100%;
+}
+
+.all_choose>div:nth-child(1) span {
+  text-align-last: justify;
+  width: 100%;
+  display: block;
+}
+
+.all_choose>div:nth-child(1) {
+  min-width: 80px;
+  width: 80px;
+  font-weight: bold;
+  margin-right: 10px;
+  display: flex;
+}
+
+.all_choose>>>.el-checkbox-group {
+  display: flex;
+  flex-direction: row;
+  width: 820px;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 3px;
+}
+
+.all_choose>.el-checkbox-group>>>.el-checkbox {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label {
+  min-width: 80px;
+  overflow: hidden;
+  width: 80px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.all_choose>.el-checkbox-group>.el-checkbox>>>.el-checkbox__label:hover {
+  width: auto;
+}
+
+.cName {
+  cursor: pointer;
+  margin: 0 10px 10px 0;
+  color: #b9b6b9;
+  min-width: 80px;
+  width: 80px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.reBox {
+  position: relative;
+  top: -25px;
+  z-index: 999;
+  background: #fff;
+  width: 90%;
+  border-radius: 5px;
+  padding-left: 20px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.reTop {
+  padding: 20px 0 0 0;
+  border-bottom: 1px solid #eee;
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.reTop>div:nth-child(1) {
+  font-weight: bold;
+  width: 40px;
+  border-bottom: 1px solid #205cc6;
+  padding-bottom: 20px;
+  color: #205cc6;
+  font-size: 20px;
+}
+
+.reTop>div:nth-child(2) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid #ccced3;
+  width: 300px;
+  border-radius: 8px;
+  padding: 5px 0;
+  margin-bottom: 10px;
+}
+
+.search {
+  width: 20px;
+  padding: 0 5px;
+}
+
+.search>img {
+  width: 100%;
+  height: 100%;
+}
+
+.sInput {
+  border: none;
+  width: 85%;
+}
+
+.sInput:focus-visible {
+  outline: none;
+}
+
+.nameAndLength {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 5px 0;
+}
+
+.typeN {
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.isCType {
+  color: #6282c2;
+}
+
+.typeCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.school {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+  box-sizing: border-box;
+}
+
+.school_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.FirstTypeBox {}
+
+.FirstTypeBox+.FirstTypeBox {
+  margin-top: 20px;
+}
+
+.FirstTypeBox>.title {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.typeCheck{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  /* margin-bottom: 20px; */
+}
+.typeCheck>span{
+  margin-left: 10px;
+}
+</style>

+ 5952 - 0
src/components/studio/studyStudent.vue

@@ -0,0 +1,5952 @@
+<template>
+  <div class="pb_content" style="overflow: unset">
+    <div class="pb_content_body" style="display: flex; height: 900px; position: relative">
+      <div class="pb_left">
+        <!-- <div class="courseTitle">{{ courseDetail.title }}</div> -->
+        <el-tooltip class="courseTitle" effect="light" :content="courseDetail.title" placement="top">
+          <div>{{ courseDetail.title }}</div>
+        </el-tooltip>
+        <div class="ml">目录</div>
+        <div class="cru_selectBox">
+          <div v-for="(item, stageIndex) in navList" :key="stageIndex">
+            <div class="blue_box_one" @click="get(stageIndex)">
+              <div>第{{ stageIndex + 1 }}阶段</div>
+              <div>{{ item.dyName }}</div>
+            </div>
+            <div class="twoChild" :class="{ navActive: item.isOpen }">
+              <div class="navChild" v-for="(nav, navIndex) in item.task" :key="navIndex">
+                <div class="navTask" @click="openTask(stageIndex, navIndex, nav.id)" :class="{
+                  openTaskActive:
+                    navIndex == taskCount &&
+                    nav.id == navId &&
+                    stageIndex == courseType,
+                }">
+                  <div class="vedioNav" :class="{
+                    isClick:
+                      navIndex == taskCount &&
+                      nav.id == navId &&
+                      stageIndex == courseType,
+                  }" style="margin: 0">
+                    任务{{ navIndex + 1 }}
+                  </div>
+                  <el-tooltip class="navTaskname item" effect="light" :content="nav.taskName" placement="top">
+                    <div :style="{
+                      width:
+                        IsLookOpen && !nav.isLook
+                          ? 'calc(100% - 75px)'
+                          : 'auto',
+                    }">
+                      {{ nav.taskName }}
+                    </div>
+                  </el-tooltip>
+                  <img src="../../assets/lock.png" v-if="IsLookOpen && !nav.isLook" alt="" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="body_student">
+        <div class="new_top" style="
+                position: fixed;
+                top: 0;
+                left: 20.7%;
+                width: 80%;
+                z-index: 999;
+                box-shadow: 0px 9px 0 0 #f2f2f2;
+              ">
+          <div class="courseIndex">
+            <div>第{{ courseType - 0 + 1 }}阶段</div>
+            <el-tooltip effect="light" :content="chapInfoList[courseType].dyName" placement="top">
+              <div>{{ chapInfoList[courseType].dyName }}</div>
+            </el-tooltip>
+            <div>任务{{ taskCount + 1 }}</div>
+          </div>
+          <div class="btnAll">
+            <div class="returnBtn" @click="nextOrpreSteps(0)">上一步</div>
+            <div class="returnBtn" @click="nextOrpreSteps(1)">下一步</div>
+            <div v-if="tType != 5" class="returnBtn" @click="allScrell">全屏</div>
+            <!-- <div class="returnBtn" @click="startRecording" v-if="(!videoStart && (tType == 1 || tType == 4))">开始录制</div>
+            <div class="returnBtn" @click="stopRecording" v-else-if="(tType == 1 || tType == 4)"
+              style="background:#ee5255">下载录制</div>
+            <div class="returnBtn" @click="juriVisible = true" v-if="tType == 1">
+              权限
+            </div> -->
+            <div v-if="tType != 5" class="returnBtn" style="background: #225bc7" @click.stop="
+              goTo(
+                '/courseDetailStudio?userid=' +
+                userid +
+                '&oid=' +
+                oid +
+                '&org=' +
+                org +
+                '&cid=' +
+                classId +
+                '&courseId=' +
+                id +
+                '&tType=' +
+                tType +
+                '&role=' +
+                role +
+                '&screenType=' +
+                screenType
+              )
+            ">
+              返回
+            </div>
+          </div>
+        </div>
+        <!-- v-for="(task, index) in chapInfoList[courseType].chapterInfo[0]
+            .taskJson"
+        :key="index"-->
+        <div class="isNoMessage" v-if="
+          chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+            .chapterData.length == 0 &&
+          chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+            .toolArray.length == 0 &&
+          chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+            .taskDetail == '' &&
+          chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+            .people == '' &&
+          !chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].time &&
+          !chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+            .tcMember &&
+          !chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].time
+        ">
+          <img src="../../assets/icon/isNoMessage.png" alt />
+        </div>
+        <div class="study_top" :class="{ pzClass: pzDialog || psDialog }">
+          <div class="vedioBox" v-if="
+            chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+              .taskDetail != '' ||
+            chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+              .people ||
+            (chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+              .tcMember &&
+              chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                .tcMember.length) ||
+            chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+              .time ||
+            chapterlist.length > 0
+          ">
+            <div class="checkbox">
+              <div class="check" style="font-size: 25px" :id="
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].id
+              ">
+                {{ chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].task ?
+                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].task : '任务名称' }}
+              </div>
+            </div>
+            <div class="student_head">
+              <div class="task_box" v-if="
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .people ||
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .time
+              ">
+                <div :class="{
+                  task_pbox: getMan(
+                    chapInfoList[courseType].chapterInfo[0].taskJson[
+                      taskCount
+                    ].people
+                  ),
+                }" v-if="
+  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+    .people
+">
+                  负责人:{{
+                    getMan(
+                      chapInfoList[courseType].chapterInfo[0].taskJson[
+                        taskCount
+                      ].people
+                    )
+                  }}
+                </div>
+                <div class="task_pbox" style="color: #838383" v-if="
+                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                    .time
+                ">
+                  <span>任务周期:</span>{{
+                    timeB(
+                      chapInfoList[courseType].chapterInfo[0].taskJson[
+                        taskCount
+                      ].time[0]
+                    ) +
+                    "至" +
+                    timeB(
+                      chapInfoList[courseType].chapterInfo[0].taskJson[
+                        taskCount
+                      ].time[1]
+                    )
+                  }}
+                </div>
+              </div>
+              <div class="task_box" v-if="
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .tcMember &&
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .tcMember.length
+              " :style="{
+  margin:
+    chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+      .people ||
+      chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+        .time
+      ? '5px auto 5px'
+      : '15px auto 5px',
+}">
+                <div class="task_pbox">
+                  协同者:<span :class="{ tcMember: getMan(men) }" v-for="(men, mindex) in chapInfoList[courseType]
+                    .chapterInfo[0].taskJson[taskCount].tcMember" :key="mindex">{{ getMan(men) }}</span>
+                </div>
+              </div>
+              <div class="taskBox" v-if="
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .taskDetail != ''
+              ">
+                <div style="
+                        display: flex;
+                        flex-wrap: nowrap;
+                        flex-direction: column;
+                        position: relative;
+                      ">
+                  <div style="padding: 15px 10px 0">任务描述:</div>
+
+                  <div style="
+                          padding: 10px 10px 15px;
+                          word-break: break-word;
+                          line-height: 27px;
+                        " class="cont" v-html="
+                          chapInfoList[courseType].chapterInfo[0].taskJson[
+                            taskCount
+                          ].taskDetail
+                            ? chapInfoList[courseType].chapterInfo[0].taskJson[
+                              taskCount
+                            ].taskDetail
+                            : '暂无描述'
+                        "></div>
+                </div>
+              </div>
+              <div class="vedioTaskBox" v-if="false">
+                <div class="box_course" v-if="chapterlist.length > 0">
+                  <div class="wheel" v-if="chapterlist[chapterIndex].type == 2">
+                    <div class="workd_media" style="height: 100%">
+                      <video-player class="video-player vjs-custom-skin" :playsinline="true"
+                        :options="chapterlist[chapterIndex].src" @play="onPlayerPlay($event)"
+                        style="width: 90%; height: 100%; margin: 0 0 0 30px"></video-player>
+                    </div>
+                  </div>
+                  <div class="wheel" v-if="chapterlist[chapterIndex].type == 6" style="
+                          box-shadow: 0 0 6px 1px #f2f2f2;
+                          width: 95%;
+                          margin: 0 auto;
+                          background: #f1f1f1;
+                        ">
+                    <div class="title">查看文档</div>
+                    <el-form class="textBox">
+                      <el-form-item class="textTitle">
+                        <div style="font-size: 22px">
+                          {{ chapterlist[chapterIndex].name }}
+                        </div>
+                      </el-form-item>
+                      <div v-html="chapterlist[chapterIndex].url" class="textContent"></div>
+                    </el-form>
+                  </div>
+                  <div class="wheel" v-if="chapterlist[chapterIndex].type == 3"
+                    style="height: 650px; width: 95%; margin: 0 auto">
+                    <iframe style="width: 100%; height: 100%; border: none" :src="chapterlist[chapterIndex].src"
+                      security="restricted"
+                      sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups"></iframe>
+                  </div>
+                  <div class="wheel" v-if="chapterlist[chapterIndex].type == 8"
+                    style="height: 650px; width: 95%; margin: 0 auto">
+                    <iframe style="width: 100%; height: 100%; border: none" :src="chapterlist[chapterIndex].src"
+                      security="restricted"
+                      sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
+                  </div>
+                  <div class="wheel" v-if="chapterlist[chapterIndex].type == 9"
+                    style="height: 650px; width: 95%; margin: 0 auto">
+                    <pdf :pdfUrl="chapterlist[chapterIndex].src" style="width: 100%; height: 100%; overflow: auto">
+                    </pdf>
+                  </div>
+                  <!-- <div class="wheel" v-if="chapterlist[chapterIndex].type == " style="height: 650px; width: 95%; margin: 0 auto">
+                    <el-image :src="pptImgUrl1" fit="cover" style="width: 100%"></el-image>
+                  </div> -->
+                </div>
+                <div class="vedioList" v-if="chapterlist.length > 0">
+                  <div class="navTitile">内容列表:</div>
+                  <div class="navBox">
+                    <div>
+                      <div class="vedioTimeBox" v-for="(chapter, cIndex) in chapterlist" :key="cIndex + '1'"
+                        @click="setChapterIndex(cIndex)">
+                        <div class="vedioName" :class="{ isClickNav: chapterIndex == cIndex }">
+                          {{ chapter.type == 8 ? chapter.title : chapter.name }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- <div style="padding: 10px 30px 0"
+                v-if="chapterlist[chapterIndex] && (chapterlist[chapterIndex].type == 3 || chapterlist[chapterIndex].type == 9)">
+                <el-button type="primary"
+                  @click="checkFileFull(chapterlist[chapterIndex].type, chapterlist[chapterIndex].src)">全屏查看</el-button>
+                <el-button type="primary" @click="downloadFile(chapterlist[chapterIndex].src)">文件下载</el-button>
+              </div>
+              <div style="padding: 10px 30px 0" v-if="chapterlist[chapterIndex] && chapterlist[chapterIndex].type == 8">
+                <el-button type="primary" @click="openLine(chapterlist[chapterIndex].src)">打开链接
+                </el-button>
+              </div>
+              <div style="padding: 10px 30px 0" v-if="chapterlist[chapterIndex] && chapterlist[chapterIndex].type == 6">
+                <el-button type="primary"
+                  @click="checkFileFull(chapterlist[chapterIndex].type, chapterlist[chapterIndex])">全屏查看</el-button>
+              </div> -->
+            </div>
+          </div>
+
+          <div class="student_body">
+            <div class="vedioBox" v-if="
+              chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                .toolArray.length
+            ">
+              <div class="queTop" style="
+                      font-size: 25px;
+                      padding: 15px 0 15px 30px;
+                      font-weight: bold;
+                    ">
+                实施过程
+              </div>
+              <div class="toolHeng2" style="position: relative">
+                <div class="filebox" style="flex-wrap: nowrap; margin: 0 20px" v-for="(tool, toolIndex) in chapInfoList[courseType]
+                  .chapterInfo[0].taskJson[taskCount].toolArray" :key="toolIndex">
+                  <div class="bzBox">
+                    <div></div>
+                    <div>步骤{{ toolIndex + 1 }}</div>
+                    <div v-if="tool.toolPhoto.length > 0" style="margin-left: 20px; color: #a1a1a1">
+                      时间:{{ tool.toolPhoto[0].createTime }}
+                    </div>
+                  </div>
+                  <div class="toolBox" v-if="tool.toolDetail != ''">
+                    <div v-if="false">
+                      <div class="noiframeBox">
+                        <div class="addPoint">
+                          <div v-if="tool.tool == 1">
+                            <img src="../../assets/icon/secondToolList/whiteBoard.png" alt
+                              @click="addTools(tool.tool, toolIndex, taskCount)" />
+                            <div style="margin: 5px 0">电子白板</div>
+                          </div>
+                          <div v-if="tool.tool == 3">
+                            <img src="../../assets/icon/secondToolList/mindMapping.png" alt
+                              @click="addTools(tool.tool, toolIndex, taskCount)" />
+                            <div style="margin: 5px 0">思维导图</div>
+                          </div>
+                          <div v-if="tool.tool == 6">
+                            <img src="../../assets/icon/secondToolList/doc.png" alt
+                              @click="addTools(tool.tool, toolIndex, taskCount)" />
+                            <div style="margin: 5px 0">协同文档</div>
+                          </div>
+                          <div v-if="tool.tool == 7">
+                            <img src="../../assets/icon/secondToolList/mindNetwork.png" alt
+                              @click="addTools(tool.tool, toolIndex, taskCount)" />
+                            <div style="margin: 5px 0">思维网格</div>
+                          </div>
+                          <div v-if="tool.tool == 8">
+                            <img src="../../assets/icon/secondToolList/library.png" alt
+                              @click="addTools(tool.tool, toolIndex, taskCount)" />
+                            <div style="margin: 5px 0">素材库</div>
+                          </div>
+                          <div v-if="tool.tool == 17">
+                            <img src="../../assets/icon/secondToolList/library.png" alt
+                              @click="addTools(tool.tool, toolIndex, taskCount)" />
+                            <div style="margin: 5px 0">学习资料</div>
+                          </div>
+                          <div v-if="tool.tool == 2">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/secondToolList/note.png" alt />
+                            <div style="margin: 5px 0">便签</div>
+                          </div>
+                          <div v-if="tool.tool == 4">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/ask.png" alt />
+                            <div style="margin: 5px 0">问卷调查</div>
+                          </div>
+                          <div v-if="tool.tool == 45">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/choose.png" alt />
+                            <div style="margin: 5px 0">选择题</div>
+                          </div>
+                          <div v-if="tool.tool == 10">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/time.png" alt />
+                            <div style="margin: 5px 0">倒计时</div>
+                          </div>
+                          <div v-if="tool.tool == 15">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/answer.png" alt />
+                            <div style="margin: 5px 0">问答工具</div>
+                          </div>
+                          <div v-if="tool.tool == 26">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/courseDesign.png" alt />
+                            <div style="margin: 5px 0">课程设计</div>
+                          </div>
+                          <div v-if="tool.tool == 18">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/trainPlatform.png" alt />
+                            <div style="margin: 5px 0">训练服务器</div>
+                          </div>
+                          <div v-if="tool.tool == 16">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/work.png" alt />
+                            <div style="margin: 5px 0">作业提交</div>
+                          </div>
+                          <div v-if="tool.tool == 21">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/fourthToolList/program.png" alt />
+                            <div style="margin: 5px 0">编程平台</div>
+                          </div>
+                          <div v-if="tool.tool == 22">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/fourthToolList/program.png" alt />
+                            <div style="margin: 5px 0">AI体验</div>
+                          </div>
+                          <div v-if="tool.tool == 23">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/fourthToolList/program.png" alt />
+                            <div style="margin: 5px 0">Python</div>
+                          </div>
+                          <div v-if="tool.tool == 24">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/fourthToolList/AIprogram.png" alt />
+                            <div style="margin: 5px 0">AI平台</div>
+                          </div>
+                          <div v-if="tool.tool == 25">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/evalua.png" alt />
+                            <div style="margin: 5px 0">目标管理</div>
+                          </div>
+                          <div v-if="tool.tool == 31">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/secondToolList/networkPanel.png" alt />
+                            <div style="margin: 5px 0">数学画板</div>
+                          </div>
+                          <div v-if="tool.tool == 28">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/secondToolList/translation.png" alt />
+                            <div style="margin: 5px 0">翻译</div>
+                          </div>
+                          <div v-if="tool.tool == 37">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/secondToolList/mohe.png" alt />
+                            <div style="margin: 5px 0">魔盒识字</div>
+                          </div>
+                          <div v-if="tool.tool == 38">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/secondToolList/24game.png" alt />
+                            <div style="margin: 5px 0">24点</div>
+                          </div>
+                          <div v-if="tool.tool == 39">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/secondToolList/GeoGebra.png" alt />
+                            <div style="margin: 5px 0">GeoGebra</div>
+                          </div>
+                          <div v-if="tool.tool == 32">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/code.png" alt />
+                            <div style="margin: 5px 0">源码编辑</div>
+                          </div>
+                          <div v-if="tool.tool == 40">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/secondToolList/eval.png" alt />
+                            <div style="margin: 5px 0">学生评价</div>
+                          </div>
+                          <div v-if="tool.tool == 41">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/select.png" alt />
+                            <div style="margin: 5px 0">选择填空</div>
+                          </div>
+                          <div v-if="tool.tool == 44">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/thirdToolList/hanClass.png" alt />
+                            <div style="margin: 5px 0">汉字宫</div>
+                          </div>
+                          <div v-if="tool.tool == 47">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/fourthToolList/conSentences.png" alt />
+                            <div style="margin: 5px 0">连词成句</div>
+                          </div>
+                          <div v-if="tool.tool == 48">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/fourthToolList/table.png" alt />
+                            <div style="margin: 5px 0">表格</div>
+                          </div>
+                          <div v-if="tool.tool == 49">
+                            <img @click="addTools(tool.tool, toolIndex, taskCount)"
+                              src="../../assets/icon/fourthToolList/group.png" alt />
+                            <div style="margin: 5px 0">学生分组</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="tooldetail" v-if="tool.toolDetail != ''">
+                      <!-- <div class="toolTitle">工具描述</div> -->
+                      <div v-html="contentConvent(tool.toolDetail)"></div>
+                    </div>
+                  </div>
+                  <div class="homeWorkBox" v-if="tool.toolPhoto.length && tool.tool != 51">
+                    <!-- <div class="htitle">作业预览</div> -->
+                    <div class="toolPhoto_box">
+                      <div class="photo_box" v-for="(photo, pIndex) in tool.toolPhoto" :key="pIndex">
+                        <span>{{ photo.workContent }}</span>
+                        <!--  :class="{ answerWidth: photo.type == 3 }" -->
+                        <div class="toolPhoto answerWidth">
+                          <img v-if="photo.type == 1" :src="photo.content" @click="previewImg(photo.content)" />
+                          <img v-if="photo.type == 10" :src="word" @click="openTable(photo.content)" />
+                          <img v-if="photo.type == 4" :src="word" @click="openFile(photo.content)" />
+                          <img v-if="photo.type == 5" :src="video" @click="openVideo(photo.content)" />
+                          <img v-if="photo.type == 12" :src="word" @click="openText(photo.content)" />
+                          <img v-if="photo.type == 14" :src="word" @click="
+                            openAsk(photo.content, taskCount, toolIndex)
+                          " />
+                          <img v-if="photo.type == 13" :src="zip" @click="downloadFile(photo.content)" />
+                          <div class="answerBg" v-if="photo.type == 3">
+                            <!-- <div>{{ w.sName }}</div> -->
+                            <el-tooltip class="item" effect="light" :content="photo.content" placement="top">
+                              <div class="answerContent">
+                                {{ photo.content }}
+                              </div>
+                            </el-tooltip>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="homeWorkBox" v-else-if="tool.tool != 51 && tool.tool != 57">
+                    <div class="htitle">暂无内容</div>
+                  </div>
+                  <div class="homeWorkBox" v-if="tool.toolPhoto.length && tool.tool == 56">
+                    <voteStatic :askJSON="tool.askJson" :checkJson="checkJson[toolIndex]"></voteStatic>
+                  </div>
+                  <div class="homeWorkBox" v-if="tool.tool == 57">
+                    <iframe src="https://v.cocorobo.cn" frameborder="0" width="100%" height="650"></iframe>
+                  </div>
+                  <div v-if="tool.tool == 51" style="margin-top: 20px">
+                    <div class="vedioTaskBox">
+                      <div class="box_course" :class="'box_course' + toolIndex" v-if="tool.toolData.length > 0">
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 2">
+                          <div class="workd_media" style="height: 100%">
+                            <video-player class="video-player vjs-custom-skin" :playsinline="true"
+                              :options="tool.toolData[tool.sourceIndex].src" @play="onPlayerPlay($event)"
+                              style="width: 98%; height: 100%"></video-player>
+                          </div>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 6" style="
+                                box-shadow: 0 0 6px 1px #f2f2f2;
+                                width: 98%;
+                                background: #f1f1f1;
+                                height: 650px;
+                              ">
+                          <div class="title">查看文档</div>
+                          <el-form class="textBox">
+                            <el-form-item class="textTitle">
+                              <div style="font-size: 22px">
+                                {{ tool.toolData[tool.sourceIndex].name }}
+                              </div>
+                            </el-form-item>
+                            <div v-html="tool.toolData[tool.sourceIndex].url" class="textContent"></div>
+                          </el-form>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 3"
+                          style="height: 650px; width: 98%">
+                          <iframe style="width: 100%; height: 100%; border: none"
+                            :src="tool.toolData[tool.sourceIndex].src" security="restricted"
+                            sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups"></iframe>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 8"
+                          style="height: 650px; width: 98%">
+                          <iframe style="width: 100%; height: 100%; border: none"
+                            :src="tool.toolData[tool.sourceIndex].src" security="restricted"
+                            sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
+                        </div>
+                        <div class="wheel" v-if="tool.toolData[tool.sourceIndex].type == 9"
+                          style="height: 650px; width: 98%">
+                          <pdf :pdfUrl="tool.toolData[tool.sourceIndex].url"
+                            style="width: 100%; height: 100%; overflow: auto">
+                          </pdf>
+                        </div>
+                      </div>
+                      <div class="vedioList" :class="'vedioList' + toolIndex" v-if="tool.toolData.length > 0">
+                        <div class="navTitile">内容列表:</div>
+                        <div class="navBox">
+                          <div>
+                            <div class="vedioTimeBox" v-for="(chapter, cIndex) in tool.toolData" :key="cIndex + '1'"
+                              @click="setChapterIndex2(tool, cIndex, toolIndex)">
+                              <div class="vedioName" :class="{
+                                isClickNav: tool.sourceIndex == cIndex,
+                              }">
+                                {{
+                                  chapter.type == 8
+                                  ? chapter.title
+                                  : chapter.name
+                                }}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div style="padding: 10px 0 0" v-if="tool.toolData[tool.sourceIndex]">
+                      <el-button v-if="
+                        tool.toolData[tool.sourceIndex].type == 3 ||
+                        tool.toolData[tool.sourceIndex].type == 9
+                      " type="primary" @click="
+  checkFileFull(
+    tool.toolData[tool.sourceIndex].type,
+    tool.toolData[tool.sourceIndex].src
+  )
+">全屏查看</el-button>
+                      <el-button v-if="
+                        tool.toolData[tool.sourceIndex].type == 3 ||
+                        tool.toolData[tool.sourceIndex].type == 9
+                      " type="primary" @click="
+  downloadFile(tool.toolData[tool.sourceIndex].src)
+">文件下载</el-button>
+                      <el-button v-if="tool.toolData[tool.sourceIndex].type == 8" type="primary"
+                        @click="openLine(tool.toolData[tool.sourceIndex].src)">打开链接
+                      </el-button>
+                      <el-button v-if="tool.toolData[tool.sourceIndex].type == 6" type="primary" @click="
+                        checkFileFull(
+                          tool.toolData[tool.sourceIndex].type,
+                          tool.toolData[tool.sourceIndex]
+                        )
+                      ">全屏查看</el-button>
+                      <!-- <el-button type="primary" @click="editSourceUpadte(itemTaskIndex, toolIndex)">资源编辑</el-button> -->
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pButton" @click="(pzDialog = true), selectPz(), setVHeight()" v-if="tType == 4">
+      <!-- 批 -->
+      <img src="../../assets/pzBtn2.png" style="width: 25px" alt="" />
+    </div>
+    <div v-if="pzDialog == true" class="newDialogCss">
+      <div class="pzTop2">
+        <!-- <div>批注</div>
+        <div @click="pzDialog = false">
+          <img src="../assets/close1.png" alt="" />
+        </div> -->
+        <div class="checkbox">
+          <div class="check" style="font-size: 25px">评论</div>
+          <img src="../../assets/pzBtn.png" @click="(pzDialog = false), setVHeight()" alt="" />
+        </div>
+      </div>
+      <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'">
+        <div class="pzListBox" v-if="pzList && pzList.length">
+          <div class="pzList" v-for="(pz, pzIndex) in pzList" :key="pzIndex">
+            <div class="pzNavTop">
+              <div>批</div>
+              <div>
+                {{
+                  pz.username && pz.username.length > 5
+                  ? pz.username.substring(0, 5) + "..."
+                  : pz.username
+                }}的批注
+              </div>
+              <div class="pzDelete" v-if="pz.userid == userid" @click="deletePz(pz.id)">
+                删除
+              </div>
+            </div>
+            <div class="pzContent cont" v-html="pz.content" v-if="pz.type == '1'"></div>
+            <div class="pzContent" v-if="pz.type == '2'">
+              <audio :src="pz.content" controls="controls" ref="audio">
+                Your browser does not support the audio element.
+              </audio>
+            </div>
+            <div class="pzContent" v-if="pz.type == '3'">
+              <img :src="pz.content" style="width: 90%; margin: 0 auto; display: block" @click="previewImg(pz.content)" />
+            </div>
+            <div class="time">
+              {{ pz.time }}
+            </div>
+          </div>
+        </div>
+        <div class="noPz" v-else>
+          <img src="../../assets/icon/noPz.png" alt="" />
+        </div>
+        <div class="addPzButton">
+          <div class="addPz" @click="(addPzDialog = true), (pzType = 1)">
+            添加批注
+          </div>
+          <!-- <div class="img1">
+            <div @click="(addPzDialog = true), (pzType = 2)">
+              <img src="../../assets/audio.png" /><span>音频</span>
+            </div>
+          </div> -->
+        </div>
+      </div>
+    </div>
+    <div class="pButton" @click="(psDialog = true), setVHeight()" v-if="tType == 5">
+      <!-- 批 -->
+      <img src="../../assets/pzBtn2.png" style="width: 25px" alt="" />
+    </div>
+    <div v-if="psDialog == true" class="newDialogCss">
+      <div class="pzTop2">
+        <!-- <div>批注</div>
+        <div @click="pzDialog = false">
+          <img src="../assets/close1.png" alt="" />
+        </div> -->
+        <div class="checkbox">
+          <div class="check" style="font-size: 25px">评审区域</div>
+          <img src="../../assets/pzBtn.png" @click="(psDialog = false), setVHeight()" alt="" />
+        </div>
+      </div>
+      <div class="pzBox">
+        <div class="addPzButton">
+          <div class="psTypeBox">
+            <!-- 1 造型结构 2 开源硬件 3 软件设计 4 总分 -->
+            <span :class="{active:psType==1}" @click="psType = 1">造型结构</span>
+            <span :class="{active:psType==2}" @click="psType = 2">开源硬件</span>
+            <span :class="{active:psType==3}" @click="psType = 3">软件设计</span>
+            <span :class="{active:psType==4}" @click="psType = 4">总分</span>
+          </div>
+          <div class="psBox" v-if="psType == '1'">
+            <div><span>创新性(10分)</span><el-input-number class="number" @change="updateRight(psJson,'cxx')" v-model="psJson.cxx" :controls="false" :min="0"
+                :max="10"></el-input-number></div>
+            <div><span>艺术审美(45分)</span><el-input-number class="number" @change="updateRight(psJson,'yssm')" v-model="psJson.yssm" :controls="false" :min="0"
+                :max="40"></el-input-number></div>
+            <div><span>技术与功能(25分)</span><el-input-number class="number" @change="updateRight(psJson,'jsygn')" v-model="psJson.jsygn" :controls="false" :min="0"
+                :max="20"></el-input-number></div>
+            <div><span>科学调研(10分)</span><el-input-number class="number" @change="updateRight(psJson,'kxdy')" v-model="psJson.kxdy" :controls="false" :min="0"
+                :max="10"></el-input-number></div>
+            <div><span>作品完成度(10分)</span><el-input-number class="number" @change="updateRight(psJson,'zpwcd')" v-model="psJson.zpwcd" :controls="false"
+                :min="0" :max="10"></el-input-number></div>
+            <div style="border-top: 1px solid #eee;padding-top: 10px;"><span>总分</span><span class="number"
+                style="font-size: 35px;color: #4b79ce;">{{ psJson.cxx + psJson.yssm + psJson.jsygn + psJson.kxdy +
+                  psJson.zpwcd }}</span></div>
+          </div>
+          <div class="psBox" v-if="psType == '2'">
+            <div><span>创新性(25分)</span><el-input-number class="number" @change="updateRight(psJson2,'cxx')" v-model="psJson2.cxx" :controls="false" :min="0"
+                :max="25"></el-input-number></div>
+            <div><span>艺术审美(20分)</span><el-input-number class="number" @change="updateRight(psJson2,'yssm')" v-model="psJson2.yssm" :controls="false" :min="0"
+                :max="20"></el-input-number></div>
+            <div><span>技术与功能(15分)</span><el-input-number class="number" @change="updateRight(psJson2,'jsygn')" v-model="psJson2.jsygn" :controls="false" :min="0"
+                :max="15"></el-input-number></div>
+            <div><span>科学调度(15分)</span><el-input-number class="number" @change="updateRight(psJson2,'kxdd')" v-model="psJson2.kxdd" :controls="false" :min="0"
+                :max="15"></el-input-number></div>
+            <div><span>作品完成度(25分)</span><el-input-number class="number" @change="updateRight(psJson2,'zpwcd')" v-model="psJson2.zpwcd" :controls="false"
+                :min="0" :max="25"></el-input-number></div>
+            <div style="border-top: 1px solid #eee;padding-top: 10px;"><span>总分</span><span class="number"
+                style="font-size: 35px;color: #4b79ce;">{{ psJson2.cxx + psJson2.yssm + psJson2.jsygn + psJson2.kxdd +
+                  psJson2.zpwcd }}</span></div>
+          </div>
+          <div class="psBox" v-if="psType == '3'">
+            <div><span>创新性(30分)</span><el-input-number class="number" @change="updateRight(psJson3,'cxx')" v-model="psJson3.cxx" :controls="false" :min="0"
+                :max="30"></el-input-number></div>
+            <div><span>艺术审美(20分)</span><el-input-number class="number" @change="updateRight(psJson3,'yssm')" v-model="psJson3.yssm" :controls="false" :min="0"
+                :max="20"></el-input-number></div>
+            <div><span>技术与功能(30分)</span><el-input-number class="number" @change="updateRight(psJson3,'jsygn')" v-model="psJson3.jsygn" :controls="false" :min="0"
+                :max="30"></el-input-number></div>
+            <div><span>科学调度(10分)</span><el-input-number class="number" @change="updateRight(psJson3,'kxdd')" v-model="psJson3.kxdd" :controls="false" :min="0"
+                :max="10"></el-input-number></div>
+            <div><span>作品完成度(10分)</span><el-input-number class="number" @change="updateRight(psJson3,'zpwcd')" v-model="psJson3.zpwcd" :controls="false"
+                :min="0" :max="10"></el-input-number></div>
+            <div style="border-top: 1px solid #eee;padding-top: 10px;"><span>总分</span><span class="number"
+                style="font-size: 35px;color: #4b79ce;">{{ psJson3.cxx + psJson3.yssm + psJson3.jsygn + psJson3.kxdd +
+                  psJson3.zpwcd }}</span></div>
+          </div>
+          <div class="psBox" v-if="psType == '4'">
+            <div><span>总分(100分)</span><el-input-number class="number" @change="updateRight(psJson4,'z')" v-model="psJson4.z" :controls="false" :min="0"
+                :max="100"></el-input-number></div>
+          </div>
+          <div class="addPz" @click="addPs()">
+            保存评分
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="addPzDialog == true" class="addDialogCss">
+      <div class="pzTop">
+        <div class="teacherPz">
+          <div class="teacherPzImg">
+            <img src="../../assets/icon/teacherPz.png" alt="" />
+          </div>
+          <div style="margin-left: 10px; height: 25px">教师批注</div>
+        </div>
+        <div @click="addPzDialog = false">
+          <img src="../../assets/close1.png" alt="" />
+        </div>
+      </div>
+      <div class="addPzBox">
+        <div class="addPzCheck">
+          <span :class="{ isChooseActive: pzType == 1 }" @click="pzType = 1">文本</span>
+          <span :class="{ isChooseActive: pzType == 2 }" @click="pzType = 2">音频</span>
+        </div>
+        <div style="height: calc(100% - 95px)">
+          <editor-bar class="binfo_input pzConText" style="width: 100% !important" placeholder="请输入任务描述"
+            v-model="pzConText" @change="change" v-if="pzType == 1"></editor-bar>
+          <Audio @addPz="addPz" class="pzAudioClass" v-if="pzType == 2"></Audio>
+        </div>
+        <div class="addTextCss" @click="addPz('1')" v-if="pzType == 1">
+          确定
+        </div>
+      </div>
+    </div>
+    <el-dialog title="查看文档" :visible.sync="fullDialogVisible" :append-to-body="true" width="100%"
+      :before-close="handleClose" :show-close="false" class="dialog_diy full_diy" :class="{ full_diy2: fulltype == 9 }">
+      <div slot="title" class="header-title">
+        <div style="color: #fff">查看文档</div>
+        <div @click="fullDialogVisible = false" style="
+                cursor: pointer;
+                position: absolute;
+                top: 20px;
+                right: 20px;
+                color: #fff;
+              ">
+          退出全屏
+        </div>
+      </div>
+      <div style="height: 100%">
+        <iframe v-if="fulltype == 3" style="width: 100%; height: 100%; border: none" :src="fullUrl" security="restricted"
+          sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups"></iframe>
+        <pdf v-else-if="fulltype == 9" :pdfUrl="fullUrl" style="width: 100%; height: 100%; overflow: auto"></pdf>
+        <div class="wheel" v-if="fulltype == 6" style="
+                box-shadow: 0 0 6px 1px #f2f2f2;
+                width: 100%;
+                background: #f1f1f1;
+              ">
+          <div class="title" style="width: 100%; box-sizing: border-box">
+            查看文档
+          </div>
+          <el-form class="textBox" style="height: 90%">
+            <el-form-item class="textTitle">
+              <div style="font-size: 22px">
+                {{ fullUrl.name }}
+              </div>
+            </el-form-item>
+            <!-- <div style="color: #918f8f; width: 85%">文档内容</div> -->
+            <div v-html="fullUrl.url" class="textContent" style="height: auto"></div>
+          </el-form>
+        </div>
+      </div>
+      <!-- <div slot="footer">
+        <el-button @click="fullDialogVisible = false">关 闭</el-button>
+      </div> -->
+    </el-dialog>
+    <el-dialog title="表格" :visible.sync="dialogVisibleTable2" :append-to-body="true" width="95%"
+      :before-close="handleClose" class="dialog_diy">
+      <el-form>
+        <div class="cont" v-html="tableJson.text" style="line-height: 24px"></div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleTable2 = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="文件预览" :visible.sync="dialogVisible3" width="50%" :before-close="handleClose" class="dialog_diy"
+      :class="{ fullStyle: full }">
+      <div slot="title" class="header-title">
+        <div style="color: #fff">文件预览</div>
+        <div style="position: absolute; top: 19px; right: 50px">
+          <img src="../../assets/full.png" style="height: 16px; cursor: pointer" alt="" @click="fullTools" />
+        </div>
+      </div>
+      <pdf v-if="showPDF" :pdfUrl="pptImgUrl" style="width: 100%; height: 520px; overflow: auto"
+        :class="{ fullStyle: full }"></pdf>
+      <iframe v-else :src="pptImgUrl" frameborder="0" width="100%" height="600" :class="{ fullStyle: full }"
+        security="restricted"
+        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups"></iframe>
+    </el-dialog>
+    <el-dialog title="查看文档" :visible.sync="dialogVisibleText2" :append-to-body="true" width="800px"
+      :before-close="handleClose" class="dialog_diy">
+      <el-form>
+        <div class="cont" v-html="tableJson.text" style="line-height: 24px"></div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleText2 = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="查看视频" :visible.sync="videoVisible" :append-to-body="true" width="1000px" :before-close="handleClose"
+      class="dialog_diy1">
+      <div class="workd_media" style="height: 100%" v-if="videoDetail.sources">
+        <video-player class="video-player vjs-custom-skin" :playsinline="true" :options="videoDetail"
+          @play="onPlayerPlay($event)" style="width: 100%; height: 100%"></video-player>
+      </div>
+      <div slot="footer">
+        <el-button style="background: #409efe; color: #fff" @click="(videoVisible = false), (videoDetail = {})">
+          关 闭</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="查看投票" :visible.sync="dialogVisible5" :append-to-body="true" width="1000px"
+      :before-close="handleClose" class="dialog_diy dialog_diy3">
+      <div>
+        <div class="a_add_title" style="
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+              ">
+          <div style="margin-right: 20px; font-size: 20px">投票标题:</div>
+          <div style="font-size: 20px">{{ askJson.askTitle }}</div>
+        </div>
+        <div class="a_addBox">
+          <div style="font-size: 16px; color: #c7c7c7">投票内容</div>
+          <div class="a_add_box" v-for="(item1, index1) in askJson.askCount" :key="index1">
+            <div class="a_add_head">
+              <div style="display: flex">
+                {{ index1 + 1 + "、" }}
+                <div>{{ askJson.askJson[index1].askstitle }}</div>
+              </div>
+              <img v-if="askJson.askJson[index1].img" :src="askJson.askJson[index1].img"
+                style="height: 300px; margin-top: 10px; max-width: 100%" />
+            </div>
+            <div class="a_add_body">
+              <div class="a_add_input">
+                <el-radio-group v-model="radio[index1]">
+                  <el-radio v-for="(item2, checkIndex) in askJson.askJson[index1]
+                    .checkList" :key="checkIndex" :label="checkIndex" :disabled="true" class="redioStyle"><span
+                      v-html="item2"></span></el-radio>
+                </el-radio-group>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible5 = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import "../../common/aws-sdk-2.235.1.min.js";
+import EditorBar from "../tools/wangEnduit.vue";
+import Audio from "../components/audio.vue";
+import voteStatic from "../components/voteStatic.vue";
+import pdf from "../components/vpdf";
+
+export default {
+  components: {
+    EditorBar,
+    Audio,
+    voteStatic,
+    pdf,
+  },
+  data() {
+    return {
+      bg: null,
+      drawShow: false,
+      dialogVisible: false,
+      commentDialogVisible: false,
+      videoVisible: false,
+      isStar: false,
+      studentEvalDialogVisible: false,
+      dialogVisibleSelect: false,
+      dialogVisibleScore: false,
+      dialogVisibleSentence: false,
+      dialogVisibleSentence1: false,
+      dialogVisibleWorks: false,
+      dialogVisibleTable: false,
+      dialogVisibleTable2: false,
+      dialogVisibleGroupWork: false,
+      dialogVisibleUpdateGroup: false,
+      dialogVisibleDeleteGroup: false,
+      dialogVisibleText2: false,
+      videoVisible: false,
+      videoDetail: {},
+      sStudent: {},
+      bzText: "",
+      commentDetail: [],
+      selectAnswer: [],
+      videoDetail: {},
+      selectJson: {},
+      eScore: { eBzText: "", eStar: [] },
+      id: this.$route.query.courseId,
+      userid: this.$route.query.userid,
+      classId: this.$route.query.cid,
+      // courseTypeLine: this.$route.query.type,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      tType: this.$route.query.tType,
+      courseType: this.$route.query.type,
+      role: this.$route.query.role,
+      screenType: this.$route.query.screenType,
+      pptImgUrl: "",
+      pptImgUrl1: "",
+      commentText: "",
+      full: false,
+      sIsOpen: false,
+      IsLookOpen: false,
+      pzDialog: false,
+      psDialog: false,
+      type: 1,
+      sentenceList: [{ sentenceTitle: "", addSentence: [], rightAnswer: [] }],
+      sentenceList1: [],
+      tableJson: [],
+      vedio: [],
+      text: [],
+      textList: [],
+      line: [],
+      lineList: [],
+      chapTools: [],
+      chapToolList: [],
+      file: [],
+      vedioTime: [],
+      upToolImg: "",
+      rateList: {
+        ca: 0,
+      },
+      rateParams: [],
+      colors: ["#DFDFDF", "#DFDFDF", "#DFDFDF"],
+      studyJuri: [
+        {
+          content: "",
+          cover: [],
+          upVedio: [],
+          upFile: [],
+        },
+      ],
+      mr: require("../../assets/vedioPic.png"),
+      word: require("../../assets/icon/word2.png"),
+      zip: require("../../assets/icon/zip.png"),
+      video: require("../../assets/icon/isVideo.png"),
+      noLikes: require("../../assets/icon/comment/noLikes.png"),
+      likes: require("../../assets/icon/comment/likes.png"),
+      scoreImg: require("../../assets/score.png"),
+      courseDetail: {},
+      isSelect: false,
+      chapInfo: [],
+      chapInfoList: [],
+      taskCount: 0,
+      imgList: [],
+      noImgList: [],
+      pzList: [],
+      PlTextList: [
+        "Excellent!",
+        "nice!",
+        "很有创意!",
+        "还不错哦~",
+        "继续努力哦~",
+      ],
+      isClickNav: "",
+      navId: "",
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
+        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerOptions1: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
+        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerO: {},
+      noneBtnImg: false,
+      proVisible: false,
+      progress: 0,
+      questionAnswer: "",
+      answerQ: "", //问答标题
+      rateJson: [],
+      wbCount: 0,
+      wordCount: 0,
+      mindCount: 0,
+      askCount: 0,
+      noteCount: 0,
+      mindNetWorkCount: 0,
+      libraryCount: 0,
+      workCount: 0,
+      timeCount: 0,
+      answerCount: 0,
+      trainCount: 0,
+      evalCount: 0,
+      dialogImageUrl: "",
+      pictureDialog: false,
+      toolTypeList: [],
+      dialogVisible1: false,
+      dialogVisible2: false,
+      dialogVisible3: false,
+      dialogVisible6: false,
+      dialogVisible4: false,
+      isNoHomeWork: false,
+      dialogVisible5: false,
+      dialogVisibleChoice: false,
+      answerDialogVisible: false,
+      juriVisible: false,
+      timeDialogVisible: false,
+      radio: [],
+      isAsk: false,
+      askJson: {
+        askCount: 1,
+        askTitle: "",
+        askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
+      },
+      testJson: {},
+      checkJson: [],
+      askList: [],
+      answerList: [],
+      navList: [],
+      addPzDialog: false,
+      pzConText: "",
+      worksStudent: [],
+      workStudent: [],
+      groupStudent: [],
+      groupStudentUid: [],
+      noWorksS: [],
+      isWorksS: [],
+      noWorksStudent: [],
+      toolindex: 0,
+      groupIndex: 0,
+      workTypeA: false,
+      workTypeB: false,
+      workTypeC: false,
+      isAnswer: false,
+      timer: null,
+      showType: 0,
+      fileType: 0,
+      showPDF: false,
+      noteName: "",
+      evaJuri: [],
+      evalua: "",
+      eTitle: "",
+      eName: "",
+      eJson: {},
+      fid: "", //一级
+      sid: "", //二级
+      tid: "", //二级
+      typeMode: 1,
+      eJSONNum: 0,
+      Etype: 1,
+      data: {
+        meta: {
+          name: "example",
+          author: "dd@163.com",
+          version: "0.2",
+        },
+        format: "node_array",
+        data: [{ id: "root", isroot: true, topic: "" }],
+      },
+      fullDialogVisible: false,
+      fulltype: "",
+      fullUrl: "",
+      commentIndexJson: {},
+      Stbodywidth: 0,
+      pzType: 1,
+      wScore: 0,
+      scoreDetail: "",
+      videoStart: false,
+      recorder: null,
+      groupJson: {},
+      groupJson2: {},
+      dialogVisibleGroup: false,
+      dialogVisibleGroup2: false,
+      updateGroupArray: [],
+      updateGroupUser: {},
+      deleteGroupUser: [],
+      deleteGroupArray: {},
+      checkChair: "",
+      checkDeleteGroup: [],
+      ManAarray: [],
+      chapterlist: [],
+      chapterIndex: 0,
+      courseUserid: "",
+      checkboxList3: [],
+      psType:1,
+      psJson: {
+        cxx: 0,
+        yssm: 0,
+        jsygn: 0,
+        kxdy: 0,
+        zpwcd: 0,
+      },
+      psJson2: {
+        cxx: 0,
+        yssm: 0,
+        jsygn: 0,
+        kxdd: 0,
+        zpwcd: 0,
+      },
+      psJson3: {
+        cxx: 0,
+        yssm: 0,
+        jsygn: 0,
+        kxdd: 0,
+        zpwcd: 0,
+      },
+      psJson4: {
+        z: 0,
+      }
+    };
+  },
+  methods: {
+    jump() {
+      window.parent.postMessage({ tools: "43" }, "*");
+    },
+    previewImg(url) {
+      this.$hevueImgPreview(url);
+    },
+    openTable(f) {
+      this.tableJson.text = JSON.parse(f);
+      this.dialogVisibleTable2 = true;
+    },
+    change(val) {
+      console.log(val);
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    handlePictureCardPreview(url) {
+      this.dialogImageUrl = url;
+      this.pictureDialog = true;
+    },
+    clean(type) {
+      if (type == 1) {
+        this.studyJuri[0].cover.splice(0, 1);
+      } else if (type == 2) {
+        this.studyJuri[0].upVedio.splice(0, 1);
+      } else {
+        this.studyJuri[0].upFile.splice(0, 1);
+      }
+    },
+    handleClose(done) {
+      this.videoDetail = {};
+      this.commentIndexJson = {};
+      done();
+    },
+    fullTools() {
+      this.full = !this.full;
+    },
+    imgChange(file, fileList, type) {
+      if (type == 1) {
+        var _tmp = this.studyJuri[0].cover;
+      } else if (type == 2) {
+        var _tmp = this.studyJuri[0].upVedio;
+      } else {
+        var _tmp = this.studyJuri[0].upFile;
+      }
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      // this.$message.success('触发上传')
+      el.getElementsByTagName("input")[0].click();
+    },
+    addSelectAnswer() {
+      let params = [
+        {
+          uid: this.userid,
+          cid: this.id,
+          stage: this.courseType,
+          task: this.taskCount,
+          tool: this.toolindex,
+          content: this.selectAnswer.answer,
+          type: 7,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addCourseWorks", params)
+        .then((res) => {
+          this.$message({
+            message: "提交成功",
+            type: "success",
+          });
+          this.dialogVisibleSelect = false;
+          // this.selectAnswer = {};
+          this.selectSWorks();
+          this.selectStudent();
+        })
+        .catch((err) => {
+          this.$message.error("提交失败");
+          console.error(err);
+        });
+    },
+    addPz(type, content) {
+      if (type == "1" && this.pzConText == "") {
+        this.$message.error("批注不能为空!");
+        return;
+      }
+      let params = [
+        {
+          cid: this.id,
+          uid: this.userid,
+          s: this.courseType,
+          t: this.taskCount,
+          c: type == "1" ? this.pzConText.replaceAll(/%/g, "%25") : content,
+          type: type,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addPz2", params)
+        .then((res) => {
+          this.$message({
+            message: "添加成功",
+            type: "success",
+          });
+          this.pzConText = "";
+          this.addPzDialog = false;
+          this.selectPz();
+        })
+        .catch((err) => {
+          this.$message.error("添加失败");
+          console.error(err);
+        });
+    },
+    deletePz(id) {
+      this.$confirm("确定删除此批注吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let params = [
+            {
+              id: id,
+            },
+          ];
+          this.ajax
+            .post(this.$store.state.api + "deletePz", params)
+            .then((res) => {
+              this.$message({
+                message: "删除成功",
+                type: "success",
+              });
+              this.selectPz();
+            })
+            .catch((err) => {
+              this.$message.error("网络异常");
+              console.error(err);
+            });
+        })
+        .catch(() => { });
+    },
+    selectPz() {
+      let params = {
+        cid: this.id,
+        s: this.courseType,
+        t: this.taskCount,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectPzList", params)
+        .then((res) => {
+          this.pzList = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectPs() {
+      let params = {
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getReview", params)
+        .then((res) => {
+          if (res.data[0].length) {
+            this.psType = res.data[0][0].type
+            if(this.psType == '1'){
+              this.psJson = JSON.parse(res.data[0][0].score)
+            }else if(this.psType == '2'){
+              this.psJson2 = JSON.parse(res.data[0][0].score)
+            }else if(this.psType == '3'){
+              this.psJson3 = JSON.parse(res.data[0][0].score)
+            }else if(this.psType == '4'){
+              this.psJson4 = JSON.parse(res.data[0][0].score)
+            }
+            // this.psJson = JSON.parse(res.data[0][0].score)
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    addPs() {
+      let psJson = {}
+      if(this.psType == '1'){
+        psJson =this.psJson
+      }else if(this.psType == '2'){
+        psJson =this.psJson2
+      }else if(this.psType == '3'){
+        psJson =this.psJson3
+      }else if(this.psType == '4'){
+        psJson =this.psJson4
+      }
+      let params = [{
+        uid: this.userid,
+        cid: this.id,
+        psJson: JSON.stringify(psJson),
+        type: this.psType,
+      }];
+      this.ajax
+        .post(this.$store.state.api + "reviewCourse", params)
+        .then((res) => {
+          if (res.data) {
+            this.$message.success('保存成功')
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    allScrell() {
+      window.parent.postMessage({ allScreen: "2studio" }, "*");
+    },
+    nextOrpreSteps(t) {
+      var b = this.chapInfoList.length - 1;
+      if (t == 0) {
+        if (this.courseType == 0) {
+          if (this.taskCount == 0) {
+            // console.log(this.navList[b].task[this.navList[b].task.length - 1].isLook);
+            if (this.IsLookOpen) {
+              if (
+                !this.navList[b].task[this.navList[b].task.length - 1].isLook
+              ) {
+                if (this.courseDetail.userid != this.userid) {
+                  this.$message.error("任务未解锁");
+                } else {
+                  this.$message.error("上一任务未解锁");
+                }
+                return;
+              }
+            }
+            this.navList[this.courseType].isOpen = false;
+            this.courseType = b;
+            this.taskCount =
+              this.chapInfoList[this.courseType].chapterInfo[0].taskJson
+                .length - 1;
+            this.navList[this.courseType].isOpen = true;
+          } else {
+            this.taskCount--;
+          }
+        } else {
+          if (this.taskCount == 0) {
+            this.navList[this.courseType].isOpen = false;
+            this.courseType--;
+            this.taskCount =
+              this.chapInfoList[this.courseType].chapterInfo[0].taskJson
+                .length - 1;
+            this.navList[this.courseType].isOpen = true;
+          } else {
+            this.taskCount--;
+          }
+        }
+      } else {
+        if (this.courseType == b) {
+          if (
+            this.taskCount ==
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson.length -
+            1
+          ) {
+            this.navList[this.courseType].isOpen = false;
+            this.courseType = 0;
+            this.taskCount = 0;
+            this.navList[this.courseType].isOpen = true;
+          } else {
+            var bbb = parseInt(this.taskCount) + 1;
+            if (
+              !this.chapInfoList[this.courseType].chapterInfo[0].taskJson[bbb]
+                .isLook &&
+              this.courseDetail.userid != this.userid &&
+              this.IsLookOpen
+            ) {
+              this.$message.error("任务未解锁");
+              return;
+            }
+            this.taskCount++;
+            if (this.IsLookOpen) {
+              this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+                this.taskCount
+              ].isLook = true;
+              this.addCourseState(3);
+            }
+          }
+        } else {
+          if (
+            this.taskCount ==
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson.length -
+            1
+          ) {
+            var bbb = parseInt(this.courseType) + 1;
+            if (
+              !this.chapInfoList[bbb].chapterInfo[0].taskJson[0].isLook &&
+              this.courseDetail.userid != this.userid &&
+              this.IsLookOpen
+            ) {
+              this.$message.error("任务未解锁");
+              return;
+            }
+            this.navList[this.courseType].isOpen = false;
+            this.courseType++;
+            this.taskCount = 0;
+            this.navList[this.courseType].isOpen = true;
+          } else {
+            var bbb = parseInt(this.taskCount) + 1;
+            if (
+              !this.chapInfoList[this.courseType].chapterInfo[0].taskJson[bbb]
+                .isLook &&
+              this.courseDetail.userid != this.userid &&
+              this.IsLookOpen
+            ) {
+              this.$message.error("任务未解锁");
+              return;
+            }
+            this.taskCount++;
+          }
+          if (this.IsLookOpen) {
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              this.taskCount
+            ].isLook = true;
+            this.addCourseState(3);
+          }
+        }
+      }
+      document.scrollingElement.scrollTop = 0;
+      this.showType = 0;
+      this.navId = this.navList[this.courseType].task[this.taskCount].id;
+
+      this.isNoHomeWork = false;
+      (this.studyJuri = [
+        {
+          content: "",
+          cover: [],
+          upVedio: [],
+          upFile: [],
+        },
+      ]),
+        (this.radio = []);
+      this.isClickNav = "";
+      this.selectPz();
+      this.getCourseDetail();
+      this.$forceUpdate();
+    },
+    openTask(s, n, i) {
+      if (this.IsLookOpen) {
+        if (
+          !this.chapInfoList[s].chapterInfo[0].taskJson[n].isLook &&
+          this.courseDetail.userid != this.userid
+        ) {
+          this.$message.error("任务未解锁");
+          return;
+        }
+        if (this.courseType == s && this.taskCount != n && n > this.taskCount) {
+          if (
+            !this.chapInfoList[this.courseType].chapterInfo[0].taskJson[n - 1]
+              .isLook
+          ) {
+            this.$message.error("上一任务未解锁");
+            return;
+          }
+        } else if (s > this.courseType) {
+          if (n > 0) {
+            if (!this.chapInfoList[s].chapterInfo[0].taskJson[n - 1].isLook) {
+              this.$message.error("上一任务未解锁");
+              return;
+            }
+          } else {
+            if (
+              !this.chapInfoList[s - 1].chapterInfo[0].taskJson[
+                this.chapInfoList[s - 1].chapterInfo[0].taskJson.length - 1
+              ].isLook
+            ) {
+              this.$message.error("上一任务未解锁");
+              return;
+            }
+          }
+        }
+      }
+      this.courseType = s;
+      this.navId = i;
+      this.taskCount = n;
+      if (this.IsLookOpen) {
+        this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+          this.taskCount
+        ].isLook = true;
+        this.addCourseState(3);
+      }
+      this.showType = 0;
+      this.isNoHomeWork = false;
+      (this.studyJuri = [
+        {
+          content: "",
+          cover: [],
+          upVedio: [],
+          upFile: [],
+        },
+      ]),
+        (this.radio = []);
+      document.scrollingElement.scrollTop = 0;
+
+      this.getCourseDetail();
+    },
+
+    get(i) {
+      this.navList[i].isOpen = !this.navList[i].isOpen;
+    },
+    setChapterIndex(index) {
+      this.chapterIndex = index;
+      this.$nextTick(function () {
+        setTimeout(() => {
+          var a = document.getElementsByClassName("box_course")[0].offsetHeight;
+          document.getElementsByClassName("vedioList")[0].style.height =
+            a + "px";
+        }, 500);
+      });
+    },
+    getCourseDetail(type, gindex) {
+      let loading;
+      if (type != 2) {
+        loading = this.$loading.service({
+          background: "rgba(255, 255, 255, 0.7)",
+          target: document.querySelector(".student_table"),
+        });
+      }
+      let params = {
+        courseId: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectStudioCourseDetail3", params)
+        .then((res) => {
+          if (type != 2) {
+            loading.close();
+            let _ctype = false
+            if (this.courseType != 0 && !this.courseType) {
+              _ctype = true
+            }
+            if (this.tType == 5 && _ctype) {
+              this.courseType = JSON.parse(res.data[0][0].chapters).length - 1
+            }
+            var a = JSON.parse(res.data[0][0].chapters)[this.courseType]
+              .chapterInfo[0].taskJson;
+            if (this.tType == 5 && _ctype) {
+              this.taskCount = a.length - 1
+            }
+            this.courseDetail = res.data[0][0];
+            this.courseUserid = res.data[0][0].userid;
+            this.checkboxList3 = res.data[0][0].course_teacher
+              ? res.data[0][0].course_teacher.split(",")
+              : [];
+            this.chapInfo = JSON.parse(this.courseDetail.chapters)[
+              this.courseType
+            ];
+            this.chapterlist = [];
+            this.chapterlist = JSON.parse(
+              JSON.stringify(a[this.taskCount].chapterData)
+            );
+            this.chapterIndex = 0;
+            this.chapInfoList = JSON.parse(this.courseDetail.chapters);
+            if (this.chapterlist.length) {
+              for (var k = 0; k < this.chapterlist.length; k++) {
+                if (this.chapterlist[k].type == 2) {
+                  var d = JSON.parse(JSON.stringify(this.playerOptions));
+                  d.sources[0].src = this.chapterlist[k].url;
+                  this.chapterlist[k].src = d;
+                } else if (this.chapterlist[k].type == 3) {
+                  this.chapterlist[k].src =
+                    "https://view.officeapps.live.com/op/view.aspx?src=" +
+                    this.chapterlist[k].url;
+                } else if (this.chapterlist[k].type == 6) {
+                  this.chapterlist[k].name += ".doc";
+                } else if (this.chapterlist[k].type == 8) {
+                  if (
+                    this.chapterlist[k].url.indexOf("https://") == -1 &&
+                    this.chapterlist[k].url.indexOf("http://") == -1
+                  ) {
+                    this.chapterlist[k].src =
+                      "https://" + this.chapterlist[k].url;
+                  } else {
+                    this.chapterlist[k].src = this.chapterlist[k].url;
+                  }
+                } else if (this.chapterlist[k].type == 9) {
+                  this.chapterlist[k].src = this.chapterlist[k].url;
+                }
+              }
+
+              this.$nextTick(function () {
+                // setTimeout(() => {
+                //   var a =
+                //     document.getElementsByClassName("box_course")[0].offsetHeight;
+                //   document.getElementsByClassName("vedioList")[0].style.height =
+                //     a + "px";
+                // }, 500);
+              });
+            }
+            for (var l = 0; l < this.chapInfoList.length; l++) {
+              var w = this.chapInfoList[l].chapterInfo[0].taskJson;
+              for (var m = 0; m < w.length; m++) {
+                w[m].id = l + "-" + m;
+              }
+            }
+
+            let unitJson = this.chapInfoList;
+            let works = res.data[1];
+            console.log(unitJson);
+            for (var i = 0; i < unitJson.length; i++) {
+              let task = unitJson[i].chapterInfo[0].taskJson;
+
+              for (var j = 0; j < task.length; j++) {
+                var tool = task[j].toolArray;
+                for (var z = 0; z < tool.length; z++) {
+                  let _tool = tool[z];
+                  _tool.toolPhoto = [];
+                  _tool.people = [];
+                  this.checkJson[z] = [];
+                  let checkPeople = 0;
+                  for (var k = 0; k < works.length; k++) {
+                    let _work = works[k];
+                    if (
+                      _work.stage == i &&
+                      _work.task == j &&
+                      _work.tool == z &&
+                      _work.atool == _tool.tool
+                    ) {
+                      if (_tool.tool == 1) {
+                        _work.workContent = `${_work.username}使用电子白板提交了:`;
+                      } else if (_tool.tool == 3) {
+                        _work.workContent = `${_work.username}使用思维导图提交了:`;
+                      } else if (_tool.tool == 6) {
+                        _work.workContent = `${_work.username}使用协同文档提交了:`;
+                      } else if (_tool.tool == 15) {
+                        _work.workContent = `${_work.username}使用问答工具提交了:`;
+                      } else if (_tool.tool == 53) {
+                        _work.workContent = `${_work.username}使用文件上传提交了:`;
+                      } else if (_tool.tool == 54) {
+                        _work.workContent = `${_work.username}使用拍照提交了:`;
+                      } else if (_tool.tool == 55) {
+                        _work.workContent = `${_work.username}使用文件提交了:`;
+                      } else if (_tool.tool == 56) {
+                        _work.workContent = `${_work.username}使用投票提交了:`;
+                        checkPeople++;
+                        var checkL = JSON.parse(_work.content);
+                        for (var kz = 0; kz < checkL.length; kz++) {
+                          if (!this.checkJson[z][kz]) {
+                            this.checkJson[z].push({
+                              checkCount: [],
+                              checkPerson: [],
+                              rightPerson: [],
+                            });
+                          }
+                          if (!this.checkJson[z][kz].checkCount.length) {
+                            this.checkJson[z][kz].checkCount = [];
+                            let _askItemCount =
+                              _tool.askJson.askJson[kz].askItem;
+                            for (var aic = 0; aic < _askItemCount; aic++) {
+                              this.checkJson[z][kz].checkCount.push(0);
+                            }
+                          }
+                          this.checkJson[z][kz].checkPerson[
+                            parseInt(checkL[kz])
+                          ]
+                            ? this.checkJson[z][kz].checkPerson[
+                              parseInt(checkL[kz])
+                            ].push(_work.username)
+                            : (this.checkJson[z][kz].checkPerson[
+                              parseInt(checkL[kz])
+                            ] = [_work.username]);
+                          this.checkJson[z][kz].checkCount[parseInt(checkL[kz])]
+                            ? this.checkJson[z][kz].checkCount[
+                            parseInt(checkL[kz])
+                            ]++
+                            : (this.checkJson[z][kz].checkCount[
+                              parseInt(checkL[kz])
+                            ] = 1);
+                        }
+                      }
+
+                      if (_tool.tool == 48 || _tool.tool == 52) {
+                        _tool.toolPhoto[0] = _work;
+                        if (_tool.people.indexOf(_work.username) == -1) {
+                          _tool.people.push(_work.username);
+                        }
+                      } else {
+                        _tool.toolPhoto.push(_work);
+                      }
+                    }
+                  }
+                  if (_tool.tool == 48) {
+                    _tool.toolPhoto.length &&
+                      (_tool.toolPhoto[0].workContent = `${_tool.people.join(
+                        ","
+                      )}使用表格提交了:`);
+                  } else if (_tool.tool == 52) {
+                    _tool.toolPhoto.length &&
+                      (_tool.toolPhoto[0].workContent = `${_tool.people.join(
+                        ","
+                      )}使用文档提交了:`);
+                  }
+
+                  for (var kz = 0; kz < this.checkJson[z].length; kz++) {
+                    this.checkJson[z][kz].checkPerent = [];
+                    let aaaa = this.checkJson[z][kz];
+                    console.log(aaaa);
+                    for (
+                      var kc = 0;
+                      kc < this.checkJson[z][kz].checkCount.length;
+                      kc++
+                    ) {
+                      this.checkJson[z][kz].checkPerent.push(
+                        Math.round(
+                          (this.checkJson[z][kz].checkCount[kc] / checkPeople) *
+                          100
+                        )
+                      );
+                    }
+                  }
+
+                  if (_tool.tool == 51) {
+                    _tool.sourceIndex = 0;
+                  }
+                }
+              }
+            }
+            this.setVHeight();
+            this.getTeacher();
+          } else {
+            this.courseDetail = res.data[0][0];
+            // this.chapInfoList = JSON.parse(this.courseDetail.chapters);
+
+            let unitJson = this.chapInfoList;
+            let works = res.data[1];
+
+            for (var i = 0; i < unitJson.length; i++) {
+              let task = unitJson[i].chapterInfo[0].taskJson;
+              for (var j = 0; j < task.length; j++) {
+                var tool = task[j].toolArray;
+                for (var z = 0; z < tool.length; z++) {
+                  let _tool = tool[z];
+                  _tool.toolPhoto = [];
+                  _tool.people = [];
+                  this.checkJson[z] = [];
+                  let checkPeople = 0;
+                  for (var k = 0; k < works.length; k++) {
+                    let _work = works[k];
+                    if (
+                      _work.stage == i &&
+                      _work.task == j &&
+                      _work.tool == z &&
+                      _work.atool == _tool.tool
+                    ) {
+                      if (_tool.tool == 1) {
+                        _work.workContent = `${_work.username}使用电子白板提交了:`;
+                      } else if (_tool.tool == 3) {
+                        _work.workContent = `${_work.username}使用思维导图提交了:`;
+                      } else if (_tool.tool == 6) {
+                        _work.workContent = `${_work.username}使用协同文档提交了:`;
+                      } else if (_tool.tool == 15) {
+                        _work.workContent = `${_work.username}使用问答工具提交了:`;
+                      } else if (_tool.tool == 53) {
+                        _work.workContent = `${_work.username}使用文件上传提交了:`;
+                      } else if (_tool.tool == 54) {
+                        _work.workContent = `${_work.username}使用拍照提交了:`;
+                      } else if (_tool.tool == 55) {
+                        _work.workContent = `${_work.username}使用文件提交了:`;
+                      } else if (_tool.tool == 56) {
+                        console.log(_tool);
+                        _work.workContent = `${_work.username}使用投票提交了:`;
+                        checkPeople++;
+                        var checkL = JSON.parse(_work.content);
+                        for (var kz = 0; kz < checkL.length; kz++) {
+                          if (!this.checkJson[z][kz]) {
+                            this.checkJson[z].push({
+                              checkCount: [],
+                              checkPerson: [],
+                              rightPerson: [],
+                            });
+                          }
+                          if (!this.checkJson[z][kz].checkCount.length) {
+                            this.checkJson[z][kz].checkCount = [];
+                            let _askItemCount =
+                              _tool.askJson.askJson[kz].askItem;
+                            for (var aic = 0; aic < _askItemCount; aic++) {
+                              this.checkJson[z][kz].checkCount.push(0);
+                            }
+                          }
+                          this.checkJson[z][kz].checkPerson[
+                            parseInt(checkL[kz])
+                          ]
+                            ? this.checkJson[z][kz].checkPerson[
+                              parseInt(checkL[kz])
+                            ].push(_work.username)
+                            : (this.checkJson[z][kz].checkPerson[
+                              parseInt(checkL[kz])
+                            ] = [_work.username]);
+                          console.log(_work.username);
+                          this.checkJson[z][kz].checkCount[parseInt(checkL[kz])]
+                            ? this.checkJson[z][kz].checkCount[
+                            parseInt(checkL[kz])
+                            ]++
+                            : (this.checkJson[z][kz].checkCount[
+                              parseInt(checkL[kz])
+                            ] = 1);
+                        }
+                      }
+
+                      if (_tool.tool == 48 || _tool.tool == 52) {
+                        _tool.toolPhoto[0] = _work;
+                        if (_tool.people.indexOf(_work.username) == -1) {
+                          _tool.people.push(_work.username);
+                        }
+                      } else {
+                        _tool.toolPhoto.push(_work);
+                      }
+                    }
+                  }
+                  if (_tool.tool == 48) {
+                    _tool.toolPhoto.length &&
+                      (_tool.toolPhoto[0].workContent = `${_tool.people.join(
+                        ","
+                      )}使用表格提交了:`);
+                  } else if (_tool.tool == 52) {
+                    _tool.toolPhoto.length &&
+                      (_tool.toolPhoto[0].workContent = `${_tool.people.join(
+                        ","
+                      )}使用文档提交了:`);
+                  }
+                  for (var kz = 0; kz < this.checkJson[z].length; kz++) {
+                    this.checkJson[z][kz].checkPerent = [];
+                    let aaaa = this.checkJson[z][kz];
+                    console.log(aaaa);
+                    for (
+                      var kc = 0;
+                      kc < this.checkJson[z][kz].checkCount.length;
+                      kc++
+                    ) {
+                      this.checkJson[z][kz].checkPerent.push(
+                        Math.round(
+                          (this.checkJson[z][kz].checkCount[kc] / checkPeople) *
+                          100
+                        )
+                      );
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          this.selectSLook();
+          let _this = this;
+          if (_this.timer) {
+            clearInterval(_this.timer);
+            _this.timer = null;
+          }
+          if (_this.tType == 4) {
+            _this.selectPz();
+          }
+          _this.timer = setInterval(function () {
+            _this.getCourseDetail(2);
+            // if (_this.tType == 4) {
+            //   _this.selectPz();
+            // }
+          }, 60000);
+        })
+        .catch((err) => {
+          loading.close();
+          console.error(err);
+        });
+    },
+    updateSLook() {
+      let params = {
+        sopen: this.sIsOpen == false ? 1 : 2,
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "updateCourseSLook", params)
+        .then((res) => {
+          if (this.sIsOpen == true) {
+            this.$message({
+              message: "权限设置成功",
+              type: "success",
+            });
+          } else {
+            this.$message({
+              message: "权限关闭成功",
+              type: "success",
+            });
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    updateLookOpen() {
+      let params = [
+        {
+          sopen: this.IsLookOpen == false ? 1 : 2,
+          cid: this.id,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updateCourseLookOpen", params)
+        .then((res) => {
+          if (this.IsLookOpen == true) {
+            // if (this.courseType != 0 && this.taskCount != 0) {
+            //   this.openTask(0, 0, "0-0");
+            // }
+            this.$message({
+              message: "权限设置成功",
+              type: "success",
+            });
+          } else {
+            this.$message({
+              message: "权限关闭成功",
+              type: "success",
+            });
+          }
+          this.getCourseState(2);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectSLook() {
+      this.sIsOpen = true;
+      this.IsLookOpen = false;
+      if (!this.IsLookOpen) {
+        this.setNavList();
+      } else {
+        this.getCourseState(1);
+      }
+    },
+    setNavList() {
+      if (this.navList.length == 0) {
+        this.navList = [];
+        for (var l = 0; l < this.chapInfoList.length; l++) {
+          var q = this.chapInfoList[l].dyName;
+          var w = this.chapInfoList[l].chapterInfo[0].taskJson;
+          var e;
+          this.navList.push({
+            dyName: q,
+            isOpen: l === 0 ? true : false,
+            task: [],
+          });
+          for (var r = 0; r < w.length; r++) {
+            e = w[r].task;
+            this.navList[l].task.push({
+              taskName: e,
+              id: l + "-" + r,
+              isLook: w[r].isLook,
+            });
+            // this.navId = this.navId ? this.navId : l + "-" + r;
+            // this.navId = l + "-" + r;
+          }
+        }
+        this.navList[0].isOpen = false;
+        this.navList[this.courseType].isOpen = true;
+        this.navId = this.navList[this.courseType].task[this.taskCount].id;
+      } else {
+        this.setNavList2();
+      }
+    },
+    setNavList2() {
+      for (var l = 0; l < this.chapInfoList.length; l++) {
+        var w = this.chapInfoList[l].chapterInfo[0].taskJson;
+        for (var r = 0; r < w.length; r++) {
+          this.navList[l].task[r].isLook = w[r].isLook;
+        }
+      }
+      if (
+        this.IsLookOpen &&
+        !this.navList[this.courseType].task[this.taskCount].isLook
+      ) {
+        this.openTask(0, 0, "0-0");
+      }
+      this.$forceUpdate();
+    },
+    getCourseState(type) {
+      let params = {
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getCourseState", params)
+        .then((res) => {
+          if (res.data[0].length > 0 && this.IsLookOpen && type == 1) {
+            this.chapInfoList = JSON.parse(res.data[0][0].state);
+            this.setNavList();
+            this.$forceUpdate();
+          } else if (res.data[0].length > 0 && this.IsLookOpen && type == 2) {
+            this.addCourseState(2);
+          } else {
+            this.addCourseState(1);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    getTeacher() {
+      this.ManAarray = [];
+      if (this.checkboxList3.indexOf(this.courseUserid) == -1) {
+        this.checkboxList3.push(this.courseUserid);
+      }
+      let params = {
+        uid: this.checkboxList3.join(","),
+      };
+      this.ajax
+        .get(this.$store.state.api + "getAllUserById", params)
+        .then((res) => {
+          let teacherJuri = res.data[0];
+          this.ManAarray = teacherJuri;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    addTools(t, i, index) {
+      var a = 0;
+      // this.taskCount = index;
+      this.toolindex = i;
+      if (t == 1) {
+        window.parent.postMessage(
+          {
+            tools: "1s",
+            cid: this.id,
+            stage: this.courseType,
+            task: this.taskCount,
+            tool: i,
+          },
+          "*"
+        );
+      } else if (t == 2) {
+        if (this.wordCount > 0) {
+          this.updateCount(this.wordCount, t);
+        } else {
+          this.wordCount++;
+          a = this.wordCount;
+          this.toolsCount(a, t);
+        }
+        window.parent.postMessage({ tools: "2" }, "*");
+      } else if (t == 3) {
+        window.parent.postMessage(
+          {
+            tools: "3s",
+            cid: this.id,
+            stage: this.courseType,
+            task: this.taskCount,
+            tool: i,
+          },
+          "*"
+        );
+      } else if (t == 4) {
+        this.radio = [];
+        this.noteName = "";
+        this.isAnswer = false;
+        if (this.askCount > 0) {
+          this.updateCount(this.askCount, t);
+        } else {
+          this.askCount++;
+          a = this.askCount;
+          this.toolsCount(a, t);
+        }
+        if (!this.dialogVisible2) {
+          this.askJson.askJson =
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              index
+            ].toolChoose[i].askJson;
+          this.askJson.askTitle =
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              index
+            ].toolChoose[i].askTitle;
+          this.askJson.askCount =
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              index
+            ].toolChoose[i].askCount;
+        } else {
+          this.askJson.askJson = this.chapTools.askJson.askJson;
+          this.askJson.askTitle = this.chapTools.askJson.askTitle;
+          this.askJson.askCount = this.chapTools.askJson.askCount;
+        }
+        this.dialogVisible5 = true;
+
+        // window.parent.postMessage({ tools: "4" }, "*");
+      } else if (t == 45) {
+        this.noteName = "";
+        this.radio = [];
+        this.isAnswer = false;
+        if (this.askCount > 0) {
+          this.updateCount(this.askCount, t);
+        } else {
+          this.askCount++;
+          a = this.askCount;
+          this.toolsCount(a, t);
+        }
+        this.testJson =
+          this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+            index
+          ].toolChoose[i].testJson;
+        for (var k = 0; k < this.testJson.testJson.length; k++) {
+          if (this.testJson.testJson[k].type == "2") {
+            this.radio.push([]);
+          } else {
+            this.radio.push("");
+          }
+        }
+
+        this.dialogVisibleChoice = true;
+
+        // window.parent.postMessage({ tools: "4" }, "*");
+      } else if (t == 5) {
+        if (this.scoreCount > 0) {
+          this.updateCount(this.scoreCount, t);
+        } else {
+          this.scoreCount++;
+          a = this.scoreCount;
+          this.toolsCount(a, t);
+        }
+        this.dialogVisible4 = true;
+        // window.parent.postMessage({ tools: "5" }, "*");
+      } else if (t == 6) {
+        window.parent.postMessage(
+          {
+            tools: "6s",
+            cid: this.id,
+            stage: this.courseType,
+            task: this.taskCount,
+            tool: i,
+          },
+          "*"
+        );
+      } else if (t == 7) {
+        if (this.mindNetWorkCount > 0) {
+          this.updateCount(this.mindNetWorkCount, t);
+        } else {
+          this.mindNetWorkCount++;
+          a = this.mindNetWorkCount;
+          this.toolsCount(a, t);
+        }
+        window.parent.postMessage(
+          {
+            tools: "7",
+            cid: this.id,
+            stage: this.courseType,
+            task: this.taskCount,
+            tool: i,
+          },
+          "*"
+        );
+      } else if (t == 16) {
+        if (this.workCount > 0) {
+          this.updateCount(this.workCount, t);
+        } else {
+          this.workCount++;
+          a = this.workCount;
+          this.toolsCount(a, t);
+        }
+        this.dialogVisible = true;
+      } else if (t == 8) {
+        if (this.libraryCount > 0) {
+          this.updateCount(this.libraryCount, t);
+        } else {
+          this.libraryCount++;
+          a = this.libraryCount;
+          this.toolsCount(a, t);
+        }
+        window.parent.postMessage({ tools: "8" }, "*");
+      } else if (t == 17) {
+        if (this.libraryCount > 0) {
+          this.updateCount(this.libraryCount, t);
+        } else {
+          this.libraryCount++;
+          a = this.libraryCount;
+          this.toolsCount(a, t);
+        }
+        window.parent.postMessage({ tools: "17" }, "*");
+      } else if (t == 18) {
+        if (this.trainCount > 0) {
+          this.updateCount(this.trainCount, t);
+        } else {
+          this.trainCount++;
+          a = this.trainCount;
+          this.toolsCount(a, t);
+        }
+        window.parent.postMessage({ tools: "18" }, "*");
+      } else if (t == 10) {
+        if (this.timeCount > 0) {
+          this.updateCount(this.timeCount, t);
+        } else {
+          this.timeCount++;
+          a = this.timeCount;
+          this.toolsCount(a, t);
+        }
+        this.timeDialogVisible = true;
+      } else if (t == 15) {
+        this.answerQ = "";
+        this.questionAnswer = "";
+        if (this.answerCount > 0) {
+          this.updateCount(this.answerCount, t);
+        } else {
+          this.answerCount++;
+          a = this.answerCount;
+          this.toolsCount(a, t);
+        }
+        this.answerQ = this.chapInfoList[this.courseType].chapterInfo[0]
+          .taskJson[index].toolChoose[i].answerQ
+          ? this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index]
+            .toolChoose[i].answerQ
+          : "";
+        this.answerDialogVisible = true;
+      } else if (t == 21) {
+        window.parent.postMessage({ tools: "21" }, "*");
+      } else if (t == 22) {
+        window.parent.postMessage({ tools: "22" }, "*");
+      } else if (t == 23) {
+        window.parent.postMessage({ tools: "23" }, "*");
+      } else if (t == 24) {
+        window.parent.postMessage({ tools: "24" }, "*");
+      } else if (t == 25) {
+        window.parent.postMessage({ tools: "25" }, "*");
+      } else if (t == 31) {
+        window.parent.postMessage({ tools: "31" }, "*");
+      } else if (t == 28) {
+        window.parent.postMessage({ tools: "28" }, "*");
+      } else if (t == 37) {
+        window.parent.postMessage({ tools: "37" }, "*");
+      } else if (t == 38) {
+        window.parent.postMessage({ tools: "38" }, "*");
+      } else if (t == 39) {
+        window.parent.postMessage({ tools: "39" }, "*");
+      } else if (t == 32) {
+        window.parent.postMessage({ tools: "32" }, "*");
+      } else if (t == 26) {
+        window.parent.postMessage(
+          {
+            tools: "26",
+            cid: this.id,
+            stage: this.courseType,
+            task: this.taskCount,
+            tool: i,
+          },
+          "*"
+        );
+      } else if (t == 40) {
+        if (this.evalCount > 0) {
+          this.updateCount(this.evalCount, t);
+        } else {
+          this.evalCount++;
+          a = this.evalCount;
+          this.toolsCount(a, t);
+        }
+        this.eScore = { eBzText: "", eStar: [] };
+        if (this.worksStudent[i].length) {
+          for (var k = 0; k < this.worksStudent[i].length; k++) {
+            if (this.userid == this.worksStudent[i][k].userid) {
+              this.eScore = JSON.parse(this.worksStudent[i][k].works);
+              this.rateJson =
+                this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+                  index
+                ].toolChoose[i].rateJson;
+              break;
+            } else {
+              this.rateJson =
+                this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+                  index
+                ].toolChoose[i].rateJson;
+            }
+          }
+        } else {
+          this.rateJson =
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              index
+            ].toolChoose[i].rateJson;
+        }
+
+        this.isStar = false;
+        this.studentEvalDialogVisible = true;
+      } else if (t == 41) {
+        this.selectJson = this.chapInfoList[this.courseType].chapterInfo[0]
+          .taskJson[index].toolChoose[i].selectJson
+          ? JSON.parse(
+            JSON.stringify(
+              this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+                index
+              ].toolChoose[i].selectJson
+            )
+          )
+          : { url: "", select: [], answer: [] };
+        if (this.worksStudent[i].length) {
+          for (var k = 0; k < this.worksStudent[i].length; k++) {
+            if (this.userid == this.worksStudent[i][k].userid) {
+              var a = this.worksStudent[i][k].works.split(",");
+              for (var ki = 0; ki < a.length; ki++) {
+                a[ki] = parseInt(a[ki]);
+              }
+              this.selectAnswer = {
+                answer: a,
+                stu: this.worksStudent[i][k].sName,
+              };
+              break;
+            } else {
+              this.selectAnswer = { answer: [], stu: "" };
+            }
+          }
+        } else {
+          this.selectAnswer = { answer: [], stu: "" };
+        }
+        this.isSelect = false;
+        this.dialogVisibleSelect = true;
+      } else if (t == 44) {
+        window.parent.postMessage({ tools: "44" }, "*");
+      }
+    },
+    addCourseState(type) {
+      let _state = this.chapInfoList;
+      // this.courseType   this.taskCount
+      if (type == 1 || type == 2) {
+        for (var i = 0; i < _state.length; i++) {
+          let el = _state[i].chapterInfo[0].taskJson;
+          for (var j = 0; j < el.length; j++) {
+            // if (i == 0 && j == 0) {
+            //   el[j].isLook = true;
+            // } else {
+            //   el[j].isLook = false;
+            // }
+
+            if (
+              this.courseType > i ||
+              (this.courseType == i && this.taskCount + 1 > j)
+            ) {
+              el[j].isLook = true;
+            } else {
+              el[j].isLook = false;
+            }
+          }
+        }
+      }
+      let params = [
+        {
+          cid: this.id,
+          state: JSON.stringify(_state).replaceAll(/%/g, "%25"),
+        },
+      ];
+      this.ajax
+        .post(
+          this.$store.state.api +
+          (type == 1 ? "addCourseState" : "updateCourseSate"),
+          params
+        )
+        .then((res) => {
+          if (this.IsLookOpen) {
+            this.setNavList();
+          }
+          if (type == 3 && type == 2) {
+            this.getCourseState(1);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    selectCount() {
+      let params = {
+        cid: this.id,
+        chid: this.courseType,
+        uid: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectToolsCount", params)
+        .then((res) => {
+          for (var i = 0; i < res.data[0].length; i++) {
+            if (res.data[0][i].tools == 1) {
+              this.wbCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 2) {
+              this.wordCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 3) {
+              this.mindCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 4) {
+              this.askCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 6) {
+              this.noteCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 7) {
+              this.mindNetWorkCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 8) {
+              this.libraryCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 16) {
+              this.workCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 10) {
+              this.timeCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 15) {
+              this.answerCount = res.data[0][i].count;
+            } else if (res.data[0][i].tools == 18) {
+              this.trainCount = res.data[0][i].count;
+            }
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    toolsCount(a, t) {
+      let params = {
+        cid: this.id,
+        chid: this.courseType,
+        uid: this.userid,
+        tid: t,
+        count: a,
+      };
+      this.ajax
+        .get(this.$store.state.api + "insertToolsCount", params)
+        .then((res) => {
+          this.selectCount();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    updateCount(c, t) {
+      c++;
+      let params = {
+        cid: this.id,
+        chid: this.courseType,
+        uid: this.userid,
+        tid: t,
+        count: c,
+      };
+      this.ajax
+        .get(this.$store.state.api + "updateToolsCount", params)
+        .then((res) => {
+          this.selectCount();
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    checkFileFull(type, url) {
+      this.fullDialogVisible = true;
+      this.fulltype = type;
+      this.fullUrl = url;
+    },
+    openLine(url) {
+      window.open(url);
+    },
+    openFile(f) {
+      this.pptImgUrl = "";
+      var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
+      if (
+        a.indexOf(f.split(".")[f.split(".").length - 1].toLocaleUpperCase()) !=
+        -1
+      ) {
+        this.pptImgUrl =
+          "https://view.officeapps.live.com/op/view.aspx?src=" + f;
+        this.showPDF = false;
+        this.dialogVisible3 = true;
+      } else if (
+        f.split(".")[f.split(".").length - 1].toLocaleUpperCase() == "PDF"
+      ) {
+        this.pptImgUrl = f;
+        this.showPDF = true;
+        this.dialogVisible3 = true;
+      }
+    },
+    downloadFile(url) {
+      let _this = this;
+      let _url = "";
+      if (
+        url.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+      ) {
+        _url = url.split(
+          "https://view.officeapps.live.com/op/view.aspx?src="
+        )[1];
+      } else {
+        _url = url;
+      }
+      const x = new XMLHttpRequest();
+      x.open("GET", _url, true);
+      x.responseType = "blob";
+      const loading = _this.$loading.service({
+        background: "rgba(255, 255, 255, 0.7)",
+        target: document.body,
+        text: '文件加载中...'
+      });
+      // _this.$message.success("文件下载中...");
+      x.onload = function (e) {
+        loading.close();
+        // const url = window.URL.createObjectURL(x.response);
+        // const a = document.createElement("a");
+        // a.href = url;
+        // a.target = "_blank";
+        // a.download = url;
+        // a.click();
+        // a.remove();
+        let content = x.response;
+        let elink = document.createElement("a");
+        elink.download = decodeURI(
+          _url.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
+        );
+        elink.style.display = "none";
+        let blob = new Blob([content]);
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      };
+      x.send();
+    },
+    openText(f) {
+      this.tableJson.text = JSON.parse(f);
+      this.dialogVisibleText2 = true;
+    },
+    openAsk(f, taskCount, i) {
+      this.askJson = JSON.parse(
+        JSON.stringify(
+          this.chapInfoList[this.courseType].chapterInfo[0].taskJson[taskCount]
+            .toolArray[i].askJson
+        )
+      );
+      this.radio = JSON.parse(f);
+      this.dialogVisible5 = true;
+    },
+    setChapterIndex2(tool, index, toolIndex) {
+      tool.sourceIndex = index;
+      this.$nextTick(function () {
+        setTimeout(() => {
+          var a = document.getElementsByClassName("box_course" + toolIndex)[0]
+            .offsetHeight;
+          document.getElementsByClassName(
+            "vedioList" + toolIndex
+          )[0].style.height = a + "px";
+        }, 0);
+      });
+      this.$forceUpdate();
+    },
+    setVHeight() {
+      this.$nextTick(function () {
+        setTimeout(() => {
+          let tool =
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              this.taskCount
+            ].toolArray;
+          for (var z = 0; z < tool.length; z++) {
+            let _tool = tool[z];
+            if (_tool.tool == 51) {
+              var a = document.getElementsByClassName("box_course" + z)[0]
+                .offsetHeight;
+              document.getElementsByClassName("vedioList" + z)[0].style.height =
+                a + "px";
+            }
+          }
+        }, 0);
+      });
+    },
+    openVideo(w) {
+      this.videoDetail = JSON.parse(JSON.stringify(this.playerOptions));
+      this.videoDetail.sources[0].src = w;
+      this.videoVisible = true;
+    },
+    updateRight(psJson,val){
+      if(!psJson[val]){
+        psJson[val] = "0"
+      }
+      this.$forceUpdate();
+      console.log(psJson);
+    }
+  },
+  directives: {
+    // 使用局部注册指令的方式
+    resize: {
+      // 指令的名称
+      bind(el, binding) {
+        // el为绑定的元素,binding为绑定给指令的对象
+        let width = "",
+          height = "";
+        function isReize() {
+          const style = document.defaultView.getComputedStyle(el);
+          if (width !== style.width || height !== style.height) {
+            binding.value(); // 关键
+          }
+          width = style.width;
+          height = style.height;
+        }
+        el.__vueSetInterval__ = setInterval(isReize, 300);
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__);
+      },
+    },
+  },
+  beforeDestroy() {
+    window.onresize = null;
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+  computed: {
+    contentConvent() {
+      return function (c) {
+        return c
+          ? c
+            .replaceAll(/\r\n/g, "<br/>")
+            .replaceAll(/\n/g, "<br/>")
+            .replaceAll(/\s/g, " &nbsp")
+          : "";
+      };
+    },
+    timeB() {
+      return function (timeA) {
+        var time = new Date(timeA);
+        time.setTime(time.getTime());
+        var s2 =
+          time.getFullYear() +
+          "-" +
+          (time.getMonth() + 1 < 10
+            ? "0" + (time.getMonth() + 1)
+            : time.getMonth() + 1) +
+          "-" +
+          (time.getDate() < 10 ? "0" + time.getDate() : time.getDate());
+        return s2;
+      };
+    },
+    getMan() {
+      return function (people) {
+        let _people = "";
+        if (this.ManAarray.length) {
+          for (var i = 0; i < this.ManAarray.length; i++) {
+            if (this.ManAarray[i].userid == people) {
+              _people = this.ManAarray[i].name;
+              break;
+            }
+          }
+        }
+        return _people ? _people : "";
+      };
+    },
+  },
+  mounted() {
+    // if (this.screenType == 2) {
+    //   window.parent.postMessage({ allScreen: 4 + "s" }, "*");
+    // } else if (this.screenType == 3) {
+    //   window.parent.postMessage({ allScreen: 5 }, "*");
+    // } else if (this.screenType == 1) {
+    //   window.parent.postMessage({ allScreen: 6 }, "*");
+    // }
+    if (this.tType == 5) {
+      this.psDialog = true;
+      this.selectPs();
+    }
+    this.getCourseDetail();
+    if (this.tType == 4) {
+      this.pzDialog = true;
+      this.selectPz();
+    }
+    this.selectCount();
+  },
+};
+</script>
+
+<style scoped>
+@media screen and (max-width: 1280px) {
+
+  /* .courseIndex > div:first-child(2) {
+    width: 15% !important;
+  } */
+  /* .navText {
+    width: 120px !important;
+  } */
+  .evaCss {
+    flex-direction: column !important;
+    align-items: center !important;
+  }
+
+  .dialog_diy1>>>.el-dialog {
+    width: 100% !important;
+  }
+
+  .rightWidthCss {
+    width: 100% !important;
+  }
+
+  .dialog_diy3>>>.el-dialog {
+    width: 100% !important;
+  }
+
+  /* .textTitle >>> .el-form-item__label {
+    width: 150px !important;
+  } */
+}
+
+.evaCssMax {
+  flex-direction: column !important;
+  align-items: center !important;
+}
+
+.dialog_diy>>>.el-dialog {
+  margin-top: 10vh !important;
+}
+
+.body_student {
+  width: 77%;
+  height: 100%;
+  position: absolute;
+  left: 22%;
+  top: 0;
+}
+
+.student_head {
+  width: 100%;
+  margin: 0 auto;
+  /* padding-bottom: 20px; */
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.pb_left {
+  width: 20%;
+  margin-right: 10px;
+  background: rgb(255, 255, 255);
+  padding-right: 10px;
+  position: fixed;
+  height: 100%;
+}
+
+.wheel>img,
+.project>img,
+.star>img,
+.evaluate>img,
+.up_photo>img,
+.chapter_add>img,
+.upCover>img,
+.deleteWord>img,
+.question>img,
+.homework>img {
+  width: 100%;
+  height: 100%;
+}
+
+.upCover {
+  width: calc(100% / 3.5);
+  position: relative;
+  margin: 0 15px 10px 0;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.chapter_add {
+  width: 120px;
+  position: relative;
+  text-align: center;
+}
+
+.isAddThings {
+  margin-top: 20px;
+  position: relative;
+  text-align: center;
+  background: #f7f8fa;
+  height: 90px;
+  width: 90px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.deleteWord {
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  cursor: pointer;
+}
+
+.box_course {
+  /* width: 60%; */
+  width: 81%;
+}
+
+.wheel {
+  width: 100%;
+  height: 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: 100%;
+  margin: 0 auto;
+  margin-top: 10px;
+  padding: 0 0 20px;
+}
+
+.study_top {
+  margin-top: 70px;
+  width: 100%;
+  /* overflow: auto; */
+  height: auto;
+}
+
+.study_top .checkbox {
+  display: flex;
+  align-items: center;
+  padding: 15px 0 15px 30px;
+  flex: 0 0 auto;
+  font-weight: bold;
+  border-bottom: 1px solid #eee;
+}
+
+.study_top .check {
+  padding-bottom: 5px;
+  text-align: center;
+  cursor: pointer;
+  height: 30px;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.study_top .checked {
+  border-bottom: 4px solid #3fc6a0;
+  padding-bottom: 5px;
+  color: #3fc6a0;
+  display: flex;
+  height: 35px;
+}
+
+.study_top .checked>div,
+.study_top .check>div {
+  margin-right: 5px;
+}
+
+.videoTop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: #fff;
+  align-items: center;
+  width: 95%;
+  padding: 20px;
+}
+
+.upbtn {
+  margin: 25px;
+  background: #70afdb;
+  color: #fff;
+  width: 120px;
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.filebox {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  padding: 15px 0 5px;
+}
+
+.filebox .tooldetail {
+  width: 100%;
+  margin: 0px 12px;
+  background: rgb(247, 247, 247);
+  padding: 20px;
+  line-height: 30px;
+  word-break: break-word;
+}
+
+.file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 200px;
+}
+
+.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;
+  margin: 12px 0 5px 15px;
+  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%);
+  box-sizing: border-box;
+}
+
+.media img {
+  height: 90px;
+  width: 160px;
+  object-fit: cover;
+}
+
+.media .title {
+  padding: 5px;
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.media .btn {
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  color: #fff;
+  background: #606060;
+  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;
+  overflow: auto;
+  height: 200px;
+}
+
+.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: 120px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.upload_send {
+  margin: 30px auto 30px;
+  width: 60%;
+  background: #169bd6;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  color: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.marginT {
+  margin-top: 20px;
+}
+
+.cd_content_steps {
+  display: flex;
+  width: 90%;
+  justify-content: space-around;
+  border-top: 1px solid #eeeeee;
+}
+
+.cd_steps_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.first {
+  display: flex;
+  align-items: center;
+  margin: 15px 0 20px 0;
+  font-size: 20px;
+}
+
+.first>div:nth-child(2) {
+  font-size: 16px !important;
+  padding-left: 10px;
+  line-height: 26px;
+  box-sizing: border-box;
+}
+
+.blue_box_one {
+  text-align: center;
+  color: #fff;
+  background-image: linear-gradient(90deg, #477cd7, #65b9fc);
+  border-radius: 7px;
+  margin: 10px;
+  cursor: pointer;
+  width: 95%;
+  height: 45px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.blue_box_one>div:nth-child(1) {
+  line-height: 30px;
+  margin: 0 5px 0 10px;
+  width: 30%;
+  min-width: 70px;
+  border-radius: 4px;
+}
+
+.blue_box_one>div:nth-child(2) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 70%;
+  text-align: left;
+  margin-right: 10px;
+  max-width: calc(100% - 85px);
+}
+
+.blue_box_one>div:nth-child(2):hover {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.upFile {
+  margin: 0 auto;
+  width: 120px;
+  background: #70afdb;
+  color: #fff;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.courseTitle {
+  background: #205cc6;
+  width: 85%;
+  margin: 10px auto;
+  height: 50px;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px;
+}
+
+.ml {
+  margin-left: 20px;
+  color: #5b7dba;
+  border-left: 3px solid #5b7dba;
+  padding-left: 5px;
+  font-weight: bold;
+}
+
+.return {
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+
+.return>img {
+  width: 100%;
+  height: 100%;
+}
+
+.returnBtn {
+  background: #499eef;
+  width: 65px;
+  height: 30px;
+  color: #fff;
+  text-align: center;
+  line-height: 32px;
+  margin-right: 20px;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.tool {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 13%;
+  margin: 0 30px;
+  align-items: center;
+}
+
+.whiteBIcon {
+  width: 150px;
+  cursor: pointer;
+}
+
+.whiteBIcon>img {
+  width: 100%;
+  height: 100%;
+}
+
+.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;
+}
+
+.uploadVedio {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  margin: 0 15px 10px 0;
+}
+
+.uploadVedio>img {
+  width: 30px;
+  height: 30px;
+}
+
+.uploadVedio>span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 75px;
+  margin-top: 7px;
+}
+
+.picName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 75px;
+  margin-top: 7px;
+}
+
+.new_top {
+  display: flex;
+  background: #fff;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 60px;
+  position: relative;
+}
+
+.before {
+  position: absolute;
+  background: #c3dad4;
+  width: 6px;
+  height: 100%;
+}
+
+.courseIndex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: calc(100% - 520px);
+}
+
+.courseIndex>div:nth-child(1) {
+  margin: 0 20px;
+  padding-left: 5px;
+  font-size: 24px;
+  min-width: 100px;
+  font-weight: bold;
+  border-left: 4px solid #3363b9;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+}
+
+.courseIndex>div:nth-child(2) {
+  font-size: 23px;
+  /* width: 300px; */
+  max-width: calc(100% - 180px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.courseIndex>div:nth-child(3) {
+  border-bottom: 1px solid #d7d7d7;
+  padding-bottom: 5px;
+  background: #49a0f0;
+  width: 55px;
+  min-width: 55px;
+  border-radius: 5px;
+  color: #fff;
+  text-align: center;
+  height: 20px;
+  line-height: 26px;
+  font-size: 14px;
+  margin: 0 0 0 10px;
+}
+
+.course_text {
+  padding: 20px 0 0 15px;
+  text-indent: 30px;
+  width: 80%;
+  min-height: 20px;
+}
+
+.vedioList {
+  /* background: #f2f2f2; */
+  background: #fff;
+  border: 1px solid #ececec;
+  /* width: 38.8%; */
+  width: calc(100% - 83%);
+  /* height: 445px; */
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.vedioNav {
+  margin: 10px 0 0 15px;
+  border-bottom: 1px solid #d7d7d7;
+  padding-bottom: 5px;
+  background: #96d1ff;
+  width: 55px;
+  min-width: 55px;
+  border-radius: 5px;
+  color: #fff;
+  text-align: center;
+  height: 20px;
+  line-height: 26px;
+  font-size: 14px;
+}
+
+.queTop {
+  display: flex;
+  padding: 20px 0 20px 30px;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: 1px solid #eeeeee;
+  box-sizing: border-box;
+}
+
+.question {
+  width: 40px;
+  margin-right: 10px;
+  margin-top: 7px;
+}
+
+.queTitle {
+  margin-left: 5px;
+  font-size: 25px;
+  display: flex;
+  align-items: center;
+}
+
+.addEditor {
+  width: 100px;
+  height: 30px;
+  background: #42cda6;
+  color: #fff;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 30px;
+  box-shadow: 1px 3px 6px 1px #bfbfbf;
+  cursor: pointer;
+}
+
+.vedioName {
+  /* text-overflow: ellipsis;
+  top: 8px;
+  font-size: 14px;
+  overflow: hidden;
+  width: 100%;
+  word-break: break-all;
+  white-space: nowrap; */
+
+  cursor: pointer;
+  margin: 0px 0px 10px 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.vedioTime {
+  width: 35px;
+  position: absolute;
+  color: #fff;
+  bottom: 0px;
+  right: 0px;
+  text-align: center;
+  background: #46411f;
+  height: 20px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.homework {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+}
+
+.homebox {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.isChooseActive {
+  color: #3e88f4;
+  border-bottom: 2px solid #2f80f3;
+}
+
+.chooseWho {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  padding-bottom: 10px;
+}
+
+.chooseWho>div {
+  cursor: pointer;
+  padding-bottom: 10px;
+  margin: 0 30px;
+}
+
+.addPoint>div>img {
+  cursor: pointer;
+  margin: 0 10px;
+  width: 85px;
+  border-radius: 15px;
+  box-shadow: 0px 1px 8px 0px rgb(20 20 20 / 14%);
+}
+
+.addPoint>div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.isBorder>div {
+  margin: 0 0 10px 0;
+  align-items: flex-start !important;
+}
+
+.noiframeBox {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.iframeBox iframe {
+  width: 100%;
+  height: 800px;
+  border: none;
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
+}
+
+.upload_toolBtn {
+  background: #6b92c9;
+  color: #fff;
+  width: 110px;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  font-size: 14px;
+  border-radius: 5px;
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  bottom: 0;
+}
+
+.binfo_input,
+.pj {
+  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);
+}
+
+.dialog_diy>>>.el-dialog__header,
+.dialog_diy1>>>.el-dialog__header {
+  background: #454545 !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__title,
+.dialog_diy1>>>.el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn,
+.dialog_diy1>>>.el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close,
+.dialog_diy1>>>.el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover,
+.dialog_diy1>>>.el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy1>>>.el-dialog__body {
+  padding: 0;
+}
+
+.dialog_diy>>>.el-dialog__body,
+.dialog_diy>>>.el-dialog__footer,
+.dialog_diy1>>>.el-dialog__footer {
+  background: #fafafa;
+}
+
+.a_addBox {
+  margin: 10px 0;
+  background: #fff;
+  padding: 15px;
+  max-height: 400px;
+  overflow: auto;
+}
+
+.a_add_box {
+  border-bottom: 2px solid #eee;
+  padding-bottom: 10px;
+}
+
+.a_add_head {
+  display: flex;
+  align-items: flex-start;
+  /* justify-content: space-between; */
+  flex-direction: column;
+  margin: 10px 0;
+  font-size: 18px;
+  width: 100%;
+}
+
+.a_add_head .a_add_head_input {
+  width: 300px;
+}
+
+.a_add_head .a_add_head_div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.a_add_body {
+  display: flex;
+  align-items: center;
+}
+
+.a_add_input {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.a_add_input>>>el-radio-group {
+  margin: 10px 0;
+}
+
+.a_add_input>>>.el-radio {
+  margin-bottom: 10px;
+}
+
+.redioStyle>>>.el-radio__label {
+  font-size: 18px;
+}
+
+.redioStyle>>>.el-checkbox__label {
+  font-size: 18px;
+}
+
+.toolHeng2 {
+  width: 100%;
+}
+
+.toolHeng {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+}
+
+.toolHeng>div {
+  padding-left: 20px;
+}
+
+.isWidth {
+  width: 20%;
+}
+
+.textTitle {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 95%;
+}
+
+.textTitle>>>.el-form-item__label {
+  font-size: 22px;
+  color: #918f8f;
+  width: 100px;
+}
+
+.textTitle>>>.el-form-item__content {
+  width: calc(100% - 100px);
+}
+
+.textCss>>>.el-dialog {
+  width: 800px !important;
+  height: 400px;
+  background: #fafafa;
+}
+
+.textCss>>>.el-dialog__body {
+  margin: 55px 8% 0 8%;
+  padding: 0 !important;
+}
+
+.textCss>>>.el-dialog__footer {
+  padding-top: 38px;
+}
+
+.toolsCss>>>.el-dialog__body {
+  padding: 20px;
+}
+
+.lineCss>>>.el-dialog__body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.newNav {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: flex-start;
+}
+
+.navText {
+  cursor: pointer;
+  margin: 0px 0px 10px 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* width: 300px; */
+  width: 100%;
+}
+
+.noVedio {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+}
+
+.noNavText {
+  cursor: pointer;
+  margin: 0px 0px 10px 5px;
+  width: 112px;
+}
+
+.listNoVedio {
+  margin: 0 0 0 30px;
+  width: 97%;
+}
+
+.video-player>>>.video-js {
+  height: 100%;
+}
+
+.hangVedioList {
+  width: 90% !important;
+  height: 150px !important;
+  margin: 20px 0 0 30px;
+}
+
+.hangVedio {
+  width: 100%;
+  height: 170px !important;
+  align-items: flex-start !important;
+}
+
+.hangHand {
+  height: 150px !important;
+}
+
+.twoChild {
+  width: 95%;
+  margin: 10px;
+  border-radius: 5px;
+  background: #f2f2f2;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  transition: all 0.5s;
+  overflow: hidden;
+  height: 0;
+  background: #e7f3ff;
+}
+
+.twoChild>div:nth-child(1) {
+  margin-top: 5px;
+}
+
+.navChild {
+  width: 100%;
+  cursor: pointer;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.navChild img {
+  position: absolute;
+  right: 11px;
+  width: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.navActive {
+  height: auto;
+}
+
+.navTask {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  align-content: flex-start;
+  height: 40px;
+  justify-content: flex-start;
+  padding: 0 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.navTaskname {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  padding-left: 5px;
+}
+
+.openTaskActive {
+  color: #4386e6;
+}
+
+.iframeName {
+  margin: 5px 0;
+  border-left: 4px solid #41c4a4;
+  padding-left: 4px;
+}
+
+.toolTitle {
+  margin: 0px 0px 20px;
+  font-size: 20px;
+  font-weight: 500;
+  border-left: 4px solid #41c4a4;
+  padding-left: 4px;
+}
+
+.cru_selectBox {
+  overflow: auto;
+  width: 96%;
+  margin: 0 auto;
+  height: calc(100% - 40px - 21px - 20px);
+}
+
+.cru_selectBox::-webkit-scrollbar,
+.study_top::-webkit-scrollbar,
+.textContent::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 6px;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.cru_selectBox::-webkit-scrollbar-track,
+.study_top::-webkit-scrollbar-track,
+.textContent::-webkit-scrollbar {
+  border-radius: 10px;
+  background-color: #b8bdc9;
+}
+
+/*定义滑块 内阴影+圆角*/
+.cru_selectBox::-webkit-scrollbar-thumb,
+.study_top::-webkit-scrollbar-thumb,
+.textContent::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
+  background-color: #2c5ab3;
+}
+
+.vedioBox {
+  border-radius: 20px;
+  background: #fff;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+}
+
+.taskBox {
+  margin: 10px auto 20px;
+  background: #f7f7f7;
+  width: 97%;
+  border-radius: 10px;
+}
+
+.vedioTaskBox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  /* height: 650px; */
+}
+
+.toolBox {
+  padding: 20px 0 0 0;
+  display: flex;
+}
+
+.btnAll {
+  position: absolute;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.vedioTimeBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+.navBox {
+  background: rgb(255, 255, 255);
+  height: calc(100% - 40px);
+  padding: 5px 1px 0 1px;
+  overflow: auto;
+}
+
+.worksBox {
+  padding: 5px 0 0 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+.worksBTitle {
+  font-size: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #eeeeee;
+  display: flex;
+  align-items: center;
+}
+
+.greenBox {
+  width: 5px;
+  height: 30px;
+  background: #63b6fa;
+  margin-right: 5px;
+}
+
+.worksDetailBox {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 15px 0;
+}
+
+.works {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  align-content: center;
+  max-width: 240px;
+  width: calc(100% / 3 - 10px);
+  height: auto;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  height: 140px;
+  box-shadow: 0 0 6px 1px #dfdada;
+  border-radius: 15px;
+}
+
+.workImg {
+  width: 100%;
+  /* height: calc(100% - 40px); */
+  height: 105px;
+  position: relative;
+}
+
+.workImg>img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.worksName {
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  width: 92%;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 10px;
+}
+
+.worksName>div:nth-child(1) {
+  width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.worksName>div:nth-child(2) {
+  color: #b7b4b5;
+}
+
+.noWorksS {
+  padding: 15px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.noWorksName,
+.isWorksName {
+  background: #7cbcf1;
+  color: #fff;
+  width: 90px;
+  height: 25px;
+  text-align: center;
+  line-height: 25px;
+  border-radius: 5px;
+  margin: 10px 15px 10px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 5px;
+  text-overflow: ellipsis;
+}
+
+.isWorksName {
+  cursor: pointer;
+  background: #46a1eb !important;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  position: relative;
+}
+
+.noWorksName:hover {
+  background: #46a1eb !important;
+}
+
+.title {
+  background: #1e5cc9;
+  /* width: 98%; */
+  height: 45px;
+  color: #fff;
+  line-height: 45px;
+  padding-left: 20px;
+  box-sizing: border-box;
+}
+
+.textBox {
+  font-size: 20px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px auto 0;
+}
+
+.textContent {
+  font-size: 18px;
+  height: 450px;
+  width: 95%;
+  overflow: auto;
+  line-height: 30px;
+}
+
+.answerWidth {
+  width: 250px !important;
+  /* height: auto !important; */
+  height: 120px !important;
+}
+
+.answerBg {
+  background: url("../../assets/icon/answerBgNew.png") no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 120px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  color: #fff;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  position: relative;
+  justify-content: center;
+  border-radius: 5px;
+}
+
+.answerContent {
+  /* width: 215px; */
+  max-height: 60px;
+  word-break: break-all;
+  text-align: center;
+  /* white-space: nowrap; */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* padding: 23px 0 0; */
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  font-size: 15px;
+}
+
+.elist_input_box {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  padding: 10px 0 15px 30px;
+  flex-direction: column;
+}
+
+.elist_input {
+  /* width: 40%; */
+  width: 100%;
+}
+
+.elist_input .elist_input_box input {
+  font: inherit;
+  color: currentColor;
+  width: 200px;
+  padding: 8px 14px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  box-sizing: border-box;
+  background: #fff;
+  margin: 0 20px 0 0;
+}
+
+.elist_input .elist_input_box span {
+  height: 36px;
+  line-height: 36px;
+  color: rgb(82, 82, 82);
+}
+
+.elist_input .elist_input_box .remove {
+  height: 20px;
+  width: 20px;
+  background-size: 100% 100%;
+  background-position: unset;
+  margin-left: 5px;
+}
+
+.elist_input_box>>>.el-rate {
+  display: flex;
+  height: 36px;
+  align-items: center;
+}
+
+.elist_input_box .elist_inptu_text {
+  min-height: 50px;
+  /* width: 500px;
+  max-height: 150px; */
+  width: 100%;
+  line-height: 50px;
+  color: rgb(82, 82, 82);
+  overflow: auto;
+  text-indent: 5px;
+  background: #f7f6f9;
+  border-radius: 10px;
+}
+
+.elist_input_box .elist_inptu_text input {
+  width: 500px;
+}
+
+.elist_input_box>>>.el-rate__icon {
+  font-size: 24px;
+}
+
+.isClick {
+  background: #4d9def;
+}
+
+.bzBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.bzBox>div:nth-child(1) {
+  width: 4px;
+  height: 40px;
+  background-image: linear-gradient(180deg, #2c5cbd, #a1cff4);
+}
+
+.bzBox>div:nth-child(2) {
+  font-size: 23px;
+  font-weight: bold;
+  padding: 0px 0px 0 10px;
+}
+
+.navTitile {
+  padding: 0 0px 0 15px;
+  background: #1e5cc9;
+  color: #fff;
+  height: 40px;
+  line-height: 40px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.isTypeOne {
+  width: 240px;
+  height: 170px;
+  /* border: 1px solid #f8f8f8; */
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #dfdada;
+}
+
+.e_add_top {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 20px 0 20px;
+  border-radius: 3px;
+  background: #fff;
+}
+
+.e_add_title2 {
+  display: flex;
+  align-items: center;
+}
+
+.e_add_title2 span {
+  width: 40px;
+}
+
+.e_add_title {
+  display: flex;
+  align-items: center;
+  color: #b8b8b8;
+  font-size: 18px;
+  position: relative;
+  height: 40px;
+}
+
+.e_add_title span {
+  margin-right: 10px;
+}
+
+.e_add_title .el_input {
+  width: 300px;
+}
+
+.e_add_title>>>.el-input__inner {
+  width: 400px;
+}
+
+.e_add_btn {}
+
+.e_add_content {
+  display: flex;
+  width: 100%;
+  max-width: 650px;
+  height: 550px;
+}
+
+.e_add_list {
+  background: #fff;
+  height: 500px;
+  width: 210px;
+  position: relative;
+  margin: 15px 5px 0 0;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.e_add_list_title {
+  font-size: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px 40px;
+  text-align: center;
+  border-bottom: 1px solid #eaeaea;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 57px;
+  background: #f6f6f6;
+}
+
+.e_add_list_title span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.e_add_list_title img {
+  position: absolute;
+  right: 15px;
+  width: 25px;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.e_add_list_body {
+  height: calc(100% - 187px);
+  overflow: auto;
+}
+
+.e_add_list_child {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  padding: 15px 40px;
+  text-align: center;
+}
+
+.e_add_list_child span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.e_add_list_child img {
+  position: absolute;
+  right: 10px;
+  width: 21px;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.e_add_list_child+.e_add_list_child {
+  border-top: 1px solid #eaeaea;
+}
+
+.e_add_list_child .active {
+  color: #409eff;
+}
+
+.e_add_list_btn {
+  position: absolute;
+  bottom: 0;
+  height: 50px;
+  background: rgb(120, 120, 254);
+  width: 100%;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 50px;
+  cursor: pointer;
+}
+
+.e_add_list_detail {
+  position: absolute;
+  bottom: 0;
+  height: 130px;
+  background: rgb(120, 120, 254);
+  width: 100%;
+  color: #fff;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.e_add_list_detail textarea {
+  height: 90%;
+  width: 95%;
+  border: none;
+  resize: none;
+  outline: none;
+  padding: 5px;
+  box-sizing: border-box;
+}
+
+.e_add_list_pbox {
+  width: 100%;
+  max-width: 650px;
+  /* height: 600px; */
+}
+
+.e_add_list_pbox_title {
+  height: 50px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+.type_title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.type_content {
+  font-size: 16px;
+  margin-left: 30px;
+}
+
+.type_content span+span {
+  margin-left: 20px;
+}
+
+.type_content span {
+  cursor: pointer;
+  padding-bottom: 5px;
+  box-sizing: border-box;
+}
+
+.type_content .active {
+  color: #409eff;
+  border-bottom: 2px solid #409eff;
+}
+
+.e_add_list_pbox_content {
+  height: calc(100% - 50px);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: #fff;
+}
+
+.evaCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.cru_line {
+  position: absolute;
+  bottom: 0px;
+  transition: all 0.5s;
+  left: 0px;
+  width: 125px;
+  margin-left: -25px;
+}
+
+.isNoMessage {
+  width: 20%;
+  margin: 25% auto 0;
+}
+
+.isNoMessage>img {
+  width: 100%;
+  height: 100%;
+}
+
+.fullStyle>>>.el-dialog__body {
+  height: 100% !important;
+}
+
+.fullStyle>>>.el-dialog,
+.fullStyle {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+}
+
+.full_diy>>>.el-dialog {
+  margin: 0 !important;
+  height: 100%;
+  padding: 4px;
+}
+
+.full_diy>>>.el-dialog__body {
+  height: calc(100% - 100px);
+}
+
+.full_diy2>>>.el-dialog__body {
+  height: calc(100% - 50px);
+  padding: 0;
+}
+
+.switchCss {
+  /* width: 100%; */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  /* justify-content: center; */
+}
+
+.isClickNav {
+  color: #499eef;
+}
+
+.commentImg {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+.commentImg>img {
+  width: 100%;
+  height: 100%;
+}
+
+.comment {
+  background: #f9f9f9;
+  border-radius: 0 0 15px 15px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  height: 35px;
+}
+
+.commentList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  /* margin-left: 15px; */
+  margin-left: 8px;
+}
+
+.scoreImg {
+  width: 17px;
+  height: 17px;
+}
+
+.studentDetail {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  /* align-items: center; */
+  align-items: flex-start;
+}
+
+.tx {
+  width: 50px;
+}
+
+.tx>img {
+  width: 100%;
+  height: 100%;
+}
+
+.nameAndTime {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  margin-left: 10px;
+}
+
+.worksAnswer {
+  color: #4078dd;
+  margin: 10px 0;
+  font-size: 16px;
+  position: relative;
+}
+
+.worksAnswer>img {
+  width: 500px;
+  height: 300px;
+  object-fit: contain;
+  margin: 0 auto;
+  display: block;
+}
+
+.commentTop {
+  border-bottom: 1px solid #eaeaea;
+  padding-bottom: 10px;
+}
+
+.commentBox {
+  padding-top: 15px;
+}
+
+.pl {
+  font-size: 18px;
+}
+
+.plName {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  color: #78787a;
+}
+
+.evalCss {
+  background: #fff;
+  font-size: 18px;
+}
+
+.nav {
+  color: #9d9d9d;
+  padding: 5px 0 15px 20px;
+}
+
+.middleBox {
+  padding: 5px 0 15px 20px;
+}
+
+.pfBox {
+  padding-bottom: 30px;
+}
+
+.nameAndrate {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding-bottom: 10px;
+}
+
+.nameAndrate>div {
+  margin-left: 10px;
+  color: #000;
+}
+
+.pfBox>div:nth-child(2) {
+  background: #f7f6f9;
+  width: 400px;
+  min-height: 45px;
+  border-radius: 10px;
+  font-size: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  color: #000;
+}
+
+.bz {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.bz>div {
+  padding: 0 10px;
+}
+
+.select_box2_title {
+  background: #fff;
+  border-radius: 5px;
+  padding: 15px 10px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.select_box2_title>div:nth-child(2) {
+  margin-left: 10px;
+  color: #c4c4c4;
+}
+
+.select_box2_box {
+  display: flex;
+  height: 500px;
+}
+
+.select_box2_img {
+  width: calc(100% - 310px);
+  height: 100%;
+  overflow: auto;
+  background: #fff;
+  border-radius: 5px;
+}
+
+.select_box2_img img {
+  width: 100%;
+}
+
+.select_box2_answer {
+  background: #fff;
+  margin-left: 10px;
+  border-radius: 5px;
+  width: 300px;
+  overflow: auto;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.select_answer_title {
+  padding: 0 0 15px 20px;
+  color: #c4c4c4;
+}
+
+.select_box2_answer_box {
+  margin: 0 0 10px 20px;
+  width: 85%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.select_box2_answer_box>>>.el-input.is-disabled .el-input__inner {
+  color: #000;
+}
+
+.upAnswerCss {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+}
+
+.upAnswerCss>>>.el-button {
+  width: 95px;
+  height: 35px;
+  line-height: 35px;
+  padding: 0;
+}
+
+.rightWidthCss {
+  width: 60%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.rightAnswer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  color: red;
+  margin-bottom: 31px;
+}
+
+.rightAnswerCss {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  padding-top: 60px;
+}
+
+.blueCss {
+  color: #767de1;
+  margin-left: 10px;
+}
+
+.redCss {
+  color: red;
+}
+
+.redioStyle>>>.el-radio__input.is-checked+.el-radio__label {
+  color: rgb(0 123 255) !important;
+}
+
+.redioStyle>>>.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: rgb(0 123 255) !important;
+}
+
+.zuoyeYulan {
+  padding-top: 15px;
+  font-size: 18px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.buttonA {
+  margin-left: 10px;
+  padding: 0;
+}
+
+.displayBox {
+  margin-bottom: 10px;
+  display: block;
+  border-bottom: 3px solid #eee;
+  display: flex;
+  align-items: center;
+}
+
+.easy_comment {
+  width: calc(100% - 90px);
+  margin-left: 10px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.easy_comment>div {
+  border: 1px solid #4a4a4a;
+  color: #666;
+  border-radius: 15px;
+  padding: 5px 10px;
+  font-size: 16px;
+  margin-bottom: 10px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.easy_comment div:hover {
+  border: 1px solid #f7ba2a;
+  color: #c69217;
+}
+
+.xuan_right_box {
+  padding: 10px;
+  background: rgb(247, 247, 247);
+  margin: 10px 12px;
+  border-radius: 5px;
+}
+
+.tool_right_box {
+  display: flex;
+  align-items: center;
+}
+
+.tool_right_box+.tool_right_box {
+  margin-top: 10px;
+}
+
+.right_box_xuan {
+  background: rgb(0 123 255);
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px;
+  margin-left: 10px;
+}
+
+.pButton {
+  position: fixed;
+  /* right: 5%; */
+  /* bottom: 5%; */
+  color: #fff;
+  /* width: 50px;
+  height: 50px; */
+  /* border-radius: 50%; */
+  text-align: center;
+  /* line-height: 50px; */
+  /* background-image: -webkit-linear-gradient(left, #72aaf4, #4d81d5); */
+  cursor: pointer;
+  z-index: 999;
+  right: 0;
+  top: 83px;
+  width: 50px;
+  height: 50px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 0 8px 0px #c5c5c5;
+}
+
+.pzClass {
+  width: calc(100% - 340px);
+}
+
+.newDialogCss {
+  /* position: fixed;
+  right: 5%;
+  top: 50%;
+  width: 340px;
+  transform: translateY(-50%);
+  height: 60%;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 15px;
+  z-index: 999; */
+  position: fixed;
+  right: 0;
+  top: 70px;
+  width: 340px;
+  height: calc(100% - 80px);
+  z-index: 999;
+  background: #fff;
+  border-radius: 15px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  overflow: hidden;
+}
+
+.pzTop {
+  color: #fff;
+  background: #000;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  border-radius: 15px 15px 0 0;
+}
+
+.pzTop2 .checkbox {
+  display: flex;
+  align-items: center;
+  padding: 15px 30px;
+  flex: 0 0 auto;
+  font-weight: bold;
+  border-bottom: 1px solid #eee;
+  justify-content: space-between;
+}
+
+.pzTop2 .check {
+  text-align: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.pzTop2 img {
+  width: 25px;
+  cursor: pointer;
+}
+
+.pzTop>div:nth-child(1) {
+  padding-left: 10px;
+}
+
+.pzTop>div:nth-child(2) {
+  width: 15px;
+  height: 15px;
+  padding-right: 10px;
+  cursor: pointer;
+}
+
+.pzTop>div:nth-child(2)>img {
+  width: 100%;
+  height: 100%;
+}
+
+.pzBox,
+.noPzBox {
+  height: calc(100% - 60px);
+  /* background: #ededed; */
+  background: #fff;
+  /* border-radius: 0 0 15px 15px; */
+}
+
+.noPzBox {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.pzList {
+  background: #f7f7f7;
+  width: 90%;
+  margin: 0 auto 15px;
+  border-radius: 5px;
+}
+
+.pzNavTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: 10px 10px 0 10px;
+  align-items: center;
+}
+
+.pzDelete {
+  cursor: pointer;
+  margin-left: auto;
+  font-size: 14px;
+  color: #afafaf;
+}
+
+.pzNavTop>div:nth-child(1) {
+  background: #3760af;
+  width: 35px;
+  height: 35px;
+  color: #fff;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 50%;
+  font-size: 14px;
+}
+
+.pzNavTop>div:nth-child(2) {
+  font-size: 18px;
+  color: #959595;
+  margin-left: 5px;
+}
+
+.pzContent {
+  padding: 10px;
+  word-break: break-word;
+}
+
+.pzContent audio {
+  width: 100%;
+}
+
+.pzContent audio::-webkit-media-controls-panel {
+  background: #fff;
+}
+
+.pzListBox {
+  padding-top: 15px;
+  height: calc(100% - 60px);
+  overflow: auto;
+}
+
+.addPzButton {
+  position: relative;
+  margin-top: 3px;
+  width: 100%;
+}
+
+.addPzButton .img1 {
+  position: absolute;
+  top: 50%;
+  right: 25px;
+  transform: translateY(-50%);
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.addPzButton .img1 div {
+  display: flex;
+}
+
+.addPzButton .img1 div img {
+  width: 28px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.addPzButton .img1 div span {
+  font-size: 14px;
+  margin: 4px 0 0 3px;
+  color: #afafaf;
+}
+.psTypeBox{
+  display: flex;
+  margin-top: 20px;
+  padding: 0px 0 0 30px;
+}
+.psTypeBox > span{
+  cursor: pointer;
+}
+.psTypeBox > span + span{
+  margin-left: 10px;
+}
+.psTypeBox .active{
+  color: #3e88f4;
+  border-bottom: 2px solid #2f80f3;
+}
+.psBox {
+  margin-bottom: 50px;
+}
+
+.psBox>div {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  padding: 0px 30px;
+}
+
+.psBox>div>span:nth-child(1) {
+  width: 280px;
+  font-size: 15px;
+  text-align: left;
+  margin-right: 10px;
+}
+
+.psBox>div>.number {
+  width: 100px;
+  text-align: center;
+}
+
+.addPz {
+  background: #4b79ce;
+  width: 100px;
+  color: #fff;
+  font-size: 12px;
+  height: 30px;
+  margin: 0 auto;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.addDialogCss {
+  position: fixed;
+  right: 37%;
+  top: 50%;
+  width: 600px;
+  transform: translateY(-50%);
+  height: 70%;
+  min-height: 450px;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 15px;
+  z-index: 999;
+}
+
+.teacherPz {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.teacherPzImg {
+  width: 30px;
+  height: 30px;
+}
+
+.teacherPzImg>img {
+  width: 100%;
+  height: 100%;
+}
+
+.addPzBox {
+  height: calc(100% - 40px);
+  background: #ededed;
+}
+
+.pzAudioClass {
+  margin: 15px 14px;
+  background: #fff;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pzConText {
+  width: 95%;
+  height: 100%;
+  margin: 10px auto 0;
+  border: none;
+  background: #fff;
+  border-radius: 0px;
+}
+
+.pzConText>>>.text {
+  height: calc(100% - 82px);
+}
+
+.addTextCss {
+  background: #4b79ce;
+  width: 80px;
+  height: 30px;
+  text-align: center;
+  color: #fff;
+  line-height: 30px;
+  border-radius: 10px;
+  margin: 10px auto 0;
+  cursor: pointer;
+}
+
+.pzConText:focus-visible {
+  border: none !important;
+}
+
+.maxWidth {
+  width: 1000px;
+}
+
+.noPz {
+  width: 150px;
+  margin: 0 auto 20%;
+}
+
+.noPz>img {
+  width: 100%;
+  height: 100%;
+}
+
+.pzList .time {
+  text-align: right;
+  box-sizing: border-box;
+  padding: 0 10px 10px 0px;
+  color: #949494;
+  font-size: 14px;
+}
+
+/* table 样式 */
+.cont>>>table {
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+
+.cont>>>table td,
+.cont>>>table th {
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  /* padding: 20px 5px; */
+  padding: 5px 10px;
+  max-width: 0px;
+  height: 30px;
+  vertical-align: baseline;
+}
+
+.cont>>>table th {
+  border-bottom: 2px solid #ccc;
+  text-align: center;
+}
+
+/* blockquote 样式 */
+.cont>>>blockquote {
+  display: block;
+  border-left: 8px solid #d0e5f2;
+  padding: 5px 10px;
+  margin: 10px 0;
+  line-height: 1.4;
+  font-size: 100%;
+  background-color: #f1f1f1;
+}
+
+.addPzCheck {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: 10px 15px 0;
+}
+
+.addPzCheck span {
+  cursor: pointer;
+  padding-bottom: 5px;
+  font-weight: bold;
+}
+
+.addPzCheck span+span {
+  margin-left: 10px;
+}
+
+.addPzCheck .isChooseActive {
+  color: #3e88f4;
+  border-bottom: 2px solid #2f80f3;
+}
+
+/* code 样式 */
+.cont>>>code {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  padding: 3px 5px;
+  margin: 0 3px;
+}
+
+.cont>>>pre code {
+  display: block;
+}
+
+/* ul ol 样式 */
+.cont>>>ul,
+ol {
+  margin: 10px 0 10px 20px;
+}
+
+.scoreBox,
+.scoreDetailBox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 20px;
+  font-size: 18px;
+  width: 100%;
+}
+
+.scoreBox .t,
+.scoreDetailBox .t {
+  margin-right: 10px;
+  width: 100px;
+  text-align: right;
+}
+
+.scoreDetailBox {
+  align-items: flex-start;
+}
+
+.scoreDetailBox>>>.el-textarea {
+  width: calc(100% - 200px);
+}
+
+.scoreBox>>>.el-input {
+  width: 130px;
+  font-size: 38px;
+}
+
+.scoreBox>>>.el-input__inner {
+  height: 60px;
+}
+
+.answerScore {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #0000008f;
+  border-radius: 5px;
+  padding: 3px 5px;
+  font-size: 14px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.open_box .switch_box {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.open_box .switch_box+.switch_box {
+  margin-top: 10px;
+}
+
+.deleteImg {
+  width: 25px !important;
+  height: 25px !important;
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.deleteImg2 {
+  width: 15px !important;
+  height: 15px !important;
+  top: 5px;
+  right: 5px;
+}
+
+.rightW {
+  right: 40px;
+}
+
+.drawPBox {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.drawPBox span {
+  font-size: 18px;
+  color: #606266;
+  padding-bottom: 10px;
+  margin: 10px 0;
+  border-bottom: 1px solid #eaeaea;
+}
+
+.drawPBox img {
+  width: 500px;
+  height: 300px;
+  object-fit: contain;
+  cursor: pointer;
+  margin: 0 auto;
+}
+
+.sentenBox {
+  background: #fff;
+  height: 450px;
+  overflow: auto;
+  background-image: url("../../assets/icon/conSentences/stuBg.png");
+  background-position: 102%;
+  background-repeat: no-repeat;
+  background-size: 60%;
+}
+
+.addSen {
+  background: #409efe;
+  width: 90px;
+  color: #fff;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 5px;
+  float: right;
+  margin: 10px 20px 0 0;
+  cursor: pointer;
+}
+
+.sentenTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 55px 0 0 20px;
+  box-sizing: border-box;
+}
+
+.sentenTop>div:nth-child(2) {
+  width: 300px;
+  margin: 0 15px;
+}
+
+.sentenTop>div:nth-child(3) {
+  background: #409efe;
+  color: #fff;
+  width: 65px;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.cardList,
+.cardList1 {
+  padding: 10px 0 10px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  box-sizing: border-box;
+  border-bottom: 1px solid #f4f4f4;
+  width: 98%;
+  margin: 0 auto;
+  min-width: 60%;
+  max-width: 85%;
+}
+
+.cardList1 {
+  padding: 10px 0 10px 10px !important;
+  margin: 0 !important;
+}
+
+.cardBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
+}
+
+.cardBox>div {
+  margin-bottom: 10px;
+}
+
+.isCard,
+.isChooseCard,
+.noCard,
+.isCard1 {
+  width: 130px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  font-size: 20px;
+  cursor: pointer;
+  background-image: url("../../assets/icon/conSentences/titleBorder.png");
+  background-size: cover;
+  transition: all 2s;
+  margin-right: 20px;
+}
+
+.isCard>div,
+.noCard>div,
+.isCard1>div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 75%;
+  margin: 0 auto;
+}
+
+.noCard {
+  background-image: none;
+}
+
+.isCard1 {
+  background-image: url("../../assets/icon/conSentences/answerBorder.png");
+}
+
+.isChooseCard {
+  background-image: none;
+  border: 1px dashed #b9b9b9;
+  border-radius: 10px;
+}
+
+.card {
+  width: 130px;
+  height: 60px;
+}
+
+.card>img {
+  width: 100%;
+  height: 100%;
+}
+
+.rightCardBox {
+  margin: 10px 0 0 10px;
+}
+
+.rightCardBox>div:nth-child(1) {
+  margin-bottom: 10px;
+}
+
+.cardCss {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  border-bottom: 3px solid #b4c3d3;
+  padding: 0 0 5px 0;
+  margin-right: 10px;
+}
+
+.cardCss>div:nth-child(2) {
+  background: #5b7b9d;
+  color: #fff;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 20px;
+}
+
+.isWrong {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+}
+
+.answerRight {
+  width: 25%;
+}
+
+.isTj {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.isTj>div:nth-child(2) {
+  color: #727070;
+  margin-left: 10px;
+}
+
+.isTjImg {
+  width: 30px;
+  height: 30px;
+}
+
+.isTjImg>img {
+  width: 100%;
+  height: 100%;
+}
+
+.cardAnswerBox {
+  font-size: 18px;
+  width: 97%;
+  border: 5px;
+  padding: 0;
+  border-radius: 5px;
+  margin: 10px auto;
+  word-break: break-word;
+}
+
+.w_name {
+  margin-bottom: 10px;
+}
+
+.w_name span {
+  font-size: 16px;
+}
+
+.w_teachert {
+  width: 50px !important;
+  position: absolute;
+  height: auto !important;
+  z-index: 10;
+  right: 25px;
+  top: -25px;
+}
+
+.group_workBox {}
+
+.group_workBox+.group_workBox {
+  margin-top: 20px;
+}
+
+.group_box {
+  padding-bottom: 20px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.group_title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.group_name {
+  background-image: url(../../assets/icon/groupN.png);
+  width: 220px;
+  background-size: 100% 100%;
+  height: 67px;
+  padding: 0 20px 0 43px;
+  box-sizing: border-box;
+  line-height: 63px;
+  color: #fff;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.group_work {
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.g_d_box {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: space-around;
+}
+
+.g_d_box .isChair {
+  background-image: url(../../assets/avatar.png) !important;
+}
+
+.g_d_group {
+  width: 500px;
+  margin-bottom: 80px;
+}
+
+.g_d_group_chair {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.g_d_group_chair>div+div {
+  margin-left: 30px;
+}
+
+.g_d_group_chair>div,
+.g_d_group_chair2>div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.g_d_group_chair>div>span:nth-child(1),
+.g_d_group_chair2>div>span:nth-child(1) {
+  background-image: url(../../assets/icon/chair.png);
+  width: 50px;
+  height: 50px;
+  display: block;
+  background-size: 100% 100%;
+}
+
+.g_d_group_tableBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.g_d_group_chair2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.g_d_group_chair2>div+div {
+  margin-top: 10px;
+}
+
+.g_d_group_table {
+  background-image: url(../../assets/icon/groupBg.png);
+  width: 354px;
+  height: 196px;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: #fff;
+}
+
+.g_d_group_table>div:nth-child(1) {
+  font-size: 24px;
+  margin-bottom: 5px;
+}
+
+.g_d_group_table>div:nth-child(2) div {
+  cursor: pointer;
+  background: #2e77bf;
+  padding: 4px 10px;
+  border-radius: 5px;
+}
+
+.groupBox {}
+
+.groupContent+.groupContent {
+  margin-top: 30px;
+}
+
+.groupTitle {
+  font-size: 24px;
+  color: rgb(80, 80, 80);
+  margin-bottom: 20px;
+}
+
+.groupName {
+  display: flex;
+  align-items: center;
+}
+
+.groupn {
+  font-size: 15px;
+  margin-right: 10px;
+}
+
+.groupName+.groupName {
+  margin-top: 15px;
+}
+
+.groupBtn {
+  margin-left: 10px;
+}
+
+.groupContent>>>.el-input-number.is-without-controls .el-input__inner {
+  text-align: left;
+}
+
+.g_d_btnBox {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  margin-bottom: 20px;
+}
+
+.updateChair {
+  position: relative;
+}
+
+.updateChairBtn {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  /* display: flex; */
+  align-items: center;
+  justify-content: center;
+  background: #00000087;
+  color: #fff;
+  border-radius: 50px;
+  display: none;
+  cursor: pointer;
+}
+
+.updateChair:hover .updateChairBtn {
+  display: flex;
+}
+
+.group_staic_box {
+  display: flex;
+  padding: 30px 40px 10px;
+  flex-wrap: wrap;
+}
+
+.group_staic {
+  /* width: 50%; */
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.group_staic span:nth-child(1) {
+  width: 150px;
+  text-align: right;
+  margin-right: 15px;
+}
+
+.group_staic span:nth-child(2) {
+  background: rgb(0 123 255);
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+.homeWorkBox {
+  margin: 10px 0;
+  padding: 0 10px;
+}
+
+.homeWorkBox .htitle {
+  margin: 0 0 15px;
+  font-size: 18px;
+}
+
+.toolPhoto_box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.photo_box {
+  margin: 10px 25px 0 0;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.photo_box>span {
+  margin-bottom: 10px;
+}
+
+.toolPhoto {
+  width: 200px;
+  height: 105px;
+  border-radius: 5px;
+  box-shadow: rgb(223 218 218) 0px 0px 6px 1px;
+  cursor: pointer;
+}
+
+.toolPhoto img {
+  height: 100%;
+  width: 100%;
+  /* object-fit: contain; */
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.task_box {
+  margin: 15px auto 5px;
+  width: calc(100% - 60px);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.task_pbox+.task_pbox {
+  margin-left: 20px;
+}
+
+.tcMember+.tcMember::before {
+  content: "、";
+}
+</style>

+ 18 - 0
src/router/index.js

@@ -6,8 +6,10 @@ import login from '@/components/login'
 import index from '@/components/index'
 import indexGM from '@/components/GM/indexGM'
 import studentIndex from '@/components/studentIndex'
+import studioIndex from '@/components/studio/index'
 import courseDetail from '@/components/courseDetail'
 import courseDetailS from '@/components/student/courseDetail'
+import courseDetailStudio from '@/components/studio/courseDetail'
 import courseDetailNT from '@/components/noTerminal/courseDetail'
 import courseDetailGM from '@/components/GM/courseDetailGM'
 import mine from '@/components/mine'
@@ -24,6 +26,7 @@ import audioDemo from '@/components/audioDemo'
 import cameraDemo from '@/components/cameraDemo'
 import studyStudent from '@/components/studyStudent'
 import studyStudentS from '@/components/student/studyStudent'
+import studyStudentStudio from '@/components/studio/studyStudent'
 import studyStudentNT from '@/components/noTerminal/studyStudent'
 import studyStudentGM from '@/components/GM/studyStudentGM'
 import pdf from '@/components/pdf'
@@ -180,6 +183,21 @@ export default new Router({
             name: 'courseDetailNT',
             component: courseDetailNT,
             requireAuth: ''
+        }, {
+            path: '/studioIndex',
+            name: 'studioIndex',
+            component: studioIndex,
+            requireAuth: ''
+        }, {
+            path: '/courseDetailStudio',
+            name: 'courseDetailStudio',
+            component: courseDetailStudio,
+            requireAuth: ''
+        }, {
+            path: '/studyStudentStudio',
+            name: 'studyStudentStudio',
+            component: studyStudentStudio,
+            requireAuth: ''
         }
     ]
 })

Some files were not shown because too many files changed in this diff