jpcj-pc/src/views/driverExam/index.vue

<template>
  <div class="pt30 pb30 pr30 pl30 w100vw h100vh">
    <div
      class="w-full h-full flex content-start items-start flex-wrap border-gray-200 border"
    >
      <div class="w-full flex h440">
        <div class="w215">
          <div class="w-full h50 lh50 font-semibold">视频输入设备</div>
          <div
            class="w-full h50 lh50 font-semibold"
            style="background-color: #fff5cc"
          >
            第1考台
          </div>
          <div class="pt30 pb30 pr45 pl45">
            <img src="@/assets/img/driverExam/user_img.png" />
          </div>
          <div
            style="background-color: #fff5cc"
            class="pt20 pb20 text-left pl30"
          >
            <div class="font20 font-bold">姓名 中国驾考网</div>
            <div class="font20 font-bold">性别 男</div>
            <div class="font20 font-bold">车型 C1</div>
            <div class="font20 font-bold">科目一理论考试</div>
          </div>
        </div>
        <div class="w1196 flex-1">
          <div style="background-color: #fff5cc" class="lh50 font-bold">
            考试题目
          </div>
          <div class="text-left pr20 pl20 pt20">
            <span class="font-bold"
              >{{ listIndex + 1 }}、{{ list[listIndex].issue }}</span
            >
          </div>
        </div>
        <div class="w440 h440 bg-driver-exam">
          <div class="w-full">
            <div class="flex flex-wrap">
              <div class="w40 lh40 bg-primary-yellow">题号</div>
              <div
                class="w40 lh40 bg-primary-yellow"
                v-for="(item, index) in 10"
                :key="index"
              >
                {{ index + 1 }}列
              </div>
            </div>

            <div class="flex flex-col flex-wrap w-full h400 content-start">
              <div class="w40 overflow-hidden flex flex-col">
                <div
                  class="w40 lh40 bg-primary-yellow"
                  v-for="(item, index) in 10"
                  :key="index"
                >
                  {{ index + 1 }}行
                </div>
              </div>
              <div class="coll">
                <table border="0" class="coll-table-topic">
                  <tr :key="index" v-for="(item, index) in list.length / 10">
                    <td
                      v-for="(_item, _index) in 10"
                      :class="{
                        collselected: index * 10 + _index == listIndex,
                      }"
                      :data-key="index * 10 + _index + 1"
                      :key="_index"
                      @click="
                        () => {
                          listIndex = index * 10 + _index;
                        }
                      "
                    >
                      <div
                        style="white-space: nowrap"
                        :data-key="index * 10 + _index + 1"
                        class="coll-table-topic-item"
                        :class="{
                          'text-red': list[index * 10 + _index].isError,
                        }"
                      >
                        {{ list[index * 10 + _index].userAnswerLetter || "" }}
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full bg-driver-exam h84 pl30 pr450 flex justify-between">
        <div class="pt15 pb15 flex w500 text-left">
          <div class="font-bold flex">
            <div class="inline-block">
              <div>剩余时间</div>
              <div class="pl20">00:39:00</div>
            </div>

            <div class="ml90 font-bold inline-block">您选择的答案：√</div>
          </div>
        </div>
        <div class="flex cursor-pointer mt20">
          <div
            class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0"
          >
            √
          </div>
          <div class="w46 lh46 h46 answer-select font20 font-bold flex-grow-0">
            ×
          </div>
        </div>
      </div>
      <div
        class="border-b-gray-200 border-b w-full h84 text-left pr30 pl30 flex justify-between"
      >
        <div class="text-red-500 pt15 font-bold">操作提示：判断题</div>
        <div class="flex h-full w390 items-center justify-between">
          <div @click="preProblem()" class="w120 lh46 bottom-button">
            上一题
          </div>
          <div @click="nextProblem()" class="w120 lh46 bottom-button">
            下一题
          </div>
          <div class="w120 lh46 bottom-button">交卷</div>
        </div>
      </div>
    </div>
    <mProblemAlert
      v-model:visible="alertVisible"
      title="开启"
      content="禁止重复"
    ></mProblemAlert>
    <mProblemDialog v-model:visible="dialogVisible"></mProblemDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
