<!--
 * @Author: sjl
 * @Date: 2023-04-18 16:31:23
 * @Descripttion: 
-->
<template>
  <div :class="`boxtools ${mapStore.leftSideMenu ? 'boxtools3' : 'boxtools2'}`">
    <div class="leftPanel" > 
      <img src="../../assets/images/rightshou.png"  
      :class="{ rotated: !mapStore.leftSideMenu }"
       @click=" mapStore.leftSideMenu=!mapStore.leftSideMenu" alt="" /></div>
    <ul>
      <li v-show="!addDoubleScreen"
        ><img src="../../assets/images/search.png" alt="" @click="controlModel(modelType.showSearchStatus)" srcset=""
      /></li>
      <li title="图层管理" v-show="!addDoubleScreen">
        <img src="../../assets/images/layer.png" @click="controlModel(modelType.layerStatus)" alt="" srcset="" />
      </li>
      <li v-show="!addDoubleScreen" @click="change23()" :title="mapDimensionType ? '三维场景切换' : '二维场景切换'">
        <img src="../../assets/images/3d.png" v-if="mapDimensionType" alt="" srcset="" />
        <img src="../../assets/images/2d.png" v-else alt="" srcset="" />
      </li>
      <li title="底图切换">
        <img src="../../assets/images/change.png" @click="controlModel(modelType.basemapStatus)" alt="" srcset="" />
      </li>
      <li v-show="!addDoubleScreen" title="河段定位" @click="controlModel(modelType.showDrainageStatus)"
        ><img src="../../assets/images/drainageBasin.png" alt="" srcset="" />
      </li>
      <li v-show="!addDoubleScreen" title="我的收藏" @click="controlModel(modelType.basinStatus)"
        ><img src="../../assets/images/hl2.png" alt="" srcset=""
      /></li>
      <!-- <li title="标会工具" v-if="addDoubleScreen" @click="controlModel(modelType.drawStatus)"> -->
      <li title="标绘工具" @click="controlModel(modelType.drawStatus)"> <img src="../../assets/images/地图操作1.png" alt="" srcset="" /></li>
      <!-- <li><img src="../../assets/images/add.png" alt="" srcset="" /></li> -->
    </ul>
    <!-- 地名搜索模块 -->
    <searchInfo v-show="!addDoubleScreen" @closeSeachStatus="closeSeachStatus" v-if="showSearchStatus" />
    <!-- 图层控制模块 -->
    <div class="checkbox-group" v-show="layerStatus">
      <!-- <div class="bottonList" style="margin-top: -10px; margin-left: -10px; margin-right: -10px">
        <span class="bottonListSpan" style="padding-left: 5px">图层管理</span>
        <div @click="closeLayerStatus" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
          <CloseOutlined type="delete-outlined" title="关闭" />
        </div>
      </div>
      <label v-for="(option, index) in layerList" :key="index" @click.stop="layer(option)" class="checkbox">
        <input type="checkbox" v-if="!option.title" checkbox="checked" :value="option.value" v-model="option.type" />
        <span v-if="!option.title" class="checkmark"></span>
        <span class="name2" :title="option.label">{{ option.label }}</span>
        <div v-if="!option.title" @click.stop="transparency2" class="layerControlWrapper">
          <a-slider @click.stop="transparency2" @change="transparency(option)" class="tftest" v-model:value="option.sliderValue" />
          <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ option.sliderValue }}%</span>
        </div>
      </label>
      <label>其它</label>
      <tailBaseLine /> -->
      <layerControl @closeLayerStatus="closeLayerStatus" />
    </div>
    <!-- 底图切换模块 -->
    <div class="mapControlDiv" v-show="basemapStatus">
      <mapControl @changeMapStatus="changeMapStatus" />
    </div>
    <!-- 流域信息 -->
    <showDrainage @changeDrainageStatus="changeDrainageStatus" :pageShow="showDrainageStatus" v-show="showDrainageStatus" />
    <!-- 漫游模块 -->
    <div class="checkbox-group3" v-show="basinStatus">
      <wander @changeBasinStatus="changeBasinStatus" />
    </div>
    <!-- 标会模块 -->
    <!-- <div v-show="drawStatus" v-if="addDoubleScreen"> -->
    <div v-show="drawStatus">
      <Draw @changeDrawStatus="changeDrawStatus" />
    </div>
    <!-- 图例模块 -->
    <div class="tuli" v-if="tuliType">
      <!-- <a-tabs v-model:activeKey="activeKey" class="user">
        <a-tab-pane key="1">
          <template #tab>
            <span> 灾害类型 </span>
          </template>
          <ul class="ul">
            <li v-for="item in zzbhList" :key="item.id" class="tlbox">
              <img :src="item.imgUrl" alt="图片" class="image" />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span>设备类型</span>
          </template>
          <ul class="ul">
            <li v-for="item in sbList" :key="item.id" class="tlbox">
              <img :src="item.imgUrl" alt="图片" class="image" />
              <span :title="item.name">{{ item.name }}</span>
            </li>
          </ul>
        </a-tab-pane>
      </a-tabs> -->
      <div style="padding: 5px; border-bottom: 1px solid #0b5d7c"
        ><span style="font-size: 16px">图例</span>
        <!-- <div style="margin-left: 100px">x</div> -->
        <div @click="() => (tuliType = !tuliType)" style="float: right; cursor: pointer; margin-right: 10px; color: #25c7e3">
          <CloseOutlined type="delete-outlined" title="关闭" />
        </div>
      </div>
      <div style="">
        <div>
          <div class="layerListTitle">
            <img src="/src/assets/images/tucen-show.png" class="jiushidu" v-show="!showZaihai" @click="showZaihai = !showZaihai" alt="" />
            <img src="/src/assets/images/tucen-unshow.png" class="secondimg" v-show="showZaihai" @click="showZaihai = !showZaihai" alt="" />
            灾害类型</div
          >

          <ul class="ul" v-show="showZaihai">
            <li v-for="item in zzbhList" :key="item.id" class="tlbox">
              <img style="width: 20px; height: 32px" :src="item.imgUrl" alt="图片" class="image" />
              <span>{{ item.name }}</span>
            </li>
          </ul>
          <div class="layerListTitle">
            <img src="/src/assets/images/tucen-show.png" class="jiushidu" v-show="!showDev" @click="showDev = !showDev" alt="" />
            <img src="/src/assets/images/tucen-unshow.png" class="secondimg" v-show="showDev" @click="showDev = !showDev" alt="" />
            设备类型</div
          >

          <ul class="ul" v-show="showDev">
            <li v-for="item in sbList" :key="item.id" class="tlbox">
              <img :src="item.imgUrl" alt="图片" class="image" />
              <span :title="item.name">{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div
      :title="'图例'"
      @click="() => (tuliType = !tuliType)"
      :class="`${ mapStore.leftSideMenu ? 'boxtools3' : 'boxtools2'} boxtools4`"
    >
      <img src="../../assets/images/tuli.png" alt="图例" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, defineEmits, onMounted } from 'vue';
