<template>
  <!-- 海绵综合一张图首页 -->
  <div class="hmMainPage">
    <!-- 地图 -->
    <!-- <GisMapMF v-show="menuIndex != 3"></GisMapMF> -->
    <gisMapBox
      :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"
      @map-click="mapClick"
      @map-moveOn="moveOn"
      @map-moveLeave="moveLeave"
    ></gisMapBox>

    <!-- 图例 -->
    <Legend
      :showLegend="showLegend"
      :class="['animate__animated', showPanel ? 'animate__fadeInUp left30' : 'animate__fadeInUp left480']"
    ></Legend>

    <!-- 地图图层遮罩 -->
    <img src="@/assets/newImgs/HMScreen/mapBg.png" alt="" title="地图图层遮罩" class="mapBgZZ" v-if="!showPanel" />

    <!-- 地图标注点弹窗popup -->
    <PopupInfo></PopupInfo>

    <!-- 控制面板按钮 -->
    <div :class="['controlHM', showPanel ? 'right30' : 'right480']">
      <img src="@/assets/newImgs/HMScreen/pipe3D.png" alt="" title="三维管网" @click="controlPipe3D" />
      <img src="@/assets/newImgs/HMScreen/iconLegend.png" alt="" title="图例控制" @click="controlLegend" />
      <img src="@/assets/newImgs/HMScreen/iconPane.png" alt="" title="展开收起" @click="controlPanel" />
    </div>

    <!-- 项目类型色块 -->
    <div :class="['projectPart', showPanel ? 'right80' : 'right520']" v-if="menuIndex == 2">
      <div class="part">
        <div class="color1"></div>
        海绵建筑与社区
      </div>
      <div class="part">
        <div class="color2"></div>
        海绵型道路广场
      </div>
      <div class="part">
        <div class="color3"></div>
        海绵型公园绿地
      </div>
      <div class="part">
        <div class="color4"></div>
        海绵型水系
      </div>
      <div class="part">
        <div class="color5"></div>
        管网排查与修复
      </div>
      <div class="part">
        <div class="color6"></div>
        管网及泵站
      </div>
    </div>

    <!-- 项目分区建议 -->
    <el-dialog v-model="showProjectArea" title="项目分区建议" style="width: 850px" append-to-body>
      <ProjectArea :areaObj="areaObj"></ProjectArea>
    </el-dialog>

    <!-- 下垫面统计的图例说明 -->
    <div class="landAreaC" v-if="menuIndex == 1 && showLandXDM">
      <div class="cont flex" v-for="(item, index) in landArr" :key="index">
        <span :style="{ background: item.color }"></span>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>

    <!-- 内容-头部 -->
    <!-- 头部光动效 -->
    <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="headLightDX" />
    <div class="headHM flex">
      <img src="@/assets/newImgs/HMScreen/main.png" alt="" title="跳转业务系统" class="mainYW" @click="goSystem" />
      <div class="title">***海绵城市综合一张图</div>
      <div class="menuBtn">
        <p
          v-for="item in menuList"
          :key="item.id"
          :class="['btnPart', menuIndex == item.id ? 'btnActive' : '']"
          @click="menuClick(item.id)"
        >
          {{ item.name }}
        </p>
      </div>

      <div class="weather flex">
        <el-select clearable v-model="stationCode" placeholder="全局搜索站点名称" class="stationSel" @change="selectPointByName">
          <el-option v-for="item in stationList" :key="item.stationCode" :label="item.siteName" :value="item.siteName" />
        </el-select>
        <p class="weathers">{{ weatherInfo.text }} {{ weatherInfo.temp }}℃</p>
        <p class="date">{{ dateNow }}</p>
      </div>
    </div>

    <!-- 内容-内容切换区 -->
    <div class="contHM">
      <City v-if="menuIndex == 1" :showPanel="showPanel"></City>
      <ProjectHM v-if="menuIndex == 2" :showPanel="showPanel"></ProjectHM>
      <EvaluationKH v-if="menuIndex == 3" :showPanel="showPanel"></EvaluationKH>
      <WaterFlood v-if="menuIndex == 4" :showPanel="showPanel"></WaterFlood>
      <LongYW v-if="menuIndex == 5" :showPanel="showPanel"></LongYW>
    </div>

    <!-- 底部装饰 -->
    <div class="bottomHM"></div>
    <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXL" />
    <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />

    <!-- 三维管网弹窗 -->
    <el-dialog v-model="showPipe3D" title="三维管网" style="width: 1850px; height: 900px" append-to-body>
      <GisMapMF style="position: relative"></GisMapMF>
    </el-dialog>

    <!-- 降雨效果 -->
    <CanvasRain v-if="showRainFlow"></CanvasRain>

    <!-- 典型项目效果 -->
    <el-dialog
      v-model="showProjectDX"
      title="典型项目分析（汴京路（公园路-工农路）排水管网及道路海绵化改造项目）"
      style="width: 1650px"
      append-to-body
    >
      <ProjectFX :projectParams="projectParams" v-if="showProjectDX"></ProjectFX>
    </el-dialog>

    <!-- 典型项目设施效果 -->
    <el-dialog v-model="showProjectSSDX" title="典型项目设施分析" style="width: 1430px" append-to-body>
      <ProjectSSDX :projectParams="projectParamsSS" v-if="showProjectSSDX"></ProjectSSDX>
    </el-dialog>

    <!-- 18个内涝积水点弹窗 -->
    <el-dialog v-model="showJSD" :title="titleJSD" style="width: 900px" append-to-body>
      <WaterLogging18 :detailJSD="detailJSD" v-if="showJSD"></WaterLogging18>
    </el-dialog>

    <!-- 泵站运行工况图 -->
    <el-dialog v-model="dialogShow" title="泵站工况图" width="1500px" append-to-body>
      <!-- 雨水、污水泵站 -->
      <PumpProcess v-if="dialogShow && (pumpObj.type == 'YSBZ' || pumpObj.type == 'WSBZ')" :pumpObj="pumpObj"></PumpProcess>
      <!-- 合流泵站 -->
      <PumpProcessHL v-if="dialogShow && pumpObj.type == 'combineBengZhan'" :pumpObj="pumpObj"></PumpProcessHL>
    </el-dialog>

    <!-- 污水处理厂工艺图 -->
    <el-dialog v-model="showWSC" :title="wscTitle + '实时数据'" width="1050px" append-to-body>
      <WscMonitor v-if="showWSC" :wscObj="wscObj"></WscMonitor>
    </el-dialog>

    <!-- 管网监测点详情 -->
    <el-dialog v-model="showPipe" title="管网监测详情" width="1000px" append-to-body>
      <PipeDetail v-if="showPipe" :pipeParams="pipeParams"></PipeDetail>
    </el-dialog>
  </div>
