1

src/components/easy3/studyStudent.vue

@@ -45,22 +45,20 @@
       </div>
       <div
         class="pButton"
-        style="
-          left: 0;
-          background-image: linear-gradient(90deg, #477cd7, #65b9fc);
-          top: 140px;
-        "
+        style="left: 0; top: 140px"
         v-if="mlDialog == false"
         @click="setContent2(true)"
       >
         <!-- 批 , getCourseDetail()-->
-        <img src="../../assets/mlBtn.png" style="width: 25px" alt="" />
+        <img
+          src="../../assets/icon/newIcons/isRight.png"
+          style="width: 45px"
+          alt=""
+        />
       </div>
       <div class="pb_left" v-else>
         <!-- <div class="courseTitle">{{ courseDetail.title }}</div> -->
-        <div
-          style="border-bottom: 1px solid #cad1dc; padding: 15px 0; width: 100%"
-        >
+        <div style="border-bottom: 1px solid #cad1dc; width: 100%">
           <div class="courseTitle">
             <div
               style="
@@ -85,7 +83,7 @@
             </div>
             <el-tooltip effect="light" content="收缩" placement="top">
               <div class="mlImg" @click="setContent2(false)">
-                <img src="../../assets/icon/newIcon/mlBtn.png" alt="" />
+                <img src="../../assets/icon/newIcons/isRight.png" alt="" />
               </div>
             </el-tooltip>
           </div>
@@ -103,6 +101,26 @@
                       stageIndex == courseType,
                   }"
                 >
+                  <div v-if="nav.tool[0].tool != undefined">
+                    <div
+                      class="closeTri1"
+                      v-if="
+                        navIndex == taskCount &&
+                        nav.id == navId &&
+                        stageIndex == courseType
+                      "
+                      @click="openTask(stageIndex, navIndex, nav.id)"
+                    >
+                      <img src="../../assets/icon/newIcons/bDown.png" alt />
+                    </div>
+                    <div
+                      class="closeTri1"
+                      v-else
+                      @click="openTask(stageIndex, navIndex, nav.id)"
+                    >
+                      <img src="../../assets/icon/newIcons/right.png" alt />
+                    </div>
+                  </div>
                   <div
                     @click="openTask(stageIndex, navIndex, nav.id)"
                     class="navItemList"
@@ -132,6 +150,61 @@
                     </el-tooltip>
                   </div>
                 </div>
+                <div
+                  v-if="nav.tool[0].tool != undefined"
+                  class="toolChild"
+                  :class="{
+                    toolActive:
+                      navIndex == taskCount &&
+                      nav.id == navId &&
+                      stageIndex == courseType,
+                  }"
+                >
+                  <div v-for="(t, toolIndex) in nav.tool" :key="toolIndex">
+                    <div
+                      class="gjCss"
+                      :class="{ isGjCss: t.isTool }"
+                      @click="jumpGj(stageIndex, navIndex, toolIndex)"
+                    >
+                      <div>工具{{ toolIndex + 1 }}:</div>
+                      <div v-if="t.tool == 58">模拟驾驶</div>
+                      <div v-if="t.tool == 59">路径搜索</div>
+                      <div v-if="t.tool == 60">深度学习</div>
+                      <div v-if="t.tool == 10">倒计时</div>
+                      <div v-if="t.tool == 65">挑人</div>
+                      <div v-if="t.tool == 7">思维网格</div>
+                      <div v-if="t.tool == 1">电子白板</div>
+                      <div v-if="t.tool == 52">文档</div>
+                      <div v-if="t.tool == 3">思维导图</div>
+                      <div v-if="t.tool == 48">表格</div>
+                      <div v-if="t.tool == 49">学生分组</div>
+                      <div v-if="t.tool == 4">问卷调查</div>
+                      <div v-if="t.tool == 45">选择题</div>
+                      <div v-if="t.tool == 15">问答</div>
+                      <div v-if="t.tool == 16">作业提交</div>
+                      <div v-if="t.tool == 50">批量上传</div>
+                      <div v-if="t.tool == 41">选择匹配</div>
+                      <div v-if="t.tool == 47">排序</div>
+                      <div v-if="t.tool == 40">个人评价</div>
+                      <div v-if="t.tool == 18">训练平台</div>
+                      <div v-if="t.tool == 21">AIoT Blockly</div>
+                      <div v-if="t.tool == 23">AI Python</div>
+                      <div v-if="t.tool == 24">AI Blockly</div>
+                      <div v-if="t.tool == 32">源码编辑</div>
+                      <div v-if="t.tool == 57">CocoPi</div>
+                      <div v-if="t.tool == 63">海龟编程</div>
+                      <div v-if="t.tool == 28">翻译</div>
+                      <div v-if="t.tool == 31">数字画板</div>
+                      <div v-if="t.tool == 39">GeoGebra</div>
+                      <div v-if="t.tool == 66">公式编辑</div>
+                      <div v-if="t.tool == 67">分子结构</div>
+                      <div v-if="t.tool == 68">时间轴</div>
+                      <div v-if="t.tool == 25">目标管理</div>
+                      <div v-if="t.tool == 26">课程设计</div>
+                      <div v-if="t.tool == 62">交互视频</div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -139,10 +212,7 @@
       </div>
       <div class="body_student" :class="{ navLeftCss: !mlDialog }">
         <div class="new_topFixed"></div>
-        <div
-          class="new_top"
-          :class="{ navLeftCss: !mlDialog }"
-        >
+        <div class="new_top" :class="{ navLeftCss: !mlDialog }">
           <div class="courseIndex">
             <div>任务{{ taskCount + 1 }}</div>
             <el-tooltip
@@ -161,7 +231,71 @@
             </el-tooltip>
           </div>
           <div class="btnAll">
