<!--实验室信息-->
<template>
  <div class="subComponent">
    <transition name="slide-fade">
      <div v-if="newDataShow" @click="showInfo"
           class="subComponent-box" :class="newData.alarmType?'subComponent-box-alarm':''">
        <!--实验室-->
        <div class="max-big-box-1" v-show="newData.equTypeValue">
          <div class="type-p"
               :class="newData.status==1?'idle-color':(newData.status==2?'use-color':(newData.status==3?'maintenance-color':''))">
            <p>{{newData.status==1?'空闲':(newData.status==2?'使用':(newData.status==3?'维修':''))}}</p>
          </div>
          <p class="room-p">{{newData.roomNumName}}</p>
          <div class="num-box">
            <img src="@/assets/ZDimages/icon_syl@1x.png">
            <p class="text-p">使用率：</p>
            <p class="for-p"><span v-for="(item,index) in newData.usageRate" :key="index">{{item}}</span>%</p>
          </div>
        </div>
        <!--类型-->
        <div class="max-big-box-2" v-show="newData.equTypeValue">
          <p class="text-p-1">{{newData.equTypeValue}}</p>
          <p class="text-p-2">{{newData.areaValue}}㎡</p>
          <p class="text-p-3">今日进入人次{{newData.userNum?newData.userNum:0}}人</p>
        </div>
        <!--负责人-->
        <div class="max-big-box-3" v-show="newData.equTypeValue">
          <img src="@/assets/ZDimages/icon_fzr@1x.png">
          <p v-if="newData.status==2">使用人：{{newData.userName}}</p>
          <p v-if="newData.status!=2">负责人：{{newData.headName}}</p>
        </div>
        <!--插座-->
        <div v-if="newData.electricitySensor[0]" class="max-big-box-4" :class="newData.alarmType?'max-big-box-4-alarm':''">
          <img src="@/assets/ZDimages/icon_czyd@1x.png">
          <p class="title-p">插座用电：</p>
          <p class="for-text-p" :class="item.sensorAlarm?'for-text-p-alarm':''"
             v-for="(item,index) in newData.electricitySensor" :key="index">
            <span v-if="item.online">{{item.deviceName}}：{{item.deviceValue}}{{item.unit}}</span>
            <span v-else="item.online">{{item.deviceName}}：离线</span>
          </p>
        </div>
        <!--传感器-->
        <div class="max-big-box-5" v-if="newData.sensor[0]">
          <div class="for-box" :class="item.sensorAlarm?'alarm-box':''"
               v-for="(item,index) in newData.sensor" :key="index">
            <div class="img-box">
              <svg-icon v-if="item.icon" class="svg-img" :class="item.type?'svg-img-yc':'svg-img-zc'"
                        :icon-class="item.icon"/>
            </div>
            <p class="text-p">
              <span class="span-1" v-if="item.code != 'yg'&&item.online">{{item.deviceValue}}</span>
              <span class="span-2" v-if="item.code != 'yg'&&item.online">{{item.unit}}</span>
              <span class="span-2" v-if="item.code != 'yg'&&!item.online">离线</span>
              <span class="span-3" v-if="item.code == 'yg'&&item.online">{{item.sensorAlarm?'异常':'正常'}}</span>
              <span class="span-3" v-if="item.code == 'yg'&&!item.online">离线</span>
            </p>
            <p class="name-p">{{item.deviceName}}</p>
          </div>
        </div>
      </div>
    </transition>
    <!--全屏详情-->
    <div class="sub-max-big-shade-box" v-if="showType">
      <div class="sub-big-shade-box">
        <p class="sub-big-title-p">设施详情</p>
        <div class="sub-big-video-box">
          <H5PlayerVideo class="video-max-big-box"
                         :videoProps="videoData" v-if="videoShow"></H5PlayerVideo>
          <img v-if="!videoList[0]" style="width:618px;height:348px;" src="@/assets/ZDimages/video_img.png">
          <div class="video-for-index-box">
            <p class="null-p"></p>
            <p v-for="(item,index) in videoList" :key="index"
               @click="checkVideo(index)"
               class="for-button-p" :class="index==checkVideoIndex?'check-index-P':''"></p>
            <p class="null-p"></p>
          </div>
        </div>
        <p class="text-p-1">设施名称：{{newData.equTypeValue}}</p>
        <div class="text-box">
          <p>设施区域：{{newData.regionValue}}</p>
          <p>所在过道：{{newData.floorName}}</p>
        </div>
        <div class="text-box">
          <p>房 间 号：{{newData.roomNumValue}}</p>
          <p>运行状态：<span :class="newData.status == 3?'span1':'span2'">{{newData.status == 3?'维护':'正常'}}</span></p>
        </div>
        <div class="text-box">
          <p>设施编号：{{newData.equCodeValue}}</p>
          <p>设施类型：温室</p>
        </div>
        <div class="text-box">
          <p>设施面积：{{newData.areaValue}}m²</p>
          <p>收费标准：{{newData.chargeValue}}元/m²·月</p>
        </div>
        <div class="text-box">
          <p>温度范围：{{newData.temperatureValue}}℃</p>
          <p>湿度范围：{{newData.humidityValue}}%RH</p>
        </div>
        <p class="off-button" @click="showInfo">关闭</p>
      </div>
    </div>
    <!--报警-->
    <div class="alarm-max-big-shade-box" v-if="alarmType">
      <div class="alarm-big-shade-box">
        <img class="alarm-title-img blink" src="@/assets/ZDimages/img_title.png">
        <div class="off-button" @click="offAlarm">
          <p>关闭报警</p>
        </div>
        <div class="alarm-big-box">
          <div class="alarm-left-big-box">
            <div class="text-box">
              <div class="colorType" :class="newData.status==1?'idle-color':(newData.status==2?'use-color':(newData.status==3?'maintenance-color':''))">
                <p>{{newData.status==1?'空闲':(newData.status==2?'使用':(newData.status==3?'维修':''))}}</p>
              </div>
              <p class="roomName">{{newData.roomNumName}}</p>
            </div>
            <div class="text-box">
              <img src="@/assets/ZDimages/icon_bjsj_tk@1x.png">
              <p class="right-text">报警时间：{{parseTime(newData.alarmData.eventStartTime,"{y}-{m}-{d} {h}:{i}")}}</p>
            </div>
            <div class="text-box">
              <img src="@/assets/ZDimages/icon_sslx_tk@1x.png">
              <p class="right-text">设施类型：{{newData.equTypeValue}}</p>
            </div>
            <div class="text-box">
              <img src="@/assets/ZDimages/icon_lxr_tk@1x.png">
              <p class="right-text" v-if="newData.status==2">使用人：{{newData.userName}}</p>
              <p class="right-text" v-if="newData.status!=2">负责人：{{newData.headName}}</p>
            </div>
            <div class="text-box">
              <img src="@/assets/ZDimages/icon_bjnr_tk@1x.png">
              <p class="right-text">报警内容：</p>
            </div>
            <div class="alarm-sensor-box">
              <div class="alarm-sensor-box-for" v-if="newData.alarmSensor[0]">
                <div class="for-box" :class="item.sensorAlarm?'alarm-box':''"
                     v-for="(item,index) in newData.alarmSensor" :key="index">
                  <div class="img-box">
                    <svg-icon v-if="item.icon" class="svg-img" :class="item.type?'svg-img-yc':'svg-img-zc'"
                              :icon-class="item.icon"/>
                  </div>
                  <p class="text-p">
                    <span class="span-1" v-if="item.code != 'yg'">{{item.deviceValue}}</span>
                    <span class="span-2" v-if="item.code != 'yg'">{{item.unit}}</span>
                    <span class="span-3" v-if="item.code == 'yg'">{{item.sensorAlarm?'异常':'正常'}}</span>
                  </p>
                  <p class="name-p">{{item.deviceName}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="alarm-right-big-box">
            <H5PlayerVideo class="alarm-video-max-big-box"
                           :videoProps="alarmVideoData" v-if="videoList[0]"></H5PlayerVideo>
            <img v-if="!videoList[0]" style="width:664px;height:423px;" src="@/assets/ZDimages/video_img.png">
          </div>
        </div>
        <audio class="waring_mp3" ref="audioPlayer" playsinline loop muted autoplay>
          <source src="@/assets/video/waringVoice1.mp3" type="audio/mpeg">
        </audio>
      </div>
    </div>
    <img class="position-left-top" src="@/assets/ZDimages/img_min_icon.png">
    <img class="position-right-top" src="@/assets/ZDimages/img_min_icon.png">
    <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
    <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
  </div>
</template>
<script>
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
  import { laboratoryPlanCloseRiskPlan } from '@/api/index'
  export default {
    name: 'subComponent',
    components: {
      H5PlayerVideo
    },
    data() {
      return {
        newDataShow: false,
        newData: {
          status: '',
          roomNumName: '',
          usageRate: '',
          equTypeValue: '',
          areaValue: '',
          userNum: '',
          headName: '',
          electricitySensor: [],
          sensor: [],
          alarmType: false
        },
        showType: false,
        videoList: [],
        videoData: {},
        videoShow:false,
        alarmVideoData:{},
        checkVideoIndex: 0,
        alarmType:false,
      }
    },
    created() {

    },
    mounted() {
    },
    methods: {
      getSubData(item) {
        this.switchBox(item)
      },
      switchBox(obj) {
        let self = this
        self.$set(self, 'newDataShow', false)
        setTimeout(function() {
          obj.alarmSensor = [];
          for(let i=0;i<obj.sensor.length;i++){
            if(obj.sensor[i].sensorAlarm){
              obj.alarmSensor.push(obj.sensor[i])
            }
          }
          for(let i=0;i<obj.electricitySensor.length;i++){
            if(obj.electricitySensor[i].sensorAlarm){
              obj.alarmSensor.push(obj.electricitySensor[i])
            }
          }
          self.$set(self, 'newData', obj)
          if(obj.videoList[0]){
            self.$set(self, 'videoList', obj.videoList)
            let minObj = JSON.parse(JSON.stringify(obj.videoList[0]));
            minObj.fullShow = true;
            minObj.width = 618;
            minObj.height = 348;
            let videoObj = JSON.parse(JSON.stringify(obj.videoList[0]));
            videoObj.fullShow = true;
            videoObj.width = 664;
            videoObj.height = 423;
            self.$set(self, 'videoData', minObj)
            self.$set(self, 'videoShow', true)
            self.$set(self, 'alarmVideoData', videoObj)
            self.$set(self, 'checkVideoIndex', 0)
          }
          self.$set(self, 'newDataShow', true)
          if(obj.alarmType){
            self.openAlarm();
          }
          self.$forceUpdate()
        }, 200)
      },
      //显示详情
      showInfo() {
        this.$set(this,'checkVideoIndex',0);
        this.$set(this, 'showType', !this.showType)
        this.$parent.setSubInfoType()
      },
      //切换视频
      checkVideo(index){
        let self = this;
        this.$set(this, 'videoShow', false)
        setTimeout(function() {
          let minObj = JSON.parse(JSON.stringify(self.videoList[index]));
          minObj.fullShow = true;
          minObj.width = 618;
          minObj.height = 348;
          self.$set(self,'videoData',minObj);
          self.$set(self,'checkVideoIndex',index);
          self.$set(self, 'videoShow', true)
        }, 200)
      },
      //开启报警界面
      openAlarm(){
        let self = this;
        this.$set(this,'showType',false)
        this.$set(this,'alarmType',true);
        setTimeout(() => {
          /* 报警音频播放 */
          var audio = self.$refs.audioPlayer;
          // 尝试静音自动播放
          audio.play().catch(() => {
            // 如果失败，延迟 2 秒再次尝试（趁浏览器未完全冻结）
            setTimeout(() => audio.play(), 1000);
          });
          // 延迟 3 秒后尝试取消静音（需浏览器允许）
          setTimeout(() => {
            audio.muted = false;
          }, 1500);
        }, 500);
      },
      offAlarm(){
        laboratoryPlanCloseRiskPlan({eventId:this.newData.alarmData.eventId}).then(response => {
          this.$set(this,'alarmType',false);
          this.$parent.setOffAlarm();
        });
      },
      setOffAlarm(){
        this.$set(this,'alarmType',false);
      },
    }
  }
</script>
<style scoped lang="scss">
  .subComponent {
    overflow: hidden;
    width: 530px;
    height: 439px;
    margin: 10px 0 0 20px;
    border: 1px solid #114a9a;
    /*background-image: url("../../assets/ZDimages/img_right-bottom.png");*/
    /*background-size: 100% 100%;*/
    position: relative;
    .sub-max-big-shade-box {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 5;
      .sub-big-shade-box {
        margin: 115px 608px 0;
        width: 704px;
        height: 884px;
        background: #013167;
        border-radius: 10px 10px 10px 10px;
        .sub-big-title-p {
          font-size: 22px;
          color: #fff;
          border-bottom: 1px solid #fff;
          height: 60px;
          line-height: 60px;
          padding-left: 28px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
        }
        .sub-big-video-box {
          width: 618px;
          height: 378px;
          margin: 19px 43px 0;
          .video-for-index-box {
            height: 30px;
            display: flex;
            .null-p {
              flex: 1;
            }
            .for-button-p {
              cursor: pointer;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: rgba(13, 100, 197, 0.4);
              margin: 10px 5px;
            }
            .check-index-P {
              background: #0D64C5!important;
            }
          }
        }
        .text-p-1{
          font-size:20px;
          color:#fff;
          height:54px;
          line-height:54px;
          border-bottom:1px solid #214a78;
          margin:0 43px;
        }
        .text-box{
          margin:0 42px;
          display: flex;
          img{
            height:20px;
            width:20px;
            margin:17px 10px 0 0;
          }
          p{
            width:280px;
            font-size:20px;
            color:#fff;
            height:54px;
            line-height:54px;
            border-bottom:1px solid #214a78;
          }
          p:nth-child(1){
            margin-right:59px;
          }
          span{
            display: inline-block;
            text-align: center;
            border-radius:15px;
            height:30px;
            line-height:30px;
            width:70px;
            color:#fff;
          }
          .span1{
            background-color: #FF9900;
          }
          .span2{
            background-color: #00AC45;
          }
        }
        .off-button{
          width: 180px;
          height: 46px;
          line-height:46px;
          background: #00499B;
          border-radius: 10px 10px 10px 10px;
          font-size:20px;
          text-align: center;
          cursor: pointer;
          margin:29px auto;
        }
      }
    }
    .alarm-max-big-shade-box{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 5;
      box-shadow: inset 0 6px 32px 0 #BD0000;
      .alarm-big-shade-box{
        width:1280px;
        height:704px;
        margin:187px auto 0;
        background-image: url("../../assets/ZDimages/img_bjtcbg.png");
        background-size: 100% 100%;
        overflow: hidden;
        position: relative;
        .alarm-title-img{
          position: absolute;
          left:360px;
          top:25px;
          height:146px;
          width:568px;
        }
        .blink {
          animation: blink 0.8s ease-in-out infinite;
        }
        @keyframes blink {
          0%, 100% { opacity: 0; } /* 最低可见度 */
          50% { opacity: 1; }        /* 最高可见度 */
        }
        .off-button{
          height:50px;
          line-height:50px;
          width:150px;
          background-color: #E80101;
          cursor: pointer;
          overflow: hidden;
          position: absolute;
          bottom: 59px;
          left: 565px;
          p{
            width:140px;
            height:40px;
            line-height:40px;
            text-align: center;
            font-size:22px;
            color:#fff;
            border:1px solid #fff;
            margin:5px;
          }
        }
        .alarm-big-box{
          margin:156px 0 0 90px;
          display: flex;
          .alarm-left-big-box{
            width:440px;
            height:421px;
            .text-box{
              display: flex;
              margin-bottom:25px;
              .colorType{
                text-align: center;
                width:55px;
                height:25px;
                line-height:25px;
                color:#fff;
                font-size:14px;
                border-radius: 50px;
                margin-right:10px;
                p{
                  margin: 3px;
                  width: 49px;
                  height: 19px;
                  text-align: center;
                  line-height: 19px;
                  color: #fff;
                  border-radius: 50px;
                  border: 1px solid #fff;
                  font-size: 16px;
                }
              }
              .roomName{
                color:#fff;
                font-size:24px;
                height:25px;
                line-height:25px;
              }
              img{
                width:20px;
                height:20px;
                margin:1px 10px 0 0 ;
              }
              .right-text{
                color:#fff;
                font-size:18px;
                height:25px;
                line-height:25px;
              }
              .idle-color {
                background-color: #00AC45;
              }
              .use-color {
                background-color: #00FFF6;
              }
              .maintenance-color {
                background-color: #FFA148;
              }
            }
            .alarm-sensor-box{
              /*传感器*/
              .alarm-sensor-box-for {
                height: 200px;
                display: flex;
                margin: 22px 22px 0;
                .for-box {
                  width: 154px;
                  height: 180px;
                  margin-right: 12px;
                  border: 1px solid #FF2105 !important;
                  background-color: rgba(255,255,255,0.1);
                  border-radius: 10px;
                  .img-box {
                    margin-left: 20px;
                    margin-top: 6px;
                    width: 114px;
                    height: 102px;
                    background-image: url("../../assets/ZDimages/img_bjtk_cgq@1x.png");
                    background-size: 100% 100%;
                    .svg-img {
                      margin: 44px 44px 0;
                      width: 25px;
                      height: 25px;
                      color: #FF2105;
                    }
                  }
                  .text-p {
                    height: 22px;
                    line-height: 22px;
                    text-align: center;
                    .span-1 {
                      font-size: 20px;
                      color: #FF2105;
                    }
                    .span-2 {
                      font-size: 14px;
                      color: #FF2105;
                    }
                    .span-3 {
                      font-size: 20px;
                      color: #FF2105;
                    }
                  }
                  .name-p {
                    height: 46px;
                    line-height: 46px;
                    text-align: center;
                    font-size: 16px;
                    color: #FF2105;
                  }
                }
                .for-box:nth-child(3) {
                  margin: 0 !important;
                }
              }
            }
          }
          .alarm-right-big-box{
            width:662px;
            height:421px;
            background-color: red;
            border-radius:10px;
            overflow: hidden;
          }
        }
        .waring_mp3{
          z-index: -1000;
          width:1px;
          height:1px;
          overflow: hidden;
        }
      }
    }
    .subComponent-box {
      cursor: pointer;
      height: 439px;
      /*实验室*/
      .max-big-box-1 {
        height: 60px;
        display: flex;
        margin: 0 22px;
        .type-p {
          width: 54px;
          height: 28px;
          margin: 21px 10px 0 0;
          border-radius: 50px;
          p {
            margin: 3px;
            width: 48px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            color: #fff;
            border-radius: 50px;
            border: 1px solid #fff;
            font-size: 16px;
          }
        }
        .room-p {
          height: 28px;
          line-height: 28px;
          margin: 21px 10px 0 0;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          font-size: 24px;
          color: #FFFFFF;
          flex: 1;
        }
        .num-box {
          display: flex;
          img {
            height: 24px;
            width: 24px;
            margin: 23px 7px 0 0;
          }
          .text-p {
            height: 28px;
            line-height: 28px;
            margin: 21px 10px 0 0;
            color: #fff;
            font-size: 16px;
          }
          .for-p {
            margin-left: -10px;
            span {
              display: inline-block;
              width: 18px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              border: 1px solid rgba(255, 255, 255, 0.2);
              margin: 25px 3px 0 0;
            }
          }
        }
        .idle-color {
          background-color: #00AC45;
        }
        .use-color {
          background-color: #00FFF6;
        }
        .maintenance-color {
          background-color: #FFA148;
        }
      }
      /*类型*/
      .max-big-box-2 {
        height: 54px;
        display: flex;
        margin: 0 22px;
        .text-p-1 {
          padding: 0 15px;
          height: 30px;
          line-height: 30px;
          background: rgba(5, 118, 255, 0.3);
          border-radius: 6px 6px 6px 6px;
          margin: 12px 10px 0 0;
          color: #AED0FF;
          font-size: 14px;
        }
        .text-p-2 {
          padding: 0 15px;
          height: 30px;
          line-height: 30px;
          background: rgba(255, 163, 24, 0.3);
          border-radius: 6px 6px 6px 6px;
          margin: 12px 10px 0 0;
          color: #FFA318;
          font-size: 14px;
        }
        .text-p-3 {
          padding: 0 15px;
          height: 30px;
          line-height: 30px;
          background: rgba(0, 255, 246, 0.3);
          border-radius: 6px 6px 6px 6px;
          margin: 12px 10px 0 0;
          color: #00FFF6;
          font-size: 14px;
        }
      }
      /*负责人*/
      .max-big-box-3 {
        height: 38px;
        display: flex;
        margin: 0 22px;
        img {
          width: 20px;
          height: 20px;
          margin: 9px 6px 0 0;
        }
        p {
          height: 38px;
          line-height: 38px;
          color: #fff;
          font-size: 18px;
        }
      }
      /*插座*/
      .max-big-box-4 {
        height: 36px;
        display: flex;
        margin: 9px 22px 0;
        background: rgba(5, 118, 255, 0.2);
        border-radius: 8px;
        img {
          width: 20px;
          height: 20px;
          margin: 8px 6px 0 11px;
        }
        .title-p {
          height: 36px;
          line-height: 38px;
          font-size: 16px;
          color: #fff;
          margin-right: 10px;
        }
        .for-text-p {
          height: 36px;
          line-height: 38px;
          font-size: 16px;
          color: #fff;
          margin-right: 20px;
        }
        .for-text-p-alarm {
          color: #FF0000 !important;
        }
      }
      .max-big-box-4-alarm {
        background: rgba(141, 0, 0, 0.2) !important;
      }
      /*传感器*/
      .max-big-box-5 {
        height: 200px;
        display: flex;
        margin: 22px 22px 0;
        .for-box {
          width: 154px;
          height: 180px;
          margin-right: 12px;
          border: 1px solid transparent;
          border-radius: 10px;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          background-image: linear-gradient(to right, #1b4474, #1b4474), linear-gradient(180deg, #FFFFFF, #3FA3FF);
          .img-box {
            margin-left: 20px;
            margin-top: 6px;
            width: 114px;
            height: 102px;
            background-image: url("../../assets/ZDimages/img_cgq_zc@1x.png");
            background-size: 100% 100%;
            .svg-img {
              margin: 44px 44px 0;
              width: 25px;
              height: 25px;
              color: #fff;
            }
          }
          .text-p {
            height: 22px;
            line-height: 22px;
            text-align: center;
            .span-1 {
              font-size: 20px;
              color: #00AC45;
            }
            .span-2 {
              font-size: 14px;
              color: #fff;
            }
            .span-3 {
              font-size: 20px;
              color: #00AC45;
            }
          }
          .name-p {
            height: 46px;
            line-height: 46px;
            text-align: center;
            color: #fff;
            font-size: 16px;
          }
        }
        .for-box:nth-child(3) {
          margin: 0 !important;
        }
      }
    }
    .subComponent-box-alarm {
      background: #331a44;
      .max-big-box-5 {
        .for-box {
          background-image: linear-gradient(to right, #483157, #483157), linear-gradient(180deg, #FFFFFF, #3FA3FF);
        }
        .alarm-box {
          border: 1px solid #FF2105 !important;
          background-image: linear-gradient(to right, #481a3e, #481a3e), linear-gradient(180deg, #FF2105, #FF2105);
          .img-box {
            background-image: url("../../assets/ZDimages/img_bjtk_cgq@1x.png");
            .svg-img {
              color: #FF2105;
            }
          }
          .text-p {
            .span-1 {
              font-size: 20px;
              color: #FF2105;
            }
            .span-2 {
              font-size: 14px;
              color: #FF2105;
            }
            .span-3 {
              font-size: 20px;
              color: #FF2105;
            }
          }
          .name-p {
            color: #FF2105;
          }
        }
      }
    }
    .position-left-top {
      position: absolute;
      left: -15px;
      top: -15px;
      width: 42px;
      height: 42px;
      z-index: 1;
    }
    .position-right-top {
      position: absolute;
      right: -15px;
      top: -15px;
      width: 42px;
      height: 42px;
      z-index: 1;
      transform: rotate(90deg);
    }
    .position-left-bottom {
      position: absolute;
      left: -15px;
      bottom: -15px;
      width: 42px;
      height: 42px;
      z-index: 1;
      transform: rotate(270deg);
    }
    .position-right-bottom {
      position: absolute;
      right: -14px;
      bottom: -15px;
      width: 42px;
      height: 42px;
      z-index: 1;
      transform: rotate(180deg);
    }
    .slide-fade-enter-active {
      transition: all 1s ease;
    }
    .slide-fade-leave-to
      /* .slide-fade-leave-active for below version 2.1.8 */
    {
      transform: translateX(-530px);
      opacity: 0;
    }
    //进场
    .slide-fade-leave-active {
      transition: all 0.2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter {
      transform: translateX(530px);
      opacity: 0;
    }
  }
</style>