</template>

<script setup>
import WscMonitor from '@/views/sponeScreen/waterFlood/wscMonitor.vue'; //污水处理厂工艺图
import PipeDetail from '@/views/sponeScreen/waterFlood/pipeDetail.vue'; //管网监测点详情
import PumpProcess from '@/views/sponeScreen/waterFlood/pumpProcess.vue'; //雨污水泵站运行工况图
import PumpProcessHL from '@/views/sponeScreen/waterFlood/pumpProcessHL.vue'; //合流泵站运行工况图
import WaterLogging18 from '@/views/sponeScreen/waterFlood/waterLogging18.vue'; //18个内涝积水点弹窗
import ProjectFX from '@/views/sponeScreen/projectHM/projectFX.vue'; //典型项目分析
import ProjectSSDX from '@/views/sponeScreen/projectHM/projectSSDX.vue'; //典型项目设施分析
import ProjectArea from '@/views/sponeScreen/projectHM/projectArea.vue'; //分区建议
import gisMapBox from '@/views/gisMapPage/gisMapBox1.vue';
import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
import Legend from '@/views/sponeScreen/gisMF/legendKF.vue';
import PopupInfo from '@/views/sponeScreen/gisMF/cesiumPopup.vue'; //地图标注点弹窗
import bus from '@/bus';
import City from '@/views/sponeScreen/cityGK/index.vue'; //城市概况
import ProjectHM from '@/views/sponeScreen/projectHM/index.vue'; //项目建设
import EvaluationKH from '@/views/sponeScreen/evaluationKH/index.vue'; //考核评估
import WaterFlood from '@/views/sponeScreen/waterFlood/index.vue'; //排水防涝
import LongYW from '@/views/sponeScreen/longYW/index.vue'; //长效运维
import CanvasRain from '@/views/sponeScreen/cityGK/canvasRain.vue'; //降雨效果
import axios from 'axios';
import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import { onBeforeUnmount } from 'vue';
import { artificialSiteSearch } from '@/api/floodSys/floodStation.js';
import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js';
import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png';
import sewageBenZhan_icon from '@/assets/cesiumMap/legendIcon/sewageBenZhan_icon.png';
import rainBengZhan_icon from '@/assets/cesiumMap/legendIcon/rainBengZhan_icon.png';
import combineBengZhan_icon from '@/assets/cesiumMap/legendIcon/combineBengZhan_icon.png';
import waterCourse_icon from '@/assets/cesiumMap/legendIcon/combineBengZhan_icon.png';
import sewageFactory_icon from '@/assets/cesiumMap/legendIcon/sewageFactory_icon.png';
import pipeMonitor_icon from '@/assets/cesiumMap/legendIcon/pipeMonitor_icon.png';
import usePermissionStore from '@/store/modules/permission';

