<template>
  <div class="realTimeSearch">
    <div class="searchMain">
      <div class="searchBox" ref="searchref">
        <el-form :inline="true" :model="formdata" class="demo-form-inline">
          <el-form-item label="电压等级">
            <el-select v-model="formdata.dyid" @change="getSearchxl">
              <el-option
                v-for="item in dyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线路名称">
            <el-select
              v-model="formdata.lineid"
              @change="getSearchgt"
              filterable
            >
              <el-option
                v-for="item in xlOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="杆塔名称">
            <el-select
              v-model="formdata.towerid"
              @change="getSearchzz"
              filterable
            >
              <el-option
                v-for="item in gtOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="装置名称">
            <el-select
              v-model="formdata.termid"
              @change="getSearchtd"
              filterable
            >
              <el-option
                v-for="item in zzOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通道">
            <el-select v-model="formdata.channelid">
              <el-option
                v-for="item in tdOptions"
                :key="item.id"
                :label="
                  item.alias !== null && item.alias !== ''
                    ? item.alias
                    : item.name
                "
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期">
            <!-- <el-date-picker
              v-model="formdata.timeVal"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
            ></el-date-picker> -->
            <el-date-picker
              v-model="formdata.starttime"
              type="datetime"
              placeholder="开始日期"
              value-format="timestamp"
              :picker-options="pickerOptions"
              default-time="00:00:00"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="formdata.endtime"
              type="datetime"
              default-time="23:59:59"
              placeholder="结束日期"
              value-format="timestamp"
              :picker-options="pickerOptions"
              class="ml10"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="pictureBox" v-loading="loading" v-infinite-scroll>
        <div v-if="picList.length !== 0" style="width: 100%">
          <el-card
            class="box-card imgList"
            v-for="(item, index) in picList"
            :key="index"
          >
            <div class="bigpic" v-if="item.path.indexOf('videos') == -1">
              <div class="picshow" @click="handlePicAlarm(item)">
                <img
                  :id="'img' + index"
                  :ref="'imgref' + index"
                  :src="item.path + '!800x600'"
                  ref="picJpg"
                />
                <canvas
                  :ref="'canvansref' + index"
                  :id="'canvas_' + index"
                  class="canvasAll"
                ></canvas>
              </div>

              <!-- <el-image :src="item.path" lazy></el-image> -->
              <div class="caption">
                <p class="infoTop">
                  {{ item.linename }} /
                  {{
                    item.displayname !== null && item.displayname !== ""
                      ? item.displayname
                      : item.cmdid
                  }}
                </p>
                <p class="infoBottom">
                  拍照时间：{{ $moment(item.photoTime).format("MM-DD HH:mm") }}
                  /
                  {{
                    item.alias !== null && item.alias !== ""
                      ? item.alias
                      : item.channnelname
                  }}
                  <span class="alarmSpan" v-if="item.isAlarm == 1"
                    >(已告警)</span
                  >
                  <!-- 上传时间：{{
                    $moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
                  }} -->
                </p>
              </div>
              <div class="deleteBox" v-if="role != 2">
                <el-button
                  title="删除照片"
                  type="primary"
                  icon="el-icon-delete"
                  @click.stop="deletePic(item)"
                ></el-button>
              </div>
            </div>
            <div class="bigpic" v-else>
              <!-- <el-image :src="item.path" lazy></el-image> -->
              <video
                width="100%"
                height="250px"
                :src="item.path"
                controls="controls"
              ></video>
              <div class="caption">
                <p class="infoTop">
                  {{ item.linename }} /
                  {{
                    item.displayname !== null && item.displayname !== ""
                      ? item.displayname
                      : item.cmdid
                  }}
                </p>
                <p class="infoBottom">
                  拍照时间：{{ $moment(item.photoTime).format("MM-DD HH:mm") }}
                  /
                  {{
                    item.alias !== null && item.alias !== ""
                      ? item.alias
                      : item.channnelname
                  }}
                  <!-- 上传时间：{{
                    $moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
                  }} -->
                </p>
              </div>
            </div>
          </el-card>
        </div>
        <div class="noPicBox" v-else>
          <el-empty description="暂无图片"></el-empty>
        </div>
      </div>

      <div class="pageNation" v-if="picList.length !== 0">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper,total"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
    <!-- 点击出现大图 -->
    <div v-if="showBigpic" class="showPic">
      <div
        class="picboxI"
        @mousewheel.prevent="rollImg"
        :style="{ transform: 'scale(' + zoomD + ')' }"
        @mousedown="move"
      >
        <img
          id="bigimg"
          ref="bigimgref"
          class="maskPic img"
          :src="bigPhotoPic"
        />
        <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
      </div>
      <div class="viewClose" @click="closePic">
        <i class="el-icon-close"></i>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSearchInfo,
  getRealtimePhoto,
  deletePicList,
} from "@/utils/api/index";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },
      OptionssalseImg: {
        inline: false,
        button: true,
        navbar: false,
        title: false,
        toolbar: false,
        tooltip: false,
        zoomable: true,
        url: "src",
      },
      dyOptions: [{ id: -1, name: "全部" }], //电压数据
      xlOptions: [{ id: -1, name: "全部" }], //线路数据
      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
      zzOptions: [{ id: -1, name: "全部" }], //装置数据
      tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
      formdata: {
        dyid: -1,
        lineid: -1,
        towerid: -1,
        channelid: -1,
        termid: -1,
        // timeVal: "",
      },
      picList: [],
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: false,
      signtype: 0, //0第一次查询

      //点击变大图参数
      showBigpic: false,
      canvasloading: false,
      bigPhotoPic: "", //大图路径
      textInfo: "",
      zoomD: 1,
      canvansdata: "",
      current: 0,
      //告警
      alarmList: "",
      role: "",
    };
  },
  created() {
    this.role = localStorage.getItem("role");
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };

    // this.formdata.search = this.$route.query.name;
    // console.log(this.formdata.search);
  },
  mounted() {
    // this.$set(this.formdata, "timeVal", [
    //   new Date(new Date().toLocaleDateString()).getTime(),
    //   new Date().getTime(),
    // ]);
    this.loading = true;
    this.$set(this.formdata, "endtime", new Date().getTime());

    if (JSON.stringify(this.$route.query) === "{}") {
      this.$set(
        this.formdata,
        "starttime",
        new Date(new Date().toLocaleDateString()).getTime()
      );
      this.getSearchdy();
    } else {
      console.log(this.$route.query);
      this.getSearchdy();
      console.log(this.$route.query.date);
      this.formdata.dyid = this.$route.query.dyId;
      this.formdata.lineid = this.$route.query.lineId;
      this.formdata.towerid = this.$route.query.towerId;
      this.formdata.channelid = this.$route.query.channelId;
      this.formdata.termid = this.$route.query.termId;

      this.$set(this.formdata, "starttime", this.$route.query.date);
    }
  },
  methods: {
    //获取电压信息
    getSearchdy() {
      getSearchInfo({ type: 1 })
        .then((res) => {
          // if (res.data.list.length == 0) {
          //   this.dyOptions = [];
          //   this.formdata.dyid = "";
          // } else {
          //   this.dyOptions = res.data.list;
          //   this.formdata.dyid = res.data.list[0].id;
          // }
          this.dyOptions = this.dyOptions.concat(res.data.list);
          console.log(this.dyOptions);
          //this.formdata.dyid = this.dyOptions[0].id;
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.dyid = this.dyOptions[0].id;
          } else {
            this.formdata.dyid = Number(this.$route.query.dyId);
          }

          // this.$set(this.formdata, 'dyid', this.dyOptions[0].id)
          this.getSearchxl();
        })
        .catch((err) => {});
    },
    //获取线路数据
    getSearchxl() {
      getSearchInfo({ type: 2, id: this.formdata.dyid })
        .then((res) => {
          this.xlOptions = [{ id: -1, name: "全部" }];
          this.xlOptions = this.xlOptions.concat(res.data.list);
          // this.formdata.lineid = this.xlOptions[0].id;
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.lineid = this.xlOptions[0].id;
          } else {
            this.formdata.lineid = Number(this.$route.query.lineId);
          }

          this.getSearchgt();
        })
        .catch((err) => {});
    },
    //获取杆塔数据
    getSearchgt() {
      getSearchInfo({ type: 3, id: this.formdata.lineid })
        .then((res) => {
          this.gtOptions = [{ id: -1, name: "全部" }];
          this.gtOptions = this.gtOptions.concat(res.data.list);
          // this.formdata.towerid = this.gtOptions[0].id;
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.towerid = this.gtOptions[0].id;
          } else {
            this.formdata.towerid = Number(this.$route.query.towerId);
          }

          this.getSearchzz();
        })
        .catch((err) => {});
    },
    //获取装置数据
    getSearchzz() {
      getSearchInfo({ type: 4, id: this.formdata.towerid })
        .then((res) => {
          this.zzOptions = [{ id: -1, name: "全部" }];
          this.zzOptions = this.zzOptions.concat(res.data.list);
          // this.formdata.termid = this.zzOptions[0].id;
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.termid = this.zzOptions[0].id;
          } else {
            this.formdata.termid = Number(this.$route.query.termId);
          }

          this.getSearchtd();
        })
        .catch((err) => {});
    },
    //获取通道数据
    getSearchtd() {
      getSearchInfo({ type: 5, id: this.formdata.termid })
        .then((res) => {
          this.tdOptions = [{ id: -1, name: "全部", alias: null }];
          this.tdOptions = this.tdOptions.concat(res.data.list);
          //this.formdata.channelid = this.tdOptions[0].id;
          if (JSON.stringify(this.$route.query) === "{}") {
            this.formdata.channelid = this.tdOptions[0].id;
          } else {
            this.formdata.channelid = Number(this.$route.query.channelId);
          }

          // if (this.signtype == 0) {
          //   this.getPicData();
          // }
          // this.signtype = 1;
          this.getPicData();
        })
        .catch((err) => {});
    },
    //获取图片列表
    getPicData() {
      this.loading = true;
      this.picList = [];
      this.$set(this.formdata, "pageindex", this.page);
      this.$set(this.formdata, "pagesize", this.pageSize);
      // this.$set(this.formdata, "starttime", this.formdata.timeVal[0]);
      // this.$set(this.formdata, "endtime", this.formdata.timeVal[1]);
      getRealtimePhoto(this.formdata)
        .then((res) => {
          this.picList = res.data.list;
          this.alarmList = res.data.list.alarmlist;
          this.total = res.data.total;
          this.loading = false;
          //绘制告警
          this.$nextTick(() => {
            this.drawlineListAll(this.picList);
          });
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    //查询
    onSubmit() {
      if (this.formdata.starttime > this.formdata.endtime) {
        return this.$message({
          duration: 1500,
          showClose: true,
          message: "开始日期不能大于结束日期",
          type: "warning",
        });
      }
      this.getPicData();
    },
    deletePic(val) {
      console.log(val);
      let deleteArr = [];
      deleteArr.push(val.picid);
      console.log(deleteArr);
      deletePicList({ list: deleteArr })
        .then((res) => {
          console.log(res);
          this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                type: "success",
                showClose: true,
                message: "删除成功!",
              });
              this.getPicData();
            })
            .catch(() => {
              this.$message({
                type: "info",
                showClose: true,
                message: "已取消删除",
              });
            });
        })
        .catch((err) => {});
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.picList = [];
      this.getPicData();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPicData();
    },
    //点击变大图
    handlePicAlarm(val, index) {
      console.log(val, index);
      this.current = index;
      this.canvasloading = true;
      this.canvansdata = val;
      if (val.path !== "") {
        console.log(val);
        this.bigPhotoPic = val.path;
        this.showBigpic = true;
        if (val.isAlarm == 1) {
          setTimeout(() => {
            this.$nextTick(() => {
              this.drawline2(val);
            });
          }, 100);
        }
      }
    },
    //关闭大图
    closePic() {
      this.showBigpic = false;
      this.zoomD = 1;
    },
    imgOnload() {
      console.log("加载完成");
      this.canvasloading = false;
    },
    //移动demo
    move(e) {
      console.log(e);
      e.preventDefault();
      // 获取元素
      var personBox = document.querySelector(".picboxI");
      var img = document.querySelector(".img");
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      personBox.addEventListener("mousemove", move);
      console.log(personBox.addEventListener("mousemove", move));
      console.log(personBox.style);
      function move(e) {
        console.log(personBox.style.left);
        personBox.style.left = e.pageX - x + "px";
        personBox.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function () {
        personBox.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      personBox.addEventListener("mouseout", function () {
        personBox.removeEventListener("mousemove", move);
      });
    },
    // 缩放图片
    rollImg(e) {
      let direction = e.deltaY > 0 ? "down" : "up";
      if (direction === "up") {
        // 滑轮向上滚动
        this.large();
      } else {
        // 滑轮向下滚动
        this.Small();
      }
    },
    //大
    large() {
      this.$nextTick(() => {
        if (this.zoomD < 6) {
          this.zoomD += 0.1;
        }
        document.querySelector(
          ".picboxI"
        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
      });
    },
    // 小
    Small() {
      this.$nextTick(() => {
        if (this.zoomD > 0.3) {
          this.zoomD -= 0.1;
        }
        document.querySelector(
          ".picboxI"
        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
      });
    },
    //绘制所有的图片告警区域
    drawlineListAll(val) {
      console.log(val);
      for (let i = 0; i < val.length; i++) {
        if (val[i].isAlarm == 1) {
          console.log(i);
          console.log(document.getElementById("canvas_" + i));
          console.log(document.getElementById("img" + i));
          this.canvas = document.getElementById("canvas_" + i);
          this.imgpic = document.getElementById("img" + i);
          this.textInfo = val[i].alarmlist[0].enname;
          console.log(this.textInfo);
          console.log(this.imgpic.offsetWidth);
          console.log(this.canvas);
          this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
          this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
          console.log(this.canvas.width, this.canvas.height);
          this.ctx = this.canvas.getContext("2d");
          this.ctx.beginPath();
          //设置线条颜色，必须放在绘制之前
          this.ctx.strokeStyle = "#ff0000";
          // 线宽设置，必须放在绘制之前
          this.ctx.lineWidth = 1;

          // 绘制矩形
          var scaleX = this.canvas.width / val[i].alarmlist[0].photoWidth, //this.iw图片的宽
            scaleY = this.canvas.height / val[i].alarmlist[0].photoHeight; //this.ih图片的高
          console.log(scaleX, scaleY);
          var top = val[i].alarmlist[0].x * scaleX,
            left = val[i].alarmlist[0].y * scaleY,
            width = val[i].alarmlist[0].width * scaleX,
            height = val[i].alarmlist[0].height * scaleY;
          console.log(top, left, width, height);
          // this.ctx.strokeStyle = "red"; //线的颜色
          this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
          //this.ctx.strokeRect(val[i].x, val[i].y, val[i].width, val[i].height);
          this.ctx.font = "16px normal";
          this.ctx.fillStyle = "#ff0000";
          //this.ctx.fillText(this.textInfo, top, left + 24);
          //距离上面有空间
          if (left > 32) {
            this.ctx.fillText(this.textInfo, top, left - 4);
          } else if (this.canvas.height - left + height > 32) {
            this.ctx.fillText(this.textInfo, top, height - 4);
          }
          this.ctx.closePath();
          this.ctx.stroke();
        } else {
          console.log("没有告警");
        }
      }
    },
    //绘制大图告警区域
    drawline2(data) {
      console.log(data);
      console.log(document.getElementById("bigCanvas"));
      console.log(document.getElementById("bigimg"));
      this.canvas = document.getElementById("bigCanvas");
      this.imgpic = document.getElementById("bigimg");
      console.log(this.canvas);
      console.log(this.imgpic);
      this.textInfo = data.alarmlist[0].enname;
      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
      console.log(this.canvas.width, this.canvas.height);
      this.ctx = this.canvas.getContext("2d");
      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = "#ff0000";
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 1;

      // 绘制矩形
      var scaleX = this.canvas.width / data.alarmlist[0].photoWidth, //this.iw图片的宽
        scaleY = this.canvas.height / data.alarmlist[0].photoHeight; //this.ih图片的高
      console.log(scaleX, scaleY);
      var top = data.alarmlist[0].x * scaleX,
        left = data.alarmlist[0].y * scaleY,
        width = data.alarmlist[0].width * scaleX,
        height = data.alarmlist[0].height * scaleY;
      console.log(top, left, width, height);
      // this.ctx.strokeStyle = "red"; //线的颜色
      this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
      //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
      this.ctx.font = "14px normal";
      this.ctx.fillStyle = "#ff0000";
      //this.ctx.fillText(this.textInfo, top, left + 24);
      //距离上面有空间
      if (left > 32) {
        this.ctx.fillText(this.textInfo, top, left - 4);
      } else if (this.canvas.height - left + height > 32) {
        this.ctx.fillText(this.textInfo, top, height - 4);
      }
      this.ctx.closePath();
      this.ctx.stroke();
    },
  },
};
</script>
<style lang="less">
.realTimeSearch {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;
  .searchMain {
    border: 1px solid #dddddd;
    height: calc(100% - 22px);
    padding: 12px;
    border-radius: 4px;
    .ml10 {
      margin-left: 10px;
    }
  }
  .pictureBox {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    height: calc(100% - 135px);
    max-height: calc(100% - 135px);
    overflow: auto;
    border: 1px solid #eee;

    .imgList {
      width: calc((100% - 104px) / 4);
      position: relative;
      display: inline-block;
      margin: 8px;
      position: relative;
      padding: 4px;
      border-radius: 3px;
      background: #fff;
      height: fit-content;
      height: 320px;
      .el-card__body {
        padding: 0px;
      }
      .bigpic {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;
        .picshow {
          width: 100%;
          height: 250px;
          position: relative;
          .canvasAll {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            left: 0;
            top: 0;
            pointer-events: none;
          }
        }
        &:hover {
          .deleteBox {
            display: block;
          }
        }
      }
      img {
        cursor: pointer;
        width: 100%;
        height: 250px;
        object-fit: fill;
      }

      .caption {
        padding: 9px;
        color: #333;
        .infoTop {
          font-size: 16px;
          color: #000;
          font-weight: normal;
          margin-top: 2px;
          padding-left: 5px;
          padding-right: 5px;
        }
        .infoBottom {
          color: #000;
          font-size: 12px;
          font-weight: normal;
          margin-top: 6px;
          padding-left: 5px;
          padding-right: 5px;
        }
        .alarmSpan {
          color: #f00;
          margin-left: 4px;
        }
      }
      .deleteBox {
        position: absolute;
        right: 4px;
        top: 4px;
        z-index: 2;
        display: none;
        .el-button {
          width: auto;
          background: rgba(0, 0, 0, 0.5);
          border: 1px solid transparent;
          color: #fff;
          font-size: 16px;
          padding: 3px;
        }
        &:hover {
          .el-button {
            background: #f56c6c;
            //color: #f56c6c;
          }
        }
      }
    }
    .noPicBox {
      display: flex;
      width: 100%;
      height: calc(100% - 86px);
      overflow: auto;
      .el-empty {
        margin: auto;
      }
    }
  }
  .showPic {
    position: fixed;
    background-color: rgba(0, 0, 0, 50%);
    bottom: 0;
    left: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    .picboxI {
      position: relative;
      width: 85%;
      height: 85%;
      margin: auto;
      animation-name: scaleDraw;
      /*关键帧名称*/
      animation-timing-function: ease;
      /*动画的速度曲线*/
      animation-iteration-count: 1;
      /*动画播放的次数*/
      animation-duration: 0.65s;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 100%;
        max-height: 100%;

        margin: auto;
        position: absolute;
        cursor: grab;
      }
      .myCanvas {
        position: absolute;
        // top: 0;
        // left: 0;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        cursor: pointer;
        pointer-events: none;
      }
    }
    .viewClose {
      -webkit-app-region: no-drag;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      cursor: pointer;
      height: 80px;
      overflow: hidden;
      position: absolute;
      right: -40px;
      top: -40px;
      transition: background-color 0.15s;
      width: 80px;
      .el-icon-close {
        bottom: 16px;
        left: 16px;
        position: absolute;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>
