large-vue/src/views/pad/building/main.vue

<template>
  <div class="main-data data-building">
    <div class="left">
      <div class="left-cont" v-if="leftShow">
        <div class="left-top" @click="showDialog(1)" @mouseover="showDialog(1)">
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">楼宇中控</div>
          </div>
          <div class="components-itemLong">
            <energy-rate :appOrg="appOrg"></energy-rate>
          </div>
        </div>
        <!-- <div class="left-bottom" @click="showDialog(2)" @mouseover="showDialog(2)">
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">物业巡更信息</div>
          </div>
          <div class="components-item bg3">
            <building-save :key="appOrg"></building-save>
          </div>
        </div> -->
      </div>
    </div>
    <div class="middle">
      <img v-if="showMap" src="@/assets/zhang/building/building.png" width="50" style="position: absolute;top: 125px;left: 20px;cursor: pointer">
      <!-- <province v-if="showMap"
        ref="province"
        @mapClick="onMapClick"></province> -->
        <img
        v-if="showMap"
        class="build"
        src="@/assets/images/build.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 0"
        class="build"
        src="@/assets/images/layers23.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 1"
        class="build"
        src="@/assets/images/layers22.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 2"
        class="build"
        src="@/assets/images/layers21.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 3"
        class="build"
        src="@/assets/images/layers20.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 4"
        class="build"
        src="@/assets/images/layers19.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 5"
        class="build"
        src="@/assets/images/layers18.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 6"
        class="build"
        src="@/assets/images/layers17.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 7"
        class="build"
        src="@/assets/images/layers16.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 8"
        class="build"
        src="@/assets/images/layers15.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 9"
        class="build"
        src="@/assets/images/layers14.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 10"
        class="build"
        src="@/assets/images/layers13.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 11"
        class="build"
        src="@/assets/images/layers12.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 12"
        class="build"
        src="@/assets/images/layers11.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 13"
        class="build"
        src="@/assets/images/layers10.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 14"
        class="build"
        src="@/assets/images/layers9.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 15"
        class="build"
        src="@/assets/images/layers8.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 16"
        class="build"
        src="@/assets/images/layers7.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 17"
        class="build"
        src="@/assets/images/layers6.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 18"
        class="build"
        src="@/assets/images/layers5.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 19"
        class="build"
        src="@/assets/images/layers4.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 20"
        class="build"
        src="@/assets/images/layers3.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 21"
        class="build"
        src="@/assets/images/layers2.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 22"
        class="build"
        src="@/assets/images/layers1.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 23"
        class="build"
        src="@/assets/images/layers-1.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 24"
        class="build"
        src="@/assets/images/layers-2.png"
        alt=""
      />
      <img
        v-if="showLocal && curBodex == 25"
        class="build"
        src="@/assets/images/layers-3.png"
        alt=""
      />
      <!-- 楼层按钮 -->
       <div class="right-area">
           <div class="leftNav"    v-if="leftNav">
            <div
               :class="['model1', 0 == curBodex ? 'cur' : '']"
              @click="chooseBox(0, 'showMap')"
            >
              23层
            </div>
            <div
               :class="['model1', 1 == curBodex ? 'cur' : '']"
              @click="chooseBox(1, 'showLocal')"
            >
              22层
            </div>
            <div
             :class="['model1', 2 == curBodex ? 'cur' : '']"
              @click="chooseBox(2, 'showLocal')"
            >
              21层
            </div>
            <div
             :class="['model1', 3 == curBodex ? 'cur' : '']"
              @click="chooseBox(3, 'showLocal')"
            >
              20层
            </div>
            <div
              :class="['model1', 4 == curBodex ? 'cur' : '']"
              @click="chooseBox(4, 'showLocal')"
            >
              19层
            </div>
            <div
              :class="['model1', 5 == curBodex ? 'cur' : '']"
              @click="chooseBox(5, 'showLocal')"
            >
              18层
            </div>
            <div
              :class="['model1', 6 == curBodex ? 'cur' : '']"
              @click="chooseBox(6, 'showLocal')"
            >
              17层
            </div>
            <div
              :class="['model1', 7 == curBodex ? 'cur' : '']"
              @click="chooseBox(7, 'showLocal')"
            >
              16层
            </div>
            <div
              :class="['model1', 8 == curBodex ? 'cur' : '']"
              @click="chooseBox(8, 'showLocal')"
            >
              15层
            </div>
            <div
              :class="['model1', 9 == curBodex ? 'cur' : '']"
              @click="chooseBox(9, 'showLocal')"
            >
              14层
            </div>
            <div
             :class="['model1', 10 == curBodex ? 'cur' : '']"
              @click="chooseBox(10, 'showLocal')"
            >
              13层
            </div>
            <div
              :class="['model1', 11 == curBodex ? 'cur' : '']"
              @click="chooseBox(11, 'showLocal')"
            >
              12层
            </div>
            <div
             :class="['model1', 12 == curBodex ? 'cur' : '']"
              @click="chooseBox(12, 'showLocal')"
            >
              11层
            </div>
            <div
              :class="['model1', 13 == curBodex ? 'cur' : '']"
              @click="chooseBox(13, 'showLocal')"
            >
              10层
            </div>
            <div
              :class="['model1', 14 == curBodex ? 'cur' : '']"
              @click="chooseBox(14, 'showLocal')"
            >
              09层
            </div>
            <div
              :class="['model1', 15 == curBodex ? 'cur' : '']"
              @click="chooseBox(15, 'showLocal')"
            >
              08层
            </div>
            <div
             :class="['model1', 16 == curBodex ? 'cur' : '']"
              @click="chooseBox(16, 'showLocal')"
            >
              07层
            </div>
            <div
              :class="['model1', 17 == curBodex ? 'cur' : '']"
              @click="chooseBox(17, 'showLocal')"
            >
              06层
            </div>
            <div
             :class="['model1', 18 == curBodex ? 'cur' : '']"
              @click="chooseBox(18, 'showLocal')"
            >
              05层
            </div>
            <div
             :class="['model1', 19== curBodex ? 'cur' : '']"
              @click="chooseBox(19, 'showLocal')"
            >
              04层
            </div>
            <div
              :class="['model1', 20 == curBodex ? 'cur' : '']"
              @click="chooseBox(20, 'showLocal')"
            >
              03层
            </div>
            <div
             :class="['model1', 21 == curBodex ? 'cur' : '']"
              @click="chooseBox(21, 'showLocal')"
            >
              02层
            </div>
            <div
             :class="['model1',22 == curBodex ? 'cur' : '']"
              @click="chooseBox(22, 'showLocal')"
            >
              01层
            </div>
            <div
             :class="['model1', 23 == curBodex ? 'cur' : '']"
              @click="chooseBox(23, 'showLocal')"
            >
              B1层
            </div>
            <div
              :class="['model1', 24 == curBodex ? 'cur' : '']"
              @click="chooseBox(24, 'showLocal')"
            >
              B2层
            </div>
            <div
              :class="['model1', 25 == curBodex ? 'cur' : '']"
              @click="chooseBox(25, 'showLocal')"
            >
              B3层
            </div>
          </div>
       </div>
      <!-- 返回按钮 -->
      <div class="bottom-area flex-row align-items-center space-between">
        <!-- <div class="bottom-left flex-row align-items-center">
          <div class="left-item">
            <el-cascader
              v-model="curCompany"
              :options="company"
              @change="handleCompanyChange"
              placeholder="单位"
              :show-all-levels="false"
            >
            <template slot-scope="{ node, data }">
                <div style="display: flex; align-items: center">
                  <img
                    v-if="data.label == '山西省公司(本部)'"
                    src="../../../assets/images/main/tiaozhuanlouyu.png"
                    style="width: 15px; margin-right: 10px"
                  />
                  <span
                    v-else-if="data.value == '1A001' || data.value == '1A002' || data.value == '1A004' || data.value == '1A005'"
                    style="
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
                      background: rgb(255, 180, 74);
                    "
                  ></span>
                  <span
                    v-else-if="data.value.length == 5 && data.value != '10001'"
                    style="
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
                      background: rgb(74, 194, 29);
                    "
                  ></span>
                  <span
                    v-else-if="data.value.length == 7"
                    style="
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
                      background: rgb(99, 235, 255);
                    "
                  ></span>
                  <span>{{ data.label }}</span>
                </div>

              </template>

          </el-cascader>
          </div>
          <div class="office" disabled>办公区</div>
        </div> -->
        <div class="bottom-right">
          <img
            v-if="showBack"
            @click="onBack"
            src="@/assets/images/main/back.png"
            class="back"
          />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-cont" v-if="rightShow">
        <div class="right-top" @click="showDialog(5)" @mouseover="showDialog(5)">
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">办公能耗</div>
          </div>
          <div class="components-item">
            <camera-data :key="appOrg"></camera-data>
          </div>
        </div>
        <div class="right-bottom" @click="showDialog(4)" @mouseover="showDialog(4)">
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">物业巡更信息</div>
          </div>
          <div class="components-item bg3">
            <unit-monitor :key="appOrg"></unit-monitor>
          </div>
        </div>
      </div>

    </div>

    <!--弹出层-->
    <div :class="dialogType < 3 ? 'dialog':'dialog-r'" v-if="dialogShow" @click="closeDialog">
      <energy-rate-dialog v-if="dialogType === 1"  @abnormalClick="onAbnormalClick" @closeDialog="closeDialog" :appOrg="appOrg"></energy-rate-dialog>
      <building-save-dialog v-if="dialogType === 2" @closeDialog="closeDialog"></building-save-dialog>
      <camera-data-dialog v-if="dialogType === 5" @closeDialog="closeDialog"></camera-data-dialog >
      <unit-monitor-dialog v-if="dialogType === 4" @closeDialog="closeDialog"  :monitorName="monitorName"></unit-monitor-dialog>
    </div>

    <!-- 监控区域 -->
    <!-- <div v-if="showCenter" class="dialog-2">
      <div class="dialog-center">
        <monitor-live
          v-if="showType === 1"
          @closeMonitor="onCloseMonitor"
          @chooseAllMonitor="onChooseAllMonitor"
          :monitorInfo="this.monitorInfo"
        ></monitor-live>
        <monitor-live-list
          v-if="showType === 2"
          @closeMonitor="onCloseMonitor"
          @chooseMonitor="chooseMonitorBack"
          :monitorInfo="this.monitorInfo"
          :monitorName="monitorName"
        ></monitor-live-list>
      </div>
    </div> -->

    <!-- 设备列表 -->
    <div v-if="showCenter" class="dialog-2">
      <!-- 告警设备列表 -->
      <div class="dialog-center">
        <alarm-Device
          v-if="showType === 1"
          @closeFoods="onCloseFoods"
          :appOrg="appOrg"
            :power="power"
        ></alarm-Device>
        <consumption-List
        v-if="showType === 2"
          @closeFoods="onCloseFoods"
          :appOrg="appOrg"
          :power="power"
        >
        </consumption-List>
        <distribution-List
        v-if="showType === 3"
          @closeFoods="onCloseFoods"
          :appOrg="appOrg"
           :power="power"
           :customParams="customParams"
        >
        </distribution-List>
      </div>
    </div>

  </div>
