pbl-teacher-table/src/components/pages/workPage/components/setChoiceQuestion.vue

<template>
  <div class="setChoiceQuestion">
    <div class="testItem" v-for="(item, index) in jsonData.testJson" :key="item.id">
      <div class="ti_header">
        <span>{{ lang.ssTopic }}{{ index + 1 }} <span v-if="item.answer.length==0">{{lang.ssNoSettingAnswer}}</span></span>
        <div class="ti_h_edit">
          <span @click="copyTest(item.id)">
            <svg viewBox="0 0 1024 1024" version="1.1" p-id="4608" width="200" height="200">
              <path
                d="M731.68184 676.057473 731.68184 183.323259c0-30.233582-24.512277-54.745858-54.747905-54.745858L184.216093 128.577401c-30.233582 0-54.746882 24.512277-54.746882 54.745858l0 492.734214c0 30.207999 24.5133 54.746882 54.746882 54.746882l492.717841 0C707.16854 730.804355 731.68184 706.265472 731.68184 676.057473zM622.1891 676.057473 238.962975 676.057473c-30.233582 0-54.746882-24.538883-54.746882-54.745858L184.216093 238.07014c0-30.233582 24.5133-54.746882 54.746882-54.746882l383.226125 0c30.233582 0 54.744835 24.512277 54.744835 54.746882l0 383.242498C676.933935 651.51859 652.421658 676.057473 622.1891 676.057473zM841.17458 292.817022l-54.745858 0 0 54.746882c30.232558 0 54.745858 24.5133 54.745858 54.759161l0 383.228171c0 30.206976-24.5133 54.745858-54.745858 54.745858L403.201573 840.297095c-30.233582 0-54.746882-24.538883-54.746882-54.745858l-54.746882 0 0 54.745858c0 30.207999 24.5133 54.747905 54.746882 54.747905l492.719888 0c30.234605 0 54.747905-24.539906 54.747905-54.747905L895.922485 347.563904C895.922485 317.329299 871.408161 292.817022 841.17458 292.817022z"
                p-id="4609"></path>
            </svg>
          </span>

          <!-- 上 -->
          <span @click="changeIndex(item, index, 'up')">
            <svg viewBox="0 0 1024 1024" width="200" height="200" fill="#6B7280">
              <path
                d="M959.804421 511.603981l-84.009346 84.023672L576.143391 293.406446l0 665.582911L448.20351 958.989357 448.20351 293.406446 147.619594 595.628676l-84.024695-84.023672L512.213359 63.546292 959.804421 511.603981z">
              </path>
            </svg>
          </span>
          <!-- 下 -->
          <span @click="changeIndex(item, index, 'down')">
            <svg style="transform: rotate(180deg);" viewBox="0 0 1024 1024" width="200" height="200" fill="#6B7280">
              <path
                d="M959.804421 511.603981l-84.009346 84.023672L576.143391 293.406446l0 665.582911L448.20351 958.989357 448.20351 293.406446 147.619594 595.628676l-84.024695-84.023672L512.213359 63.546292 959.804421 511.603981z">
              </path>
            </svg>

          </span>

          <span @click="deleteTest(item.id)" v-show="jsonData.testJson.length > 1">
            <svg viewBox="0 0 1024 1024" version="1.1" p-id="12415" width="200" height="200">
              <path
                d="M902.4 282.1H117.7c-13.4 0-23.5-10.1-23.5-23.5v-3.4c0-13.4 10.1-23.5 23.5-23.5h788.1c13.4 0 23.5 10.1 23.5 23.5v3.4c0 13.4-10.1 23.5-26.9 23.5zM634.1 151.3H386c-13.4 0-26.8-10.1-23.5-23.5v-6.7c0-13.4 10.1-23.5 23.5-23.5h248.2c13.4 0 23.5 10.1 23.5 23.5v3.4c3.3 13.3-10.1 26.8-23.6 26.8z m228.1 238.1c0-13.4-10.1-26.8-26.8-26.8-16.8 0-26.8 10.1-26.8 26.8L775 798.5v13.4c0 23.5-10.1 43.6-30.2 53.7-13.4 6.7-30.2 10.1-50.3 10.1H332.3c-33.5 3.4-60.4 0-70.4-33.5-3.4-6.7-6.7-16.8-6.7-26.8l-10.1-104-36.9-322c0-13.4-10.1-23.5-23.5-23.5s-26.8 10.1-26.8 23.5l47 462.8c0 40.2 40.2 73.8 80.5 73.8h459.5c40.2 0 80.5-33.5 80.5-73.8l36.8-462.8c0 3.3 0 0 0 0z m0 0"
                p-id="12416"></path>
            </svg>
          </span>
        </div>
      </div>

      <div class="ti_title">
        <div class="ti_t_input" contenteditable="true" v-text="item.teststitle"
          @blur="setTestTitle(item.id, $event.target.innerText)"></div>
        <div class="uploadImage" @click="uploadImage(item.id)">
          <svg viewBox="0 0 1024 1024" version="1.1" p-id="15953" width="200" height="200">
            <path
              d="M368 480c-62.4 0-112-49.6-112-112s49.6-112 112-112 112 49.6 112 112-49.6 112-112 112z m0-160c-27.2 0-48 20.8-48 48s20.8 48 48 48 48-20.8 48-48-20.8-48-48-48z m464 608H192c-52.8 0-96-43.2-96-96V192c0-52.8 43.2-96 96-96h640c52.8 0 96 43.2 96 96v640c0 52.8-43.2 96-96 96zM192 160c-17.6 0-32 14.4-32 32v640c0 17.6 14.4 32 32 32h640c17.6 0 32-14.4 32-32V192c0-17.6-14.4-32-32-32H192z m259.2 556.8c-25.6 0-51.2-11.2-70.4-30.4l-38.4-40c-12.8-12.8-33.6-12.8-46.4 0l-49.6 52.8c-12.8 12.8-32 12.8-44.8 1.6s-12.8-32-1.6-44.8l49.6-52.8c17.6-19.2 43.2-30.4 68.8-30.4s51.2 11.2 70.4 30.4l38.4 40c12.8 12.8 33.6 12.8 46.4 0l160-168c17.6-19.2 43.2-30.4 70.4-30.4s51.2 11.2 70.4 30.4L920 628.8c12.8 12.8 11.2 33.6-1.6 44.8-12.8 12.8-33.6 11.2-44.8-1.6L728 518.4c-12.8-12.8-33.6-12.8-46.4 0L521.6 688c-19.2 17.6-44.8 28.8-70.4 28.8z"
              fill="#333333" p-id="15954"></path>
          </svg>
        </div>
      </div>
      <!-- 图片 -->
      <div class="imageList">
        <div v-for="(image, imageIndex) in item.timuList" :key="item.id + '_' + imageIndex">
          <el-image style="width: 100px; height: 100px" :src="image.url" :preview-src-list="[image.url]"
            fit="cover"></el-image>
          <svg @click="delImage(item.id, imageIndex)" t="1774237005199" viewBox="0 0 1024 1024" width="200"
            height="200">
            <path
              d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM305.956571 370.395429L447.488 512 305.956571 653.604571a45.568 45.568 0 1 0 64.438858 64.438858L512 576.512l141.604571 141.531429a45.568 45.568 0 0 0 64.438858-64.438858L576.512 512l141.531429-141.604571a45.568 45.568 0 1 0-64.438858-64.438858L512 447.488 370.395429 305.956571a45.568 45.568 0 0 0-64.438858 64.438858z"
              fill="#FF2525" p-id="4716"></path>
          </svg>
        </div>
      </div>

      <!-- 选择题 -->
      <div class="checkList">
        <div class="checkItem" v-for="(check, checkIndex) in item.checkList" :key="checkIndex"
            draggable="true"
            @dragstart="dragStart($event, item, checkIndex)"
            @dragover.prevent="dragOver($event, item, checkIndex)"
            @drop="drop($event, item, checkIndex)"
            @dragend="dragEnd">
          <div class="drag">
            <svg viewBox="0 0 1024 1024" width="200" height="200">
              <path
                d="M867.995 459.647h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
                p-id="9455"></path>
              <path
                d="M867.995 763.291h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353z"
                p-id="9456"></path>
              <path
                d="M156.005 260.709h711.99c27.921 0 52.353-24.434 52.353-52.353s-24.434-52.353-52.353-52.353h-711.99c-27.921 0-52.353 24.434-52.353 52.353s24.434 52.353 52.353 52.353z">
              </path>
            </svg>
          </div>
          <div class="check" :class="{ 'checked': item.answer.includes(checkIndex) }"
            @click="checkClick(item.id, checkIndex)">
            <svg v-if="item.answer.includes(checkIndex)" t="1773996159000" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5894" width="200" height="200">
              <path
                d="M404.352 685.354667L789.632 213.333333 853.333333 267.52 409.941333 810.666667 170.666667 566.4l58.581333-59.818667z"
                p-id="5895"></path>
            </svg>
          </div>
          <el-input v-model="item.checkList[checkIndex]" :placeholder="lang.ssEnterOption"
            @blur="setTestJson()"></el-input>
          <div class="btn">

            <div @click="addCheck(item.id, checkIndex)" v-if="item.checkList.length > 2">
              <svg style="width: .7rem; height: .7rem;" viewBox="0 0 1024 1024" width="200" height="200">
                <path
                  d="M47.653 439.326c-24.501 0-44.368 19.881-44.368 44.4v56.548c0 24.492 19.862 44.4 44.368 44.4h928.694c24.501 0 44.368-19.881 44.368-44.4v-56.548c0-24.497-19.862-44.4-44.368-44.4H47.653z"
                  p-id="11474"></path>
                <path
                  d="M586.326 47.653c0-24.501-19.881-44.368-44.4-44.368h-56.548c-24.492 0-44.4 19.862-44.4 44.368v928.694c0 24.501 19.881 44.368 44.4 44.368h56.548c24.497 0 44.4-19.862 44.4-44.368V47.653z">
                </path>
              </svg>
            </div>

            <div @click="delCheck(item.id, checkIndex)" v-if="item.checkList.length > 2">
              <svg viewBox="0 0 1024 1024" width="200" height="200">
                <path
                  d="M632.117978 513.833356l361.805812 361.735298a85.462608 85.462608 0 1 1-121.001515 120.789974L511.116463 634.552816 146.913186 998.756094a86.026718 86.026718 0 0 1-121.706652-121.706652L389.480325 512.775651 27.674513 150.969839A85.392095 85.392095 0 0 1 148.393973 30.250379L510.199785 392.056191l366.671258-366.671258a86.026718 86.026718 0 0 1 121.706652 121.706652z">
                </path>
              </svg>
            </div>
          </div>
        </div>
        <div class="addCheck" @click="addCheck(item.id)">
          <svg viewBox="0 0 1024 1024" version="1.1" p-id="2732" width="200" height="200">
            <path
              d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
              p-id="2733"></path>
          </svg>
          <span>{{ lang.ssOption }}</span>
        </div>
      </div>

      <!-- 解释说明 -->
      <div class="explanation">
        <div class="e_header">
          <span>{{ lang.ssExplanationTip }}</span>
          <div v-show="false">
            <svg t="1774233113566" viewBox="0 0 1027 1024" width="200" height="200">
              <path
                d="M511.979521 544.586217a54.525819 54.525819 0 0 1-23.359066-5.247791L31.038758 321.427143a54.397824 54.397824 0 0 1 0-98.236071L488.620455 5.279789c14.719411-7.039718 31.99872-7.039718 46.718131 0l457.581697 217.911283a54.397824 54.397824 0 0 1 0 98.236071l-457.581697 217.911283A54.525819 54.525819 0 0 1 511.979521 544.586217zM180.984761 272.341106L511.979521 429.966801l331.058757-157.625695L511.979521 114.587417 180.984761 272.341106z m354.417823 746.402144l457.517699-217.911283a54.397824 54.397824 0 1 0-46.718131-98.236071L511.979521 909.371625l-434.158634-206.775729a54.397824 54.397824 0 0 0-46.718131 98.236071l457.581697 217.911283a54.525819 54.525819 0 0 0 46.718131 0z m0-239.73441l457.517699-217.847286a54.397824 54.397824 0 1 0-46.718131-98.300068L511.979521 669.573217l-434.158634-206.711731a54.397824 54.397824 0 0 0-46.718131 98.300068l457.581697 217.847286a54.525819 54.525819 0 0 0 46.718131 0z"
                p-id="9073"></path>
            </svg>
            <span>{{ lang.ssAIGenerate }}</span>
          </div>
        </div>
        <el-input type="textarea" rows="3" resize="none" v-model="item.explanation"
          :placeholder="lang.ssEnterExplanation" @blur="setTestJson()"></el-input>
      </div>
    </div>


    <!-- 添加题目 -->
    <div class="addTest" @click="addTest()">
      <svg viewBox="0 0 1024 1024" version="1.1" p-id="2732" width="200" height="200">
        <path
          d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
          p-id="2733"></path>
      </svg>
      <span>{{ lang.ssTopic }}</span>
    </div>

  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import { uploadOneFile } from '@/components/tools/uploadFile'