-            <div class="returnBtn commentIcon" @click="setPz" v-if="tType == 1">
+            <div class="btnLeft">
+              <el-tooltip effect="light" content="刷新" placement="top">
+                <div class="reBtnIcon" @click="refreshCourse"></div>
+              </el-tooltip>
+              <el-tooltip effect="light" content="评论" placement="top">
+                <div class="commentIcon" @click="setPz" v-if="tType == 1"></div>
+              </el-tooltip>
+              <div v-if="!videoStart && (tType == 1 || tType == 4)">
+                <el-tooltip effect="light" content="录制" placement="top">
+                  <div class="vedioIcon" @click="startRecording"></div>
+                </el-tooltip>
+              </div>
+              <div v-else-if="tType == 1 || tType == 4">
+                <el-tooltip effect="light" content="下载" placement="top">
+                  <div class="vedioIcon1" @click="stopRecording"></div>
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="btnRight">
+              <div class="last" @click="nextOrpreSteps(0)">
+                <div class="lastImg">
+                  <img src="../../assets/icon/newIcons/last.png" alt="" />
+                </div>
+                <div class="lastText">上一步</div>
+              </div>
+              <div class="last" @click="nextOrpreSteps(1)">
+                <div class="lastText">下一步</div>
+                <div class="lastImg">
+                  <img src="../../assets/icon/newIcons/next.png" alt="" />
+                </div>
+              </div>
+              <!-- <div class="last" @click="juriVisible = true" v-if="tType == 1">
+                <div class="lastImg">
+                  <img src="../../assets/icon/newIcons/lock.png" alt="" />
+                </div>
+                <div class="lastText">权限</div>
+              </div> -->
+              <div
+                class="returnBtn1 returnIcon"
+                @click.stop="
+                  goTo(
+                    '/courseDetail?userid=' +
+                      userid +
+                      '&oid=' +
+                      oid +
+                      '&org=' +
+                      org +
+                      '&cid=' +
+                      classId +
+                      '&courseId=' +
+                      id +
+                      '&tType=' +
+                      tType +
+                      '&screenType=' +
+                      screenType
+                  )
+                "
+              >
+                <div class="lastImg">
+                  <img src="../../assets/icon/newIcon/return.png" alt="" />
+                </div>
+                <div class="lastText" style="color: #000">返回</div>
+              </div>
+            </div>
+            <!-- <div class="returnBtn commentIcon" @click="setPz" v-if="tType == 1">
               评论
             </div>
             <div
@@ -171,17 +305,6 @@
             >
               录制
             </div>
-            <!-- <div 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 class="returnBtn" @click="refreshCourse">刷新</div>
             <div class="returnBtn" @click="nextOrpreSteps(0)">上一步</div>
             <div class="returnBtn" @click="nextOrpreSteps(1)">下一步</div>
@@ -207,7 +330,7 @@
               "
             >
               返回
-            </div>
+            </div> -->
           </div>
         </div>
         <div
@@ -339,21 +462,14 @@
                 </div>
                 <div
                   class="pButton"
-                  style="
-                    position: absolute;
-                    right: 20px;
-                    top: 0;
-                    background: #205cc6;
-                    z-index: 998;
-                    opacity: 0.8;
-                  "
+                  style="position: absolute; right: 20px; top: 0; z-index: 998"
                   v-if="!contentDialog"
                   @click="setContent(true)"
                 >
                   <!-- 批 -->
                   <img
-                    src="../../assets/mlBtn.png"
-                    style="width: 25px"
+                    src="../../assets/icon/newIcons/isLeft.png"
+                    style="width: 45px"
                     alt=""
                   />
                 </div>
@@ -380,7 +496,10 @@
                     <div class="navCorOpenBox">
                       <div class="navTitile">内容列表：</div>
                       <div class="navCorOpen" @click="setContent(false)">
-                        <img src="../../assets/icon/newIcon/mlBtn.png" alt="" />
+                        <img
+                          src="../../assets/icon/newIcons/isRight.png"
+                          alt=""
+                        />
                       </div>
                     </div>
                     <div class="navBox">
@@ -429,7 +548,10 @@
                               />
                             </div>
                           </div>
-                          <div class="navListItem" v-if="vitem.type == 8 || vitem.type == 14">
+                          <div
+                            class="navListItem"
+                            v-if="vitem.type == 8 || vitem.type == 14"
+                          >
                             <div
                               @click="doUrl(vitem.url, vindex)"
                               class="navText"
@@ -660,12 +782,12 @@
               :style="{
                 borderRadius:
                   chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
-                  .taskDetail == '' &&
-                vChapterData[0].length == 0 &&
-                fileC[0].length == 0
-                      ? '0 0 20px 20px'
-                      : '20px',
-                }"
+                    .taskDetail == '' &&
+                  vChapterData[0].length == 0 &&
+                  fileC[0].length == 0
+                    ? '0 0 20px 20px'
+                    : '20px',
+              }"
             >
               <div
                 class="queTop"
@@ -7919,18 +8041,20 @@
                 courseDetail.course_teacher.indexOf(userid) != -1)
             "
             :style="{
-                borderRadius:
-                !(chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
-                  .toolChoose[0].tool &&
+              borderRadius:
+                !(
+                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                    .toolChoose[0].tool &&
                   chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
-                    .toolChoose[0].tool.length > 0) && 
+                    .toolChoose[0].tool.length > 0
+                ) &&
                 chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
-                .taskDetail == '' &&
-              vChapterData[0].length == 0 &&
-              fileC[0].length == 0
-                    ? '0 0 20px 20px'
-                    : '20px',
-              }"
+                  .taskDetail == '' &&
+                vChapterData[0].length == 0 &&
+                fileC[0].length == 0
+                  ? '0 0 20px 20px'
+                  : '20px',
+            }"
           >
             <div
               class="queTop"
@@ -7939,19 +8063,13 @@
             >
               <div class="queTopTitle">新增工具</div>
               <div class="queTopRight">
-                <div
-                  class="queTopClose"
-                  v-if="isClose == 0"
-                >
+                <div class="queTopClose" v-if="isClose == 0">
                   展开
                   <div class="closeImg">
                     <img src="../../assets/icon/newIcon/close.png" alt="" />
                   </div>
                 </div>
-                <div
-                  class="queTopClose"
-                  v-if="isClose == 1"
-                >
+                <div class="queTopClose" v-if="isClose == 1">
                   收缩
                   <div class="openImg">
                     <img src="../../assets/icon/newIcon/open.png" alt="" />
@@ -9414,7 +9532,9 @@
       class="dialog_diy"
     >
       <div>
-        <div style="margin-bottom: 20px;color: #999;">提示：点击“+”或“-”修改倒计时时长。</div>
+        <div style="margin-bottom: 20px; color: #999">
+          提示：点击“+”或“-”修改倒计时时长。
+        </div>
         <Time :preTime="preTime" v-if="timeDialogVisible"></Time>
       </div>
       <div slot="footer">
@@ -10354,7 +10474,13 @@
             :key="stIndex"
             style="padding-bottom: 20px"
           >
-            <div style="padding: 15px 0 10px 20px" class="sentenceTitle" :index="stIndex+1">题目{{stIndex+1}}：请选择正确顺序</div>
+            <div
+              style="padding: 15px 0 10px 20px"
+              class="sentenceTitle"
+              :index="stIndex + 1"
+            >
+              题目{{ stIndex + 1 }}：请选择正确顺序
+            </div>
             <div class="cardList" v-if="st.chooseSenList">
               <div class="cardBox">
                 <div
@@ -10445,7 +10571,13 @@
             :key="stIndex"
             style="padding-bottom: 20px"
           >