</template>

<script>
import EnergyRate from "./energyRate.vue";
import BuildingSave from "./buildingSave.vue";
import CameraData from "./cameraData.vue";
import CameraDataDialog from "./cameraDataDialog.vue";
import UnitMonitor from "./unitMonitor.vue";
import Province from "../map/province.vue";
import EnergyRateDialog from "./energyRateDialog.vue";
import BuildingSaveDialog from "./buildingSaveDialog.vue";
import UnitMonitorDialog from "./unitMonitorDialog.vue";
import MonitorLiveList from "@/views/pad/building/monitorLiveList.vue";
import MonitorLive from "@/views/pad/building/monitorLive.vue";
import AlarmDevice from "./alarmDevice.vue";
import ConsumptionList from "@/views/pad/building/consumptionList.vue";
import DistributionList from "@/views/pad/building/distributionList.vue";
// 引入json数据
import company from "../data/company.json";
import EmployeeProfile from "@/views/pad/service/employeeProfile.vue";

export default {
  name: "BuildingMain",
  components: {
    EmployeeProfile,
    MonitorLive, MonitorLiveList,
    EnergyRate,
    CameraDataDialog,
    BuildingSave,
    CameraData,
    UnitMonitor,
    Province,
    EnergyRateDialog,
    BuildingSaveDialog,
    UnitMonitorDialog,
    AlarmDevice,
    ConsumptionList,
    DistributionList
  },
  props:'',
  data() {
    return {
      curBodex:30,
      leftNav:true,
      leftShow: true,
      rightShow: true,
      dialogShow: false,
      dialogType: 1,
      showMap: true,
      showLocal: false,
      appOrg:'0000',
      curDeep: 1,
      showBack: false,
      curCompany: [],
      company: company,
      showCenter:false,
      showType:0,//设备列表
      monitorInfo: {},
      monitorName: '',
      power: '', 
      customParams:''
    };
  },
  created() {
    
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
               //切换菜单
        chooseBox(index) {
      this.curBodex = index;
      this.showMap = false;
      this.showLocal = true;
      // this.leftNav=false;
      this.showBack=true
      // this.showBox = this.Boxtabs[index].tab;
    },
    showDialog(type){
      if(type < 4){
        this.leftShow = false;
        this.rightShow = true;
      }else{
        this.rightShow = false;
        this.leftShow = true;
      }
      this.dialogShow = true;
      this.dialogType = type;
    },
    closeDialog(){
      this.leftShow = true;
      this.rightShow = true;
      this.dialogShow = false;
    },

    //点击地图事件
    onMapClick(e) {
      this.curDeep = e.deep;
      if (e.deep > 1) {
        this.showBack = true;
      } else {
        this.showBack = false;
      }
      //点击山西省本部
      if (e.name == "山西省公司(本部)") {
        this.showMap = false;
        this.showLocal = true;
        this.curCompany = ["10001", "10001"];
        this.appOrg = "10001";
      } else {
        this.showMap = true;
        this.showLocal = false;
        this.curCompany = e.curCompany;
      }
      //判断是否点击了子单位
      if(e.curCompany && e.curCompany.length > 0){
        let appOrg = e.curCompany[e.curCompany.length - 1];
        this.appOrg = appOrg;
      }
      this.monitorName = e.name;
    },

    //返回操作
    onBack() {
      this.showBack = false;
      this.showMap = true;
      this.showLocal = false;
      // this.leftNav=true;
      this.curBodex=30
      // this.curDeep = 1;
      // if (this.curDeep <= 1) {
      //   this.showBack = false;
      //   this.showMap = true;
      //   this.showLocal = false;
      //   this.curCompany = [];
      // }
      // this.appOrg = '0000';
      // this.monitorName = "";
      // this.$refs.province.reloadMap(this.curDeep);
    },

    //选择公司
    handleCompanyChange(e) {
      console.log(e,"====");
      if (e && e.length > 0) {
        if (e[1] == "10001") {
          this.showMap = false;
          this.showLocal = true;
          this.showBack = true;
        } else {
          this.showMap = true;
          this.showLocal = false;
        }
        let appOrg = e[e.length - 1];
        this.appOrg = appOrg;
      }
      if(e[0] == "10001" && e[1] == "1A001"){
        this.monitorName = "营销服务中心";
      }
      if(e[1] == "1A001" || e[1] == "1A002" || e[1] == "1A004" || e[1] == "1A005"){
        this.showMap = true;
        this.showLocal = false;
        this.showBack = true;
        // return;
      }
      this.$refs.province.chooseUnit(e);
    },

    //点击列表
    onAbnormalClick(e,f,g) {
        this.power=f
        this.customParams=g
      this.showCenter = true;
      if (e === 0) {
        this.showType = 1;
      } else if(e === 1){
        this.showType = 2;
      }else{
        this.showType = 3;
      }

    },
    //关闭列表
    onCloseFoods() {
      this.showCenter = false;
    },

    //关闭监控视频
    // onCloseMonitor(){
    //   this.showCenter = false;
    //   this.showType = 0;
    // },

    //显示列表
    // onChooseAllMonitor(){
    //   this.showType = 2;
    // },

    //选择视频列表
    // chooseMonitorBack(data){
    //   this.showCenter = true;
    //   this.showType = 1;
    //   this.monitorInfo = data;
    // },
  },
};
</script>

