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="/">
            <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/file/demand">扩容申请</el-menu-item> -->
            <!-- <el-menu-item index="/home/personal/notice">通知管理</el-menu-item>

            <el-menu-item index="/home/personal/messages"
              >消息管理</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="exits = true" />
          </span>
        </div>
      </div>
      <div class="bottom"></div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>

    <!-- 退出登录界面 -->
    <div class="exits" v-if="exits">
      <el-button
        icon="el-icon-close"
        circle
        class="exits-circle"
        size="mini"
        @click="exits = false"
      ></el-button>
      <div class="top">
        <p>提示</p>
      </div>
      <div class="cen">确定注销并退出系统吗？</div>
      <div class="bottom">
        <div class="bottom-right" @click="exit1">确定</div>
        <div class="bottom-left" @click="exits = false">取消</div>

      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      //退出登录界面
      exits: false,

      // 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"),
        },
      ],
    };
  },
  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] == "/") {
          this.srcIndex = "0";
        } else if (keyPathArr[0] == "/home/retrieval") {
          this.srcIndex = "1";
        }
      } else {
        const currentSrcIndex = keyPathArr[0];
        this.srcIndex = currentSrcIndex;
      }
    },
    //退出方法
    exit1() {
      this.exits = false;
      // this.$router.push("/login1");
      this.$store.dispatch('LogOut').then(() => {
          location.href = '/login';
        })
    },
  },
  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));
          &:hover{
            cursor: pointer
          }
        }
      }
    }

    //顶部下边图片板块
    .bottom {
      height: calc(100vh * (20 / 1080));
      width: 100%;
      background: url("../assets/img/nav-decorate.png");
      background-size: 100% calc(100vh * (20 / 1080));
    }
  }
  .exits {
    width: calc(100vw * (600 / 1920));
    height: calc(100vh * (300 / 1080));
    background: url("../assets/img/Group-564.png");
    background-size: calc(100vw * (600 / 1920)) calc(100vh * (300 / 1080));
    position: absolute;
    top: 25%;
    left: 35%;
    color: #ffffff;
    .exits-circle {
      position: absolute;
      right: 8%;
      top: 18%;
      ::v-deep [class^="el-icon-"] {
        color: #02C2E3FF;
      }
    }
    .top {
      width: calc(100vw * (430 / 1920));
      height: calc(100vh * (50 / 1080));
      border-bottom: 1px solid #02618DFF;
      margin-top: calc(100vh * (30 / 1080));
      margin-left: calc(100vw * (50 / 1920));
      p {
        width: calc(100vw * (80 / 1920));
        height: calc(100vh * (50 / 1080));
        border-bottom: 3px solid #02C2E3FF;
        margin-left: calc(100vw * (30 / 1920));
      }
    }
    .cen {
      width: calc(100vw * (430 / 1920));
      height: calc(100vh * (70 / 1080));
      // background: salmon;
      margin-top: calc(100vh * (30 / 1080));
      margin-left: calc(100vw * (100 / 1920));
    }
    .bottom {
      width: calc(100vw * (220 / 1920));
      height: calc(100vh * (60 / 1080));
      margin-left: calc(100vw * (280 / 1920));
      margin-top: calc(100vh * (20 / 1080));
      display: flex;
      justify-content: space-between;
      .bottom-left {
        width: calc(100vw * (100 / 1920));
        height: calc(100vh * (60 / 1080));
        background: #02C2E31F ;
        border: 1px solid #02C2E3FF;
        text-align: center;
        line-height: calc(100vh * (60 / 1080));
        border-radius: 12%;
      }
      .bottom-right {
        width: calc(100vw * (100 / 1920));
        height: calc(100vh * (60 / 1080));
        background: #1E5095FF;
        border: 1px solid #02C2E3FF;
        text-align: center;
        line-height: calc(100vh * (60 / 1080));
        border-radius: 15%;
      }
    }
  }
}

::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;
}
//退出登录弹窗里面的按钮
::v-deep .el-button--mini.is-circle {
  background: transparent;
  border: 1px solid #02C2E3FF;
}
</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>