const permissionStore = usePermissionStore();
const { proxy } = getCurrentInstance();
const dialogShow = ref(false);
const pumpObj = ref({});
const showPipe = ref(false);
const showWSC = ref(false);
const wscObj = ref({});
const wscTitle = ref('污水处理厂');
const pipeParams = ref({});
const projectParams = ref({});
const projectParamsSS = ref({});
const router = useRouter();
const weatherInfo = ref({});
const stationList = ref([]);
const stationCode = ref('');
const dateNow = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
const showRainFlow = ref(false);
const showProjectArea = ref(false);
const menuList = ref([
  { name: '城市概况', id: 1 },
  { name: '项目建设', id: 2 },
  { name: '考核评估', id: 3 },
  { name: '排水防涝', id: 4 },
  { name: '长效运维', id: 5 },
]);
const menuIndex = ref(1);
const showPanel = ref(false);
const showLegend = ref(false);
const showPipe3D = ref(false);
const showLandXDM = ref(false); //下垫面控制
const showProjectSSDX = ref(false);
const showProjectDX = ref(false);
const areaObj = ref({ value: '0' });
const pointSourceData = ref({});
const detailJSD = ref({});
const showJSD = ref(false);
const titleJSD = ref('');
// 下垫面统计
const landArr = ref([
  { title: '水田', color: '#f8d072' },
  { title: '旱地', color: '#ffffc8' },
  { title: '公园与绿地', color: '#81c35d' },
  { title: '城镇住宅用地', color: '#f06e7d' },
  { title: '公用设施用地', color: '#ffaac8' },
  { title: '特殊用地', color: '#e77844' },
  { title: '乔木林地', color: '#32963c' },
  { title: '其他草地', color: '#b7dca0' },
  { title: '河流水面', color: '#a3d6f5' },
]);

// 跳转业务系统
function goSystem() {
  // 动态获取路由返回子菜单
  let arrs = [];
  permissionStore.sidebarRouters.map(item => {
    if (!!!item.meta) return;
    arrs.push({
      title: item.meta.title,
      name: item.name,
    });
  });
  localStorage.setItem('routerPartKFC', arrs[1].name); //默认加载第一个菜单
  router.push({ path: '/index' });
}

// 三维管网点击
function controlPipe3D() {
  showPipe3D.value = true;
}

