GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/PurePreview.vue

<!--  -->
<template>
  <div class="Big-Book-PurePreview" v-if="curQue">
    <div
      class="Big-Book-Single-content"
      style="margin-left: 20px; margin-top: 20px"
    >
      <div class="adult-book-input-item">
        <span class="adult-book-lable">标题：</span>
        <el-input
          class="adult-book-input"
          type="textarea"
          :autosize="{ minRows: 2 }"
          placeholder="请输入标题"
          v-model="curQue.title"
          @blur="onBlur(curQue, 'title')"
          maxlength="500"
          show-word-limit
        ></el-input>
      </div>
      <template v-if="type == 'listen_record_single_syllable_chs'">
        <div class="adult-book-input-item">
          <span class="adult-book-lable">题目音频：</span>
          <Upload
            :changeFillId="timuchangeMp3"
            :datafileList="curQue.mp3_list"
            :filleNumber="mp3Number"
            :uploadType="'mp3'"
          />
        </div>
        <div class="adult-book-input-item">
          <span class="adult-book-lable">题目lrc：</span>
          <Upload
            :changeFillId="changeLrc"
            :datafileList="curQue.lrc_list"
            :filleNumber="mp3Number"
            :uploadType="'lrc'"
          />
        </div>
        <div class="adult-book-input-item">
          <span class="adult-book-lable"></span>
          <el-button
            type="primary"
            size="small"
            class="distribution"
            @click="parseLrcFile"
          >
            分配lrc
          </el-button>
        </div>
      </template>
      <template
        v-if="type == 'text_problem_chs' || type == 'newWord_preview_chs'"
      >
        <div
          class="Big-Book-main"
          v-for="(item, index) in curQue.option"
          :key="item + index"
          style="margin-bottom: 20px"
        >
          <template v-if="type == 'text_problem_chs'">
            <div class="adult-book-input-item">
              <span class="adult-book-lable">序号：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入序号"
                v-model="item.number"
                @blur="onBlur(item, 'number')"
                maxlength="200"
                show-word-limit
              ></el-input>
              <img
                @click="deleteOptionOne(index)"
                class="close"
                src="../../../assets/adult/del-close.png"
                alt=""
              />
            </div>
            <div class="NPC-sentence-Segword">
              <SentenceSegwordChs :curQue="item.detail" />
            </div>
            <div class="adult-book-input-item">
              <span class="adult-book-lable">英文：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入英文"
                v-model="item.en"
                @blur="onBlur(item, 'en')"
                maxlength="200"
                show-word-limit
              ></el-input>
              <img
                @click="deleteOptionOne(index)"
                class="close"
                src="../../../assets/adult/del-close.png"
                alt=""
              />
            </div>
          </template>
          <template v-if="type == 'newWord_preview_chs'">
            <div class="adult-book-input-item">
              <span class="adult-book-lable">拼音：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入拼音"
                v-model="item.pinyin"
                @blur="onBlur(item, 'pinyin')"
                maxlength="200"
                show-word-limit
              ></el-input>
              <img
                @click="deleteOptionOne(index)"
                class="close"
                src="../../../assets/adult/del-close.png"
                alt=""
              />
            </div>
            <div class="adult-book-input-item">
              <span class="adult-book-lable">英文：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入英文"
                v-model="item.en"
                @blur="onBlur(item, 'en')"
                maxlength="200"
                show-word-limit
              ></el-input>
            </div>
            <div class="adult-book-input-item">
              <span class="adult-book-lable">展示方式：</span>
              <el-radio-group v-model="item.imgOrText">
                <el-radio label="image">图片</el-radio>
                <el-radio label="text">文本</el-radio>
              </el-radio-group>
            </div>
            <template v-if="item.imgOrText == 'image'">
              <div class="adult-book-input-item">
                <span class="adult-book-lable">图片：</span>
                <Upload
                  :changeFillId="changeImage"
                  :datafileList="item.img_list"
                  :filleNumber="mp3Number"
                  :uploadType="'image'"
                  :index="index"
                />
              </div>
            </template>
            <template v-if="item.imgOrText == 'text'">
              <div class="adult-book-input-item">
                <span class="adult-book-lable">生字：</span>
                <el-input
                  class="adult-book-input"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  placeholder="请输入生字"
                  v-model="item.con"
                  @blur="onBlur(item, 'con')"
                  maxlength="200"
                  show-word-limit
                ></el-input>
              </div>
              <!-- <div class="adult-book-input-item">
                <span class="adult-book-lable">音频：</span>
                <Upload
                  :changeFillId="changeMp3"
                  :datafileList="item.mp3_list"
                  :filleNumber="mp3Number"
                  :uploadType="'mp3'"
                  :index="index"
                />
              </div> -->
            </template>
            <!-- <div class="adult-book-input-item">
              <span class="adult-book-lable">配置：</span>
              <el-checkbox-group v-model="item.type" @change="forupdata">
                <el-checkbox label="mh">描红</el-checkbox>
                <el-checkbox label="lm">临摹</el-checkbox>
              </el-checkbox-group>
            
            </div> -->
          </template>
        </div>
      </template>
      <template v-if="type == 'listen_record_single_syllable_chs'">
        <div
          class="Big-Book-main"
          v-for="(item, index) in curQue.option"
          :key="item + index"
          style="margin-bottom: 20px"
        >
          <div class="adult-book-input-item">
            <span class="adult-book-lable">序号：</span>
            <el-input
              class="adult-book-input"
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入序号"
              v-model="item.number"
              @blur="onBlur(item, 'number')"
              maxlength="200"
              show-word-limit
            ></el-input>
            <img
              @click="deleteOptionOne(index)"
              class="close"
              src="../../../assets/adult/del-close.png"
              alt=""
            />
          </div>
          <!-- <div class="adult-book-input-item">
            <span class="adult-book-lable">音频：</span>
            <Upload
              :changeFillId="listenchangeMp3"
              :datafileList="item.mp3_list"
              :filleNumber="mp3Number"
              :uploadType="'mp3'"
              :index="index"
            />
          </div> -->
          <div class="adult-book-input-item" v-if="curQue.wordTime.length > 0">
            <span class="adult-book-lable">字幕时间：</span>
            <div style="display: flex; align-items: center">
              <el-input
                class="adult-book-input"
                type="textarea"
                style="width: 200px"
                v-model="curQue.wordTime[index].bg"
                @blur="onBlur(curQue.wordTime[index], 'bg')"
                maxlength="200"
                show-word-limit
              ></el-input>
              ~
              <el-input
                class="adult-book-input"
                style="width: 200px"
                type="textarea"
                v-model="curQue.wordTime[index].ed"
                @blur="onBlur(curQue.wordTime[index], 'ed')"
                maxlength="200"
                show-word-limit
              ></el-input>
            </div>
          </div>
          <div v-for="(it, itI) in item.option" :key="'it' + itI">
            <div class="adult-book-input-item">
              <span class="adult-book-lable">拼音：</span>
              <el-input
                class="adult-book-input"
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入拼音"
                v-model="it.pinyin"
                @blur="onBlur(it, 'pinyin')"
                maxlength="200"
                show-word-limit
              ></el-input>

              <img
                @click="deleteyinjie(index, itI)"
                class="close"
                src="../../../assets/adult/del-close.png"
                alt=""
              />
            </div>
            <div class="adult-book-input-item">
              <span class="adult-book-lable">正确答案：</span>
              <el-radio-group
                v-model="it.isAnswer"
                @change="changeIsAnswer(index, itI)"
              >
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="addoption" @click="addyinjie(index)">添加一个音节</div>
        </div>
      </template>
      <div class="Big-Book-addrole">
        <div class="addoption" @click="addOption">添加一个</div>
      </div>
      <template v-if="type == 'newWord_preview_chs'">
        <div class="Big-Book-divide">
          <el-divider content-position="center">功能设置</el-divider>
          <span style="margin: 0 10px">请选择每行数量</span>
          <el-select v-model="curQue.numberList.con" placeholder="请选择">
            <el-option
              v-for="(item, i) in curQue.numberList.arr"
              :key="i"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </template>
      <template v-if="type == 'listen_record_single_syllable_chs'">
        <!-- <div class="lrc-box">
          <div
            v-if="this.curQue.wordTime && this.curQue.wordTime.length > 0"
            class="lrc-box"
          >
            <span>已有字幕时间节点</span>
            <el-button type="text" @click="againWordTime">重新生成</el-button>
            <el-button @click="compareTime('句子')" size="medium"
              >校对句子字幕时间</el-button
            >
            <el-button @click="compareTime('文字')" size="medium"
              >校对文字字幕时间</el-button
            >
          </div>
          <template v-else>
            <el-button v-if="!isWordTime" size="medium" @click="createWordTime"
              >自动生成字幕节点</el-button
            >
            <p v-else>字幕节点生成中...请等待</p>
          </template>
        </div> -->
      </template>
    </div>
    <!-- <el-dialog
      title="校对字幕时间"
      :visible.sync="compareShow"
      width="50%"
      :before-close="handleClose"
      top="0"
    >
      <CompareTime
        :data="compareData"
        :type="compareType"
        :changewordsResultList="changewordsResultList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :loading="compareloading" type="primary" @click="saveCompare"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import Upload from "../common/Upload";
