增加菜单主题

YANGDL

2021-02-25 7af991bc50092c018f3a2996d730274a168079cb

增加菜单主题

 public/assets/images/menu/earth.png

 public/assets/images/menu/menu-background.svg

New file
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="115px" height="31px" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask fill="white" id="clip6">
      <path d="M 0 31  L 11.5534948188238 15.5  L 0 0.206422018348576  L 97.235294117647 0.206422018348576  L 114.690647482014 15.5  L 97.235294117647 31  L 0 31  Z " fill-rule="evenodd" />
    </mask>
  </defs>
  <g transform="matrix(1 0 0 1 -40 -864 )">
    <path d="M 0 31  L 11.5534948188238 15.5  L 0 0.206422018348576  L 97.235294117647 0.206422018348576  L 114.690647482014 15.5  L 97.235294117647 31  L 0 31  Z " fill-rule="nonzero" fill="#305b62" stroke="none" fill-opacity="0.752941176470588" transform="matrix(1 0 0 1 40 864 )" />
    <path d="M 0 31  L 11.5534948188238 15.5  L 0 0.206422018348576  L 97.235294117647 0.206422018348576  L 114.690647482014 15.5  L 97.235294117647 31  L 0 31  Z " stroke-width="2" stroke="#90c8e0" fill="none" transform="matrix(1 0 0 1 40 864 )" mask="url(#clip6)" />
  </g>
</svg>

 public/assets/images/menu/special.png

 src/components/LayerController/LayerController.vue

@@ -105,7 +105,7 @@
.float-panel {
  position: absolute;
  left: 10px;
  bottom: 10px;
  top: 45%;
  width: 230px;
  height: auto;
  font-size: 11px;

 src/components/panel/MenuSpecial.vue

New file
@@ -0,0 +1,118 @@
<!--主题菜单选项-->
<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>
    </div>

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

<script>
export default {
  name: 'MenuSpecial',
  data () {
    return {
      SpecialList: [{
        name: '污染源',
        id: 1,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '废水监测',
        id: 2,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '废气监测',
        id: 3,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '固废管理',
        id: 4,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '环境风险',
        id: 5,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '土壤及地下水',
        id: 6,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '污雨水管网',
        id: 7,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '预警报警',
        id: 8,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '指标统计',
        id: 9,
        check: false,
        icon: '/assets/images/menu/special.png'
      }, {
        name: '应急地图',
        id: 10,
        check: false,
        icon: '/assets/images/menu/special.png'
      }]
    }
  },
  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'
      }
    }
  }

}
</script>

<style lang="less" scoped>
.menu-special{
  position: absolute;
  left: 1rem;
  bottom:10rem;
  height: 2rem;
  font-size: 1rem;
  z-index: 1000;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  .menu-special-context{

    display: inline;
    transition: height 1s;
    .menu-special-item{
      display: inline;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;*/
    }
  }

}
</style>

 src/views/MapTemplate.vue

@@ -11,6 +11,7 @@
        <monitor-panel></monitor-panel>
        <top-enterprise-panel></top-enterprise-panel>
        <tool-box-panel></tool-box-panel>
      <menu-special></menu-special>
    </div>
</template>

@@ -25,10 +26,12 @@
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
import MenuSpecial from '@components/panel/MenuSpecial'

export default {
  name: 'MapTemplate',
  components: {
    MenuSpecial,
    ToolBoxPanel,
    TopEnterprisePanel,
    SgisLayerController,