// 菜单跳转
function menuClick(id) {
  menuIndex.value = id;
  showPanel.value = false;
  // 设置监测站点是否取历史数据
  if (id == 2) {
    localStorage.setItem('showHistoryMonitor', '1');
  } else {
    localStorage.setItem('showHistoryMonitor', '2');
  }
  newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
  bus.emit('closeCesiumPopup'); //取消弹窗
}
// 图例控制
function controlLegend() {
  showLegend.value = !showLegend.value;
}
// 展开收起
function controlPanel() {
  showPanel.value = !showPanel.value;
  if (showPanel.value) {
    showLegend.value = false;
  }
}
//获取所有站点
const getAllStationInfo = async () => {
  let res = await artificialSiteSearch();
  if (res && res.code == 200) {
    stationList.value = res.data;
  }
};
// 获取天气信息
const getWeather = () => {
  axios
    .get(`https://gfapi.mlogcn.com/weather/v001/now?key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&areacode=101180801`)
    .then(res => {
      weatherInfo.value = res.data.result.realtime;
    })
    .catch(error => {});
};
//地图点击
const mapClick = (point, properties) => {
  console.log('地图点击---', properties);
  newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']);
  // 管网监测点
  if (properties.type == 'pipeMonitor' || properties.type == 'origine') {
    pipeParams.value = properties;
    showPipe.value = true;
  }
  // 海绵设施
  if (properties.type == 'spongeFacility') {
    bus.emit('checkSSFX', properties);
  }
  if (
    properties.siteType == 'rain' ||
    properties.type == 'waterCourse' ||
    properties.type == 'YSBZ' ||
    properties.type == 'WSBZ' ||
    properties.type == 'combineBengZhan' ||
    properties.type == 'sewageFactory' ||
    properties.type == 'waterLoging'
  ) {
    bus.emit('popupcontent', {
      popupShow: true,
      point: point,
      popupInfo: properties,
    });
  }
};
//鼠标移入
const moveOn = (point, properties) => {
  // console.log('鼠标移入--', properties);
  // 雨水泵站收水范围
  if (properties.type == 'YSBZ' && properties.geometrys) {
    let geometrysToMap = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometrys), properties)]);
    newfiberMapBoxVectorLayer.addGeojsonPolygon('bengzhan_Area', geometrysToMap);
  }
};
//鼠标移出
const moveLeave = (point, properties) => {
  // console.log('鼠标移出--', properties);
  if (properties.type == 'YSBZ' && properties.geometrys) {
    newfiberMapBoxVectorLayer.removeByIds(['bengzhan_Area']); //清除泵站范围
  }
};
//获取所有站点列表
const getAllPointDataList = async () => {
  let res = await realtimeRainfallStatistics({ monitorTargetType: 'rainfall', orderBy: 'tt desc' });
  let features = [];
  if (res && res.code == 200) {
    let rainData = res.data;
    rainData.forEach(element => {
      let lonlat = element.lonLat.split(',').map(Number);
      element.name = element.stName;
      let rainFeature = turf.point(lonlat, element);
      features.push(rainFeature);
    });
  }
  pointSourceData.value = newfiberMapbox.map.getSource('point')._data;
  pointSourceData.value.features = pointSourceData.value.features.concat(features);
};
//全局搜索站点
const selectPointByName = () => {
  newfiberMapBoxVectorLayer.removeByIds(['selectedPoint']);
  if (newfiberMapbox.map.hasImage('selectedPoint')) {
    newfiberMapbox.map.removeImage('selectedPoint');
  }
  let icon;
  let selectedPointGeojson = {
    type: 'FeatureCollection',
    features: pointSourceData.value.features.filter(feature => feature.properties.name == stationCode.value),
  };
  if (selectedPointGeojson.features[0].properties.type && selectedPointGeojson.features[0].properties.type == 'YSBZ') {
    icon = rainBengZhan_icon; //雨水泵站
  } else if (selectedPointGeojson.features[0].properties.type && selectedPointGeojson.features[0].properties.type == 'WSBZ') {
    icon = sewageBenZhan_icon; //污水泵站
  } else if (selectedPointGeojson.features[0].properties.type && selectedPointGeojson.features[0].properties.type == 'combineBengZhan') {
    icon = combineBengZhan_icon; //合流泵站
  } else if (selectedPointGeojson.features[0].properties.type && selectedPointGeojson.features[0].properties.type == 'sewageFactory') {
    icon = sewageFactory_icon; //污水处理厂
  } else if (selectedPointGeojson.features[0].properties.type && selectedPointGeojson.features[0].properties.type == 'waterCourse') {
    icon = waterCourse_icon; //河道
  } else if (selectedPointGeojson.features[0].properties.type && selectedPointGeojson.features[0].properties.type == 'pipeMonitor') {
    icon = pipeMonitor_icon; //管网监测
  } else if (selectedPointGeojson.features[0].properties.siteType && selectedPointGeojson.features[0].properties.siteType == 'rain') {
    icon = rainStation_icon;
  }
  newfiberMapBoxVectorLayer.addGeojsonSymbol('selectedPoint', selectedPointGeojson, icon);
  newfiberMapbox.map.easeTo({
    center: selectedPointGeojson.features[0].geometry.coordinates,
    zoom: 15,
  });
};

