pbl-student-table/src/components/student/studyStudent.vue

<template>
  <div class="pb_content" style="overflow: unset">
    <div
      class="pb_content_body"
      style="
        display: flex;
        height: 900px;
        position: relative;
        padding: 20px 0 20px 20px;
        box-sizing: border-box;
      "
    >
      <div
        class="pButton"
        style="left: 0; top: 140px"
        v-if="mlDialog == false"
        @click="setContent2(true)"
      >
        <!-- 批 , getCourseDetail()-->
        <img
          src="../../assets/icon/newIcons/isRight.png"
          style="width: 45px"
          alt=""
        />
      </div>
      <div class="pb_left" v-else-if="mlDialog">
        <div style="border-bottom: 1px solid #cad1dc; width: 100%">
          <div class="courseTitle">
            <div
              style="
                max-width: calc(100% - 40px);
                width: auto;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-word;
                display: block;
              "
            >
              <el-tooltip
                effect="light"
                :content="courseDetail.title"
                placement="top"
              >
                <div class="ctitle">
                  {{ courseDetail.title }}
                </div>
              </el-tooltip>
            </div>
            <el-tooltip effect="light" content="收缩" placement="top">
              <div class="mlImg" @click="setContent2(false)">
                <img src="../../assets/icon/newIcons/isRight.png" alt="" />
              </div>
            </el-tooltip>
          </div>
        </div>
        <div class="cru_selectBox">
          <div
            style="background: #fff; margin: 0 10px; border-radius: 8px"
            v-for="(item, stageIndex) in navList"
            :key="stageIndex"
          >
            <div class="stageBoxCss" @click="get(stageIndex)">
              <div class="stageItemTitle" :class="{ stageNav: item.isOpen }">
                <div>阶段{{ stageIndex + 1 }}</div>
                <el-tooltip
                  effect="light"
                  :content="item.dyName"
                  placement="top"
                >
                  <div>
                    {{ item.dyName }}
                  </div>
                </el-tooltip>
              </div>
              <div
                class="closeTri"
                :style="{
                  transform: item.isOpen ? 'rotate(90deg)' : 'rotate(0deg)',
                }"
              >
                <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">
                <div
                  class="navItem"
                  :class="{
                    openTaskActive:
                      navIndex == taskCount &&
                      nav.id == navId &&
                      stageIndex == courseType,
                  }"
                >
                  <div
                    v-if="nav.tool.length > 0 && nav.tool[0].tool != undefined"
                  >
                    <div
                      class="closeTri1"
                      v-if="
                        navIndex == taskCount &&
                        nav.id == navId &&
                        stageIndex == courseType
                      "
                      @click="openTask(stageIndex, navIndex, nav.id)"
                    >
                      <img
                        :style="{
                          transform: nav.isOpen
                            ? 'rotate(0deg)'
                            : 'rotate(270deg)',
                        }"
                        src="../../assets/icon/newIcons/bDown2.png"
                        alt
                      />
                    </div>
                    <div
                      class="closeTri1"
                      v-else
                      @click="openTask(stageIndex, navIndex, nav.id)"
                    >
                      <img
                        :style="{
                          transform: nav.isOpen
                            ? 'rotate(90deg)'
                            : 'rotate(0deg)',
                        }"
                        src="../../assets/icon/newIcons/right.png"
                        alt
                      />
                    </div>
                  </div>
                  <!-- <div v-else class="noToolBlue"></div> -->
                  <div
                    @click="openTask(stageIndex, navIndex, nav.id)"
                    class="navItemList"
                    :class="{
                      isItemList:
                        navIndex == taskCount &&
                        nav.id == navId &&
                        stageIndex == courseType,
                    }"
                  >
                    <div>任务{{ navIndex + 1 }}：</div>
                    <el-tooltip
                      effect="light"
                      :content="nav.taskName"
                      placement="top"
                    >
                      <div
                        :style="{
                          width:
                            IsLookOpen &&
                            !(
                              navIndex == taskCount &&
                              nav.id == navId &&
                              stageIndex == courseType
                            )
                              ? 'calc(100% - 75px)'
                              : 'auto',
                        }"
                      >
                        {{ nav.taskName }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
                <div
                  v-if="nav.tool.length > 0 && nav.tool[0].tool != undefined"
                  class="toolChild"
                  :class="{ toolActive: nav.isOpen }"
                >
                  <div v-for="(t, toolIndex) in nav.tool" :key="toolIndex">
                    <div
                      class="gjCss"
                      :class="{ isGjCss: t.isTool }"
                      @click="jumpGj(stageIndex, navIndex, toolIndex, nav.id)"
                    >
                      <div>步骤{{ toolIndex + 1 }}：</div>
                      <div v-if="t.tool == 56">投票</div>
                      <div v-if="t.tool == 51">资源库</div>
                      <div v-if="t.tool == 54">拍照</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 == 69">英语写作</div>
                      <div v-if="t.tool == 70">英语口语</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>
        </div>
      </div>
      <div class="body_student" :class="{ navLeftCss: !mlDialog }">
        <div class="new_topFixed"></div>
        <div class="new_top" :class="{ navLeftCss: !mlDialog }">
          <div class="courseIndex">
            <div>任务{{ taskCount + 1 }}</div>
            <el-tooltip
              effect="light"
              :content="
                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].task
              "
              placement="top"
            >
              <div>
                {{
                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                    .task
                }}
              </div>
            </el-tooltip>
          </div>
          <div class="btnAll">
            <div class="btnLeft">
              <el-tooltip effect="light" content="刷新" placement="top">
                <div class="reBtnIcon" @click="refreshCourse">
                  <span>刷新</span>
                </div>
              </el-tooltip>
              <el-tooltip effect="light" content="评论" placement="top">
                <div class="commentIcon" @click="setPz" v-if="tType == 1">
                  <span>评论</span>
                </div>
              </el-tooltip>
            </div>
            <div class="btnRight">
              <div
                class="last"
                @click="nextOrpreSteps(0)"
                @mouseover="isHovered = true"
                @mouseout="isHovered = false"
              >
                <div class="lastImg">
                  <img
                    :src="
                      isHovered
                        ? require('../../assets/icon/newIcons/whiteLast.png')
                        : require('../../assets/icon/newIcons/last.png')
                    "
                    alt=""
                  />
                </div>
                <div class="lastText">上一步</div>
              </div>
              <div
                class="last"
                @click="nextOrpreSteps(1)"
                @mouseover="isHovered1 = true"
                @mouseout="isHovered1 = false"
              >
                <div class="lastText">下一步</div>
                <div class="lastImg">
                  <img
                    :src="
                      isHovered1
                        ? require('../../assets/icon/newIcons/whiteNext.png')
                        : require('../../assets/icon/newIcons/next.png')
                    "
                    alt=""
                  />
                </div>
              </div>
              <div
                class="returnBtn1 returnIcon"
                @click.stop="
                  goTo(
                    '/courseDetailS?userid=' +
                      userid +
                      '&oid=' +
                      oid +
                      '&org=' +
                      org +
                      '&cid=' +
                      classId +
                      '&courseId=' +
                      id +
                      '&tType=' +
                      tType +
                      '&role=' +
                      role +
                      '&screenType=' +
                      screenType
                  )
                "
              >
                <div class="lastImg">
                  <img src="../../assets/icon/newIcon/return.png" alt="" />
                </div>
                <div class="lastText" style="color: #000">返回</div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="isNoMessage"
          v-if="
            chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
              .chapterData.length == 0 &&
            chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
              .toolChoose[0].tool.length == 0 &&
            chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
              .taskDetail == '' && 
              !(chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                .tcMember &&
                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                  .tcMember.length) &&
            !chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
              .eList &&
            !(
              courseDetail.userid == userid ||
              (courseDetail.course_teacher &&
                courseDetail.course_teacher.indexOf(userid) != -1)
            )
          "
        >
          <img src="../../assets/icon/isNoMessage.png" alt />
        </div>
        <div class="study_top" :class="{ pzClass: pzDialog }">
          <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
            "
            style="border-radius: 0 0 20px 20px"
          >
            <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"
                    ></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 == 13"
                    style="height: 650px; width: 95%; margin: 0 auto"
                  >
                    <el-image
                      :src="chapterlist[chapterIndex].url"
                      fit="contain"
                      style="width: 100%; height: 100%; cursor: pointer"
                      @click="previewImg(chapterlist[chapterIndex].url)"
                    ></el-image>
                  </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
                      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 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;margin: 20px 0;">
                <div
                  class="filebox"
                  style="flex-wrap: nowrap"
                  v-for="(tool, toolIndex) in chapInfoList[courseType]
                    .chapterInfo[0].taskJson[taskCount].toolArray"
                  :key="toolIndex"
                  v-loading="downLoading == 'down' + toolIndex"
                >
                  <div class="bzBox">
                    <div class="yCss"></div>
                    <div :ref="'bz' + toolIndex" :id="'gj' + toolIndex">
                      步骤{{ toolIndex + 1 }}
                    </div>
                    <div
                      v-if="tool.toolPhoto.length > 0"
                      style="margin: 0 0 0 10px"
                    >
                      时间：{{ 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">AIoT Blockly</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">AI 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 Blockly</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, toolIndex)"
                          />
                          <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 && !tool.isNoFile"
                      >
                        <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"
                          ></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 == 13"
                          style="height: 650px; width: 98%"
                        >
                          <el-image
                            :src="tool.toolData[tool.sourceIndex].url"
                            fit="contain"
                            style="width: 100%; height: 100%; cursor: pointer"
                            @click="
                              previewImg(tool.toolData[tool.sourceIndex].url)
                            "
                          ></el-image>
                        </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"
                        style="height: 650px"
                      >
                        <div class="navCorOpenBox">
                          <div class="navTitile">内容列表：</div>
                        </div>
                        <div class="navBox">
                          <div style="padding: 10px 0 25px 0">
                            <div
                              class="vedioTimeBox"
                              v-for="(chapter, cIndex) in tool.toolData"
                              :key="cIndex + '1'"
                              @click="setChapterIndex2(tool, cIndex, toolIndex)"
                            >
                              <div class="navListItem">
                                <div
                                  class="navText"
                                  :class="{
                                  isClickNav: tool.sourceIndex == cIndex,
                                }"
                                >
                                  {{
                                  chapter.type == 8
                                    ? chapter.title
                                    : chapter.name
                                }}
                                </div>
                              </div>
                              <!-- <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 10px 35px"
                      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,
                            toolIndex
                          )
                        "
                        >文件下载</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 || ispzType == 4"
      style="background-image: linear-gradient(90deg, #477cd7, #65b9fc)"
    >
      <!-- 批 -->
      <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>
          <el-select v-model="pzStype" @change="selectPz" class="selectBox">
            <el-option label="时间降序" :value="1"></el-option>
            <el-option label="时间升序" :value="2"></el-option>
            <el-option label="我的评课" :value="3"></el-option>
          </el-select>
          <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
              @click="checkImg(getImgList(pz.content))"
              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="timeAndReply">
              <div class="time">
                {{ pz.time }}
              </div>
              <div @click="setReplyIndex(pz.id, pzIndex)">回复</div>
            </div>

            <div v-if="pz.hfList && pz.hfList.length > 0" class="hfBox">
              <div
                v-for="(h, hIndex) in pz.hfList"
                :key="hIndex"
                class="hfItem"
              >
                <div class="whoReplyWho">
                  <div class="hfName">{{ h.username }}</div>
                  <div class="hfImg">
                    <img src="../../assets/icon/newIcons/right.png" alt="" />
                  </div>
                  <div class="hfName">{{ pz.username }}</div>
                </div>
                <div class="hfContent" v-html="h.content"></div>
                <div class="hfBottom">
                  <div class="hfTime">{{ h.time }}</div>
                  <div
                    class="deleteHfItem"
                    @click="deleteReply(h.id)"
                    v-if="userid == h.userid"
                  >
                    <img src="../../assets/icon/newIcons/delete.png" alt="" />
                  </div>
                </div>
              </div>
            </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="replyDialogVisible == true"
      class="addDialogCss"
      v-el-drag-dialog
    >
      <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="replyDialogVisible = false">
          <img src="../../assets/close1.png" class="pzClose" 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% - 50px)">
          <editor-bar
            class="binfo_input pzConText"
            style="width: 100% !important; margin: 0 auto"
            placeholder="请输入回复描述"
            v-model="reply"
            @change="change"
          ></editor-bar>
        </div>
        <div class="addTextCss" @click="addHf">确定</div>
      </div>
    </div>
    <div v-if="addPzDialog == true" class="addDialogCss" v-el-drag-dialog>
      <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" class="pzClose" 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"
        ></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 }"
      ></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: "",
      mlDialog: false,
      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,
      replyDialogVisible: false,
      replyIndex: 0,
      replyPid: "",
      radio: [],
      isAsk: false,
      askJson: {
        askCount: 1,
        askTitle: "",
        askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
      },
      testJson: {},
      checkJson: [],
      askList: [],
      answerList: [],
      navList: [],
      addPzDialog: false,
      isHovered: false,
      isHovered1: false,
      ispzType: 0,
      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,
      },
      pzStype: 1,
      downLoading: "",
    };
  },
  methods: {
    jump() {
      window.topU.postMessage({ tools: "43" }, "*");
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    checkImg(list) {
      if (!list.length) {
        return;
      }
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        imgList: list, // 需要预览的多图数组
      });
    },
    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 : 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);
        });
    },
    setReplyIndex(id, i) {
      this.replyIndex = i;
      this.replyPid = id;
      this.replyDialogVisible = true;
    },
    addHf() {
      if (this.reply == "") {
        this.$message.error("回复不能为空！");
        return;
      }
      let params = [
        {
          cid: this.id,
          uid: this.userid,
          s: this.courseType,
          t: this.taskCount,
          type: "1",
          ct: 2,
          pid: this.replyPid,
          c: this.reply,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addHf", params)
        .then((res) => {
          this.reply = "";
          this.$message({
            message: "回复成功",
            type: "success",
          });
          this.replyDialogVisible = 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(() => {});
    },
    deleteReply(id) {
      this.$confirm("确定删除此回复吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = [
            {
              id: id,
            },
          ];
          this.ajax
            .post(this.$store.state.api + "deleteReply", 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,
        type: this.pzStype,
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectPzListType", params)
        .then((res) => {
          this.pzList = res.data[0];
          var a = res.data[1];
          for (var i = 0; i < a.length; i++) {
            for (var j = 0; j < this.pzList.length; j++) {
              if (!this.pzList[j].hfList) {
                this.pzList[j].hfList = [];
              }
              if (a[i].pid == this.pzList[j].id) {
                this.pzList[j].hfList.push(a[i]);
              }
            }
          }
        })
        .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.topU.postMessage({ allScreen: this.screenType + "s" }, "*");
    },
    refreshCourse() {
      this.navList = [];
      this.getCourseDetail(1);
    },
    setPz() {
      if (this.ispzType == 4) {
        this.ispzType = 0;
        this.pzDialog = false;
        return;
      }
      this.ispzType = 4;
      this.pzDialog = true;
      this.selectPz();
    },
    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, ctype) {
      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;
            }
          }
        }
      }
      if (this.navList[s].task[n].isOpen == true && ctype != 2) {
        this.navList[s].task[n].isOpen = !this.navList[s].task[n].isOpen;
        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;
      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.getCourseDetail();
    },

    get(i) {
      let a = this.navList[i].isOpen;
      this.navList[i].isOpen = !this.navList[i].isOpen;
      this.$forceUpdate();
      if (this.navList[i].isOpen) {
        this.openTask(i, 0, i + "-0", 2);
      }
    },
    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 + "selectStudentCourseDetail3", 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=" +
                    encodeURIComponent(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) {
                    let ic = 0;
                    for (let ci = 0; ci < _tool.toolData.length; ci++) {
                      if (_tool.toolData[ci].type != 12) {
                        ic = ci;
                        break;
                      }
                    }
                    _tool.sourceIndex = ic;
                  }
                }
              }
            }
            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
                    ) {
                      // “${_work.name ? _work.name : this.setTime(_work.create_at)}”
                      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);
                      }
                    }
                  }
                  // “${_tool.toolPhoto[0].name ? _tool.toolPhoto[0].name : this.setTime(_tool.toolPhoto[0].create_at)}”
                  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.ispzType == 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 = [];
        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;
          copyList.push({
            dyName: q,
            isOpen: l === 0 ? true : false,
            task: [],
          });
          for (var r = 0; r < w.length; r++) {
            e = w[r].task;
            if (this.chapInfoList[l].easy == 1) {
              copyList[l].task.push({
                taskName: q,
                id: l + "-" + r,
                isLook: w[r].isLook,
                isOpen: r === 0 ? true : false,
                tool: [],
              });
            } else {
              copyList[l].task.push({
                taskName: e,
                id: l + "-" + r,
                isLook: w[r].isLook,
                isOpen: r === 0 ? true : false,
                tool: [],
              });
            }
            var t = w[r].toolArray;
            for (var k = 0; k < t.length; k++) {
              var tool = t[k].tool;
              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;
      } 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.topU.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.topU.postMessage({ tools: "2" }, "*");
      } else if (t == 3) {
        window.topU.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.topU.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.topU.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.topU.postMessage({ tools: "5" }, "*");
      } else if (t == 6) {
        window.topU.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.topU.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.topU.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.topU.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.topU.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.topU.postMessage({ tools: "21" }, "*");
      } else if (t == 22) {
        window.topU.postMessage({ tools: "22" }, "*");
      } else if (t == 23) {
        window.topU.postMessage({ tools: "23" }, "*");
      } else if (t == 24) {
        window.topU.postMessage({ tools: "24" }, "*");
      } else if (t == 25) {
        window.topU.postMessage({ tools: "25" }, "*");
      } else if (t == 31) {
        window.topU.postMessage({ tools: "31" }, "*");
      } else if (t == 28) {
        window.topU.postMessage({ tools: "28" }, "*");
      } else if (t == 37) {
        window.topU.postMessage({ tools: "37" }, "*");
      } else if (t == 38) {
        window.topU.postMessage({ tools: "38" }, "*");
      } else if (t == 39) {
        window.topU.postMessage({ tools: "39" }, "*");
      } else if (t == 32) {
        window.topU.postMessage({ tools: "32" }, "*");
      } else if (t == 26) {
        window.topU.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.topU.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),
        },
      ];
      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;
    },
    jumpGj(i, j, k, l) {
      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.scrollingElement;
      this.navId = "";
      let target = document.querySelector(`#gj${k}`);
      if (target) {
        target.scrollIntoView(true);
        setTimeout(() => {
          a.scrollTop = a.scrollTop - 150;
        }, 0);
      }
      if (l) {
        this.courseType = i;
        // this.navId = l;
        this.taskCount = j;
        this.selectPz();
        this.getCourseDetail(2);
      }

      // var b = this.$refs["bz" + k][0];
      // a.scrollTop = b.offsetTop;
    },
    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=" +
          encodeURIComponent(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, toolIndex) {
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      let url2 = url;
      let _url2 = "";
      if (
        url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url2 = url2.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url2 = url2;
      }
      let _this = this;

      _this.downLoading = "down" + toolIndex;
      var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
      let name = decodeURIComponent(
        decodeURIComponent(_url2).split(
          "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"
        )[1]
      );
      var params = {
        Bucket: "ccrb",
        Key: name,
      };
      s3.getObject(params, function (err, data) {
        _this.downLoading = "";
        if (err) console.log(err, err.stack); // an error occurred
        else {
          let url = window.URL.createObjectURL(new Blob([data.Body]));
          let a = document.createElement("a");
          a.name = name;
          a.href = url;
          a.download = name;
          a.click();
          console.log(data);
        } // sxuccessful response
      });
      // 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) {
      if (tool.toolData[index].type == 12) {
        this.downloadFile2(tool.toolData[index], toolIndex);
        return;
      }
      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();
    },
    downloadFile2(f, toolIndex) {
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      let url2 = f.url;
      let _url2 = "";
      if (
        url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url2 = url2.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url2 = url2;
      }
      let _this = this;

      _this.downLoading = "down" + toolIndex;
      var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
      let name = decodeURIComponent(
        decodeURIComponent(_url2).split(
          "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"
        )[1]
      );
      var params = {
        Bucket: "ccrb",
        Key: name,
      };
      s3.getObject(params, function (err, data) {
        _this.downLoading = "";
        if (err) console.log(err, err.stack); // an error occurred
        else {
          let url = window.URL.createObjectURL(new Blob([data.Body]));
          let a = document.createElement("a");
          a.name = f.name;
          a.href = url;
          a.download = f.name;
          a.click();
          console.log(data);
        } // sxuccessful response
      });

      return;
      // const loading = this.$loading.service({
      //   background: "rgba(255, 255, 255, 0.7)",
      //   target: document.body,
      //   text: "文件加载中...",
      // });
      // let url2 = f.url;
      // let _url2 = "";
      // if (
      //   url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      // ) {
      //   _url2 = url2.split(
      //     "https://view.officeapps.live.com/op/view.aspx?src="
      //   )[1];
      // } else {
      //   _url2 = url2;
      // }
      // let params = {
      //   url: _url2,
      //   name: f.name,
      // };
      // this.ajax
      //   .get(this.$store.state.api + "download", params)
      //   .then((res) => {
      //     loading.close();
      //     let content = res.data.data.data;
      //     let ab = new ArrayBuffer(content.length);
      //     let view = new Uint8Array(ab);
      //     for (var i = 0; i < content.length; ++i) {
      //       view[i] = content[i];
      //     }
      //     let elink = document.createElement("a");
      //     elink.download = f.name;
      //     elink.style.display = "none";
      //     let blob = new Blob([ab], {
      //       type: res.data.response.headers["content-type"] + ";charset=UTF-8",
      //     });
      //     elink.href = URL.createObjectURL(blob);
      //     document.body.appendChild(elink);
      //     elink.click();
      //     document.body.removeChild(elink);
      //   })
      //   .catch((err) => {
      //     loading.close();
      //     console.error(err);
      //   });
    },
    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) {
              let ci = 0;
              for (var li = 0; li < _tool.toolData.length; li++) {
                if (_tool.toolData[li].type != 12) {
                  ci++;
                }
              }

              if (ci == 0) {
                _tool.isNoFile = true;
                document.getElementsByClassName(
                  "vedioList" + z
                )[0].style.height = 650 + "px";
                document.getElementsByClassName(
                  "vedioList" + z
                )[0].style.width = "100%";
              } else {
                _tool.isNoFile = false;
                var a = document.getElementsByClassName("box_course" + z)[0]
                  ? document.getElementsByClassName("box_course" + z)[0]
                      .offsetHeight
                  : 650;
                document.getElementsByClassName(
                  "vedioList" + z
                )[0].style.height = a + "px";
                document.getElementsByClassName(
                  "vedioList" + z
                )[0].style.width = "calc(100% - 83% - 35px)";
              }
              this.$forceUpdate();
              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);
    },
    setContent2(bool) {
      this.mlDialog = bool;
      // if (
      //   bool && document.querySelector(".workd_media")
      // ) {
      //   document.querySelector(".workd_media").style.height = "650px";
      // } else if (document.querySelector(".workd_media")) {
      //   document.querySelector(".workd_media").style.height = "auto";
      // }
    },
  },
  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;
      };
    },
    setTime() {
      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 : "";
      };
    },
    getImgList() {
      return function (val) {
        let srcList = []; // 定义一个数组用来接收后面的img地址

        val.replace(
          /<img [^>]*src=['"]([^'"]+)[^>]*>/g,
          function (match, capture) {
            // 查找匹配的元素   match为整个img标签  capture为src中的内容
            srcList.push(capture);
          }
        );
        return srcList;
      };
    },
  },
  mounted() {
    if (this.screenType == 2) {
      window.topU.postMessage({ allScreen: 4 + "s" }, "*");
    } else if (this.screenType == 3) {
      window.topU.postMessage({ allScreen: 5 }, "*");
    } else if (this.screenType == 1) {
      window.topU.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();
    this.setContent2(true);
  },
};
</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);
  position: fixed;
  height: calc(100% - 40px);
  border-radius: 20px;
  padding-bottom: 15px;
  box-sizing: border-box;
}