import Draw from './Draw.vue';
import { useMapStore } from '/@/store/modules/map';
import nwj from '../../assets/images/nwj.png';
import gnss from '../../assets/images/GNSS.png';
import sscgq from '../../assets/images/sscgq.png';
import spjcq from '../../assets/images/spjcq.png';
import xcy from '../../assets/images/tuli/xcy.png';
// import hp from '../../assets/images/tuli/hp.png';
// import bcnsl from '../../assets/images/tuli/bcnsl.png';

import xb from '../../assets/images/eqp/dzd/xb.png';
import bh from '../../assets/images/eqp/dzd/bh.png';
import bcnsl from '../../assets/images/eqp/dzd/bcnsl.png';
import nsl from '../../assets/images/eqp/dzd/nsl.png';
import hp from '../../assets/images/eqp/dzd/hp.png';
import bt from '../../assets/images/eqp/dzd/bt.png';
import qzswkt from '../../assets/images/eqp/dzd/qzswkt.png';

import tailBaseLine from './TailBaseLine.vue';
import mapControl from './mapControl.vue';
import wander from './wander.vue';
import searchInfo from './searchInfo.vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import eventBus from '/@/utils/eventBus';
import showDrainage from './drainageBasin/index.vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import GNSS from '../../assets/images/eqp/list/GNSS.png';
import CSJCY from '../../assets/images/eqp/list/CSJCY.png';
import CXY from '../../assets/images/eqp/list/CXY.png';
import CZSJXJCZ from '../../assets/images/eqp/list/CZSJXJCZ.png';
import FWSYFSJCZ from '../../assets/images/eqp/list/FWSYFSJCZ.png';
import HSJC from '../../assets/images/eqp/list/HSJC.png';
import JGMCXBJCZ from '../../assets/images/eqp/list/JGMCXBJCZ.png';
import KPDZY from '../../assets/images/eqp/list/KPDZY.png';
import LDJXYLJCZ from '../../assets/images/eqp/list/LDJXYLJCZ.png';
import LFWYJZ from '../../assets/images/eqp/list/LFWYJZ.png';
import NSWJCZ from '../../assets/images/eqp/list/NSWJCZ.png';
import NWJ from '../../assets/images/eqp/list/NWJ.png';
import SBJCZ from '../../assets/images/eqp/list/SBJCZ.png';
import SMGSLJ from '../../assets/images/eqp/list/SMGSLJ.png';
import SPA from '../../assets/images/eqp/list/SPA.png';
import SPJCY from '../../assets/images/eqp/list/SPJCY.png';
import SWJCY from '../../assets/images/eqp/list/SWJCY.png';
import SWSYJCZ from '../../assets/images/eqp/list/SWSYJCZ.png';
import WZJCZ from '../../assets/images/eqp/list/WZJCZ.png';
import XS_FSWDCLZ from '../../assets/images/eqp/list/XS-FSWDCLZ.png';
import XSZ from '../../assets/images/eqp/list/XSZ.png';
import YLJCZ from '../../assets/images/eqp/list/YLJCZ.png';
import YTHXBQLJCZ from '../../assets/images/eqp/list/YTHXBQLJCZ.png';
import ZHQXZ from '../../assets/images/eqp/list/ZHQXZ.png';
import layerControl from './layerControl/index.vue';