onMounted(() => {
  localStorage.setItem('showHistoryMonitor', '2');
  getWeather();
  getAllStationInfo();
  let initeMapTimer = setInterval(() => {
    if (!newfiberMapbox) return;
    if (!newfiberMapbox.map.getLayer('point')) return;
    getAllPointDataList();
    newfiberMapbox.map.on('click', 'selectedPoint', e => {
      console.log(e);
      const feature = (
        newfiberMapbox.map.queryRenderedFeatures([
          [e.point.x - 10 / 2, e.point.y - 10 / 2],
          [e.point.x + 10 / 2, e.point.y + 10 / 2],
        ]) || []
      ).filter(i => i.layer.id)[0];
      console.log('feature---', feature);
      bus.emit('popupcontent', {
        popupShow: true,
        point: [e.lngLat.lng, e.lngLat.lat],
        popupInfo: feature.properties,
      });
    });
    clearInterval(initeMapTimer);
  }, 100);

  // 获取项目片区点击
  bus.on('checkProjectArea', params => {
    areaObj.value = params;
    showProjectArea.value = true;
  });
  // 降雨特征点击
  bus.on('checkRainL', params => {
    if (params == 1) {
      showRainFlow.value = false;
    } else {
      showRainFlow.value = true;
    }
  });
  // 下垫面图例控制
  bus.on('checkLandXDM', params => {
    showLandXDM.value = params;
  });
  // 典型项目分析
  bus.on('checkProjectFX', params => {
    projectParams.value = params;
    showProjectDX.value = true;
  });
  // 典型项目设施分析
  bus.on('checkSSFX', params => {
    projectParamsSS.value = params;
    showProjectSSDX.value = true;
  });
  // 内涝积水点点击
  bus.on('waterLogging18', params => {
    detailJSD.value = params;
    titleJSD.value = (params.name || '') + ' 水位监测';
    showJSD.value = true;
  });
  // 泵站工况图
  bus.on('checkBZGYT', params => {
    pumpObj.value = params;
    dialogShow.value = true;
  });
  // 污水厂工况图
  bus.on('checkWSCGYT', params => {
    wscTitle.value = params.sewageName || '污水处理厂';
    wscObj.value = params;
    showWSC.value = true;
  });
});
onBeforeUnmount(() => {
  bus.off('checkProjectArea');
  bus.off('checkProjectFX');
  bus.off('checkRainL');
  bus.off('checkLandXDM');
  bus.off('checkSSFX');
  bus.off('checkBZGYT');
  bus.off('checkWSCGYT');
  if (!newfiberMap) return;
  if (newfiberMap) {
    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
    newfiberMap.getMap().imageryLayers.removeAll();
    newfiberMap.getMap().entities.removeAll();
    newfiberMap.getMap().scene.primitives.removeAll();
    newfiberMap.getMap().destroy();
    if (_originalGLContext) {
      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
      _originalGLContext = null;
    }
    newfiberMap.baseMap.map = null;
    newfiberMap = null;
  }
});
</script>