<style lang="scss">
.el-popper {
  border: 1px solid #00ffff;
  .el-cascader-node:hover,
  .el-cascader-node:visited {
    background: #15696b !important;
  }
  .el-cascader-menu {
    background: #15696b !important;
    color: #fff !important;
    border-right: solid 1px #00ffff !important;
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-selectable.in-checked-path,
  .el-cascader-node.is-active {
    color: #00ffff;
  }
  .el-cascader-node__label {
    font-size: 12px;
  }
  .el-cascader-node {
    padding: 0 20px 0 0 !important;
  }
  .el-cascader-node__prefix {
    display: none !important;
  }
}
.components-itemLong {
  width: 550px;
  height: 920px;
      background: url("../../../assets/images/main/components_long_bg.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 28px;
      margin-left: 15px;
      overflow: hidden;
    }
 .components-itemLong .bg4{
      background: url("../../../assets/images/main/components_long_bg.png") no-repeat;
    }
.data-building {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  // background-image: url("../../../assets/images/building_guarantee/bg.png");
  // background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    margin: 125px 0 0 40px;
    width: 580px;

    .left-cont{
      width: 100%;
      height: 1000px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: 100% 100%;
    }

    .components-item {
      width: 550px;
      height:428px;
      background: url("../../../assets/images/main/components_mid_bg.png") no-repeat;
      background-size: cover;
      margin-bottom: 28px;
      margin-left: 15px;
      overflow: hidden;
      background-size: 100% 100%;
    }
    .components-item.bg3{
      
      background: url("../../../assets/images/main/components_mid_bg2.png") no-repeat;
    }

    .left-top {
      //width: 550px;
      //height: 444px;
      //background: url("../../../assets/images/service_new/left_top_2.png") no-repeat;
      //background-size: cover;
      //margin-bottom: 21px;
    }
    .left-bottom {
      //width: 550px;
      //height: 444px;
      //background: url("../../../assets/images/service_new/left_top_2.png") no-repeat;
      //background-size: cover;
    }
  }
  .middle{
    display: flex;
    flex: 1;
    // align-items: center;
    justify-content: center;
    padding: 125px 0 0 0px;
    position: relative;
    .right-area {
      position: absolute;
      right: 10px;
      // top: 50px;
      z-index: 10;
      .leftNav{

             margin: 10px 0px 0px 15px;
       .model1 {
          width: 65px;
          height: 32px;
          margin-bottom: 6px;
          line-height: 25px;
          text-align: center;
          font-family: "PingFangSc";
          font-size: 13px;
          font-weight: bold;
           background: url("../../../assets/images/main/choose_short_small.png") no-repeat;
         // background-size: 95% 95%;
          color: #CED6D6;
          cursor: pointer;
        }
        .model:last-child {
          margin-right: 0;
        }
        .cur {
          color: #05FEFE;
          //  background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
        }
  }
    }

    .bottom-area {
      position: absolute;
      right: 50px;
      //left: 50px;
      bottom: 50px;
      z-index: 10;
      .bottom-left {
        .left-item {
          width: 180px;
          height: 30px;
          background: url("../../../assets/images/main/choose_bg_long.png")
            no-repeat;
          background-size: cover;
          input {
            background: rgba(255, 255, 255, 0);
            border: none;
            color: #00ffff;
          }
          .el-input__icon {
            color: #00ffff;
          }
        }
        .office {
          margin-left: 10px;
          width: 180px;
          height: 30px;
          line-height: 30px;
          padding-left: 15px;
          color: #898989;
          background: url("../../../assets/images/main/choose_bg_long.png")
            no-repeat;
          background-size: cover;
          font-size: 14px;
        }
      }

      .bottom-right {
        margin-right: 50px;
        .back {
          width: 34px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
  }
  .build {
    margin: 0 auto;
    width: 90%;
    height: auto;
    object-fit: contain;
  }

  .right {
    margin: 125px 40px 0 0px;
    width: 580px;

    .right-cont {
      width: 100%;
      height: 1000px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: 100% 100%;
    }
    .components-item {
      width: 550px;
      height: 428px;
      background: url("../../../assets/images/main/components_mid_bg.png") no-repeat;
      background-size: cover;
      margin-bottom: 28px;
      margin-left: 15px;
      overflow: hidden;
      background-size: 100% 100%;
    }
    .components-item.bg3{
      background: url("../../../assets/images/main/components_mid_bg2.png") no-repeat;
    }


    .right-top {
      //width: 550px;
      //height: 444px;
      //background: url("../../../assets/images/service_new/left_top_2.png") no-repeat;
      //background-size: cover;
      //margin-bottom: 21px;
    }
    .right-bottom {
      //width: 550px;
      //height: 444px;
      //background: url("../../../assets/images/service_new/left_top_2.png") no-repeat;
      //background-size: cover;
    }
  }

  .dialog{
    position: fixed;
    top:125px;
    left:40px;
    z-index:10;
    width:100%;
    
  }
  .dialog-r{
    position: fixed;
    top:125px;
    right:40px;
    z-index:10;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    
  }

  .dialog-2 {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
  }

  .cont-title-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
    img {
      width: 284px;
      height: 32px;
    }
    .cont-title {
      font-size: 20px;
      font-weight: 900;
      font-family: "PingFangSC";
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -5px;
      color: #fff;
    }
  }

  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }
}
</style>