zc_saas_admin/src/components/questionBank.vue

<template>
  <div id="questionBank">
    <el-col :span="24" style="display: flex; justify-content: center">
      <el-col
        :span="2"
        style="
          display: flex;
          align-items: center;
          justify-content: flex-start;
          cursor: pointer;
        "
      >
        <el-button
          type="success"
          icon="el-icon-arrow-left"
          circle
          size="small"
          @click="back"
          v-if="statusPop === 2"
        ></el-button>
      </el-col>
      <el-col :span="20" class="contentMore">
        <div class="marg_play">
          <span class="spans">题目类型：</span>
          <el-radio-group v-model="dingForm.type" @change="changeTypes">
            <el-radio
              :disabled="statusPop === 2 || statusPop === 0"
              v-for="(item, index) in radioArrays"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </div>
        <div class="marg_play">
          <span class="spans"><span style="color: red">* </span>题目：</span>
          <div>
            <editor
              v-model="dingForm.content"
              :max-height="300"
              :uploadStatus="uploadStatus"
            />
          </div>
        </div>
        <!-- <div class="marg_play">
          <span class="spans">图片：</span>
          <div>
            <div class="imgBoxTopic">
              <label class="imgLabel">
                <div class="msPhoto" v-if="dingForm.imgUrl">
                  <img
                    :src="$methodsTools.splitImgHost(dingForm.imgUrl)"
                    alt="图片加载失败"
                  />
                </div>
                <div class="imgbbx" v-else>
                  <p>点击添加图片</p>
                  <i class="el-icon-plus"></i>
                </div>
                <input
                  :disabled="statusPop === 2"
                  :id="'inputstopic' + nums"
                  type="file"
                  ref="filetopic"
                  style="display: none"
                  @change="getImgFiletopic(nums, $event)"
                />
              </label>
            </div>
            <p style="color: #999999; line-height: 22px">
              支持扩展名：.jpeg .bmp .png .jpg...<br />为保证显示效果，请上传分辨率为100x100且大小小于2M图片
            </p>
          </div>
        </div> -->
        <div
          class="marg_play"
          v-if="
            dingForm.type === 1 || dingForm.type === 2 || dingForm.type === 5
          "
        >
          <span class="spans"
            ><span style="color: red" v-if="dingForm.type !== 5">* </span
            >选项：</span
          >
          <div style="flex: 1">
            <div
              style="display: flex; align-items: center; margin-bottom: 8px"
              v-for="(options, indexsop) in dingForm.optionsList"
              :key="indexsop"
            >
              <span>选项{{ indexsop + 1 }}:</span>
              <el-input
                style="flex: 1; margin: 0px 10px"
                type="textarea"
                :disabled="statusPop === 2"
                v-model="options.content"
                placeholder="请输入内容"
                :autosize="{ minRows: 2, maxRows: 2 }"
                maxlength="500"
              ></el-input>
              <span>{{ options.content.length }}/500</span>
              <el-button
                v-if="statusPop === 1"
                @click="delList(indexsop)"
                style="border-radius: 50%; margin: 0px 6px"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
              ></el-button>
              <label class="btnSty" v-if="statusPop !== 2"
                ><input
                  type="file"
                  style="display: none"
                  @change="uploadListImg(indexsop, $event)"
                />{{
                  options.imgUrl !== null && options.imgUrl
                    ? "更换图片"
                    : "上传图片"
                }}</label
              >
              <el-image
                v-if="options.imgUrl !== null && options.imgUrl"
                style="
                  width: 50px;
                  height: 50px;
                  border-radius: 4px;
                  border: 1px dotted #a4a4a4;
                  padding: 4px;
                "
                :src="$methodsTools.splitImgHost(options.imgUrl)"
                :preview-src-list="[$methodsTools.splitImgHost(options.imgUrl)]"
              >
              </el-image>
              <!-- <img
                v-if="options.imgUrl !== null && options.imgUrl"
                style="
                  width: 50px;
                  height: 50px;
                  border-radius: 4px;
                  border: 1px dotted #a4a4a4;
                  padding: 4px;
                "
                :src="$methodsTools.splitImgHost(options.imgUrl)"
                alt=""
              /> -->
            </div>
            <div
              style="display: flex; align-items: center"
              v-if="statusPop !== 2"
            >
              <i
                class="el-icon-circle-plus"
                style="margin-right: 5px; font-size: 30px; cursor: pointer"
                @click="addListcontent"
              ></i>
              <span
                style="color: #409eff; cursor: pointer"
                @click="addListcontent"
                >添加选项</span
              >
            </div>
          </div>
        </div>
        <div style="margin-bottom: 15px" v-if="dingForm.type === 4">
          <div
            style="display: flex; align-items: center"
            v-if="statusPop !== 2"
          >
            <i
              class="el-icon-circle-plus"
              style="margin-right: 5px; font-size: 30px; cursor: pointer"
              @click="addListItem"
            ></i
            ><span style="color: #409eff; cursor: pointer" @click="addListItem"
              >添加问题</span
            >
          </div>
          <!-- 案例题 -->
          <div style="padding-left: 50px">
            <div v-for="(ans, ain) in dingForm.optionsList" :key="ain">
              <div class="marg_play">
                <el-button
                  v-if="statusPop !== 2"
                  @click="delAnliChi(ain)"
                  style="border-radius: 50%; margin: 0px 6px"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  circle
                ></el-button>
                <span class="spans">题目类型：</span>
                <el-radio-group
                  v-model="ans.type"
                  @change="changeTypeChild(ain)"
                >
                  <el-radio
                    v-for="(tng, nindex) in radioArray"
                    :key="nindex"
                    :label="tng.value"
                    :disabled="statusPop === 2"
                    >{{ tng.label }}</el-radio
                  >
                </el-radio-group>
              </div>
              <div class="marg_play">
                <span class="spans"
                  ><span style="color: red">* </span>题目：</span
                >
                <div>
                  <editor
                    v-model="ans.content"
                    :max-height="300"
                    :uploadStatus="uploadStatus"
                  />
                </div>
              </div>
              <!-- <div class="marg_play">
                <span class="spans">图片：</span>
                <div>
                  <div class="imgBoxTopic">
                    <label class="imgLabel">
                      <div class="msPhoto" v-if="ans.imgUrl">
                        <img
                          :src="$methodsTools.splitImgHost(ans.imgUrl)"
                          alt="图片加载失败"
                        />
                      </div>
                      <div class="imgbbx" v-else>
                        <p>点击添加图片</p>
                        <i class="el-icon-plus"></i>
                      </div>
                      <input
                        :id="'inputstopi' + nums + ain"
                        type="file"
                        :disabled="statusPop === 2"
                        style="display: none"
                        @change="getImgFiletopics(ain, $event)"
                      />
                    </label>
                  </div>
                  <p style="color: #999999; line-height: 22px">
                    支持扩展名：.jpeg .bmp .png .jpg...<br />为保证显示效果，请上传分辨率为100x100且大小小于2M图片
                  </p>
                </div>
              </div> -->
              <div
                class="marg_play"
                v-if="ans.type === 1 || ans.type === 2 || ans.type === 5"
              >
                <span class="spans"
                  ><span style="color: red" v-if="ans.type !== 5">* </span
                  >选项：</span
                >
                <div style="flex: 1">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      margin-bottom: 8px;
                    "
                    v-for="(answerItem, indexsops) in ans.optionsList"
                    :key="indexsops"
                  >
                    <span>选项{{ indexsops + 1 }}:</span>
                    <el-input
                      style="flex: 1; margin: 0px 10px"
                      type="textarea"
                      :disabled="statusPop === 2"
                      v-model="answerItem.content"
                      placeholder="请输入内容"
                      :autosize="{ minRows: 2, maxRows: 2 }"
                      maxlength="500"
                    ></el-input>
                    <span>{{ answerItem.content.length }}/500</span>
                    <el-button
                      v-if="statusPop === 1"
                      @click="delListchi(ain, indexsops)"
                      style="border-radius: 50%; margin: 0px 6px"
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      circle
                    ></el-button>
                    <label class="btnSty" v-if="statusPop !== 2"
                      ><input
                        type="file"
                        style="display: none"
                        @change="uploadListImgchi(ain, indexsops, $event)"
                      />{{
                        answerItem.imgUrl !== null && answerItem.imgUrl
                          ? "更换图片"
                          : "上传图片"
                      }}</label
                    >
                    <el-image
                      v-if="answerItem.imgUrl !== null && answerItem.imgUrl"
                      style="
                        width: 50px;
                        height: 50px;
                        border-radius: 4px;
                        border: 1px dotted #a4a4a4;
                        padding: 4px;
                      "
                      :src="$methodsTools.splitImgHost(answerItem.imgUrl)"
                      :preview-src-list="[
                        $methodsTools.splitImgHost(answerItem.imgUrl),
                      ]"
                    >
                    </el-image>
                    <!-- <img
                      v-if="answerItem.imgUrl !== null && answerItem.imgUrl"
                      style="
                        width: 50px;
                        height: 50px;
                        border-radius: 4px;
                        border: 1px dotted #a4a4a4;
                        padding: 4px;
                      "
                      :src="$methodsTools.splitImgHost(answerItem.imgUrl)"
                      alt=""
                    /> -->
                  </div>
                  <div
                    style="display: flex; align-items: center"
                    v-if="statusPop !== 2"
                  >
                    <i
                      class="el-icon-circle-plus"
                      style="
                        margin-right: 5px;
                        font-size: 30px;
                        cursor: pointer;
                      "
                      @click="addListcontentchi(ain)"
                    ></i>
                    <span
                      style="color: #409eff; cursor: pointer"
                      @click="addListcontentchi(ain)"
                      >添加选项</span
                    >
                  </div>
                </div>
              </div>
              <div class="marg_play" v-if="ans.type === 1">
                <span class="spans"
                  ><span style="color: red">* </span>正确答案：</span
                >
                <el-radio-group
                  v-for="(oAsz, oindexsz) in ans.optionsList"
                  :key="oindexsz"
                  v-model="ans.answerQuestion"
                >
                  <el-radio
                    style="margin-right: 12px"
                    :disabled="statusPop === 2"
                    :label="oindexsz + 1 + ''"
                    >选项{{ oindexsz + 1 }}</el-radio
                  >
                </el-radio-group>
              </div>
              <div class="marg_play" v-else-if="ans.type === 2">
                <span class="spans"
                  ><span style="color: red">* </span>正确答案：</span
                >
                <el-checkbox-group v-model="ans.answerQuestionList">
                  <el-checkbox
                    style="margin-right: 12px"
                    v-for="(oAsz, oindexsz) in ans.optionsList"
                    :key="oindexsz"
                    :disabled="statusPop === 2"
                    :label="oindexsz + 1"
                    >选项{{ oindexsz + 1 }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <div class="marg_play" v-if="ans.type === 3">
                <span class="spans"
                  ><span style="color: red">* </span>正确答案：</span
                >
                <el-radio-group v-model="ans.answerQuestion">
                  <el-radio :disabled="statusPop === 2" label="1"
                    >正确</el-radio
                  >
                  <el-radio :disabled="statusPop === 2" label="0"
                    >错误</el-radio
                  >
                </el-radio-group>
              </div>
              <div class="marg_play">
                <span class="spans">答案解析：</span>
                <div>
                  <editor
                    v-model="ans.analysisContent"
                    :max-height="300"
                    :uploadStatus="uploadStatus"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 案例题 -->
        </div>
        <div class="marg_play" v-if="dingForm.type === 1">
          <span class="spans"
            ><span style="color: red">* </span>正确答案：</span
          >
          <el-radio-group
            v-for="(oA, oindex) in dingForm.optionsList"
            :key="oindex"
            v-model="dingForm.answerQuestion"
          >
            <el-radio
              style="margin-right: 12px"
              :disabled="statusPop === 2"
              :label="oindex + 1 + ''"
              >选项{{ oindex + 1 }}</el-radio
            >
          </el-radio-group>
        </div>
        <div class="marg_play" v-else-if="dingForm.type === 2">
          <span class="spans"
            ><span style="color: red">* </span>正确答案：</span
          >
          <el-checkbox-group v-model="dingForm.answerQuestionList">
            <el-checkbox
              style="margin-right: 12px"
              v-for="(oA, oindex) in dingForm.optionsList"
              :key="oindex"
              :disabled="statusPop === 2"
              :label="oindex + 1"
              >选项{{ oindex + 1 }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="marg_play" v-if="dingForm.type === 3">
          <span class="spans"
            ><span style="color: red">* </span>正确答案：</span
          >
          <el-radio-group v-model="dingForm.answerQuestion">
            <el-radio :disabled="statusPop === 2" label="1">正确</el-radio>
            <el-radio :disabled="statusPop === 2" label="0">错误</el-radio>
          </el-radio-group>
        </div>
        <div class="marg_play" v-if="dingForm.type !== 4">
          <span class="spans">答案解析：</span>
          <div>
            <editor
              v-model="dingForm.analysisContent"
              :max-height="300"
              :uploadStatus="uploadStatus"
            />
          </div>
        </div>
        <!-- <div class="marg_play">
          <span class="spans">是否启用：</span>
          <el-radio-group v-model="dingForm.status">
            <el-radio :disabled="statusPop === 2" :label="1">启用</el-radio>
            <el-radio :disabled="statusPop === 2" :label="0">停用</el-radio>
          </el-radio-group>
        </div> -->
      </el-col>
      <el-col
        :span="2"
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          cursor: pointer;
        "
      >
        <el-button
          type="success"
          icon="el-icon-arrow-right"
          circle
          @click="next"
          v-if="statusPop === 2"
        ></el-button>
      </el-col>
    </el-col>
  </div>
</template>

<script>
import Editor from "@/components/Editor";
export default {
  components: { Editor },
  name: "questionBank",
  props: ["nums", "dingFormInfo"],
  data() {
    return {
      dingForm: {},
      uploadStatus: 2,
      statusPop: 1,
      innerVisiblePaperTopic: false,
      fullscreenChildPaperTopic: false, //当前打开窗数据
      radioArrays: [
        {
          label: "单选题",
          value: 1,
        },
        {
          label: "多选题",
          value: 2,
        },
        {
          label: "判断题",
          value: 3,
        },
        {
          label: "简答题",
          value: 5,
        },
        {
          label: "案例题",
          value: 4,
        },
      ],
      radioArray: [
        {
          label: "单选题",
          value: 1,
        },
        {
          label: "多选题",
          value: 2,
        },
        {
          label: "判断题",
          value: 3,
        },
        {
          label: "简答题",
          value: 5,
        },
      ],
      queryData: 1,
    };
  },
  mounted() {
    // this.$nextTick(function () {
    //   this.$on("childmethods", function (v, int) {
    //     this.addClick(v, int);
    //   });
    // });
  },
  watch: {
    dingFormInfo: {
      handler(newVal, oldVal) {
        this.dingForm = newVal;
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
  },
  methods: {
    changeTypes(int) {
      this.dingForm = {
        questionId: this.dingForm.questionId ? this.dingForm.questionId : "",
        type: int,
        optionsList: [],
        answerQuestionList: [],
        answerQuestion: "",
        content: "",
        // status: "",
        analysisContent: "",
      };
    },
    changeTypeChild(index) {
      this.dingForm.optionsList[index].optionsList = [];
      this.dingForm.optionsList[index].answerQuestion = "";
    },
    getInfosPage() {
      return this.dingForm;
    },
    back() {
      this.tableData.forEach((item, index) => {
        if (item.questionId === this.dingForm.questionId) {
          if (index === 0) {
            this.$message.warning("这是当前页第一题了");
          } else {
            var datas = this.tableData[index - 1].questionId;
            this.$api.obtainbankquestion(datas).then((res) => {
              this.dingForm = res.data;
            });
          }
        }
      });
    },
    next() {
      this.tableData.forEach((item, index) => {
        if (item.questionId === this.dingForm.questionId) {
          if (this.tableData.length - 1 === index) {
            this.$message.warning("这是当前页最后一题了");
          } else {
            var datas = this.tableData[index + 1].questionId;
            this.$api.obtainbankquestion(datas).then((res) => {
              this.dingForm = res.data;
            });
          }
        }
      });
    },
    addClick(v, int) {
      if (v === undefined) {
        this.dingForm = {
          optionsList: [],
          status: 1,
        };
        this.statusPop = 1;
      } else {
        var datas = v.questionId;
        this.statusPop = int;
        this.$api.obtainbankquestion(datas).then((res) => {
          this.dingForm = res.data;
        });
      }
      this.innerVisiblePaperTopic = true;
    },
    delTopic() {
      this.$confirm("此操作将删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var data = JSON.parse(JSON.stringify(this.dingForm));
          data.parentType = Number(this.queryData.typeId);
          // data.status = -1;
          console.log(data);
          this.$message.success("删除成功");
          this.search();
          this.innerVisiblePaperTopic = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除案例问题
    delAnliChi(int) {
      this.dingForm.optionsList.splice(int, 1);
    },
    //删除选项 非案例
    delList(index) {
      this.dingForm.optionsList.splice(index, 1);
      this.dingForm.optionsList.map((items, indexs) => {
        items.optionsId = indexs + 1;
      });
      if (this.dingForm.type === 1) {
        this.dingForm.answerQuestion = "";
      }
      if (this.dingForm.type === 2) {
        this.dingForm.answerQuestionList = [];
      }
    },
    //删除选项 案例
    delListchi(fatherIndex, childrenIndex) {
      this.dingForm.optionsList[fatherIndex].optionsList.splice(
        childrenIndex,
        1
      );
      this.dingForm.optionsList[fatherIndex].optionsList.map(
        (items, indexs) => {
          items.optionsId = indexs + 1;
        }
      );
      if (this.dingForm.optionsList[fatherIndex].type === 1) {
        this.dingForm.optionsList[fatherIndex].answerQuestion = "";
      }
      if (this.dingForm.optionsList[fatherIndex].type === 2) {
        this.dingForm.optionsList[fatherIndex].answerQuestionList = [];
      }
    },
    //新增选项 非案例
    addListcontent() {
      var data = {
        content: "",
        imgUrl: null,
        optionsId: this.dingForm.optionsList.length + 1,
      };
      this.dingForm.optionsList.push(data);
    },
    //新增选项 案例
    addListcontentchi(int) {
      var data = {
        content: "",
        imgUrl: null,
        optionsId: this.dingForm.optionsList[int].optionsList.length + 1,
      };
      this.dingForm.optionsList[int].optionsList.push(data);
    },
    //新增问题 案例
    addListItem() {
      var data = {
        analysisContent: "",
        answerQuestion: "",
        answerQuestionList: [],
        content: "",
        optionsList: [],
        type: 1,
      };
      this.dingForm.optionsList.push(data);
    },
    // 上传图片
    async getImgFiletopic(nums, e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file, 2);
      console.log(this.dingForm, nums);
      this.$set(this.dingForm, "imgUrl", imgUrls);
    },
    // 上传内容list图片
    async uploadListImg(k, e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file, 2);
      this.$set(this.dingForm.optionsList[k], "imgUrl", imgUrls);
    },
    // 案例上传内容list图片
    async uploadListImgchi(fatherIndex, k, e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file, 2);
      this.$set(
        this.dingForm.optionsList[fatherIndex].optionsList[k],
        "imgUrl",
        imgUrls
      );
    },
    //案例 子题目图片
    async getImgFiletopics(int, e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        return;
      }
      const imgUrls = await this.imgUpload(file, 2);
      this.$set(this.dingForm.optionsList[int], "imgUrl", imgUrls);
    },
    imgUpload(file, int) {
      var self = this;
      return new Promise((resolve, reject) => {
        this.$upload
          .upload(file, int)
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            self.$message.error("图片上传错误");
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.contentMore {
  border: 1px solid #999;
  padding: 10px;
}
.marg_play {
  display: flex;
  margin-bottom: 15px;
  .spans {
    text-align: right;
    width: 80px;
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}

.imgBoxTopic {
  width: 150px;
  height: 150px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    background-color: #f9f9f9;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      max-width: 100%;
      max-height: 150px;
      img {
        max-width: 100%;
        max-height: 150px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 8px 0;
        font-size: 20px;
      }
    }
  }
}
.btnSty {
  cursor: pointer;
  padding: 4px 10px;
  background-color: #409eff;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  margin-right: 6px;
}
</style>