FE_bankTeaching/src/components/case/index.vue

<template>
  <div>
    <el-container class="scrollbar" v-if="caseVisible">
      <el-header>
        <div class="flex a-center j-between">
          <div class="flex a-center" style="width: 28%">
            <p>实训项目</p>
            <el-select v-model="projectId" placeholder="请选择" class="select" :disabled="projectPermissions != 0" @change="selectProject">
              <el-option
                v-for="item in topicList"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId"
              ></el-option>
            </el-select>
          </div>
          <div class="countDownBox">
            <div style="margin-left: -40px;">
              <div :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal">
                实训{{text}}时间
                <span class="timeSpan">{{day}}</span>天
                <span class="timeSpan">{{hour}}</span>小时
                <span class="timeSpan">{{minutes}}</span>分
                <span class="timeSpan">{{seconds}}</span>秒
              </div>
            </div>
          </div>
          <div class="countDownBox">
            <div>
              总得分：
              <span class="gradeSpan">{{grade}}</span>
            </div>
          </div>
          <div>
            <el-button
              style="backgroundColor: #202020;color: #d0d0d0;font-size:14px;"
              v-show="projectPermissions == 0"
              @click="reload"
            >重新开始</el-button>
            <el-button class="submit-btn" style="margin-right:7px" @click="Submit()" :disabled="popContainer">提交</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="30%">
          <div class="aside-header">
            <div class="header_h flex a-center">
              <i class="el-icon-s-order"></i>
              <p>实验目标</p>
            </div>
            <div class="font_css">
              <div class="experimentalGoal">
                <div class="break-all" v-html="projectManage.experimentTarget">
                </div>
              </div>
            </div>
          </div>
          <div class="aside-footer">
            <div class="header_h flex a-center">
              <i class="el-icon-s-management"></i>
              <p>实验任务</p>
            </div>
            <div>
              <el-row>
                <el-col :span="24">
                  <el-card shadow="hover">
                    <el-table :data="requires" stripe height="405" v-loading="loading" :key="Math.random()">
                      <el-table-column type="index"></el-table-column>
                      <el-table-column prop="name" label="判分标准" align="center">
                      </el-table-column>
                      <el-table-column prop="right" label="完成结果" align="center">
                        <template slot-scope="scope">
                          <i
                            v-if="scope.row.right==true"
                            class="el-icon-check"
                            style="color:green;font-size:20px"
                          ></i>
                          <i
                            v-else-if="scope.row.right==false"
                            class="el-icon-close"
                            style="color:red;font-size:20px"
                          ></i>
                        </template>
                      </el-table-column>
                      <el-table-column prop="score" label="得分" align="center"></el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="案例" name="first">
              <div class="break-all" v-html="projectManage.experimentDescription"></div>
            </el-tab-pane>
            <el-tab-pane label="实验要求" name="second">
              <el-collapse v-model="activeNames" accordion>
              <div  v-for="(item,index) in requires">
                <el-collapse-item :title="item.name" :name="item.id">
                  <div class="break-all" v-html="item.experimentalRequirements"></div>
                </el-collapse-item>
              </div>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="实验提示" name="fifth" v-if="hintOpen == 0">
              <div class="break-all" v-html="projectManage.experimentHint"></div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <!-- </div> -->
    <div class="panel" :class="{active: caseVisible}">
      <div @click="toggleCase">
        <img src="../../assets/img/case/left.png" alt v-if="caseVisible" />
        <img src="../../assets/img/case/right.png" alt v-else />
      </div>
    </div>
      <div class='popContainer' v-if='popContainer'></div>
  </div>
</template>