import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
import { getWordTime, getContentFile, prepareTranscribe, compareSenTenceTime } from "@/api/ajax";
import CompareTime from "./ArticleTemChs/components/CompareTime.vue";
export default {
  name: "PurePreview",
  props: ["curQue", "fn_data", "changeCurQue", "type"],
  components: {
    SentenceSegwordChs,
    Upload,
    CompareTime,
  },
  data() {
    return {
      checkList: [],
      mp3Number: 1,
      list: [
        {
          con: "临摹",
        },
        {
          con: "描红",
        },
      ],
      form: {
        stem: {
          con: "",
          pinyin: "",
          english: "",
          highlight: "",
          underline: "",
          img_url: [],
          mp3_url: [],
        },
      },
      data_structure: {
        type: "text_problem_chs",
        name: "课文上面的问题",
        title: "",
        option: [
          {
            mp3_list: [],
            number: "",
            detail: {
              en: "",
              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
              sentence: "", //句子
              segList: [], //分词结果
              seg_words: "",
              wordsList: [],
            },
            en: "", //英文
            answer: [""],
            judge: true,
          },
        ],
      },
      data_structure2: {
        type: "newWord_preview_chs",
        name: "生字展示",
        title: "",
        imgOrText: null,
        option: [
          {
            mp3_list: [],
            img_list: [],
            con: "", //生字
            en: "",
            pinyin: "", //拼音
            type: ["lm"],
          },
        ],
        numberList: {
          type: "number",
          name: "每行几个",
          con: "7",
          arr: [
            {
              id: 1,
              value: 1,
            },
            {
              id: 2,
              value: 2,
            },
            {
              id: 3,
              value: 3,
            },
            {
              id: 4,
              value: 4,
            },
            {
              id: 5,
              value: 5,
            },
            {
              id: 6,
              value: 6,
            },
            {
              id: 7,
              value: 7,
            },
          ],
        },
      },
      data_structure3: {
        type: "listen_record_single_syllable_chs",
        name: "听录音选择音节",
        title: "",
        mp3_list: [],
        number: "",
        wordTime: [],
        option: [
          {
            number: "",
            mp3_list: [],
            option: [
              {
                number: "",
                pinyin: "", //拼音
                isAnswer: false,
              },
            ],
          },
        ],
      },
      isWordTime: false,
      compareType: "", //校对类型
      compareShow: false,
      compareData: null,
      compareloading: false,
      CreadMp3loading: false,
      loading: false,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    changeIsAnswer(index, itIndex) {
      console.log(this.curQue.option[index].option[itIndex].isAnswer);
      let value = this.curQue.option[index].option[itIndex].isAnswer;
      if (value) {
        this.curQue.option[index].option.forEach((item) => {
          item.isAnswer = false;
        });
        this.curQue.option[index].option[itIndex].isAnswer = true;
      }
      this.$forceUpdate();
    },
    // 校对每个字的时间
    changewordsResultList(index, item) {
      this.curQue.wordTime[index].wordsResultList = JSON.parse(
        JSON.stringify(item)
      );
    },
    // 保存校对
    saveCompare() {
      if (this.compareType == "文字") {
        this.compareloading = false;
        return;
      }
      this.compareloading = true;
      compareSenTenceTime({ matchList: JSON.stringify(this.compareData) })
        .then((res) => {
          console.log(res);
          this.compareloading = false;
          this.curQue.wordTime = res.data.result;
        })
        .catch(() => {
          this.compareloading = false;
        });
    },
    // 校对时间
    compareTime(type) {
      this.compareType = type;
      this.compareData = JSON.parse(JSON.stringify(this.curQue.wordTime));
      this.compareShow = true;
    },
    handleClose() {
      this.compareShow = false;
      this.compareData = null;
      this.compareType = "";
    },

    forupdata() {
      this.$forceUpdate();
    },
    // 添加音节
    addyinjie(index) {
      let obj = JSON.parse(
        JSON.stringify(this.data_structure3.option[0].option[0])
      );
      this.curQue.option[index].option.push(obj);
    },
    // 删除音节
    deleteyinjie(index, yjIndex) {
      if (this.curQue.option[index].option.length <= 1) {
        this.$message.warning("至少要保留1个音节");
        return;
      }
      this.curQue.option[index].option.splice(yjIndex, 1);
    },
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    // 删除其中一个选项
    deleteOptionOne(index) {
      if (this.type == "listen_record_single_syllable_chs") {
        if (this.curQue.option.length <= 1) {
          this.$message.warning("至少要保留1个选项");
          return;
        }
        this.curQue.option.splice(index, 1);
        return;
      }
      if (this.curQue.option.length <= 1) {
        this.$message.warning("至少要保留1个选项");
        return;
      }
      this.curQue.option.splice(index, 1);
    },
    // 新增选项
    addOption() {
      let obj;
      if (this.type == "newWord_preview_chs") {
        obj = JSON.parse(JSON.stringify(this.data_structure2.option[0]));
        this.curQue.option.push(obj);
      } else if (this.type == "text_problem_chs") {
        obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
        this.curQue.option.push(obj);
      } else if (this.type == "listen_record_single_syllable_chs") {
        obj = JSON.parse(JSON.stringify(this.data_structure3.option[0]));
        this.curQue.option.push(obj);
      }
    },
    initcurQue() {
      let data;
      if (this.type == "newWord_preview_chs") {
        data = JSON.parse(JSON.stringify(this.data_structure2));
      } else if (this.type == "text_problem_chs") {
        data = JSON.parse(JSON.stringify(this.data_structure));
      } else if (this.type == "listen_record_single_syllable_chs") {
        data = JSON.parse(JSON.stringify(this.data_structure3));
      }
      this.changeCurQue(data);
    },
    // 选项的图片
    changeImage(fileList, duration, index) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.option[index].img_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    },
    // 选项的音频
    changeMp3(fileList, items, index) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.option[index].mp3_list = JSON.parse(
        JSON.stringify(articleImgRes)
      );
    },
    // 听录音选择音调的上传音频
    listenchangeMp3(fileList, items, index) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue[index].mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    // 题目的音频
    timuchangeMp3(fileList) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    // 上传音频文件
    handleChange(file, fileList) {
      let _this = this;
      _this.getBase64(file.raw).then((res) => {
        let base_res = res.split("base64,");
        let data = {
          fileName: file.raw.name,
          speechBase64: base_res[1],
          language: "ch",
        };
        prepareTranscribe(data).then((reses) => {
          _this.$set(_this.curQue, "taskId", reses.data.taskId);
        });
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    createWordTime() {
      if (this.curQue.taskId) {
        let verseList = [];
        this.curQue.option.forEach((item, index) => {
          item.forEach((sItem, sIndex) => {
            verseList.push(sItem.new_word);
          });
        });
        if (verseList.length > 0) {
          this.isWordTime = true;
          let data = {
            taskId: this.curQue.taskId,
            verseList: JSON.stringify(verseList),
            matchType: "chinese",
            language: "ch",
          };
          getWordTime(data).then((res) => {
            this.curQue.wordTime = res.data.result;
            this.isWordTime = false;
          });
        }
      } else {
        this.$message.warning("请先上传音频");
      }
    },
    parseLrcFile() {
      let lrcList = this.curQue.lrc_list;
      if (lrcList.length === 0) {
        return this.$message.warning("请先上传lrc文件");
      }
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getContentFile("tool-ParseLRCFile", {
        content_type: "FILE",
        file_id: this.curQue.lrc_list[0].file_id,
      }).then(({ lrc_list }) => {
        let lrc_list_res = [];
        lrc_list.forEach((item) => {
          let obj = {
            bg: item.begin_time,
            ed: item.end_time,
          };
          lrc_list_res.push(obj);
        });
        this.curQue.wordTime = lrc_list_res;
        this.$forceUpdate();
        this.loading.close();
      });
    },
    againWordTime() {
      this.isWordTime = false;
      this.$set(this.curQue, "wordTime", []);
    },
    changeLrc(fileLists) {
      let lrc_list = [];
      fileLists.forEach(({ response, name }) => {
        if (response) {
          let fileList = response.file_info_list[0];
          lrc_list.push({
            name,
            duration: fileList.media_duration,
            url: fileList.file_url,
            id: "[FID##" + fileList.file_id + "##FID]",
            file_id: fileList.file_id,
          });
        }
      });
      this.curQue.lrc_list = lrc_list;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!this.curQue) {
      this.initcurQue();
    } else {
      if (this.type == "newWord_preview_chs") {
        let obj = {
          type: "number",
          name: "每行几个",
          con: "7",
          arr: [
            {
              id: 1,
              value: 1,
            },
            {
              id: 2,
              value: 2,
            },
            {
              id: 3,
              value: 3,
            },
            {
              id: 4,
              value: 4,
            },
            {
              id: 5,
              value: 5,
            },
            {
              id: 6,
              value: 6,
            },
            {
              id: 7,
              value: 7,
            },
          ],
        };
        this.$set(this.curQue, "numberList", obj);
        this.curQue.option.forEach((item) => {
          if (!item.type) {
            item.type = ["lm"];
          }
        });
      }
      if (this.type == "listen_record_single_syllable_chs") {
        if (!this.curQue.wordTime) {
          this.curQue.wordTime = [];
        }
        this.curQue.option.forEach((item) => {
          item.option.forEach((it) => {
            if (!it.isAnswer) {
              it.isAnswer = false;
            }
          });
        });
      }
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scope>
//@import url(); 引入公共css类
.Big-Book-PurePreview {
  &-content {
    &.m {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .Big-Book-title {
      font-size: 16px;
      line-height: 40px;
      color: #000;
      margin-right: 15px;
    }
    .Big-Book-main {
      > div {
        margin-bottom: 10px;
        &.Big-Book-pinyin {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }
  .addoption {
    width: 200px;
    height: 40px;
    left: 40px;
    top: 304px;
    background: #f3f3f3;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  .Big-Book-addrole {
    > div {
      width: 300px;
      height: 40px;
      background: #f3f3f3;
      border: 1px dashed rgba(0, 0, 0, 0.15);
      box-sizing: border-box;
      border-radius: 4px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  }
  .Big-Book-more {
    .Big-Book-more-text {
      position: relative;
      text-align: center;
    }
    .Big-Book-more-text:before,
    .Big-Book-more-text:after {
      position: absolute;
      background: #ccc;
      content: "";
      height: 1px;
      top: 50%;
      width: 45%;
    }
    .Big-Book-more-text:before {
      left: 10px;
    }
    .Big-Book-more-text:after {
      right: 10px;
    }
    .Big-Book-more-main {
      display: flex;
      > :not(:nth-child(1)) {
        margin-left: 30px;
      }
    }
  }
  .Big-Book-con {
    display: flex;
    align-items: center;
  }
  .close {
    width: 24px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
</style>