.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%;
  margin: 0px 0 0 35px;
}

.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: 100px;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
}

.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: 0 0 5px;
  position: relative;
}

.filebox:before {
  content: ""; /* 使用 :before 伪元素创建纵向虚线 */
  position: absolute;
  top: 20px;
  left: 13px;
  border-left: 2px dotted #cad1dc;
  height: calc(100% - 15px);
}

.toolHeng2 > div:last-child::before {
  height: calc(100% - 43px);
}

.filebox .tooldetail {
  width: calc(100% - 280px);
  margin: 0px 12px;
  padding: 12px;
  line-height: 30px;
  word-break: break-word;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid #cad1dc;
  overflow: hidden;
  box-sizing: border-box;
}

.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 {
  width: 85%;
  margin: 10px auto 26px auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.courseTitle .ctitle {
  font-size: 20px;
  font-weight: bold;
  color: #0e1e33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.courseTitle >>> .el-tooltip {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.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: fixed;
  top: 20px;
  left: 22%;
  width: 77%;
  z-index: 999;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #cad1dc;
  padding: 10px 0;
}

.new_topFixed {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0px;
  display: block;
  background: #f2f2f2;
  z-index: 998;
}

.navLeftCss {
  width: 100% !important;
  left: 0 !important;
}

.before {
  position: absolute;
  background: #c3dad4;
  width: 6px;
  height: 100%;
}

.courseIndex {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 745px);
}