<style lang="scss">
.hmMainPage {
  width: 100%;
  height: 100%;
  background: #010e22;
  position: relative;
  .headLightDX {
    position: absolute;
    top: 38px;
    z-index: 200;
    width: 215px;
    height: 39px;
    pointer-events: none;
    animation: headDX 3s infinite linear;
    @keyframes headDX {
      0% {
        left: 215px;
      }
      100% {
        left: 100%;
      }
    }
  }
  .mapBgZZ {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
    pointer-events: none;
  }
  .headHM {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 1920px;
    height: 100px;
    background: url('@/assets/newImgs/HMScreen/headBg.png') no-repeat;
    background-size: 100% 100%;
    .weather {
      height: 58px;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
      padding-right: 40px;
      .weathers {
        margin: 0px 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        border-right: 3px solid rgba(170, 206, 255, 0.2);
        padding-right: 20px;
      }
      .date {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #b8ecff;
      }
    }
    .mainYW {
      width: 50px;
      height: 44px;
      cursor: pointer;
      margin: 5px 10px 0px 30px;
    }
    .title {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 35px;
      letter-spacing: 10px;
      color: #ffffff;
      text-shadow: 3px 3px 5px rgba(0, 40, 86, 0.47);
      margin-top: 5px;
    }
    .menuBtn {
      display: flex;
      margin-left: 20px;
      .btnPart {
        width: 136px;
        height: 36px;
        background: url('@/assets/newImgs/HMScreen/btnBg.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 36px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 22px;
        color: #c9dfff;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 10px;
        &:hover {
          color: #f7faff;
          opacity: 1;
        }
      }
      .btnActive {
        background: url('@/assets/newImgs/HMScreen/btnActive.png') no-repeat;
        background-size: 100% 100%;
        color: #f7faff;
        opacity: 1;
      }
    }
  }
  .contHM {
    position: relative;
    top: 100px;
    left: 0px;
    z-index: 220;
  }
  .left30 {
    left: 30px;
  }
  .left480 {
    left: 480px;
  }
  .right30 {
    right: 30px;
  }
  .right480 {
    right: 480px;
  }
  .right80 {
    right: 80px;
  }
  .right520 {
    right: 520px;
  }
  .controlHM {
    position: absolute;
    bottom: 50px;
    z-index: 220;
    width: 32px;
    img {
      width: 32px;
      height: 32px;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .projectArea {
    width: 200px;
    position: absolute;
    z-index: 220;
    bottom: 240px;
    background: #004565;
    opacity: 0.9;
    padding: 0px 8px;
    border-radius: 5px;
    color: #b8ecff;
  }
  .landAreaC {
    position: absolute;
    left: 480px;
    bottom: 65px;
    z-index: 220;
    background: #004565;
    padding: 5px 10px;
    border-radius: 5px;
    .cont {
      align-items: center;
      font-size: 14px;
      span {
        width: 22px;
        height: 12px;
        display: inline-block;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
  }
  .projectPart {
    width: 160px;
    position: absolute;
    z-index: 220;
    bottom: 60px;
    background: #004565;
    opacity: 0.9;
    padding: 10px;
    border-radius: 5px;
    .part {
      display: flex;
      align-items: center;
      margin-top: 5px;
      color: #b8ecff;
      div {
        width: 22px;
        height: 12px;
        margin-right: 5px;
        border-radius: 5px;
      }
      .color1 {
        background: #b673ff;
      }
      .color2 {
        background: #ffb153;
      }
      .color3 {
        background: #07b720;
      }
      .color4 {
        background: #5aa9ff;
      }
      .color5 {
        background: #ea6638;
      }
      .color6 {
        background: #15e6e4;
      }
    }
  }
  .bottomHM {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 180;
    width: 1920px;
    height: 100px;
    background: url('@/assets/newImgs/HMScreen/bottom_img .png') no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  .bottomLightDXL,
  .bottomLightDXR {
    position: absolute;
    bottom: -2px;
    z-index: 200;
    width: 215px;
    height: 39px;
  }
  .bottomLightDXL {
    left: 50%;
    animation: bottomDXL 3s infinite ease-in-out;
    @keyframes bottomDXL {
      0% {
        left: 50%;
      }
      100% {
        left: 95%;
      }
    }
  }
  .bottomLightDXR {
    right: 50%;
    transform: rotate(180deg);
    animation: bottomDXR 3s infinite ease-in-out;
    @keyframes bottomDXR {
      0% {
        right: 50%;
      }
      100% {
        right: 95%;
      }
    }
  }
}
</style>