GCLS_Page_Book_Component_NPC/src/components/Adult/preview/Picture.vue

<!--  -->
<template>
  <div :class="['Big-Book-PictureBox']" v-if="isShowTemp">
    <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
    <h2>{{curQue.title}}</h2>
    <li v-for="(items, indexs) in curQue.option" :key="indexs">
        <span class="xuhao" v-if="items.xuhao">{{items.xuhao}}</span>
      <template v-if="ChildType != 'image_gdcy' && items.hanziSite == 'top'">
        <div class="hanzi-box hanzi-box-top" v-if="items.pinyin || items.hanzi">
          <span
            v-if="
              items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
            "
            class="pinyin"
            >{{ items.pinyin }}</span
          >
          <p v-if="items.hanzi">{{ items.hanzi }}</p>
          <span
            v-if="items.pinyin && items.pinyinSite == 'bottom'"
            class="pinyin"
            >{{ items.pinyin }}</span
          >
        </div>
      </template>
      <div v-for="(itemss, indexss) in items.img_list" :key="indexss">
        <el-image
          :src="itemss.id"
          fit="scale-down"
          class="img_url"
          @click="playmicrophone(items.mp3_list[0].id, 'mp3')"
        >
          <div slot="placeholder" class="image-slot">
            <img src="../../../assets/common/icon-imgloading.png" />
          </div>
        </el-image>
      </div>
      <template
        v-if="
          ChildType != 'image_gdcy' &&
          (!items.hanziSite || items.hanziSite == 'bottom')
        "
      >
        <div class="hanzi-box" v-if="items.pinyin || items.hanzi">
          <span
            v-if="
              items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
            "
            class="pinyin"
            >{{ items.pinyin }}</span
          >
          <p v-if="items.hanzi">{{ items.hanzi }}</p>
          <span
            v-if="items.pinyin && items.pinyinSite == 'bottom'"
            class="pinyin"
            >{{ items.pinyin }}</span
          >
        </div>
      </template>
      <template
        v-if="
          ChildType == 'image_input' ||
          ChildType == 'image_input_three' ||
          ChildType == 'image_wordInput'
        "
      >
        <template v-if="judgeAnswer == 'standardAnswer'">
          <input
            v-model="curQue.correct[0].input[0]"
            placeholder=""
            @blur="handleInput('input', 0)"
            :readonly="TaskModel == 'ANSWER'"
            maxlength="200"
            :class="['singleInput', 'userRight', inputAnswerClass('input', 0)]"
          />
        </template>
        <template v-else>
          <input
            v-model="curQue.Bookanswer[0].input.input[0].value"
            placeholder=""
            @blur="handleInput('input', 0)"
            :readonly="TaskModel == 'ANSWER'"
            maxlength="200"
            :class="['singleInput', inputAnswerClass('input', 0)]"
          />
        </template>
      </template>
      <!-- <input class="singleInput" placeholder="输入" @blur="handleInput(index,indexs)" v-if="fn_list_obj[index]&&fn_list_obj[index].indexOf('input')>-1"> -->
      <!-- 补齐输入 -->
      <template v-if="ChildType == 'image_gdcy'">
        <div class="fill-box">
          <b v-if="items.hanzi">{{ items.hanzi }}</b>
          <template v-if="judgeAnswer == 'standardAnswer'">
            <input
              v-model="curQue.correct[0].input[0]"
              placeholder=""
              @blur="handleInput('input', 0)"
              :readonly="true"
              maxlength="200"
              :class="inputAnswerClass('input', 0)"
            />
          </template>
          <template v-else>
            <input
              v-model="curQue.Bookanswer[0].input.input[0].value"
              placeholder=""
              @blur="handleInput('input', 0)"
              :readonly="TaskModel == 'ANSWER'"
              maxlength="200"
              :class="inputAnswerClass('input', 0)"
            />
          </template>
        </div>
      </template>
      <!-- 双输入 -->
      <template v-if="ChildType == 'image_dobleinput'">
        <div class="DoubleInput-box">
          <template v-if="judgeAnswer == 'standardAnswer'">
            <input
              placeholder=""
              v-model="curQue.correct[0].input[0]"
              :readonly="true"
              maxlength="200"
              :class="inputAnswerClass('input', 0)"
            />
            <input
              placeholder=""
              v-model="curQue.correct[0].input[1]"
              :readonly="true"
              maxlength="200"
              :class="inputAnswerClass('input', 1)"
            />
          </template>
          <template v-else>
            <input
              placeholder=""
              @blur="handleInput('input', 0)"
              v-model="curQue.Bookanswer[0].input.input[0].value"
              :readonly="TaskModel == 'ANSWER'"
              maxlength="200"
              :class="inputAnswerClass('input', 0)"
            />
            <input
              placeholder=""
              @blur="handleInput('input', 1)"
              v-model="curQue.Bookanswer[0].input.input[1].value"
              :readonly="TaskModel == 'ANSWER'"
              maxlength="200"
              :class="inputAnswerClass('input', 1)"
            />
          </template>
        </div>
      </template>
      <!-- 判断 -->
      <template v-if="ChildType == 'image_judge'">
        <div class="judge-box">
          <a
            :class="[
              'right-btn',
              TaskModel != 'ANSWER' ? 'right-btn-hover' : '',
              judgeAnswerClass('true'),
            ]"
            @click="handleSelectJudge('true')"
          ></a>
          <a
            :class="[
              'error-btn',
              TaskModel != 'ANSWER' ? 'error-btn-hover' : '',
              judgeAnswerClass('false'),
            ]"
            @click="handleSelectJudge('false')"
          ></a>
        </div>
      </template>
      <template
        v-if="ChildType == 'image_single' || ChildType == 'image_checkBox'"
      >
        <div class="option_main">
          <div
            v-for="(itemss, indexss) in items.option"
            :key="'op' + indexss"
            :class="[
              'xxoption',
              'option' + curQue.numberList.con,
              singleAnswerClass(indexss),
              checkBoxAnswerClass(indexss),
            ]"
          >
            <template v-if="judgeAnswer == 'standardAnswer'">
              <!-- 单选 -->
              <template v-if="ChildType == 'image_single'">
                <el-radio
                  v-model="curQue.correct[0].single[0]"
                  :label="indexss"
                  :disabled="TaskModel == 'ANSWER'"
                  @input="changeSingle"
                >
                  <div
                    class="hanzi-box hanzi-box-top"
                    v-if="itemss.pinyin || itemss.hanzi"
                  >
                    <span
                      v-if="
                        itemss.pinyin &&
                        (!items.pinyinSite || items.pinyinSite == 'top')
                      "
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
                    <span
                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                  </div>
                </el-radio>
              </template>
              <!-- 复选 -->
              <template v-if="ChildType == 'image_checkBox'">
                <el-checkbox
                  v-model="curQue.correct[0].checkBox"
                  :label="indexss"
                  :disabled="TaskModel == 'ANSWER'"
                >
                  <div
                    class="hanzi-box hanzi-box-top"
                    v-if="itemss.pinyin || itemss.hanzi"
                  >
                    <span
                      v-if="
                        itemss.pinyin &&
                        (!items.pinyinSite || items.pinyinSite == 'top')
                      "
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
                    <span
                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                  </div>
                </el-checkbox>
              </template>
            </template>
            <template v-else>
              <!-- 单选 -->
              <template v-if="ChildType == 'image_single'">
                <el-radio
                  v-model="curQue.Bookanswer[0].single[0].value"
                  :label="indexss"
                  :disabled="TaskModel == 'ANSWER'"
                  @input="changeSingle"
                  @click.native.prevent="overallClick(indexss)"
                >
                  <div
                    class="hanzi-box hanzi-box-top"
                    v-if="itemss.pinyin || itemss.hanzi"
                  >
                    <span
                      v-if="
                        itemss.pinyin &&
                        (!items.pinyinSite || items.pinyinSite == 'top')
                      "
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
                    <span
                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                  </div>
                </el-radio>
              </template>
              <!-- 复选 -->
              <template v-if="ChildType == 'image_checkBox'">
                <el-checkbox
                  v-model="curQue.Bookanswer[0].checkBox[0].value"
                  :label="indexss"
                  :disabled="TaskModel == 'ANSWER'"
                  @change="changeCheckBox"
                >
                  <div
                    class="hanzi-box hanzi-box-top"
                    v-if="itemss.pinyin || itemss.hanzi"
                  >
                    <span
                      v-if="
                        itemss.pinyin &&
                        (!items.pinyinSite || items.pinyinSite == 'top')
                      "
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                    <p v-if="itemss.hanzi">{{ itemss.hanzi }}</p>
                    <span
                      v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                      class="pinyin"
                      >{{ itemss.pinyin }}</span
                    >
                  </div>
                </el-checkbox>
              </template>
            </template>
          </div>
        </div>
      </template>
      <!-- 三件套 -->
      <div
        class="luyinVoice-box"
        v-if="
          items.mp3_list.length > 0 ||
          (fn_list_obj && fn_list_obj.indexOf('image_record') > -1) ||
          items.RecordControl
        "
      >
        <template v-if="items.mp3_list.length > 0">
          <span
            :class="['voice', mp3Play]"
            @click="playmicrophone(items.mp3_list[0].id, 'mp3')"
          ></span>
        </template>
        <Soundrecord
          @handleWav="handleWav"
          :answerRecordList="
            judgeAnswer != 'standardAnswer'
              ? curQue.Bookanswer[0].recordList
              : []
          "
          :TaskModel="TaskModel"
          :type="items.RecordControl ? items.RecordControl : 'normal'"
          class="luyin-box"
          :class="[items.RecordControl]"
          v-if="fn_list_obj.indexOf('image_record') > -1 || items.RecordControl"
        />
        <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
                    <span :class="['play',hasMicro]" @click="playmicrophone(wavblob)"></span> -->
      </div>
    </li>
    <!-- </ul> -->
  </div>