-            <div style="padding: 15px 0 10px 20px" class="sentenceTitle" :index="stIndex+1">题目{{stIndex+1}}：请选择正确顺序</div>
+            <div
+              style="padding: 15px 0 10px 20px"
+              class="sentenceTitle"
+              :index="stIndex + 1"
+            >
+              题目{{ stIndex + 1 }}：请选择正确顺序
+            </div>
             <div class="cardList" v-if="st.chooseSenList">
               <div class="cardBox">
                 <div
@@ -11306,8 +11438,12 @@
           <div class="groupTitle">请设置每组人数</div>
           <!-- <el-input v-model="groupJson.number" placeholder="2-10人以内"
             style="width: 150px; margin: 10px 10px 0 0"></el-input> -->
-            <el-input v-model="groupJson.number" style="width:150px"
-            placeholder="请输入2-10的数字" @change="numberPan"></el-input>
+          <el-input
+            v-model="groupJson.number"
+            style="width: 150px"
+            placeholder="请输入2-10的数字"
+            @change="numberPan"
+          ></el-input>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -11953,7 +12089,7 @@ export default {
       dialogVisibleWordCloud: false,
       wordCloudData: [],
       isPickStudent: [],
-      pzStype:1,
+      pzStype: 1,
     };
   },
   methods: {
@@ -14633,6 +14769,20 @@ export default {
       this.isUpdateToolDetail = false;
       this.$forceUpdate();
     },
+    jumpGj(i, j, k) {
+      for (var z = 0; z < this.navList.length; z++) {
+        for (var q = 0; q < this.navList[z].task.length; q++) {
+          for (var w = 0; w < this.navList[z].task[q].tool.length; w++) {
+            this.navList[z].task[q].tool[w].isTool = false;
+          }
+        }
+      }
+      this.navList[i].task[j].tool[k].isTool =
+        !this.navList[i].task[j].tool[k].isTool;
+      // var a = document.getElementsByClassName("study_top")[0];
+      // var b = this.$refs["bz" + k][0];
+      // a.scrollTop = b.offsetTop;
+    },
     nextOrpreSteps(t) {
       if (this.IsFollow && this.courseDetail.userid != this.userid) {
         this.$message.error("已经开启跟随模式，请认真跟堂听讲");
@@ -15090,7 +15240,10 @@ export default {
             } else {
               if (_chapterData[taskCount].length > 0) {
                 let _url = _chapterData[taskCount][0].url;
-                if (_chapterData[taskCount][0].type == 8 || _chapterData[taskCount][0].type == 14) {
+                if (
+                  _chapterData[taskCount][0].type == 8 ||
+                  _chapterData[taskCount][0].type == 14
+                ) {
                   this.showType = 2;
                   if (
                     _url.indexOf("https://") == -1 &&
@@ -15506,11 +15659,12 @@ export default {
     setNavList() {
       if (this.navList.length == 0) {
         this.navList = [];
+        var copyList = [];
         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({
+          copyList.push({
             dyName: q,
             isOpen: l === 0 ? true : false,
             task: [],
@@ -15518,16 +15672,26 @@ export default {
           for (var r = 0; r < w.length; r++) {
             e = w[r].task;
             if (this.chapInfoList[l].easy == 1) {
-              this.navList[l].task.push({
+              copyList[l].task.push({
                 taskName: q,
                 id: l + "-" + r,
-                isLook: w[r].isLook,
+                isLook: r === 0 ? true : false,
+                tool: [],
               });
             } else {
-              this.navList[l].task.push({
+              copyList[l].task.push({
                 taskName: e,
                 id: l + "-" + r,
-                isLook: w[r].isLook,
+                isLook: r === 0 ? true : false,
+                tool: [],
+              });
+            }
+            var t = w[r].toolChoose;
+            for (var k = 0; k < t.length; k++) {
+              var tool = t[k].tool[0];
+              copyList[l].task[r].tool.push({
+                tool: tool,
+                isTool: false,
               });
             }
 
@@ -15535,6 +15699,7 @@ export default {
             // this.navId = l + "-" + r;
           }
         }
+        this.navList = copyList;
         this.navList[0].isOpen = false;
         this.navList[this.courseType].isOpen = true;
         this.navId = this.navList[this.courseType].task[this.taskCount].id;
@@ -17439,10 +17604,14 @@ export default {
       this.groupJson2 = JSON.parse(JSON.stringify(this.groupJson));
       this.dialogVisibleGroup2 = true;
     },
-    numberPan(){
-      if(/[^\d]/.test(this.groupJson.number) || this.groupJson.number < 2 || this.groupJson.number > 10){ 
-        this.$message.error('请输入2-10的数字')
-        this.groupJson.number = ''
+    numberPan() {
+      if (
+        /[^\d]/.test(this.groupJson.number) ||
+        this.groupJson.number < 2 ||
+        this.groupJson.number > 10
+      ) {
+        this.$message.error("请输入2-10的数字");
+        this.groupJson.number = "";
       }
     },
     updateGroupJson() {
@@ -18612,32 +18781,6 @@ export default {
   justify-content: center;
 }
 
-.commentIcon::before,
-.vedioIcon::before,
-.lockIcon::before,
-.returnIcon::before {
-  content: "";
-  display: block;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-.commentIcon::before {
-  background-image: url("../../assets/icon/newIcon/comment.png");
-}
-.vedioIcon::before {
-  background-image: url("../../assets/icon/newIcon/vedio.png");
-}
-.lockIcon::before {
-  background-image: url("../../assets/icon/newIcon/lock.png");
-}
-
-.returnIcon::before {
-  background-image: url("../../assets/icon/newIcon/return.png");
-}
-
 .tool {
   display: flex;
   flex-direction: column;
@@ -19358,10 +19501,14 @@ export default {
   transform: translateY(-50%);
 }
 
-.navActive {
+.navActive,
+.toolActive {
   height: auto !important;
   overflow: auto !important;
-  padding-bottom: 10px;
+  padding-bottom: 16px;
+}
+.toolActive {
+  padding: 0;
 }
 
 .navTask {
@@ -19386,7 +19533,8 @@ export default {
 }
 
 .openTaskActive {
-  color: #4386e6;
+  background-color: #e0eafb !important;
+  color: #0061ff;
 }
 
 .iframeName {
@@ -19475,6 +19623,97 @@ export default {
   align-items: center;
 }
 
+.btnLeft,
+.btnRight {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 5px 0;
+}
+.btnLeft {
+  border-right: 1px solid #cad1dc;
+}
+.btnLeft > .custom-tooltip {
+  background: #3681fc;
+  color: #fff;
+}
+.last,
+.returnBtn1 {
+  width: 90px;
+  height: 36px;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 1px solid #0061ff;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  margin-left: 12px;
+}
+.returnBtn1 {
+  background: #f0f4fa;
+  border-radius: 4px;
+  border: 1px solid #cad1dc;
+  margin: 0 12px;
+}
+.lastImg {
+  min-width: 15px;
+  width: 15px;
+  height: 15px;
+}
+.lastText {
+  padding: 0 5px 2px 5px;
+  box-sizing: border-box;
+  color: #0061ff;
+  font-size: 14px;
+}
+.lastImg > img {
+  width: 100%;
+  height: 100%;
+}
+
+.reBtnIcon,
+.commentIcon,
+.vedioIcon,
+.vedioIcon1 {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  position: relative;
+  background: #e0eafb;
+  cursor: pointer;
+  margin-right: 12px;
+}
+.reBtnIcon::before,
+.commentIcon::before,
+.vedioIcon::before,
+.vedioIcon::before {
+  content: "";
+  display: block;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.reBtnIcon::before {
+  background-image: url("../../assets/icon/newIcons/refresh.png");
+}
+.commentIcon::before {
+  background-image: url("../../assets/icon/newIcons/comment.png");
+}
+.vedioIcon::before {
+  background-image: url("../../assets/icon/newIcons/transcribe.png");
+}
+.vedioIcon1::before {
+  background-image: url("../../assets/icon/newIcons/istranscribe.png");
+}
+
 .btnAllNT {
   position: fixed;
   bottom: 100px;
@@ -20531,26 +20770,16 @@ export default {
 
 .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: 20px;
   top: 110px;
   width: 50px;
   height: 50px;
-  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 0 8px 2px #c5c5c5;
   border-radius: 5px;
 }
 
@@ -20764,7 +20993,7 @@ export default {
   z-index: 999;
   left: 50%;
   top: 50%;
-  margin:-18% 0 0 -300px;
+  margin: -18% 0 0 -300px;
 }
 
 .teacherPz {
@@ -21522,7 +21751,7 @@ export default {
 .navCorOpen {
   padding-right: 15px;
   cursor: pointer;
-  width: 20px;
+  width: 45px;
   display: flex;
 }
 
@@ -21532,8 +21761,8 @@ export default {
 }
 
 .mlImg {
-  width: 25px !important;
-  min-width: 25px;
+  width: 45px !important;
+  min-width: 45px;
   cursor: pointer;
   margin-top: 5px;
 }
@@ -21626,7 +21855,7 @@ export default {
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
-  font-size:14px;
+  font-size: 14px;
 }
 
 .whiteBIcon > img {
@@ -21768,21 +21997,59 @@ ol {
   cursor: pointer;
 }
 
-.stageChild {
+.stageChild,
+.toolChild {
   height: 0;
   overflow: hidden;
   transition: all 0.5s;
 }
+.toolChild {
+  margin: 0 0 0 17px;
+  padding: 0 0 0 20px;
+  border-left: 1px solid #d7d7d7;
+}
+.gjCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 15px 0;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.gjCss > div:last-child {
+  cursor: pointer;
+}
+
+.toolChild > div {
+  position: relative;
+}
+
+.toolChild > div::before {
+  content: "";
+  width: 15px;
+  height: 1px;
+  background: #cad1dc;
+  position: absolute;
+  top: 24px;
+  left: -20px;
+  display: block;
+}
 
+.isGjCss {
+  color: #0061ff;
+}
 .navItem {
-  background: #f0f4fa;
-  border-radius: 8px;
-  width: 95%;
+  background: #ffffff;
+  border-radius: 4px;
+  width: 100%;
   margin: 10px auto 0;
+  position: relative;
+  height: 48px;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: flex-start;
   align-items: center;
 }
 .navItemList {
@@ -21816,12 +22083,12 @@ ol {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-.isItemList {
+/* .isItemList {
   background: #3681fc;
 }
 .isItemList > div {
   color: #fff;
-}
+} */
 
 .navListItem {
   width: 280px;
@@ -21874,24 +22141,24 @@ ol {
   margin: 0 10px 0 auto;
 }
 
-.selectBox>>>.el-input__inner {
+.selectBox >>> .el-input__inner {
   height: 30px;
   line-height: 30px;
 }
 
-.selectBox>>>.el-input__icon {
+.selectBox >>> .el-input__icon {
   line-height: 30px;
 }
 
-.sentenceTitle{
+.sentenceTitle {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
 }
 
-.sentenceTitle::before{
-  content:attr(index);
+.sentenceTitle::before {
+  content: attr(index);
   background: #3681fc;
   border-radius: 50%;
   color: #fff;
@@ -21903,4 +22170,20 @@ ol {
   line-height: 25px;
   margin-right: 5px;
 }
+
+.closeTri1 {
+  min-width: 15px;
+  width: 15px;
+  height: 15px;
+}
+
+.closeTri1 {
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+.closeTri1 > img {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/studyStudent.vue

@@ -12,22 +12,20 @@
     >
       <div
         class="pButton"
-        style="
-          left: 0;
-          background-image: linear-gradient(90deg, #477cd7, #65b9fc);
-          top: 140px;
-        "
+        style="left: 0; top: 140px"
         v-if="mlDialog == false && !(IsFollow && tType == 2)"
         @click="setContent2(true)"
       >
         <!-- 批 , getCourseDetail()-->
-        <img src="../assets/mlBtn.png" style="width: 25px" alt="" />
+        <img
+          src="../assets/icon/newIcons/isRight.png"
+          style="width: 45px"
+          alt=""
+        />
       </div>
       <div class="pb_left" v-else-if="!(IsFollow && tType == 2)">
         <!-- <div class="courseTitle">{{ courseDetail.title }}</div> -->
-        <div
-          style="border-bottom: 1px solid #cad1dc; padding: 15px 0; width: 100%"
-        >
+        <div style="border-bottom: 1px solid #cad1dc; width: 100%">
           <div class="courseTitle">
             <div
               style="
@@ -52,7 +50,7 @@
             </div>
             <el-tooltip effect="light" content="收缩" placement="top">
               <div class="mlImg" @click="setContent2(false)">
-                <img src="../assets/icon/newIcon/mlBtn.png" alt="" />
+                <img src="../assets/icon/newIcons/isRight.png" alt="" />
               </div>
             </el-tooltip>
           </div>
@@ -68,13 +66,11 @@
             v-for="(item, stageIndex) in navList"
             :key="stageIndex"
           >
-            <div class="stageBoxCss" @click="get(stageIndex)">
-              <div class="closeTri" v-if="item.isOpen">
-                <img src="../assets/icon/newIcon/openTri.png" alt />
-              </div>
-              <div class="closeTri" v-else>
-                <img src="../assets/icon/newIcon/closeTri.png" alt />
-              </div>
+            <div
+              class="stageBoxCss"
+              @click="get(stageIndex)"
+              :class="{ stageBoxIsCss: item.isOpen }"
+            >
               <div class="stageItemTitle">
                 <div>阶段{{ stageIndex + 1 }}</div>
                 <el-tooltip
@@ -87,6 +83,12 @@
                   </div>
                 </el-tooltip>
               </div>
+              <div class="closeTri" v-if="item.isOpen">
+                <img src="../assets/icon/newIcons/downC.png" alt />
+              </div>
+              <div class="closeTri" v-else>
+                <img src="../assets/icon/newIcons/right.png" alt />
+              </div>
             </div>
             <div class="stageChild" :class="{ navActive: item.isOpen }">
               <div v-for="(nav, navIndex) in item.task" :key="navIndex">
@@ -99,6 +101,22 @@
                       stageIndex == courseType,
                   }"
                 >
+                  <div v-if="nav.tool[0].tool != undefined">
+                    <div
+                      class="closeTri1"
+                      v-if="nav.isLook"
+                      @click="openTask(stageIndex, navIndex, nav.id)"
+                    >
+                      <img src="../assets/icon/newIcons/bDown.png" alt />
+                    </div>
+                    <div
+                      class="closeTri1"
+                      v-else
+                      @click="openTask(stageIndex, navIndex, nav.id)"
+                    >
+                      <img src="../assets/icon/newIcons/right.png" alt />
+                    </div>
+                  </div>
                   <div
                     @click="openTask(stageIndex, navIndex, nav.id)"
                     class="navItemList"
@@ -135,6 +153,56 @@
                     />
                   </div>
                 </div>
+                <div
+                  v-if="nav.tool[0].tool != undefined"
+                  class="toolChild"
+                  :class="{ toolActive: nav.isLook }"
+                >
+                  <div v-for="(t, toolIndex) in nav.tool" :key="toolIndex">
+                    <div
+                      class="gjCss"
+                      :class="{ isGjCss: t.isTool }"
+                      @click="jumpGj(stageIndex, navIndex, toolIndex)"
+                    >
+                      <div>工具{{ toolIndex + 1 }}:</div>
+                      <div v-if="t.tool == 58">模拟驾驶</div>
+                      <div v-if="t.tool == 59">路径搜索</div>
+                      <div v-if="t.tool == 60">深度学习</div>
+                      <div v-if="t.tool == 10">倒计时</div>
+                      <div v-if="t.tool == 65">挑人</div>
+                      <div v-if="t.tool == 7">思维网格</div>
+                      <div v-if="t.tool == 1">电子白板</div>
+                      <div v-if="t.tool == 52">文档</div>
+                      <div v-if="t.tool == 3">思维导图</div>
+                      <div v-if="t.tool == 48">表格</div>
+                      <div v-if="t.tool == 49">学生分组</div>
+                      <div v-if="t.tool == 4">问卷调查</div>
+                      <div v-if="t.tool == 45">选择题</div>
+                      <div v-if="t.tool == 15">问答</div>
+                      <div v-if="t.tool == 16">作业提交</div>
+                      <div v-if="t.tool == 50">批量上传</div>
+                      <div v-if="t.tool == 41">选择匹配</div>
+                      <div v-if="t.tool == 47">排序</div>
+                      <div v-if="t.tool == 40">个人评价</div>
+                      <div v-if="t.tool == 18">训练平台</div>
+                      <div v-if="t.tool == 21">AIoT Blockly</div>
+                      <div v-if="t.tool == 23">AI Python</div>
+                      <div v-if="t.tool == 24">AI Blockly</div>
+                      <div v-if="t.tool == 32">源码编辑</div>
+                      <div v-if="t.tool == 57">CocoPi</div>
+                      <div v-if="t.tool == 63">海龟编程</div>
+                      <div v-if="t.tool == 28">翻译</div>
+                      <div v-if="t.tool == 31">数字画板</div>
+                      <div v-if="t.tool == 39">GeoGebra</div>
+                      <div v-if="t.tool == 66">公式编辑</div>
+                      <div v-if="t.tool == 67">分子结构</div>
+                      <div v-if="t.tool == 68">时间轴</div>
+                      <div v-if="t.tool == 25">目标管理</div>
+                      <div v-if="t.tool == 26">课程设计</div>
+                      <div v-if="t.tool == 62">交互视频</div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -161,7 +229,80 @@
             </el-tooltip>
           </div>
           <div class="btnAll">
-            <div
+            <div class="btnLeft">
+              <el-tooltip effect="light" content="刷新" placement="top">
+                <div class="reBtnIcon" @click="refreshCourse"></div>
+              </el-tooltip>
+              <el-tooltip effect="light" content="评论" placement="top">
+                <div class="commentIcon" @click="setPz" v-if="tType == 1"></div>
+              </el-tooltip>
+              <div v-if="!videoStart && (tType == 1 || tType == 4)">
+                <el-tooltip effect="light" content="录制" placement="top">
+                  <div class="vedioIcon" @click="startRecording"></div>
+                </el-tooltip>
+              </div>
+              <div v-else-if="tType == 1 || tType == 4">
+                <el-tooltip effect="light" content="下载" placement="top">
+                  <div class="vedioIcon1" @click="stopRecording"></div>
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="btnRight">
+              <div
+                class="last"
+                @click="nextOrpreSteps(0)"
+                v-if="!(IsFollow && tType == 2)"
+              >
+                <div class="lastImg">
+                  <img src="../assets/icon/newIcons/last.png" alt="" />
+                </div>
+                <div class="lastText">上一步</div>
+              </div>
+              <div
+                class="last"
+                @click="nextOrpreSteps(1)"
+                v-if="!(IsFollow && tType == 2)"
+              >
+                <div class="lastText">下一步</div>
+                <div class="lastImg">
+                  <img src="../assets/icon/newIcons/next.png" alt="" />
+                </div>
+              </div>
+              <div class="last" @click="juriVisible = true" v-if="tType == 1">
+                <div class="lastImg">
+                  <img src="../assets/icon/newIcons/lock.png" alt="" />
+                </div>
+                <div class="lastText">权限</div>
+              </div>
+              <div
+                class="returnBtn1 returnIcon"
+                @click.stop="
+                  goTo(
+                    '/courseDetail?userid=' +
+                      userid +
+                      '&oid=' +
+                      oid +
+                      '&org=' +
+                      org +
+                      '&cid=' +
+                      classId +
+                      '&courseId=' +
+                      id +
+                      '&tType=' +
+                      tType +
+                      '&screenType=' +
+                      screenType
+                  )
+                "
+              >
+                <div class="lastImg">
+                  <img src="../assets/icon/newIcon/return.png" alt="" />
+                </div>
+                <div class="lastText" style="color: #000">返回</div>
+              </div>
+            </div>
+
+            <!-- <div
               class="returnBtn lockIcon"
               @click="juriVisible = true"
               v-if="tType == 1"
@@ -200,13 +341,6 @@
             >
               下一步
             </div>
-            <!-- <div
-              class="returnBtn"
-              @click="allScrell"
-              v-if="!(IsFollow && tType == 2)"
-            >
-              全屏
-            </div> -->
             <div class="returnBtn" @click="refreshCourse">刷新</div>
             <div
               class="returnBtn returnIcon"
@@ -230,7 +364,7 @@
               "
             >
               返回
-            </div>
+            </div> -->
           </div>
         </div>
         <div
@@ -409,19 +543,16 @@
                 </div>
                 <div
                   class="pButton"
-                  style="
-                    position: absolute;
-                    right: 20px;
-                    top: 0;
-                    background: #205cc6;
-                    z-index: 998;
-                    opacity: 0.8;
-                  "
+                  style="position: absolute; right: 20px; top: 0; z-index: 998"
                   v-if="!contentDialog"
                   @click="setContent(true)"
                 >
                   <!-- 批 -->
-                  <img src="../assets/mlBtn.png" style="width: 25px" alt="" />
+                  <img
+                    src="../assets/icon/newIcons/isLeft.png"
+                    style="width: 45px"
+                    alt=""
+                  />
                 </div>
                 <div
                   v-if="contentDialog == true"
@@ -451,7 +582,7 @@
                     <div class="navCorOpenBox">
                       <div class="navTitile">内容列表：</div>
                       <div class="navCorOpen" @click="setContent(false)">
-                        <img src="../assets/icon/newIcon/mlBtn.png" alt="" />
+                        <img src="../assets/icon/newIcons/isRight.png" alt="" />
                       </div>
                     </div>
                     <div class="navBox">
@@ -499,7 +630,10 @@
                               />
                             </div>
                           </div>
-                          <div class="navListItem" v-if="vitem.type == 8 || vitem.type == 14">
+                          <div
+                            class="navListItem"
+                            v-if="vitem.type == 8 || vitem.type == 14"
+                          >
                             <div
                               @click="doUrl(vitem.url, vindex)"
                               class="navText"
@@ -686,7 +820,7 @@
                 >
                   <div class="bzBox">
                     <div class="yCss"></div>
-                    <div>步骤{{ toolIndex + 1 }}</div>
+                    <div :ref="'bz' + toolIndex">步骤{{ toolIndex + 1 }}</div>
                     <div
                       v-if="timeWorkList[toolIndex].length > 0"
                       style="margin: 0 0 0 10px"
@@ -6357,19 +6491,13 @@
               >
                 <div class="queTopTitle">新增工具</div>
                 <div class="queTopRight">
-                  <div
-                    class="queTopClose"
-                    v-if="isClose == 0"
-                  >
+                  <div class="queTopClose" v-if="isClose == 0">
                     展开
                     <div class="closeImg">
                       <img src="../assets/icon/newIcon/close.png" alt="" />
                     </div>
                   </div>
-                  <div
-                    class="queTopClose"
-                    v-if="isClose == 1"
-                  >
+                  <div class="queTopClose" v-if="isClose == 1">
                     收缩
                     <div class="openImg">
                       <img src="../assets/icon/newIcon/open.png" alt="" />
@@ -7341,7 +7469,7 @@
       v-if="pzDialog == false && (tType == 4 || ispzType == 4)"
     >
       <!-- 批 -->
-      <img src="../assets/pzBtn2.png" style="width: 25px" alt="" />
+      <img src="../assets/mlBtn.png" style="width: 25px" alt="" />
     </div>
     <div v-if="pzDialog == true" class="newDialogCss">
       <div class="pzTop2">
@@ -8123,7 +8251,9 @@
       class="dialog_diy"
     >
       <div>
-        <div style="margin-bottom: 20px;color: #999;">提示：点击“+”或“-”修改倒计时时长。</div>
+        <div style="margin-bottom: 20px; color: #999">
+          提示：点击“+”或“-”修改倒计时时长。
+        </div>
         <Time :preTime="preTime" v-if="timeDialogVisible"></Time>
       </div>
       <div slot="footer">
@@ -9063,7 +9193,13 @@
             :key="stIndex"
             style="padding-bottom: 20px"
           >
-            <div style="padding: 15px 0 10px 20px" class="sentenceTitle" :index="stIndex+1">题目{{stIndex+1}}：请选择正确顺序</div>
+            <div
+              style="padding: 15px 0 10px 20px"
+              class="sentenceTitle"
+              :index="stIndex + 1"
+            >
+              题目{{ stIndex + 1 }}：请选择正确顺序
+            </div>
             <div class="cardList" v-if="st.chooseSenList">
               <div class="cardBox">
                 <div
@@ -9154,7 +9290,13 @@
             :key="stIndex"
             style="padding-bottom: 20px"
           >
-            <div style="padding: 15px 0 10px 20px" class="sentenceTitle" :index="stIndex+1">题目{{stIndex+1}}：请选择正确顺序</div>
+            <div
+              style="padding: 15px 0 10px 20px"
+              class="sentenceTitle"
+              :index="stIndex + 1"
+            >
+              题目{{ stIndex + 1 }}：请选择正确顺序
+            </div>
             <div class="cardList" v-if="st.chooseSenList">
               <div class="cardBox">
                 <div
@@ -9996,8 +10138,12 @@
           <div class="groupTitle">请设置每组人数</div>
           <!-- <el-input v-model="groupJson.number" placeholder="2-10人以内"
             style="width: 150px; margin: 10px 10px 0 0"></el-input> -->
-            <el-input v-model="groupJson.number" style="width:150px"
-            placeholder="请输入2-10的数字" @change="numberPan"></el-input>
+          <el-input
+            v-model="groupJson.number"
+            style="width: 150px"
+            placeholder="请输入2-10的数字"
+            @change="numberPan"
+          ></el-input>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -10656,7 +10802,7 @@ export default {
       worksSid: "",
       wordCloudData: [],
       isPickStudent: [],
-      pzStype:1,
+      pzStype: 1,
     };
   },
   methods: {
@@ -10723,6 +10869,20 @@ export default {
           document.querySelector(".student_body").offsetTop;
       }, 500);
     },
+    jumpGj(i, j, k) {
+      for (var z = 0; z < this.navList.length; z++) {
+        for (var q = 0; q < this.navList[z].task.length; q++) {
+          for (var w = 0; w < this.navList[z].task[q].tool.length; w++) {
+            this.navList[z].task[q].tool[w].isTool = false;
+          }
+        }
+      }
+      this.navList[i].task[j].tool[k].isTool =
+        !this.navList[i].task[j].tool[k].isTool;
+      var a = document.getElementsByClassName("study_top")[0];
+      var b = this.$refs["bz" + k][0];
+      a.scrollTop = b.offsetTop;
+    },
     addTools2(i) {
       if (i == 4) {
         // this.openTools2(4);
@@ -13997,6 +14157,12 @@ export default {
       this.courseType = s;
       this.navId = i;
       this.taskCount = n;
+      this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+        this.taskCount
+      ].isLook =
+        !this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+          this.taskCount
+        ].isLook;
       if (this.IsLookOpen) {
         this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
           this.taskCount
@@ -14042,7 +14208,7 @@ export default {
       // }
       // this.navList[i].isOpen = true;
       this.navList[i].isOpen = !this.navList[i].isOpen;
-      if(this.navList[i].isOpen){
+      if (this.navList[i].isOpen) {
         this.openTask(i, 0, i + "-0");
       }
     },
@@ -14273,7 +14439,10 @@ export default {
             } else {
               if (_chapterData[this.taskCount].length > 0) {
                 let _url = _chapterData[this.taskCount][0].url;
-                if (_chapterData[this.taskCount][0].type == 8 || _chapterData[this.taskCount][0].type == 14) {
+                if (
+                  _chapterData[this.taskCount][0].type == 8 ||
+                  _chapterData[this.taskCount][0].type == 14
+                ) {
                   this.showType = 2;
                   if (
                     _url.indexOf("https://") == -1 &&
@@ -14412,7 +14581,10 @@ export default {
             } else {
               if (_chapterData[this.taskCount].length > 0) {
                 let _url = _chapterData[this.taskCount][0].url;
-                if (_chapterData[this.taskCount][0].type == 8 || _chapterData[this.taskCount][0].type == 14) {
+                if (
+                  _chapterData[this.taskCount][0].type == 8 ||
+                  _chapterData[this.taskCount][0].type == 14
+                ) {
                   this.showType = 2;
                   if (
                     _url.indexOf("https://") == -1 &&
@@ -14851,11 +15023,12 @@ export default {
     setNavList() {
       if (this.navList.length == 0) {
         this.navList = [];
+        var copyList = [];
         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({
+          copyList.push({
             dyName: q,
             isOpen: l === 0 ? true : false,
             task: [],
@@ -14863,23 +15036,34 @@ export default {
           for (var r = 0; r < w.length; r++) {
             e = w[r].task;
             if (this.chapInfoList[l].easy == 1) {
-              this.navList[l].task.push({
+              copyList[l].task.push({
                 taskName: q,
                 id: l + "-" + r,
                 isLook: w[r].isLook,
+                tool: [],
               });
             } else {
-              this.navList[l].task.push({
+              copyList[l].task.push({
                 taskName: e,
                 id: l + "-" + r,
                 isLook: w[r].isLook,
+                tool: [],
+              });
+            }
+            var t = w[r].toolChoose;
+            for (var k = 0; k < t.length; k++) {
+              var tool = t[k].tool[0];
+              copyList[l].task[r].tool.push({
+                tool: tool,
+                isTool: false,
               });
             }
-
             // this.navId = this.navId ? this.navId : l + "-" + r;
             // this.navId = l + "-" + r;
           }
         }
+
+        this.navList = copyList;
         this.navList[0].isOpen = false;
         this.navList[this.courseType].isOpen = true;
         this.navId = this.navList[this.courseType].task[this.taskCount].id;
@@ -16803,10 +16987,14 @@ export default {
       this.groupJson2 = JSON.parse(JSON.stringify(this.groupJson));
       this.dialogVisibleGroup2 = true;
     },
-    numberPan(){
-      if(/[^\d]/.test(this.groupJson.number) || this.groupJson.number < 2 || this.groupJson.number > 10){ 
-        this.$message.error('请输入2-10的数字')
-        this.groupJson.number = ''
+    numberPan() {
+      if (
+        /[^\d]/.test(this.groupJson.number) ||
+        this.groupJson.number < 2 ||
+        this.groupJson.number > 10
+      ) {
+        this.$message.error("请输入2-10的数字");
+        this.groupJson.number = "";
       }
     },
     updateGroupJson() {
@@ -17490,7 +17678,7 @@ export default {
 }
 
 .filebox .tooldetail {
-  width: calc(100% - 300px);
+  width: calc(100% - 100px);
   margin: 0px 12px;
   padding: 12px 25px 0 13px;
   line-height: 30px;
@@ -17822,30 +18010,43 @@ export default {
   justify-content: center;
 }
 
+.reBtnIcon,
+.commentIcon,
+.vedioIcon,
+.vedioIcon1 {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  position: relative;
+  background: #e0eafb;
+  cursor: pointer;
+  margin-right: 12px;
+}
+.reBtnIcon::before,
 .commentIcon::before,
 .vedioIcon::before,
-.lockIcon::before,
-.returnIcon::before {
+.vedioIcon::before {
   content: "";
   display: block;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   width: 20px;
   height: 20px;
-  margin-right: 5px;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.reBtnIcon::before {
+  background-image: url("../assets/icon/newIcons/refresh.png");
 }
 .commentIcon::before {
-  background-image: url("../assets/icon/newIcon/comment.png");
+  background-image: url("../assets/icon/newIcons/comment.png");
 }
 .vedioIcon::before {
-  background-image: url("../assets/icon/newIcon/vedio.png");
+  background-image: url("../assets/icon/newIcons/transcribe.png");
 }
-.lockIcon::before {
-  background-image: url("../assets/icon/newIcon/lock.png");
-}
-
-.returnIcon::before {
-  background-image: url("../assets/icon/newIcon/return.png");
+.vedioIcon1::before {
+  background-image: url("../assets/icon/newIcons/istranscribe.png");
 }
 
 .tool {
@@ -18610,11 +18811,15 @@ export default {
   transform: translateY(-50%);
 }
 
-.navActive {
+.navActive,
+.toolActive {
   height: auto !important;
   overflow: auto !important;
   padding-bottom: 16px;
 }
+.toolActive {
+  padding: 0;
+}
 
 .navTask {
   display: flex;
@@ -18638,7 +18843,8 @@ export default {
 }
 
 .openTaskActive {
-  background-color: #3681fc !important;
+  background-color: #e0eafb !important;
+  color: #0061ff;
 }
 
 .iframeName {
@@ -18660,7 +18866,7 @@ export default {
   width: 95%;
   margin: 17px auto 0;
   height: calc(100% - 40px - 21px - 20px - 17px);
-  background: #f0f4fa;
+  background: #fff;
   border-radius: 8px;
 }
 
@@ -18715,9 +18921,13 @@ export default {
 }
 
 .toolBox {
-  padding: 15px 0 10px 25px;
+  margin: 15px 0 0 25px;
   display: flex;
   position: relative;
+  background: #f0f4fa;
+  padding: 18px 20px;
+  border-radius: 4px;
+  width: 90%;
 }
 
 .btnAll {
@@ -18729,6 +18939,57 @@ export default {
   align-items: center;
 }
 
+.btnLeft,
+.btnRight {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 5px 0;
+}
+.btnLeft {
+  border-right: 1px solid #cad1dc;
+}
+.btnLeft > .custom-tooltip {
+  background: #3681fc;
+  color: #fff;
+}
+.last,
+.returnBtn1 {
+  width: 90px;
+  height: 36px;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 1px solid #0061ff;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  margin-left: 12px;
+}
+.returnBtn1 {
+  background: #f0f4fa;
+  border-radius: 4px;
+  border: 1px solid #cad1dc;
+  margin: 0 12px;
+}
+.lastImg {
+  min-width: 15px;
+  width: 15px;
+  height: 15px;
+}
+.lastText {
+  padding: 0 5px 2px 5px;
+  box-sizing: border-box;
+  color: #0061ff;
+  font-size: 14px;
+}
+.lastImg > img {
+  width: 100%;
+  height: 100%;
+}
 /* .vedioTimeBox {
   display: flex;
   flex-direction: row;
@@ -18745,10 +19006,12 @@ export default {
 }
 
 .worksBox {
-  padding: 20px 0 0 10px;
+  margin: 0 0 10px 25px;
   border-bottom: 1px solid #eeeeee;
-  width: 96%;
-  margin: 0 auto;
+  background: #f0f4fa;
+  padding: 18px 20px;
+  border-radius: 4px;
+  width: 90%;
 }
 
 .worksBTitle {
@@ -19710,26 +19973,16 @@ export default {
 
 .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: 20px;
   top: 110px;
   width: 50px;
   height: 50px;
-  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 0 8px 2px #c5c5c5;
   border-radius: 5px;
 }
 
@@ -19943,7 +20196,7 @@ export default {
   z-index: 999;
   left: 50%;
   top: 50%;
-  margin:-18% 0 0 -300px;
+  margin: -18% 0 0 -300px;
 }
 
 .teacherPz {
@@ -20763,7 +21016,7 @@ ol {
 .navCorOpen {
   padding-right: 15px;
   cursor: pointer;
-  width: 28px;
+  width: 45px;
   display: flex;
 }
 
@@ -20773,8 +21026,8 @@ ol {
 }
 
 .mlImg {
-  width: 25px !important;
-  min-width: 25px;
+  width: 45px !important;
+  min-width: 45px;
   cursor: pointer;
   transform: rotate(180deg);
 }
@@ -20851,7 +21104,8 @@ ol {
 .el-table >>> .even_row {
   background-color: #f0f4fa;
 }
-.stageBoxCss {
+.stageBoxCss,
+.stageBoxIsCss {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -20862,16 +21116,21 @@ ol {
   width: 100%;
 }
 
+.stageBoxIsCss {
+  background: #0061ff;
+  color: #fff;
+  border-radius: 8px;
+}
+
 .stageItemTitle {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  margin-left: 6px;
-  width: calc(100% - 60px);
+  margin-left: 15px;
+  width: calc(100% - 50px);
 }
 .stageItemTitle > div:first-child {
-  color: #0e1e33;
   font-size: 16px;
   font-weight: bold;
   min-width: 55px;
@@ -20879,7 +21138,6 @@ ol {
 .stageItemTitle > div:last-child {
   font-size: 15px;
   font-weight: 600;
-  color: #2d2c2c;
   max-width: 242px;
   white-space: nowrap;
   overflow: hidden;
@@ -20887,57 +21145,103 @@ ol {
   word-break: break-word;
   width: calc(100% - 55px);
 }
-.closeTri {
-  min-width: 20px;
-  width: 20px;
-  height: 20px;
-  padding-left: 15px;
+.closeTri,
+.closeTri1 {
+  min-width: 15px;
+  width: 15px;
+  height: 15px;
 }
 
-.closeTri > img {
+.closeTri1 {
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+.closeTri > img,
+.closeTri1 > img {
   width: 100%;
   height: 100%;
 }
 
-.stageChild {
+.stageChild,
+.toolChild {
   height: 0;
   overflow: hidden;
   transition: all 0.5s;
 }
+.toolChild {
+  margin: 0 0 0 17px;
+  padding: 0 0 0 20px;
+  border-left: 1px solid #d7d7d7;
+}
+.gjCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 15px 0;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.gjCss > div:last-child {
+  cursor: pointer;
+}
+
+.toolChild > div {
+  position: relative;
+}
+
+.toolChild > div::before {
+  content: "";
+  width: 15px;
+  height: 1px;
+  background: #cad1dc;
+  position: absolute;
+  top: 24px;
+  left: -20px;
+  display: block;
+}
+
+.isGjCss {
+  color: #0061ff;
+}
 
 .navItem {
   background: #ffffff;
   border-radius: 4px;
-  width: 95%;
+  width: 100%;
   margin: 10px auto 0;
   position: relative;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
 }
 .navItemList {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-items: flex-start;
-  padding: 6px 13px;
+  align-items: center;
+  padding: 0 13px;
   cursor: pointer;
+  width: calc(100% - 60px);
+  height: 100%;
 }
 .navItemList > div:first-child {
-  font-weight: 400;
-  color: #474747;
-  padding-bottom: 4px;
   min-width: 60px;
 }
 .navItemList > div:last-child {
-  width: auto;
-  font-weight: 400;
-  color: #0e1e33;
+  width: calc(100% - 80px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-.isItemList > div {
+/* .isItemList > div {
   color: #fff !important;
-}
+} */
 
 .tool_work_box {
   width: 100%;
@@ -20986,7 +21290,7 @@ ol {
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
-  font-size:14px;
+  font-size: 14px;
 }
 
 .whiteBIcon > img {
@@ -21023,8 +21327,8 @@ ol {
   width: 20px;
   height: 20px;
   position: absolute;
-  right: 0;
-  top: 7px;
+  right: 10px;
+  top: 15px;
 }
 .lockTaskIcon > img {
   width: 100%;
@@ -21043,24 +21347,24 @@ ol {
   margin: 0 10px 0 auto;
 }
 
-.selectBox>>>.el-input__inner {
+.selectBox >>> .el-input__inner {
   height: 30px;
   line-height: 30px;
 }
 
-.selectBox>>>.el-input__icon {
+.selectBox >>> .el-input__icon {
   line-height: 30px;
 }
 
-.sentenceTitle{
+.sentenceTitle {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
 }
 
-.sentenceTitle::before{
-  content:attr(index);
+.sentenceTitle::before {
+  content: attr(index);
   background: #3681fc;
   border-radius: 50%;
   color: #fff;