.courseIndex > div:nth-child(1) {
  margin: 0 0 0 10px;
  font-size: 20px;
  min-width: 100px;
  font-weight: bold;
  border-left: 4px solid #3363b9;
  height: 32px;
  text-align: center;
  line-height: 35px;
}

.courseIndex > div:nth-child(2) {
  font-size: 20px;
  /* width: 300px; */
  max-width: calc(100% - 105px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.courseIndex > div:nth-child(3) {
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 5px;
  background: #3681fc;
  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;
  border: 1px solid #ececec;
  width: 100%;
  height: 445px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.16);
}

.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%;
  padding-left: 37px;
  box-sizing: border-box;
}

.toolHeng2 > div:last-child::before {
  height: calc(100% - 43px);
}

.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,
.toolActive {
  height: auto !important;
  overflow: auto !important;
  /* padding-bottom: 16px; */
}
.toolActive {
  padding: 0;
}

.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 {
  /* background-color: #e0eafb !important;
  color: #0061ff; */
  color: #fff;
  background: rgb(55, 129, 252) !important;
}

.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: 95%;
  margin: 17px auto 0;
  height: calc(100% - 40px - 21px - 20px - 17px);
  background: #fff;
  border-radius: 8px;
}

.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;
  overflow: auto;
}

.taskBox {
  margin: 10px auto 20px;
  background: #f0f4fa;
  width: 97%;
  border-radius: 10px;
}

.vedioTaskBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  /* height: 650px; */
}

.toolBox {
  margin: 15px 0 0 25px;
  display: flex;
  position: relative;
  padding: 18px 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 90%;
}

.btnAll {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  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:hover {
  background: #3383fa !important;
  color: #fff;
  border: 1px solid #3383fa !important;
}
.last,
.returnBtn1 {
  width: 90px;
  height: 36px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #0061ff;
  color: #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;
  display: flex;
}
.lastText {
  padding: 0 5px 0 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.lastImg > img {
  width: 100%;
  height: 100%;
}

/* .vedioTimeBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
} */

.navBox {
  background: #fff;
  height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
}

.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 .yCss {
  width: 7px;
  height: 7px;
  background: #fff;
  margin: 0 16px 0 6px;
  border-radius: 50%;
  border: 5px solid #3681fc;
  z-index: 99;
}

.bzBox > div:nth-child(2) {
  font-size: 18px;
  font-weight: bold;
  color: #0e1e33;
}

.navTitile {
  padding: 0 0px 0 15px;
  font-size: 16px;
  font-weight: bold;
  color: #0e1e33;
  height: 40px;
  line-height: 40px;
}

.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:hover {
  opacity: 1 !important;
}

.pButton {
  position: fixed;
  text-align: center;
  cursor: pointer;
  z-index: 999;
  right: 20px;
  top: 110px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.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;
  user-select: none;
}

.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;
}

.pzContent >>> img {
  max-width: 100%;
}

.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;
  width: 600px;
  height: 70%;
  min-height: 450px;
  box-shadow: 0px 0 8px 0px #555555;
  border-radius: 15px;
  z-index: 999;
  left: 50%;
  top: 50%;
  margin: -18% 0 0 -300px;
}