export default {
  emits: ['setTestJson', 'save'],
  props: {
    workData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      jsonData: {},
      dragItem: null
    }
  },
  watch: {
    workData: {
      handler(newVal, oldVal) {
        if (newVal.type == 45) {
          if (JSON.stringify(newVal.json) != JSON.stringify(this.jsonData)) {

            this.jsonData = JSON.parse(JSON.stringify(newVal.json));
            if(this.jsonData.testJson.length == 0){
              this.addTest();
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 更新题目
    setTestJson() {
      // console.log(this.jsonData)
      this.jsonData.testCount = this.jsonData.testJson.length;
      this.$emit('setTestJson', this.jsonData);
    },
    // 添加题目
    addTest() {
      this.jsonData.testJson.push({
        id: uuidv4(),
        type: "2",
        teststitle: "",
        checkList: ['', '', ''],
        timuList: [],
        answer: [],
        userAnswer: [],
        explanation: '',
      });
      this.setTestJson();
    },
    //修改标题
    setTestTitle(id, title) {
      console.log('修改标题', id, title)
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        test.teststitle = title;
      }
      this.setTestJson();
    },
    // 点击复选框
    checkClick(id, index) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        if (test.answer.includes(index)) {
          test.answer.splice(test.answer.indexOf(index), 1);
        } else {
          test.answer.push(index);
        }
      }
      this.setTestJson();
    },
    // 删除题目
    deleteTest(id) {
      let index = this.jsonData.testJson.findIndex(item => item.id == id);
      this.jsonData.testJson.splice(index, 1);
      this.setTestJson();
    },
    // 添加选项
    addCheck(id, checkIndex = null) {
      let index = this.jsonData.testJson.findIndex(item => item.id == id);
      let test = this.jsonData.testJson[index];
      if (!checkIndex) {
        checkIndex = test.checkList.length;
      }else{
        checkIndex = checkIndex + 1;
      }
      test.checkList.splice(checkIndex, 0, '');
      this.setTestJson();
    },
    // 删除选项
    delCheck(id, index) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        if (test.checkList.length == 1) {
          this.$message.error("至少保留一个选项");
          return;
        }
        test.checkList.splice(index, 1);
      }
      this.setTestJson();
    },
    // 上传图片
    uploadImage(id) {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.click();
      input.onchange = (e) => {
        if (e.target.files[0]) {
          uploadOneFile(e.target.files[0]).then(res => {
            res.src = res.url
            this.jsonData.testJson.find(item => item.id == id).timuList = [res];
            this.setTestJson();
          })
        }
      }
    },
    // 复制题目
    copyTest(id) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        test = JSON.parse(JSON.stringify(test));
        test.id = uuidv4();
        this.jsonData.testJson.push(test);
        this.setTestJson();
      }
    },
    // 删除图片
    delImage(id, index) {
      let test = this.jsonData.testJson.find(item => item.id == id);
      if (test) {
        test.timuList.splice(index, 1);
      }
      this.setTestJson();
    },
    // 移动题目
    changeIndex(item, index, direction) {
      let test = this.jsonData.testJson.find(i => i.id == item.id);
      if (test) {
        if (direction == 'up') {
          if (index == 0) {
            this.$message.info("已到顶部");
            return;
          }
          this.jsonData.testJson.splice(index, 1);
          this.jsonData.testJson.splice(index - 1, 0, JSON.parse(JSON.stringify(test)));
        } else if (direction == 'down') {
          if (index == this.jsonData.testJson.length - 1) {
            this.$message.info("已到底部");
            return;
          }
          this.jsonData.testJson.splice(index, 1);
          this.jsonData.testJson.splice(index + 1, 0, JSON.parse(JSON.stringify(test)));
        }
        this.setTestJson();
      }
    },
    // 拖拽相关方法
    dragStart(e, item, checkIndex) {
      this.dragItem = { item, checkIndex };
      const checkItem = e.target.closest('.checkItem');
      if (checkItem) checkItem.classList.add('dragging');
      e.dataTransfer.effectAllowed = 'move';
    },
    dragOver(e, item, checkIndex) {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';

      document.querySelectorAll('.checkItem').forEach(el => {
        el.style.borderTop = '';
        el.style.borderBottom = '';
      });

      const checkItems = e.target.closest('.checkItem');
      if (checkItems && this.dragItem && this.dragItem.checkIndex !== checkIndex) {
        if (this.dragItem.checkIndex < checkIndex) {
          checkItems.style.borderBottom = '2px solid #ffa502';
        } else {
          checkItems.style.borderTop = '2px solid #ffa502';
        }
      }
    },
    drop(e, targetItem, targetCheckIndex) {
      e.preventDefault();
      document.querySelectorAll('.checkItem').forEach(el => {
        el.style.borderTop = '';
        el.style.borderBottom = '';
        el.classList.remove('dragging');
      });
      if (!this.dragItem) return;

      const { item: sourceItem, checkIndex: sourceCheckIndex } = this.dragItem;

      if (sourceItem.id !== targetItem.id) return;
      if (sourceCheckIndex === targetCheckIndex) return;

      const test = this.jsonData.testJson.find(i => i.id === sourceItem.id);
      if (test) {
        let newAnswerIndex;

        if (sourceCheckIndex < targetCheckIndex) {
          newAnswerIndex = targetCheckIndex - 1;
        } else {
          newAnswerIndex = targetCheckIndex;
        }

        const item = test.checkList[sourceCheckIndex];
        test.checkList.splice(sourceCheckIndex, 1);
        test.checkList.splice(targetCheckIndex, 0, item);

        if (test.answer.includes(sourceCheckIndex)) {
          const answerIndex = test.answer.indexOf(sourceCheckIndex);
          test.answer.splice(answerIndex, 1);
          test.answer.push(newAnswerIndex);
          test.answer.sort((a, b) => a - b);
        } else {
          test.answer = test.answer.map(idx => {
            if (sourceCheckIndex < targetCheckIndex) {
              return idx > sourceCheckIndex && idx <= targetCheckIndex ? idx - 1 : idx;
            } else {
              return idx >= targetCheckIndex && idx < sourceCheckIndex ? idx + 1 : idx;
            }
          });
        }

        this.setTestJson();
      }
      this.dragItem = null;
    },
    dragEnd(e) {
      const checkItem = e.target.closest('.checkItem');
      if (checkItem) checkItem.classList.remove('dragging');
      document.querySelectorAll('.checkItem').forEach(el => {
        el.style.borderTop = '';
        el.style.borderBottom = '';
      });
      this.dragItem = null;
    },
  },
}
</script>

