frontend-feedingship-vue2/src/components/qNav.vue

<template>
  <div id="box-main">
    <div class="main-container">
      <aside class="sidebar">
        <nav class="menu">
          <router-link
            v-for="item in menuItems"
            :key="item.path"
            :to="item.path"
            @click.native="setActiveMenu(item.title)"
            class="menu-item"
          >
            <i :class="`${item.icon}`"></i>
            <span>{{ item.title }}</span>
            <img
              style="margin-left: 68px"
              src="../assets/img/gogogo.png"
              alt=""
            />
          </router-link>
        </nav>
      </aside>
      <main class="content-area">
        <router-view />
      </main>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      str: false,
      menuItems: [
        {
          path: "/index/homepage",
          icon: "el-icon-s-unfold",
          title: "设备管理",
          name: "Device",
        }, // 新增唯一name
        {
          path: "/index/userManagement",
          icon: "el-icon-s-custom",
          title: "用户管理",
          name: "User",
        },
        {
          path: "/index/roleManagement",
          icon: "el-icon-user",
          title: "角色管理",
          name: "Role",
        }, // 修改icon
        {
          path: "/index/powerManagement",
          icon: "el-icon-s-check",
          title: "权限管理",
          name: "Power",
        }, // 修改icon
        {
          path: "/index/tenantManagement",
          icon: "el-icon-menu",
          title: "租户管理",
          name: "zuhu",
        },
        {
          path: "/index/ContactUs",
          icon: "el-icon-phone",
          title: "联系我们",
          name: "ContactUs",
        },
        {
          path: "/index/RepairRecord",
          icon: "el-icon-s-tools",
          title: "报修记录",
          name: "RepairRecord",
        },
        {
          path: "/index/FeedbackInformation",
          icon: "el-icon-chat-dot-square",
          title: "反馈信息",
          name: "FeedbackInformation",
        },
      ],
    };
  },
  methods: {
    setActiveMenu(menuItemTitle) {
      this.$store.dispatch("updateActiveMenuItem", menuItemTitle);
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
#box-main::v-deep {
  .main-container {
    position: absolute;
    left: 0;
    top: calc(100vh * 198 / 1080);
    bottom: 0;
    width: 100%;
    background: #dee6ef;
    display: flex;
    flex-direction: row;
    flex: 1;

    .sidebar {
      width: 268px;
      height: calc(100vh * 970 / 1080);
      background: #021327;
      box-shadow: 6px 0px 9px 0px rgba(27, 30, 46, 0.26);
      border-radius: 0px 12px 0px 0px;
      position: absolute;
      top: calc(100vh * -88 / 1080);
      z-index: 111;
    }

    .content-area {
      display: block;
      flex: 1;
      flex-basis: auto;
      overflow: auto;
      box-sizing: border-box;
      position: absolute;
      left: 268px;
      top: -50px;
      bottom: 0;
      right: 0;
      margin: 20px;
      width: 1594px;
      height: 83.7962962963vh;
      background: #f1f5fa;
      border-radius: 12px;
    }

    .menu {
      .menu-item {
        display: flex;
        align-items: center;
        padding: 15px;
        font-family: "Microsoft YaHei";
        font-weight: bold;
        font-size: 16px;
        color: #d2e0f1;
        text-decoration: none;
        background: transparent; // 默认背景
        border-radius: 0; // 默认圆角

        &.router-link-exact-active {
          color: #ffffff;
          background: #1c6fec;
          border-radius: 10px;
        }

        span {
          padding-left: 15px;
        }
      }
    }
  }
}
</style>