export default defineComponent({
  name: 'ToolMenu',
  components: { tailBaseLine, mapControl, wander, CloseOutlined, searchInfo, showDrainage, Draw, layerControl },
  setup() {
    const data = reactive({
      searchValue: ref(''),
      dialogVisible: ref(false),
    });
    let showZaihai = ref(true);
    let showDev = ref(true);
    const mapDimensionType = ref(0);
    const emit = defineEmits(['map23changeEvent']);
    //二三维切换
    let view3 = true;
    let pitch_view3 = null;
    const change23 = () => {
      map.removeOverlay();
      mapDimensionType.value = !mapDimensionType.value;
      map.terrain2To3();
      setTimeout(() => eventBus.emit('map23changeEvent'), 1000);
    };
    const change23_bak = () => {
      map.removeOverlay();
      if (view3) {
        view3 = false;
        map.event.drag(() => {
          if (mapConfig.saveView3) mapConfig.saveView3 = null;
        });
      }
      mapDimensionType.value = !mapDimensionType.value;
      if (mapDimensionType.value) {
        mapConfig.saveView3 = map.getView(false);
        mapConfig.saveView4 = map.getView(false);
        var heading = mapConfig.saveView3.orientation.heading;
        var roll = mapConfig.saveView3.orientation.roll;
        pitch_view3 = mapConfig.saveView3.orientation.pitch;
        map.flyTo({
          destination: map.getCenterPoint(),
          orientation: { heading: heading, pitch: -1.5321367005794904, roll: roll },
        });
      } else {
        if (mapConfig.saveView3) {
          map.flyTo(mapConfig.saveView3);
        } else {
          var view = map.getView(false);
          var heading = view.orientation.heading;
          var roll = view.orientation.roll;
          map.flyTo({
            destination: map.getCenterPoint(),
            // orientation: { heading: heading, pitch: pitch_view3 || -0.7853981633974483, roll: roll },
            orientation: mapConfig.saveView4.orientation,
          });
        }
      }
      if (mapDimensionType.value) {
        // view3 = map.getView(false);
        // map.flyTo({
        //   destination: map.getCenterPosition(),
        //   orientation: { heading: 0, pitch: Cesium.Math.toRadians(-90.0), roll: 0 },
        // });
      } else {
        // if (view3) map.flyTo(view3);
      }
      map.showTerrain();
      // emit('map23changeEvent');
      setTimeout(() => eventBus.emit('map23changeEvent'), 2000);
    };

    const mapStore = useMapStore();
    return {
      showZaihai,
      showDev,
      mapDimensionType,
      activeKey: ref('1'),
      ...toRefs(data),
      change23,
      mapStore,
    };
  },

  data() {
    return {
      options: [
        // { label: "地形", value: "1", type: true },
        // { label: '水文气象专题', title: true, value: 'tdtjb', type: true },
        { label: '河流', value: 'hl', type: true, sliderValue: 100 },
        { label: '路网专题', title: true, value: 'tdtjb', type: true, sliderValue: 100 },
        { label: '路网', value: 'gdlw', type: true, sliderValue: 100 },
        { label: '铁路', value: 'tl', type: true, sliderValue: 100 },
        { label: '行政区专题', title: true, value: 'tdtjb', type: true, sliderValue: 100 },
        { label: '行政区划', value: 'xzqh', type: false, sliderValue: 100 },
        { label: '地质专题', title: true, value: 'tdtjb', type: true, sliderValue: 100 },
        { label: '区域地质图', value: 'zdzm', type: false, sliderValue: 100 },
        { label: '地震断裂带图', value: 'dzdmhx', type: false, sliderValue: 100 },
        // { label: '影像', value: 'tdtjb', type: true },
        // { label: '矢量', value: 'gdsl', type: false },
        // { label: '白母变形体区域', value: 'bmbxtqy', type: true },
      ],
      basemap: [
        { label: '影像', value: 'tdtjb', type: true },
        { label: '矢量', value: 'gdsl', type: false },
        // { label: '区域地质图', value: 'zdzm', type: false },
      ],
      selectedOptions: [],
      tuliType: false, //图例的显示与隐藏参数
      layerStatus: false, //图层控制的显示与隐藏参数
      basemapStatus: false, //地图切换显示与隐藏参数
      basinStatus: false, //漫游的显示与隐藏参数
      drawStatus: false, //标会工具的显隐
      showSearchStatus: false, //地点查询的显示与隐藏参数
      showDrainageStatus: false, //流域信息的显示与隐藏参数
      modelType: {
        //modelType里面的字段需要与
        showSearchStatus: 'showSearchStatus', //地点查询的显示与控制
        layerStatus: 'layerStatus', //图层管理
        basemapStatus: 'basemapStatus', //底图切换
        basinStatus: 'basinStatus', //漫游
        drawStatus: 'drawStatus',
        showDrainageStatus: 'showDrainageStatus', //流域信息
      },
      sbList: [
        { id: '1', imgUrl: GNSS, name: 'GNSS' },
        { id: '2', imgUrl: ZHQXZ, name: '综合气象站' },
        { id: '3', imgUrl: NWJ, name: '泥位计' },
        { id: '4', imgUrl: SPJCY, name: '视频监测仪' },
        { id: '5', imgUrl: WZJCZ, name: '微震监测站' },
        { id: '6', imgUrl: SWJCY, name: '水位监测仪' },
        { id: '7', imgUrl: CSJCY, name: '次声监测仪' },
        { id: '8', imgUrl: KPDZY, name: '宽频地震仪' },
        { id: '9', imgUrl: YTHXBQLJCZ, name: '一体化雪崩气浪监测站' },
        { id: '10', imgUrl: LDJXYLJCZ, name: '流动积雪压力监测站' },
        { id: '11', imgUrl: XS_FSWDCLZ, name: '雪深-风速温度测量站' },
        { id: '12', imgUrl: JGMCXBJCZ, name: '激光脉冲雪崩监测站' },
        { id: '13', imgUrl: SPA, name: '积雪特性分析（SPA）测量站' },
        { id: '14', imgUrl: FWSYFSJCZ, name: '风温湿压辐射监测站' },
        { id: '15', imgUrl: CZSJXJCZ, name: '称重式降雪监测站' },
        { id: '16', imgUrl: YLJCZ, name: '雨量监测站' },
        { id: '17', imgUrl: NSWJCZ, name: '泥水位监测站' },
        { id: '18', imgUrl: SBJCZ, name: '声波监测站' },
        { id: '19', imgUrl: LFWYJZ, name: '裂缝位移计站' },
        { id: '20', imgUrl: SWSYJCZ, name: '水位渗压监测站' },
        { id: '21', imgUrl: HSJC, name: '湖深监测' },
        { id: '22', imgUrl: CXY, name: '测斜仪' },
        { id: '23', imgUrl: SMGSLJ, name: '石墨杆收敛计' },
      ],
      zzbhList: [
        { id: 1, imgUrl: xb, name: '雪崩' },
        { id: 2, imgUrl: hp, name: '滑坡' },
        { id: 3, imgUrl: bt, name: '崩塌' },
        { id: 4, imgUrl: bh, name: '冰湖' },
        { id: 5, imgUrl: nsl, name: '泥石流' },
        { id: 6, imgUrl: bcnsl, name: '冰川泥石流' },
        { id: 7, imgUrl: qzswkt, name: '潜在失稳块体' },
        // { id: 4, imgUrl: qxz, name: '气象站' },
      ],
      layerList: [],
      addDoubleScreen: false,
    };
  },

  mounted() {
    // eventBus.on('mapConfig', (e) => this.stageLayer(e));
    eventBus.on('doubleScreenControl', () => {
      this.addDoubleScreen = !this.addDoubleScreen;
    });
    eventBus.on('closeToolMenu', (e) => {
      this.controlModel('closeAll');
    });
  },

  methods: {
    //图层控制模块使用滑动条时，阻止事件向上冒泡
    transparency2(event) {
      if (event.cancelBubble instanceof Boolean) {
        event.cancelBubble = true;
      }
      if (event.preventDefault && typeof event.preventDefault == 'function') {
        event.preventDefault();
      }
    },
    //图层控制模块中图层透明度控制
    transparency(option, key) {
      map.setLayer2D(option.value, 'alpha', option.sliderValue / 100);
    },
    //根据类型控制模块的打开与关闭
    controlModel(type) {
      for (let item in this.modelType) {
        if (this.modelType[item] != type) {
          this[item] = false;
        } else {
          this[item] = !this[item];
        }
      }
      //点击按钮时关闭时间轴，由于在不同的组件中没有使用共同的状态管理，故每次点击都去关闭
      eventBus.emit('timelineClose', false);
    },

    //图层控制、图层的显示与隐藏
    layer(e) {
      console.log(e);
      if (e.value == 1) {
      } else {
        if (!e.title) {
          if (e.value == 'hl') {
            map.showOverlay('hlgeojson*', !e.type);
          } else {
            map.showLayer2D(e.value, !e.type);
          }
        }
      }
    },
    //关闭搜索面板
    closeSeachStatus() {
      this.showSearchStatus = false;
      TFMapUitl.clearPointLocation_list(window.map);
    },
    // 关闭图层面板
    closeLayerStatus() {
      this.layerStatus = false;
    },
    // 关闭底图切换
    changeMapStatus(value) {
      this.basemapStatus = value.value;
    },
    // 关闭我的收藏
    changeBasinStatus(value) {
      this.basinStatus = value.value;
    },
    // 关闭我的收藏
    changeDrawStatus(value) {
      this.drawStatus = value.value;
    },
    // 关闭河段定位
    changeDrainageStatus(value) {
      this.showDrainageStatus = value;
    },
    //组织图层数据
    // stageLayer(e) {
    //   var e = e.sort(function (a, b) {
    //     return a.fzxh - b.fzxh;
    //   });
    //   var obj = {};
    //   e.map((i) => {
    //     if (i.fwfz) {
    //       if (obj[i.fwfz]) {
    //         obj[i.fwfz].push(i);
    //       } else {
    //         obj[i.fwfz] = [];
    //         obj[i.fwfz].push(i);
    //       }
    //     }
    //   });
    //   for (var i in obj) {
    //     this.layerList.push({ label: i, title: true });
    //     var arr = obj[i];
    //     var arr = arr.sort((a, b) => {
    //       return a.fwxh - b.fwxh;
    //     });
    //     arr.map((e) => {
    //       var type = e.id == 'hl' ? true : e.show;
    //       this.layerList.push({ label: e.title, value: e.id, type: type, sliderValue: e.tmd ? e.tmd * 100 : 100 });
    //     });
    //   }
    //   console.log('layerList:', this.layerList);
    // },
  },
});
</script>
<style lang="less" scoped>
::v-deep .ant-tabs-bar {
  border-bottom: 0px solid #303030 !important;
}
::v-deep .ant-tabs-ink-bar {
  background-color: rgba(4, 143, 231, 0) !important;
}
::v-deep .ant-tabs-nav .ant-tabs-tab-active {
  color: #fcdf64;
  background: url('../../assets/images/tulibg.png') no-repeat center 31px !important;
}
ul li.tlbox img {
  margin-right: 10px;
}
ul li.tlbox {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;
  align-items: center;
  margin-left: 12px;
}
.tuli {
  color: #fff !important;
  width: 240px;
  height: 244px;
  // background: rgba(8, 39, 55, 0.7);
  overflow: auto;
  padding: 0px;
  // position: fixed;
  margin-top: 200px;
  bottom: 180px;
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  // border: 1px solid #1778ab;

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}
.tuli:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}

