pbl-teacher-table/src/components/pages/liveRoom.vue

<template>
  <div
    style="
      background: #d0d6e4;
      width: 100%;
      height: 100%;
      margin: 0;
      position: relative;
    "
  >
    <!-- <div class="pb_content_body" style="height: 100%">
    </div>-->
    <div class="blackBottom">
      <div
        style="
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: stretch;
          padding-left: 10px;
        "
      >
        <div class="logoLive">
          <img src="../../assets/icon/logo.png" alt />
        </div>
        <div style="color: #fff; line-height: 45px; padding-left: 15px">introduce a festival (Final)</div>
      </div>
    </div>
    <div class="isNoOther">
      <div class="imgMiddle" :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'" v-show="!full">
        <!-- <img src="../../assets/icon/kc1.png" alt /> -->
        <!-- <iframe
          style="width: 100%; height: 100%; border: none"
          src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0701%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656644341323.pptx"
        ></iframe>-->
        <pdf
          :pdfUrl="pdfUrl"
          style="width: 100%; height: 100%"
          :getPage="getPage"
          @getWidth="getWidth"
        ></pdf>
        <div class="workd_media" v-if="videoBlock == 9" :style="{ width: Vwidth }">
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="playerO[0]"
            @play="onPlayerPlay($event)"
            style="width: 100%; height: 100%;"
          ></video-player>
        </div>
      </div>
      <div
        style="
          background: #d0d6e4;
          height: 100%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
        v-if="isBlock == 1 || isBlock == 6"
      >
        <div style="background: #fff; height: 92%; width: 96%; margin: 10px auto">
          <div style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px">答题查看</div>
          <div class="answerBox" v-if="isBlock == 1 || isBlock == 6">
            <div class="memberBox" v-if="isBlock == 1">
              <div
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray"
                @click="getOAnswer(item.answer, item.name)"
                :key="index"
              >{{ item.name }}</div>
            </div>
            <div class="memberBox" v-if="isBlock == 6">
              <div
                v-show="studentArray2.length > 0"
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray2"
                :key="index"
                @click="whoAnswer(item, index)"
              >{{ item.name }}</div>
              <div v-if="studentArray2.length == 0">暂无学生</div>
            </div>
            <!-- <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 1">
              共有四个选项，正在答题......
            </div>-->
            <div
              class="viewSta"
              @click="isBlock = 3"
              v-if="
                isBlock == 1 &&
                tools[steps].tools &&
                tools[steps].tools.indexOf(9) != -1
              "
            >查看数据统计</div>
            <div
              class="viewSta"
              @click="isBlock = 14"
              v-else-if="
                isBlock == 1 &&
                tools[steps].tools &&
                tools[steps].tools.indexOf(27) != -1
              "
            >查看所有学生答题情况</div>
            <span slot="footer" class="dialog-footer sztFooter" v-if="isBlock == 6">
              <el-button type="primary" @click="isBlock = 0">结束</el-button>
              <!-- <el-button type="primary" @click="isBlock = 2">返回</el-button> -->
            </span>
          </div>
        </div>
      </div>
      <div
        style="
          background: #d0d6e4;
          height: 92%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
        v-if="isBlock == 3"
      >
        <div
          style="
            background: #fff;
            width: 96%;
            margin: 10px auto;
            position: relative;
          "
        >
          <div class="close" @click="isBlock = 0">
            <img src="../../assets/icon/close.png" alt />
          </div>
          <div style="color: #bfbfbf; padding: 15px 0 20px 25px">数据统计</div>
          <div style="padding-left: 25px">
            目前A选项
            <span class>{{ answerJson.A }}票</span>、B选项
            <span>{{ answerJson.B }}票</span>、C选项
            <span>{{ answerJson.C }}票</span>、D选项
            <span>{{ answerJson.D }}票</span>
          </div>
          <div class="szt">
            <AnswerData :problemJson="answerJson"></AnswerData>
          </div>
          <span slot="footer" class="dialog-footer sztFooter">
            <!-- <el-button type="primary" @click="isBlock = 0">关闭</el-button> -->
            <el-button type="primary" @click="isBlock = 1">返回</el-button>
          </span>
        </div>
      </div>
      <div class="answerBox tools_box" v-if="isBlock == 2" style="padding: 10px 0 0 25px">
        <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
        <div
          style="
            margin: 20px 0 20px 0;
            border-bottom: 4px solid #3e86f3;
            width: 75px;
            text-align: center;
            padding-bottom: 3px;
          "
        >选择工具</div>
        <div
          style="
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <div
            v-if="tools[steps].tools && tools[steps].tools.indexOf(1) != -1"
            @click="(isBlock = 5), (toolCount = 1)"
            class="toolCss"
          >
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/whiteBoard.png" alt />
              <div>电子白板</div>
            </div>
          </div>
          <div
            v-if="tools[steps].tools && tools[steps].tools.indexOf(3) != -1"
            @click="(isBlock = 5), (toolCount = 3)"
            class="toolCss"
          >
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/mindMapping.png" alt />
              <div>思维导图</div>
            </div>
          </div>
          <div
            v-if="tools[steps].tools && tools[steps].tools.indexOf(28) != -1"
            @click="(isBlock = 5), (toolCount = 28)"
            class="toolCss"
          >
            <div class="toolImg">
              <img src="../../assets/icon/thirdToolList/translation.png" alt />
              <div>翻译</div>
            </div>
          </div>
          <div
            v-if="tools[steps].tools && tools[steps].tools.indexOf(4) != -1"
            @click="(isBlock = 5), (toolCount = 4)"
            class="toolCss"
          >
            <div class="toolImg">
              <img src="../../assets/icon/thirdToolList/ask.png" alt />
              <div>问卷调查</div>
            </div>
          </div>
          <div
            v-if="tools[steps].tools && tools[steps].tools.indexOf(6) != -1"
            @click="(isBlock = 5), (toolCount = 6)"
            class="toolCss"
          >
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/doc.png" alt />
              <div>协同文档</div>
            </div>
          </div>
          <div
            v-if="tools[steps].tools && tools[steps].tools.indexOf(7) != -1"
            @click="(isBlock = 5), (toolCount = 7)"
            class="toolCss"
          >
            <div class="toolImg">
              <img src="../../assets/icon/secondToolList/mindNetwork.png" alt />
              <div>思维网格</div>
            </div>
          </div>
          <div v-if="tools[steps].tools && tools[steps].tools.indexOf(10) != -1" class="toolCss">
            <div class="toolImg" @click="timeDialogVisible = true">
              <img src="../../assets/icon/thirdToolList/time.png" alt />
              <div>倒计时</div>
            </div>
          </div>
        </div>
        <div class="nextStepBox">
          <div class="nextStepOne" @click="isBlock = 0">关闭</div>
        </div>
      </div>
      <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 5">
        <div style="height: 100%; width: 100%">
          <div v-if="toolCount == 1" class="tools_child_box">
            <div class="tools_title">
              <span>电子白板</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              webkitallowfullscreen
              mozallowfullscreen
              allowfullscreen
              style="width: 100%; height: 100%; border: none"
              src="https://iwb.cocorobo.cn/"
            ></iframe>
          </div>
          <div v-if="toolCount == 3" class="tools_child_box">
            <div class="tools_title">
              <span>思维导图</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              webkitallowfullscreen
              mozallowfullscreen
              allowfullscreen
              style="width: 100%; height: 100%; border: none"
              src="//cloud.cocorobo.cn/mind/"
            ></iframe>
          </div>
          <div v-if="toolCount == 28" class="tools_child_box">
            <div class="tools_title">
              <span>翻译</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              webkitallowfullscreen
              mozallowfullscreen
              allowfullscreen
              style="width: 100%; height: 100%; border: none"
              src="//dict.youdao.com/"
            ></iframe>
          </div>
          <div v-if="toolCount == 6" class="tools_child_box">
            <div class="tools_title">
              <span>协同文档</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              webkitallowfullscreen
              mozallowfullscreen
              allowfullscreen
              style="width: 100%; height: 100%; border: none"
              src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
            ></iframe>
          </div>
          <div v-if="toolCount == 7" class="tools_child_box">
            <div class="tools_title">
              <span>思维网格</span>
              <div>
                <img src="../../assets/full.png" class="full" @click="fullTools" />
                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
              </div>
            </div>
            <iframe
              webkitallowfullscreen
              mozallowfullscreen
              allowfullscreen
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>
          </div>
          <div class="nextStepBox">
            <div class="nextStepOne" @click="(isBlock = 2), (full = false)">返回</div>
          </div>
        </div>
      </div>
      <div
        class="answerBox"
        style="
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
        v-if="isBlock == 4"
      >
        <div
          style="
            color: #b7b7b7;
            border-left: 5px solid #a5b6e2;
            padding-left: 7px;
            height: 25px;
            line-height: 25px;
          "
        >查看作业</div>
        <div class="workBox">
          <div class="works" v-for="(w, wIndex) in worksList" :key="wIndex">
            <div class="workImg">
              <img
                v-if="
                  tools[steps].tools && tools[steps].tools.indexOf(29) != -1
                "
                :src="require('../../assets/icon/stuVedio.png')"
                @click="lookvideo(w.upload)"
                alt
              />
              <img
                v-else
                :src="w.upload ? w.upload : mr"
                @click="previewImg(w.upload ? w.upload : mr)"
                alt
              />
            </div>
            <div class="workDetail">
              <div class="workLeft">
                <div class="workTx">
                  <img src="../../assets/avatar.png" alt />
                </div>
                <div class="workName">{{ w.sName }}</div>
              </div>
              <div class="workRight">{{ w.time }}</div>
              <!-- <div class="workBtn" @click="isBlock = 7">查看评价</div> -->
            </div>
          </div>
        </div>
        <div class="returnButton" @click="isBlock = 0">关闭</div>
      </div>
      <div
        class="answerBox"
        v-if="isBlock == 7"
        style="
          padding: 0 0 0 25px;
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
      >
        <div style="color: #bfbfbf; padding: 15px 0 15px 0; font-size: 20px">课堂评价</div>
        <div>
          <div class="score_box">
            <span>自我评价</span>
            <el-rate v-model="rateList.ca"></el-rate>
          </div>
          <div class="score_box">
            <span>他人评价</span>
            <el-rate v-model="rateList.sia"></el-rate>
          </div>
        </div>
        <div>
          <div style="padding-bottom: 15px; sont-size: 14px">备注</div>
          <div class="bz">
            <el-input
              type="textarea"
              placeholder="请输入备注…"
              :rows="6"
              resize="none"
              v-model="rateList.content"
            ></el-input>
          </div>
        </div>
        <span
          slot="footer"
          class="dialog-footer sztFooter"
          style="
            padding: 0 0 30px 0px;
            position: absolute;
            right: 20px;
            bottom: 0;
          "
        >
          <el-button type="primary" @click="isBlock = 4">返回</el-button>
        </span>
      </div>

      <div class="answerBox tools_box" v-if="isBlock == 8" style="padding: 10px 0 0 25px">
        <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
        <div
          style="
            margin: 20px 0 20px 0;
            border-bottom: 4px solid #3e86f3;
            width: 75px;
            text-align: center;
            padding-bottom: 3px;
          "
        >选择附件</div>
        <div
          style="
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <div v-if="tools[steps].file && tools[steps].file.length" class="fileBox">
            <div class="fileListCss" v-for="(v, vIndex) in videoList" :key="vIndex">
              <div class="fileCss" @click="playVideo(v.src, vIndex)">
                <img src="../../assets/uploadMp4.png" alt />
              </div>
              <div>{{ v.name }}</div>
            </div>
            <div class="fileListCss" v-for="(v, vIndex) in videoList2" :key="vIndex">
              <div class="fileCss" @click="playVideo2(v.src, vIndex)">
                <img src="../../assets/uploadMp4.png" alt />
              </div>
              <div>{{ v.name }}</div>
            </div>
            <div class="fileListCss" v-for="(f, fIndex) in fileList" :key="fIndex">
              <div class="fileCss" @click="openFile(f.src)">
                <img src="../../assets/file.png" alt />
              </div>
              <div>{{ f.name }}</div>
            </div>
          </div>
        </div>
        <div class="nextStepBox">
          <div class="nextStepOne" @click="isBlock = 0">关闭</div>
        </div>
      </div>
      <!-- <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 9">
        <div style="height: 70%; width: 100%">
          <div class="wheel">
            <div class="workd_media" style="height: 100%">
              <video-player
                class="video-player vjs-custom-skin"
                :playsinline="true"
                :options="playerO[0]"
                @play="onPlayerPlay($event)"
                style="width: 90%; height: 100%; margin: 0 0 0 30px"
              ></video-player>
            </div>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="isBlock = 8">返回</div>
          </div>
        </div>
      </div>-->

      <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 10">
        <div style="height: 70%; width: 100%">
          <div class="wheel" style="height: 520px; width: 100%; margin: 0 0 20px 30px">
            <iframe
              webkitallowfullscreen
              mozallowfullscreen
              allowfullscreen
              style="width: 100%; height: 100%; border: none"
              :src="pptImgUrl"
            ></iframe>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="isBlock = 8">返回</div>
          </div>
        </div>
      </div>
      <div class="answerBox tools_box" v-if="isBlock == 11">
        <div style="height: 100%; width: 100%">
          <div class="wheel" style="height: 80%; width: 100%">
            <div class="memberBox" style="max-height: 100%" v-if="worksList.length">
              <div
                v-for="(item, index) in worksList"
                :key="index"
                @click="getEv(item.upload, item.sName)"
              >{{ item.sName }}</div>
            </div>
            <div v-else>暂无学生评价</div>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="isBlock = 0">关闭</div>
          </div>
        </div>
      </div>
      <div class="answerBox tools_box" v-if="isBlock == 12">
        <div style="height: 100%; width: 100%">
          <div class="wheel" style="height: 80%; width: 100%">
            <div style="height: 100%; overflow: auto">
              <div style="margin-bottom: 20px">{{ Sname }}</div>
              <div class="score_box">
                <span>聚焦主题</span>
                <el-rate v-model="rate.ca" disabled></el-rate>
              </div>
              <div class="score_box">
                <span>有开头结尾</span>
                <el-rate v-model="rate.sia" disabled></el-rate>
              </div>
              <div class="score_box">
                <span>语言正确,流畅</span>
                <el-rate v-model="rate.zia" disabled></el-rate>
              </div>
              <div class="score_box">
                <span>书写规范,美观</span>
                <el-rate v-model="rate.qia" disabled></el-rate>
              </div>
            </div>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="isBlock = 11">返回</div>
          </div>
        </div>
      </div>
      <div class="answerBox tools_box" v-if="isBlock == 13">
        <div style="height: 100%; width: 100%">
          <div class="wheel" style="height: 80%; width: 100%">
            <div style="height: 100%; overflow: auto">
              <div style="margin-bottom: 20px">{{ Sname }}</div>
              <div
                v-if="
                  tools[steps].tools && tools[steps].tools.indexOf(27) != -1
                "
              >
                <div v-for="(tk, tIndex) in 7" :key="tIndex" class="tkCss">
                  <div style="margin-right: 10px; font-size: 18px">{{ tIndex + 1 }}、</div>
                  <el-select v-model="tkAnswer[tIndex]" placeholder="请选择答案" disabled>
                    <el-option
                      v-for="(tkA, tkAIndex) in tkAnswerBox"
                      :key="tkAIndex"
                      :label="tkA"
                      :value="tkA"
                    ></el-option>
                  </el-select>
                  <span
                    v-if="tiankongAnswer.length"
                    class="tiankongAnswer"
                    :class="{
                    tfalse: tiankongAnswer[tIndex] != tkAnswer[tIndex],
                  }"
                  >正确答案：{{ tiankongAnswer[tIndex] }}</span>
                </div>
              </div>
              <div v-if="tools[steps].tools && tools[steps].tools.indexOf(9) != -1">
                <div class="choose_style">
                  <span :class="tkAnswer.indexOf(1) != -1 ? 'isChoose' : ''">A</span>
                  <span :class="tkAnswer.indexOf(2) != -1 ? 'isChoose' : ''">B</span>
                  <span :class="tkAnswer.indexOf(3) != -1 ? 'isChoose' : ''">C</span>
                  <span :class="tkAnswer.indexOf(4) != -1 ? 'isChoose' : ''">D</span>
                </div>
              </div>
            </div>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="selectStudentByScoolPPt(1)">返回</div>
          </div>
        </div>
      </div>
      <div class="answerBox tools_box" v-if="isBlock == 14">
        <div style="height: 100%; width: 100%">
          <div class="wheel" style="height: 80%; width: 100%">
            <div style="height: 100%; overflow: auto">
              <div v-for="(item, index) in worksList" :key="index" class="fill_box">
                <span>{{ index + 1 }}、{{ item.sName }}</span>
                <span
                  v-for="(item, index) in JSON.parse(item.upload)"
                  :key="index"
                >{{ index + 1 }}、{{ item }}</span>
              </div>
            </div>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="selectStudentByScoolPPt(1)">返回</div>
          </div>
        </div>
      </div>
      <div class="answerBox tools_box" v-if="isBlock == 15">
        <div style="height: 100%; width: 100%">
          <div class="wheel" style="height: 80%; width: 100%">
            <div style="height: 100%; overflow: auto">
              <audio
                style="margin: 0 auto; display: block"
                :src="audioUrl"
                controls="controls"
                ref="audio"
              >Your browser does not support the audio element.</audio>
            </div>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="isBlock = 8">返回</div>
          </div>
        </div>
      </div>
      <div class="answerBox tools_box" :class="{ fullStyle: full }" v-if="isBlock == 16">
        <div style="height: 70%; width: 100%">
          <div class="wheel">
            <div style="height: 100%">
              <video-player
                class="video-player vjs-custom-skin"
                :playsinline="true"
                :options="playerO[0]"
                @play="onPlayerPlay($event)"
                style="width: 90%; height: 100%; margin: 0 0 0 30px"
              ></video-player>
            </div>
          </div>
          <div class="nextStepBox" style="margin-top: 5%">
            <div class="nextStepOne" @click="isBlock = 4">返回</div>
          </div>
        </div>
      </div>
    </div>

    <div class="blackBottomB">
      <div style="display: flex">
        <div
          class="blackButton"
          @click="selectStudentByScoolPPt(1)"
          v-if="
            (tools[steps].tools && tools[steps].tools.indexOf(9) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(27) != -1)
          "
        >查看学生答题情况</div>
        <div
          class="blackButton"
          @click="isBlock = 2"
          v-if="
            (tools[steps].tools && tools[steps].tools.indexOf(1) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(3) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(6) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(7) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(10) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(13) != -1)
          "
        >查看工具</div>
        <div
          class="blackButton"
          @click="selectStudentByScoolPPt(2)"
          v-if="tools[steps].tools && tools[steps].tools.indexOf(12) != -1"
        >选择学生回答</div>
        <div
          class="blackButton"
          @click="selectSWork2(4)"
          v-if="
            (tools[steps].tools && tools[steps].tools.indexOf(1) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(3) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(6) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(7) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(10) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(16) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(29) != -1) ||
            (tools[steps].tools && tools[steps].tools.indexOf(13) != -1)
          "
        >查看作业</div>
        <div
          class="blackButton"
          @click="selectSWork2(6)"
          v-if="tools[steps].tools && tools[steps].tools.indexOf(14) != -1"
        >查看评价</div>
        <!-- <div
          class="blackButton"
          @click="selectFile"
          v-if="tools[steps].file && tools[steps].file.length"
        >查看附件</div>-->
      </div>
    </div>
    <el-dialog
      title="选择答题"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div
        style="text-align: center; padding: 20px 0 50px 0; font-size: 18px"
      >是否让“{{ answerStudent.name }}”同学进行单独答题？</div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="pick"
      >确定</div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">正在开发中！</div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible1 = false"
      >确定</div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">课程结束后才有报告！</div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible2 = false"
      >确定</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>
    <ImgDraw :drawShow="drawShow" @closeDraw="closeDraw" :bg="bg"></ImgDraw>
    <img id="img1" ref="img1" hidden="hidden" />
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../components/tools/wangEnduit";
import AnswerData from "./components/answerData";
import pdf from "./components/pdf";
import ImgDraw from "./components/imgDraw/imgDraw";
import Time from "../tools/time.vue";
export default {
  components: { EditorBar, AnswerData, pdf, ImgDraw, Time },
  data() {
    return {
      pdfUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E4%B8%8A%E8%AF%BE%E8%AF%BE%E4%BB%B6---%E4%BA%94%E4%B8%8Bintroduce%20a%20festival%20%28Final%20%29%281%291661829428281.pdf",
      pptImgUrl: "",
      isLoading: false,
      full: false,
      drawShow: false,
      bg: null,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      cid: this.$route.query.cid,
      oid: this.$route.query.oid,
      mr: require("../../assets/icon/kc1.png"),
      timu: [],
      // a: false,
      // b: false,
      // c: false,
      steps: 0,
      isBlock: 0,
      timeDialogVisible: false,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      toolCount: 0,
      answerBox: "",
      answer: [
        { name: "A.1568" },
        { name: "B.720" },
        { name: "C.1728" },
        { name: "D.480" },
      ],
      studentArray: [],
      studentArray2: [],
      askCount: 0,
      answerJson: {
        A: 0,
        B: 0,
        C: 0,
        D: 0,
      },
      answerStudent: "",
      // {
      //   file: [
      //     {
      //       name: "音频1.MP3",
      //       src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%9F%B3%E8%BD%BB%E9%A2%82%20-%20%E6%BA%AF%EF%BC%88%E9%92%A2%E7%90%B4%E7%89%88%EF%BC%891661673251415.mp3",
      //     },
      //   ],
      // }
      tools: [
        "",
        "",
        {
          file: [
            {
              name: "视频1.mp4",
              src:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
            },
          ],
        },
        "",
        { tools: [9] },
        { tools: [9] },
        { tools: [9] },
        { tools: [9] },
        { tools: [9] },
        { tools: [12] },
        {
          tools: [27],
          answer: [
            "Time",
            "Weather",
            "Activities before the festival",
            "Activities during the festival",
            "Food",
            "Reason",
            "Feelings",
          ],
        },
        {
          file: [
            {
              name: "视频2.mp4",
              src:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
            },
          ],
        },
        { tools: [9] },
        { tools: [3, 28] },
        { tools: [16] },
        { tools: [14] },
        "",
        "",
        { tools: [29] },
        "",
        "",
      ],
      //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价 15、问答 16、作业提交 17、学习资料 18、训练平台 19、目标管理 20、课程设计 21、编程平台 22、AI体验 23、python 24、AI平台
      howTools: 0,
      worksDetail: [],
      worksList: [],
      toolsList: [],
      isNext: false,
      rateList: {
        ca: 5,
        sia: 5,
        content: "老师讲得真好",
      },
      videoList: [],
      videoList2: [], //音频
      fileList: [],
      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, //全屏按钮
        },
      },
      playerO: {},
      videoindex: 0,
      rate: {},
      tkAnswerBox: [
        "Feelings",
        "Weather",
        "Activities before the festival",
        "Origin",
        "Food",
        "Time",
        "Activities during the festival",
        "Reason",
      ],
      tkAnswer: [],
      Sname: "",
      audioUrl: "",
      timerAnswer: null,
      videoBlock: 0,
      Vwidth: 0,
      tiankongAnswer: [],
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    jump(cid) {
      window.parent.postMessage({ cid: cid, type: "1" }, "*");
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
    },
    init() {},
    handleClose(done) {
      done();
    },
    //uuid生成
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
        c
      ) {
        var r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    addTool(t) {
      if (t == 1) {
        window.parent.postMessage({ tools: "1" }, "*");
      } else if (t == 3) {
        window.parent.postMessage({ tools: "3" }, "*");
      } else if (t == 7) {
        window.parent.postMessage({ tools: "7" }, "*");
      }
    },
    checkStudentAnswer() {
      // this.isBlock = 6;
      for (var i = 0; i < this.studentArray2.length; i++) {
        this.studentArray2[i].is = 1;
      }
    },
    showMember() {
      let _type = 0;
      if (this.tools[this.steps].tools) {
        if (
          this.tools[this.steps].tools.indexOf(1) != -1 ||
          this.tools[this.steps].tools.indexOf(3) != -1 ||
          this.tools[this.steps].tools.indexOf(6) != -1 ||
          this.tools[this.steps].tools.indexOf(7) != -1 ||
          this.tools[this.steps].tools.indexOf(10) != -1 ||
          this.tools[this.steps].tools.indexOf(16) != -1 ||
          this.tools[this.steps].tools.indexOf(13) != -1
        ) {
          _type = 4;
        } else if (this.tools[this.steps].tools.indexOf(9) != -1) {
          _type = 1;
        } else if (this.tools[this.steps].tools.indexOf(27) != -1) {
          _type = 5;
        } else if (this.tools[this.steps].tools.indexOf(14) != -1) {
          _type = 6;
        } else if (this.tools[this.steps].tools.indexOf(29) != -1) {
          _type = 7;
        }
      }
      let params = {
        uid: "",
        cid: this.cid,
        p: this.steps,
        type: _type,
      };
      this.ajax
        .get(this.$store.state.api + "selectSWork", params)
        .then((res) => {
          let _res = res.data[0];
          let _this = this;
          // this.isBlock = 1;
          for (var i = 0; i < _this.studentArray.length; i++) {
            for (var j = 0; j < _res.length; j++) {
              if (_res[j].userid == _this.studentArray[i].id) {
                _this.studentArray[i].is = 2;
                _this.studentArray[i].answer = _res[j].upload;
              }
            }
          }

          if (
            this.tools[this.steps].tools &&
            this.tools[this.steps].tools.indexOf(9) != -1
          ) {
            this.answerJson = {
              A: 0,
              B: 0,
              C: 0,
              D: 0,
            };
            for (var i = 0; i < _res.length; i++) {
              var a = JSON.parse(_res[i].upload);
              if (a.indexOf(1) != -1) {
                _this.answerJson.A++;
              }
              if (a.indexOf(2) != -1) {
                _this.answerJson.B++;
              }
              if (a.indexOf(3) != -1) {
                _this.answerJson.C++;
              }
              if (a.indexOf(4) != -1) {
                _this.answerJson.D++;
              }
            }
          }
          if (
            this.tools[this.steps].tools &&
            this.tools[this.steps].tools.indexOf(27) != -1
          ) {
            this.worksList = [];
            for (var i = 0; i < _res.length; i++) {
              this.worksList.push({
                upload: _res[i].upload,
                sName: _res[i].username,
                time: _res[i].time,
              });
            }
          }
        })
        .catch((err) => {
          // this.$message.error("查询失败");
          console.error(err);
        });
    },
    getOAnswer(answer, name) {
      if (!answer) {
        return;
      }
      this.tkAnswer = JSON.parse(answer);
      this.Sname = name;
      if (this.tools[this.steps].answer) {
        this.tiankongAnswer = this.tools[this.steps].answer;
      }
      this.isBlock = 13;
    },
    whoAnswer(item, index) {
      for (var i = 0; i < this.studentArray2.length; i++) {
        this.studentArray2[i].is = 1;
      }
      this.studentArray2[index].is = 2;
      this.answerStudent = item;
      this.dialogVisible = true;
    },
    pick() {
      let params = [
        {
          h: JSON.stringify({ type: 2, userid: this.answerStudent.id }),
          cid: this.cid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePPTHandle", params)
        .then((res) => {
          this.answerStudent = "";
          this.dialogVisible = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getWidth(total) {
      this.Vwidth = total;
    },
    getPage(page) {
      console.log(page);
      let params = [
        {
          page: page,
          id: this.cid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePptPage", params)
        .then((res) => {
          this.steps = page - 1;
          this.isBlock = 0;
          if (
            this.tools[this.steps].file &&
            this.tools[this.steps].file.length
          ) {
            this.selectFile();
          } else {
            this.videoBlock = 0;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectStudentByScoolPPt(type) {
      let params = {
        oid: this.oid,
        cid: this.cid,
      };
      this.ajax
        .get(this.$store.state.api + "selectStudentByScoolPPt", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            this.studentArray = [];
            this.studentArray2 = [];
            for (var i = 0; i < res.data[0].length; i++) {
              this.studentArray.push({
                id: res.data[0][i].userid,
                name: res.data[0][i].name,
                is: 1,
              });
              this.studentArray2.push({
                id: res.data[0][i].userid,
                name: res.data[0][i].name,
                is: 1,
              });
            }
          }
          if (this.timerAnswer) {
            clearInterval(this.timerAnswer);
            this.timerAnswer;
          }

          if (type == 1) {
            this.showMember();
            this.timerAnswer = setInterval(() => {
              this.showMember();
            }, 5000);
            this.isBlock = 1;
          } else if (type == 2) {
            this.checkStudentAnswer();
            this.timerAnswer = setInterval(() => {
              this.checkStudentAnswer();
            }, 5000);
            this.isBlock = 6;
          }
        })
        .catch((err) => {
          // this.$message.error("查询失败");
          console.error(err);
        });
    },
    selectSWork2(type) {
      let _type = type;
      if (this.timerAnswer) {
        clearInterval(this.timerAnswer);
        this.timerAnswer = null;
      }
      this.selectSWork(_type);
      this.timerAnswer = setInterval(() => {
        this.selectSWork(_type);
      }, 5000);
      if (_type == 4) {
        this.isBlock = 4;
      } else {
        this.isBlock = 11;
      }
    },
    selectSWork(type) {
      let _type = 0;
      if (this.tools[this.steps].tools) {
        if (
          this.tools[this.steps].tools.indexOf(1) != -1 ||
          this.tools[this.steps].tools.indexOf(3) != -1 ||
          this.tools[this.steps].tools.indexOf(6) != -1 ||
          this.tools[this.steps].tools.indexOf(7) != -1 ||
          this.tools[this.steps].tools.indexOf(10) != -1 ||
          this.tools[this.steps].tools.indexOf(16) != -1 ||
          this.tools[this.steps].tools.indexOf(13) != -1
        ) {
          _type = 4;
        } else if (this.tools[this.steps].tools.indexOf(9) != -1) {
          _type = 1;
        } else if (this.tools[this.steps].tools.indexOf(27) != -1) {
          _type = 5;
        } else if (this.tools[this.steps].tools.indexOf(14) != -1) {
          _type = 6;
        } else if (this.tools[this.steps].tools.indexOf(29) != -1) {
          _type = 7;
        }
      }
      this.worksList = [];
      let params = {
        uid: "",
        cid: this.cid,
        p: this.steps,
        type: _type,
      };
      this.ajax
        .get(this.$store.state.api + "selectSWork", params)
        .then((res) => {
          this.worksDetail = res.data[0];
          for (var i = 0; i < this.worksDetail.length; i++) {
            this.worksList.push({
              upload: this.worksDetail[i].upload,
              sName: this.worksDetail[i].username,
              time: this.worksDetail[i].time,
            });
          }
        })
        .catch((err) => {
          // this.$message.error("查询失败");
          console.error(err);
        });
    },
    getEv(rate, name) {
      this.rate = JSON.parse(rate);
      this.Sname = name;
      this.isBlock = 12;
    },
    selectFile() {
      this.fileList = [];
      this.videoList = [];
      this.videoList2 = [];
      var a = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
      var b = this.tools[this.steps].file;
      for (var i = 0; i < b.length; i++) {
        if (
          a.indexOf(
            b[i].src
              .split(".")
              [b[i].src.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.fileList.push(b[i]);
        } else if (
          b[i].src
            .split(".")
            [b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
        ) {
          this.videoList2.push(b[i]);
        } else {
          this.videoList.push(b[i]);
        }
      }

      if (this.videoList.length) {
        this.playVideo();
      } else {
        this.isBlock = 8;
      }
    },
    openFile(u) {
      this.pptImgUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + u;
      this.isBlock = 10;
    },
    playVideo() {
      // u, i
      var d = JSON.parse(JSON.stringify(this.playerOptions));
      // d.sources[0].src = u;
      d.sources[0].src = this.videoList[0].src;
      this.playerO[0] = d;
      // this.isBlock = 9;
      this.videoBlock = 9;
    },
    playVideo2(u, i) {
      this.audioUrl = u;
      this.isBlock = 15;
    },
    switchVideo(media) {
      this.playerO = {};
      this.playerOptions.poster = "";
      this.playerOptions.sources[0].src = media;
      this.playerO = this.playerOptions;
    },
    onPlayerPlay() {},
    previewImg(url) {
      // this.$hevueImgPreview(url);
      // this.$hevueImgPreview(url);
      this.drawShow = true;
      this.bg = url;
      // this.setAvatarBase64(url, (base64) => {
      //   this.$nextTick(() => {
      //     this.drawShow = true;
      //     this.bg = base64;
      //   });
      // });
    },
    lookvideo(u) {
      var d = JSON.parse(JSON.stringify(this.playerOptions));
      d.sources[0].src = u;
      this.playerO[0] = d;
      this.isBlock = 16;
    },
    closeDraw() {
      this.bg = null;
      this.drawShow = false;
    },
    fullTools() {
      this.full = !this.full;
    },
    closeTools() {
      this.full = false;
      this.isBlock = 2;
    },
    // 将网络图片转换成base64格式
    transBase64FromImage(image) {
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      // 可选其他值 image/jpeg
      return canvas.toDataURL("image/jpeg");
    },
    // 设置需要展示的图片  base64
    setAvatarBase64(src, callback) {
      let _this = this;
      let image = new Image();
      // let image = this.$refs.img1;
      // 处理缓存
      // image.src = src + "?v=" + Math.random();
      image.src = src;
      // 支持跨域图片
      // image.crossOrigin = "anonymous";
      // crossorigin="anonymous"
      image.onload = function () {
        let base64 = _this.transBase64FromImage(image);
        callback && callback(base64);
        // console.log(base64);
        // return base64
      };
    },
  },
  created() {},
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 9px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.blackBottom {
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.imgMiddle {
  width: 100%;
  height: calc(100% - 45px);
  position: relative;
  /* max-height: 920px; */
}

.imgMiddle > img,
.imghalf > img,
.szt > img,
.logoLive > img,
.close > img {
  width: 100%;
  height: 100%;
  /* max-height: 920px; */
}

.blackBottomB {
  position: sticky;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.blackBottomB > div:nth-child(1) {
  margin-left: 10px !important;
}

.blackButton {
  color: #fff;
  background: #066ebe;
  /* width: 100px; */
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 5px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
  padding: 0 10px;
}

.isNoOther {
  width: 100%;
  /* height: 100%; */
  height: calc(100% - 45px);
  display: flex;
}

.imghalf {
  width: 60% !important;
  height: calc(100% - 45px);
  /* max-height: 920px; */
}
.answerBox {
  padding-left: 25px;
  padding: 25px;
  box-sizing: border-box;
  height: calc(100% - 60px);
  /* max-height: 800px;
  overflow: auto; */
}
.answerTimuBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 15px;
}
.memberBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  max-height: 80%;
  overflow: auto;
}
.memberBox > div {
  background: rgb(79 213 163);
  width: 120px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin: 0 15px 15px 0;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
  box-sizing: border-box;
}

.memberBox .pAnswer {
  background: rgb(0 115 72);
}

.viewSta {
  background: rgb(97, 97, 97);
  color: #bebebe;
  margin: 20px auto 20px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
.szt {
  width: 100%;
  margin: 20px auto;
}
.sztFooter {
  padding: 20px 10px 50px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.toolList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.tools > div:nth-child(1) {
  width: 60px;
}
.tools > div:nth-child(1) > img,
.workImg > img,
.workTx > img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-fit: contain;
  cursor: pointer;
  margin: 0;
}
.nextStepBox {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.nextStepOne {
  background: #6b92c9;
  color: #fff;
  width: 110px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

.nextStepOne,
.nextStepOne {
  margin-left: 10px;
}

.logoLive {
  width: 35px;
}
.anserBoxCss {
  box-sizing: border-box;
  padding: 20px 0;
}
.anserBoxCss >>> .el-radio__label {
  font-size: 18px;
}
.anserBoxCss >>> .el-radio__inner {
  border-radius: 0px !important;
}

.choose_style {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0 30px;
}

.choose_style span {
  background: #f8f9ff;
  color: #677fff;
  border: 1px solid #95b5ff;
  padding: 15px 20px;
  font-size: 25px;
  border-radius: 18px;
  cursor: pointer;
}

.choose_style span + span {
  margin-left: 25px;
}

.choose_style .active {
  color: #fff;
  background: #5e78fa;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  cursor: pointer;
}
.workBox {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 700px;
  overflow: auto;
}
.works {
  width: 31%;
  border: 1px solid #ececec;
  /* height: 160px; */
  margin: 0 10px 10px 0;
  /* cursor: pointer; */
  min-width: 180px;
  border-radius: 3px;
  overflow: hidden;
  height: 183px;
}
.workImg {
  width: 100%;
  height: 117px;
}
.workDetail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 0 0;
  flex-direction: column;
}
.workLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  padding: 0px 5px;
  box-sizing: border-box;
}
.workTx {
  width: 25px;
}
.workName {
  font-size: 14px;
  padding-left: 13px;
}
.workRight {
  font-size: 14px;
  color: #ccc;
  margin: 0 0 3px;
  padding: 0 5px;
  width: 100%;
  box-sizing: border-box;
}

.workBtn {
  width: 100%;
  background: rgb(110 145 203);
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 5px 0;
}

.returnButton {
  position: absolute;
  bottom: 20px;
  width: 230px;
  background: #616161;
  left: 35%;
  color: #ababab;
  text-align: center;
  border-radius: 5px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
}

.tools_title {
  background: #000;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}
.tools_title span {
  color: #fff;
}
.tools_title div {
  display: flex;
  align-items: center;
}
.full,
.closeImg {
  height: 22px;
  cursor: pointer;
}
.tools_title img,
img {
  margin-left: 10px;
}

.tools_box {
  width: 38.5%;
  max-width: 38.5%;
  overflow: auto;
  background: rgb(255, 255, 255);
  height: 91.5%;
  position: relative;
  margin: 10px 15px;
}

.tools_child_box {
  width: 100%;
  height: calc(90% - 40px);
  padding-top: 40px;
}

.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
}

.toolCss {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 150px;
  align-items: center;
  text-align: center;
}
.toolImg {
  width: 70px;
  /* height: 70px; */
  cursor: pointer;
}
.toolImg > img {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
.toolImg > div {
  font-size: 14px;
}
.score_box {
  font-size: 14px;
}
.score_box >>> .el-rate {
  margin: 10px 0 20px 0;
}
.score_box >>> .el-rate__icon {
  font-size: 23px;
}
.bz >>> .el-textarea__inner {
  width: 40%;
  background: #f9f9f9;
  border: 1px solid #afafaf;
  border-radius: 0px;
}
.fileBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  width: 100%;
}
.fileListCss {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 15px 15px 0;
}
.fileCss {
  width: 70px;
  height: 70px;
  cursor: pointer;
  margin: 0 0 10px 0;
}
.fileCss > img {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wheel {
  width: 100%;
  height: 100%;
}
.video-player >>> .video-js {
  height: 100%;
}

.tkCss {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}

.fill_box + .fill_box {
  margin-top: 10px;
}
.fill_box span + span {
  margin-left: 10px;
}
.choose_style {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0 30px;
}

.choose_style span {
  background: #f8f9ff;
  color: #677fff;
  border: 1px solid #95b5ff;
  padding: 15px 20px;
  font-size: 25px;
  border-radius: 18px;
  cursor: pointer;
}

.choose_style span + span {
  margin-left: 25px;
}

.isChoose {
  color: #fff !important;
  background: #5e78fa !important;
}

.workd_media {
  /* width: 1497.42px; */
  /* width: auto; */
  height: calc(100% - 100px);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tiankongAnswer {
  margin-left: 10px;
  color: #1834c0;
}

.tfalse {
  color: rgb(189, 30, 30) !important;
}
</style>