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

<template>
  <div class="pb_content" style="overflow: unset; background: #eff7ff">
    <div
      class="pb_content_body"
      style="display: flex; height: 900px; position: relative"
    >
      <div class="pb_left">
        <!-- <div class="courseTitle">{{ courseDetail.title }}</div> -->
        <el-tooltip
          class="courseTitle"
          effect="light"
          :content="courseDetail.title"
          placement="top"
        >
          <div>{{ courseDetail.title }}</div>
        </el-tooltip>
        <div class="ml">目录</div>
        <div class="cru_selectBox">
          <div v-for="(item, stageIndex) in navList" :key="stageIndex">
            <div class="blue_box_one" @click="get(stageIndex)">
              <div>第{{ stageIndex + 1 }}阶段</div>
              <div>{{ item.dyName }}</div>
            </div>
            <div class="twoChild" :class="{ navActive: item.isOpen }">
              <div
                class="navChild"
                v-for="(nav, navIndex) in item.task"
                :key="navIndex"
              >
                <div
                  class="navTask"
                  @click="openTask(stageIndex, navIndex, nav.id)"
                  :class="{
                    openTaskActive:
                      navIndex == taskCount &&
                      nav.id == navId &&
                      stageIndex == courseType,
                  }"
                >
                  <div
                    class="vedioNav"
                    :class="{
                      isClick:
                        navIndex == taskCount &&
                        nav.id == navId &&
                        stageIndex == courseType,
                    }"
                    style="margin: 0"
                  >
                    任务{{ navIndex + 1 }}
                  </div>
                  <el-tooltip
                    class="navTaskname item"
                    effect="light"
                    :content="nav.taskName"
                    placement="top"
                  >
                    <div>{{ nav.taskName }}</div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="body_student">
        <div
          v-for="(jd, jdIndex) in chapInfoList"
          :key="jdIndex"
          style="background: #f2f2f2"
        >
          <div
            class="new_top"
            style="width: 100%; box-shadow: 0px 9px 0 0 #f2f2f2"
          >
            <div class="courseIndex">
              <div>第{{ jdIndex - 0 + 1 }}阶段</div>
              <el-tooltip effect="light" :content="jd.dyName" placement="top">
                <div>{{ jd.dyName }}</div>
              </el-tooltip>
            </div>
            <div class="btnAll">
              <!-- <div class="returnBtn" @click="nextOrpreSteps(0)">上一步</div> -->
              <!-- <div class="returnBtn" @click="nextOrpreSteps(1)">下一步</div> -->
              <div class="returnBtn" @click="allScrell" v-if="jdIndex == 0">
                全屏
              </div>
              <div
                class="returnBtn"
                @click="juriVisible = true"
                v-if="jdIndex == 0 && tType == 3"
              >
                权限
              </div>
              <div
                class="returnBtn"
                style="background: #225bc7"
                v-if="jdIndex == 0"
                @click.stop="
                  goTo(
                    '/courseDetail?userid=' +
                      userid +
                      '&oid=' +
                      oid +
                      '&org=' +
                      org +
                      '&cid=' +
                      classId +
                      '&courseId=' +
                      id +
                      '&tType=' +
                      tType +
                      '&screenType=' +
                      screenType
                  )
                "
              >
                返回
              </div>
            </div>
          </div>
          <!-- v-for="(task, index) in chapInfoList[courseType].chapterInfo[0]
            .taskJson"
        :key="index"-->
          <div
            class="isNoMessage"
            v-if="
              chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                .chapterData.length == 0 &&
              chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                .toolChoose[0].tool.length == 0 &&
              chapInfoList[courseType].chapterInfo[0].video.length == 0 &&
              chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                .taskDetail == '' &&
              !chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].eList
            "
          >
            <img src="../assets/icon/isNoMessage.png" alt />
          </div>
          <div
            class="study_top"
            v-for="(rw, rwIndex) in jd.chapterInfo[0].taskJson"
            :key="rwIndex"
          >
            <div class="rwCss">
              <div :id="jdIndex + '-' + rwIndex">任务{{ rwIndex + 1 }}</div>
              <div style="margin: 0px 0 0 10px">{{ rw.task }}</div>
            </div>
            <div
              class="vedioBox"
              v-if="
                vedio[jdIndex][rwIndex].length > 0 ||
                rw.taskDetail != '' ||
                rw.chapterData.length > 0
              "
            >
              <div class="checkbox">
                <div class="check" style="font-size: 25px" :id="rw.id">
                  学一学
                </div>
              </div>
              <div
                class="student_head"
                v-if="
                  vedio[jdIndex][rwIndex].length > 0 ||
                  textList[jdIndex][rwIndex].length > 0 ||
                  file[jdIndex][rwIndex].length > 0 ||
                  rw.taskDetail != ''
                "
              >
                <div class="taskBox">
                  <div
                    style="
                      display: flex;
                      flex-wrap: nowrap;
                      flex-direction: column;
                      position: relative;
                    "
                  >
                    <div
                      style="
                        padding: 20px;
                      "
                      v-if="rw.taskDetail != ''"
                      v-html="rw.taskDetail ? rw.taskDetail : '暂无描述'"
                    ></div>
                  </div>
                </div>
                <div class="vedioTaskBox">
                  <div
                    class="box_course"
                    v-if="
                      vedio[jdIndex][rwIndex].length > 0 ||
                      textList[jdIndex][rwIndex].length > 0 ||
                      file[jdIndex][rwIndex].length > 0
                    "
                  >
                    <div
                      class="wheel"
                      v-if="
                        vedio.length &&
                        vedio[jdIndex][rwIndex] &&
                        vedio[jdIndex][rwIndex].length > 0 &&
                        showType[jdIndex] &&
                        showType[jdIndex][rwIndex] == 0
                      "
                    >
                      <div class="workd_media" style="height: 100%">
                        <video-player
                          class="video-player vjs-custom-skin"
                          :playsinline="true"
                          :options="playerO[jdIndex][rwIndex]"
                          @play="onPlayerPlay($event)"
                          style="width: 90%; height: 100%; margin: 0 0 0 30px"
                        ></video-player>
                      </div>
                    </div>
                    <div
                      class="wheel"
                      v-if="showType[jdIndex][rwIndex] == 1"
                      style="
                        box-shadow: 0 0 6px 1px #f2f2f2;
                        width: 90%;
                        margin: 0 0 20px 30px;
                        background: #f1f1f1;
                      "
                    >
                      <div class="title">查看文档</div>
                      <el-form class="textBox">
                        <el-form-item class="textTitle">
                          <div
                            style="
                              font-size: 22px;
                              max-height: 100px;
                              overflow: auto;
                            "
                          >
                            {{ textList[jdIndex][rwIndex][0].name }}
                          </div>
                        </el-form-item>
                        <!-- <div style="color: #918f8f; width: 85%">文档内容</div> -->
                        <div
                          v-html="textList[jdIndex][rwIndex][0].url"
                          class="textContent"
                        ></div>
                      </el-form>
                    </div>
                    <div
                      class="wheel"
                      v-if="showType[jdIndex][rwIndex] == 2"
                      style="height: 520px; width: 95%; margin: 0 auto"
                    >
                      <iframe
                        style="width: 100%; height: 100%; border: none"
                        :src="pptImgUrl1[jdIndex][rwIndex]"
                      ></iframe>
                    </div>
                    <div
                      class="wheel"
                      v-if="showType[jdIndex][rwIndex] == 3"
                      style="height: 520px; width: 95%; margin: 0 auto"
                    >
                      <pdf
                        :pdfUrl="pptImgUrl1[jdIndex][rwIndex]"
                        style="width: 100%; height: 100%; overflow: auto"
                      ></pdf>
                    </div>
                    <div
                      class="wheel"
                      v-if="showType[jdIndex][rwIndex] == 4"
                      style="height: 520px; width: 95%; margin: 0 auto"
                    >
                      <el-image
                        :src="pptImgUrl1[jdIndex][rwIndex]"
                        fit="cover"
                        style="width: 100%"
                      ></el-image>
                    </div>
                  </div>
                  <div
                    class="vedioList"
                    :class="
                      vedio[jdIndex][rwIndex].length == 0 &&
                      file[jdIndex][rwIndex].length == 0 &&
                      textList[jdIndex][rwIndex].length == 0
                        ? 'listNoVedio'
                        : ''
                    "
                    v-if="
                      (vedio.length &&
                        vedio[jdIndex][rwIndex] &&
                        vedio[jdIndex][rwIndex].length > 0) ||
                      (textList.length &&
                        textList[jdIndex][rwIndex] &&
                        textList[jdIndex][rwIndex].length > 0) ||
                      (lineList.length &&
                        lineList[jdIndex][rwIndex] &&
                        lineList[jdIndex][rwIndex].length > 0) ||
                      (file.length &&
                        file[jdIndex][rwIndex] &&
                        file[jdIndex][rwIndex].length > 0)
                    "
                  >
                    <div class="navTitile">内容列表：</div>
                    <div class="navBox">
                      <div
                        v-show="
                          vedio.length &&
                          vedio[jdIndex][rwIndex] &&
                          vedio[jdIndex][rwIndex].length > 0
                        "
                      >
                        <!-- <div
                          class="vedioNav"
                          style="
                            width: 80px;
                            min-width: 80px;
                            height: 30px;
                            line-height: 36px;
                            font-size: 16px;
                            border-radius: 10px;
                          "
                        >
                          视频
                        </div> -->
                        <div
                          class="vedioTimeBox"
                          v-for="(media, vedioIndex) in vedio[jdIndex][rwIndex]"
                          :key="vedioIndex + '1'"
                          @click="
                            lookVedio(media.url, jdIndex, rwIndex, vedioIndex)
                          "
                        >
                          <div
                            class="media"
                            style="
                              width: 90px;
                              height: 60px;
                              position: relative;
                            "
                          >
                            <img
                              style="height: 90px; width: 160px"
                              :src="
                                media.cover != null && media.cover != ''
                                  ? JSON.parse(media.cover).length > 0
                                    ? JSON.parse(media.cover)[0].url
                                    : mr
                                  : mr
                              "
                              alt
                            />
                            <!-- <div class="vedioTime" v-if="vedioTime[jdIndex]">
                              {{ vedioTime[jdIndex][rwIndex][vedioIndex] }}
                            </div> -->
                          </div>
                          <div
                            class="vedioName"
                            :class="
                              isClickNavOne[jdIndex][rwIndex][vedioIndex] ==
                              'video' + vedioIndex
                                ? 'isClickNavOne'
                                : ''
                            "
                          >
                            {{ media.name }}
                          </div>
                        </div>
                      </div>
                      <div
                        v-show="
                          textList.length &&
                          textList[jdIndex][rwIndex] &&
                          textList[jdIndex][rwIndex].length > 0
                        "
                        class="newNav"
                        v-for="(text, textIndex) in textList[jdIndex][rwIndex]"
                        :key="textIndex + '2'"
                        @click="lookText(jdIndex, rwIndex, textIndex)"
                      >
                        <!-- <div
                          class="vedioNav"
                          style="
                            width: 80px;
                            min-width: 80px;
                            height: 30px;
                            line-height: 36px;
                            font-size: 16px;
                            border-radius: 10px;
                          "
                        >
                          文档
                        </div> -->
                        <div style="width: calc(100% - 115px)">
                          <div
                            class="navText"
                            :class="
                              isClickNavOne[jdIndex][rwIndex][textIndex] ==
                              'text' + textIndex
                                ? 'isClickNavOne'
                                : ''
                            "
                          >
                            {{
                              textList[jdIndex][rwIndex].length > 0
                                ? text.name
                                : ""
                            }}.doc
                          </div>
                        </div>
                      </div>
                      <div
                        v-show="
                          lineList.length &&
                          lineList[jdIndex][rwIndex] &&
                          lineList[jdIndex][rwIndex].length > 0
                        "
                        class="newNav"
                        v-for="(lines, lineIndex) in lineList[jdIndex][rwIndex]"
                        :key="lineIndex + '4'"
                        @click="doUrl(lines.url)"
                      >
                        <!-- <div
                          class="vedioNav"
                          style="
                            width: 80px;
                            min-width: 80px;
                            height: 30px;
                            line-height: 36px;
                            font-size: 16px;
                            border-radius: 10px;
                          "
                        >
                          链接
                        </div> -->
                        <div style="width: calc(100% - 115px)">
                          <div class="navText">
                            <a
                              style="text-decoration: none; color: #000"
                              target="_Blank"
                              >{{ lines.url }}</a
                            >
                          </div>
                        </div>
                      </div>
                      <div
                        class="newNav"
                        v-show="
                          file.length &&
                          file[jdIndex][rwIndex] &&
                          file[jdIndex][rwIndex].length > 0
                        "
                        v-for="(f, fileIndex) in file[jdIndex][rwIndex]"
                        :key="fileIndex"
                        @click="downFile(f, fileIndex, jdIndex, rwIndex)"
                      >
                        <!-- <div
                          class="vedioNav"
                          style="
                            width: 80px;
                            min-width: 80px;
                            height: 30px;
                            line-height: 36px;
                            font-size: 16px;
                            border-radius: 10px;
                          "
                        >
                          文档
                        </div> -->
                        <div style="width: calc(100% - 115px)">
                          <div
                            class="navText"
                            :class="
                              isClickNavOne[jdIndex][rwIndex][fileIndex] ==
                              'word' + fileIndex
                                ? 'isClickNavOne'
                                : ''
                            "
                          >
                            {{ f.name }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  style="padding: 10px 30px 0"
                  v-if="
                    showType[jdIndex][rwIndex] == 2 ||
                    showType[jdIndex][rwIndex] == 3
                  "
                >
                  <el-button
                    type="primary"
                    @click="
                      checkFileFull(
                        showType[jdIndex][rwIndex],
                        pptImgUrl1[jdIndex][rwIndex]
                      )
                    "
                    >全屏查看</el-button
                  >
                </div>
                <div
                  style="padding: 10px 30px 0"
                  v-if="showType[jdIndex][rwIndex] == 1"
                >
                  <el-button
                    type="primary"
                    @click="
                      checkFileFull(
                        showType[jdIndex][rwIndex],
                        textList[jdIndex][rwIndex][0]
                      )
                    "
                    >全屏查看</el-button
                  >
                </div>
              </div>
            </div>

            <div class="student_body">
              <!-- <div
              class="vedioBox"
              v-if="
                file.length && file[taskCount] && file[taskCount].length > 0
              "
            >
              <div class="queTop">
                <div class="question" style="width: 30px; margin-top: 5px">
                  <img src="../assets/icon/fileIcon.png" alt />
                </div>
                <div class="queTitle">
                  <div>附件</div>
                </div>
              </div>
              <div class="filebox" style="width: 100%">
                <div
                  class="file"
                  v-for="(f, fileIndex) in file[taskCount]"
                  :key="fileIndex"
                  @click="downFile(f, fileIndex)"
                >
                  <img :src="require('../assets/file.png')" alt />
                  <div>{{ f.name }}</div>
                </div>
              </div>
              <div class="upFile" v-if="type == 3">提交</div>
            </div>-->
              <div
                class="vedioBox"
                v-if="
                  rw.toolChoose[0].tool &&
                  rw.toolChoose[0].tool.length &&
                  rw.toolChoose[0].tool.length > 0
                "
              >
                <div
                  class="queTop"
                  style="
                    font-size: 25px;
                    padding: 20px 0 20px 30px;
                    font-weight: bold;
                  "
                >
                  <!-- <div class="question" style="width: 30px">
                  <img src="../assets/icon/toolIcon.png" alt />
                </div>
                <div class="queTitle">
                  <div>工具</div>
                </div>-->
                  练一练
                </div>
                <div class="toolHeng2" style="position: relative">
                  <div
                    class="filebox"
                    style="flex-wrap: nowrap; margin: 0 20px"
                    v-for="(tool, toolIndex) in rw.toolChoose"
                    :key="toolIndex"
                  >
                    <div class="bzBox">
                      <div></div>
                      <div>步骤{{ toolIndex + 1 }}</div>
                    </div>

                    <div class="toolBox">
                      <div>
                        <!-- v-for="(itemTool, indexTool) in toolTypeList"
                      :key="indexTool"-->

                        <!-- <div class="iframeBox">
                      <div
                        class="addPoint isBorder"
                        v-for="(tooC, toolCIndex) in tool.tool"
                        :key="toolCIndex"
                      >
                        <div v-if="tooC == 1" style="border: 1px soild #ccc">
                          <div
                            class="iframeName"
                          >
                            电子白板
                          </div>
                          <iframe
                            src="https://iwb.cocorobo.cn/"
                            ref="whiteBoard"
                          ></iframe>
                        </div>
                      </div>
                      </div>-->
                        <div class="tooldetail" v-if="tool.toolDetail != ''">
                          <!-- <div class="toolTitle">工具描述</div> -->
                          <div v-html="contentConvent(tool.toolDetail)">
                            <!-- {{ contentConvent(tool.toolDetail) }} -->
                          </div>
                        </div>
                        <div class="noiframeBox">
                          <div
                            class="addPoint"
                            v-for="(tooC, toolCIndex) in tool.tool"
                            :key="toolCIndex"
                          >
                            <div v-if="tooC == 1">
                              <div class="iframeName">电子白板</div>
                              <iframe
                                src="https://iwb.cocorobo.cn/"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 3">
                              <div class="iframeName">思维导图</div>
                              <iframe
                                src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 6">
                              <div class="iframeName">协同文档</div>
                              <iframe
                                src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 7">
                              <div class="iframeName">思维网格</div>
                              <iframe
                                src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 8">
                              <div class="iframeName">素材库</div>
                              <iframe
                                src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/library"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 17">
                              <div class="iframeName">学习资料</div>
                              <iframe
                                src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/studyLibrary"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 2">
                              <div class="iframeName">便签</div>
                              <iframe
                                src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/note"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 25">
                              <div class="iframeName">目标管理</div>
                              <iframe
                                :src="
                                  'https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/evaluation?userid=' +
                                  userid +
                                  '&oid=' +
                                  oid +
                                  '&org=' +
                                  org
                                "
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 32">
                              <div class="iframeName">源码编辑</div>
                              <iframe
                                src="//kitten.codemao.cn/"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 31">
                              <div class="iframeName">数学画板</div>
                              <iframe
                                src="//www.netpad.net.cn/svg.html"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 28">
                              <div class="iframeName">翻译</div>
                              <iframe
                                src="//dict.youdao.com/"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 37">
                              <div class="iframeName">魔盒识字</div>
                              <iframe
                                src="//games.cocorobo.cn/view/index.html#/"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 38">
                              <div class="iframeName">24点</div>
                              <iframe
                                src="//24.cocorobo.cn/#/index"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 39">
                              <div class="iframeName">GeoGebra</div>
                              <iframe
                                src="//www.geogebra.org/calculator"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 4">
                              <div class="iframeName">选择题</div>
                              <div>
                                <div
                                  class="a_add_title"
                                  style="
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    justify-content: flex-start;
                                    margin: 10px 0;
                                  "
                                >
                                  <div
                                    style="margin-right: 20px; font-size: 20px"
                                  >
                                    标题:
                                  </div>
                                  <div style="font-size: 20px">
                                    {{ tool.askTitle }}
                                  </div>
                                </div>
                                <div
                                  class="a_addBox"
                                  style="padding: 0 !important"
                                >
                                  <div style="font-size: 16px; color: #c7c7c7">
                                    题目内容
                                  </div>
                                  <div
                                    class="a_add_box"
                                    v-for="(item1, index1) in tool.askCount"
                                    :key="index1"
                                  >
                                    <div class="a_add_head">
                                      <div style="display: flex">
                                        {{ index1 + 1 + "、" }}
                                        <div>
                                          题目：{{
                                            tool.askJson[index1].askstitle
                                          }}
                                        </div>
                                      </div>
                                    </div>
                                    <div class="a_add_body" v-if="!isAnswer">
                                      <div class="a_add_input">
                                        <el-radio-group v-model="radio[index1]">
                                          <el-radio
                                            v-for="(item2, checkIndex) in tool
                                              .askJson[index1].checkList"
                                            :key="checkIndex"
                                            :label="checkIndex"
                                            class="redioStyle"
                                            >{{ item2 }}</el-radio
                                          >
                                        </el-radio-group>
                                      </div>
                                    </div>
                                    <div class="a_add_body" v-else>
                                      <div class="a_add_input">
                                        <el-radio-group v-model="radio[index1]">
                                          <el-radio
                                            v-for="(item2, checkIndex) in tool
                                              .askJson[index1].checkList"
                                            :key="checkIndex"
                                            :label="checkIndex"
                                            disabled
                                            class="redioStyle"
                                            >{{ item2 }}</el-radio
                                          >
                                        </el-radio-group>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- <div v-if="tooC == 5">
                              <img
                                @click="addTools(tooC, toolIndex, taskCount)"
                                src="../assets/icon/thirdToolList/score.png"
                                alt
                              />
                              <div style="margin: 5px 0">量规评分</div>
                            </div> -->
                            <div v-if="tooC == 10">
                              <div class="iframeName">倒计时</div>
                              <div>
                                <Time></Time>
                              </div>
                            </div>
                            <div v-if="tooC == 15">
                              <div class="iframeName">问答工具</div>
                              <div>
                                <div
                                  style="
                                    display: flex;
                                    flex-wrap: nowrap;
                                    flex-direction: column;
                                    position: relative;
                                  "
                                >
                                  <div
                                    class="queTop"
                                    style="padding: 20px 0 20px 0"
                                  >
                                    <div class="question">
                                      <img
                                        src="../assets/icon/question.png"
                                        alt
                                      />
                                    </div>
                                    <div class="queTitle">
                                      <div style="width: 90px; min-width: 90px">
                                        提问：
                                      </div>
                                      <div>{{ tool.answerQ }}</div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-if="tooC == 26">
                              <div class="iframeName">课程设计</div>
                              <iframe
                                src="https://cloud.cocorobo.cn/course-design/index.html"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 18">
                              <div class="iframeName">训练平台</div>
                              <iframe
                                src="https://xunlian.cocorobo.cn/"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 16">
                              <img
                                @click="addTools(tooC, toolIndex, taskCount)"
                                src="../assets/icon/thirdToolList/work.png"
                                alt
                              />
                              <div style="margin: 5px 0">作业提交</div>
                            </div>
                            <div v-if="tooC == 21">
                              <div class="iframeName">编程平台</div>
                              <iframe
                                src="https://x.cocorobo.cn"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 22">
                              <div class="iframeName">AI体验</div>
                              <iframe
                                src="https://aihub.cocorobo.cn/"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 23">
                              <div class="iframeName">python</div>
                              <iframe
                                src="https://python-blockly.cocorobo.cn/"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 24">
                              <div class="iframeName">AI平台</div>
                              <iframe
                                src="https://ai-blockly.cocorobo.cn/?lang=zh-hans"
                                class="iframeCss"
                              ></iframe>
                            </div>
                            <div v-if="tooC == 40">
                              <img
                                @click="addTools(tooC, toolIndex, taskCount)"
                                src="../assets/icon/secondToolList/eval.png"
                                alt
                              />
                              <div style="margin: 5px 0">学生评价</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(16) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          style="
                            width: 200px;
                            height: 140px;
                            margin: 10px 10px 10px 0;
                            border-radius: 15px;
                            box-shadow: 0 0 6px 1px #dfdada;
                          "
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                          :class="w.type == 1 ? 'isTypeOne' : ''"
                        >
                          <div class="workImg" v-if="w.type == 0">
                            <img
                              :src="w.works"
                              @click="previewImg(w.works)"
                              alt
                            />
                          </div>
                          <div class="workImg" v-if="w.type == 1">
                            <img
                              src="../assets/icon/works/noImg.png"
                              @click="openFile(w.works)"
                              alt
                            />
                          </div>
                          <div class="workImg" v-if="w.type == 3">
                            <img
                              style="cursor: pointer"
                              src="../assets/icon/works/noImg.png"
                              @click="openVideo(w.works)"
                              alt
                            />
                          </div>
                          <div class="comment" style="min-width: 200px">
                            <div class="worksName">
                              <div>{{ w.sName }}</div>
                            </div>
                            <div class="commentList">
                              <div class="commentList">
                                <div
                                  class="commentImg"
                                  @click="
                                    isLikes(w.wid, userid, 1, null, w.isLikes)
                                  "
                                >
                                  <img
                                    :src="w.isLikes == true ? likes : noLikes"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.likesCount }}</div>
                              </div>
                              <div
                                class="commentList"
                                style="margin-right: 15px"
                              >
                                <div
                                  class="commentImg"
                                  @click="commentOther(w)"
                                >
                                  <img
                                    src="../assets/icon/comment/comment.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.commentCount }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(4) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div>
                        <div
                          class="worksDetailBox"
                          v-if="
                            worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                          "
                        >
                          <div
                            class="works"
                            style="
                              width: 200px;
                              height: 140px;
                              border-radius: 10px;
                              box-shadow: 0 0 6px 1px #dfdada;
                              overflow: hidden;
                            "
                            v-for="(w, wIndex) in worksStudent[jdIndex][
                              rwIndex
                            ][toolIndex]"
                            :key="wIndex"
                          >
                            <!-- @click="previewImg(w.works)" -->
                            <div class="workImg">
                              <img
                                src="../assets/icon/works/noImg.png"
                                @click="
                                  openTools(
                                    4,
                                    toolIndex,
                                    taskCount,
                                    w.works,
                                    w.sName
                                  )
                                "
                                alt
                              />
                            </div>
                            <div class="worksName">
                              <div>{{ w.sName }}</div>
                              <div>{{ w.time }}</div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                      <AskStatic
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                        :askJSON="
                          worksStudent[jdIndex][rwIndex][toolIndex][0].works
                        "
                        :checkJson="checkJson[jdIndex][rwIndex][toolIndex]"
                      ></AskStatic>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(15) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                        >
                          <div
                            class="workImg"
                            style="
                              border-radius: 15px;
                              box-shadow: 0px 0px 10px 10px #f2f2f2;
                            "
                          >
                            <!-- <img
                            src="../assets/icon/works/noImg.png"
                            @click="openTools(15, toolIndex, taskCount, w.works)"
                            alt=""
                          />-->
                            <div
                              class="answerBg"
                              style="border-radius: 15px 15px 0 0"
                            >
                              <div>{{ w.sName }}</div>
                              <el-tooltip
                                class="item"
                                effect="light"
                                :content="JSON.parse(w.works)[0].answer"
                                placement="top"
                              >
                                <div class="answerContent">
                                  {{ JSON.parse(w.works)[0].answer }}
                                </div>
                              </el-tooltip>
                            </div>
                            <div class="comment">
                              <div class="commentList">
                                <div
                                  class="commentImg"
                                  @click="
                                    isLikes(w.wid, userid, 1, null, w.isLikes)
                                  "
                                >
                                  <img
                                    :src="w.isLikes == true ? likes : noLikes"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.likesCount }}</div>
                              </div>
                              <div
                                class="commentList"
                                style="margin-right: 15px"
                              >
                                <div
                                  class="commentImg"
                                  @click="commentOther(w)"
                                >
                                  <img
                                    src="../assets/icon/comment/comment.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.commentCount }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(1) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          style="
                            width: 200px;
                            height: 140px;
                            margin: 10px 10px 10px 0;
                            border-radius: 15px;
                            box-shadow: 0 0 6px 1px #dfdada;
                          "
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                        >
                          <!-- @click="previewImg(w.works)" -->
                          <div class="workImg">
                            <img
                              :src="w.works"
                              @click="previewImg(w.works)"
                              alt
                            />
                          </div>
                          <div class="comment" style="min-width: 200px">
                            <div class="worksName">
                              <div>{{ w.sName }}</div>
                            </div>
                            <div class="commentList">
                              <div class="commentList">
                                <div
                                  class="commentImg"
                                  @click="
                                    isLikes(w.wid, userid, 1, null, w.isLikes)
                                  "
                                >
                                  <img
                                    :src="w.isLikes == true ? likes : noLikes"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.likesCount }}</div>
                              </div>
                              <div
                                class="commentList"
                                style="margin-right: 15px"
                              >
                                <div
                                  class="commentImg"
                                  @click="commentOther(w)"
                                >
                                  <img
                                    src="../assets/icon/comment/comment.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.commentCount }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(3) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          style="
                            width: 200px;
                            height: 140px;
                            margin: 10px 10px 10px 0;
                            border-radius: 15px;
                            box-shadow: 0 0 6px 1px #dfdada;
                          "
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                        >
                          <!-- @click="previewImg(w.works)" -->
                          <div class="workImg">
                            <img
                              :src="w.works"
                              @click="previewImg(w.works)"
                              alt
                            />
                          </div>
                          <div class="comment" style="min-width: 200px">
                            <div class="worksName">
                              <div>{{ w.sName }}</div>
                            </div>
                            <div class="commentList">
                              <div class="commentList">
                                <div
                                  class="commentImg"
                                  @click="
                                    isLikes(w.wid, userid, 1, null, w.isLikes)
                                  "
                                >
                                  <img
                                    :src="w.isLikes == true ? likes : noLikes"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.likesCount }}</div>
                              </div>
                              <div
                                class="commentList"
                                style="margin-right: 15px"
                              >
                                <div
                                  class="commentImg"
                                  @click="commentOther(w)"
                                >
                                  <img
                                    src="../assets/icon/comment/comment.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.commentCount }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(6) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          style="
                            width: 200px;
                            height: 140px;
                            margin: 10px 10px 10px 0;
                            border-radius: 15px;
                            box-shadow: 0 0 6px 1px #dfdada;
                          "
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                        >
                          <!-- @click="previewImg(w.works)" -->
                          <div class="workImg">
                            <img
                              :src="w.works"
                              @click="previewImg(w.works)"
                              alt
                            />
                          </div>
                          <div class="comment" style="min-width: 200px">
                            <div class="worksName">
                              <div>{{ w.sName }}</div>
                            </div>
                            <div class="commentList">
                              <div class="commentList">
                                <div
                                  class="commentImg"
                                  @click="
                                    isLikes(w.wid, userid, 1, null, w.isLikes)
                                  "
                                >
                                  <img
                                    :src="w.isLikes == true ? likes : noLikes"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.likesCount }}</div>
                              </div>
                              <div
                                class="commentList"
                                style="margin-right: 15px"
                              >
                                <div
                                  class="commentImg"
                                  @click="commentOther(w)"
                                >
                                  <img
                                    src="../assets/icon/comment/comment.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.commentCount }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(7) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          style="
                            width: 200px;
                            height: 140px;
                            margin: 10px 10px 10px 0;
                            border-radius: 15px;
                            box-shadow: 0 0 6px 1px #dfdada;
                          "
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                        >
                          <!-- @click="previewImg(w.works)" -->
                          <div class="workImg">
                            <img
                              :src="w.works"
                              @click="previewImg(w.works)"
                              alt
                            />
                          </div>
                          <div class="comment" style="min-width: 200px">
                            <div class="worksName">
                              <div>{{ w.sName }}</div>
                            </div>
                            <div class="commentList">
                              <div class="commentList">
                                <div
                                  class="commentImg"
                                  @click="
                                    isLikes(w.wid, userid, 1, null, w.isLikes)
                                  "
                                >
                                  <img
                                    :src="w.isLikes == true ? likes : noLikes"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.likesCount }}</div>
                              </div>
                              <div
                                class="commentList"
                                style="margin-right: 15px"
                              >
                                <div
                                  class="commentImg"
                                  @click="commentOther(w)"
                                >
                                  <img
                                    src="../assets/icon/comment/comment.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.commentCount }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(26) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          style="width: 200px; height: 140px; overflow: hidden"
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                          :class="w.type == 1 ? 'isTypeOne' : ''"
                        >
                          <div class="workImg" v-if="w.type == 0">
                            <img
                              :src="w.works"
                              @click="previewImg(w.works)"
                              alt
                            />
                          </div>
                          <div class="workImg" v-if="w.type == 1">
                            <img
                              src="../assets/icon/works/noImg.png"
                              @click="openFile(w.works)"
                              alt
                            />
                          </div>
                          <div class="worksName">
                            <div>{{ w.sName }}</div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="
                        worksStudent[jdIndex] &&
                        worksStudent[jdIndex][rwIndex] &&
                        tType &&
                        tType == 3 &&
                        tool.tool.indexOf(40) != -1
                      "
                      class="worksBox"
                    >
                      <div
                        style="padding-top: 15px; font-size: 18px"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        作业预览
                      </div>
                      <div
                        class="worksDetailBox"
                        v-if="
                          worksStudent[jdIndex][rwIndex][toolIndex].length > 0
                        "
                      >
                        <div
                          class="works"
                          style="
                            width: 200px;
                            height: 140px;
                            margin: 10px 10px 10px 0;
                            border-radius: 15px;
                            box-shadow: 0 0 6px 1px #dfdada;
                          "
                          v-for="(w, wIndex) in worksStudent[jdIndex][rwIndex][
                            toolIndex
                          ]"
                          :key="wIndex"
                        >
                          <div class="workImg">
                            <img
                              src="../assets/icon/works/noImg.png"
                              @click="
                                openPj(w.works, jdIndex, rwIndex, toolIndex)
                              "
                              alt
                            />
                          </div>
                          <div class="comment" style="min-width: 200px">
                            <div class="worksName">
                              <div>{{ w.sName }}</div>
                            </div>
                            <div class="commentList">
                              <div class="commentList">
                                <div
                                  class="commentImg"
                                  @click="
                                    isLikes(w.wid, userid, 1, null, w.isLikes)
                                  "
                                >
                                  <img
                                    :src="w.isLikes == true ? likes : noLikes"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.likesCount }}</div>
                              </div>
                              <div
                                class="commentList"
                                style="margin-right: 15px"
                              >
                                <div
                                  class="commentImg"
                                  @click="
                                    commentOther(w, jdIndex, rwIndex, toolIndex)
                                  "
                                >
                                  <img
                                    src="../assets/icon/comment/comment.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ w.commentCount }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="padding-top: 15px; font-size: 18px">
                        未提交
                      </div>
                      <div class="noWorksS">
                        <div
                          v-for="(s, sIndex) in noWorksS[toolIndex]"
                          :key="sIndex"
                          class="noWorksName"
                        >
                          {{ s.student }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="upload_toolBtn" @click="addImg($event)">
                  上传文件
                  <input
                    type="file"
                    accept="image/png, image/gif, image/jpeg"
                    style="display: none"
                    @change="beforeUpload1($event, 2, index)"
                  />
                </div>-->
                </div>
              </div>
              <div
                class="vedioBox"
                v-if="
                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                    .eList &&
                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                    .eList.length &&
                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
                    .eList.length > 0
                "
              >
                <div
                  class="queTop"
                  style="
                    font-size: 25px;
                    padding: 20px 0 20px 30px;
                    font-weight: bold;
                  "
                >
                  <!-- <div class="question" style="width: 30px">
                  <img src="../assets/icon/toolIcon.png" alt />
                </div>
                <div class="queTitle">
                  <div>工具</div>
                </div>-->
                  评一评
                </div>
                <div class="evaCss">
                  <div class="elist_input">
                    <div
                      v-for="(eItem, eIndex) in rw.eList"
                      :key="eIndex"
                      class="elist_input_box"
                    >
                      <div style="width: 95%">
                        <div
                          style="
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-items: center;
                          "
                        >
                          <div style="max-width: calc(100% - 285px)">
                            <span>{{ eItem.value }}</span>
                          </div>
                          <div
                            style="
                              padding-left: 25px;
                              display: flex;
                              flex-direction: row;
                              align-items: center;
                            "
                          >
                            <el-rate
                              v-model="eItem.score"
                              :colors="colors"
                              disabled
                            ></el-rate>
                          </div>
                        </div>
                        <div
                          class="elist_inptu_text"
                          style="padding-left: 10px"
                        >
                          <span v-if="eItem.detail != ''">{{
                            eItem.detail
                          }}</span>
                          <span v-else style="color: #b2b1b3; font-size: 14px"
                            >暂无描述...</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    v-if="evalua"
                    style="
                      border: 1px solid #e5e5e5;
                      width: 650px;
                      margin-top: 20px;
                      box-shadow: 3px 1px 15px 3px #e0e0e0;
                    "
                  >
                    <div class="e_add_top">
                      <div class="e_add_title">
                        <span>目标管理名称</span>
                        <span>{{ eTitle }}</span>
                        <img
                          src="../assets/line.png"
                          class="cru_line"
                          style="
                            width: 125px;
                            height: 20px;
                            bottom: -10px;
                            left: 120px;
                          "
                        />
                        <!-- <el-input
                        v-model="eTitle"
                        placeholder="请输入名称"
                        @change="setMindData"
                      ></el-input>-->
                      </div>
                    </div>
                    <div class="e_add_content">
                      <div class="e_add_list_pbox">
                        <div class="e_add_list_pbox_title">
                          <span class="type_title">切换模式</span>
                          <div class="type_content">
                            <span
                              :class="{ active: typeMode == 1 }"
                              @click="typeMode = 1"
                              >目标树</span
                            >
                            <span
                              :class="{ active: typeMode == 2 }"
                              @click="typeMode = 2"
                              >目标罗盘</span
                            >
                            <span
                              :class="{ active: typeMode == 3 }"
                              @click="typeMode = 3"
                              >目标看板</span
                            >
                          </div>
                        </div>
                        <div class="e_add_list_pbox_content">
                          <Mind
                            :showBar="false"
                            :mindData="data"
                            style="width: 100%"
                            v-show="typeMode == 1"
                          ></Mind>
                          <Sunburst
                            :Josn="eJson"
                            :num="eJSONNum"
                            style="width: 100%"
                            v-if="typeMode == 2"
                          ></Sunburst>
                          <SeeBoard
                            :Josn="eJson"
                            :num="eJSONNum"
                            :ename="eTitle"
                            style="width: 100%"
                            v-if="typeMode == 3"
                          ></SeeBoard>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div
              class="project_box"
              style="margin-top: 15px; padding-bottom: 30px"
            >
              <div
                style="
                  display: flex;
                  flex-wrap: nowrap;
                  flex-direction: column;
                  position: relative;
                "
              >
                <div class="queTop">
                  <div class="question">
                    <img src="../assets/icon/homeWork.png" alt="" />
                  </div>
                  <div class="queTitle">
                    <div>作业提交<span>(提交图文视频等)</span></div>
                    <div>：任务：{{ task.task }}</div>
                  </div>
                </div>
                <div class="ediBottom">
                  <div
                    class="addEditor"
                    style="margin-top: 23px"
                    @click="openAddWork"
                    v-if="!isNoHomeWork"
                  >
                    选择文件
                  </div>
                  <div
                    class="addEditor"
                    style="margin-top: 23px"
                    @click="openAddWork"
                    v-else
                  >
                    已提交
                  </div>
                </div>
              </div>
            </div>-->
            </div>
          </div>
          <el-dialog
            title="提交实践作业"
            :visible.sync="dialogVisible"
            :append-to-body="true"
            width="500px"
            :before-close="handleClose"
            class="dialog_change"
          >
            <div class="marginT">
              <div>上传文件</div>
              <div
                class="chapter_add"
                @click="addImg($event)"
                v-if="studyJuri[0].cover.length == 0"
              >
                <div class="up_photo">
                  <img src="../assets/icon/uploadImg.png" alt />
                </div>
                <input
                  type="file"
                  accept="video/mp4, video/quicktime, video/x-msvideo,application/pdf, application/.ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, image/*"
                  capture="camera"
                  style="display: none"
                  @change="beforeUpload1($event, 1)"
                />
                <!-- <input
                  type="file"
                  accept="image/*"
                  style="display: none"
                  @change="beforeUpload1($event, 1)"
                /> -->
              </div>
              <div
                class="chapter_add"
                style="
                  display: flex;
                  width: 100%;
                  flex-direction: row;
                  flex-wrap: wrap;
                  justify-content: flex-start;
                  padding: 15px 0;
                "
                v-if="studyJuri[0].cover.length > 0"
              >
                <div class="upCover">
                  <img
                    :src="studyJuri[0].cover[0].url"
                    alt
                    v-if="fileType == 0"
                  />
                  <img :src="word" alt v-else-if="fileType == 1" />
                  <img :src="word" alt v-else />
                  <span class="picName">{{ studyJuri[0].cover[0].name }}</span>

                  <div class="deleteWord" @click="clean(1)">
                    <img src="../assets/icon/deleteWorks.png" alt />
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="first">
            <div>作业名称:</div>
            <div>{{ chapInfoList[courseType].dyName }}</div>
          </div>
          <div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
          <el-input
            type="textarea"
            resize="none"
            rows="7"
            placeholder="输入文字描述..."
            v-model="studyJuri[0].content"
          ></el-input>
          <div class="marginT">
            <div>上传图片</div>
            <div class="chapter_add" @click="addImg($event)">
              <div class="up_photo">
                <img src="../assets/photo.png" alt />
              </div>
              <input
                type="file"
                accept="image/png, image/gif, image/jpeg"
                style="display: none"
                @change="beforeUpload1($event, 1)"
              />
            </div>
            <div
              class="chapter_add"
              style="
                display: flex;
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
              "
              v-if="studyJuri[0].cover.length > 0"
            >
              <div
                v-for="(c, cIndex) in studyJuri[0].cover"
                :key="cIndex"
                class="upCover"
              >
                <img :src="c.url != null && c.url != '' ? c.url : mr" alt />
                <span class="picName">{{ c.name }}</span>

                <div class="deleteWord" @click="clean(1)">
                  <img src="../assets/icon/delete.png" alt />
                </div>
              </div>
            </div>
          </div>
          <div class="marginT">
            <div>上传视频</div>
            <div class="chapter_add" @click="addImg($event)">
              <div class="up_photo">
                <img src="../assets/vidio.png" alt />
              </div>
              <input
                type="file"
                accept="video/mp4, video/quicktime, video/x-msvideo"
                style="display: none"
                @change="beforeUpload2($event, 2)"
              />
            </div>
            <div
              class="chapter_add"
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
              "
              v-if="studyJuri[0].upVedio.length > 0"
            >
              <div
                style="
                  width: 100%;
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  align-content: flex-start;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <div
                  class="uploadVedio isAddThings"
                  v-for="(v, vIndex) in studyJuri[0].upVedio"
                  :key="vIndex"
                >
                  <img src="../assets/uploadMp4.png" alt />
                  <span>{{ v.name }}</span>
                  <div class="deleteWord" @click="clean(2)">
                    <img src="../assets/icon/delete.png" alt />
                  </div>
                </div>
              </div>
            </div>
          </div>-->
            <div class="upload_send" @click="addCourseWorks(taskCount)">
              提交
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
    <div v-if="proVisible" class="mask">
      <div class="progressBox">
        <div class="lbox">
          <img src="../assets/loading.gif" />上传中，请稍后
        </div>
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="progress"
          style="width: 80%"
        ></el-progress>
      </div>
    </div>
    <el-dialog :visible.sync="pictureDialog" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-dialog
      :title="noteName != '' ? noteName : '查看选择题'"
      :visible.sync="dialogVisible5"
      :append-to-body="true"
      width="1000px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <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>
            </div>
            <div class="a_add_body" v-if="!isAnswer">
              <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"
                    class="redioStyle"
                    >{{ item2 }}</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
            <div class="a_add_body" v-else>
              <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
                    class="redioStyle"
                    >{{ item2 }}</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false" v-show="noteName == ''"
          >取 消</el-button
        >
        <el-button type="primary" @click="addStudentAsk" v-show="noteName == ''"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="查看富文本"
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy textCss"
    >
      <el-form style="font-size: 20px">
        <el-form-item label="文本标题" class="textTitle">
          <div style="font-size: 20px">{{ text.name }}</div>
        </el-form-item>
        <div>富文本内容</div>
        <div
          v-html="text.url"
          style="font-size: 18px; padding: 40px 0 0 0"
        ></div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible1 = 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="dialogVisible6"
      width="50%"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <iframe
        :src="pptImgUrl1"
        frameborder="0"
        width="100%"
        height="600"
      ></iframe>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible4"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="dialog_diy notice"
    >
      <div>此功能暂未开放！</div>
      <el-button type="primary" @click="dialogVisible4 = false">确定</el-button>
    </el-dialog>
    <el-dialog
      title="问答"
      :visible.sync="answerDialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div
          style="
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            position: relative;
          "
        >
          <div class="queTop" style="padding: 20px 0 20px 0">
            <div class="question">
              <img src="../assets/icon/question.png" alt />
            </div>
            <div class="queTitle">
              <div style="width: 90px; min-width: 90px">提问：</div>
              <div>{{ answerQ }}</div>
            </div>
          </div>
          <div class="ediBottom">
            <textarea
              rows="6"
              class="binfo_input"
              cols
              style="width: 95%; height: 120px"
              v-model="questionAnswer"
            ></textarea>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="answerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addQuestion">提 交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="倒计时"
      :visible.sync="timeDialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <Time v-if="timeDialogVisible"></Time>
      </div>
      <div slot="footer">
        <el-button @click="timeDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="权限设置"
      :visible.sync="juriVisible"
      :append-to-body="true"
      width="400px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div>
          <div>
            <el-switch
              v-model="sIsOpen"
              active-text="学生是否能查看所有作业"
              class="switchCss"
              @change="updateSLook"
            ></el-switch>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button
          style="background: #409efe; color: #fff"
          @click="juriVisible = false"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="查看视频"
      :visible.sync="videoVisible"
      :append-to-body="true"
      width="1200px"
      :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"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="查看详情"
      :visible.sync="commentDialogVisible"
      :append-to-body="true"
      width="600px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="commentTop">
        <div class="studentDetail">
          <div class="tx"><img src="../assets/avatar.png" alt="" /></div>
          <div class="nameAndTime">
            <div style="margin-bottom: 5px">{{ commentDetail.sName }}</div>
            <div>{{ commentDetail.time }}</div>
          </div>
        </div>
        <div
          class="worksAnswer"
          v-if="commentDetail.works && commentDetail.type == 2"
        >
          {{ JSON.parse(commentDetail.works)[0].answer }}
        </div>
        <div
          class="worksAnswer"
          v-if="commentDetail.works && commentDetail.type == 1"
        >
          <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>
        </div>
        <div
          class="worksAnswer"
          v-if="commentDetail.works && commentDetail.type == 0"
        >
          <img
            :src="commentDetail.works"
            alt=""
            @click="previewImg(commentDetail.works)"
          />
        </div>
        <div
          class="worksAnswer"
          v-if="commentDetail.works && commentDetail.type == 3"
        >
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="videoDetail"
            @play="onPlayerPlay($event)"
            style="width: 90%; height: 100%; margin: 0 0 0 30px"
          ></video-player>
        </div>
        <div
          class="worksAnswer"
          v-if="commentDetail.works && commentDetail.type == 4"
        >
          <div class="evalCss">
            <div class="nav">请选择星星进行评分</div>
            <div class="middleBox" v-if="eScore.eStar">
              <div class="pfBox" v-for="(e, eIndex) in rateJson" :key="eIndex">
                <div class="nameAndrate">
                  <div>{{ e.value }}</div>
                  <el-rate v-model="eScore.eStar[eIndex]" disabled></el-rate>
                </div>
                <div v-if="e.detail">{{ e.detail }}</div>
              </div>
              <div class="bz">
                <textarea
                  disabled
                  rows="4"
                  class="pj"
                  style="
                    padding: 10px 5px;
                    width: 70%;
                    background: #f7f6f9;
                    font-size: 14px;
                    text-indent: 10px;
                  "
                  cols
                  v-model="eScore.eBzText"
                  placeholder="请输入评价内容..."
                ></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="comment">
          <div class="commentList">
            <div class="commentImg">
              <img
              @click="
                  isLikes(
                    commentDetail.wid,
                    commentDetail.userid,
                    1,
                    null,
                    commentDetail.isLikes
                  )
                "
                :src="commentDetail.isLikes == true ? likes : noLikes"
                alt=""
              />
            </div>
            <div>{{ commentDetail.likesCount }}</div>
          </div>
          <div class="commentList">
            <div class="commentImg">
              <img src="../assets/icon/comment/comment.png" alt="" />
            </div>
            <div>{{ commentDetail.commentCount }}</div>
          </div>
        </div>
      </div>
      <div class="commentBox">
        <div class="pl">评论：</div>
        <div style="height: 200px; overflow: auto">
          <div v-if="commentDetail.commentJson" style="padding: 10px 0 0 0">
            <div
              class="studentDetail"
              style="padding-top: 10px"
              v-for="(co, coIndex) in commentDetail.commentJson"
              :key="coIndex"
            >
              <div class="tx" style="width: 40px">
                <img src="../assets/avatar.png" alt="" />
              </div>
              <div class="plPerson">
                <div class="plName">
                  <div>{{ co.commentPeople }}</div>
                  <div style="margin-left: 5px">
                    {{ co.commentTime }}
                  </div>
                </div>
                <div class="plContent">{{ co.commentText }}</div>
              </div>
            </div>
          </div>
          <div v-else style="padding: 10px 0 0 0">暂无评论</div>
        </div>
      </div>
      <div>
        <div
          style="
            color: #556db4;
            font-size: 14px;
            font-weight: bold;
            padding-bottom: 10px;
          "
        >
          评价
        </div>
        <div>
          <textarea
            rows="3"
            class="pj"
            style="padding: 10px 5px"
            cols
            v-model="commentText"
            placeholder="请输入对该学生的评价"
          ></textarea>
        </div>
      </div>

      <div slot="footer">
        <el-button @click="commentDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addComment(commentDetail.wid, userid, 2)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="查看文档"
      :visible.sync="fullDialogVisible"
      :append-to-body="true"
      width="100%"
      :before-close="handleClose"
      class="dialog_diy full_diy"
    >
      <div style="height: 100%">
        <iframe
          v-if="fulltype == 2"
          style="width: 100%; height: 100%; border: none"
          :src="fullUrl"
        ></iframe>
        <pdf
          v-else-if="fulltype == 3"
          :pdfUrl="fullUrl"
          style="width: 100%; height: 100%; overflow: auto"
        ></pdf>
        <div
          class="wheel"
          v-if="fulltype == 1"
          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; max-height: 100px; overflow: auto">
                {{ 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="studentEvalDialogVisible"
      :append-to-body="true"
      width="800px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="evalCss">
        <div class="nav">请选择星星进行评分</div>
        <div class="middleBox">
          <div class="pfBox" v-for="(e, eIndex) in rateJson" :key="eIndex">
            <div class="nameAndrate">
              <div>{{ e.value }}</div>
              <el-rate
                v-model="eScore.eStar[eIndex]"
                :disabled="isStar"
              ></el-rate>
            </div>
            <div v-if="e.detail">{{ e.detail }}</div>
          </div>
          <div class="bz">
            <textarea
              :disabled="isStar == true"
              rows="4"
              class="pj"
              style="
                padding: 10px 5px;
                width: 70%;
                background: #f7f6f9;
                font-size: 14px;
                text-indent: 10px;
              "
              cols
              v-model="eScore.eBzText"
              placeholder="请输入评价内容..."
            ></textarea>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="studentEvalDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBzWorks">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "../common/aws-sdk-2.235.1.min.js";
import pdf from "./components/pdf3";
import AskStatic from "./components/askStatic";
import EditorBar from "./tools/wangEnduit.vue";
import Time from "./tools/time.vue";
import Mind from "./tools/jsmind.vue";
import Sunburst from "./tools/sunburst";
import SeeBoard from "./tools/seeBoard";
export default {
  components: { EditorBar, Time, pdf, AskStatic, Mind, Sunburst, SeeBoard },
  data() {
    return {
      dialogVisible: false,
      commentDialogVisible: false,
      isStar: false,
      videoVisible: false,
      studentEvalDialogVisible: false,
      videoDetail: {},
      commentDetail: [],
      rateJson: [],
      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,
      screenType: this.$route.query.screenType,
      juriVisible: false,
      pptImgUrl: "",
      commentText: "",
      pptImgUrl1: [],
      full: false,
      type: 1,
      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/uploadMp4.png"),
      noLikes: require("../assets/icon/comment/noLikes.png"),
      likes: require("../assets/icon/comment/likes.png"),
      courseDetail: {},
      chapInfo: [],
      chapInfoList: [],
      taskCount: 0,
      imgList: [],
      noImgList: [],
      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: "", //问答标题
      wbCount: 0,
      wordCount: 0,
      mindCount: 0,
      askCount: 0,
      noteCount: 0,
      mindNetWorkCount: 0,
      libraryCount: 0,
      workCount: 0,
      timeCount: 0,
      answerCount: 0,
      trainCount: 0,
      evalCount: 0,
      dialogImageUrl: "",
      pictureDialog: false,
      toolTypeList: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible6: false,
      dialogVisible4: false,
      isNoHomeWork: false,
      dialogVisible5: false,
      answerDialogVisible: false,
      timeDialogVisible: false,
      radio: [],
      isClickNavOne: [],
      isAsk: false,
      askJson: {
        askCount: 1,
        askTitle: "",
        askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
      },
      checkJson: [],
      askList: [],
      sIsOpen: false,
      answerList: [],
      navList: [],
      worksStudent: [],
      workStudent: [],
      noWorksS: [],
      isWorksS: [],
      noWorksStudent: [],
      toolindex: 0,
      workTypeA: false,
      workTypeB: false,
      workTypeC: false,
      isAnswer: false,
      timer: null,
      showType: [],
      fileType: 0,
      showPDF: false,
      noteName: "",
      evaJuri: [],
      evalua: "",
      bzText: "",
      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: "",
    };
  },
  methods: {
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    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) {
      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;
      el.getElementsByTagName("input")[0].click();
    },

    addCourseWorks(i) {
      var typesql;
      if (this.fileType === 0) {
        typesql = 1;
      } else if (this.fileType === 1) {
        typesql = 4;
      } else {
        typesql = 5;
      }
      if (this.workTypeA == true) {
        this.$confirm(
          "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            let params = [
              {
                uid: this.userid,
                cid: this.id,
                stage: this.courseType,
                task: i,
                tool: this.toolindex,
                content: this.studyJuri[0].cover[0].url,
                type: typesql,
              },
            ];
            this.ajax
              .post(this.$store.state.api + "addCourseWorks", params)
              .then((res) => {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.studyJuri[0].cover = [];
                this.dialogVisible = false;
                this.getCourseDetail();
              })
              .catch((err) => {
                this.$message.error("提交失败");
                console.error(err);
              });
          })
          .catch(() => {});
      } else {
        let params = [
          {
            uid: this.userid,
            cid: this.id,
            stage: this.courseType,
            task: i,
            tool: this.toolindex,
            content: this.studyJuri[0].cover[0].url,
            type: typesql,
          },
        ];
        this.ajax
          .post(this.$store.state.api + "addCourseWorks", params)
          .then((res) => {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.studyJuri[0].cover = [];
            this.dialogVisible = false;
            this.getCourseDetail();
          })
          .catch((err) => {
            this.$message.error("提交失败");
            console.error(err);
          });
      }
    },
    selectWorksStudent() {
      let params = {
        oid: this.oid,
        cid: this.classId,
      };
      this.ajax
        .get(this.$store.state.api + "selectWorksStudent", params)
        .then((res) => {
          var a = res.data[0];
          for (var i = 0; i < this.isWorksS.length; i++) {
            this.noWorksS[i] = [];
            var studentK = [];
            if (this.isWorksS[i].length > 0) {
              for (var z = 0; z < this.isWorksS[i].length; z++) {
                studentK.push(this.isWorksS[i][z].uid);
              }
              studentK = studentK.join(",");
              for (var j = 0; j < a.length; j++) {
                if (studentK.indexOf(a[j].userid) == -1) {
                  this.noWorksS[i].push({ student: a[j].name });
                }
              }
            } else {
              for (var k = 0; k < a.length; k++) {
                this.noWorksS[i].push({ student: a[k].name });
              }
            }
          }
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectStudent() {
      let params = {
        uid: this.userid,
        cid: this.id,
        s: this.courseType,
        t: this.taskCount,
      };
      this.ajax
        .get(this.$store.state.api + "selectStudentWorks", params)
        .then((res) => {
          var a =
            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
              this.taskCount
            ].toolChoose;
          var b = res.data[0];
          var c = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];

          for (var i = 0; i < a.length; i++) {
            this.workStudent[i] = [];
            for (var j = 0; j < b.length; j++) {
              if (i == b[j].tool) {
                if (b[j].type == 1 || b[j].type == 4) {
                  if (
                    c.indexOf(
                      b[j].content
                        .split(".")
                        [b[j].content.split(".").length - 1].toLocaleUpperCase()
                    ) != -1
                  ) {
                    this.workStudent[i].push({
                      works: b[j].content,
                      sName: b[j].name,
                      type: 1,
                      time: b[j].time,
                    });
                  } else {
                    this.workStudent[i].push({
                      works: b[j].content,
                      sName: b[j].name,
                      type: 0,
                      time: b[j].time,
                    });
                  }
                } else {
                  this.workStudent[i].push({
                    works: b[j].content,
                    sName: b[j].name,
                    type: 2,
                    time: b[j].time,
                  });
                }
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    openVideo(w) {
      this.videoDetail = {};
      this.playerOptions1.sources[0].src = w;
      this.videoDetail = this.playerOptions1;
      this.videoVisible = true;
    },
    isLikes(wid, uid, t, c, isLikes) {
      if (isLikes == false) {
        let params = [
          {
            wid: wid,
            lid: uid,
            t: t,
            c: c,
          },
        ];
        this.ajax
          .post(this.$store.state.api + "insertComment", params)
          .then((res) => {
            this.$message({
              message: "点赞成功",
              type: "success",
            });
            this.selectSWorks();
          })
          .catch((err) => {
            this.$message.error("点赞失败");
            console.error(err);
          });
      } else {
        let params = {
          wid: wid,
          lid: uid,
          type: t,
        };
        this.ajax
          .get(this.$store.state.api + "deleteComment", params)
          .then((res) => {
            this.$message({
              message: "取消点赞成功",
              type: "success",
            });
            this.selectSWorks();
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    commentOther(w, jdIndex, rwIndex, toolIndex) {
      this.commentDetail = [];
      this.commentDialogVisible = true;
      if (w.works && w.type == 1) {
        this.commentDetail = w;
        this.pptImgUrl = "";
        var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
        if (
          a.indexOf(
            w.works
              .split(".")
              [w.works.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl =
            "https://view.officeapps.live.com/op/view.aspx?src=" + w.works;
          this.showPDF = false;
        } else if (
          w.works
            .split(".")
            [w.works.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl = w.works;
          this.showPDF = true;
        }
      } else if (w.works && w.type == 3 && this.commentDialogVisible == false) {
        this.videoDetail = {};
        this.playerOptions1.sources[0].src = w.works;
        this.videoDetail = this.playerOptions1;
        this.videoVisible = true;
      } else if (w.works && w.type == 4) {
        this.commentDetail = w;
        this.eScore = JSON.parse(w.works);
        this.rateJson =
          this.chapInfoList[jdIndex].chapterInfo[0].taskJson[
            rwIndex
          ].toolChoose[toolIndex].rateJson;
      } else {
        this.commentDetail = w;
      }
    },
    addComment(wid, uid, t) {
      let params = [
        {
          wid: wid,
          lid: uid,
          t: t,
          c: this.commentText,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "insertComment", params)
        .then((res) => {
          this.$message({
            message: "评论成功",
            type: "success",
          });
          this.commentText = "";
          this.selectSWorks();
        })
        .catch((err) => {
          this.$message.error("评论失败");
          console.error(err);
        });
    },
    selectSWorks() {
      let params = {
        cid: this.id,
        // s: this.courseType,
        // t: this.taskCount,
      };
      this.ajax
        .get(this.$store.state.api + "selectSWorks2", params)
        .then((res) => {
          // var a =
          //   this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
          //     this.taskCount
          //   ].toolChoose;
          var b = res.data[0];
          var c = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
          var y = [
            "AVI",
            "NAVI",
            "MPEG",
            "ASF",
            "MOV",
            "WMV",
            "3GP",
            "RM",
            "RMVB",
            "FLV",
            "F4V",
            "H.264",
            "H.265",
            "REAL VIDEO",
            "MKV",
            "WebM",
            "HDDVD",
            "MP4",
            "MPG",
            "M4V",
            "MGV",
            "OGV",
            "QTM",
            "STR",
            "AMC",
            "DVX",
            "EVO",
            "DAT",
            "OGG",
            "OGM",
          ];
          var p = res.data[1];
          var t = res.data[2];

          var a = this.chapInfoList;
          for (var q = 0; q < a.length; q++) {
            this.worksStudent[q] = [];
            this.isWorksS[q] = [];
            this.checkJson[q] = [];
            var d = a[q].chapterInfo[0].taskJson;
            for (var w = 0; w < d.length; w++) {
              this.worksStudent[q][w] = [];
              this.isWorksS[q][w] = [];
              this.checkJson[q][w] = [];
              var e = d[w].toolChoose;
              for (var i = 0; i < e.length; i++) {
                this.worksStudent[q][w][i] = [];
                this.isWorksS[q][w][i] = [];
                this.checkJson[q][w][i] = [];
                for (var j = 0; j < b.length; j++) {
                  var likesCount = 0;
                  var commentCount = 0;
                  var isLikes = false;
                  var commentJson = [];
                  var data = b[j];
                  if (i == b[j].tool) {
                    if (data.type == 2) {
                      var checkL = JSON.parse(data.content)[0].anwer.split(",");
                      for (var z = 0; z < checkL.length; z++) {
                        if (!this.checkJson[q][w][i][z]) {
                          this.checkJson[q][w][i].push({ checkCount: [] });
                        }
                        if (!this.checkJson[q][w][i][z].checkCount.length) {
                          this.checkJson[q][w][i][z].checkCount = [];
                          let _askItemCount = JSON.parse(data.content)[0]
                            .askJson.askJson[z].askItem;
                          for (var aic = 0; aic < _askItemCount; aic++) {
                            this.checkJson[q][w][i][z].checkCount.push(0);
                          }
                        }
                        this.checkJson[q][w][i][z].checkCount[
                          parseInt(checkL[z])
                        ]
                          ? this.checkJson[q][w][i][z].checkCount[
                              parseInt(checkL[z])
                            ]++
                          : (this.checkJson[q][w][i][z].checkCount[
                              parseInt(checkL[z])
                            ] = 1);
                      }
                    }

                    if (b[j].stage == q && b[j].task == w) {
                      // 1、电子白板，3、思维导图，6协同文档，7思维网格 16、作业提交
                      let _toolsAarry1 = [1, 3, 6, 7, 16, 40];
                      let _toolsAarry2 = [4];
                      let _toolsAarry3 = [15];
                      for (var k = 0; k < p.length; k++) {
                        //点赞
                        if (p[k].workId == b[j].id) {
                          likesCount++;

                          if (p[k].likesId == this.userid) {
                            isLikes = true;
                          }
                        }
                      }
                      for (var l = 0; l < t.length; l++) {
                        //评论
                        if (t[l].workId == b[j].id) {
                          commentCount++;
                          if (t[l].comment != "") {
                            commentJson.push({
                              commentText: t[l].comment,
                              commentTime: t[l].commentTime,
                              commentPeople: t[l].commentPeople,
                            });
                          }
                        }
                      }
                      if (
                        (b[j].type == 1 ||
                          b[j].type == 4 ||
                          b[j].type == 5 ||
                          b[j].type == 6) &&
                        _toolsAarry1.indexOf(e[i].tool[0]) != -1
                      ) {
                        if (
                          c.indexOf(
                            b[j].content
                              .split(".")
                              [
                                b[j].content.split(".").length - 1
                              ].toLocaleUpperCase()
                          ) != -1
                        ) {
                          this.worksStudent[q][w][i].push({
                            userid: b[j].userid,
                            wid: b[j].id,
                            works: b[j].content,
                            sName: b[j].name,
                            type: 1,
                            time: b[j].time,
                            likesCount: likesCount,
                            commentCount: commentCount,
                            isLikes: isLikes,
                            commentJson: commentJson,
                          });
                        } else if (
                          y.indexOf(
                            b[j].content
                              .split(".")
                              [
                                b[j].content.split(".").length - 1
                              ].toLocaleUpperCase()
                          ) != -1
                        ) {
                          this.worksStudent[q][w][i].push({
                            userid: b[j].userid,
                            wid: b[j].id,
                            works: b[j].content,
                            sName: b[j].name,
                            type: 3,
                            time: b[j].time,
                            likesCount: likesCount,
                            commentCount: commentCount,
                            isLikes: isLikes,
                            commentJson: commentJson,
                          });
                        } else if (b[j].type == 6) {
                          this.worksStudent[q][w][i].push({
                            userid: b[j].userid,
                            wid: b[j].id,
                            works: b[j].content,
                            sName: b[j].name,
                            type: 4,
                            time: b[j].time,
                            likesCount: likesCount,
                            commentCount: commentCount,
                            isLikes: isLikes,
                            commentJson: commentJson,
                          });
                        } else {
                          this.worksStudent[q][w][i].push({
                            userid: b[j].userid,
                            wid: b[j].id,
                            works: b[j].content,
                            sName: b[j].name,
                            type: 0,
                            time: b[j].time,
                            likesCount: likesCount,
                            commentCount: commentCount,
                            isLikes: isLikes,
                            commentJson: commentJson,
                          });
                        }
                      } else {
                        if (
                          b[j].type == 2 &&
                          _toolsAarry2.indexOf(e[i].tool[0]) != -1
                        ) {
                          this.worksStudent[q][w][i].push({
                            userid: b[j].userid,
                            wid: b[j].id,
                            works: b[j].content,
                            sName: b[j].name,
                            type: 2,
                            time: b[j].time,
                            likesCount: likesCount,
                            commentCount: commentCount,
                            isLikes: isLikes,
                            commentJson: commentJson,
                          });
                        }

                        if (
                          b[j].type == 3 &&
                          _toolsAarry3.indexOf(e[i].tool[0]) != -1
                        ) {
                          this.worksStudent[q][w][i].push({
                            userid: b[j].userid,
                            wid: b[j].id,
                            works: b[j].content,
                            sName: b[j].name,
                            type: 2,
                            time: b[j].time,
                            likesCount: likesCount,
                            commentCount: commentCount,
                            isLikes: isLikes,
                            commentJson: commentJson,
                          });
                        }
                      }
                    }
                    this.isWorksS[q][w][i].push({
                      uid: b[j].userid,
                      sName: b[j].name,
                    });
                  }
                }
              }
            }
          }
          for (var q = 0; q < a.length; q++) {
            var d = a[q].chapterInfo[0].taskJson;
            for (var w = 0; w < d.length; w++) {
              var e = d[w].toolChoose;
              for (var i = 0; i < e.length; i++) {
                for (var j = 0; j < b.length; j++) {
                  var data = b[j];
                  if (i == b[j].tool) {
                    if (data.type == 2) {
                      for (var z = 0; z < this.checkJson[q][w][i].length; z++) {
                        this.checkJson[q][w][i][z].checkPerent = [];

                        for (
                          var k = 0;
                          k < this.checkJson[q][w][i][z].checkCount.length;
                          k++
                        ) {
                          this.checkJson[q][w][i][z].checkPerent.push(
                            Math.round(
                              (this.checkJson[q][w][i][z].checkCount[k] /
                                parseInt(this.worksStudent[q][w][i].length)) *
                                100
                            )
                          );
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          this.selectWorksStudent();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    beforeUpload1(event, type, i) {
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;
      var b = [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
      ];
      if (
        b.indexOf(
          file.name
            .split(".")
            [file.name.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        if (file.size / 1024 / 1024 > 10) {
          _this.$message({
            message: "上传文件大于10兆,请重新选择文件！",
            type: "success",
          });
          return;
        }
      } else {
        if (file.size / 1024 / 1024 > 5) {
          _this.$message({
            message: "上传文件大于5兆,请重新选择文件！",
            type: "success",
          });
          return;
        }
      }
      _this.progress = 0;
      _this.proVisible = true;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 1024 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            _this.progress = parseInt((evt.loaded * 80) / evt.total);
          })
          .send(function (err, data) {
            _this.progress = 100;
            setTimeout(() => {
              _this.proVisible = false;
            }, 1000);
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              if (type == 1) {
                _this.studyJuri[0].cover.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                var b = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
                var c = [
                  "AVI",
                  "NAVI",
                  "MPEG",
                  "ASF",
                  "MOV",
                  "WMV",
                  "3GP",
                  "RM",
                  "RMVB",
                  "FLV",
                  "F4V",
                  "H.264",
                  "H.265",
                  "REAL VIDEO",
                  "MKV",
                  "WebM",
                  "HDDVD",
                  "MP4",
                  "MPG",
                  "M4V",
                  "MGV",
                  "OGV",
                  "QTM",
                  "STR",
                  "AMC",
                  "DVX",
                  "EVO",
                  "DAT",
                  "OGG",
                  "OGM",
                ];
                if (
                  c.indexOf(
                    _this.studyJuri[0].cover[0].url
                      .split(".")
                      [
                        _this.studyJuri[0].cover[0].url.split(".").length - 1
                      ].toLocaleUpperCase()
                  ) != -1
                ) {
                  _this.fileType = 2;
                } else if (
                  b.indexOf(
                    _this.studyJuri[0].cover[0].url
                      .split(".")
                      [
                        _this.studyJuri[0].cover[0].url.split(".").length - 1
                      ].toLocaleUpperCase()
                  ) != -1
                ) {
                  _this.fileType = 1;
                } else {
                  _this.fileType = 0;
                }
                _this.imgChange(null, null, type);
              } else if (type == 2) {
                _this.upToolImg = data.Location;
                _this.imgChange(null, null, type);
                _this.addCourseWorks(i);
              }
              _this.imgChange(null, null, type);
              console.log(data.Location);
            }
          });
      }
    },
    beforeUpload2(event, type) {
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;
      _this.progress = 0;
      _this.proVisible = true;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
            _this.progress = parseInt((evt.loaded * 80) / evt.total);
          })
          .send(function (err, data) {
            _this.progress = 100;
            setTimeout(() => {
              _this.proVisible = false;
            }, 1000);
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              if (type == 2) {
                _this.studyJuri[0].upVedio.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange(null, null, type);
              } else if (type == 3) {
                _this.studyJuri[0].upFile.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange(null, null, type);
              }
              console.log(data.Location);
            }
          });
      }
    },
    allScrell() {
      window.parent.postMessage({ allScreen: this.screenType }, "*");
    },
    nextOrpreSteps(t) {
      // this.showType = 0;
      var b = this.chapInfoList.length - 1;
      if (t == 0) {
        if (this.courseType == 0) {
          if (this.taskCount == 0) {
            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 {
        var b = this.chapInfoList.length - 1;
        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 {
            this.taskCount++;
          }
        } else {
          if (
            this.taskCount ==
            this.chapInfoList[this.courseType].chapterInfo[0].taskJson.length -
              1
          ) {
            this.navList[this.courseType].isOpen = false;
            this.courseType++;
            this.taskCount = 0;
            this.navList[this.courseType].isOpen = true;
          } else {
            this.taskCount++;
          }
        }
        // if (
        //   this.taskCount ==
        //   this.chapInfo.chapterInfo[0].taskJson.length - 1
        // ) {
        //   this.taskCount = this.chapInfo.chapterInfo[0].taskJson.length - 1;
        // } else {
        //   this.taskCount++;
        // }
      }
      this.navId = this.navList[this.courseType].task[this.taskCount].id;
      if (this.vedio[this.taskCount].length > 0) {
        var a =
          document.getElementsByClassName("box_course")[this.taskCount]
            .offsetHeight;
        document.getElementsByClassName("vedioList")[
          this.taskCount
        ].style.height = a + "px";
        document.getElementsByClassName("navBox")[this.taskCount].style.height =
          a - 40 + "px";
      }

      this.isNoHomeWork = false;
      (this.studyJuri = [
        {
          content: "",
          cover: [],
          upVedio: [],
          upFile: [],
        },
      ]),
        (this.radio = []);
      this.getHomeWork();
      this.getCourseDetail();
    },
    openTask(s, n, i) {
      var a = s + "-" + n;
      var b = document.getElementById(a);
      document.documentElement.scrollTop = b.offsetTop;
      this.courseType = s;
      this.navId = i;
      this.taskCount = n;
      this.showType = [];
      this.isNoHomeWork = false;
      (this.studyJuri = [
        {
          content: "",
          cover: [],
          upVedio: [],
          upFile: [],
        },
      ]),
        (this.radio = []);
      // setTimeout(() => {
      //   let a = document.getElementById(i);
      //   if (a.offsetTop - 110 == 0) {
      //     window.scrollTo(0, 0);
      //   } else {
      //     window.scrollTo(0, a.offsetTop);
      //   }
      // }, 0);

      this.getHomeWork();
      this.getCourseDetail();
      this.$forceUpdate();
    },

    get(i) {
      this.navList[i].isOpen = !this.navList[i].isOpen;
    },
    addQuestion() {
      this.answerList.push({
        answerTitle: this.answerQ,
        answer: this.questionAnswer,
      });
      let params = [
        {
          uid: this.userid,
          cid: this.id,
          stage: this.courseType,
          task: this.taskCount,
          tool: this.toolindex,
          content: JSON.stringify(this.answerList),
          type: 3,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addCourseWorks", params)
        .then((res) => {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.answerList = [];
          this.answerDialogVisible = false;
        })
        .catch((err) => {
          this.$message.error("提交失败");
          console.error(err);
        });
    },
    getCourseDetail() {
      const loading = this.$loading.service({
        background: "rgba(255, 255, 255, 0.7)",
        target: document.querySelector(".student_table"),
      });
      // this.navList[0].isOpen = false;
      // this.navList[this.courseType].isOpen = true;
      // this.courseType = this.courseTypeLine;
      // this.navId = this.navList[this.courseType].task[this.taskCount].id;
      let params = {
        courseId: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseDetail", params)
        .then((res) => {
          loading.close();
          // var a = JSON.parse(res.data[0][0].chapters)[this.courseType]
          //   .chapterInfo[0].taskJson;
          var a = JSON.parse(res.data[0][0].chapters);
          var b = [
            "AVI",
            "NAVI",
            "MPEG",
            "ASF",
            "MOV",
            "WMV",
            "3GP",
            "RM",
            "RMVB",
            "FLV",
            "F4V",
            "H.264",
            "H.265",
            "REAL VIDEO",
            "MKV",
            "WebM",
            "HDDVD",
            "MP4",
            "MPG",
            "M4V",
            "MGV",
            "OGV",
            "QTM",
            "STR",
            "AMC",
            "DVX",
            "EVO",
            "DAT",
            "OGG",
            "OGM",
          ];

          for (var i = 0; i < a.length; i++) {
            var c = a[i].chapterInfo[0].taskJson;
            this.vedio[i] = [];
            this.textList[i] = [];
            this.lineList[i] = [];
            this.chapToolList[i] = [];
            this.file[i] = [];
            this.playerO[i] = [];
            this.isClickNavOne[i] = [];
            for (var j = 0; j < c.length; j++) {
              var d = c[j].chapterData;
              this.vedio[i][j] = [];
              this.textList[i][j] = [];
              this.lineList[i][j] = [];
              this.chapToolList[i][j] = [];
              this.file[i][j] = [];
              this.isClickNavOne[i][j] = [];
              for (var z = 0; z < d.length; z++) {
                if (d[z].type == 7) {
                  this.chapToolList[i][j].push(d[z]);
                } else if (d[z].type == 8) {
                  this.lineList[i][j].push(d[z]);
                } else if (d[z].type == 6) {
                  this.textList[i][j].push(d[z]);
                } else {
                  if (
                    b.indexOf(
                      d[z].url
                        .split(".")
                        [d[z].url.split(".").length - 1].toLocaleUpperCase()
                    ) != -1
                  ) {
                    this.vedio[i][j].push(d[z]);
                  } else {
                    this.file[i][j].push(d[z]);
                  }
                }
              }
              var e = JSON.parse(JSON.stringify(this.playerOptions));
              e.sources[0].src =
                this.vedio[i][j].length > 0 ? this.vedio[i][j][0].url : this.mr;
              this.playerO[i][j] = e;
            }
          }
          this.courseDetail = res.data[0][0];
          this.evalua = res.data[0][0].evaId;
          this.chapInfo = JSON.parse(this.courseDetail.chapters)[
            this.courseType
          ];
          this.chapInfoList = JSON.parse(this.courseDetail.chapters);
          if (this.navList.length == 0) {
            this.navList = [];
            for (var l = 0; l < this.chapInfoList.length; l++) {
              var q = this.chapInfoList[l].dyName;
              var w = this.chapInfoList[l].chapterInfo[0].taskJson;
              var e;
              this.navList.push({
                dyName: q,
                isOpen: l === 0 ? true : false,
                task: [],
              });
              for (var r = 0; r < w.length; r++) {
                e = w[r].task;
                this.navList[l].task.push({ taskName: e, id: l + "-" + r });
                this.navId = this.navId ? this.navId : l + "-" + r;
              }
            }
          }
          this.navList[0].isOpen = false;
          this.navList[this.courseType].isOpen = true;
          this.navId = this.navList[this.courseType].task[this.taskCount].id;
          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;
            }
          }

          for (var i = 0; i < a.length; i++) {
            this.showType[i] = [];
            this.pptImgUrl1[i] = [];
            var f = a[i].chapterInfo[0].taskJson;
            for (var j = 0; j < f.length; j++) {
              this.showType[i][j] = 0;
              if (!this.vedio[i][j][0] || this.vedio[i][j][0].url == "") {
                if (f[j].chapterData.length > 0) {
                  if (f[j].chapterData[0].type != 8) {
                    if (f[j].chapterData[0].type == 3) {
                      let _url = f[j].chapterData[0].url;
                      if (
                        _url
                          .split(".")
                          [_url.split(".").length - 1].toLocaleUpperCase() ==
                        "PDF"
                      ) {
                        this.showType[i][j] = 3;
                        this.pptImgUrl1[i][j] = _url;
                        this.isClickNavOne[i][j][0] = "word0";
                      } else if (
                        this.isAssetTypeAnImage(
                          _url
                            .split(".")
                            [_url.split(".").length - 1].toLocaleLowerCase()
                        )
                      ) {
                        this.showType[i][j] = 4;
                        this.pptImgUrl1[i][j] = _url;
                        this.isClickNavOne[i][j][0] = "word0";
                      } else {
                        this.showType[i][j] = 2;
                        this.pptImgUrl1[i][j] =
                          "https://view.officeapps.live.com/op/view.aspx?src=" +
                          _url;
                        this.isClickNavOne[i][j][0] = "word0";
                      }
                    } else if (f[j].chapterData[0].type == 6) {
                      this.showType[i][j] = 1;
                      this.text = this.textList[i][j][0];
                      this.isClickNavOne[i][j][0] = "text0";
                    }
                  } else {
                    for (var y = 0; y < f[j].chapterData.length; y++) {
                      if (f[j].chapterData[y].type != 8) {
                        if (f[j].chapterData[y].type == 3) {
                          let _url = f[j].chapterData[y].url;
                          if (
                            _url
                              .split(".")
                              [
                                _url.split(".").length - 1
                              ].toLocaleUpperCase() == "PDF"
                          ) {
                            this.showType[i][j] = 3;
                            this.pptImgUrl1[i][j] = _url;
                            this.isClickNavOne[i][j][0] = "word0";
                          } else if (
                            this.isAssetTypeAnImage(
                              _url
                                .split(".")
                                [_url.split(".").length - 1].toLocaleLowerCase()
                            )
                          ) {
                            this.showType[i][j] = 4;
                            this.pptImgUrl1[i][j] = _url;
                            this.isClickNavOne[i][j][0] = "word0";
                          } else {
                            this.showType[i][j] = 2;
                            this.pptImgUrl1[i][j] =
                              "https://view.officeapps.live.com/op/view.aspx?src=" +
                              _url;
                            this.isClickNavOne[i][j][0] = "word0";
                          }
                        } else if (f[j].chapterData[y].type == 6) {
                          this.showType[i][j] = 1;
                          this.text = this.textList[i][j][0];
                          this.isClickNavOne[i][j][0] = "text0";
                        }
                      }
                    }
                  }
                }
              } else {
                this.isClickNavOne[i][j][0] = "video0";
              }
            }
          }
          setTimeout(() => {
            this.checkEva();
          }, 500);
          this.selectStudent();
          this.selectSWorks();
          let _this = this;
          _this.timer = setInterval(function () {
            _this.selectSWorks();
            _this.selectStudent();
            _this.selectSLook();
          }, 5000);
          _this.$nextTick(function () {
            setTimeout(() => {
              let _box = document.getElementsByClassName("box_course");
              for (var i = 0; i < _box.length; i++) {
                var a =
                  document.getElementsByClassName("box_course")[i].offsetHeight;
                document.getElementsByClassName("vedioList")[i].style.height =
                  a + "px";
                document.getElementsByClassName("navBox")[i].style.height =
                  a - 40 + "px";
              }
              let _vedio = _this.vedio;
              let _count = 0;
              _this.vedioTime = [];
              for (var i = 0; i < _vedio.length; i++) {
                if (typeof _this.vedioTime != "object") {
                  _this.vedioTime = [];
                }
                for (var j = 0; j < _vedio[i].length; j++) {
                  if (!_this.vedioTime[i]) {
                    _this.vedioTime[i] = [];
                  }
                  for (var k = 0; k < _vedio[i][j].length; k++) {
                    if (!_this.vedioTime[i][j]) {
                      _this.vedioTime[i][j] = [];
                    }
                    if (_vedio[i][j][k]) {
                      _this.vedioTime[i][j].push(
                        document.getElementsByClassName("vjs-duration-display")[
                          _count
                        ].textContent
                      );
                      _count++;
                    }
                  }
                }
              }
            }, 500);
          });
          // if (_this.vedio[_this.taskCount].length > 0) {
          //   _this.vedioTime = document.getElementsByClassName(
          //     "vjs-duration-display"
          //   )[0].textContent;
          // }
        })
        .catch((err) => {
          loading.close();
          console.error(err);
        });
    },
    getHomeWork() {
      let params = {
        cid: this.id,
        stage: this.courseType,
        task: this.taskCount,
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectWork", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            this.studyJuri = JSON.parse(res.data[0][0].content);
            this.isNoHomeWork = true;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    isAssetTypeAnImage(ext) {
      return (
        [
          "png",
          "jpg",
          "jpeg",
          "bmp",
          "gif",
          "webp",
          "psd",
          "svg",
          "tiff",
        ].indexOf(ext) !== -1
      );
    },
    // switchVideo(media) {
    //   this.playerO = {};
    //   this.playerOptions.poster = "";
    //   this.playerOptions.sources[0].src = media;
    //   this.playerO = this.playerOptions;
    // },
    // onPlayerPlay() {},
    lookVedio(u, i, j, v) {
      this.isClickNavOne[i][j] = [];
      var e = JSON.parse(JSON.stringify(this.playerOptions));
      e.sources[0].src = u;
      this.playerO[i][j] = e;
      this.showType[i][j] = 0;
      this.isClickNavOne[i][j][v] = "video" + v;
    },
    lookText(i, j, t) {
      this.isClickNavOne[i][j] = [];
      // this.textList[i][j][t] = this.textList[i][j][t];
      // this.dialogVisible1 = true;
      this.showType[i][j] = 1;
      this.isClickNavOne[i][j][t] = "text" + t;
    },
    lookTools(i, t) {
      this.chapTools = this.chapToolList[i][t];
      this.dialogVisible2 = true;
    },
    openFile(f) {
      this.pptImgUrl = "";
      var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
      if (
        a.indexOf(f.split(".")[f.split(".").length - 1].toLocaleUpperCase()) !=
        -1
      ) {
        this.pptImgUrl =
          "https://view.officeapps.live.com/op/view.aspx?src=" + f;
        this.showPDF = false;
        this.dialogVisible3 = true;
      } else if (
        f.split(".")[f.split(".").length - 1].toLocaleUpperCase() == "PDF"
      ) {
        this.pptImgUrl = f;
        this.showPDF = true;
        this.dialogVisible3 = true;
      }
    },
    downFile(f, i, j, k) {
      this.isClickNavOne[j][k] = [];
      this.pptImgUrl1[j][k] = [];
      var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"]; //"PDF",
      if (
        a.indexOf(
          f.url.split(".")[f.url.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        this.pptImgUrl1[j][k] =
          "https://view.officeapps.live.com/op/view.aspx?src=" + f.url;
        // this.dialogVisible3 = true;
        this.showType[j][k] = 2;
      } else if (
        this.isAssetTypeAnImage(
          f.url.split(".")[f.url.split(".").length - 1].toLocaleLowerCase()
        )
      ) {
        this.showType[j][k] = 4;
        this.pptImgUrl1[j][k] = f.url;
      } else if (
        f.url.split(".")[f.url.split(".").length - 1].toLocaleUpperCase() ==
        "PDF"
      ) {
        this.pptImgUrl1[j][k] = f.url;
        // this.dialogVisible3 = true;
        this.showType[j][k] = 3;
      } else {
        window.open(this.file[i].url);
      }
      this.isClickNavOne[j][k][i] = "word" + i;
    },
    downFileList(i) {
      window.open(this.noImgList[i].url);
    },
    openAddWork() {
      this.dialogVisible = true;
    },
    addBzWorks() {
      let params = [
        {
          uid: this.userid,
          cid: this.id,
          stage: this.courseType,
          task: this.taskCount,
          tool: this.toolindex,
          content: JSON.stringify(this.eScore),
          type: 6,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addCourseWorks", params)
        .then((res) => {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.bzText = "";
          this.studentEvalDialogVisible = false;
        })
        .catch((err) => {
          this.$message.error("提交失败");
          console.error(err);
        });
    },
    addStudentAsk() {
      this.askList.push({ askJson: this.askJson, anwer: this.radio.join(",") });
      let params = [
        {
          uid: this.userid,
          cid: this.id,
          stage: this.courseType,
          task: this.taskCount,
          tool: this.toolindex,
          content: JSON.stringify(this.askList).replace(/%/g, "%25"),
          type: 2,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addCourseWorks", params)
        .then((res) => {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.askList = [];
          this.dialogVisible5 = false;
        })
        .catch((err) => {
          this.$message.error("提交失败");
          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);
        });
    },
    addWork() {
      if (this.studyJuri[0].content == "") {
        this.$message.error("请将信息填写完整");
        return;
      } else if (this.studyJuri[0].cover.length == 0) {
        this.$message.error("请将信息填写完整");
        return;
      } else if (this.studyJuri[0].upVedio.length == 0) {
        this.$message.error("请将信息填写完整");
        return;
      }
      if (this.isNoHomeWork) {
        this.$confirm(
          "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            let params = [
              {
                uid: this.userid,
                cid: this.id,
                stage: this.courseType,
                task: this.taskCount,
                content: JSON.stringify(this.studyJuri),
              },
            ];
            this.ajax
              .post(this.$store.state.api + "addWorks", params)
              .then((res) => {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.isNoHomeWork = true;
                this.dialogVisible = false;
              })
              .catch((err) => {
                this.$message.error("提交失败");
                console.error(err);
              });
          })
          .catch(() => {});
      } else {
        let params = [
          {
            uid: this.userid,
            cid: this.id,
            stage: this.courseType,
            task: this.taskCount,
            content: JSON.stringify(this.studyJuri),
          },
        ];
        this.ajax
          .post(this.$store.state.api + "addWorks", params)
          .then((res) => {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.isNoHomeWork = true;
            this.dialogVisible = false;
          })
          .catch((err) => {
            this.$message.error("提交失败");
            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);
        });
    },
    openTools(t, i, index, c, sName) {
      var z = JSON.parse(c);
      this.noteName = sName;
      if (t == 4) {
        this.radio = [];
        this.isAnswer = false;
        for (var i = 0; i < z.length; i++) {
          let a = z[i];
          let b = a.anwer.split(",");
          let d = [];
          for (var j = 0; j < b.length; j++) {
            d.push(parseInt(b[j]));
          }
          this.radio = d;
          this.askJson = a.askJson;
        }
        this.isAnswer = true;
        this.dialogVisible5 = true;
      }
      //  else if (t == 15) {
      //   this.answerQ = "";
      //   this.questionAnswer = "";
      //   this.answerQ = z[0].answerTitle;
      //   this.questionAnswer = z[0].answer;
      //   this.answerDialogVisible = true;
      // }
    },
    doUrl(url) {
      if (url.indexOf("https://") == -1 && url.indexOf("http://") == -1) {
        url = "https://" + url;
      }
      window.open(url);
    },
    addTools(t, i, index) {
      var a = 0;
      // this.taskCount = index;
      this.toolindex = i;
      if (t == 1) {
        if (this.wbCount > 0) {
          this.updateCount(this.wbCount, t);
        } else {
          this.wbCount++;
          a = this.wbCount;
          this.toolsCount(a, t);
        }
        // window.parent.postMessage(
        //   {
        //     tools: "1",
        //     cid: this.id,
        //     stage: this.courseType,
        //     task: this.taskCount,
        //     tool: i,
        //   },
        //   "*"
        // );
      } else if (t == 2) {
        if (this.wordCount > 0) {
          this.updateCount(this.wordCount, t);
        } else {
          this.wordCount++;
          a = this.wordCount;
          this.toolsCount(a, t);
        }
        window.parent.postMessage({ tools: "2" }, "*");
      } else if (t == 3) {
        if (this.mindCount > 0) {
          this.updateCount(this.mindCount, t);
        } else {
          this.mindCount++;
          a = this.mindCount;
          this.toolsCount(a, t);
        }
        window.parent.postMessage(
          {
            tools: "3",
            cid: this.id,
            stage: this.courseType,
            task: this.taskCount,
            tool: i,
          },
          "*"
        );
      } else if (t == 4) {
        this.radio = [];
        this.noteName = "";
        this.isAnswer = false;
        if (this.askCount > 0) {
          this.updateCount(this.askCount, t);
        } else {
          this.askCount++;
          a = this.askCount;
          this.toolsCount(a, t);
        }
        if (!this.dialogVisible2) {
          this.askJson.askJson =
            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
              index
            ].toolChoose[i].askJson;
          this.askJson.askTitle =
            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
              index
            ].toolChoose[i].askTitle;
          this.askJson.askCount =
            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
              index
            ].toolChoose[i].askCount;
        } else {
          this.askJson.askJson = this.chapTools.askJson.askJson;
          this.askJson.askTitle = this.chapTools.askJson.askTitle;
          this.askJson.askCount = this.chapTools.askJson.askCount;
        }
        this.dialogVisible5 = true;

        // window.parent.postMessage({ tools: "4" }, "*");
      } else if (t == 5) {
        if (this.scoreCount > 0) {
          this.updateCount(this.scoreCount, t);
        } else {
          this.scoreCount++;
          a = this.scoreCount;
          this.toolsCount(a, t);
        }
        this.dialogVisible4 = true;
        // window.parent.postMessage({ tools: "5" }, "*");
      } else if (t == 6) {
        if (this.noteCount > 0) {
          this.updateCount(this.noteCount, t);
        } else {
          this.noteCount++;
          a = this.noteCount;
          this.toolsCount(a, t);
        }
        window.parent.postMessage(
          {
            tools: "6",
            cid: this.id,
            stage: this.courseType,
            task: this.taskCount,
            tool: i,
          },
          "*"
        );
      } else if (t == 7) {
        if (this.mindNetWorkCount > 0) {
          this.updateCount(this.mindNetWorkCount, t);
        } else {
          this.mindNetWorkCount++;
          a = this.mindNetWorkCount;
          this.toolsCount(a, t);
        }
        window.parent.postMessage(
          {
            tools: "7",
            cid: this.id,
            stage: this.courseType,
            task: this.taskCount,
            tool: i,
          },
          "*"
        );
      } else if (t == 16) {
        if (this.workCount > 0) {
          this.updateCount(this.workCount, t);
        } else {
          this.workCount++;
          a = this.workCount;
          this.toolsCount(a, t);
        }
        this.dialogVisible = true;
      } else if (t == 8) {
        if (this.libraryCount > 0) {
          this.updateCount(this.libraryCount, t);
        } else {
          this.libraryCount++;
          a = this.libraryCount;
          this.toolsCount(a, t);
        }
        window.parent.postMessage({ tools: "8" }, "*");
      } else if (t == 17) {
        if (this.libraryCount > 0) {
          this.updateCount(this.libraryCount, t);
        } else {
          this.libraryCount++;
          a = this.libraryCount;
          this.toolsCount(a, t);
        }
        window.parent.postMessage({ tools: "17" }, "*");
      } else if (t == 18) {
        if (this.trainCount > 0) {
          this.updateCount(this.trainCount, t);
        } else {
          this.trainCount++;
          a = this.trainCount;
          this.toolsCount(a, t);
        }
        window.parent.postMessage({ tools: "18" }, "*");
      } else if (t == 10) {
        if (this.timeCount > 0) {
          this.updateCount(this.timeCount, t);
        } else {
          this.timeCount++;
          a = this.timeCount;
          this.toolsCount(a, t);
        }
        this.timeDialogVisible = true;
      } else if (t == 15) {
        this.answerQ = "";
        this.questionAnswer = "";
        if (this.answerCount > 0) {
          this.updateCount(this.answerCount, t);
        } else {
          this.answerCount++;
          a = this.answerCount;
          this.toolsCount(a, t);
        }
        this.answerQ = this.chapInfoList[this.courseType].chapterInfo[0]
          .taskJson[index].toolChoose[i].answerQ
          ? this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index]
              .toolChoose[i].answerQ
          : "";
        this.answerDialogVisible = true;
      } else if (t == 21) {
        window.parent.postMessage({ tools: "21" }, "*");
      } else if (t == 22) {
        window.parent.postMessage({ tools: "22" }, "*");
      } else if (t == 23) {
        window.parent.postMessage({ tools: "23" }, "*");
      } else if (t == 24) {
        window.parent.postMessage({ tools: "24" }, "*");
      } else if (t == 26) {
        window.parent.postMessage(
          {
            tools: "26",
            cid: this.id,
            stage: this.courseType,
            task: this.taskCount,
            tool: i,
          },
          "*"
        );
      } else if (t == 40) {
        if (this.evalCount > 0) {
          this.updateCount(this.evalCount, t);
        } else {
          this.evalCount++;
          a = this.evalCount;
          this.toolsCount(a, t);
        }
        if (this.worksStudent[this.courseType][index][i].length) {
          for (
            var k = 0;
            k < this.worksStudent[this.courseType][index][i].length;
            k++
          ) {
            if (
              this.userid ==
              this.worksStudent[this.courseType][index][i][k].userid
            ) {
              this.eScore = JSON.parse(
                this.worksStudent[this.courseType][index][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;
      }
    },
    openPj(w, jd, rw, toolindex) {
      this.isStar = true;
      this.eScore = JSON.parse(w);
      this.rateJson =
        this.chapInfoList[jd].chapterInfo[0].taskJson[rw].toolChoose[
          toolindex
        ].rateJson;
      this.studentEvalDialogVisible = true;
    },
    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);
        });
    },
    checkEva() {
      if (this.evalua != "") {
        for (var i = 0; i < this.evaJuri.length; i++) {
          if (this.evalua == this.evaJuri[i].id) {
            this.eTitle = this.evaJuri[i].title;
            this.eJson = JSON.parse(this.evaJuri[i].content);
          }
        }
        this.$forceUpdate();
        setTimeout(() => {
          this.setMindData();
        }, 0);
      }
    },
    selectEva() {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectAllEvaluation", params)
        .then((res) => {
          this.evaJuri = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectSLook() {
      let params = {
        cid: this.id,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseSLook", params)
        .then((res) => {
          this.sIsOpen = res.data[0][0].sopen == 1 ? false : true;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    setMindData() {
      this.data.data = [];
      this.data.data.push({ id: "root", isroot: true, topic: this.eTitle });
      let _eJson = Object.keys(this.eJson);
      let _e = this.eJson;
      for (let i = 0; i < _eJson.length; i++) {
        let element = _e[_eJson[i]];
        this.data.data.push({
          id: element.id,
          parentid: "root",
          topic: element.name,
        });
        let _eJsonc = Object.keys(element.child);
        let _e2 = element.child;
        for (let j = 0; j < _eJsonc.length; j++) {
          let _ec = _e2[_eJsonc[j]];
          this.data.data.push({
            id: _ec.id,
            parentid: element.id,
            topic: _ec.name,
          });
          let _eJsonz = Object.keys(_ec.child);
          let _e3 = _ec.child;
          for (let z = 0; z < _eJsonz.length; z++) {
            let _ez = _e3[_eJsonz[z]];
            this.data.data.push({
              id: _ez.id,
              parentid: _ec.id,
              topic: _ez.name,
            });
          }
        }
      }
      this.$forceUpdate();
    },
    checkFileFull(type, url) {
      this.fullDialogVisible = true;
      this.fulltype = type;
      this.fullUrl = url;
    },
  },
  destroyed() {
    window.onresize = null;
  },
  computed: {
    contentConvent() {
      return function (c) {
        return c
          ? c
              .replaceAll(/\r\n/g, "<br/>")
              .replaceAll(/\n/g, "<br/>")
              .replaceAll(/\s/g, " &nbsp")
          : "";
      };
    },
  },
  created() {
    if (this.screenType == 2) {
      window.parent.postMessage({ allScreen: 4 }, "*");
    } else if (this.screenType == 3) {
      window.parent.postMessage({ allScreen: 5 }, "*");
    } else if (this.screenType == 1) {
      window.parent.postMessage({ allScreen: 6 }, "*");
    }
    this.selectEva();
    this.getCourseDetail();
    this.selectCount();
    this.getHomeWork();
    this.selectSLook();
    document.scrollingElement.scrollTop = 0;
    window.addEventListener("resize", () => {
      var a = document.getElementsByClassName("box_course")[0].offsetHeight;
      document.getElementsByClassName("vedioList")[0].style.height = a + "px";
      document.getElementsByClassName("navBox")[0].style.height = a - 40 + "px";
    });
    let _this = this;
    setTimeout(() => {
      // this.vedioTime = document.getElementsByClassName(
      //   "vjs-duration-display"
      // )[0].textContent;
      let _vedio = _this.vedio;
      let _count = 0;
      for (var i = 0; i < _vedio.length; i++) {
        if (typeof _this.vedioTime != "object") {
          _this.vedioTime = [];
        }
        for (var j = 0; j < _vedio[i].length; j++) {
          if (!_this.vedioTime[i]) {
            _this.vedioTime[i] = [];
          }
          for (var k = 0; k < _vedio[i][j].length; k++) {
            if (!_this.vedioTime[i][j]) {
              _this.vedioTime[i][j] = [];
            }
            if (_vedio[i][j][k]) {
              _this.vedioTime[i][j].push(
                document.getElementsByClassName("vjs-duration-display")[_count]
                  .textContent
              );
              _count++;
            }
          }
        }
      }
    }, 1000);
  },
};
</script>

<style scoped>
@media screen and (max-width: 1024px) {
  /* .navText {
    width: 120px !important;
  } */
  /* .textBox {
    margin: 0 !important;
  } */
  .evaCss {
    flex-direction: column !important;
    align-items: center !important;
  }
  .dialog_diy1 >>> .el-dialog{
    width: 100% !important;
  }
  /* .courseIndex {
    width: 43% !important;
  } */
  .courseIndex > div:first-child(2) {
    width: 50px !important;
  }
  /* .pb_left{
    position: unset !important;
    height: auto !important;
  }
  .body_student{
    position: unset !important;
    width:600px !important;
  } */
  /* .btnAll{
    width: 55% !important;
  } */
  .taskBox {
    width: 550px !important;
  }
}
.body_student {
  width: 77%;
  height: 100%;
  position: absolute;
  left: 20.5%;
  top: 0;
}
.student_head {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.pb_left {
  width: 20%;
  margin-right: 10px;
  background: rgb(255, 255, 255);
  padding-right: 10px;
  position: fixed;
  height: 100%;
}
.wheel > img,
.project > img,
.star > img,
.evaluate > img,
.up_photo > img,
.chapter_add > img,
.upCover > img,
.deleteWord > img,
.question > img,
.homework > img {
  width: 100%;
  height: 100%;
}
.upCover {
  width: calc(100% / 3.5);
  position: relative;
  margin: 0 15px 10px 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.chapter_add {
  width: 120px;
  position: relative;
  text-align: center;
}
.isAddThings {
  margin-top: 20px;
  position: relative;
  text-align: center;
  background: #f7f8fa;
  height: 90px;
  width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.deleteWord {
  width: 22px;
  height: 22px;
  position: absolute;
  right: -5px;
  top: -5px;
  cursor: pointer;
}
.box_course {
  /* width: 60%; */
  width: 81%;
}
.wheel {
  width: 100%;
  height: 100%;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  justify-content: space-around;
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
}
.student_body {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 0 0 20px;
}
.study_top {
  /* margin-top: 90px; */
  width: 95%;
  /* overflow: auto; */
  height: auto;
  margin: 0 auto;
}
.study_top .checkbox {
  display: flex;
  align-items: center;
  padding: 20px 0 20px 30px;
  flex: 0 0 auto;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.study_top .check {
  padding-bottom: 5px;
  text-align: center;
  cursor: pointer;
  height: 30px;
  box-sizing: border-box;
  display: flex;
}
.study_top .checked {
  border-bottom: 4px solid #3fc6a0;
  padding-bottom: 5px;
  color: #3fc6a0;
  display: flex;
  height: 35px;
}
.study_top .checked > div,
.study_top .check > div {
  margin-right: 5px;
}
.videoTop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #fff;
  align-items: center;
  width: 95%;
  padding: 20px;
}
.upbtn {
  margin: 25px;
  background: #70afdb;
  color: #fff;
  width: 120px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
}

.filebox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 15px 0 25px;
}

.filebox .tooldetail {
  width: 95%;
  background: rgb(247, 247, 247);
  padding: 20px;
  line-height: 30px;
  word-break: break-word;
}

.file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 200px;
}

.file div {
  margin-top: 10px;
  width: 150px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px 20px 0;
  cursor: pointer;
  margin: 12px 0 5px 15px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
    0px 2px 1px -1px rgb(0 0 0 / 12%);
  box-sizing: border-box;
}
.media img {
  height: 90px;
  width: 160px;
  object-fit: cover;
}
.media .title {
  padding: 5px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.media .btn {
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: #fff;
  background: #606060;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail_content_top {
  width: 100%;
  padding: 25px 0 25px 0;
}
.detail_title {
  text-align: center;
  font-size: 24px;
}
.detail_time {
  font-size: 13px;
  padding: 15px 0 0 40px;
}
.detail_content {
  line-height: 2pc;
  width: 90%;
  margin: 0 auto;
  padding-top: 30px;
  text-indent: 30px;
  overflow: auto;
  height: 200px;
}
.score_box >>> .el-rate {
  margin-left: 10px;
}
.dialog_change >>> .el-dialog {
  border-radius: 5px;
}
.dialog_change >>> .el-dialog__header {
  background: #f2f2f2;
  text-align: center;
}
.dialog_change >>> .el-dialog__title {
  line-height: 5px;
}
.dialog_change >>> .el-dialog__body {
  background: #fff;
  padding: 10px 20px;
}
.score_box {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  margin-top: 20px;
}
.up_photo {
  width: 120px;
  cursor: pointer;
  margin-top: 10px;
}
.upload_send {
  margin: 30px auto 30px;
  width: 60%;
  background: #169bd6;
  text-align: center;
  height: 35px;
  line-height: 35px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.marginT {
  margin-top: 20px;
}
.cd_content_steps {
  display: flex;
  width: 90%;
  justify-content: space-around;
  border-top: 1px solid #eeeeee;
}
.cd_steps_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.first {
  display: flex;
  align-items: center;
  margin: 15px 0 20px 0;
  font-size: 20px;
}
.first > div:nth-child(2) {
  font-size: 16px !important;
  padding-left: 10px;
  line-height: 26px;
  box-sizing: border-box;
}
.blue_box_one {
  text-align: center;
  color: #fff;
  background-image: linear-gradient(90deg, #477cd7, #65b9fc);
  border-radius: 7px;
  margin: 10px;
  cursor: pointer;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.blue_box_one > div:nth-child(1) {
  line-height: 30px;
  margin: 0 5px 0 10px;
  width: 30%;
  min-width: 70px;
  border-radius: 4px;
}
.blue_box_one > div:nth-child(2) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: 70%;
  text-align: left;
  margin-right: 10px;
  max-width: calc(100% - 85px);
}
.blue_box_one > div:nth-child(2):hover {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.upFile {
  margin: 0 auto;
  width: 120px;
  background: #70afdb;
  color: #fff;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.courseTitle {
  background: #205cc6;
  width: 85%;
  margin: 10px auto;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}
.ml {
  margin-left: 20px;
  color: #5b7dba;
  border-left: 3px solid #5b7dba;
  padding-left: 5px;
  font-weight: bold;
}
.return {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.return > img {
  width: 100%;
  height: 100%;
}
.returnBtn {
  background: #499eef;
  width: 65px;
  height: 30px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  margin-right: 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}
.tool {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 13%;
  margin: 0 30px;
  align-items: center;
}
.whiteBIcon {
  width: 150px;
  cursor: pointer;
}
.whiteBIcon > img {
  width: 100%;
  height: 100%;
}
.mask {
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progressBox {
  width: 500px;
  height: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #bfbfbf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}

.progressBox >>> .el-progress-bar__outer {
  background-color: #d1dfff !important;
}
.progressBox .lbox {
  height: 100px;
  font-size: 19px;
  display: flex;
  align-items: center;
}

.progressBox .lbox img {
  width: 40px;
  margin-right: 20px;
}
.uploadVedio {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 15px 10px 0;
}
.uploadVedio > img {
  width: 30px;
  height: 30px;
}
.uploadVedio > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 75px;
  margin-top: 7px;
}
.picName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 75px;
  margin-top: 7px;
}
.new_top {
  display: flex;
  background: #fff;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
  position: relative;
}
.before {
  position: absolute;
  background: #c3dad4;
  width: 6px;
  height: 100%;
}
.courseIndex {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.courseIndex > div:nth-child(1) {
  margin: 0 20px;
  padding-left: 5px;
  font-size: 21px;
  width: 100px;
  font-weight: bold;
  border-left: 4px solid #3363b9;
  height: 35px;
  text-align: center;
  line-height: 35px;
}
.courseIndex > div:nth-child(2) {
  font-size: 21px;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.courseIndex > div:nth-child(3) {
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 5px;
  background: #49a0f0;
  width: 55px;
  min-width: 55px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  height: 20px;
  line-height: 26px;
  font-size: 14px;
  margin: 0 0 0 10px;
}
.course_text {
  padding: 20px 0 0 15px;
  text-indent: 30px;
  width: 80%;
  min-height: 20px;
}
.vedioList {
  background: #f2f2f2;
  border: 1px solid #ececec;
  /* width: 38.8%; */
  width: calc(100% - 83%);
  height: 445px;
  border-radius: 10px;
  overflow: hidden;
}
.vedioNav {
  margin: 10px 0 0 15px;
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 5px;
  background: #96d1ff;
  width: 55px;
  min-width: 55px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  height: 20px;
  line-height: 26px;
  font-size: 14px;
}
.queTop {
  display: flex;
  padding: 20px 0 20px 30px;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
}
.question {
  width: 40px;
  margin-right: 10px;
  margin-top: 7px;
}
.queTitle {
  margin-left: 5px;
  font-size: 25px;
  display: flex;
  align-items: center;
}
.addEditor {
  width: 100px;
  height: 30px;
  background: #42cda6;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  box-shadow: 1px 3px 6px 1px #bfbfbf;
  cursor: pointer;
}
.vedioName {
  text-overflow: ellipsis;
  position: absolute;
  top: 8px;
  font-size: 14px;
  left: 110px;
  height: 60px;
  overflow: hidden;
  width: auto;
  word-break: break-all;
}
.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: 10px 0;
  width: 85px;
  border-radius: 15px;
  box-shadow: 0px 1px 8px 0px rgb(20 20 20 / 14%);
}
.addPoint {
  width: 100%;
  height: 100%;
}
.addPoint > div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.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: #002e81 !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: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
}
.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;
}
.toolHeng2 {
  width: 100%;
}
.toolHeng {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.toolHeng > div {
  padding-left: 20px;
}
.isWidth {
  width: 20%;
}
.textTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 95%;
}
.textTitle >>> .el-form-item__label {
  font-size: 22px;
  color: #918f8f;
  width: 100px;
}

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

.navActive {
  height: auto;
}
.navTask {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: flex-start;
  height: 40px;
  justify-content: flex-start;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}
.navTaskname {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  padding-left: 5px;
}
.openTaskActive {
  color: #4386e6 !important;
}
.iframeName {
  margin: 5px 0;
  border-left: 4px solid #41c4a4;
  padding-left: 4px;
  width: 100%;
}
.iframeCss {
  width: 100%;
  height: 600px;
  border: 1px solid #d7d4d4;
}
.toolTitle {
  margin: 0px 0px 20px;
  font-size: 20px;
  font-weight: 500;
  border-left: 4px solid #41c4a4;
  padding-left: 4px;
}
.cru_selectBox {
  overflow: auto;
  width: 96%;
  margin: 0 auto;
  height: calc(100% - 40px - 21px - 20px);
}
.cru_selectBox::-webkit-scrollbar,
.study_top::-webkit-scrollbar,
.textContent::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.cru_selectBox::-webkit-scrollbar-track,
.study_top::-webkit-scrollbar-track,
.textContent::-webkit-scrollbar {
  border-radius: 10px;
  background-color: #b8bdc9;
}

/*定义滑块 内阴影+圆角*/
.cru_selectBox::-webkit-scrollbar-thumb,
.study_top::-webkit-scrollbar-thumb,
.textContent::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
  background-color: #2c5ab3;
}

.vedioBox {
  border-radius: 20px;
  background: #fff;
  margin-bottom: 10px;
}
.taskBox {
  margin: 15px 0 20px 30px;
  background: #f7f7f7;
  width: 97%;
  border-radius: 10px;
}
.vedioTaskBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.toolBox {
  padding: 20px 0 0 0;
}
.btnAll {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.vedioTimeBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
}
.navBox {
  background: rgb(255, 255, 255);
  height: 400px;
  padding: 5px 1px 0 1px;
  overflow: auto;
}
.worksBox {
  padding: 30px 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-top: 30px;
}
.works {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: center;
  width: 240px;
  height: 140px;
  margin-right: 10px;
  overflow: hidden;
  box-shadow: 0 0 6px 1px #dfdada;
  border-radius: 15px;
}
.workImg {
  width: 100%;
  height: 105px;
}
.workImg > img {
  width: 100%;
  height: 100%;
}

.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(2) {
  color: #b7b4b5;
}
.noWorksS {
  padding: 15px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.noWorksName {
  background: #46a1eb;
  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;
}

.noWorksName:hover {
  background: #e7e7e7 !important;
}
.title {
  background: #1e5cc9;
  width: 98%;
  height: 45px;
  color: #fff;
  line-height: 45px;
  padding-left: 20px;
}
.textBox {
  font-size: 20px;
  margin: 15px 0px 20px 30px;
  width: 90%;
  padding: 30px 0 0 50px;
}
.textContent {
  font-size: 18px;
  padding: 30px 0px 0px;
  height: 600px;
  width: 95%;
  overflow: auto;
  line-height: 30px;
}
.textContent >>> p {
  text-indent: 0pt !important;
}
.answerBg {
  background: url("../assets/icon/answerBgNew.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
.answerBg > div:nth-child(1) {
  font-size: 22px;
  padding: 25px 0 10px;
}
.answerContent {
  width: 215px;
  height: 60px;
  word-break: break-all;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elist_input_box {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  padding: 10px 0 15px 30px;
  flex-direction: column;
}
.elist_input {
  width: 100%;
}
.elist_input .elist_input_box input {
  font: inherit;
  color: currentColor;
  width: 200px;
  padding: 8px 14px;
  display: block;
  min-width: 0;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  margin: 0 20px 0 0;
}
.elist_input .elist_input_box span {
  height: 36px;
  line-height: 36px;
  color: rgb(82, 82, 82);
}

.elist_input .elist_input_box .remove {
  height: 20px;
  width: 20px;
  background-size: 100% 100%;
  background-position: unset;
  margin-left: 5px;
}

.elist_input_box >>> .el-rate {
  display: flex;
  height: 36px;
  align-items: center;
}

.elist_input_box .elist_inptu_text {
  min-height: 50px;
  /* width: 500px;
  max-height: 150px; */
  width: 100%;
  line-height: 50px;
  color: rgb(82, 82, 82);
  overflow: auto;
  text-indent: 5px;
  background: #f7f6f9;
  border-radius: 10px;
}

.elist_input_box .elist_inptu_text input {
  width: 500px;
}

.elist_input_box >>> .el-rate__icon {
  font-size: 24px;
}
.isClick {
  background: #4d9def;
}
.bzBox {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bzBox > div:nth-child(1) {
  width: 4px;
  height: 40px;
  background-image: linear-gradient(180deg, #2c5cbd, #a1cff4);
}
.bzBox > div:nth-child(2) {
  font-size: 23px;
  font-weight: bold;
  padding: 0px 0px 0 10px;
}
.navTitile {
  padding: 0 0px 0 15px;
  background: #1e5cc9;
  color: #fff;
  height: 40px;
  line-height: 40px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.isTypeOne {
  width: 240px;
  height: 170px;
  /* border: 1px solid #f8f8f8; */
  border-radius: 10px;
  box-shadow: 0 0 6px 1px #dfdada;
}
.e_add_top {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
  border-radius: 3px;
  background: #fff;
}
.e_add_title2 {
  display: flex;
  align-items: center;
}

.e_add_title2 span {
  width: 40px;
}

.e_add_title {
  display: flex;
  align-items: center;
  color: #b8b8b8;
  font-size: 18px;
  position: relative;
  height: 40px;
}
.e_add_title span {
  margin-right: 10px;
}
.e_add_title .el_input {
  width: 300px;
}
.e_add_title >>> .el-input__inner {
  width: 400px;
}

.e_add_btn {
}
.e_add_content {
  display: flex;
  width: 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: 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%;
}

.full_diy >>> .el-dialog__body {
  height: calc(100% - 100px);
  padding: 4px;
}
.full_diy >>> .el-dialog {
  margin: 0 !important;
  height: 100%;
}
.rwCss {
  font-size: 24px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: rgb(255, 255, 255);
  background-image: linear-gradient(90deg, #4574cc, #6eb0ff);
  border-radius: 10px;
  margin: 10px 0;
}
.isClickNavOne {
  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;
}
.studentDetail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.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;
}
.worksAnswer > img {
  width: 100%;
  height: 100%;
}
.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;
}
.pfBox > div:nth-child(2) {
  background: #f7f6f9;
  width: 400px;
  height: 45px;
  border-radius: 10px;
  text-indent: 18px;
  line-height: 45px;
  font-size: 16px;
}
.bz {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.bz > div {
  padding: 0 10px;
}
</style>