lzga-ui/src/views1/HomeView.vue

<template>
  <div class="container">
    <div class="header">
      <div class="top">
        <div class="left">
          <span class="left1">
            <img src="../assets/img/nav-index.jpg" alt="" />
          </span>
          <span class="left2">
            <img src="../assets/img/luzhougongan.png" alt="" />
          </span>
        </div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          text-color="#006C9AFF" active-text-color="#51CFFEFF" background-color="transparent" router :stroke-width="15">
          <el-menu-item index="/home/page">
            <span class="nav1">
              <img :src="srcIndex == '0'
                  ? icoUrl[0]['home1']
                  : icoUrl[0]['home2']
                " />
            </span>首页
            <!-- <span class="nav1">
              <img :src="icoUrl[srcIndex]['home'+srcIndex]" />
            </span>首页 -->
          </el-menu-item>
          <el-menu-item index="/home/retrieval">
            <span class="nav1">
              <img :src="srcIndex == '1'
                  ? icoUrl[1]['search1']
                  : icoUrl[1]['search2']
                " /> </span>快速检索
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <span class="nav1">
                <img :src="srcIndex == '2' ? icoUrl[2]['doc1'] : icoUrl[2]['doc2']" /> </span>文档管理
            </template>
            <li v-for="(item, index) in  docMenus" :key="index">
              <el-menu-item :index="item.path">{{item.meta.title}}</el-menu-item>
            </li>
            <!-- <li v-for="(item, index) in arr" :key="index"> -->
            <!-- <el-menu-item index="/home/file/part">部门文档</el-menu-item>
            <el-menu-item index="/home/doc/public">公共文档</el-menu-item>
            <el-menu-item index="/home/file/Storage">分组文档</el-menu-item>
            <el-menu-item index="/home/file/set">文档设置</el-menu-item>
            <el-menu-item index="/home/file/level">文档级别</el-menu-item>
            <el-menu-item index="/home/file/demand">扩容申请</el-menu-item> -->
            <!-- <el-menu-item index="/home/file/individual">个人文档</el-menu-item> -->
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span class="nav1">
                <img :src="srcIndex == '3'
                    ? icoUrl[3]['person1']
                    : icoUrl[3]['person2']
                  " />
                <!-- <img src="../assets/img/nav-person1.png"> --> </span>个人设置
            </template>
            <li v-for="(item, index) in  settingMenus" :key="index">
              <el-menu-item
              :index="item.path">{{item.meta.title}}
              </el-menu-item>
            </li>
            <!-- <el-menu-item index="/home/personal/Partspace">部门存储空间</el-menu-item>
            <el-menu-item index="/home/personal/Publispace">公共存储空间</el-menu-item>
            <el-menu-item index="/home/personal/Storagespace">分组存储空间</el-menu-item>
            <el-menu-item index="/home/personal/space">个人存储空间</el-menu-item>
            <el-menu-item index="/home/personal/modify">登录密码修改</el-menu-item>
            <el-menu-item index="/home/personal/identificat">文字识别</el-menu-item> -->
          </el-submenu>
          <!-- <el-submenu index="4">
            <template slot="title">
              <span class="nav1">
                <img :src="srcIndex == '4'
                    ? icoUrl[4]['search1']
                    : icoUrl[4]['search2']
                  " /> </span>系统管理
            </template>
            <el-menu-item index="/home/system/user">用户管理</el-menu-item>
            <el-menu-item index="/home/system/role">角色管理</el-menu-item>
            <el-menu-item index="/home/system/menu">菜单管理</el-menu-item>
            <el-menu-item index="/home/system/department">部门管理</el-menu-item>
            <el-menu-item index="/home/system/post">岗位管理</el-menu-item>
            <el-menu-item index="/home/system/dictionary">字典管理</el-menu-item>
            <el-menu-item index="/home/system/parameter">参数管理</el-menu-item>
            <el-menu-item index="/home/system/notice">通知公告</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">日志管理</template>
              <el-menu-item index="/home/system/journal/operation">操作日志</el-menu-item>
              <el-menu-item index="/home/system/journal/register">登录日志</el-menu-item>
            </el-submenu>
          </el-submenu> -->
          <el-submenu index="5">
            <template slot="title">
              <span class="nav1">
                <img :src="srcIndex == '5' ? icoUrl[5]['group1'] : icoUrl[5]['group2']
                  " /> </span>分组管理
            </template>
            <el-menu-item index="/home/group/groups">分组</el-menu-item>
          </el-submenu>
        </el-menu>
        <div class="right">
          <!-- <span class="right_1">
            <img src="../assets/img/2.jpg" />
          </span> -->
          <span class="right_2">欢迎您，{{ names }}</span>
          <div class="right_3"></div>
          <span class="right_4">
            <img src="../assets/img/exit.png" @click="exit()" />
          </span>
        </div>
      </div>
      <div class="bottom"></div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import {
    constantRoutes
  } from "@/router";

  export default {
    data() {
      return {
        // activeIndex: '',
        srcIndex: "",
        // username:this.$store.username,

        // 图片数组
        icoUrl: [{
            home1: require("../assets/img/nav-home1.png"),
            home2: require("../assets/img/nav-home.png"),
          },
          {
            search1: require("../assets/img/nav-search1.png"),
            search2: require("../assets/img/nav-search.png"),
          },
          {
            doc1: require("../assets/img/nav-doc1.png"),
            doc2: require("../assets/img/nav-doc.png"),
          },
          {
            person1: require("../assets/img/nav-person1.png"),
            person2: require("../assets/img/nav-person.png"),
          },
          {
            search1: require("../assets/img/nav-setting1.png"),
            search2: require("../assets/img/nav-setting.png"),
          },
          {
            group1: require("../assets/img/nav-group1.png"),
            group2: require("../assets/img/nav-group.png"),
          },
        ]
      };
    },
    created() {
    },
    mounted() {
      this.srcIndex = localStorage.getItem('currentSrcIndex')
    },
    methods: {
      handleSelect(key, keyPath) {
        // console.log(keyPath);
        this.getSrcIndex(keyPath)
        //点击之后存到本地存储，便于刷新之后调用
        localStorage.setItem('currentSrcIndex', this.srcIndex)
      },
      getNavTable() {
        // getNavTableApi().then
      },
      getSrcIndex(keyPathArr) {
        // 如果是顶级目录，需要手动判断 srcIndex
        if (keyPathArr.length == 1) {
          if (keyPathArr[0] == '/home/page') {
            this.srcIndex = '0'
          } else if (keyPathArr[0] == '/home/retrieval') {
            this.srcIndex = '1'
          }
        } else {
          const currentSrcIndex = keyPathArr[0]
          this.srcIndex = currentSrcIndex
        }
      },
      exit() {
        alert("你确定要注销界面吗？");
        this.$router.push("/login1");
      },
    },
    computed: {
      // 文档菜单
      docMenus() {
        let docMenus = [];
        this.routers.map((menu) => {
          if (menu.path === "/home-doc") {
            docMenus = menu.children;
          }
        });
        return docMenus;
      },
      // 设置菜单
      settingMenus() {
        let settingMenus = [];
        this.routers.map((menu) => {
          // console.log(menu);
          if (menu.path === "/home-setting") {
            settingMenus = menu.children;
          }
        });
        return settingMenus;
      },

      // 所有的路由信息
      routers() {
        return this.$store.state.permission.topbarRouters;
      },
      activeIndex() {
        const path = this.$route.path;
        return path;
      },
      names() {
        const paths = this.$store.state.user.uname;
        return paths;
      },
    }
  };