<style scoped>
.setChoiceQuestion {
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 4rem;
  box-sizing: border-box;
  gap: 2rem;
}

.addTest {
  border-radius: 5px;
  border: 1px dashed #d1d5db;
  padding: .5rem 1rem;
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

.addTest>svg {
  width: .7rem;
  height: .7rem;
  fill: #6E7583;
}

.addTest>span {
  font-weight: bold;
  font-size: .9rem;
  color: #6b7280;
}

.testItem {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: column;
}

.ti_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;


}

.ti_header>span {
  font-size: 1rem;
  font-weight: 600;
  color: #ff9300;
}

.ti_header>span>span {
  font-size: .8rem;
  color: rgb(117, 117, 117);
  margin-left: .5rem;
}

.ti_h_edit {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ti_h_edit>span {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F9FAFB;
  border-radius: 4px;
  cursor: pointer;
}

.ti_h_edit>span>svg {
  width: 1rem;
  height: 1rem;
  fill: #6B7280;
}

.ti_title {
  width: 100%;
  height: fit-content;
  padding-bottom: 2rem;
  min-height: 4rem;
  background: #FAFBFC;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  position: relative;
}

.ti_t_input {
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: none;
  font-size: .8rem;
  resize: none;
  max-height: 10rem;
  overflow: auto;
  /* padding-right: 2rem; */
}

.uploadImage {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: #fff;
  border-radius: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  padding: .5rem;
}

.uploadImage>svg {
  width: 1rem;
  height: 1rem;
}

.checkList {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* padding-left: 4rem; */
}

.checkItem {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: .3rem .5rem;
  transition: .2s;
}

.checkItem:hover {
  background: #F9FAFB;
}

.drag {
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
  margin-right: 1rem;
  opacity: 0;
  transition: .2s;
}

.checkItem:hover > .drag {
  opacity: 1;
}

.checkItem[draggable="true"] {
  cursor: move;
}

.checkItem.dragging {
  opacity: 0.5;
  background: #FEF3C7;
}

.drag>svg {
  width: 100%;
  height: 100%;
  fill: #D1D5DC;
}


.check {
  width: 1.1rem;
  height: 1.1rem;
  border: solid 1px #D1D5DB;
  border-radius: .25rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checked {
  background: #FF9300;
}

.checked>svg {
  width: .7rem;
  height: .7rem;
  fill: #fff;
}

.checkItem>.el-input {
  width: calc(100% - 10rem);
}

.addCheck {
  border-radius: 5px;
  border: 1px dashed #d1d5db;
  padding: .3rem .8rem;
  height: fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  margin-left: 2.2rem;
}

.addCheck>svg {
  width: .5rem;
  height: .5rem;
  fill: #6E7583;
}

.addCheck>span {
  font-weight: bold;
  font-size: .8rem;
  color: #6b7280;
}

.btn {
  display: flex;
  align-items: center;
  gap: 1em;
  opacity: 0;
  margin-left: 1rem;
}

.checkItem:hover>.btn {
  opacity: 1;
}



.btn>div {
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #F9FAFB; */
  border-radius: .4px;
  cursor: pointer;
}

.btn>div>svg {
  width: .6rem;
  height: .6rem;
  fill: #9DA3AF;
}

.explanation {
  width: 100%;
  height: auto;
  padding: 1rem;
  background: #FAFBFC;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: .8rem;
}

.e_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.e_header>span {
  color: #6b7280;
  font-size: .8rem;
  font-weight: 500;
}

.e_header>div {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #ff9300;
  color: #fff;
  padding: .3rem .8rem;
  font-size: .8rem;
  font-weight: 500;
  border-radius: .5rem;
  cursor: pointer;
}

.e_header>div>svg {
  width: .8rem;
  height: .8rem;
  fill: #fff;
}

.imageList {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.imageList>div {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
  border-radius: .5rem;
  position: relative;

}

.imageList>div:hover>svg {
  display: flex;
}

.imageList>div>svg {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: -.3rem;
  right: -.3rem;
  font-weight: 500;
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
</style>