import mProblemDialog from "@/components/mProblemDialog/index.vue";
import api from "@/api";
export default defineComponent({
  name: "driverExam",
  setup() {
    let listIndex = ref(0);
    let list = ref([
      {
        createTime: "2022-10-09 15:05:43",
        updateTime: "2022-10-10 10:19:19",
        id: 821,
        idYdt: 389,
        number: 73,
        answer: "√",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain821.gif",
        explainJq: "题目中看到“确认安全”.“答对”。",
        explainJs:
          "《道路交通安全法实施条例》第四十二条：闪光警告信号灯为持续闪烁的黄灯，提示车辆、行人通行时注意瞭望，确认安全后通过。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain821.mp3",
        image: "",
        imageYdt: "",
        issue: "路口黄灯持续闪烁，警示驾驶人要注意瞭望，确认安全通过。",
        opts: "√-×",
        skillkeyword: "确认安全-答对",
        titlekeyword: "确认安全",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue821.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer821.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS821.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "1",
        classIssue: "46",
        placeIssue: null,
        excellIssue: "28",
        sequeIssueName: "练习一",
        placeIssueName: null,
        excellIssueName: "选学题一",
        classIssueName: "交通信号灯",
        questionType: 1,
        subject: 1,
        classSort: 1,
        excellSort: 49,
        sequeSort: 73,
        placeSort: null,
        chapterId: 2,
        diffDegree: 4,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:43",
        updateTime: "2022-10-10 10:19:19",
        id: 1295,
        idYdt: 762,
        number: 74,
        answer: "√",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1295.gif",
        explainJq: "题目中看到“确认安全”.“答对”。",
        explainJs:
          "车辆起步前，驾驶人应观察车辆周边交通情况，在确保安全的情况下起步。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1295.mp3",
        image: "",
        imageYdt: "",
        issue:
          "车辆起步前，驾驶人应对车辆周围交通情况进行观察，确认安全时再开始起步。",
        opts: "√-×",
        skillkeyword: "确认安全-答对",
        titlekeyword: "确认安全",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1295.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1295.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1295.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "1",
        classIssue: "44",
        placeIssue: null,
        excellIssue: "28",
        sequeIssueName: "练习一",
        placeIssueName: null,
        excellIssueName: "选学题一",
        classIssueName: "安全常识",
        questionType: 1,
        subject: 1,
        classSort: 4,
        excellSort: 50,
        sequeSort: 74,
        placeSort: null,
        chapterId: 2,
        diffDegree: 2,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:43",
        updateTime: "2022-10-10 10:19:19",
        id: 1615,
        idYdt: 26051,
        number: 75,
        answer: "√",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1615.gif",
        explainJq: "题目中看到“确认安全”.“答对”。",
        explainJs:
          "注意进入驾驶室前，也就是上车前。上车前，要从驾驶室车门外开始，逆时针绕车一周，检查车辆及周边情况，查看车底、车后有无异常情况，确认安全后再上车。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1615.mp3",
        image: "",
        imageYdt: "",
        issue:
          "驾驶人在进入驾驶室前，首先要观察机动车周围情况，确认安全后再上车。",
        opts: "√-×",
        skillkeyword: "确认安全-答对",
        titlekeyword: "确认安全",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1615.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1615.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1615.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "1",
        classIssue: "44",
        placeIssue: null,
        excellIssue: "28",
        sequeIssueName: "练习一",
        placeIssueName: null,
        excellIssueName: "选学题一",
        classIssueName: "安全常识",
        questionType: 1,
        subject: 1,
        classSort: 5,
        excellSort: 51,
        sequeSort: 75,
        placeSort: null,
        chapterId: 108,
        diffDegree: 2,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:43",
        updateTime: "2022-10-10 10:19:19",
        id: 490,
        idYdt: 167,
        number: 76,
        answer: "√",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain490.gif",
        explainJq: "题目中看到“确认安全”.“答对”。",
        explainJs:
          "《道路交通安全法实施条例》第六十四条：机动车行经漫水路或者漫水桥时，应当停车察明水情，确认安全后，低速通过。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain490.mp3",
        image: "",
        imageYdt: "",
        issue: "驾驶机动车遇到漫水桥时要察明水情确认安全后再低速通过。",
        opts: "√-×",
        skillkeyword: "确认安全-答对",
        titlekeyword: "确认安全",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue490.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer490.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS490.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "1",
        classIssue: "83",
        placeIssue: null,
        excellIssue: "28",
        sequeIssueName: "练习一",
        placeIssueName: null,
        excellIssueName: "选学题一",
        classIssueName: "特殊路段/路况",
        questionType: 1,
        subject: 1,
        classSort: 6,
        excellSort: 52,
        sequeSort: 76,
        placeSort: null,
        chapterId: 2,
        diffDegree: 1,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:43",
        updateTime: "2022-10-10 10:19:19",
        id: 469,
        idYdt: 150,
        number: 77,
        answer: "√",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain469.gif",
        explainJq: "题目中看到“确认安全”.“答对”。",
        explainJs:
          "图中标志是无人看守的铁路道口，要停车观察确认安全后再通过。《道路交通安全法》第四十六条：机动车通过铁路道口时，应当按照交通信号或者管理人员的指挥通行；没有交通信号或者管理人员的，应当减速或者停车，在确认安全后通过。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain469.mp3",
        image: "https://t1-1305573081.file.myqcloud.com/kt/image/image469.jpg",
        imageYdt:
          "https://t1-1305573081.file.myqcloud.com/kt/image_ydt/5eb4d75agw1e28ypmvbktj.jpg",
        issue: "行至这种情况的铁路道口要减速或者停车观察，在确认安全后通过。",
        opts: "√-×",
        skillkeyword: "确认安全-答对",
        titlekeyword: "确认安全",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue469.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer469.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS469.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "1",
        classIssue: "84",
        placeIssue: null,
        excellIssue: "28",
        sequeIssueName: "练习一",
        placeIssueName: null,
        excellIssueName: "选学题一",
        classIssueName: "铁路道口",
        questionType: 1,
        subject: 1,
        classSort: 1,
        excellSort: 53,
        sequeSort: 77,
        placeSort: null,
        chapterId: 2,
        diffDegree: 2,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:43",
        updateTime: "2022-10-10 10:19:19",
        id: 1083,
        idYdt: 801,
        number: 78,
        answer: "√",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1083.gif",
        explainJq: "题目中看到“确认安全”.“答对”。",
        explainJs:
          "变更车道步骤：提前开转向灯，观察后方情况，确保安全距离，再变更。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1083.mp3",
        image: "",
        imageYdt: "",
        issue:
          "在高速公路变更车道时，应提前开启转向灯，观察情况，确认安全后，驶入需要变更的车道。",
        opts: "√-×",
        skillkeyword: "确认安全-答对",
        titlekeyword: "确认安全",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1083.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1083.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1083.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "1",
        classIssue: "85",
        placeIssue: null,
        excellIssue: "28",
        sequeIssueName: "练习一",
        placeIssueName: null,
        excellIssueName: "选学题一",
        classIssueName: "变更车道",
        questionType: 1,
        subject: 1,
        classSort: 1,
        excellSort: 54,
        sequeSort: 78,
        placeSort: null,
        chapterId: 2,
        diffDegree: 1,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:58",
        updateTime: "2022-10-10 10:19:19",
        id: 291,
        idYdt: 74,
        number: 284,
        answer: "×",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain291.gif",
        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
        explainJs:
          "超车只能从左侧超越，应提前开启左转向灯。《道路交通安全法实施条例》第五十七条：机动车向左转弯、向左变更车道、准备超车、驶离停车地点或者掉头时，应当提前开启左转向灯。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain291.mp3",
        image: "",
        imageYdt: "",
        issue: "驾驶机动车在道路上超车时可以不使用转向灯。",
        opts: "√-×",
        skillkeyword: "可以不-答错",
        titlekeyword: "可以不",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue291.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer291.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS291.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "2",
        classIssue: "86",
        placeIssue: null,
        excellIssue: "29",
        sequeIssueName: "练习二",
        placeIssueName: null,
        excellIssueName: "选学题二",
        classIssueName: "超车题",
        questionType: 1,
        subject: 1,
        classSort: 24,
        excellSort: 41,
        sequeSort: 99,
        placeSort: null,
        chapterId: 2,
        diffDegree: 1,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:58",
        updateTime: "2022-10-10 10:19:19",
        id: 303,
        idYdt: 77,
        number: 285,
        answer: "×",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain303.gif",
        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
        explainJs:
          "向右变更车道，应提前开启右转向灯，告知后方车辆。《道路交通安全法实施条例》第五十七条：机动车向右转弯、向右变更车道、超车完毕驶回原车道、靠路边停车时，应当提前开启右转向灯。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain303.mp3",
        image: "",
        imageYdt: "",
        issue: "驾驶机动车在道路上向右变更车道可以不使用转向灯。",
        opts: "√-×",
        skillkeyword: "可以不-答错",
        titlekeyword: "可以不",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue303.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer303.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS303.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "2",
        classIssue: "85",
        placeIssue: null,
        excellIssue: "29",
        sequeIssueName: "练习二",
        placeIssueName: null,
        excellIssueName: "选学题二",
        classIssueName: "变更车道",
        questionType: 1,
        subject: 1,
        classSort: 14,
        excellSort: 42,
        sequeSort: 100,
        placeSort: null,
        chapterId: 2,
        diffDegree: 5,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:58",
        updateTime: "2022-10-10 10:19:19",
        id: 1053,
        idYdt: 774,
        number: 286,
        answer: "×",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1053.gif",
        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
        explainJs:
          "任何情况下，机动车都要礼让行人。《道路交通安全法》第四十七条：机动车遇行人横过道路，应当避让。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1053.mp3",
        image: "",
        imageYdt: "",
        issue: "当行人出现交通安全违法行为时，车辆可以不给行人让行。",
        opts: "√-×",
        skillkeyword: "可以不-答错",
        titlekeyword: "可以不",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1053.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1053.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1053.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "2",
        classIssue: "91",
        placeIssue: null,
        excellIssue: "29",
        sequeIssueName: "练习二",
        placeIssueName: null,
        excellIssueName: "选学题二",
        classIssueName: "优先通行/礼让",
        questionType: 1,
        subject: 1,
        classSort: 27,
        excellSort: 43,
        sequeSort: 101,
        placeSort: null,
        chapterId: 2,
        diffDegree: 5,
        isNew: 0,
      },
      {
        createTime: "2022-10-09 15:05:58",
        updateTime: "2022-10-10 10:19:19",
        id: 1055,
        idYdt: 775,
        number: 287,
        answer: "×",
        answerkeyword: "",
        explainGif:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_gif/explain1055.gif",
        explainJq: '题目中看到“可不”或“可以不”.直接"答错"。',
        explainJs:
          "任何情况下，机动车都要礼让行人、非机动车，不可与其抢行，安全行车最重要。",
        explainMp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_mp3/explain1055.mp3",
        image: "",
        imageYdt: "",
        issue: "车辆在交叉路口绿灯亮后，遇非机动车抢道行驶时，可以不让行。",
        opts: "√-×",
        skillkeyword: "可以不-答错",
        titlekeyword: "可以不",
        issuemp3:
          "https://t1-1305573081.file.myqcloud.com/kt/issue_mp3/issue1055.mp3",
        answermp3:
          "https://t1-1305573081.file.myqcloud.com/kt/answer_mp3/answer1055.mp3",
        explainjsmp3:
          "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS1055.mp3",
        liceCar: "1",
        liceBus: "1",
        liceTruck: "1",
        liceMoto: null,
        sequeIssue: "2",
        classIssue: "91",
        placeIssue: null,
        excellIssue: "29",
        sequeIssueName: "练习二",
        placeIssueName: null,
        excellIssueName: "选学题二",
        classIssueName: "优先通行/礼让",
        questionType: 1,
        subject: 1,
        classSort: 28,
        excellSort: 44,
        sequeSort: 102,
        placeSort: null,
        chapterId: 2,
        diffDegree: 1,
        isNew: 0,
      },
    ]);
    let nextProblem = () => {
      console.log("nextProblem");
      if (listIndex.value < list.value.length - 1) {
        listIndex.value++;
        return;
      }
    };
    let preProblem = () => {
      if (listIndex.value > 0) {
        listIndex.value = listIndex.value - 1;
      }
    };
    onMounted(() => {
      api.open
        .questionInfoSelectFreeQuestionInfo({
          subject: 1,
        })
        .then((res) => {
          res.rows.forEach((element) => {
            element.optsArr = element.opts.split("-").sort();
          });
        });
    });
    return {
      alertVisible: ref(false),
      dialogVisible: ref(false),
      list: list,
      listIndex,
      nextProblem,
      preProblem,
    };
  },

  components: {
    mProblemAlert,
    mProblemDialog,
  },
});
</script>

