vue-web-frame/src/App.vue

<template>
  <div class="main">
    <!-- 顶部菜单 -->
    <el-container v-if="!$store.state.showLoginPage">
      <el-header class="currentHeader" v-if="hideHeard === '0'">
        <div class="l">LOGO或者其他的什么</div>
        <Menu class="r" />
        <div class="userBox">
          <el-button
            type="text"
            style="color: #fff"
            v-if="!authToken"
            @click="goLogin"
            >登录</el-button
          >
          <el-popover
            popper-class="loginBoxPopover"
            placement="bottom"
            :width="150"
            trigger="hover"
            :show-arrow="false"
            v-else
          >
            <template #reference>
              <el-button type="text" style="color: #fff; font-size: 16px">{{
                username
              }}</el-button>
            </template>
            <div style="background-color: rgb(rgb(4, 12, 11))">
              <el-button
                type="text"
                style="color: #fff; width: 100%"
                @click="loginOut"
                >退&nbsp;出&nbsp;登&nbsp;录</el-button
              >
            </div>
          </el-popover>
        </div>
      </el-header>
      <el-main style="padding: 0">
        <router-view :key="$route.fullPath" v-if="authToken" />
      </el-main>
    </el-container>
    <LoginPage v-else />
  </div>
</template>
<script>
import $ from "jquery";
import LoginPage from "./views/user/login.vue";
import Menu from "./views/menu/index.vue";
import { useRoute, useRouter } from "vue-router";
export default {
  components: {
    LoginPage,
    Menu,
  },

  data() {
    return {
      menu: [],
      defalutActiveMenu: "",
      hideMenus: "0",
      hideHeard: "0",
      username: localStorage.getItem("username"),
      authToken: localStorage.getItem("authToken"),
    };
  },

  created() {
    let that = this;

    const themeName = that.$store.state.themeName;
    $("#appBody").attr(
      "class",
      themeName === "dark" || themeName === "light" ? themeName : "dark"
    );
  },

  mounted() {
    // console.log(111, useRoute());
    // console.log(222, useRouter().options.routes);
  },

  methods: {
    goLogin() {
      this.$store.dispatch("changeShowLoginPage", true);
    },

    loginOut() {
      localStorage.setItem("authToken", "");
      this.authToken = "";
      this.$store.dispatch("changeShowLoginPage", true);
    },
  },

  watch: {
    $route(res) {
      this.hideHeard = res.query.hideheard || "0";
      this.hideMenus = res.query.hidemenus || "0";

      if (res.query.theme) {
        const theme = res.query.theme === "dark" ? "dark" : "light";
        this.$store.dispatch("changeTheme", theme);
        $("#appBody").attr("class", theme);
      }

      if (res.query.fn) {
        this[res.query.fn] && this[res.query.fn]();
      }

      if (localStorage.getItem("authToken")) {
        this.$store.dispatch("changeShowLoginPage", false);
      } else {
        this.$store.dispatch("changeShowLoginPage", true);
      }
    },
    "$store.state.moudleName"(msg) {
      if (window.__MODE__.showModuleName && msg) {
        this.BASE.showMsg({
          type: this.$store.state.themeName === "dark" ? "success" : "warning",
          showClose: true,
          msg,
        });
      }
    },
  },
};
</script>

<style lang="less">
@import "./assets/styles/main.less";

html,
body,
#app {
  width: 100%;
  height: 100%;

  .el-container.is-vertical {
    .menubar {
      float: right;
    }
  }
}

* {
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track-piece {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: fade(@gray, 75);
    border-radius: 4px;
    outline: none;
    outline-offset: 0px;
    border: none;
  }
}

#appBody {
  .el-popper.is-light {
    border: 1px solid rgba(4, 12, 11);
  }
}
// 横向菜单
.el-menu--horizontal {
  .el-menu-item {
    background: transparent !important;
  }

  .el-menu-item:hover {
    background: linear-gradient(
      to top,
      rgba(5, 187, 76, 0.5),
      rgba(5, 187, 76, 0)
    ) !important;
  }
}
// 纵向菜单
.el-menu--vertical {
  .el-menu {
    background: rgb(4, 12, 11);

    .el-menu-item,
    .el-sub-menu__title {
      color: #fff;
    }

    .el-menu-item:hover,
    .el-sub-menu__title:hover {
      background: linear-gradient(
        to top,
        rgba(5, 187, 76, 0.5),
        rgba(5, 187, 76, 0)
      );
      transition: 0.2s;
    }
  }
}