.checkbox-group label {
  display: block;
  height: 26px;
  line-height: 26px;
  margin: 4px 0px;
  display: flex;
  align-items: center;
}
.checkbox-group2 label {
  display: block;
  height: 26px;
  line-height: 26px;
}
.checkbox-group {
  flex-wrap: wrap;
  color: #ffffff;
  // background-color: rgba(8, 39, 55, 0.5);
  padding: 10px;
  top: 55px;
  width: 310px;
  left: 60px;
  position: absolute;
  // border-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)) 1 100%;
  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
  //  border-image: linear-gradient(90deg, rgba(39, 209, 238, 0.3) 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 4 4 4 4 !important;
}
.checkbox-group:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}

.checkbox-group2 {
  color: #fff;
  flex-wrap: wrap;
  // background-color: rgba(8, 39, 55, 0.5);
  padding: 10px;
  top: -54px;
  left: 81px;
  position: relative;
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  // border: 1px solid #1778ab;

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}

.checkbox-group3 {
  color: #fff;
  flex-wrap: wrap;
  // background-color: rgba(8, 39, 55, 0.5);
  padding: 0px 0px 10px 0px;
  top: -54px;
  left: 61px;
  position: relative;
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}
.checkbox-group3:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}
checkbox-group .checkbox {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 16px;
  color: #fff;
}

.checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-left: 20px;
  border: 1px solid #fff;
  border-radius: 3px;
}

.checkmark:before {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.name2 {
  display: inline-block;
  width: 123px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkbox input[type='checkbox']:checked + .checkmark:before {
  display: block;
}

.checkbox input[type='checkbox']:checked + .checkmark {
  background-color: #007bff;
  border-color: #007bff;
}
.boxtools {
  position: absolute;
  z-index: 999;
  top: 6rem;
  left: 456px;
}
.boxtools2 {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes move {
  0% {
    left: 456px;
  }
  100% {
    left: 36px;
  }
}
.boxtools3 {
  animation-name: move2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;

  ::v-deep ul:hover {
    background: transparent;
  }
}
@keyframes move2 {
  0% {
    left: 36px;
  }
  100% {
    left: 456px;
  }
}
.boxtools li {
  margin: 5px 0;
}
.boxtools4 {
  position: fixed;
  z-index: 999;
  left: 456px;
  bottom: 120px;
}

::v-deep .tuli .ant-tabs-nav .ant-tabs-tab {
  width: 50%;
  text-align: center;
  margin: 0px !important;
}
.layerControlWrapper {
  width: 130px;
  display: flex;
  align-items: baseline;
  padding-left: 20px;
  margin-left: auto;
  .ant-slider.tftest {
    width: calc(100% - 55px);
  }
  span {
    position: relative;
    float: left;
    display: block;
    width: 50px;
  }
}

.bottonList {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  background: rgba(30, 84, 130, 0.3);
  .bottonListSpan {
    padding-left: 15px;
    font-size: 16px;
  }
}
.user {
  height: 100%;
  /deep/.ant-tabs-top-content.ant-tabs-content.ant-tabs-content-animated {
    height: calc(100% - 60px);
    ul {
      position: absolute;
      height: calc(100% - 70px);
      width: 99%;
      overflow-y: auto;
      li {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        overflow: hidden;
        white-space: nowrap;
        display: block;
        width: calc(100% - 40px);
        text-overflow: ellipsis;
      }
    }
  }
}

.ul::-webkit-scrollbar {
  width: 4px; /* 设置滚动条宽度 */
}

.ul::-webkit-scrollbar-track {
  /* 设置滚动条背景颜色 */
}

.ul::-webkit-scrollbar-thumb {
  background-color: #007e8f; /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}

.ul::-webkit-scrollbar-thumb:hover {
  background-color: #007e8f; /* 设置滚动条滑块在鼠标悬停时的颜色 */
}
.layerListTitle {
  display: flex;
  // background-color: aliceblue;
  line-height: 30px;
  height: 30px;
  background-image: linear-gradient(to left, rgba(0, 139, 253, 0.2), rgba(67, 255, 249, 0.2)); /* 设置背景颜色 */
  // width: 200px;
  img {
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 5px;
    width: 20px;
    height: 19px;
  }
}
.jiushidu {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.secondimg {
}
.leftPanel {
  top: 54px;
  left: -36px;
  height: 32px;
  position: absolute;
}
.rotated{
  transform: rotate(180deg);
}
</style>