.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;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.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 {
  min-width: 130px;
  width: auto;
  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;
  background-size: 100% 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.isCard > div,
.noCard > div,
.isCard1 > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  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 30px;
  font-size: 18px;
}

.toolPhoto_box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 25px;
}

.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: "、";
}

.selectBox {
  width: 110px;
  margin-left: 10px;
  margin: 0 10px 0 auto;
}

.selectBox >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
}

.selectBox >>> .el-input__icon {
  line-height: 30px;
}

.timeAndReply {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 10px 10px 0px;
}
.timeAndReply .time {
  color: #bfbfbf;
  padding: 0 0 0 10px;
  box-sizing: border-box;
}
.timeAndReply > div:last-child {
  cursor: pointer;
  color: #777;
}

.hfBox {
  padding: 10px;
  box-sizing: border-box;
}

.whoReplyWho {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
}
.hfBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.deleteHfItem {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.deleteHfItem > img {
  width: 100%;
  height: 100%;
}
.whoReplyWho > .hfImg {
  width: 12px;
  height: 12px;
  margin: 0 5px;
}
.whoReplyWho > .hfImg > img {
  width: 100%;
  height: 100%;
}
.hfContent {
  padding-top: 10px;
  box-sizing: border-box;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
}

.hfTime {
  text-align: left;
  box-sizing: border-box;
  padding: 10px 0 10px 0px;
  color: #bfbfbf;
  font-size: 14px;
}

.reBtnIcon,
.commentIcon {
  height: 36px;
  border-radius: 4px;
  position: relative;
  background: #0061ff;
  cursor: pointer;
  margin-right: 12px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
}

.reBtnIcon::before,
.commentIcon::before {
  content: "";
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.reBtnIcon::before {
  background-image: url("../../assets/icon/newIcons/refresh.png");
}
.commentIcon::before {
  background-image: url("../../assets/icon/newIcons/comment.png");
}

.mlImg {
  width: 40px !important;
  min-width: 40px;
  cursor: pointer;
  transform: rotate(180deg);
}

.mlImg > img {
  width: 100%;
  height: 100%;
}

.stageBoxCss,
.stageBoxIsCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #e2f5fc;
  cursor: pointer;
  width: 100%;
}

.stageBoxIsCss {
  background: #0061ff;
  color: #fff;
  border-radius: 8px;
}

.stageItemTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 15px;
  width: calc(100% - 50px);
}