<script>
import util from '@/libs/util'
import Setting from '@/setting'
// 引入封装好的接口
import {getProjectBySystemId,getProjectDetail,submit,getQueryCache,deleteCache} from "@/api/http.js";
export default {
  data() {
    return {
      systemId: Setting.systemId,
      workbench: [],
      test: [],
      caseVisible: true,
      grade: "00",
      exampleData: "",
      codeid: "",
      codeIds: [],
      judgmentPointsIds: [],
      text: "",
      isStart: false,
      globalTimer: null, //获取setInterval对象值
      millisecond: 0,
      countVal: this.defaultVal, //获取初始值
      pauseTime: 0,
      day: '00',
      seconds: '00',
      minutes: '00',
      hour: '00',
      createTime: "", //开始时间
      actEndTime: "", //倒计时结束时间
      projectId: "", //选中后绑定的对象
      value: [
        {projectName:'项目1',projectId:1}
      ],
      experimentalGoal: "", //实验目标
      caseDescription: "", //案例描述
      experimentSuggests: "", //实验提示
      judgmentPointsName: "", //	判分点名称
      points: [],
      activeNames: [],
      tableData: [],
      activeName: "first",
      schoolId: '',
      studentId: "",
      courseId: "",
      // projectId: "",
      assessmentId: "",
        classId:'',
      projectPermissions: 0, //项目权限(0、练习 1、考核 2、竞赛)
      isSubmit: false,
      entryTime: util.formatDate('yyyy-MM-dd hh:mm:ss'),
      startTime: '',
      stopTime: '',
      isSelected: false,
      userId: '',
        hintOpen: 0,
      topicList:[],
      projectManage:{},
      requires:[],
      projectName:'',
        loading:false,
        sss:1,
        popContainer:false,
        timestamp:'',
    }
  },
  watch: {
    countVal: {
      deep: true,
      handler: function(val, oldVal) {
        let vm = this;
        if (vm.needSendSunc) {
          vm.passToParent(val);
        }
      }
    },
    needSendSunc: {
      deep: true,
      handler: function(val) {
        let vm = this;
        if (val) {
          vm.passToParent(vm.countString);
        }
      }
    }
  },
  props: {
    sendSync: {
      type: Boolean,
      default: false
    },
    autoStart: {
      type: Boolean,
      default: false
    },
    defaultVal: {
      type: Number,
      default: null
    },
    codeId: {
      type: Number,
      default: 0
    },
  },
  computed: {
    needSendSunc: function() {
      return this.sendSync;
    },
    // 倒计时
    second: function() {
      return this.num(this.seconds);
    },
    minute: function() {
      return this.num(this.minutes);
    }
  },
  mounted() {
      let token = this.getQueryVariable('token')
      let cid = this.getQueryVariable('cid')
      let systemId = this.getQueryVariable('systemId')
      let projectId = this.getQueryVariable('projectId')
      let assessmentId = this.getQueryVariable('assessmentId')
      let classId = this.getQueryVariable('classId')
      let stopTime = this.getQueryVariable('stopTime')
      let timestamp = +stopTime;
      if (timestamp != null){
          sessionStorage.setItem('timestamp', timestamp)
      }else{
          sessionStorage.setItem('timestamp', null)
      }
      if (token != null){
          sessionStorage.setItem('token', token)
          sessionStorage.setItem('cid', cid)
          sessionStorage.setItem('systemId', systemId)
      }
      if (projectId){
          sessionStorage.setItem('projectId', projectId)
          sessionStorage.setItem('assessmentId', assessmentId)
          sessionStorage.setItem('classId', classId)
          this.assessmentId = assessmentId
          this.classId = classId
      }else{
          this.assessmentId = ''
          this.classId = ''
      }
      let tokens = sessionStorage.getItem('token')
      if(tokens || token){
          this.projectPermissions = this.projectId ? 1 : 0
          this.assessmentId && this.projectId && this.checkVer()
          this.codeId && this.codeIds.push(this.codeId)
          if (projectId !=null){
              let params = {
                  "projectId":projectId,
              }
              this.selectProjects(params)
          }else{
              this.getData()
          }
      }
  },
  methods: {
      getQueryVariable(name) {
          var reg = new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
          if(window.location.href.split('?')[1]){
              var r = window.location.href.split('?')[1].match(reg)
              if (r != null){
                  return (r[2])
              }else{
                  return null
              }
          }
      },
    //获取项目列表
    getData(){
      let params = {
          "systemId":sessionStorage.getItem('systemId'),
          "cId":sessionStorage.getItem('cid'),
          "permissions":0,
      }
      getProjectBySystemId(params).then((data)=>{
        if(data.status == 200){
            //获取当前时间
            this.getBeginTime()
            this.topicList = []
            for (var i=0;i<data.data.projects.length;i++){
                if (data.data.projects[i].projectId){
                    this.topicList.push(data.data.projects[i])
                }
            }
            if(this.topicList.length > 0){
                this.gotuQueryVariable()
            }
            this.getQueryCaches()
        }
      }).catch((error)=>{
      })
    },
      getBeginTime(){
          let dates = new Date().getTime();
          let date = new Date(dates)
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM < 10 ? ('0' + MM) : MM;
          let d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          let h = date.getHours();
          h = h < 10 ? ('0' + h) : h;
          let m = date.getMinutes();
          m = m < 10 ? ('0' + m) : m;
          let s = date.getSeconds();
          s = s < 10 ? ('0' + s) : s;
          this.startTime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
          sessionStorage.setItem('startTime', this.startTime)
      },
      getQueryCaches(){
          getQueryCache(params).then((data)=>{
              if(data.data.status == 200){
                  this.$confirm('有项目未做完,是否回到未做完的项目?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }).then(() => {
                      this.$message({
                          type: 'success',
                          message: '切换成功!'
                      });
                      this.projectId=data.data.projectId
                      let params = {
                          "projectId":data.data.projectId,
                      }
                      sessionStorage.setItem('projectId', data.data.projectId)
                      this.selectProjects(params)
                  }).catch(() => {
                      deleteCache().then((data)=>{
                          this.$message({
                              type: 'info',
                              message: '已取消'
                          });
                      }).catch(() => {
                      })
                      this.gotuQueryVariable()
                  });
              }else{
                  this.gotuQueryVariable()
              }
          }).catch((error)=>{
              this.gotuQueryVariable()
          })
      },
      gotuQueryVariable(){
          let projectId = this.getQueryVariable('projectId')
          if(projectId){
              this.projectId = projectId
          }else{
              this.projectId = this.topicList[0].projectId;
          }
          sessionStorage.setItem('projectId', this.projectId)
          let params = {
              "projectId":this.projectId,
          }
          this.selectProjects(params)
      },
      selectProjects(params){
          getProjectDetail(params).then((data)=>{
              if(data.status == 200){
                  this.globalTimer = "";
                  let stopTime = sessionStorage.getItem('timestamp')
                  let timestamp = +stopTime;
                  this.countVal = timestamp;
                  // this.day = "00";
                  // this.seconds = "00";
                  // this.minutes = "00";
                  // this.hour = "00";
                  this.sss = 1;
                  this.hintOpen = data.data.projectManage.hintOpen;
                  this.countDown(timestamp);
                  let projectId = this.getQueryVariable('projectId')
                  if(projectId != null){
                      //获取当前时间
                      this.getBeginTime()
                      this.topicList = [data.data.projectManage];
                      this.projectId = +params.projectId
                      this.projectName = data.data.projectManage.projectName
                      this.projectManage = data.data.projectManage;
                      this.requires = data.data.projectJudgmentVos;
                  }else{
                      this.projectName = data.data.projectManage.projectName
                      this.projectManage = data.data.projectManage;
                      this.requires = data.data.projectJudgmentVos;
                  }
              }
          }).catch((error)=>{
          })
      },
    //选择好题目
    selectProject(){
      let params = {
          "projectId":this.projectId,
      }
      let formList = []
      sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
      sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
      sessionStorage.setItem('accountPasswordAll', '')
      sessionStorage.setItem('projectId', this.projectId)
      getProjectDetail(params).then((data)=>{
        if(data.status == 200){
            this.popContainer = false;
            this.hintOpen = data.data.projectManage.hintOpen;
            let token = sessionStorage.getItem('token')
            let cid = sessionStorage.getItem('cid')
            let systemId = sessionStorage.getItem('systemId')
            this.projectName = data.data.projectManage.projectName;
            this.projectManage = data.data.projectManage;
            this.requires = data.data.projectJudgmentVos;
            location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
            // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
        }
      }).catch((error)=>{
      })
      //获取当前时间
       this.getBeginTime()
        this.globalTimer = "";
        this.countVal = "";
        this.day = "00";
        this.seconds = "00";
        this.minutes = "00";
        this.hour = "00";
        this.sss = 1
      this.startCountFn();
    },
    //提交
    Submit() {
      this.$confirm("此操作将视为结束考试, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.actEndTime = new Date().getTime();
        let ruleReqs = sessionStorage.getItem('ruleReqs')
        let startTime = sessionStorage.getItem('startTime')
        let ruleReqsList = JSON.parse(ruleReqs);
        let lcld = []
        for (var i=0;i<this.requires.length;i++){
          lcld.push(this.requires[i].judgmentId)
        }
       let systemId = sessionStorage.getItem('systemId')
        let cid = sessionStorage.getItem('cid')
        let  params = {
            "assessmentId":this.assessmentId,
            "classId":this.classId,
            "curriculumId":+cid,
            "endTime": this.actEndTime,
            "lcId": lcld,
            "projectId": this.projectId,
            "projectName":this.projectName,
            "purpose":this.projectManage.experimentTarget,
            "ruleReqs": ruleReqsList,
            "startTime": startTime,
            "submitTime": this.actEndTime,
            "systemId": systemId,
        }
        this.loading = true;
        submit(params).then((data)=>{
          if(data.status == 200){
              let datas= data.data.retMap.scoreInfo;
              let formList = []
              sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
              sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
              sessionStorage.setItem('accountPasswordAll', '')
              let list = this.requires
              this.grade = data.data.retMap.totalScore
              for (var j=0;j<list.length;j++){
                for (var i=0;i<datas.length;i++){
                if (datas[i].lcId== list[j].judgmentId){
                  list[j].flag = datas[i].flag
                  list[j].score = datas[i].judgmentScore
                  list[j].right = datas[i].calculate
                }
              }
            }
              this.sss = 0;
              this.popContainer = true;
              this.$message({
                  type: 'success',
                  message: '提交成功'
              });
              this.requires = list
          }
            this.loading = false
        }).catch((error)=>{
            this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消提交"
        });
      });
    },

      //开始计时
    startCountFn() {
      if (!this.isStart) {
        // this.countVal = this.countVal ? this.countVal : 0;
        this.globalTimer = setInterval(() => {
            if(this.sss == 0){
                this.globalTimer = null;
                clearInterval(this.globalTimer);
            }else if (this.timestamp){
                this.counterFn(this.countVal--);
            }else{
                this.counterFn(this.countVal++);
            }
        }, 1000);
        this.isStart = true;
      }
    },
      //倒计时
      countDown(timestamp){
          this.timestamp = timestamp
          console.log(this.timestamp)
          this.sss = 1;
          this.globalTimer = null;
          clearInterval(this.globalTimer);
          this.startCountFn()
      },
    counterFn(counterTime) {
        if (this.timestamp){
            let countDown = (new Date(counterTime).getTime() - new Date().getTime()) / 1000
            if (countDown > 0) {
                let d = Math.floor(countDown / (60 * 60 * 24));
                let h = Math.floor(countDown / (60 * 60));
                let m = Math.floor(countDown % (60 * 60) / 60);
                let s = Math.floor(countDown % (60 * 60) % 60);
                this.day = `${d > 9 ? d : `0${d}`}`;
                this.hour = `${h > 9 ? h : `0${h}`}`;
                this.minutes = `${m > 9 ? m : `0${m}`}`;
                this.seconds = `${s > 9 ? s : `0${s}`}`;
            } else {
                this.day = '00';
                this.hour = '00';
                this.minutes = '00';
                this.seconds = '00';
            }
        }else{
            let leave1 = counterTime % (24 * 3600 * 1); //计算天数后剩余的毫秒数
            let leave2 = leave1 % (3600 * 1); //计算小时数后剩余的毫秒数
            let leave3 = leave2 % (60 * 1); //计算分钟数后剩余的毫秒数
            let day = Math.floor(counterTime / (24 * 3600 * 1)); //计算相差天数
            let hour = Math.floor(leave1 / (3600 * 1)); //计算相差小时
            let minutes = Math.floor(leave2 / (60 * 1)); //计算相差分钟
            let seconds = Math.round(leave3 / 1); //计算相差秒
            day = day >= 10 ? day : "0" + day;
            hour = hour >= 10 ? hour : "0" + hour;
            minutes = minutes >= 10 ? minutes : "0" + minutes;
            seconds = seconds >= 10 ? seconds : "0" + seconds;
            this.day = day;
            this.hour = hour;
            this.minutes = minutes;
            this.seconds = seconds;
        }
    },
    //重新开始
    reload() {
        let token = sessionStorage.getItem('token')
        let cid = sessionStorage.getItem('cid')
        let systemId = sessionStorage.getItem('systemId')
        let projectId = sessionStorage.getItem('projectId')
        let formList = []
        sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
        sessionStorage.setItem('accountVoucher', JSON.stringify(formList))
        sessionStorage.setItem('accountPasswordAll', '')
        let params = {
            "projectId":projectId,
        }
        this.selectProjects(params)
        this.popContainer = false
        this.sss = 1
        this.startCountFn();
        deleteCache().then((data)=>{

        }).catch(() => {

        })
        this.globalTimer = "";
        this.countVal = "";
        this.day = "00";
        this.seconds = "00";
        this.minutes = "00";
        this.hour = "00";
        this.grade = '00'
        location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
        // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
    },
    checkVer() {
      let data = {
        userId: this.userId,
        id: this.assessmentId
      }
      this.$get(this.api.qualifications,data).then(res => {
        if(res.message == 'false'){
          this.isSubmit = true;
        }
      });
    },
    // 倒计时
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    toggleCase() {
      this.caseVisible = !this.caseVisible
    },
    collapse(){

    },
    passToParent(data) {
      this.$emit("getDataFromChild", data);
    },
    getCookie(cookie_name) {
      //获取cookie中指定key的value
      var allcookies = document.cookie; //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引，就代表cookie存在,否则不存在
      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);
        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        } //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    }
  }
};
</script>