</template>

<script>
import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
import Recorder from "js-audio-recorder"; //录音插件
export default {
  components: { Soundrecord },
  props: ["curQue", "ChildType", "TaskModel", "judgeAnswer"],
  data() {
    return {
      fn_list_obj: "",
      answer: [],
      userAnswer: {
        input: { input: [] }, //输入
        judge: [], // 判断
        single: [],
        checkBox: [],
        recordList: [],
      }, // 记录用户答题内容
      recorder: new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
      }),
      microphoneStatus: false,
      hasMicro: "", // 录音后的样式class
      wavblob: null,
      audio: new window.Audio(),
      oldUrl: null, // 存储上个播放音频地址
      mp3Play: "", // 音频播放
      userErrorNumberTotal: 0,
    };
  },
  computed: {
    isShowTemp() {
      let _this = this;
      let bool = false;
      if (_this.curQue && _this.curQue.Bookanswer) {
        if (_this.judgeAnswer == "standardAnswer") {
          if (_this.userErrorNumberTotal > 0) {
            bool = true;
          } else {
            bool = false;
          }
        } else {
          bool = true;
        }
      }
      return bool;
    },
    inputAnswerClass() {
      return function (key, index) {
        let _this = this;
        let classname = "";
        if (_this.judgeAnswer == "standardAnswer") {
          classname = "userRight";
        } else if (
          _this.judgeAnswer == "studentAnswer" ||
          _this.judgeAnswer == "userAnswer"
        ) {
          let answer = _this.curQue.Bookanswer[0].input.input[index].value;
          let correct = _this.curQue.correct[0][key][index];
          if (correct) {
            if (answer == correct) {
              classname = "userRight";
            } else {
              classname = "userError";
            }
          }
        }
        return classname;
      };
    },
    judgeAnswerClass() {
      return function (type) {
        let _this = this;
        let classname = "";
        let answer = _this.curQue.Bookanswer[0].judge[0].value;
        let correct = _this.curQue.correct[0].judge[0];
        if (_this.judgeAnswer == "standardAnswer") {
          if (correct == type) {
            classname = "userRight_" + type;
          }
        } else if (
          _this.judgeAnswer == "studentAnswer" ||
          _this.judgeAnswer == "userAnswer"
        ) {
          if (answer == type) {
            if (correct) {
              if (answer == correct) {
                classname = "userRight_" + type;
              } else {
                classname = "userError_" + type;
              }
            } else {
              classname = "active";
            }
          }
        } else {
          if (answer == type) {
            classname = "active";
          }
        }
        return classname;
      };
    },
    singleModel() {
      let _this = this;
      let result =
        _this.judgeAnswer == "standardAnswer"
          ? _this.curQue.correct[0].single[0]
          : _this.curQue.Bookanswer[0].single[0].value;
      return result;
    },
    singleAnswerClass() {
      return function (index) {
        let _this = this;
        let classname = "";
        if (_this.ChildType == "image_single") {
          let answer = _this.curQue.Bookanswer[0].single[0].value;
          let correct = _this.curQue.correct[0].single[0];
          if (_this.judgeAnswer == "standardAnswer") {
            if ((correct || correct === 0) && index === correct) {
              classname = "userRight";
            }
          } else if (
            _this.judgeAnswer == "studentAnswer" ||
            _this.judgeAnswer == "userAnswer"
          ) {
            if (correct || correct === 0) {
              if (answer === correct) {
                if (correct === index) {
                  classname = "userRight";
                }
              } else {
                if (answer === index) {
                  classname = "userError";
                }
              }
            }
          }
        }
        return classname;
      };
    },
    checkBoxAnswerClass() {
      return function (index) {
        let _this = this;
        let classname = "";
        if (_this.ChildType == "image_checkBox") {
          let answer = _this.curQue.Bookanswer[0].checkBox[0].value;
          let correct = _this.curQue.correct[0].checkBox;
          if (_this.judgeAnswer == "standardAnswer") {
            if (correct && correct.length > 0) {
              if (correct.indexOf(index) > -1) {
                classname = "userRight";
              }
            }
          } else if (
            _this.judgeAnswer == "studentAnswer" ||
            _this.judgeAnswer == "userAnswer"
          ) {
            if (correct && correct.length > 0) {
              if (correct.indexOf(index) > -1 && answer.indexOf(index) > -1) {
                classname = "userRight";
              } else if (
                answer.indexOf(index) > -1 &&
                correct.indexOf(index) < 0
              ) {
                classname = "userError";
              }
            }
          }
        }
        return classname;
      };
    },
  },
  watch: {},
  //方法集合
  methods: {
    handleFnList() {
      let _this = this;
      _this.userErrorNumberTotal = 0;
      if (!_this.curQue.Bookanswer) {
        _this.curQue.correct.forEach((item, index) => {
          //单输入/补全输入
          if (
            _this.ChildType == "image_input" ||
            _this.ChildType == "image_gdcy" ||
            _this.ChildType == "image_input_three" ||
            _this.ChildType == "image_wordInput"
          ) {
            let obj = {
              input: [
                {
                  value: "",
                  userAnswerJudge:
                    item.input[0] || item.input[0] === 0
                      ? "[JUDGE##F##JUDGE]"
                      : "",
                },
              ],
            };
            _this.userAnswer.input = JSON.parse(JSON.stringify(obj));
          }
          //双输入
          if (_this.ChildType == "image_dobleinput") {
            let obj = {
              input: [
                {
                  value: "",
                  userAnswerJudge:
                    item.input[0] || item.input[0] === 0
                      ? "[JUDGE##F##JUDGE]"
                      : "",
                },
                {
                  value: "",
                  userAnswerJudge:
                    item.input[1] || item.input[1] === 0
                      ? "[JUDGE##F##JUDGE]"
                      : "",
                },
              ],
            };
            this.userAnswer.input = JSON.parse(JSON.stringify(obj));
          }
          //判断
          if (_this.ChildType == "image_judge") {
            let obj_judge = {
              value: "",
              userAnswerJudge: item.judge.length > 0 ? "[JUDGE##F##JUDGE]" : "",
            };
            _this.userAnswer.judge.push(JSON.parse(JSON.stringify(obj_judge)));
          }
          //单选
          if (_this.ChildType == "image_single") {
            let obj_single = {
              value: "",
              userAnswerJudge:
                item.single.length > 0 ? "[JUDGE##F##JUDGE]" : "",
            };
            _this.userAnswer.single.push(
              JSON.parse(JSON.stringify(obj_single))
            );
          }
          //单选
          if (_this.ChildType == "image_checkBox") {
            let obj_box = {
              value: [],
              userAnswerJudge:
                item.checkBox.length > 0 ? "[JUDGE##F##JUDGE]" : "",
            };
            _this.userAnswer.checkBox.push(JSON.parse(JSON.stringify(obj_box)));
          }
        });
        _this.$set(_this.curQue, "Bookanswer", []);
        this.curQue.Bookanswer.push(
          JSON.parse(JSON.stringify(this.userAnswer))
        );
      } else {
        let BookanswerStr = JSON.stringify(_this.curQue.Bookanswer);
        let errReg = /\[JUDGE##F##JUDGE\]/g;
        if (errReg.test(BookanswerStr)) {
          let errorArr = BookanswerStr.match(/\[JUDGE##F##JUDGE\]/g);
          _this.userErrorNumberTotal = errorArr.length;
        }
      }
      let obj = "";
      this.curQue.fn_list.forEach((node) => {
        if (node.isFn) {
          obj += node.type + ",";
        }
      });
      this.fn_list_obj = obj;
    },
    // 修改正确选项中得某一个为正确答案
    changAnswer(index, type) {
      if (type == "single") {
      } else if (type == "checkBox") {
        let correct = [];
        this.curQue.option.forEach((item, i) => {
          if (item.isChecked) {
            correct.push(i);
          }
        });
        this.answer[0].checkBox = correct;
      } else if (type == "judge") {
        //console.log(this.answer);
      }
    },
    // 去掉前后空格
    handleInput(key, indexs) {
      if (indexs || indexs === 0) {
        let res = this.curQue.Bookanswer[0][key].input[indexs].value.trim();
        this.$set(this.curQue.Bookanswer[0][key].input[indexs], "value", res);
        let hasError = false,
          hasRight = false;
        this.curQue.correct[0].input.forEach((item, index) => {
          let answer = this.curQue.Bookanswer[0][key].input[index].value;
          if (item) {
            if (item != answer) {
              this.$set(
                this.curQue.Bookanswer[0][key].input[index],
                "userAnswerJudge",
                "[JUDGE##F##JUDGE]"
              );
            } else {
              this.$set(
                this.curQue.Bookanswer[0][key].input[index],
                "userAnswerJudge",
                "[JUDGE##T##JUDGE]"
              );
            }
          }
        });
        // if (hasError) {
        //   this.$set(
        //     this.curQue.Bookanswer[0][key],
        //     "userAnswerJudge",
        //     "[JUDGE##F##JUDGE]"
        //   );
        // }
        // if (!hasError && hasRight) {
        //   this.$set(
        //     this.curQue.Bookanswer[0][key],
        //     "userAnswerJudge",
        //     "[JUDGE##T##JUDGE]"
        //   );
        // }
      } else {
        this.curQue.Bookanswer[0][key] = this.curQue.Bookanswer[0][key].trim();
      }
      this.$forceUpdate();
    },
    overallClick(value){
        this.curQue.Bookanswer[0].single[0].value = value===this.curQue.Bookanswer[0].single[0].value?'':value
        this.changeSingle(this.curQue.Bookanswer[0].single[0].value)
    },
    changeSingle(value) {
      let _this = this;
      let correct = _this.curQue.correct[0].single[0];
      if (correct || correct == 0) {
        if (value === correct) {
          _this.$set(
            _this.curQue.Bookanswer[0].single[0],
            "userAnswerJudge",
            "[JUDGE##T##JUDGE]"
          );
        } else {
          _this.$set(
            _this.curQue.Bookanswer[0].single[0],
            "userAnswerJudge",
            "[JUDGE##F##JUDGE]"
          );
        }
      }
      _this.$forceUpdate();
    },
    changeCheckBox() {
      let _this = this;
      let value = _this.curQue.Bookanswer[0].checkBox[0].value;
      let valueStr = value.sort().toString();
      let correct = _this.curQue.correct[0].checkBox;
      let correctStr = correct.sort().toString();
      if (correct && correct.length > 0) {
        if (valueStr == correctStr) {
          _this.$set(
            _this.curQue.Bookanswer[0].checkBox[0],
            "userAnswerJudge",
            "[JUDGE##T##JUDGE]"
          );
        } else {
          _this.$set(
            _this.curQue.Bookanswer[0].checkBox[0],
            "userAnswerJudge",
            "[JUDGE##F##JUDGE]"
          );
        }
      }
      _this.$forceUpdate();
    },
    playmicrophone(url, type) {
      if (url) {
        let _this = this;
        if (!this.audio.paused) {
          this.audio.pause();
          if (type == "mp3") {
            _this.mp3Play = "";
          }
        } else if (this.audio.paused && _this.oldUrl == url) {
          _this.audio.play();
          if (type == "mp3") {
            _this.mp3Play = "active";
          }
        } else {
          _this.audio.pause();
          _this.audio.load();
          if (type == "mp3") {
            _this.mp3Play = "active";
            _this.audio.src = url;
          }
          _this.oldUrl = url;
          _this.audio.play();
        }
      }
    },
    // 判断题选择
    handleSelectJudge(obj) {
      let _this = this;
      if (_this.TaskModel != "ANSWER" || !judgeAnswer) {
        _this.$set(_this.curQue.Bookanswer[0].judge[0], "value", obj);
        let correct = _this.curQue.correct[0].judge[0];
        if (correct) {
          if (correct == obj) {
            _this.$set(
              _this.curQue.Bookanswer[0].judge[0],
              "userAnswerJudge",
              "[JUDGE##T##JUDGE]"
            );
          } else {
            _this.$set(
              _this.curQue.Bookanswer[0].judge[0],
              "userAnswerJudge",
              "[JUDGE##F##JUDGE]"
            );
          }
        }
      }
      _this.$forceUpdate();
    },
    handleWav(list, tmIndex) {
      tmIndex = tmIndex ? tmIndex : 0;
      this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQue) {
      this.handleFnList();

      let obj = {
        single: [],
        checkBox: [],
        judge: [],
        input: [],
        spell: [],
      };
      this.answer.push(obj);
    }
    let _this = this;
    _this.audio.addEventListener("ended", function () {
      _this.mp3Play = "";
      _this.hasMicro = "normal";
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-PictureBox {
  width: 100%;
  margin-bottom: 24px;
  // &.PictureBoxFlex{
  //     display: flex;
  //     justify-content: space-between;
  //     .Big-Book-PictureBox-item{
  //         width: 384px;
  //     }
  // }
  // .Big-Book-PictureBox-item{
  //     list-style: none;
  //     background: #F3F3F3;
  //     border-radius: 8px;
  //     padding: 16px;
  //     margin: 0;
  //     display: flex;
  //     flex-flow: wrap;
  h2{
    word-break: break-word;
    font-family: 'robot';
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    margin: 0 0 16px;
    color: #000000;
  }
  li {
    list-style: none;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    position: relative;
    .xuhao{
        position: absolute;
        top: -4px;
        left: -4px;
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
        font-family: 'robot';
        color: #FFFFFF;
        padding: 1px 4px;
        background: #e35454;
        border-radius: 8px;
        display: block;
        min-width: 16px;
        text-align: center;
    }
    .option_main {
      display: flex;
      flex-wrap: wrap;
      .xxoption {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        border: 1px transparent solid;
        border-radius: 4px;
        &.userRight {
          background: rgba(44, 167, 103, 0.1);
          border-color: #2ca767;
        }
        &.userError {
          background: rgba(237, 52, 45, 0.1);
          border-color: #ed342d;
        }
      }
      .option1 {
        width: 100%;
      }
      .option2 {
        width: 50%;
      }
      .option3 {
        width: 33.33%;
      }
      .option4 {
        width: 25%;
      }
    }

    .hanzi-box {
      margin-top: 8px;
      &.hanzi-box-top {
        margin-top: 0px;
      }
      > span.pinyin {
        display: block;
        text-align: center;
        font-family: "GB-PINYINOK-B";
        font-size: 14px;
        line-height: 1.3;
        color: #000000;
      }
      > p {
        color: #000000;
        font-size: 16px;
        line-height: 150%;
        text-align: center;
        margin: 0;
        width: 100%;
        font-family: "FZJCGFKTK";
      }
    }
    input {
      flex: 1;
      width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.15);
      box-sizing: border-box;
      border-radius: 4px;
      outline: none;
      height: 32px;
      padding: 4px 8px;
      color: #000000;
      text-align: center;
      font-size: 16px;
      line-height: 150%;
      &.singleInput {
        margin-top: 8px;
      }
      &.userRight {
        color: #2ca767;
      }
      &.userError {
        color: #ed342d;
      }
    }
    .luyinVoice-box {
      width: 100%;
      margin-top: 8px;
      display: flex;
      -ms-flex-pack: justify;
      align-items: center;
      span {
        width: 24px;
        height: 24px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 24px;
        margin-right: 8px;
        cursor: pointer;
        &:first-child {
          margin-left: 0px;
        }
        &.voice {
          background-image: url("../../../assets/newImage/common/icon-voice-red.png");
        }
        &.active {
          background-image: url("../../../assets/newImage/common/icon-voice-play-red.png");
        }
        // &.luyin{
        //     background-image: url('../../../assets/newImage/common/luyin.png');
        //     &.active {
        //         background-image: url('../../../assets/newImage/common/luyin-active.png');
        //     }
        // }
        // &.play{
        //     background-image: url('../../../assets/newImage/common/luyin-play.png');
        //     &.normal {
        //         background-image: url('../../../assets/newImage/common/luyin-play-active.png');
        //     }
        //     &.stop {
        //         background-image: url('../../../assets/newImage/common/luyin-play-stop.png');
        //     }
        // }
      }
      .luyin-box {
        flex: 1;
        justify-content: start;
        padding: 0 12px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        &.mini {
          width: 64px;
        }
        &.normal {
          width: 129px;
        }
        &.pro {
          width: 200px;
        }
        &.promax {
          width: 280px;
        }
      }
    }
    .fill-box {
      display: flex;
      align-items: center;
      margin-top: 8px;
      b {
        margin-right: 8px;
        color: #000000;
        font-weight: normal;
        font-size: 16px;
      }
    }
    .DoubleInput-box {
      display: flex;
      align-items: center;
      margin-top: 8px;
      > input:first-child {
        margin-right: 8px;
      }
    }
    .el-radio,
    .el-checkbox {
      // width: 100%;
      // margin: 8px 0 0;
      // text-align: center;
      // height: 32px;
      // line-height: 32px;
      margin-right: 8px;
    }
    .judge-box {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      a {
        width: 70px;
        height: 32px;
        background: #f7f7f7 url("../../../assets/newImage/common/right-btn.png")
          center no-repeat;
        background-size: 24px;
        border-radius: 4px;
        border: 1px solid #f7f7f7;
        &.right-btn-hover:hover,
        &.active {
          background-color: #e5fff0;
          border-color: #00c850;
        }
        &.error-btn {
          background: #f7f7f7
            url("../../../assets/newImage/common/error-btn.png") center
            no-repeat;
          background-size: 24px;
          margin-left: 4px;
          &.error-btn-hover:hover,
          &.active {
            background-color: #ffe5e5;
            border-color: #de4444;
          }
        }
        &.userRight_true {
          background-color: rgba(44, 167, 103, 0.1);
          border: 1px solid #2ca767;
        }
        &.userError_true {
          border: 1px solid #ed342d;
          background: rgba(237, 52, 45, 0.1)
            url("../../../assets/newImage/common/judge-dui.png") center
            no-repeat;
          background-size: 24px;
        }
        &.userRight_false {
          border: 1px solid #2ca767;
          background: rgba(44, 167, 103, 0.1)
            url("../../../assets/newImage/common/judge-cuo.png") center
            no-repeat;
          background-size: 24px;
        }
        &.userError_false {
          background-color: rgba(237, 52, 45, 0.1);
          border: 1px solid #ed342d;
        }
      }
    }
  }
  .img_url {
    width: 100%;
    height: 128px;
    cursor: pointer;
  }
  // }
}
.NNPE-tableList-tr-last {
  .Big-Book-PictureBox {
    margin-bottom: 0;
  }
}
.NPC-Big-Book-preview-green {
    .Big-Book-PictureBox {
        li{
            .xuhao{
                background: #24b99e;
            }
        }
    }
}
.NPC-Big-Book-preview-brown {
    .Big-Book-PictureBox {
        li{
            .xuhao{
                background: #bd8865;
            }
        }
    }
}
</style>
<style lang="scss">
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.Big-Book-PictureBox {
  .el-checkbox__label,
  .el-radio__label {
    padding: 0;
  }
}
.xxoption {
  label {
    display: flex;
    justify-content: center;
    align-items: center;
    > .el-radio__label {
      margin-left: 8px;
    }
  }
}
</style>