.stageItemTitle > div:first-child {
  min-width: 55px;
}
.stageItemTitle > div:last-child {
  max-width: 242px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  width: calc(100% - 55px);
}
.closeTri,
.closeTri1 {
  min-width: 15px;
  width: 15px;
  height: 15px;
  transition: all 0.5s;
}

.closeTri1 {
  padding-left: 10px;
  cursor: pointer;
}

.closeTri > img,
.closeTri1 > img {
  width: 100%;
  height: 100%;
  /* transition: all .5s; */
}

.navItem {
  background: #ffffff;
  border-radius: 4px;
  width: 100%;
  margin: 10px auto;
  position: relative;
  height: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.navItemList {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 13px;
  cursor: pointer;
  width: calc(100% - 60px);
  height: 100%;
}
.navItemList > div:first-child {
  min-width: 60px;
}
.navItemList > div:last-child {
  width: calc(100% - 80px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.noToolBlue {
  min-width: 10px;
  width: 10px;
  height: 10px;
  background: #0061ff;
  border-radius: 50%;
  margin-left: 13px;
}

.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; */
}

.toolChild > div + div {
  margin-top: 5px;
}

.gjCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 0 10px 40px;
  box-sizing: border-box;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
}

.isGjCss {
  /* color: #0061ff; */
  color: #fff;
  background: rgb(55, 129, 252);
  /* background-color: #e0eafb !important;
  color: #0061ff !important; */
}

.toolChild > div {
  position: relative;
  width: 100%;
}

.navCorOpenBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px 8px 0px 0px;
  z-index: 9;
  position: relative;
}

.navCorOpen {
  padding-right: 15px;
  cursor: pointer;
  width: 45px;
  display: flex;
}

.navListItem {
  width: calc(100% - 20px);
  height: 50px;
  margin: 0px auto 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  background: #f0f4fa;
  border-radius: 6px 6px 6px 6px;
}

.navText {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 220px;
  padding: 0 10px;
  font-weight: 400;
  color: #0e1e33;
}
</style>