Lexus-media/src/components/RouterBanner.vue

<template>
  <div class="router_banner">
    <div
      class="router_management"
      v-for="(routerObj, index) in routerList"
      :key="index"
    >
      <div v-if="routerObj.role === isManufacturer">
        <!-- <div> -->
        <div
          :class="{ selectStyle: routerObj.path === routerPath }"
          @mouseenter="enterDiv(index)"
          @mouseleave="leaveDiv(index)"
        >
          <div class="first_level">
            <router-link :to="routerObj.path" tag="li" class="title">
              <div
                class="icon"
                :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
                v-if="routerObj.path !== routerPath && isHover[index]"
              ></div>
              <div
                class="icon"
                :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
                v-else
              ></div>
              <p>
                {{ routerObj.title }}
              </p>
              <div class="switch">
                <img src="../img/switch2.png" v-if="routerObj.path !== routerPath" />
                <img src="../img/switch1.png" v-else />
              </div>
            </router-link>
          </div>
        </div>
        <!-- 模块的子路由 -->
        <div class="second_level" v-show="(routerObj.pathList || []).indexOf(routerPath) > -1">
          <div
            v-for="(list, index) in routerObj.list"
            :key="index"
          >
            <router-link
              :to="list.path"
              tag="li"
              :class="{ blueColor: list.path === routerPath }"
              >- {{ list.title }}
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ROUTER } from '../config/router';
export default {
  props: {
    isManufacturer: {
      type: String,
      default: "distributor",
    },
  },
  data() {
    return {
      isHover: [true, true, true, true, true],
      routerList: ROUTER
    };
  },
  computed: {
    routerPath: function () {
      return this.$route.path;
    },
  },
  // watch: {
  //   routerPath: function(newpath, oldPath) {
  //     console.log(newpath, 'new');
  //     console.log(oldPath);
  //     console.log()
  //   }
  // },
  methods: {
    enterDiv: function (i) {
      this.isHover.splice(i, 1, false);
    },
    // 鼠标移出变蓝色背景
    leaveDiv: function (i) {
      this.isHover.splice(i, 1, true);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.router_banner {
  width: 100%;
  border-top: 10px solid #eee;
  .router_management {
    width: 100%;
    .first_level {
      display: flex;
      height: 35px;
      align-items: center;
      &:hover {
        cursor: pointer;
        background-color: rgb(0, 86, 160);
        color: #fff;
        .title {
          color: #fff;
        }
        p {
          color: #fff;
        }
      }
      .title {
        font-size: 14px;
        display: flex;
        padding: 0 10px;
        justify-content: space-around;
        .icon {
          width: 26px;
          height: 26px;
          background-size: contain;
          background-repeat: no-repeat;
          img {
            width: 26px;
            height: 26px;
          }
        }
        .switch {
          width: 11px;
          height: 11px;
          margin-left: 20px;
          img {
            width: 11px;
            height: 11px;
            transform: translateY(-5px);
          }
        }
        p {
          font-size: 14px;
          margin-left: 9px;
        }
      }
      li {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .second_level {
      li {
        width: 100%;
        height: 38px;
        line-height: 38px;
        text-align: center;
        &:hover {
          cursor: pointer;
          color: rgb(0, 86, 160);
        }
      }
    }
  }
}
// 选中变色
/* .blueColor {
  color: #0056a0;
} */
.router-link-active {
  color: #0056a0;
}
.selectStyle {
  background-color: rgb(0, 86, 160);
  color: #fff;
  .title {
    color: #fff;
  }
  p {
    color: #fff;
  }
}
</style>