pbl-teacher-table/src/components/pages/pocAiClassroom/doTask.vue

<template>
  <div class="doTask">
    <!-- <div class="dt_back" @click.stop="back()">返回</div> -->
    <div class="dt_main" v-if="!isSubmit">
      <div class="dt_m_head">
        <div class="dt_m_h_chapter">{{ taskMessage.chapter }}</div>
        <div class="dt_m_h_message">
          {{ taskMessage.grade }}<span>|</span>{{ taskMessage.semester
          }}<span>|</span>{{ taskMessage.edition }}<span>|</span
          >{{ taskMessage.subject }}
        </div>
        <span class="dt_m_h_back" @click.stop="back">
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M10.1973 15L10.1717 14.9836L2.5 10.0567L10.2042 5V5.03346L10.2016 8.82213C11.3364 8.8539 12.4635 8.91767 13.0862 9.04175C13.1629 9.05701 13.2492 9.073 13.3424 9.09026C13.8173 9.17824 14.4717 9.29947 14.9413 9.52789C15.5469 9.82252 16.1378 10.2494 16.4445 10.5914C17.4895 11.7566 17.4999 13.7513 17.4999 13.7513C17.4999 13.7513 17.336 12.921 16.7963 12.4144C16.3823 12.0259 16.1246 11.8067 15.517 11.6852C14.6833 11.5184 12.283 11.5278 10.1997 11.5739L10.1973 15Z"
              fill="black"
            />
          </svg>

          返回
        </span>
      </div>
      <div class="dt_m_box">
        <div class="dt_m_b_left">
          <div class="dt_m_b_l_head">
            <div class="dt_m_l_h_title" v-text="taskMessage.title"></div>
            <div class="dt_m_l_h_changeChapter" @click.stop="changeChapter()">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10.0417 2.20921C10.2722 1.93026 10.6458 1.93026 10.8763 2.20921L13.8271 5.78064C13.9959 5.98492 14.0464 6.29215 13.9551 6.55906C13.8637 6.82597 13.6485 7 13.4098 7H2.59016C2.26423 7 2 6.6802 2 6.28571C2 5.89123 2.26423 5.57143 2.59016 5.57143H11.985L10.0417 3.21936C9.81122 2.94042 9.81122 2.48816 10.0417 2.20921Z"
                  fill="#3681FC"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M2.04494 9.44094C2.13629 9.17403 2.35148 9 2.59018 9H13.4098C13.7358 9 14 9.3198 14 9.71429C14 10.1088 13.7358 10.4286 13.4098 10.4286H4.01496L5.9583 12.7806C6.18878 13.0596 6.18878 13.5118 5.9583 13.7908C5.72783 14.0697 5.35416 14.0697 5.12369 13.7908L2.17287 10.2194C2.00409 10.0151 1.95359 9.70785 2.04494 9.44094Z"
                  fill="#3681FC"
                />
              </svg>

              <span>切换章节</span>
            </div>
          </div>
          <!-- <div class="dt_m_b_l_title">{{ classTitle }}</div> -->
          <div class="dt_m_b_l_task">
            <div class="dt_m_b_l_t_title">
              {{ showTaskIndex + 1 }}.
              <span>{{
                typeof taskList[showTaskIndex].answer == "object"
                  ? "[多选题]"
                  : "[单选题]"
              }}</span
              >{{ taskList[showTaskIndex].teststitle }}
            </div>
            <div class="dt_m_b_l_t_choseList">
              <div
                :class="[
                  'dt_m_b_l_t_cl_item',
                  typeof taskList[showTaskIndex].answer == 'object'
                    ? taskList[showTaskIndex].answer2.includes(index)
                      ? 'dt_m_b_l_t_cl_itemActive'
                      : ''
                    : taskList[showTaskIndex].answer2 === index
                    ? 'dt_m_b_l_t_cl_itemActive'
                    : ''
                ]"
                v-for="(item, index) in taskList[showTaskIndex].checkList"
                @click.stop="choseAnswer(index)"
                :key="showTaskIndex + '-' + index"
              >
                <div>
                  <span></span>
                </div>
                <span v-if="item.imgType == 1"
                  >{{ choseList[index] }}<span>.</span
                  ><img :src="item.src" @click.stop="$hevueImgPreview(item.src)"
                /></span>
                <span v-else
                  >{{ choseList[index] }}<span>.</span>{{ item }}</span
                >
              </div>
            </div>
          </div>
          <div class="dt_m_b_l_bottom">
            <div class="dt_m_b_l_b_seekAssist" v-show="!showSeekAssist" @click.stop="seekAssist()">
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M16.0911 7.91C16.0911 4.394 13.1601 1.563 9.60806 1.727C6.44706 1.873 3.87806 4.432 3.72106 7.593C3.59906 10.037 4.89706 12.189 6.86206 13.3V15.434C6.86206 15.911 7.24906 16.299 7.72706 16.299H12.0801C12.5571 16.299 12.9451 15.912 12.9451 15.434V13.3C14.8221 12.237 16.0911 10.222 16.0911 7.91Z"
                  fill="#AECCFE"
                />
                <path
                  d="M10.2181 1.729C10.4281 1.807 11.9881 2.424 13.2791 3.889C15.2841 6.165 15.2821 9.617 13.2351 11.856C12.9801 12.135 12.6881 12.412 12.3561 12.682C12.1591 12.842 12.0411 13.08 12.0411 13.333V15.047C12.0411 15.241 11.9011 15.407 11.7091 15.432C11.6531 15.439 11.5921 15.443 11.5251 15.443H7.95805C7.43905 15.443 7.17406 15.443 7.05206 15.189C7.12906 15.763 6.45606 16.227 8.51006 16.227H11.7931C11.7581 16.252 11.7191 16.276 11.6741 16.298H12.0781C12.2001 16.298 12.3151 16.273 12.4201 16.227H12.4961L12.4891 16.194C12.6261 16.12 12.7406 16.0102 12.8203 15.8764C12.9001 15.7426 12.9421 15.5898 12.9421 15.434V13.3C14.8211 12.238 16.0901 10.222 16.0901 7.91C16.0911 4.597 13.4891 1.894 10.2181 1.729Z"
                  fill="#3681FC"
                />
                <path
                  d="M7.76294 7.91C7.76294 8.19089 7.81827 8.46904 7.92576 8.72856C8.03326 8.98807 8.19081 9.22387 8.38944 9.4225C8.58806 9.62112 8.82386 9.77868 9.08338 9.88617C9.3429 9.99367 9.62104 10.049 9.90194 10.049C10.1828 10.049 10.461 9.99367 10.7205 9.88617C10.98 9.77868 11.2158 9.62112 11.4144 9.4225C11.6131 9.22387 11.7706 8.98807 11.8781 8.72856C11.9856 8.46904 12.0409 8.19089 12.0409 7.91C12.0409 7.6291 11.9856 7.35095 11.8781 7.09144C11.7706 6.83192 11.6131 6.59612 11.4144 6.3975C11.2158 6.19887 10.98 6.04131 10.7205 5.93382C10.461 5.82632 10.1828 5.771 9.90194 5.771C9.62104 5.771 9.3429 5.82632 9.08338 5.93382C8.82386 6.04131 8.58806 6.19887 8.38944 6.3975C8.19081 6.59612 8.03326 6.83192 7.92576 7.09144C7.81827 7.35095 7.76294 7.6291 7.76294 7.91Z"
                  fill="#FFAF77"
                />
                <path
                  d="M9.78495 9.95702C10.0519 9.97802 10.3139 9.98802 10.5669 9.99102C11.5139 9.77102 12.2199 8.92302 12.2199 7.90902C12.2199 6.72702 11.2619 5.77002 10.0809 5.77002C9.93995 5.77002 9.80295 5.78402 9.66895 5.81002L9.94795 5.97402C9.94795 5.97402 11.1929 6.75002 11.1929 7.84102C11.1929 8.93302 10.4069 9.72802 9.78495 9.95702Z"
                  fill="#E67F36"
                />
                <path
                  d="M12.442 7.91009C12.442 6.51009 11.303 5.37109 9.90301 5.37109C8.50301 5.37109 7.36401 6.51009 7.36401 7.91009C7.36401 9.17409 8.29301 10.2251 9.50301 10.4181V13.9381C9.50301 14.1591 9.68201 14.3381 9.90301 14.3381C10.124 14.3381 10.303 14.1591 10.303 13.9381V10.4181C11.513 10.2251 12.442 9.17409 12.442 7.91009ZM9.90201 9.64909C8.94301 9.64909 8.16301 8.86909 8.16301 7.91009C8.16301 6.95109 8.94301 6.17109 9.90201 6.17109C10.861 6.17109 11.641 6.95109 11.641 7.91009C11.641 8.86909 10.861 9.64909 9.90201 9.64909Z"
                  fill="#211D38"
                />
                <path
                  d="M12.0781 16.6981H7.72611C7.02911 16.6981 6.46111 16.1311 6.46111 15.4341V13.5291C4.39811 12.2651 3.20011 10.0051 3.32111 7.57311C3.48811 4.22611 6.24111 1.48211 9.59011 1.32711C11.4111 1.24311 13.1381 1.88811 14.4521 3.14311C15.7671 4.39911 16.4921 6.09211 16.4921 7.90911C16.4921 10.2011 15.2921 12.3331 13.3431 13.5281V15.4331C13.3431 16.1311 12.7761 16.6981 12.0781 16.6981ZM9.90511 2.12011C9.81311 2.12011 9.72011 2.12211 9.62711 2.12611C6.68611 2.26211 4.26711 4.67211 4.12111 7.61211C4.01111 9.81811 5.13711 11.8641 7.05911 12.9511C7.12065 12.986 7.17184 13.0366 7.20749 13.0978C7.24314 13.1589 7.26199 13.2283 7.26211 13.2991V15.4331C7.26211 15.6891 7.47011 15.8971 7.72711 15.8971H12.0801C12.3361 15.8971 12.5451 15.6891 12.5451 15.4331V13.3001C12.5451 13.1561 12.6231 13.0231 12.7481 12.9521C14.5651 11.9251 15.6931 9.99311 15.6931 7.91011C15.6931 6.31311 15.0571 4.82611 13.9011 3.72211C12.8121 2.68311 11.4021 2.12011 9.90511 2.12011Z"
                  fill="#211D38"
                />
                <path
                  d="M4.6361 9.55986C4.5271 9.55986 4.4261 9.48786 4.3951 9.37786C4.2271 8.78086 4.1581 8.15986 4.1891 7.53186C4.2071 7.17586 4.2581 6.82186 4.3421 6.47786C4.3751 6.34386 4.4121 6.20986 4.4541 6.07986C4.46416 6.04857 4.4803 6.01957 4.50159 5.99454C4.52288 5.9695 4.5489 5.94891 4.57817 5.93395C4.60743 5.91899 4.63936 5.90996 4.67213 5.90737C4.70489 5.90478 4.73784 5.90868 4.7691 5.91886C4.9001 5.96086 4.9731 6.10186 4.9301 6.23386C4.8921 6.35186 4.8581 6.47386 4.8281 6.59586C4.7521 6.90986 4.7051 7.23286 4.6891 7.55686C4.6601 8.13086 4.7241 8.69786 4.8771 9.24286C4.9141 9.37586 4.8371 9.51386 4.7041 9.55086C4.6811 9.55686 4.6591 9.55986 4.6361 9.55986ZM5.1211 5.41986C5.0801 5.41986 5.0381 5.40986 5.0001 5.38786C4.97137 5.37193 4.94607 5.35049 4.92565 5.32478C4.90522 5.29906 4.89007 5.26956 4.88106 5.23798C4.87205 5.2064 4.86935 5.17335 4.87314 5.14072C4.87692 5.1081 4.8871 5.07654 4.9031 5.04786C5.2636 4.40034 5.74536 3.82827 6.3221 3.36286C6.4291 3.27586 6.5871 3.29286 6.6741 3.39986C6.7611 3.50686 6.7441 3.66486 6.6371 3.75186C6.1071 4.18086 5.6711 4.69886 5.3401 5.29186C5.2941 5.37286 5.2091 5.41986 5.1211 5.41986ZM7.5241 3.19586C7.4321 3.19586 7.3431 3.14486 7.2991 3.05586C7.2381 2.93186 7.2891 2.78186 7.4131 2.72086C7.6881 2.58586 7.9781 2.47186 8.2731 2.38186C8.4051 2.34186 8.5451 2.41686 8.5851 2.54886C8.6251 2.68086 8.5501 2.82086 8.4181 2.86086C8.1491 2.94186 7.8851 3.04586 7.6341 3.16986C7.5991 3.18786 7.5611 3.19586 7.5241 3.19586Z"
                  fill="white"
                />
                <path
                  d="M12.7521 18.612H7.0521C6.8311 18.612 6.6521 18.433 6.6521 18.212C6.6521 17.991 6.8311 17.812 7.0521 17.812H12.7521C12.9731 17.812 13.1521 17.991 13.1521 18.212C13.1521 18.433 12.9731 18.612 12.7521 18.612Z"
                  fill="#211D38"
                />
                <path
                  d="M8.51611 7.9342C8.50411 7.9342 8.49211 7.9332 8.47911 7.9312C8.44659 7.92645 8.41532 7.91533 8.3871 7.89848C8.35888 7.88163 8.33427 7.85937 8.31466 7.83299C8.29506 7.80661 8.28086 7.77662 8.27287 7.74473C8.26488 7.71285 8.26326 7.67971 8.26811 7.6472C8.32011 7.2922 8.44511 7.0272 8.68411 6.7602C8.70588 6.73519 8.7324 6.71475 8.76214 6.70009C8.79188 6.68543 8.82423 6.67683 8.85733 6.67479C8.89042 6.67275 8.92359 6.67732 8.9549 6.68822C8.98621 6.69912 9.01505 6.71614 9.03972 6.73829C9.06439 6.76045 9.08441 6.78728 9.09861 6.81724C9.11281 6.84721 9.12091 6.87969 9.12243 6.91281C9.12396 6.94594 9.11888 6.97903 9.10749 7.01017C9.09611 7.04131 9.07864 7.06987 9.05611 7.0942C8.88511 7.2852 8.80011 7.4662 8.76211 7.7192C8.75417 7.77878 8.72484 7.83345 8.67958 7.87301C8.63432 7.91256 8.57622 7.93431 8.51611 7.9342Z"
                  fill="white"
                />
                <path
                  d="M4.24707 14.5559C4.22293 14.5019 4.18838 14.4532 4.14541 14.4125C4.10243 14.3719 4.05187 14.3401 3.99661 14.3191C3.94135 14.298 3.88248 14.288 3.82336 14.2897C3.76425 14.2914 3.70604 14.3047 3.65207 14.3289L3.35107 14.4639L3.21607 14.1629C3.19193 14.1089 3.15738 14.0602 3.11441 14.0195C3.07143 13.9789 3.02087 13.9471 2.96561 13.9261C2.91035 13.905 2.85148 13.895 2.79236 13.8967C2.73325 13.8983 2.67504 13.9117 2.62107 13.9359C2.39407 14.0379 2.29307 14.3039 2.39407 14.5309L2.52907 14.8319L2.22807 14.9669C2.00107 15.0689 1.90007 15.3349 2.00107 15.5619C2.03662 15.6411 2.09434 15.7084 2.16726 15.7556C2.24019 15.8028 2.3252 15.8279 2.41207 15.8279C2.47307 15.8279 2.53607 15.8149 2.59607 15.7889L2.89707 15.6539L3.03207 15.9549C3.06762 16.0341 3.12534 16.1014 3.19826 16.1486C3.27119 16.1958 3.3562 16.2209 3.44307 16.2209C3.50407 16.2209 3.56707 16.2079 3.62707 16.1819C3.85407 16.0799 3.95507 15.8139 3.85407 15.5869L3.71907 15.2859L4.02007 15.1509C4.12895 15.1019 4.21398 15.0118 4.25653 14.9003C4.29908 14.7887 4.29568 14.6649 4.24707 14.5559Z"
                  fill="#FFAF77"
                />
                <path
                  d="M15.677 15.1852C15.677 15.3578 15.7456 15.5234 15.8677 15.6455C15.9898 15.7676 16.1553 15.8362 16.328 15.8362C16.5007 15.8362 16.6662 15.7676 16.7883 15.6455C16.9104 15.5234 16.979 15.3578 16.979 15.1852C16.979 15.0125 16.9104 14.8469 16.7883 14.7249C16.6662 14.6028 16.5007 14.5342 16.328 14.5342C16.1553 14.5342 15.9898 14.6028 15.8677 14.7249C15.7456 14.8469 15.677 15.0125 15.677 15.1852Z"
                  fill="#E2E5F1"
                />
              </svg>

              <span>求助</span>
            </div>
            <div class="dt_m_b_l_b_btnArea" v-show="!showSeekAssist">
              <span
                class="dt_m_b_l_b_ba_btnPrev"
                @click.stop="changeTask('prev')"
                >上一题</span
              >
              <!-- v-if="showTaskIndex > 0" -->
              <span
                class="dt_m_b_l_b_ba_btnNext"
                @click.stop="changeTask('next')"
                >下一题</span
              >
              <!-- v-if="taskList.length > showTaskIndex + 1" -->
              <!-- <span
                v-if="showTaskIndex == taskList.length - 1"
                @click.stop="submitTask()"
                >确认提交</span
              > -->
            </div>
          </div>
        </div>
        <div class="dt_m_b_right">
          <div class="dt_m_b_r_time">
            <div class="dt_m_b_r_t_head">
              <svg
                width="20"
                height="20"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M3.75 11.25C3.75 7.79822 6.54822 5 10 5C11.7319 5 13.2984 5.70364 14.431 6.84218C15.5559 7.97295 16.25 9.52981 16.25 11.25C16.25 14.7018 13.4518 17.5 10 17.5C6.54822 17.5 3.75 14.7018 3.75 11.25ZM10 3.75C5.85786 3.75 2.5 7.10786 2.5 11.25C2.5 15.3921 5.85786 18.75 10 18.75C14.1421 18.75 17.5 15.3921 17.5 11.25C17.5 9.56177 16.9417 8.00315 16.0004 6.74983C16.0236 6.73236 16.0458 6.71307 16.0669 6.69194L17.3169 5.44194C17.561 5.19786 17.561 4.80214 17.3169 4.55806C17.0729 4.31398 16.6771 4.31398 16.4331 4.55806L15.1831 5.80806C15.1795 5.81166 15.1759 5.81529 15.1724 5.81896C13.8273 4.53761 12.0051 3.75 10 3.75Z"
                  fill="#17C469"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M7 1.875C7 1.52982 7.33579 1.25 7.75 1.25H12.25C12.6642 1.25 13 1.52982 13 1.875C13 2.22018 12.6642 2.5 12.25 2.5H7.75C7.33579 2.5 7 2.22018 7 1.875Z"
                  fill="#17C469"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10 7.5C10.3452 7.5 10.625 7.77982 10.625 8.125V11.25C10.625 11.5952 10.3452 11.875 10 11.875C9.65482 11.875 9.375 11.5952 9.375 11.25V8.125C9.375 7.77982 9.65482 7.5 10 7.5Z"
                  fill="#17C469"
                />
              </svg>
              <span>计时器</span>
            </div>

            <div class="dt_m_b_r_t_showTime">
              <span>{{ showTime }}</span>
            </div>

            <div class="dt_m_b_r_t_schedule">
              <div class="dt_m_b_r_t_s_box">
                <div
                  class="dt_m_b_r_t_s_b_inner"
                  :style="`width:${schedule}%`"
                ></div>
                <div class="dt_m_b_r_t_s_b_round" :style="`left:${schedule}%`">
                  <span
                    >{{ showTaskIndex + 1 }}<span>/</span
                    >{{ taskList.length }}</span
                  >
                </div>
              </div>
            </div>

            <div class="dt_m_b_r_t_btn" @click.stop="keepTime()">
              <span v-if="timer !== null">暂停计时</span>
              <span v-else>继续计时</span>
            </div>
          </div>

          <div class="dt_m_b_r_taskList">
            <div class="dt_m_b_r_tl_head">
              <div>
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5ZM3 3V13H13V3H3Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7.24631 5.08406L5.56066 6.76971C5.46689 6.86348 5.33972 6.91616 5.20711 6.91616C5.0745 6.91616 4.94732 6.86348 4.85355 6.76971L4 5.91616L4.70711 5.20905L5.20711 5.70905L6.5392 4.37695L7.24631 5.08406Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5.4 9.4001C5.06863 9.4001 4.8 9.66873 4.8 10.0001C4.8 10.3315 5.06863 10.6001 5.4 10.6001C5.73137 10.6001 6 10.3315 6 10.0001C6 9.66873 5.73137 9.4001 5.4 9.4001ZM4 10.0001C4 9.2269 4.6268 8.6001 5.4 8.6001C6.1732 8.6001 6.8 9.2269 6.8 10.0001C6.8 10.7733 6.1732 11.4001 5.4 11.4001C4.6268 11.4001 4 10.7733 4 10.0001Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M8 5.5H12V6.5H8V5.5Z"
                    fill="#E67F36"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M8 9.5H12V10.5H8V9.5Z"
                    fill="#E67F36"
                  />
                </svg>

                <span>答题卡</span>
              </div>

              <div>
                共{{ taskList.length }}道题
                <span>|</span>
                合计100分
              </div>
            </div>
            <div class="dt_m_b_r_tl_boxList">
              <span
                v-for="(item, index) in taskList"
                :key="index"
                :class="[
                  isDoTask(index) ? 'isDoTask' : '',
                  showTaskIndex == index ? 'inDoTask' : ''
                ]"
                @click.stop="showTaskIndex = index"
                >{{ index + 1 }}</span
              >
            </div>
            <div class="dt_m_b_r_tl_bottom">
              <div><span class="isDoTask"></span>已答</div>

              <div><span class="inDoTask"></span>当前</div>

              <div><span></span>未答</div>
            </div>
          </div>

          <div class="dt_m_b_r_bottom">
            <div
              @click.stop="saveTask()"
              v-if="!isDoAllTask && this.showTaskIndex != taskList.length - 1"
            >
              保存
            </div>
            <div
              @click.stop="submitTask()"
              v-if="isDoAllTask || this.showTaskIndex == taskList.length - 1"
            >
              确认提交
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dt_dialogBackground" v-if="showSeekAssist"></div>
    <div class="dt_character">
      <img
        :src="
          characterList.find(i => userInfo.choseCharacter === i.index).image
        "
      />

      <div class="dt_c_message" v-if="showSeekAssist">
        <span class="dt_c_m_characterName">{{
          characterList.find(i => userInfo.choseCharacter === i.index)
            ? characterList.find(i => userInfo.choseCharacter === i.index).name
            : "AI"
        }}</span>

        <span class="dt_c_m_closeIcon" @click.stop="showSeekAssist = false">
          <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7 0C3.14049 0 0 3.14001 0 7C0 10.86 3.14001 14 7 14C10.8595 14 14 10.86 14 7C14 3.14001 10.86 0 7 0ZM9.8555 9.156C10.0505 9.352 10.05 9.668 9.85451 9.863C9.75702 9.96 9.62951 10.009 9.50152 10.009C9.37301 10.009 9.24502 9.96001 9.14751 9.86201L6.9975 7.7055L4.84051 9.83951C4.74302 9.93552 4.61599 9.98401 4.48899 9.98401C4.36001 9.98401 4.2315 9.9345 4.1335 9.83551C3.9395 9.639 3.941 9.32299 4.13751 9.1285L6.292 6.9975L4.14549 4.844C3.95049 4.64849 3.951 4.332 4.14649 4.137C4.342 3.94149 4.65798 3.94251 4.85349 4.13799L7.00298 6.29399L9.15998 4.16001C9.35597 3.96552 9.67297 3.9675 9.86698 4.16401C10.0615 4.36052 10.0595 4.67701 9.86298 4.87101L7.70851 7.00199L9.8555 9.156Z"
              fill="#E0EAFB"
            />
          </svg>
        </span>

				<div class="dt_c_m_message">
            这题选：<span>{{ taskList[showTaskIndex].answer }}</span>
          </div>
          <div class="dt_c_m_btnArea">
						<span class="dt_c_m_btn1" @click.stop="doNotKnow()">还是不太明白</span>
						<span class="dt_c_m_btn2" @click.stop="showSeekAssist = false">明白，去做题→</span>
          </div>
      </div>
    </div>
    <div class="dt_isSubmit" v-if="isSubmit">
      <!-- <div class="dt_m_b_l_head">
        <span>{{ grade }}</span
        >><span>{{ semester }}</span
        >><span>{{ edition }}</span>
      </div> -->
      <div class="dt_m_b_l_title">{{ taskMessage.title }}</div>
      <div class="dt_is_statistics">
        <img
          :src="require('../../../assets/icon/pocAiClassroom/taskSuccess.png')"
          alt=""
        />
        <el-rate
          class="dt_is_s_star"
          v-model="star"
          allow-half
          disabled
        ></el-rate>
        <div class="dt_is_s_message">
          <span>总计题目：{{ showMessage.total }}</span>
          <span>总答对数量：{{ showMessage.right }}</span>
          <span>正确率：{{ showMessage.accuracy }}%</span>
        </div>

        <div class="dt_is_s_taskList">
          <span
            v-for="(item, index) in taskList"
            @click.stop="goDoTask(index)"
            :class="[
              typeof item.answer === 'object'
                ? item.answer2.length != 0
                  ? isTrueTask(index).no.length == 0 &&
                    isTrueTask(index).yes.length == item.answer.length
                    ? 'isDoYes'
                    : 'isDoNo'
                  : 'isNoDo'
                : item.answer2 !== ''
                ? item.answer === item.answer2
                  ? 'isDoYes'
                  : 'isDoNo'
                : 'isNoDo'
            ]"
            :key="index"
            >{{ index + 1 }}</span
          >
        </div>
      </div>

      <div class="dt_is_taskList">
        <div class="dt_is_tl_head">
          <span>题目回顾</span>
          <div>
            <span @click.stop="onlyShowMistake = !onlyShowMistake"
              >只显示错题</span
            >
            <el-switch
              v-model="onlyShowMistake"
              style="transform: scale(1.2,1.2);"
            ></el-switch>
          </div>
        </div>

        <div class="dt_is_tl_taskBox">
          <div
            class="dt_is_tl_tb_item"
            v-for="(item, index) in taskList"
            :ref="'taskItem' + index + 'Ref'"
            :key="index"
            v-if="
              !onlyShowMistake ||
                (typeof item.answer === 'object'
                  ? !(
                      isTrueTask(index).no.length == 0 &&
                      isTrueTask(index).yes.length == item.answer.length
                    )
                  : item.answer !== item.answer2)
            "
          >
            <span class="dt_is_tl_tb_i_title"
              >{{ typeof item.answer == "object" ? "【多选题】" : "【单选题】"
              }}{{ index + 1 }}.{{ item.teststitle }}</span
            >

            <div class="dt_is_tl_tb_i_choseList">
              <span
                v-for="(item2, index2) in item.checkList"
                :key="index + '-' + index2"
              >
                <span v-if="item2.imgType == 1"
                  >{{ choseList[index2] }}<span>.</span
                  ><img
                    :src="item2.src"
                    @click.stop="$hevueImgPreview(item2.src)"
                /></span>
                <span v-else
                  >{{ choseList[index2] }}<span>.</span>{{ item2 }}</span
                >
              </span>
            </div>

            <div class="dt_is_tl_tb_i_answer">
              <div>
                你的答案：<span v-if="typeof item.answer === 'object'">
                  <span
                    v-for="(item3, index3) in item.answer2"
                    :key="index + '+' + index3"
                    :style="
                      item.answer.includes(item3)
                        ? 'color:#75BD42'
                        : 'color:#FF5B5B'
                    "
                    >{{ choseList[item3]
                    }}{{ index3 == item.answer2.length - 1 ? "" : "、" }}</span
                  > </span
                ><span
                  v-else
                  :style="
                    item.answer === item.answer2
                      ? 'color:#75BD42'
                      : 'color:#FF5B5B'
                  "
                  >{{ choseList[item.answer2] }}</span
                >
              </div>

              <div>
                正确答案：<span style="color:#75BD42">{{
                  typeof item.answer === "object"
                    ? item.answer.map(i => choseList[i]).join("、")
                    : choseList[item.answer]
                }}</span>
              </div>
            </div>

            <div class="dt_is_tl_tb_i_analyze">
              <div>答案解析：<span v-text="item.analyze"></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTaskIndex: 0,
      time: 0,
      time2: 0,
      startTime: 0,
      timer: null,
      userId: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      showSeekAssist: false,
      choseList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      taskList: [
        {
          teststitle: "请从以下选项中选出一个由三个不同字母组成的组合。",
          checkList: ["abc", "aaa", "bca", "ccc"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "本题考核学生对字母的识别能力以及对字母组合的理解。学生需要识别每个选项中的字母，并判断是否由三个不同的字母组成。选项1（abc）和选项3（bca）都由三个不同的字母组成，但根据题目要求，选项1是正确答案。",
          answer2: "",
          uuid: "2b29f3aa-3389-4415-85aa-613f72e23de6",
          isSubmit: false
        },
        {
          teststitle: "哪种动物会飞？",
          checkList: ["狗", "猫", "鸟", "鱼"],
          timuList: [],
          answer: 2,
          type: "1",
          analyze:
            "这道题目考察学生对动物基本特征的了解。鸟是会飞的动物，而狗、猫和鱼都不会飞。",
          answer2: "",
          uuid: "55d7fdcb-bedb-4c2f-b6ea-b3b98e7415be",
          isSubmit: false
        },
        {
          teststitle: "以下哪些动物会飞？",
          checkList: ["狗", "猫", "鸟", "蝙蝠", "企鹅", "蜜蜂"],
          timuList: [],
          answer: [2, 3, 5],
          type: "2",
          analyze:
            "本题考查学生对动物飞行能力的认知。鸟、蝙蝠和蜜蜂都是会飞的动物，而狗、猫和企鹅不会飞。通过这道题，学生需要对多种动物的特征进行分类和识别。",
          answer2: [],
          uuid: "764246b9-0ce5-4d75-9035-3de982b3420f",
          isSubmit: false
        },
        {
          teststitle: "测试",
          testItem: 4,
          checkList: [
            {
              src:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/1-2740353x15_hanspub1687855155487.jpg",
              imgType: 1
            },
            "测试1",
            "测试2",
            "测试3"
          ],
          timuList: [
            {
              src:
                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/DSC20210112100951431687855143262.jpg"
            }
          ],
          answer: [2, 0],
          type: "2",
          answer2: [],
          uuid: "157fb875-acec-4dc9-8e60-73b82bb4ed9a",
          analyze:
            "题目要求选择正确的答案。根据题目和选项的内容，正确答案是3和1。\n分析考核的知识点包括理解题意和选项内容的能力。",
          isSubmit: false
        },
        {
          teststitle: "哪种动物生活在水中？",
          checkList: ["狗", "猫", "鸟", "鱼"],
          timuList: [],
          answer: 3,
          type: "1",
          analyze:
            "这道题目考核的是学生对常见动物生活环境的认知能力。鱼是生活在水中的动物，而狗、猫和鸟则不是。",
          answer2: "",
          uuid: "723dd167-f480-47e9-b958-353138113742",
          isSubmit: false
        },
        {
          teststitle: "以下哪些动物既能生活在水中也能生活在陆地上？",
          checkList: ["青蛙", "鲨鱼", "海豚", "企鹅"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "本题考核学生对动物生活环境的更深入认知。青蛙是两栖动物，既能生活在水中也能生活在陆地上，而鲨鱼和海豚主要生活在水中，企鹅虽然能在陆地上活动，但主要生活在水中。",
          answer2: "",
          uuid: "ca09b084-2fea-4e68-9f8a-325e77c652d3",
          isSubmit: false
        },
        {
          teststitle: "以下哪种动物既能飞又能游泳？",
          checkList: ["企鹅", "老鹰", "鸵鸟", "海豚"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "题目考察了学生对动物特征的综合认知。企鹅是唯一一种既能飞（在水中飞行）又能游泳的动物，而老鹰只能飞行，鸵鸟既不能飞也不能游泳，海豚只能游泳。",
          answer2: "",
          uuid: "cdc13cd7-a1c6-4809-b958-d2b37b2aac6b",
          isSubmit: false
        },
        {
          teststitle: "以下哪种动物能够在水中游泳？",
          checkList: ["企鹅", "老鹰", "鸵鸟", "猫"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "这道题目考核的是学生对动物特性的了解。企鹅是一种能够在水中游泳的动物，而其他选项中的动物（老鹰、鸵鸟、猫）都不能在水中游泳。",
          answer2: "",
          uuid: "ebed926d-5010-4d2e-9740-b6fe00438420",
          isSubmit: false
        },

        {
          teststitle:
            "观察以下模式，并选择正确的选项来完成这个模式：cscs, sscs, cscs, sscs, ______",
          checkList: ["cscs", "sscs", "cssc", "sssc"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "这道题目考察学生对模式识别的能力。题目给出了一个重复的模式：cscs, sscs, cscs, sscs。根据这个模式，下一步应该是cscs。因此，正确答案是选项1。",
          end: "",
          answer2: "",
          uuid: "61ae2659-43c3-4741-b5c2-a543a57a9705",
          isSubmit: false
        },
        {
          teststitle: "世界上最长的河流是哪一条？",
          checkList: ["尼罗河", "亚马逊河", "长江", "密西西比河"],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "这道题目考核的是学生对世界地理常识的了解。世界上最长的河流是尼罗河，全长约6650公里。通过这道题目，学生可以学习到关于世界河流的基本知识。",
          answer2: "",
          uuid: "b328ebf9-389a-4828-b6c6-9a04426d3216",
          isSubmit: false
        },
        {
          teststitle: "世界上最高的山峰及其高度",
          checkList: [
            "珠穆朗玛峰，高度8848米",
            "珠穆朗玛峰，高度8000米",
            "太白山，高度8848米",
            "刚果盆地，高度8848米"
          ],
          timuList: [],
          answer: 0,
          type: "1",
          analyze:
            "本题考察学生对世界上最高山峰珠穆朗玛峰及其高度的了解。珠穆朗玛峰是世界上最高的山峰，其高度为8848米。通过这道题，学生不仅需要知道最高的山峰，还需要记住其具体高度。",
          answer2: "",
          uuid: "e1cf1783-2e9f-40f6-a58f-6c3a7a951173",
          isSubmit: false
        }
      ],
      taskMessage: {
        chapter: "第一章",
        grade: "八年级",
        semester: "上学期",
        edition: "人教版",
        subject: "物理",
        title: "第四课 测量平均速度"
      },

      isSubmit: false,
      star: 4,
      onlyShowMistake: false,
      userInfo: {
        userName: "科科",
        grade: 7,
        userAvatar: "",
        choseCharacter: 0
      },
      characterList: [
        {
          index: 0,
          image: require("../../../assets/icon/pocAiClassroom/character1.png"),
          name: "圆鼓鼓的大胖鱼",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心"
        },
        {
          index: 1,
          image: require("../../../assets/icon/pocAiClassroom/character2.png"),
          name: "迷人的大反派2",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心2"
        },
        {
          index: 2,
          image: require("../../../assets/icon/pocAiClassroom/character3.png"),
          name: "迷人的大反派3",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心3"
        },
        {
          index: 3,
          image: require("../../../assets/icon/pocAiClassroom/character4.png"),
          name: "迷人的大反派4",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心4"
        },
        {
          index: 4,
          image: require("../../../assets/icon/pocAiClassroom/character5.png"),
          name: "迷人的大反派5",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心5"
        },
        {
          index: 5,
          image: require("../../../assets/icon/pocAiClassroom/character6.png"),
          name: "迷人的大反派6",
          personality:
            "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心6"
        }
      ]
    };
  },
  computed: {
    isDoTask() {
      return _index => {
        let _result = false;
        const _type = typeof this.taskList[_index].answer == "object" ? 1 : 0;
        if (_type == 0) {
          if (this.taskList[_index].answer2 !== "") _result = true;
        } else if (_type == 1) {
          if (this.taskList[_index].answer2.length > 0) _result = true;
        }

        return _result;
      };
    },
    isTrueTask() {
      return _index => {
        let _result = {
          yes: [],
          no: []
        };
        const _type = typeof this.taskList[_index].answer == "object" ? 1 : 0;
        const _answer = this.taskList[_index].answer;
        const _answer2 = this.taskList[_index].answer2;
        if (_type == 0) {
          if (_answer === _answer2) {
            _result.yes = [_answer2];
            _result.no = [];
          } else {
            _result.yes = [];
            _result.no = [_answer2];
          }
        } else if (_type == 1) {
          if (
            _answer.length === _answer2.length &&
            _answer.every(i => _answer2.includes(i))
          ) {
            _result.yes = _answer2;
            _result.no = [];
          } else {
            _result.yes = _answer.filter(i => _answer2.includes(i));
            _result.no = _answer2.filter(i => !_answer.includes(i));
          }
        }
        // let yes2 = _result.yes;
        // yes2.sort((a,b)=>a-b)
        // let no2 = _result.no;
        // no2.sort((a,b)=>a-b)
        // _result.yes = yes2;
        // _result.no = no2;
        return _result;
      };
    },
    isDoAllTask() {
      let _result = true;
      this.taskList.forEach((item, index) => {
        if (!this.isDoTask(index)) {
          _result = false;
        }
      });

      return _result;
    },
    showTime() {
      // 更新currentTime，将秒数转换为时分秒格式
      let hours = Math.floor((this.time + this.time2) / 3600);
      let minutes = Math.floor(((this.time + this.time2) % 3600) / 60);
      let seconds = Math.floor((this.time + this.time2) % 60);
      // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
      // 	.toString()
      // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
      return `${hours
        .toString()
        .padStart(2, "0")}:${minutes
        .toString()
        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
    },
    showMessage() {
      let _result = {
        total: 0,
        right: 0,
        wrong: 0,
        accuracy: 0
      };
      if (!this.isSubmit) return _result;
      _result.total = this.taskList.length;

      this.taskList.forEach((item, index) => {
        if (
          typeof item.answer === "object"
            ? !(
                this.isTrueTask(index).no.length == 0 &&
                this.isTrueTask(index).yes.length == item.answer.length
              )
            : item.answer !== item.answer2
        ) {
          _result.wrong++;
        } else {
          _result.right++;
        }
      });
      _result.accuracy = Math.round((_result.right / _result.total) * 100);
      return _result;
    },
    schedule() {
      let _schedule = 0;
      if (this.showTaskIndex == 0) {
        _schedule = 0;
      } else if (this.showTaskIndex === this.taskList.length) {
        _schedule = 100;
      } else {
        _schedule = Math.round(
          ((this.showTaskIndex + 1) / this.taskList.length) * 100
        );
      }
      return _schedule;
    }
  },
  methods: {
    changeTask(type) {
      if (type == "prev") {
        if (this.showTaskIndex > 0) {
          this.showTaskIndex--;
        } else {
          this.$message.warning("已经是第一题啦");
        }
      } else if (type == "next") {
        if (this.showTaskIndex < this.taskList.length - 1) {
          this.showTaskIndex++;
        } else {
          this.$message.warning("已经是最后一题啦");
        }
      }
    },
    // 切换章节
    changeChapter() {
      console.log("切换章节");
    },
    //求助
    seekAssist() {
      this.showSeekAssist = true;
    },
    keepTime() {
      if (this.timer !== null) {
        clearInterval(this.timer);
        this.timer = null;
        this.time += this.time2;
        this.time2 = 0;
      } else {
        this.startTime = new Date().getTime();
        this.timer = setInterval(() => {
          if (this.isSubmit) {
            clearInterval(this.timer);
            this.timer = null;
            this.time += this.time2;
            this.time2 = 0;
            return;
          }
          this.time2 = Math.floor(
            (new Date().getTime() - this.startTime) / 1000
          );
        }, 1000);
      }
    },
    endTask() {
      this.$confirm("确定结束练习吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.back();
        })
        .catch(() => {
          console.log("不结束练习");
        });
    },
    saveTask() {
      console.log("保存做题");
    },
    submitTask(type = 0) {
      if (!this.isDoAllTask && type == 0) {
        this.$confirm("还有未做的题目，是否要继续做题", "提示", {
          confirmButtonText: "确认提交",
          cancelButtonText: "继续做题",
          type: "warning "
        })
          .then(() => {
            this.submitTask(1);
          })
          .catch(() => {
            console.log("继续做题");
          });
      } else {
        this.isSubmit = true;
        clearInterval(this.timer);
        this.timer = null;
        this.sortTaskList();
      }
    },
    back() {
      this.$router.push(
        `/pocAiClassroom?userid=${this.userId}&oid=${this.oid}&org=${this.org}`
      );
    },
    choseAnswer(_index) {
      const _type =
        typeof this.taskList[this.showTaskIndex].answer == "object" ? 1 : 0;
      if (_type == 0) {
        if (this.taskList[this.showTaskIndex].answer2 === _index) {
          this.taskList[this.showTaskIndex].answer2 = "";
        } else {
          this.taskList[this.showTaskIndex].answer2 = _index;
        }
      } else if (_type == 1) {
        if (this.taskList[this.showTaskIndex].answer2.includes(_index)) {
          this.taskList[this.showTaskIndex].answer2 = this.taskList[
            this.showTaskIndex
          ].answer2.filter(item => item != _index);
        } else {
          this.taskList[this.showTaskIndex].answer2.push(_index);
        }
      }
    },
    sortTaskList() {
      this.taskList.forEach(i => {
        if (typeof i.answer === "object") {
          i.answer.sort((a, b) => a - b);
          i.answer2.sort((a, b) => a - b);
        }
      });
    },
    goDoTask(_index) {
      if (this.$refs["taskItem" + _index + "Ref"][0]) {
        this.$refs["taskItem" + _index + "Ref"][0].scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "start"
        });
      }
    },
		doNotKnow(){
			this.$message.info("多想想")
		}
  },
  mounted() {
    this.keepTime();
    this.sortTaskList();
  }
};
</script>

<style scoped>
.doTask {
  width: 100vw;
  height: 100vh;
  /* background-image: radial-gradient(#bbcdff 0%, #bbcdff 1%, #e6dee9 100%); */
  background-color: #f0f2f5;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
}

.dt_back {
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 30px;
}

.dt_main {
  width: 70%;
  height: 95%;
  min-height: 800px;
  min-width: 1100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  position: relative;
  top: 2.5%;
}

.dt_m_head {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* justify-content: center; */
}

.dt_m_h_message {
  font-size: 20px;
  color: #00000099;
}

.dt_m_h_message > span {
  margin: 0 10px;
}

.dt_m_h_back {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background-color: #f8f9fa;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  top: calc(50% - 40px);
  left: 0;
  position: absolute;
  cursor: pointer;
}

.dt_m_h_back > svg {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.dt_m_h_chapter {
  font-size: 34px;
  margin: 20px 0;
}

.dt_m_h_btn {
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
}

.dt_m_box {
  width: 100%;
  height: calc(100% - 60px);
  border-radius: 10px;
  display: flex;
}

.dt_m_b_left {
  width: calc(100% - 300px - 30px);
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid #e7e7e7;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.dt_m_b_l_head {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 16px 32px;
  background-color: #f8f9fa;
}

.dt_m_l_h_title {
  font-size: 30px;
  font-weight: bold;
  max-width: calc(100% - 150px);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt_m_l_h_changeChapter {
  font-size: 24px;
  color: #3681fc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dt_m_l_h_changeChapter > svg {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.dt_m_b_l_title {
  font-size: 26px;
  font-weight: bold;
  margin: 20px 0;
}

.dt_m_b_right {
  width: 300px;
  margin-left: 30px;
  height: 100%;
  box-sizing: border-box;
}

.dt_m_b_r_time {
  width: 100%;
  height: 300px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}

.dt_m_b_r_t_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_m_b_r_t_head > svg {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.dt_m_b_r_t_head > span {
  font-size: 24px;
  font-weight: bold;
}

.dt_m_b_r_t_showTime {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f2f6fc;
  margin-top: 10px;
}

.dt_m_b_r_t_showTime > span {
  font-size: 2.6em;
  font-weight: bold;
  color: #0061ff;
}

.dt_m_b_r_t_schedule {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.dt_m_b_r_t_btn {
  width: 100%;
  height: 60px;
  border-radius: 8px;
  margin-top: 10px;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.dt_m_b_r_t_s_box {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #f0f2f5;
  position: relative;
  display: flex;
  align-items: center;
}

.dt_m_b_r_t_s_b_inner {
  height: 100%;
  border-radius: 5px;
  background-color: #3681fc;
}

.dt_m_b_r_t_s_b_round {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #3681fc;
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_m_b_r_t_s_b_round > span {
  position: absolute;
  top: -20px;
  font-weight: bold;
  color: #3681fc;
}

.dt_m_b_r_template {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.dt_m_b_r_template > div {
  font-size: 26px;
  display: flex;
  align-items: center;
  margin-right: 25px;
}

.dt_m_b_r_template > div > span {
  width: 35px;
  height: 35px;
  display: flex;
  margin-right: 10px;
  border-radius: 8px;
  border: solid 2px #325395;
  box-sizing: border-box;
  background-color: #fff;
}

.dt_m_b_r_template > div:nth-of-type(1) > span {
  background-color: #dae3f5;
}

.dt_m_b_r_taskList {
  width: 100%;
  height: calc(100% - 400px);
  overflow: auto;
  margin: 20px 0;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
}

.dt_m_b_r_tl_head {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.dt_m_b_r_tl_head > div:nth-of-type(1) {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.dt_m_b_r_tl_head > div:nth-of-type(1) > svg {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

.dt_m_b_r_tl_head > div:nth-of-type(2) {
  font-size: 18px;
  margin-top: 15px;
  color: #00000066;
}

.dt_m_b_r_tl_head > div:nth-of-type(2) > span {
  margin: 0 5px;
}

.dt_m_b_r_tl_boxList {
  width: 100%;
  height: calc(100% - 60px - 80px - 20px);
  margin: 10px 0;
  box-sizing: border-box;
}

.dt_m_b_r_tl_boxList > span {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  background-color: #fff;
  border-radius: 8px;
  border: solid 2px #e7e7e7;
  float: left;
  margin: 0 6px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 18px;
  /* font-weight: bold; */
}

.dt_m_b_r_tl_bottom {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  border-top: solid 1px #f0f2f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dt_m_b_r_tl_bottom > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.dt_m_b_r_tl_bottom > div > span {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  background-color: #fff;
  border-radius: 8px;
  border: solid 2px #e7e7e7;
}

/* .dt_m_b_r_taskList > span {
  width: 47px;
  height: 47px;
  margin-right: 12px;
  border-radius: 8px;
  border: solid 2px #325395;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
} */

.isDoTask {
  background-color: #e0eafb !important;
  border-color: #aeccfe !important;
  color: #3681fc !important;
}

.inDoTask {
  background-color: #3681fc !important;
  border-color: #0061ff !important;
  color: #fff !important;
}

.dt_m_b_r_bottom {
  width: 100%;
  height: 60px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dt_m_b_r_bottom > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3681fc;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  box-sizing: border-box;
  border: solid 2px #3681fc;
  background-color: #fff;
  cursor: pointer;
}

.dt_m_b_l_task {
  width: 100%;
  height: calc(100% - 170px);
  overflow: auto;
  box-sizing: border-box;
  box-sizing: border-box;
  padding: 30px 40px;
}

.dt_m_b_l_t_cl_item {
  font-size: 24px;
  display: flex;
  width: 100%;
  height: auto;
  align-items: flex-start;
  margin: 20px 0;
  background-color: #f2f6fc;
  padding: 15px 25px;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  border: 2px solid #e7e7e7;
  transition: 0.2s;
}

.dt_m_b_l_t_cl_item > div {
  min-width: 20px;
  min-height: 20px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 100%;
  margin-right: 10px;
  border: solid 2px #3681fc;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 3px;
}

.dt_m_b_l_t_cl_item > div > span {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  display: none;
  background-color: #3681fc;
}

.dt_m_b_l_t_cl_itemActive > div > span {
  display: flex;
}

.dt_m_b_l_t_cl_itemActive {
  border-color: #3681fc;
}

.dt_m_b_l_t_cl_itemActive > span {
  color: #3681fc;
}

.dt_m_b_l_t_cl_item > span {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  word-break: break-all;
  float: left;
}

.dt_m_b_l_t_cl_item > span > img {
  max-width: 300px;
  cursor: pointer;
}

.dt_m_b_l_t_cl_item > span > span {
  margin-left: 3px;
}

.dt_m_b_l_t_title {
  font-size: 24px;
  height: auto;
  width: 100%;
}

.dt_m_b_l_t_title > span {
  font-weight: bold;
  margin-left: -10px;
}
.dt_m_b_l_t_choseList {
  width: 100%;
  height: auto;
  margin: 20px 0;
}

.dt_m_b_l_bottom {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-top: 1px solid #f0f2f5;
  justify-content: space-between;
  padding: 16px 32px;
  box-sizing: border-box;
  overflow: auto;
}

.dt_m_b_l_b_seekAssist {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  z-index: 3;
}

.dt_m_b_l_b_seekAssist > svg {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.dt_m_b_l_b_seekAssist > span {
  font-size: 24px;
  text-decoration: underline;
}

.dt_m_b_l_b_btnArea {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_m_b_l_b_btnArea > span {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  padding: 15px 70px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  margin-left: 20px;
  background-color: #fff;
  white-space: nowrap;
  z-index: 3;
}

.dt_m_b_l_b_ba_btnPrev {
  background-color: #e0eafb !important;
  color: #3681fc;
}

.dt_m_b_l_b_ba_btnNext {
  background-color: #3681fc !important;
  color: white;
}

.dt_isSubmit {
  width: 70%;
  margin: auto;
  min-width: 1000px;
  height: 100%;
  background-color: #fff;
  overflow: auto;
  box-sizing: border-box;
  padding: 30px 50px;
}

.dt_is_statistics {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dt_is_statistics > img {
  width: 180px;
  height: 180px;
  margin-bottom: -30px;
}

.dt_is_s_star {
  transform: scale(1.4, 1.4);
}

.dt_is_s_message {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.dt_is_s_message > span {
  margin: 0 40px;
  font-size: 24px;
}

.dt_is_s_taskList {
  max-width: 70%;
  width: auto;
  height: auto;
  margin-top: 30px;
}

.dt_is_s_taskList > span {
  width: 47px;
  height: 47px;
  margin-right: 12px;
  border-radius: 8px;
  border: solid 2px #325395;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  transition: 0.3s;
}

.isDoYes {
  background-color: #c8e5b3 !important;
  border-color: #c8e5b3 !important;
}

.isDoNo {
  background-color: #f5b7bf !important;
  border-color: #f5b7bf !important;
}

.isNoDo {
  background-color: #f5b7bf !important;
  border-color: #f5b7bf !important;
}

.dt_is_taskList {
  width: 100%;
  height: auto;
}

.dt_is_tl_head {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dt_is_tl_head > span {
  font-size: 24px;
  font-weight: bold;
}

.dt_is_tl_head > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt_is_tl_head > div > span {
  font-size: 20px;
  margin-right: 10px;
}

.dt_is_tl_taskBox {
  width: 100%;
  height: auto;
  margin: 20px 0;
  box-sizing: border-box;
  border: solid 1px #f2f2f2;
  padding: 10px;
}

.dt_is_tl_tb_item {
  width: 100%;
  height: auto;
  padding: 20px 0 30px 0;
  /* border-bottom: solid 1px black; */
}

.dt_is_tl_tb_i_title {
  font-size: 24px;
}
.dt_is_tl_tb_i_choseList {
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 10px;
}

.dt_is_tl_tb_i_choseList > span {
  margin-bottom: 20px;
  font-size: 20px;
  display: flex;
  text-align: start;
  cursor: default;
  word-break: break-all;
  float: left;
}

.dt_is_tl_tb_i_choseList > span > span {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  word-break: break-all;
  float: left;
}

.dt_is_tl_tb_i_choseList > span > span > img {
  max-width: 60%;
}

.dt_is_tl_tb_i_answer {
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 10px;
}

.dt_is_tl_tb_i_answer > div {
  margin-bottom: 10px;
}

.dt_dialogBackground {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    180deg,
    rgba(32, 51, 80, 0) 0%,
    rgba(73, 116, 182, 0.6) 100%
  );
  position: fixed;
  top: 0;
  left: 0;
}

.dt_character {
  position: fixed;
  bottom: 0;
  left: 1%;
  z-index: 1;
}

.dt_character > img {
  width: 500px;
  z-index: 2;
  bottom: -43px;
  position: absolute;
}

.dt_c_message {
  width: 70vw;
  min-width: 1000px;
  height: 200px;
  position: absolute;
  left: 300px;
  bottom: 20px;
  background: linear-gradient(180deg, #fafcff 0%, #e7eefe 100%);
  border-radius: 6px;
  padding: 32px 24px 24px 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}

.dt_c_m_characterName {
  padding: 10px 15px;
  background-color: #3681fc;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  left: -20px;
  top: -20px;
}

.dt_c_m_closeIcon {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.dt_c_m_closeIcon>svg{
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.dt_is_tl_tb_i_analyze {
  font-size: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  padding-left: 10px;
}

.dt_c_m_message {
  max-width: 100%;
  font-size: 24px;
  padding: 10px 30px;
}

.dt_c_m_message > span {
  font-weight: bold;
}

.dt_c_m_btnArea {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dt_c_m_btnArea > span {
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  margin-left: 20px;
  cursor: pointer;
  background-color: #fdfeff;
  box-sizing: border-box;
}

.dt_c_m_btn1{
	color: #00000099;
}

.dt_c_m_btn2{
	background-color: #3681FC !important;
	color: #fff;
	padding: 12px 40px !important;
}
</style>