修改专题菜单样式

YANGDL

2021-02-26 041aef6ee488898c7f4f1839f6cb8aa3187277ca

修改专题菜单样式

 aliases.config.js

@@ -1,6 +1,6 @@
const path = require('path')

function resolveSrc(_path) {
function resolveSrc (_path) {
  return path.join(__dirname, _path)
}

@@ -11,7 +11,7 @@
  '@components': 'src/components',
  '@assets': 'src/assets',
  '@utils': 'src/utils',
  '@styles': 'src/styles'
  '@styles': 'src/assets/css'
}

module.exports = {

 src/assets/css/map/_map-variable.less

@@ -1,2 +1,3 @@
@color:#00fff6;
@color-highlight:#fff700;
@background-color:rgba(0,16,30,.8);

 src/assets/css/map/custom-popup.css

@@ -1,3 +1,4 @@

.custom-popup .leaflet-popup-content-wrapper {
    background-color: rgba(14, 45, 84, 0.9);
    color: #ffffff;

 src/components/panel/MenuSpecial.vue

@@ -1,25 +1,47 @@
<!--主题菜单选项-->
<template>
<div class="menu-special">
  <div style="color: white;z-index: 1000;">
      <img src="/assets/images/menu/earth.png" style="width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline; " @click="toggle()"  >
    <div id="menu-special-context" class="menu-special-context">
      <div class="menu-special-item"   v-for="item in SpecialList" :key="item.id">
        <img :src="item.icon" style="width: 1.2rem;height: 1.2rem;" >
        {{item.name}}
  <div class="menu-special">
    <div style="color: white;z-index: 1000;display:inline-flex;">
      <img class="menu-special-toggle" src="/assets/images/menu/earth.png"
           style=""
           @click="toggle()">
      <div id="menu-special-context" class="menu-special-context">
          <el-checkbox-button  v-show="isShow" class="menu-special-item" v-model="specialAll.check" :checked="specialAll.checked" @change="checkedSpecialChangeAll(specialAll)">
            <div style="height: 1rem;width: 1rem;display: inline-flex;">     <img :src="specialAll.icon" ></div>
            {{ specialAll.name }}</el-checkbox-button>

        <el-checkbox-group indeterminate="true" v-show="isShow" v-model="checkedList" size="medium">
          <el-checkbox-button class="menu-special-item"  v-for="item in specialList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
            <div style="height: 1rem;width: 1rem;display: inline-flex;">     <img :src="item.icon" ></div>
            {{item.name}}</el-checkbox-button>
        </el-checkbox-group>
<!--        <ul class="menu-special-item" v-for="item in SpecialList" :key="item.id">-->
<!--          <li style="display: inline-flex;vertical-align: middle">-->
<!--            <div style="height: 1rem;width: 1rem;">     <img :src="item.icon" ></div>-->

<!--            <a>{{ item.name }}</a>-->
<!--          </li>-->
<!--        </ul>-->
      </div>
    </div>

  </div>
</div>
</template>

<script>

export default {
  name: 'MenuSpecial',
  data () {
    return {
      SpecialList: [{
      isShow: false,
      // checkedList: ['污染源', '废水监测'],
      checkedList: [],
      specialAll: {
        name: '全选',
        check: false,
        icon: '/assets/images/menu/special.png'
      },
      specialList: [{
        name: '污染源',
        id: 1,
        check: false,
@@ -27,92 +49,152 @@
      }, {
        name: '废水监测',
        id: 2,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '废气监测',
        id: 3,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '固废管理',
        id: 4,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '环境风险',
        id: 5,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '土壤及地下水',
        id: 6,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '污雨水管网',
        id: 7,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '预警报警',
        id: 8,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '指标统计',
        id: 9,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '应急地图',
        id: 10,
        check: false,
        checked: false,
        icon: '/assets/images/menu/special.png'
      }]
    }
  },
  computed: {
  },
  methods: {
    toggle () {
      console.log('toggle')
      const el = document.getElementById('menu-special-context')
      console.log(el.clientWidth + ':' + el.offsetHeight)
      if (el.clientWidth > 0) {
        el.style.width = '0'
      } else {
        el.style.width = 'auto'
      }
      this.isShow = !this.isShow
      // console.log('toggle')
      // const el = document.getElementById('menu-special-context')
      // console.log(el.clientWidth + ':' + el.offsetHeight)
      // if (el.clientWidth > 0) {
      //   el.style.width = '0'
      // } else {
      //   el.style.width = 'auto'
      // }
    },
    checkedSpecialChangeAll (val) {
      // this.checkedCities = val ? this.cities.map(item => item.id) : []
      // this.isIndeterminate = false
      // let list = []
      // if (val === true) {
      //   list = this.specialList.map(item => item.name)
      // }

      this.checkedList = val.check ? this.specialList.map(item => item.name) : []
    },
    checkedSpecialChange (item) {
      console.log(item)
    }
  }

}
</script>

<style lang="less" scoped>
.menu-special{
<style lang="less" >
@import '@assets/css/map/_map-variable';
.menu-special {
  position: absolute;
  left: 1rem;
  bottom:10rem;
  height: 2rem;
  font-size: 1rem;
  bottom: 1rem;

  z-index: 1000;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  .menu-special-context{
.menu-special-toggle{
  width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline;
}
  .menu-special-context {

    display: inline;
    display: inline-flex;
    transition: height 1s;
    .menu-special-item{
      display: inline;background: url('/assets/images/menu/menu-background.svg') no-repeat;

    li {
      //display: inline-flex;

      line-height: 2rem;
      height: 2rem;
      img {
        font-size: 0;
        height: 100%;
        width: 100%;
      }
    }
    .menu-special-item {
      background: url('/assets/images/menu/menu-background.svg') no-repeat;
      background-size: 100% 100%;
      padding: 0 1rem 0 1rem;
      font-size: 1rem;
      vertical-align: top;
      /*line-height: 2rem;*/
      /*height: 2rem;*/
      line-height: 2rem;
      height: 2rem;
    }
    .menu-special-item :hover {
      text-decoration: underline;
      cursor: pointer;
    }
    .menu-special-item:active{
      color: @color-highlight;
    }
  }

  .el-checkbox-button__inner{
 padding: 0;
 background: transparent;
//border: 1px solid @color;
    color: @color;
    line-height: 1rem;
    box-shadow: none;
    border:none;
}
  .el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: @color-highlight;
    background-color: transparent;
    //border-color: transparent;
    box-shadow: none;
    border:none;
  }
  .el-checkbox-button:first-child .el-checkbox-button__inner{
    border-left: none;
  }
  .el-checkbox-button--medium .el-checkbox-button__inner{
    padding:0;
  }
  .el-checkbox-button__inner:hover{
    color: @color-highlight;
  }
}
</style>