hyyfScreen/src/views/BioSafety/BioSafety.vue

<template>
  <div class="bioSafety">
    <div class="bio-flex">
      <div class="bio-flex-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">门卫管控</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-video">
          <div class="kuang"></div>
        </div>
        <div class="bio-out">
          <div class="bio-out-center">
            <div class="out-img"></div>
            <div style="color: white; font-size: 16px">
              <p>违规次数</p>
              <p style="font-size: 22px; font-weight: 600">27</p>
            </div>
          </div>
          <div class="bio-out-center">
            <div class="out-img"></div>
            <div style="color: white; font-size: 16px">
              <p>违规次数</p>
              <p style="font-size: 22px; font-weight: 600">27</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bio-flex-center">
        <div class="bio-title">
          <div class="bio-title-left-1"></div>
          <div class="bio-title-center-1">车辆管理</div>
          <div class="bio-title-right-1"></div>
        </div>
        <div class="bio-content flex">
          <div class="bio-content-left">
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">15.2</strong>
                <span>分钟</span>
              </div>
              <div class="text">平均洗消时长</div>
            </div>
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">15.2</strong>
                <span>分钟</span>
              </div>
              <div class="text">平均熏蒸时长</div>
            </div>
          </div>
          <div class="bio-content-right"
               v-loading="carLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, i) in carListContent" :key="i">
                <div class="case" @click="open(item, 1)">
                  <div class="case-left1">
                    <img style="align-items: center;" :src="item.originalPicPath" width="100%" alt="">
                  </div>
                  <div class="case-right">
                    <div class="case-time">{{ item.capTimeStr }}</div>
                    <div class="case-content">
                      <div class="content-grid">
                        <span>区域：</span>
                        <span>{{item.devChnName}}</span>
                      </div>
                      <div class="content-grid">
                        <span>车牌号：</span>
                        <span>{{item.carNum ? item.carNum : '未识别'}}</span>
                      </div>
                      <div class="content-grid">
                        <span>方向：</span>
                        <span>{{item.carDirectStr}}</span>
                      </div>
                      <div class="content-grid">
                        <span>车辆颜色：</span>
                        <span>{{item.parkingCarColor}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="bio-content"
             v-loading="carsLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <chart-bar :data="carList"></chart-bar>
        </div>
      </div>
      <div class="bio-flex-center">
        <div class="bio-title">
          <div class="bio-title-left-1"></div>
          <div class="bio-title-center-1">门禁管理</div>
          <div class="bio-title-right-1"></div>
        </div>
        <div class="bio-content flex">
          <div class="bio-content-left">
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">{{enterPerson}}</strong>
                <span>人次</span>
              </div>
              <div class="text">今日进入人数</div>
            </div>
            <div class="box">
              <div class="circle"></div>
              <div class="price">
                <strong class="price-size">{{outPerson}}</strong>
                <span>次</span>
              </div>
              <div class="text">今日违规次数</div>
            </div>
          </div>
          <div class="bio-content-right"  v-loading="personLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, i) in personList" :key="i">
                <div class="case" @click="open(item, 2)">
                  <div class="case-left1">
                    <img :src="item.recordImage" width="100%" alt="">
                  </div>
                  <div class="case-right">
                    <div class="case-time">{{item.swingTime}}</div>
                    <div style="text-align: left; margin-left: 10px">
                      <div style="color: white; line-height: 30px">
                        <span>姓名：</span>
                        <span>{{item.personName}}</span>
                      </div>
                      <div style="color: white; line-height: 30px">
                        进入区域：
                        <span style="padding-left: 10px">{{item.deviceName}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="bio-content" v-loading="personChartLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <chart-bar :data="data1"></chart-bar>
        </div>
      </div>
    </div>
    <div class="bio-flex-1">
      <div class="bio-flex-1-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">人员管理</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical">
          <div class="bio-vertical-left">
            <div class="bio-vertical-title">
              <div class="title-left"></div>
              <div class="title-center">
                <span>进出人次</span>
                <strong>&nbsp;126</strong>
              </div>
              <div class="title-right"></div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img"></div>
              <div style="color: white; font-size: 14px">
                <p>正常进入</p>
                <span><strong style="font-size: 22px; font-weight: 600">99</strong>人次</span>
              </div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-1"></div>
              <div style="color: white; font-size: 14px">
                <p>违规次数</p>
                <span><strong style="font-size: 22px; font-weight: 600">27</strong>人次</span>
              </div>
            </div>
          </div>
          <div class="bio-vertical-right">
            <chart-bar :data="data2"></chart-bar>
          </div>
        </div>
      </div>
      <div class="bio-flex-1-center">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">车辆烘干</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical"  v-loading="hgLoading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
          <chart-bar :data="data3"></chart-bar>
        </div>
      </div>
      <div class="bio-flex-1-left">
        <div class="bio-title">
          <div class="bio-title-left"></div>
          <div class="bio-title-center">死猪管控</div>
          <div class="bio-title-right"></div>
        </div>
        <div class="bio-vertical">
          <div class="bio-vertical-left">
            <div class="bio-vertical-title">
              <div class="title-left"></div>
              <div class="title-center">
                <span>视频抓取数</span>
                <strong>&nbsp;{{value1}}</strong>
              </div>
              <div class="title-right"></div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-2"></div>
              <div style="color: white; font-size: 14px">
                <p>七日抓取次数</p>
                <span><strong style="font-size: 22px; font-weight: 600">{{value2}}</strong></span>
              </div>
            </div>
            <div class="bio-vertical-content">
              <div class="content-img content-img-3"></div>
              <div style="color: white; font-size: 14px">
                <p>最近抓取时间</p>
                <span><strong style="font-size: 22px; font-weight: 600">{{(value3).slice(5,16)}}</strong></span>
              </div>
            </div>
          </div>
          <div class="bio-vertical-right" v-loading="sizhuLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, i) in sizhuList" :key="i">
                <div class="case case1" @click="open(item, 3)">
                  <div class="case-left">
                    <img :src="item.alarmPicture" width="100%" alt="">
                  </div>
                  <div class="case-right">
                    <div class="case-time">{{ item.alarmDate }}</div>
                    <div class="case-content1">
                      <span>位置：</span>
                      <span>{{item.alarmPosition}}</span>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <div class="bio-dialog" v-show="dialog" @click="dialog = false">
      <div class="dialog-content" v-if="type === 1 || type === 3">
        <img :src="selectImg" width="100%" alt="">
      </div>
      <div class="dialog-content1" v-else-if="type === 2">
        <img :src="selectImg" width="100%" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import ChartBar from "@/views/BioSafety/chart/ChartBar";
import {getCar, getRecord, getSizhu, getCarList, getPersonList, getFaceToken, getSizhuList, getHoure, getDoor} from "@/utils/api";
import axios from "axios";
import {timeDate} from "@/utils";

export default {
  name: "BioSafety",
  components: {
    swiper,
    swiperSlide,
    ChartBar
  },
  data() {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 3,
        slidesPerColumn: 1,
        slidesPerGroup: 3,
        // spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // }
      },
      carList: {
        id: 11,
        time: [],
        data: [],
        name: '',
        unit: '次'
      },
      data1: {
        id: 1,
        time: [],
        data: [],
        name: '',
        unit: '人次'
      },
      data2: {
        id: 2,
        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
        data: [21, 13, 10, 14, 20, 23, 21],
        name: '',
        unit: '人次'
      },
      data3: {
        id: 3,
        time: [],
        data: [],
        name: '',
        unit: '次'
      },
      value1: '',
      value2: '',
      value3: '',
      carListContent: [],
      dialog: false,
      selectImg: '',
      type: 1,
      personList: [],
      sizhuList: [],
      token: '',
      carLoading: true,
      carsLoading: true,
      personLoading: true,
      personChartLoading: true,
      sizhuLoading: true,
      hgLoading: true,
      enterPerson: '',
      outPerson: ''
    }
  },
  methods: {
    init() {
      var that = this;
      axios.all([
        getCar({}),
          getRecord({})
      ]).then(axios.spread(function (res1, res2){
        if(res1.code === 0) {

          that.carList.time = [];
          that.carList.data = [];
          res1.data.forEach(item => {
            that.carList.time.push(item.time);
            that.carList.data.push(item.value);
          })
          that.carsLoading = false
        }
        if(res2.code === 0) {
          that.data1.time = [];
          that.data1.data = [];
          res2.data.forEach(item => {
            that.data1.time.push(item.time);
            that.data1.data.push(item.value);
          })
          that.personChartLoading = false;
        }
      }))
      getSizhu({}).then(res => {
        if(res.code=== 0) {
          this.value1 = res.data.value2;
          this.value2 = res.data.value1;
          this.value3 = res.data.value3;
        }
      })
      // 车辆管理列表
      getCarList({pageNum:1,pageSize: 21}).then(res => {
        if(res.code == 200) {
          that.carLoading = false;
          const result = JSON.parse(res.result);
          this.carListContent = result.data.pageData;
          this.carListContent.forEach((item) => {
            item.originalPicPath = `https://36.26.62.70:447/evo-apigw/${item.originalPicPath}`;
            item.devChnName = item.devChnName.split("_")[0];
          });
          // this.carListContent = res.data;
        }
      })
      // 门禁管理列表
      let params1 = {
        openType: 61,
        pageNum:1,
        pageSize: 21,
        startSwingTime: timeDate(new Date().getTime()) + '00:00:00',
        endSwingTime: timeDate(new Date().getTime()) + '23:59:59',
      }
      getPersonList(params1).then(async res => {
          let result = JSON.parse(res.result);
          this.personList = result.data.pageData;
          const { token } = await getFaceToken();
          this.personList.forEach((item) => {
            item.channelName = item.channelName.split("人脸门禁")[0];
            item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`;
          });
          that.personLoading = false;
        let queryParams = {
          pageNum: 1,
          pageSize: 21,
          alarmStartDateString: timeDate(new Date().getTime()) + " 00:00:00",
          alarmEndDateString: timeDate(new Date().getTime()) + " 23:59:59",
          nodeCodeList: [
            "1002874$1$0$0",
            "1002875$1$0$0",
            "1002876$1$0$0",
            "1002877$1$0$0",
            "1002878$1$0$0",
            "1002879$1$0$0",
            "1002880$1$0$0",
            "1002881$1$0$0",
            "1002882$1$0$0",
            "1002883$1$0$0",
            "1002884$1$0$0",
            "1002885$1$0$0",
            "1002886$1$0$0",
            "1002887$1$0$0",
            "1002888$1$0$0",
            "1002889$1$0$0",
            "1002890$1$0$0",
            "1002891$1$0$0",
            "1002892$1$0$0",
            "1002893$1$0$0",
            "1002894$1$0$0",
            "1002895$1$0$0",
            "1002896$1$0$0",
            "1002897$1$0$0",
            "1002898$1$0$0",
            "1002899$1$0$0",
            "1002900$1$0$0",
            "1002901$1$0$0",
            "1002902$1$0$0",
            "1002903$1$0$0",
            "1002904$1$0$0",
            "1002905$1$0$0",
            "1002906$1$0$0",
            "1002907$1$0$0",
            "1002908$1$0$0",
            "1002909$1$0$0",
            "1002910$1$0$0",
            "1002911$1$0$0",
            "1002912$1$0$0",
            "1002913$1$0$0",
            "1002939$1$0$0",
            "1002939$1$0$1",
            "1002939$1$0$2",
            "1002939$1$0$3",
            "1002939$1$0$4",
            "1002939$1$0$5",
            "1002939$1$0$6",
            "1002939$1$0$7",
            "1002939$1$0$8",
            "1002939$1$0$9",
            "1002940$1$0$0",
            "1002940$1$0$1",
            "1002940$1$0$2",
            "1002940$1$0$3",
            "1002940$1$0$4",
            "1002940$1$0$5",
            "1002940$1$0$6",
            "1002940$1$0$7",
            "1002939$1$0$10",
            "1002939$1$0$11",
            "1002939$1$0$12",
            "1002939$1$0$13",
            "1002939$1$0$14",
            "1002939$1$0$15",
          ],
          deviceCategory: 1,
          alarmType: 303,
          dbType: 0,
        };
        await getSizhuList(queryParams).then( res => {
          that.sizhuLoading = false;
          const result = JSON.parse(res.result);
          this.sizhuList = result.data.pageData;
          this.sizhuList.forEach((item) => {
            item.alarmPicture = `https://36.26.62.70:447/evo-pic/${item.alarmPicture}?token=${token}&oss_addr=172.16.3.223:8925`;
          });
        })

        getHoure({}).then(res => {
          if(res.code === 10000) {
            this.data3.time = [];
            this.data3.data = [];
            res.data.forEach(item => {
              this.data3.time.push(item.time);
              this.data3.data.push(item.value);
            })
            this.hgLoading = false;
          }
        })

      })
      // 门禁违规
      getDoor({}).then(res => {
        if(res.code === 0) {
          this.enterPerson = res.data.value1;
          this.outPerson = res.data.value2;
        }
      })

    },
    // 打开img
    open(item, num) {
      this.dialog = true;
      this.type = num;
      if(num === 1) {
        this.selectImg = item.originalPicPath;
      } else if(num === 2) {
        this.selectImg = item.recordImage;
      } else {
        this.selectImg = item.alarmPicture;
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
  p{
    margin: 0;
  }
  .swiper-slide {
    height: 100px;
  }
  .bioSafety {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
  }
  .bio-flex {
    width: 100%;
    height: 560px;
    display: flex;
    justify-content: space-between;
  }
  .bio-flex-left {
    width: 770px;
    height: 100%;
    border: 1px solid rgb(121, 121, 121);
  }
  .bio-flex-center {
    width: 465px;
    height: 100%;
    border: 1px solid rgb(121, 121, 121);
  }
  .bio-title {
    width: 100%;
    height: 26px;
    display: flex;
  }
  .bio-video {
    width: 100%;
    height: 440px;
    box-sizing: border-box;
    padding: 20px;
  }
  .kuang {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/kuang.png") no-repeat;
    background-size: 100% 100%;
  }
  .bio-out {
    width: 100%;
    height: calc(100% - 440px - 40px);
    display: flex;
    justify-content: space-around;
  }
  .bio-out-center {
    width: 280px;
    height: 100%;
    background: url("../../assets/BioSafety/base.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .out-img {
    width: 54px;
    height: 54px;
    background: url("../../assets/BioSafety/u2500.svg") no-repeat;
    background-size: 100% 100%;
  }
  .bio-title-left {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1717.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-left:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bio-title-center {
    width: 120px;
    height: 26px;
    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
    color: white;
    font-size: 16px;
  }
  .bio-title-right {
    flex: 1;
    height: 26px;
    background: url("../../assets/BioSafety/u1718.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-right:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .bio-title-left-1 {
    width: 172.5px;
    height: 26px;
    background: url("../../assets/BioSafety/u1745.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-left-1:before {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bio-title-center-1 {
    width: 120px;
    height: 26px;
    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
    color: white;
    font-size: 16px;
  }
  .bio-title-right-1 {
    width: 172.5px;
    height: 26px;
    background: url("../../assets/BioSafety/u1746.svg") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .bio-title-right-1:after {
    content: '';
    height: 85%;
    border: 2px solid #66FFFF;
    position: absolute;
    top: 0;
    right: 0;
  }
  .bio-content {
    width: 100%;
    height: calc((100% - 26px) / 2);
  }
  .flex {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 10px;
  }
  .bio-content-left {
    width: 132px;
    height: 100%;
  }
  .bio-content-right {
    width: calc(100% - 142px);
    height: 100%;
    overflow: hidden;
  }
  .box {
    width: 100%;
    height: 113.5px;
    position: relative;
  }
  .circle {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background: url("../../assets/BioSafety/ciru.png") no-repeat;
    background-size: 100% 100%;
    transform: rotate(40deg);
    position: relative;
  }
  .price {
    width: 100%;
    text-align: center;
    color: #00D1E5;
    position: absolute;
    top: 35px;
  }
  .price-size {
    font-size: 18px;
  }
  .text {
    width: 100%;
    text-align: center;
    color: white;
  }
  .case {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/some.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
  }
  .bio-flex-1 {
    width: 100%;
    height: calc(100% - 580px);
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  .bio-flex-1-left {
    width: 600px;
    height: 100%;
  }
  .bio-flex-1-center {
    width: 500px;
    height: 100%;
  }
  .bio-vertical {
    width: 100%;
    height: calc(100% - 26px);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
  .bio-vertical-left {
    width: 200px;
    height: 100%;
  }
  .bio-vertical-right {
    margin-left: 10px;
    flex: 1;
  }
  .bio-vertical-title {
    width: 100%;
    height: 25px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title-left {
    width: 16px;
    height: 100%;
    background: url("../../assets/BioSafety/u2475.svg") no-repeat;
    background-size: 100% 100%;
  }
  .title-center {
    flex: 1;
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .title-center strong {
    font-size: 25px;
  }
  .title-right {
    width: 16px;
    height: 100%;
    background: url("../../assets/BioSafety/u2476.svg") no-repeat;
    background-size: 100% 100%;
  }
  .bio-vertical-content {
    width: 100%;
    height: 65px;
    background: url("../../assets/BioSafety/base.jpg") no-repeat;
    background-size: 100% 100%;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .content-img {
    width: 40px;
    height: 40px;
    background: url("../../assets/BioSafety/u3222.png") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-1 {
    background: url("../../assets/BioSafety/u2500.svg") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-2 {
    background: url("../../assets/BioSafety/u2168.svg") no-repeat;
    background-size: 100% 100%;
  }
  .content-img-3 {
    background: url("../../assets/BioSafety/u2179.svg") no-repeat;
    background-size: 100% 100%;
  }
  .case1 {
    height: 60px;
  }
  .case-left1 {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .case-left {
    width: 100px;
    height: 100%;
  }
  .case-right {
    flex: 1;
  }
  .case-time {
    width: 100%;
    height: 12px;
    box-sizing: border-box;
    line-height: 12px;
    text-align: left;
    /*text-align: center;*/
    font-size: 12px;
    color: #333
  }
  .case-box {
    width: 100%;
    height: calc(100% - 15px);
    display: flex;
    align-items: center;
  }
  .case-img {
    width: 60px;
    height: 100%;
    /*background-size: 100% 100%;*/
  }
  .case-img1 {
    width: 120px;
    height: 100%;
    /*background-size: 100% 100%;*/
  }
  .case-content {
    width: 100%;
    height: calc(100% - 14px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .case-content1 {
    width: 100%;
    height: calc(100% - 14px);
    text-align: center;
    color: white;
    line-height: 30px;
  }
  .content-grid {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-left: 10px;
    line-height: 30px;
    color: white;
  }
  .bio-dialog {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0 ,.6);
    z-index: 999;
  }
  .dialog-content {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background-color: #fff;*/
  }
  .dialog-content1 {
    width: 15%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background-color: #fff;*/
  }
</style>