<style lang="scss" scoped>
.pr23vw {
  padding-right: 23vw;
}
.bottom-button {
  text-align: center;
  border: 1px solid #f9de5b;
  cursor: pointer;
}
.bottom-button:hover {
  background: #fff7cc;
}

.answer-select {
  background: #fffdf2;

  border: 1px solid #f9de5b;
}
.answer-select:hover {
  background: #fff7cc;
}
.bg-driver-exam {
  background: #f5f5f3;
}
.h100vh {
  height: 100vh;
}
.w1196 {
  width: 1196px;
}
.bg-primary-yellow {
  background-color: #f9de5b;
}

.coll {
  position: relative;
  display: flex;
  cursor: pointer;

  .coll-header1 {
    width: 231px;
    height: 21px;
    border-spacing: 0;
    border-right: 1px solid #b8c0cc;
    div {
      box-sizing: border-box;
    }
    .coll-header1-row {
      width: 21px;
      height: 21px;
      line-height: 21px;
      background: #498ef5;
      border-right: 1px solid #b8c0cc;
      font-size: 10px;
      white-space: nowrap;
    }
    // .coll-header1-row_border{
    //   border-bottom: 1px solid #fff;
    // }
  }
  .coll-header2 {
    // position: absolute;
    // top: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border-spacing: 0;
    height: 237px;
    width: 21px;

    .coll-header2-col {
      width: 23px;
      height: 25px;
      border-top: 1px solid #b8c0cc;
      font-size: 10px;
      line-height: 21px;
      background: #498ef5;
      white-space: nowrap;
    }
  }

  .coll-table-topic {
    background: #f2f3f5;
    border-spacing: 0;
    border-left: 1px solid #d2d1cf;
    border-top: 1px solid #d2d1cf;
    display: table;
    td {
      border-bottom: 1px solid #d2d1cf;
      border-right: 1px solid #d2d1cf;

      div {
        font-size: 8px;
        width: 39px;
        height: 39px;
        line-height: 39px;
      }
      // font-size: 12px;
      .coll-table-topic-item {
        border: none;

        white-space: nowrap;
        div {
          white-space: nowrap;
        }
      }
    }
    .collselected {
      background: #f9de5b;
      color: #fff;
    }
  }
}
</style>