</script>

<style scoped lang="scss">
  .container {
    background: #0c0827ff;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;

    .header {
      height: calc(100vh * (70 / 1080));
      width: 100%;
      padding-top: calc(100vh * (10 / 1080));

      // 顶部板块
      .top {
        height: calc(100vh * (40 / 1080));
        width: 100%;
        padding-right: calc(100vh * (17 / 1920));
        padding-left: calc(100vh * (55 / 1920));
        display: flex;

        //顶部左边板块
        .left {
          width: calc(100vw * (369 / 1920));
          height: calc(100vh * (40 / 1080));
          display: flex;

          .left1 {
            width: calc(100vw * (28 / 1920));
            height: calc(100vh * (30 / 1080));
            margin-top: calc(100vh * (8 / 1080));

            img {
              width: calc(100vw * (28 / 1920));
              height: calc(100vh * (30 / 1080));
            }
          }

          .left2 {
            width: calc(100vw * (295 / 1920));
            height: calc(100vh * (32 / 1080));
            margin-left: calc(100vw * (10 / 1920));
            margin-top: calc(100vw * (5 / 1080));

            img {
              width: calc(100vw * (295 / 1920));
              height: calc(100vh * (32 / 1080));
            }
          }
        }

        // 顶部中间板块
        .el-menu-demo {
          width: calc(100vw * (1000 / 1920));
          margin-left: calc(100vw * (280 / 1920));
          padding-bottom: calc(100vh * (8 / 1080));
          border: none;
          display: flex;

          li {
            height: calc(100vh * (40 / 1080));
            line-height: calc(100vh * (40 / 1080));
            margin-right: calc(100vw * (60 / 1920));

            :hover {
              background: #1e497cff !important;
            }
          }

          .nav1>img {
            width: calc(100vw * (24 / 1920));
            height: calc(100vh * (24 / 1080));
            margin-bottom: calc(100vw * (5 / 1920));
            margin-right: calc(100vh * (5 / 1080));
          }
        }

        // 顶部右边板块
        .right {
          width: calc(100vw * (220 / 1920));
          height: calc(100vh * (40 / 1080));
          margin-left: calc(100vw * (80 / 1920));
          display: flex;
          justify-content: space-between;
          align-items: center;
          // background: salmon;
          // .right_1>img {
          //   width: calc(100vw * (20 / 1920));
          //   height: calc(100vh * (20 / 1080));
          //   margin-right: calc(100vw * (5 / 1920));
          // }

          .right_2 {
            font-size: 12px;
            color: white;
          }

          .right_3 {
            width: 1px;
            height: 13px;
            background: #02aac0;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
          }

          .right_4>img {
            width: calc(100vw * (26 / 1920));
            height: calc(100vh * (26 / 1080));
          }
        }
      }

      //顶部下边图片板块
      .bottom {
        height: calc(100vh * (20 / 1080));
        width: 100%;
        background: url("../assets/img/nav-decorate.png");
        background-size: 100% calc(100vh * (20 / 1080));
      }
    }
  }

  ::v-deep .el-menu-item {
    padding: 0;
    padding-bottom: (100vh * (50 / 1080));
  }

  ::v-deep .el-submenu__title {
    padding: 0;
    padding-bottom: (100vh * (50 / 1080));
  }

  ::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: calc(100vh * (40 / 1080));
    line-height: calc(100vh * (40 / 1080));
  }

  ::v-deep li:hover {
    background: #1e497cff !important;
  }

  ::v-deep .el-menu--horizontal .el-menu-item:not(.isdisabled):hover {
    background: #1e497cff !important;
  }
</style>

<style>
  /* 下拉框 */
  .el-menu--horizontal .el-menu .el-menu-item {
    background: #0f1540ff !important;
  }

  .el-menu--horizontal .el-menu .el-menu-item:hover {
    background: #1e497cff !important;
    color: #ffffff !important;
  }
</style>