<template>
  <div id="sjlb">
    <div class="table_lb" v-if="show_s">
      <div class="top-div">
        <!-- <el-input placeholder="请输入试卷名称" v-model="input" clearable>
        </el-input> -->
        <div class="button-discuss" @click="add_sj()">新增试卷</div>
        <div class="xjzt-div" @click="delete_sj()">
          <i class="el-icon-document-remove"></i>&nbsp;&nbsp;批量删除
        </div>
        <!-- <div class="button-discuss" @click="mnxl_cli()">模拟训练</div> -->
        <!-- <div class="button-discuss" @click="kszx_click()">学习中心</div> -->
      </div>
      <div class="bottom-div">
        <div class="table-div">
          <el-table :data="tableData" height="100%" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="100" label="序号"></el-table-column>
            <el-table-column prop="name" label="试卷名称"> </el-table-column>
            <el-table-column prop="limitStartTime" label="试卷开启时间">
            </el-table-column>
            <el-table-column prop="limitEndTime" label="试卷关闭时间">
            </el-table-column>
            <el-table-column label="操作" width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <i class="el-icon-view" @click="ckxq(scope.row)" title="查看详情"></i>
                &nbsp;
                <i class="el-icon-delete" @click="handleDelete(scope.row)"
                  style="color:red;font-size: 20px;cursor: pointer;" title="删除"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-div">
          <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" :total="totals" :page-size="pageRow" :current-page="current_page_qw"
            @current-change="handleCurrentChange_qw" :page-sizes="[10, 20, 50, 100]">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="sjtms" v-if="!show_s" element-loading-text="试题正在加载中,请稍后！！！" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="loading">
      <div class="fh">
        <el-button type="info" @click="kszxs(true)">返回</el-button>
      </div>
      <div class="pub-class-div" id="pub_id">
        <div class="tm_dt" v-if="tab_st == 1">
          <div>
            <span>您好，以下是为您随机生成的模拟训练题</span>
          </div>
          <div class="title-class">
            <div class="title-div">
              <span>第</span><span v-text="counts"></span><span>次模拟考试</span>
            </div>
            <div>
              <span>总分100分</span>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（一）单选题</span><span class="pub-span">{{ '(共' + arr_single.length + '题，每题' + single_score + '分，选错不得分)'
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_single" class="tm-div">
                <div>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（二）多选题</span><span class="pub-span">{{ '(共' + arr_multiple.length + '题，每题' + multiple_score +
                '分，选错不得分)' }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_multiple" class="tm-div">
                <div>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-checkbox v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（三）判断题</span><span class="pub-span">{{ '(共' + arr_judge.length + '题，每题' + judge_score + '分，选错不得分)'
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_judge" class="tm-div">
                <div>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <el-button type="primary" @click="submit_tj()">提交</el-button>
          </div>
        </div>
        <div class="tm_dt" v-if="tab_st == 2">
          <div style="margin-top: 50px">
            <div style="
                text-align: center;
                color: black;
                font-size: 20px;
                font-weight: 700;
              ">
              <span>您好！您此次试题学习训练结果为</span>
              <span v-text="fraction" style="color: red; font-size: 20px"></span>
              <span>分</span>
            </div>
            <div style="
                margin-left: calc(50% - 100px);
                margin-top: 20px;
                color: black;
              ">
              <div style="margin-top: 10px">
                <div class="pub_dt_div"><span>单选题：</span></div>
                <div>
                  <span v-if="dx_fractions == 10">全部答对</span>
                  <span v-if="dx_fractions != 10">答对{{ dx_fractions }}道题</span>
                  <span v-if="dx_fractions != 10">答错{{ 10 - dx_fractions }}道题</span>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="pub_dt_div"><span>多选题：</span></div>
                <div>
                  <span v-if="dxs_fractions == 10">全部答对</span>
                  <span v-if="dxs_fractions != 10">答对{{ dxs_fractions }}道题</span>
                  <span v-if="dxs_fractions != 10">答错{{ 5 - dxs_fractions }}道题</span>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="pub_dt_div"><span>判断题：</span></div>
                <div>
                  <span v-if="pd_fractions == 10">全部答对</span>
                  <span v-if="pd_fractions != 10">答对{{ pd_fractions }}道题</span>
                  <span v-if="pd_fractions != 10">答错{{ 5 - pd_fractions }}道题</span>
                </div>
              </div>
            </div>
            <div style="margin-top: 30px; margin-left: calc(50% - 100px)">
              <el-button type="primary" @click="ckda()">查看答案</el-button>
            </div>
          </div>
        </div>
        <div class="tm_dt ckda" v-if="tab_st == 3">
          <div class="title-class">
            <div class="title-div">
              <span v-text="counts"></span>
            </div>
            <div>
              <span>总分100分</span>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（一）单选题</span><span class="pub-span">{{ '(共' + arr_single.length + '题，每题' + single_score + '分，选错不得分)'
              }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_single" class="tm-div">
                <div>
                  <i class="el-icon-check pub_i1" v-if="item.type == 'true'"></i>
                  <i class="el-icon-close pub_i2" v-if="item.type == 'false'"></i>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio disabled v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                  <div v-if="item.type == 'false'" class="zqxx">
                    <span style="color: #00e209">正确选项：</span>
                    <el-radio disabled v-model="item.correct" :key="index">{{
                      item.correct
                    }}</el-radio>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（二）多选题</span><span class="pub-span">{{ '(共' + arr_multiple.length + '题，每题' + multiple_score +
                '分，选错不得分)' }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_multiple" class="tm-div">
                <div>
                  <i class="el-icon-check pub_i1" v-if="item.type == 'true'"></i>
                  <i class="el-icon-close pub_i2" v-if="item.type == 'false'"></i>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-checkbox disabled v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-checkbox>
                  </div>
                </div>
                <div v-if="item.type == 'false'" class="zqxx">
                  <span style="color: #00e209">正确选项：</span>
                  <el-checkbox disabled v-for="(it, index_it) in item.correct" :key="index_it">{{ it }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
          <div class="pub-div">
            <div class="tit-div">
              <span>（三）判断题</span>
              <span class="pub-span">{{ '(共' + arr_judge.length + '题，每题' + judge_score + '分，选错不得分)' }}</span>
            </div>
            <div class="tm-xx">
              <div v-for="(item, index) in arr_judge" class="tm-div">
                <div>
                  <i class="el-icon-check pub_i1" v-if="item.type == 'true'"></i>
                  <i class="el-icon-close pub_i2" v-if="item.type == 'false'"></i>
                  <span>{{ index + 1 + ": " + item.title }}</span>
                </div>
                <div class="xx-div">
                  <div v-for="(items, indexs) in item.content" class="xx-dic">
                    <el-radio disabled v-model="item._correct" :label="items" :key="indexs">{{ items }}</el-radio>
                  </div>
                </div>
                <div v-if="item.type == 'false'" class="zqxx">
                  <span style="color: #00e209">正确选项：</span>
                  <el-radio disabled v-model="item.correct" :key="index">{{
                    item.correct
                  }}</el-radio>
                </div>
                <span style="color: #0a8dea">错题正确描述：</span>
                <span style="color: #0a8dea">{{ item.remark }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="新增试卷" :visible.sync="dialogVisible_sj" center width="550px">
      <span style="color: red;font-size: 17px;margin-left: 200px;">{{ '当前总分：' + sum_zfs }}</span>
      <el-form style="margin-top:10px" ref="form" :model="form_add_type" :ref="form_add_type" label-width="100px">
        <el-form-item label="试卷名称:" style="text-align: center">
          <el-input v-model="form_add_type.name"></el-input>
        </el-form-item>
        <el-form-item label="时间设置:" style="text-align: center">
          <el-date-picker v-model="form_add_type.time_qj" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="单选题:" style="text-align: center">
          <el-col class="line" :span="6">题数量:</el-col>
          <el-col :span="6">
            <el-form-item prop="singleNum" :rules="[
              { required: true, message: '题数不能为空' },
              { type: 'number', message: '题数必须为数字值' },
            ]">
              <el-input type="singleNum" v-model.number="form_add_type.singleNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="6">分值:</el-col>
          <el-col :span="6">
            <el-form-item prop="singlePointValue" :rules="[
              { required: true, message: '分值不能为空' },
              { type: 'number', message: '分值必须为数字值' },
            ]">
              <el-input type="singlePointValue" v-model.number="form_add_type.singlePointValue"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="多选题:" style="text-align: center">
          <el-col class="line" :span="6">题数量:</el-col>
          <el-col :span="6">
            <el-form-item prop="multiNum" :rules="[
              { required: true, message: '题数不能为空' },
              { type: 'number', message: '题数必须为数字值' },
            ]">
              <el-input type="multiNum" v-model.number="form_add_type.multiNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="6">分值:</el-col>
          <el-col :span="6">
            <el-form-item prop="multiPointValue" :rules="[
              { required: true, message: '分值不能为空' },
              { type: 'number', message: '分值必须为数字值' },
            ]">
              <el-input type="multiPointValue" v-model.number="form_add_type.multiPointValue"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="判断题:" style="text-align: center">
          <el-col class="line" :span="6">题数量:</el-col>
          <el-col :span="6">
            <el-form-item prop="judgeNum" :rules="[
              { required: true, message: '题数不能为空' },
              { type: 'number', message: '题数必须为数字值' },
            ]">
              <el-input type="judgeNum" v-model.number="form_add_type.judgeNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="6">分值:</el-col>
          <el-col :span="6">
            <el-form-item prop="judgePointValue" :rules="[
              { required: true, message: '分值不能为空' },
              { type: 'number', message: '分值必须为数字值' },
            ]">
              <el-input type="judgePointValue" v-model.number="form_add_type.judgePointValue"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible_sj = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="sj_submit()" :disabled="sum_zfs != 100">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { get, post, startLoading, endLoading, delete_util } from "../../util/http_util";
import { } from "../../util/data_util";
import { queryExame, createExame, removeExame } from '../../api/xxxl/llkh';
export default {
  data() {
    return {
      input: "", //考试名称
      tableData: [], //考试次数列表
      show_s: true, //列表和题目切换
      arr_single: [], //单选题
      arr_multiple: [], //多选题
      arr_judge: [], //判断题
      loading: false, //题目生成等待框
      counts: "", //记录此次考试是第几次考试
      tab_st: 1, //切换
      fraction: 0, //得分
      dx_fractions: 0, //单选题
      dxs_fractions: 0, //多选题
      pd_fractions: 0, //判断题
      createTime: "", //试卷生成试卷
      endTime: "", //试卷结束试卷
      totals: 0, //总数
      current_page_qw: 1, //当前页
      pageRow: 10, //每页多少条
      dialogVisible_sj: false,
      form_add_type: {
        name: "",
        time: "",
        time_qj: "",
        singleNum: "",
        singlePointValue: "",
        multiNum: "",
        multiPointValue: "",
        judgeNum: "",
        judgePointValue: "",
      },
      single_score: '',
      multiple_score: '',
      judge_score: '',
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(item) {
      this.multipleSelection = [];
      item.forEach((item) => {
        this.multipleSelection.push(item.id);
      })
      // this.multipleSelection = item;
      // let paramDatas = {
      //   ids: val,
      // };
      // this.delete(paramDatas);
    },
    //批量删除试卷
    delete_sj() {
      this.delete(this.multipleSelection);
    },
    //删除题目
    handleDelete(item) {
      this.delete([item.id]);
    },
    delete(paramDatas) {
      let _this = this;
      if (paramDatas.length == 0) {
        this.$message({
          message: "无删除项,请选择！！！",
          type: "warning",
        });
      } else {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            removeExame(paramDatas).then((data) => {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              _this.handleCurrentChange_qw(1);
            })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //切换列表和题目
    kszxs(item) {
      let _this = this;
      _this.show_s = item;
      if (item) {
        _this.tab_st = 1;
        _this.arr_single = [];
        _this.arr_multiple = [];
        _this.arr_judge = [];
        _this.handleCurrentChange_qw(1);
      }
    },
    handleSizeChange(val) {
      this.pageRow = val;
      this.current_page_qw = 1;
      this.handleCurrentChange_qw(1);
    },
    add_sj() {
      this.form_add_type = {
        name: "",
        time: "",
        time_qj: "",
        singleNum: 10,
        singlePointValue: 5,
        multiNum: 5,
        multiPointValue: 5,
        judgeNum: 5,
        judgePointValue: 5,
      };
      this.dialogVisible_sj = true;
    },
    sj_submit() {
      if (
        this.form_add_type.name == "" ||
        // this.form_add_type.time == "" ||
        this.form_add_type.time_qj == "" ||
        this.form_add_type.time_qj == null
      ) {
        this.$message.warning("试卷名称或时间都不能为空！");
      } else {
        createExame(this.form_add_type.name, 10, this.form_add_type.time_qj[0], this.form_add_type.time_qj[1], this.form_add_type.singleNum, this.form_add_type.multiNum, this.form_add_type.judgeNum,
          this.form_add_type.singlePointValue, this.form_add_type.multiPointValue, this.form_add_type.judgePointValue).then((data) => {
            this.dialogVisible_sj = false;
            this.$message.success("试卷新增成功！");
            this.handleCurrentChange_qw(1);
            //   endLoading();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //查询考试记录    列表分页
    handleCurrentChange_qw(pageNum) {
      let _this = this;
      //   startLoading();
      _this.tableData = [];
      queryExame(pageNum, _this.pageRow, this.$store.state.userInfo.account).then((data) => {
        if (data.list.length > 0) {
          _this.tableData = data.list;
          _this.totals = data.total;
          _this.current_page_qw = pageNum;
        }
        //   endLoading();
      })
        .catch((err) => {
          console.log(err);
        });
    },
    //查看详细
    ckxq(items) {
      let _this = this;
      console.log(123);
      _this.arr_single = [];
      _this.arr_multiple = [];
      _this.arr_judge = [];
      _this.counts = items.name;
      _this.single_score = items.singlePointValue;
      _this.multiple_score = items.multiPointValue;
      _this.judge_score = items.judgePointValue;
      JSON.parse(items.content).single.forEach((item) => {
        //单选
        _this.arr_single.push({
          title: item.title,
          type: true,
          _correct: item.correct,
          correct: item.correct.split("&|&"),
          content: item.content.split("&|&"),
        });
      });
      JSON.parse(items.content).multiple.forEach((item) => {
        //多选
        _this.arr_multiple.push({
          title: item.title,
          type: false,
          _correct: item.correct.split("&|&"),
          correct: item.correct.split("&|&"),
          content: item.content.split("&|&"),
        });
      });
      JSON.parse(items.content).judge.forEach((item) => {
        //判断
        _this.arr_judge.push({
          title: item.title,
          type: true,
          _correct: item.correct,
          correct: item.correct.split("&|&"),
          content: item.content.split("&|&"),
          remark: item.remark,
        });
      });
      _this.show_s = false;
      _this.tab_st = 3;
    },
  },
  mounted() {
    this.handleCurrentChange_qw(1);
  },
  computed: {
    sum_zfs() {
      let sum = this.form_add_type.singleNum * this.form_add_type.singlePointValue +
        this.form_add_type.multiNum * this.form_add_type.multiPointValue +
        this.form_add_type.judgeNum * this.form_add_type.judgePointValue;
      return sum
    }
  },
};
</script>
<style lang="scss">
#sjlb {
  width: calc(100% - 0px);
  height: calc(100% - 10px);
  box-sizing: border-box;
  overflow: hidden;
  background-image: url("../../assets/img/xxxl/01.png");
  background-size: 100% 100%;

  .table_lb {
    width: 100%;
    height: 100%;

    .top-div {
      width: calc(100% - 40px);
      height: 80px;
      margin-left: 20px;
      margin-right: 20px;

      .el-select {
        float: left;
        margin-left: 20px;
        width: 150px !important;

        .el-input {
          width: unset !important;
        }
      }

      .el-input {
        float: left;
        width: 225px;
        margin-left: 0px;
        margin-top: 30px;

        .el-input__inner {
          background: none;
          color: #ffff;
          border: 1px solid #146a80 !important;
          box-shadow: 0 0 10px #1b6097;
        }
      }

      .button-discuss {
        margin-top: 35px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        float: left;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        background-image: url(../../assets/img/yqjc/40.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 20px;
      }

      .xjzt-div {
        margin-top: 35px;
        float: right;
        margin-right: 10px;
        width: 130px;
        height: 35px;
        line-height: 35px;
        background: none;
        font-size: 14px;
        background: none;
        text-align: center;
        color: #ffffffc7;
        cursor: pointer;
        background-image: url(../../assets/img/yqjc/40.png);
        background-size: 100% 100%;
      }
    }

    .bottom-div {
      width: calc(100% - 40px);
      height: calc(100% - 115px);
      box-shadow: 0 0 10px #1b6097;
      margin-left: 20px;
      margin-right: 20px;

      .table-div {
        width: 100%;
        height: calc(100% - 70px);

        // .el-table{
        //     text-align: center!important;
        // }
        .el-table tr {
          background-color: transparent !important;
          color: #ffffffc7;
        }

        .el-table thead tr {
          height: 40px;
          background: url(../../assets/img/setting/tr1.png) no-repeat;
          background-size: 100% 100%;
        }

        .el-table th {
          background-color: transparent;
        }

        tbody tr {
          border-bottom: 1px solid #252631;
        }

        .el-table td {
          border-bottom: 1px solid #252631;
          border-right: unset;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
          background-color: #82848a78;
        }

        .el-table th {
          border: unset;
          // background-color: #263b5d !important;
        }

        .el-table--fit {
          background: none !important;
          border: unset;
        }

        .el-icon-delete-solid {
          color: red;
          cursor: pointer;
          font-size: 18px;
        }

        .el-icon-edit {
          color: #1172d8;
          cursor: pointer;
          font-size: 20px;
        }

        .el-icon-view {
          color: #00ffff;
          font-size: 20px;
          cursor: pointer;
        }

        .el-table--group::after,
        .el-table--border::after,
        .el-table::before {
          background-color: unset;
        }
      }
    }
  }

  .sjtms {
    width: calc(100% - 60px) !important;
    height: calc(100% - 50px) !important;
    margin: 30px;
    background-color: white;
    position: relative;
    border-radius: 7px;

    .fh {
      position: absolute;
      right: 50px;
      top: 20px;
    }

    .pub-class-div {
      width: 80%;
      margin-left: 10%;
      margin-top: 22px;
      float: left;
      color: #484848;
      height: calc(100% - 70px);
      overflow-y: auto;
      word-break: break-all;
      white-space: normal;
      line-height: 23px;

      .tm_dt {
        width: 100%;
        height: 100%;

        .title-class {
          text-align: center;
          color: black;

          .title-div {
            font-size: 22px;
            font-weight: 800;
          }
        }

        .pub_dt_div {
          width: 70px;
          float: left;
        }

        .pub-div {
          .tit-div {
            font-size: 19px;

            .pub-span {
              font-size: 13px;
            }
          }

          .tm-xx {
            margin-top: 20px;

            .tm-div {
              margin-left: 40px;
              margin-right: 30px;

              .xx-div {
                margin-left: 30px;
                margin-top: 13px;
                margin-right: 30px;

                .xx-dic {
                  width: 100%;
                  margin-bottom: 20px;

                  .el-radio__label {
                    word-break: break-all;
                    white-space: normal;
                    line-height: 23px;
                  }

                  .el-checkbox__label {
                    word-break: break-all;
                    white-space: normal;
                    line-height: 23px;
                  }

                  .is-checked .el-radio__label {
                    color: #00c546;
                    font-weight: 900;
                    font-size: 16px;
                  }

                  .is-checked .el-checkbox__label {
                    color: #00c546;
                    font-weight: 900;
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
      }

      .ckda {
        .pub_i1 {
          color: #22ea00;
          font-size: 25px;
        }

        .pub_i2 {
          color: red;
          font-size: 25px;
        }

        .xx-dic {
          .is-checked {
            .el-radio__label {
              color: #424242;
            }

            .el-checkbox__label {
              color: #424242;
            }
          }
        }

        .zqxx {
          .is-disabled {
            .el-radio__label {
              color: #22ea00;
            }

            .el-checkbox__label {
              color: #22ea00;
            }
          }
        }
      }
    }

    .pub-class-div::-webkit-scrollbar-thumb {
      background: #cccccc;
    }

    .pub-class-div::-webkit-scrollbar-track {
      background: #e4e4e4;
    }
  }

  .el-dialog {
    .el-dialog__body {
      padding: 0px 25px 18px;
    }

    .el-range-input {
      color: white;
      background-color: transparent;
    }

    .el-range-separator {
      color: white;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }
  }
}
</style>