LiaoNingDangAn/src/views/index.vue

<template>
  <div class="container">
    <myHeader></myHeader>
    <div class="body-container">
      <!-- <div class="tree-menu">
        <router-link
          tag="div"
          :to="{ path: item.path }"
          v-for="(item, index) in myRouter"
          :key="index"
          active-class="routerActive"
        >
          <div class="view-child">
            <img :src="item.icon" alt="" class="router-icon" />
            {{ item.name }}
          </div>
        </router-link>
      </div> -->
      <!-- 左边  -->
      <div class="sidebar_content">
        <div class="mycontent-left">
          <el-menu
            :default-active="routerIndex"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
          >
            <el-submenu
              :index="indexOne - '0'"
              v-for="(item, indexOne) in myRouter"
              :key="indexOne - '0'"
            >
              <template slot="title">
                <img :src="item.icon" alt="" class="title_img" />
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="indexOne + '-' + index"
                  v-for="(itemb, index) in item.children"
                  :key="index"
                  :route="itemb.path"
                  >{{ itemb.name }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <!-- 右边 -->
        <div class="mycontent-content">
          <tags-view ref="tagsView" />
          <div class="mycontent-content-title">
            <!-- <i class="el-icon-location-outline title-icon" />
            <span class="title-font">{{ routerTitle }}</span> -->
          </div>
          <router-view></router-view>
        </div>
      </div>
      <!-- <div class="view-box">
        <tags-view ref="tagsView" />
        <div class="child-views">
          <router-view />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/myHeader";
import TagsView from "@/layout/components/TagsView";
import router from "@/router";
export default {
  components: { myHeader, TagsView },
  data() {
    return {
      routerIndex: "1-1",
      routerList: [
        {
          path: "/administrative",
          name: "行政审批",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/administrative/index"),
          meta: { title: "行政审批", icon: "netWork" },
        },
        {
          path: "/enterpriseMsg",
          name: "企业档案",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/enterpriseMsg/index"),
          meta: { title: "企业档案", icon: "netWork" },
        },
        {
          path: "/productsMsg",
          name: "产品档案",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/index"),
          redirect: "drugArchives",
          isDiy: true,
          // children: [
          //   {
          //     path: "/productsMsg/drugArchives",
          //     name: "药品档案",
          //     icon: require("@/assets/images/tree4.svg"),
          //     component: () =>
          //       import("@/views/productsMsg/components/drugArchives.vue"),
          //     meta: { title: "药品档案", icon: "netWork" },
          //   },
          //   {
          //     path: "/productsMsg/cosmeticsArchives",
          //     name: "化妆品档案",
          //     icon: require("@/assets/images/tree4.svg"),
          //     component: () =>
          //       import("@/views/productsMsg/components/cosmeticsArchives.vue"),
          //     meta: { title: "化妆品档案", icon: "netWork" },
          //   },
          //   {
          //     path: "/productsMsg/health",
          //     name: "医疗器械档案",
          //     icon: require("@/assets/images/tree4.svg"),
          //     component: () =>
          //       import("@/views/productsMsg/components/health.vue"),
          //     meta: { title: "医疗器械档案", icon: "netWork" },
          //   },
          // ],
        },
        {
          path: "/logout",
          name: "依法注销",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/logout/index"),
          meta: { title: "依法注销", icon: "netWork" },
        },

      ],
    };
  },
  computed: {
    //获取自定义路由
    myRouter() {
      // let staticRouter = router.options.routes.filter(
      //   (item) => item.isDiy == true
      // )[0].children;
      // return staticRouter;
      // return this.$store.state.myselfPermission.routerList;
      return this.$router.options.routes[6].children;
    },
  },
  methods:{
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .body-container {
    height: calc(100vh - 50px);
    display: flex;
    align-items: center;
    & > div {
      height: 100%;
    }
    // .tree-menu {
    //   background: #465970;
    //   width: 220px;
    //   box-sizing: border-box;
    //   padding: 14px 10px;
    //   & > div {
    //     width: 200px;
    //     height: 40px;
    //     display: flex;
    //     align-items: center;
    //     font-size: 14px;
    //     font-weight: 400;
    //     color: #ffffff;
    //     padding: 0 10px;
    //     cursor: pointer;
    //     .router-icon {
    //       display: inline-block;
    //       height: 14px;
    //       width: 14px;
    //       margin-right: 10px;
    //     }
    //   }
    // }
    // .view-box {
    //   flex: 1;
    //   height: 100%;
    //   background: #f2f2f2;

    //   overflow: hidden;
    // }
    // .child-views {
    //   height: calc(100% - 40px);
    //   width: 100%;
    //   box-sizing: border-box;
    //   padding: 10px;
    // }
    // 左边侧边栏
.sidebar_content {
  width: 100%;
  height: 94.5%;
  display: flex;
  .mycontent-left {
    width: 18%;
    height: 100%;
    background: #465970;
    .el-menu-vertical-demo {
      box-sizing: border-box;

      background: #465970;
      color: #ffffff;
      overflow: hidden;
      height: 100%;
      .title_img {
        width: vw(20);
        margin-right: vw(10);
      }
      ::v-deep .el-submenu__title {
        font-size: vw(16);
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        height: vh(80);
        line-height: vh(80);
        &:hover {
          background: none;
        }
      }
      ::v-deep .el-menu-item-group__title {
        padding: 0;
      }
      ::v-deep .el-submenu .el-menu-item {
        margin: vh(5) 0;
        height: vh(60);
        line-height: vh(60);
        min-width: 100%;
        font-size: vw(16);
        font-family: Source Han Regular CN;
        font-weight: 400;
        color: #b6cbe4;
        box-sizing: border-box;

        &:hover {
          background: #1e80eb;
          border-radius: vw(5);
          color: #ffffff;
        }
      }
      ::v-deep .el-menu-item.is-active {
        box-sizing: border-box;
        font-size: vw(16);
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        background: #1e80eb;
        border-radius: vw(5);
      }
      ::v-deep .el-submenu__icon-arrow {
        box-sizing: border-box;
        font-size: vw(16);
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
      ::v-deep .el-menu {
        padding: 0 vw(20);
        box-sizing: border-box;
        background: #465970;
      }
    }
  }

  //   右侧内容
    .mycontent-content {
      width: 100%;
      height: 100%;
      padding: vw(0) vw(18) vh(18);
      background: #f2f2f2;
      .mycontent-content-title {
        display: flex;
        align-items: center;
        margin: vh(13) vw(7);
        .title-icon,
        .title-font {
          font-size: vw(14);
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #292f38;
        }
        .title-icon {
          margin: 0 vw(5) 0 0;
          font-size: vw(18);
          color: #1e80eb;
        }
      }
    }
  }
  }
  .routerActive {
    background: #1e80eb;
    border-radius: 4px;
  }
  .view-child {
    display: flex;
    align-items: center;
  }
}
</style>