<style lang="scss" scoped>
.popContainer {
    position: absolute;
    width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
    height:100%;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}
  /deep/.el-container {
    height: 80%;

    &.is-vertical {
      position: fixed;
      top: 200px;
      bottom: 20px;
      left: 0;
      width: 85%;
      height: 70%;
      background-color: #f5f5f5;
      z-index: 1001;
    }
    .el-header {
      color: #333;
      padding: 0 12px 0 20px;

      .el-button {
        background-color: $main-color;
        color: #fff;
        border: none;
        margin: 5px 0px 5px 5px;
        font-size: 16px;
      }

      .submit-btn {
        padding-left: 30px;
        padding-right: 30px;
        background: $main-color url(../../assets/img/case/btn.png) 0 0/100% 100% no-repeat;
      }
    }
    .el-aside{
      color: #333;
      [class*=" el-icon-"],[class^="el-icon-"]{
        line-height: 40px;
        font-size: 16px;
      }
    }
    .el-main {
      width: 60%;
      background-color: #fff;
      color: #333;
      padding: 0;
      font-size: 16px;
      margin: 0px 20px 10px 10px;
      white-space: pre-wrap;
      background: #fff url(../../assets/img/case/bg.png) top right no-repeat;
    }
    .aside-header {
      margin: 0px 10px 10px 10px;
      background-color: #fff;
    }
    .aside-footer {
      margin: 0px 10px 10px 10px;
      background-color: #fff;
    }
    .header_h {
      height: 50px;
      background: url(../../assets/img/case/header.png) 0 0/100% 100% no-repeat;
      justify-content: center;
      i{
        color: #fff;
      }
      p {
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        padding-left: 10px;
      }
    }
    .el-card{
      border: 0;
      border-radius: 0;
      .el-card__body {
        padding: 0;
      }
    }
    .select{
      flex: 1;
      input::-webkit-input-placeholder {
        color: #333;
      }
      .el-input__icon {
        line-height: 60px;
      }
      .el-select__caret:before {
        content: "\e78f";
        font-size: 16px;
        padding: 3px;
        background-color: $main-color;
        border-radius: 50%;
        color: #ffffff;
      }
      .el-input--suffix .el-input__inner {
        color: #333;
        font-size: 14px;
        border-radius: 30px;
        border: none;
        background-color: #fff;
        margin-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .el-input {
        padding: 10px 0;
      }
    }

    .font_css {
      margin: 0 10px;
      text-indent: 2em;
      font-size: 14px;
      padding: 10px 0;
    }
    
    .countDownBox {
      font-size: 16px;
      margin: 0 10px;
      padding: 20px 0;
    }
    .timeSpan {
      color: #333333;
      padding: 5px 15px;
      font-size: 14px;
      background: #ffffff;
      border-radius: 18px;
      margin: 0 5px;
      text-align: center;
    }
    .gradeSpan {
      color: #878787;
      padding: 10px;
      font-size: 14px;
      background: #e0e0e0;
      border-radius: 6px;
      text-align: center;
    }
    .el-header /deep/.el-button:hover,
    .el-button:focus,
    .el-button:active {
      background-color: $main-color;
      color: #fff;
    }
    
    .el-table{
      font-size: 12px;
      color: #202020;
      .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #eef7ff;
      }
      .el-table td,.el-table th.is-leaf{
        border-bottom: 0;
      }
      thead{
        color: #ffffff;
        font-size: 10px;
        th{
          padding: 5px 0;
        }
      }
      th > .cell{
        font-weight: 100;
      }
      th,tr{
        background-color: #fff;
      }
    }
    .el-table__header-wrapper{
        thead{
            color: #ffffff;
            font-size: 10px;
            th{
                padding: 5px 0;
            }
        }
        th > .cell{
            font-weight: 100;
        }
        th,tr{
            background-color: #badfff;
        }
    }
      .el-table__row--striped {
          td{
              background-color: #badfff!important;
          }
      }
    .el-collapse-item__content{
      padding-left: 10px;
      padding-right: 10px;
    }
    .el-collapse-item__wrap {
      border-bottom: none;
    }
    .el-collapse-item__header {
      border-bottom: none;
    }
    .el-tabs__content {
      margin: 0 20px;
    }
    .el-icon-s-ticket:before {
      font-size: 16px;
      padding: 5px;
      color: $main-color;
    }
    .el-collapse-item__arrow {
      margin: 0 5px 0 0;
    }
    .el-icon-arrow-right:before {
      font-size: 12px;
      padding: 1px;
      margin-left: 10px;
      background-color: $main-color;
      border-radius: 50%;
      color: #ffffff;
    }
    .el-tabs__item {
      font-size: 16px;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: none;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      border-left: none;
    }
    .el-tabs--card > .el-tabs__header {
      border-bottom: none;
    }
    .el-collapse {
      border-bottom: none;
      border-top: none;
      height: 500px;
      overflow: hidden;
      overflow-y: auto;
    }
    .el-tabs__item.is-active {
      color: #fff;
      background-color: $main-color;
    }
    .el-tabs__header {
      padding: 5px 20px;
    }
  }
  .break-all{
    word-break: break-all;
  }
  .panel{
    position: fixed;
      z-index: 1001;
    top: 50%;
    &.active{
        //z-index: 10;
      left: 85%;
        z-index: 1001;
    }
    img{
      height: 150px;
      cursor: pointer;
    }
  }
</style>