ops-fronted/src/components/Sidebar.vue

<template>
  <div class="sidebarBox">
    <ul class="menuBoxUl">
      <li class="menuItem" v-for="(item, index) in routeItem" :key="index">
        <router-link :to="item.path"> {{ item.name }} </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routeItem: [
        {
          path: "/home",
          name: "首页",
        },
        {
          path: "/report",
          name: "状态报表",
        },
        {
          path: "/log",
          name: "日志列表",
        },
        {
          path: "/upgradation",
          name: "上传Apk",
        },
        {
          path: "/activity",
          name: "活动列表",
        },
      ],
    };
  },
  watch: {},
  methods: {},
  created() {},
};
</script>

<style lang="less">
.sidebarBox {
  // width: 55%;
  // margin: 0 auto;
  display: flex;
  align-items: center;
  .menuBoxUl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .menuItem {
      list-style: none;
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      margin-right: 32px;
      a {
        color: #fff;
        //background: #e8f5f4;
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        border-radius: 8px;
        &:hover {
          background: #128071;
        }
      }
      .router-link-active {
        background: #128071;
      }
    }
  }
}
</style>