Project_yhfu/src/components/vBottomMenu.vue

<template>
  <div class="btm-box">
    <img class="light" src="../assets/images/integrated/btm-light.png"/>

    <div class="btm-left" :class="btmTipIndent">
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c1"></div>
        新上报
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c2"></div>
        催办
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c3"></div>
        已签收
      </div>
      <!-- div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c4"></div>
        联动
      </div> -->
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c5"></div>
        办结
      </div>
      <div class="btm-left-tip">
        <div class="btm-left-block btm-left-state-c6"></div>
        归档
      </div>
      <div class="btm-legend" @click="btmIndent">
        <span>图例</span>
        <i class="el-icon-caret-right" v-if="this.btmTipIndent !== 'btm-tip-to-right'"></i>
        <i class="el-icon-caret-left" v-if="this.btmTipIndent == 'btm-tip-to-right'"></i>
      </div>
    </div>
    <div class="bottom-menu-normal">
      <div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con"
           @click.stop="showDialog(fastMenu.click)">
        <a><i :class="fastMenu.icon"></i>{{ fastMenu.name }}
          <div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
            <el-button type="primary"
                       @click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo',true)"
                       class="nav-child-btn" plain>铁东
            </el-button>
            <el-button type="primary"
                       @click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo',true)"
                       class="nav-child-btn" plain>铁西
            </el-button>
            <!-- 	<el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                        @click.stop="closeChild"></el-button> -->
          </div>
          <!-- 林斑 -->
          <div v-if="showBanChild && fastMenu.click == 'forestban'" class="nav-child">
            <div class="forestban">
              <div class="forestban-con">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </div>
              <div class="forestban-right">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchFB">
                </el-input>
                <el-checkbox-group v-model="banCheckList" @change="handleCheckedCitiesChangeBan">
                  <el-checkbox label="http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo">
                    铁东
                  </el-checkbox>
                  <el-checkbox label="http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo">
                    铁西
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <el-button type="danger" icon="el-icon-close"
                         style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                         @click.stop="closeBanChild"></el-button>
            </div>
          </div>
          <!-- 林场 -->
          <div v-if="showChangChild && fastMenu.click == 'forestchang'" class="nav-child">
            <div class="forestban">
              <div class="forestban-con">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </div>
              <div class="forestban-right">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchFB">
                </el-input>
                <el-checkbox-group v-model="changCheckList" @change="handleCheckedCitiesChangeChang">
                  <el-checkbox label="http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo">
                    铁东
                  </el-checkbox>
                  <el-checkbox label="http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo">
                    铁西
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <el-button type="danger" icon="el-icon-close"
                         style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
                         @click.stop="closeChangChild"></el-button>
            </div>
          </div>
        </a>

      </div>
    </div>
    <div class="btm-right">
      <el-popover placement="top" trigger="click">
        <div class="btm-r-pop-info">
          <div class="btm-r-pop-info-box" v-for="(item,index) in taskList">
            <div class="btm-r-pop-info-tit">
              <h3>火险任务</h3>
            </div>
            <div class="btm-r-pop-info-con">
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">标题</div>
                <div class="btm-r-pop-info-list-text">{{ item.taskTitle }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">发起人</div>
                <div class="btm-r-pop-info-list-text">{{ item.sendPersonName }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">发起时间</div>
                <div class="btm-r-pop-info-list-text">{{ item.taskSendTime }}</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">关联事件</div>
                <div class="btm-r-pop-info-list-text">{{ item.eventName }}</div>
              </div>
            </div>
            <div class="btm-r-pop-info-btm">
              <el-link type="success" @click="showEventDialog( item.eventCode )">查看详情</el-link>
              <div class="btm-r-pop-info-btm-btn">
                <el-button type="danger" @click="selectTaskDtpts(item.taskId,'jj')">拒绝</el-button>
                <el-button type="primary" @click="selectTaskDtpts(item.taskId,'lq')">领取</el-button>
              </div>
            </div>
          </div>
        </div>
        <el-badge :value="taskCount" slot="reference">
          <el-button size="small" icon="el-icon-bank-card" @click="refreshTaskList">任务</el-button>
        </el-badge>
      </el-popover>
      <el-popover placement="top" trigger="click">
        <div class="btm-r-pop-info">
          <div class="btm-r-pop-info-box" v-for="(item,index) in 4">
            <div class="btm-r-pop-info-tit">
              <h3>火险任务</h3>
            </div>
            <div class="btm-r-pop-info-con">
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">标题</div>
                <div class="btm-r-pop-info-list-text">四平阿斯利康大姐夫啊路上的风景可丽金啊水电分离家</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">发起人</div>
                <div class="btm-r-pop-info-list-text">张三</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">发起时间</div>
                <div class="btm-r-pop-info-list-text">2022-09-05 12:12:15</div>
              </div>
              <div class="btm-r-pop-info-list">
                <div class="btm-r-pop-info-list-name">关联事件</div>
                <div class="btm-r-pop-info-list-text">啊萨杜拉副科级啊萨杜拉副科级</div>
              </div>
            </div>
            <div class="btm-r-pop-info-btm">
              <el-link type="success">查看详情</el-link>
              <div class="btm-r-pop-info-btm-btn">
                <el-button type="danger">拒绝</el-button>
                <el-button type="primary">领取</el-button>
              </div>
            </div>
          </div>
        </div>
        <el-badge :value="3" slot="reference">
          <el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
        </el-badge>
      </el-popover>

      <el-badge type="primary">
        <el-button size="small" icon="el-icon-bell">警报</el-button>
      </el-badge>
      <el-badge type="warning">
        <el-button size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
      </el-badge>
    </div>
    <!-- 事件详情弹层 -->
    <el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" width="95%" append-to-body
               @close="cancelEventShow()">
      <div class="dia-event-info">
        <el-row>
          <!-- 左侧 -->
          <el-col :span="18" class="dia-left">
            <div ref="imageTofile" style="height: 75vh;">
              <!-- 应急预案 -->
              <div class="dia-left-top">
                <div class="dia-left-top-tit">应急预案</div>
                <div class="dia-left-top-carousel">
                  <el-carousel height="30px" direction="vertical" :interval="2000">
                    <el-carousel-item v-for="item in 3" :key="item">
                      <a href="#">这是一条应急预案</a>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <!-- 应急预案end -->
              <!-- 地图 -->
              <supermapTaskDialog ref="supermapTaskDialog"
                                  style="position: absolute; top:0;left: 0;"
                                  :mapDiv="'taskDialogSuperMap'"
                                  :mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
                                  :codes="['9fa5']"
                                  :isSideBySide="false"
                                  :isdynamicPlotting="false"/>
              <!-- 地图end -->
            </div>
          </el-col>
          <!-- 左侧end -->
          <!-- 右侧 -->
          <el-col :span="6" class="dia-right">
            <div class="e-right" style="height: 75vh;!important;">
              <div class="forthis" style="height: 75vh;!important;">
                <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
                                 style="padding-bottom:1rem ;height: 75vh;!important;">
                  <div class="i-list-con" style="height: 75vh;!important;">
                    <div class="this-con" style="height: 75vh;!important;">
                      <div class="z-info-list" style="margin-top: 0;height: 75vh;!important;">
                        <el-timeline style="height: 75vh;!important;">
                          <el-timeline-item color="#2bacf7" :timestamp="item.createTime"
                                            placement="top" v-for="(item,index) in eventLogList">
                            <el-card style="width: 40vh">
                              <div class="z-info-list-con">
                                <div class="user-and-time flex-d">
                                  <span>{{ item.createName }}</span><span><i
                                  class="el-icon-location"></i> 定位</span>
                                </div>
                                <div class="z-info">
                                  <div class="this-con-list-info">
                                    {{ item.logContent }}
                                  </div>
                                  <div>
                                    <el-image :src="itemfile" v-if="isAssetTypeAnImage(itemfile)"
                                              :preview-src-list="item.attachs"
                                              style="width:3rem; height:3rem;margin: 2px;"
                                              v-for="(itemfile,index1) in item.attachs">
                                    </el-image>
                                    <el-link :href="itemfile" :underline="false" target="_blank"
                                             v-for="(itemfile,index1) in item.attachs"
                                             v-if="!isAssetTypeAnImage(itemfile)">
                                      <span class="el-icon-document"> {{ getFileName(itemfile) }} </span>
                                    </el-link>
                                  </div>
                                </div>
                              </div>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                      </div>
                    </div>
                  </div>
                </dv-border-box-7>
              </div>
              <!--              <div class="forthis">-->
              <!--                <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">-->
              <!--                  <div class="i-list-con">-->
              <!--                    <div class="this-con h-25 no-padding">-->
              <!--                      <div class="z-info-list" style="margin-top: 0;">-->
              <!--                        <div class="z-info-btm-grp">-->
              <!--                          <div class="z-info-btm-grp-top">-->
              <!--                            <div class="z-info-btm-grp-left">-->
              <!--                              &lt;!&ndash;                                <el-button size="small" icon="el-icon-s-flag">责任制&ndash;&gt;-->
              <!--                              &lt;!&ndash;                                </el-button>&ndash;&gt;-->
              <!--                              <el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传-->
              <!--                              </el-button>-->
              <!--                              <el-button size="small" icon="el-icon-download" @click="toImage()">保存-->
              <!--                              </el-button>-->
              <!--                            </div>-->
              <!--                            <div class="z-info-btm-grp-right">-->
              <!--                              <el-button size="small" icon="el-icon-mic">会议-->
              <!--                              </el-button>-->
              <!--                            </div>-->
              <!--                          </div>-->
              <!--                        </div>-->
              <!--                      </div>-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                </dv-border-box-7>-->
              <!--              </div>-->
            </div>

          </el-col>
          <!-- 左侧end -->
        </el-row>
      </div>
    </el-dialog>
    <!-- 任务选择领取部门弹层 -->
    <el-dialog title="选择部门" :visible.sync="showDeptConfirm" v-if="showDeptConfirm" width="30%" append-to-body
               @close="cancelEventConfirm()">
      <el-form label-width="80px">
        <el-form-item label="选择部门">
          <el-select v-model="deptName" multiple placeholder="请选择部门" class="m-r-1rem" @change="setValue">
            <el-option
              v-for="item in deptOptions"
              :key="item.taskDeptId"
              :label="item.taskDeptName"
              :value="{value:item.taskDeptId,label:item.taskDeptName}">
              <!--:disabled="item.eventStatus=='未处理' ? false:true"-->
            </el-option>
          </el-select>
        </el-form-item>
        <el-button size="mini" type="primary" v-if="taskStatusButton=='lq'"
                   @click="receiveTask(taskId)">领取
        </el-button>
        <el-button size="mini" type="primary" v-if="taskStatusButton=='jj'"
                   @click="refusedTask(taskId)">拒绝
        </el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectTaskBO, getEventDetail, selectTaskDtpts, receiveTask, refusedTask
} from '@/api/forest'
import supermapTaskDialog from '@/components/supermap' //超图

export default {
  components: {
    supermapTaskDialog
  },
  data() {
    return {
      eventId: null,
      eventCode: null,
      longitude: null,
      latitude: null,
      eventLogList: [],//事件详情日志
      eventDialog: false,//事件详情弹层
      taskStatusButton: null,//任务按钮

      taskId: null,//任务ID
      showDeptConfirm: false,//任务领取选择部门弹窗
      deptOptions: [],//任务领取部门列表
      centerTaskTaskDepts: [],//任务领取部门
      deptName: [],//任务领取部门

      taskCount: 0,//任务数量
      taskList: 0,//任务列表

      btmTipIndent: '', //图例收起弹出
      eventLocationVisible: false,
      showChild: false,
      showBanChild: false, //林斑
      showChangChild: false, //林场
      fastMenu: [
        {
          name: '事件定位',
          icon: 'iconfont sj-icon-sjdw',
          click: 'eventLocation'
        },
        {
          name: '图层切换',
          icon: 'iconfont sj-icon-tcqh',
          click: 'layerSwitching'
        },
        {
          name: '测量工具',
          icon: 'iconfont sj-icon-clgj',
          click: 'editableLayers'
        },
        {
          name: '林班',
          icon: 'iconfont sj-icon-lbzy',
          click: 'forestban'
        },

        {
          name: '林场',
          icon: 'iconfont sj-icon-lczy',
          click: 'forestchang'
        },
        {
          name: '电视墙',
          icon: 'el-icon-s-grid',
          click: 'TVWall'
        }
      ],
      data: [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      banCheckList: [], //林班
      changCheckList: [], //林场
      searchFB: '',
      btmCurrent: ''
    }
  },
  methods: {
    setValue(event) {
      this.centerTaskTaskDepts = []
      //签收选择部门
      if (event != null && event.length > 0) {
        for (let i = 0; i < event.length; i++) {
          if (event[i].label != undefined && event[i].value != undefined) {
            this.centerTaskTaskDepts.push({ taskDeptId: event[i].value, taskDeptName: event[i].label })
          }
        }
      }
    },
    receiveTask(taskId) {
      let param = { taskId: taskId, centerTaskTaskDepts: this.centerTaskTaskDepts }
      receiveTask(param).then(res => {
        //任务领取
        if (res.code == 200) {
          this.$message.success(`任务领取成功!`)
          this.deptOptions = []
          this.deptName = []
          this.centerTaskTaskDepts = []
          //刷新任务列表
          this.selectTaskList()
          this.showDeptConfirm = false
        }
      })
    },
    refusedTask(taskId) {
      let param = { taskId: taskId, centerTaskTaskDepts: this.centerTaskTaskDepts }
      refusedTask(param).then(res => {
        //任务拒绝
        if (res.code == 200) {
          this.$message.success(`任务拒绝成功!`)
          this.deptOptions = []
          this.deptName = []
          this.centerTaskTaskDepts = []
          //刷新任务列表
          this.selectTaskList()
          this.showDeptConfirm = false
        }
      })
    },
    selectTaskDtpts(taskId, state) {
      this.taskId = taskId
      selectTaskDtpts({ taskId: taskId }).then(res => {
        //任务领取部门列表
        if (res.code == 200) {
          this.deptOptions = res.data
          this.taskStatusButton = state
          this.showDeptConfirm = true
        }
      })
    },
    cancelEventShow() {
      console.log('关闭事件弹窗')
      this.eventLogList = []
    },
    cancelEventConfirm() {
      console.log('关闭任务选择部门')
      this.deptOptions = []
      this.deptName = []
      this.centerTaskTaskDepts = []
    },
    showEventDialog(eventCode) {
      this.eventCode = eventCode
      let that = this
      //获取事件详情
      getEventDetail({ eventCode: eventCode }).then(res => {
        this.eventDialog = true
        this.eventLogList = res.data.eventlog
        if (res.data.catalogue != null && res.data.catalogue.length > 0) {
          this.eventType = res.data.catalogue[0].eventType
          this.eventId = res.data.catalogue[0].id
          this.longitude = res.data.catalogue[0].longitude
          this.latitude = res.data.catalogue[0].latitude
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            parameter: '',
            keepBindPopup: false,
            isAggregation: false,
            radius: 0
          }

          if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_1') {
            markersMap.icon = 'sj-icon-map-wcl'
            markersMap.isAggregation = false
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_2' || res.data.catalogue[0].eventStatusValue == 'forest_event_status_3' || res.data.catalogue[0].eventStatusValue == 'forest_event_status_4' || res.data.catalogue[0].eventStatusValue == 'forest_event_status_5') {
            markersMap.icon = 'sj-icon-map-clz'
          } else if (res.data.catalogue[0].eventStatusValue == 'forest_event_status_6') {
            markersMap.icon = 'sj-icon-map-ywc'
          } else {
            markersMap.icon = 'sj-icon-map-clz'
          }
          markersMap.lng = res.data.catalogue[0].longitude
          markersMap.lat = res.data.catalogue[0].latitude
          if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0].fireRadius > 0) {
            markersMap.radius = res.data.eventdetail[0].fireRadius
          }
          setTimeout(() => {
            // that.$refs.supermapTaskDialog.dynamicPlotting()//弹出动态绘制窗口，防止截图位置改变
            that.$refs.supermapTaskDialog.clearM(false)
            that.$refs.supermapTaskDialog.setMarkersRadius([markersMap])
            that.$refs.supermapTaskDialog.dropLocation(res.data.catalogue[0].latitude, res.data.catalogue[0].longitude)
          }, 1000)
        }
      })
    },
    refreshTaskList() {
      //刷新任务列表
      this.selectTaskList()
    },
    selectTaskList: async function() {
      //获取任务列表
      selectTaskBO().then(res => {
        this.taskList = res.data
        this.taskCount = res.data.length
      })
    },
    handleCheckedCitiesChangeBan(value) {
      this.choseLayerSwitchingList(this.banCheckList)
    },
    handleCheckedCitiesChangeChang(value) {
      this.choseLayerSwitchingList(this.changCheckList)
    },
    handleNodeClick(data) {
      console.log(data)
    },
    refresh() {
      window.location.reload()
    },
    showDialog(click) {
      window.showDialog(click)
    },
    choseLayerSwitching(url, isClear) {
      window.choseLayerSwitching(url, isClear)
    },
    choseLayerSwitchingList(urlList) {//选择图层(传递数组)
      window.choseLayerSwitchingList(urlList)
    },
    forestban() {
      window.forestban()
      console.log('林班')
    },
    forestchang() {
      window.forestchang()
      console.log('林场')
    },
    closeBanChild() {
      this.banCheckList = []
      this.showBanChild = false
    },
    closeChangChild() {
      this.changCheckList = []
      this.showChangChild = false
    },
    //图例收起弹出
    btmIndent() {
      if (this.btmTipIndent == '') {
        this.btmTipIndent = 'btm-tip-to-right'
      } else if (this.btmTipIndent == 'btm-tip-to-right') {
        this.btmTipIndent = ''
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/styles/base.scss';

.btm-box {
  width: 100%;
  height: auto;
  background: linear-gradient($btmMemu);
  position: absolute;
  z-index: 999;
  bottom: 0;
  height: 2.5rem;
  display: flex;
  align-items: center;

  .light {
    position: absolute;
    top: -.5rem;
  }

  .btm-left {
    position: absolute;
    font-size: .7rem;
    height: 2rem;
    line-height: 2rem;
    border: 1px $searchBorder;
    border-left: none;
    color: $inBlue;
    display: flex;
    -webkit-transform: translateX(-21rem) !important;
    transform: translateX(-21rem) !important;
    transition: all 0.5s ease-in-out !important;

    .btm-legend {
      height: 2rem;
      text-align: center;
      color: $inBlue;
      padding: 0 .5rem;
      cursor: pointer;

    }

    .btm-legend:hover {
      background-color: $tipHover;
      color: $white;
    }

    .btm-left-tip {
      display: flex;
      align-items: center;
      margin: 0 .5rem;

      .btm-left-block {
        width: 1rem;
        height: 1rem;
        margin-right: .3rem;
        border-radius: .2rem;


      }

      .btm-left-state-c1 {
        background-color: $eventStateColor-xsb;
      }

      .btm-left-state-c2 {
        background-color: $eventStateColor-cb;
      }

      .btm-left-state-c3 {
        background-color: $eventStateColor-yqs;
      }

      .btm-left-state-c4 {
        background-color: $eventStateColor-ld;
      }

      .btm-left-state-c5 {
        background-color: $eventStateColor-bj;
      }

      .btm-left-state-c6 {
        background-color: $eventStateColor-tb;
      }


    }

  }

  .btm-tip-to-right {
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
    transition: all 0.5s ease-in-out !important;
  }

  .bottom-menu-normal {
    max-width: 70%;
    padding: 0 3rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 999;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
    // background-size: cover;

    .btm-m-con {
      position: relative;
      color: $inBlue;
      font-size: .5rem;
      padding: .6rem 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      white-space: nowrap;

      i {
        font-size: 1rem;
        color: $inBlue;
        text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
        margin-right: 0.2rem;
      }

      .nav-child {
        text-shadow: none !important;
        position: absolute;
        bottom: 3rem;
        border: 1px solid saddlebrown;
        padding: .5rem;
        -moz-border-radius-topleft: 0;
        -moz-border-radius-bottomright: 0;
        background-color: $barBgc;
        box-shadow: $barShadow;
        border: 1px $barBorder;
        left: 50%;
        transform: translateX(-50%);
        color: $inBlue;

        .nav-child-btn {
          padding: .2rem;
        }

        .forestban {
          display: flex;

          .forestban-con {
            width: 10rem;
            height: 20rem;
            overflow-y: scroll;
            border: 1px solid rgba(51, 70, 127, 0.7);
          }

          .forestban-right {
            width: 15rem;
            height: 20rem;
            overflow-y: scroll;
            padding: 0 1rem;

            .el-checkbox-group {
              display: flex;
              flex-direction: column;

              label {
                padding: .4rem 0;
              }

              .el-checkbox {
                color: $white;
              }
            }
          }
        }

      }
    }

    .btm-m-con:hover,
    .on {
      text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      -webkit-transform: translateX(0.2rem);
      transform: translateX(0.2rem);
      transition: all 0.2s ease-in-out;

      .nav-child {
        text-shadow: none !important;
      }

      i {
        color: $inBlueHover;
        text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      }
    }

  }

  .btm-right {
    position: absolute;
    font-size: .7rem;
    height: 2rem;
    display: flex;
    right: 1rem;
    align-items: center;

    .el-badge {
      display: flex !important;
      margin-left: 1.5rem;

      button {
        padding: 0 .3rem;
        height: 1.5rem;
        background-color: #112543;
        color: $inBlue;
        border: 1px $searchBorder;
      }

    }

    .el-badge:hover {
      -webkit-transform: translateX(0.1rem);
      transform: translateX(0.1rem);
      transition: all 0.2s ease-in-out;

      button {
        text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
      }

    }
  }

}

.btm-r-pop-info {
  display: flex;
  width: 35rem;
  flex-direction: column;
  max-height: 85vh;
  min-height: fit-content;
  overflow-y: scroll;
  padding: 1rem;

  .btm-r-pop-info-box:hover {
    box-shadow: $shadowListHover;
    color: $inBlue;
    border: 1px $countBorder;
  }

  .btm-r-pop-info-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: $deepBG;
    padding: .5rem;
    border-radius: .5rem;
    color: $inBlue;
    border: 1px $searchBorder;
    margin-bottom: 1rem;

    .btm-r-pop-info-tit {
      display: flex;
      padding: .5rem;

      h3 {
        font-weight: bolder;
      }

    }

    .btm-r-pop-info-con {
      padding: .5rem;
      display: flex;
      flex-direction: column;
      border-top: 1px $searchBorder;
      border-bottom: 1px $searchBorder;

      .btm-r-pop-info-list {
        display: flex;
        padding: .3rem 0;

        .btm-r-pop-info-list-name {
          width: 3.6rem;
          text-align: right;
          margin-right: 1rem;
        }

        .btm-r-pop-info-list-text {

        }
      }
    }

    .btm-r-pop-info-btm {
      padding: .5rem;
      display: flex;
      justify-content: space-between;

      .btm-r-pop-info-btm-btn {
        button {
          padding: .5rem;
        }
      }
    }
  }


}

</style>