body {
  margin: 0;
  background: #fff;
  color: #fff;
  // background-image: url("./assets/background.png");
  background: rgb(4, 12, 11);
  background-size: cover;
  font-size: @fontsize;
  font-family: @defalut-font-family;
}
@menuWidth: 5.37vh;
@headerHeight: 4.63vh;
.main {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  .menuIconBox {
    width: 100%;
    height: 63px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.25s;

    .menuIcon {
      font-size: 20px;
      color: #fff;
      transition: 0.25s;
    }

    &:hover .menuIcon {
      font-size: 32px;
      color: #fff;
      cursor: pointer;
      transition: 0.25s;
    }
  }

  .el-menu--collapse .el-sub-menu.is-active i {
    color: #05bb4c;
  }

  .el-menu {
    border-color: rgb(4, 12, 11);

    .el-menu-item,
    .el-sub-menu__title {
      color: #fff;
    }

    .el-menu-item:hover,
    .el-sub-menu__title:hover {
      background: linear-gradient(
        to top,
        rgba(5, 187, 76, 0.5),
        rgba(5, 187, 76, 0)
      );
      transition: 0.2s;
    }

    .el-menu-item.is-active {
      color: #05bb4c;
    }

    .el-sub-menu {
      .el-menu {
        background: rgb(4, 12, 11);
      }
    }
  }

  .header-body {
    // background: radial-gradient(closest-corner at 22% 40%, #2d5a47, #040d0a, #040d0a);
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: @headerHeight;
    border-bottom: 1px solid #142b29;
    .header-title {
      margin: auto;
      color: #fff;
    }
    .header-menu-body {
      flex-grow: 1;
    }
  }
  .menu-body {
    position: absolute;
    flex: 0 0 @menuWidth;
    width: @menuWidth;
    height: calc(100vh - @headerHeight);
    top: @headerHeight;
    background-color: fade(#192a26, 75%);
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.2s;
    transition-timing-function: ease-in;
    transform: translate(-@menuWidth);

    &:hover,
    &.hover {
      opacity: 1;
      transition: opacity 0.2s;
      transition-timing-function: ease-out;
      transform: translate(0);
    }
  }
  .main-body {
    flex: 0 0 calc(100vw);
    max-width: calc(100vw);
    height: calc(100vh - @headerHeight);
    padding: 1.481vh;
    // transition: flex 0.1s, margin-left 0.1s;
    // transition-timing-function: ease-in-out;
    // &.show-menu {
    //   flex: 0 0 calc(100vw - @menuWidth);
    //   margin-left: @menuWidth;
    //   transition: flex 0.1s, margin-left 0.1s;
    //   transition-timing-function: ease-in-out;
    // }
  }
  .el-table__body tr.current-row > td {
    color: #fff;
    background: rgba(66, 66, 66, 0.66) !important;
  }

  .el-transfer-panel {
    width: 450px !important;
    height: 73vh;
    background-color: #111d1c !important;
    border: 1px solid #999999 !important;

    .el-transfer-panel__body {
      height: 100% !important;

      .el-transfer-panel__list {
        height: 100% !important;
      }
    }
  }
  .el-transfer-panel .el-transfer-panel__header {
    background-color: #111d1c !important;
    color: #05bb4c !important;

    .el-checkbox .el-checkbox__label {
      color: #05bb4c !important;
    }
  }
  .el-button--primary.is-disabled,
  .el-button--primary.is-disabled:active,
  .el-button--primary.is-disabled:focus,
  .el-button--primary.is-disabled:hover {
    background-color: #05bb4c;
    border-color: #05bb4c;
  }
}
.el-tree-node__content {
  height: 40px !important;
}
.el-tree-node__label {
  font-size: 18px !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #05bb4c !important;
  display: flex;
}

.userBox {
  .loginoption {
    font-size: 16px;
    width: 150px;
    background-color: #292929;
    border: none;
    color: rgb(220, 220, 220);
  }
}

.loginBoxPopover {
  background: rgb(4, 12, 11) !important;
}
</style>

<style lang="less" scoped>
.currentHeader {
  display: flex;
  justify-content: start;
  align-content: center;

  .l,
  .r {
    height: 100%;
  }

  .l {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }

  .r {
    width: 80%;
  }

  .el-menu {
    border-color: rgb(4, 12, 11);

    .el-menu-item:hover {
      background: linear-gradient(
        to top,
        rgba(5, 187, 76, 0.5),
        rgba(5, 187, 76, 0)
      );
    }
  }

  .userBox {
    height: 60px;
    position: absolute;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>