Project_yhfu/src/components/vBottomMenu.vue

<template>
  <div class="bottom-menu-normal">
    <div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con" v-on:click="showDialog(fastMenu.click)">
      <a><i class="iconfont" :class="fastMenu.icon"></i>{{fastMenu.name}}</a>
    </div>
  </div>
  <!--事件弹层-->
</template>

<script>
  export default {
    data() {
      return {
        eventLocationVisible: false,
        fastMenu: [{
          name: '事件定位',
          icon: 'sj-icon-sjdw',
          click: 'eventLocation'
        },
          {
            name: '图层切换',
            icon: 'sj-icon-tcqh',
            click: ''
          },
          {
            name: '测量工具',
            icon: 'sj-icon-clgj',
            click: ''
          },
          {
            name: '林班',
            icon: 'sj-icon-lbzy',
            click: ''
          },
          {
            name: '林场',
            icon: 'sj-icon-lczy',
            click: ''
          }
        ]
      }
    }, methods: {
      showDialog(click) {
        window.showDialog(click)
      }
    }
  }
</script>

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

  .bottom-menu-normal {
    max-width: 90%;
    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;
    overflow: hidden;

    .btm-m-con {
      position: relative;
      color: $inBlue;
      font-size: .5rem;
      padding: 1rem 1.5rem;
      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;
      }
    }

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

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

  }
</style>