lzga-doc/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 == '/home/page'
                    ? icoUrl[0]['home1']
                    : icoUrl[0]['home2']
                "
              /> </span
            >首页
          </el-menu-item>
          <el-menu-item index="/home/retrieval">
            <span class="nav1">
              <img :src="
              srcIndex == '/home/retrieval'
              ?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>
            <el-menu-item index="/home/file/part" >部门文档</el-menu-item>
            <el-menu-item index="/home/file/publi" >公共文档</el-menu-item>
            <el-menu-item index="/home/file/individual" >个人文档</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-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>
            <el-menu-item index="/home/personal/classify"
              >个人文档分类</el-menu-item
            >
            <el-menu-item index="/home/personal/space"
              >个人存储空间</el-menu-item
            >
            <el-menu-item index="/home/personal/modify"
              >登录密码修改</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-menu-item index="/home/group/subgroup">分组成员</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">孙芳</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 page from "./Page/PageView";
// import retrieval from "./Retrieval/RetrievalView";
// import file from "./File/FileView";
// import personal from "./Personal/PersonalView";
// import system from "./System/SystemView";

export default {
  data() {
    return {
      activeIndex: "",
      srcIndex: '',
      // 图片数组
      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'),
        }
      ],
      
    };
  },
  // components: {
  //   page,
  //   retrieval,
  //   file,
  //   personal,
  //   system
  // },
  methods: {
    handleSelect(key, keyPath) {
      this.srcIndex = keyPath[0];
      // console.log(this.srcIndex,keyPath);
      // console.log(key);
    },
    exit(){
      alert('你确定要注销界面吗？')
      this.$router.push('/login1')
    }
  },
};
</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 * (100 / 1920));
        height: calc(100vh * (40 / 1080));
        margin-left: calc(100vw * (140 / 1920));
        display: flex;
        justify-content: space-between;
        align-items: center;
        .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>