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
          @click="showLink(index)"
          :class="{ selectStyle: isShowLink[index] }"
          @mouseenter="enterDiv(index)"
          @mouseleave="leaveDiv(index)"
        >
          <div class="first_level" @click="getNavTitle(routerObj)">
            <router-link :to="routerObj.path" tag="li" class="title">
              <div
                class="icon"
                :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
                v-if="!isShowLink[index] && 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="!isShowLink[index]" />
                <img src="../img/switch1.png" v-else />
              </div>
            </router-link>
          </div>
        </div>
        <!-- 模块的子路由 -->
        <div class="second_level" v-show="isShowLink[index]">
          <div
            v-for="(list, index) in routerObj.list"
            :key="index"
            @click="getNavTitle(routerObj, list)"
          >
            <router-link
              :to="list.path"
              tag="li"
              :class="{ blueColor: list.path === routerPath }"
              >- {{ list.title }}
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isManufacturer: {
      type: String,
      default: "distributor",
    },
  },
  data() {
    return {
      isShowLink: [true, true, false, false, false], // 五个大模块
      isHover: [true, true, true, true, true],
      routerList: [
        {
          title: "数据管理", // 厂商数据管理
          path: "/uploadInfor", // 默认展示的路由
          img1: require("../img/edit-manage1.png"), // 没点击的背景图
          img2: require("../img/edit-manage2.png"), // 点击了的背景图
          role: "manufacturer", // 厂商和经销商都有权限
          list: [
            {
              title: "上传记录",
              path: "/uploadRecord",
            },
            {
              title: "链接上传", // 厂商的链接上传
              path: "/uploadLinks",
            },
            {
              title: "上传资料",
              path: "/uploadInfor",
            },
          ],
        },
        {
          title: "数据管理", // 进销商数据管理
          path: "/inforList", // 默认展示的路由
          img1: require("../img/edit-manage1.png"), // 没点击的背景图
          img2: require("../img/edit-manage2.png"), // 点击了的背景图
          role: "distributor", // 厂商和经销商都有权限
          list: [
            {
              title: "资料下载",
              path: "/inforList",
            },
            {
              title: "传播反馈", // 经销商链接上传
              path: "/uploadLink",
            },
          ],
        },
        {
          title: "账号管理", // 厂商的账号管理
          path: "/accountIndex",
          img1: require("../img/User-Settings1.png"),
          img2: require("../img/User-Settings2.png"),
          list: [],
          role: "manufacturer", // 厂商有权限
        },
        {
          title: "账号管理",
          path: "/accountManage",
          img1: require("../img/User-Settings1.png"),
          img2: require("../img/User-Settings2.png"),
          list: [],
          role: "distributor", // 经销商有权限
        },
        {
          title: "参数设置",
          path: "/parameterIndex",
          img1: require("../img/Setting1.png"),
          img2: require("../img/Setting2.png"),
          list: [],
          role: "manufacturer", // 只有厂商有权限
        },
      ],
    };
  },
  computed: {
    routerPath: function () {
      return this.$route.path;
    },
  },
  methods: {
    getNavTitle: function (navTitle, list) {
      // 点击路由的时候，修改导航栏、
      if (list) {
        const nav = [
          {
            title: navTitle.title,
            url: navTitle.path,
          },
          {
            title: list.title,
            url: list.path,
          },
        ];
        this.$emit("change_nav", nav);
      } else {
        const nav = [
          {
            title: navTitle.title,
            url: navTitle.path,
          },
        ];
        this.$emit("change_nav", nav);
      }
    },
    // 展开、关闭router栏
    showLink: function (i) {
      let flag = this.isShowLink[i];
      this.isShowLink = [false, false, false, false, false];
      this.isShowLink.splice(i, 1, !flag);
    },
    // 鼠标移入变白色背景
    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;
        p {
          &: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>