zhny_ui/ems-ui/src/views/largeScreen/footer.vue

<template>
  <div class="footer-menu">
    <AppLink v-for="item in menuList" :key="item.name" :to="{ name: item.routeName }" tag="div" class="app-link"
      :class="setClass(item)" >
      <div v-if="item.routeName === 'home'" class="home-icon" :style="{
        backgroundImage:
          activeRoute == item.routeName
            ? `url(${require('@/assets/images/layout/footer/center_.png')})`
            : `url(${require('@/assets/images/layout/footer/center.png')})`,
      }"></div>
      <div class="relative-text">
        {{ item.name }}
      </div>
    </AppLink>
  </div>
</template>

<script>
import AppLink from './components/AppLink.vue';

export default {
  name: 'FooterMenu',
  components: {
    AppLink,
  },
  data () {
    return {
      menuList: [
        {
          name: '源',
          routeName: 'source',
          className: 'leftC',
          activeClass: 'leftC-active',
        },
        // {
        //   name: '储',
        //   routeName: 'storage',
        //   images: require('@/assets/images/layout/footer/iteml.png'),
        //   imagesActive: require('@/assets/images/layout/footer/iteml_.png'),
        // },
        {
          name: '荷',
          routeName: 'soc',
          className: 'leftC',
          activeClass: 'leftC-active',
        },
        {
          name: '首页',
          routeName: 'home',
          className:'home',
        },
        {
          name: '网',
          routeName: 'net',
          className: 'rightC',
          activeClass: 'rightC-active',
        },
        {
          name: '设备',
          routeName: 'device',
          className: 'net-device rightC',
          activeClass: 'rightC-active',
        },
      ],
    };
  },
  computed: {
    activeRoute () {
      return this.$route.name;
    },
  },
  methods: {
    setClass (item) {
        return this.activeRoute===item.routeName?`${item.className} ${item.activeClass||''}`:`${item.className}`
    }
  },
};
</script>

<style lang="scss" scoped>
$footer-height: 60px;
.footer-menu {
  width: calc(40% + 10px);
  height: $footer-height;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  padding-left: 10px;
  padding-right: 14px;
  pointer-events: auto;

  .app-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: large;
    ::v-deep a{
      width: 100%;
      text-align: center;
    }

    &.home {
      width: 121px;
      height: 37px;
      margin-top: 1px;
      background-repeat: no-repeat;
    }
    &.net-device {
      padding-left: 20px;

    }
    &.leftC{
      width: 103px;
      height: 37px;
      padding-right: 20px;
      background: url("~@/assets/images/layout/footer/iteml.png") no-repeat;
      background-size:100%;
    }
    &.leftC-active{
      background: url("~@/assets/images/layout/footer/iteml_.png") no-repeat;
      background-size:100%;
    }
    &.rightC{
      width: 103px;
      height: 37px;
      background: url("~@/assets/images/layout/footer/itemr.png") no-repeat;
      background-size:100% 100%;
    }
    &.rightC-active{
      background: url("~@/assets/images/layout/footer/itemr_.png") no-repeat;
      background-size:100% 100%;
    }
    .home-icon {
      content: "";
      position: absolute;
      width: 77px;
      height: 77px;
      animation: spin-slow infinite 4s linear;
      top: -20px;
      left: 21px;
      background-position: center;
      background-size: cover;
      z-index: 10;
    }

    .relative-text {
      position: relative;
      color: #fff;
      z-index: 10;
    }
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>