hb_sis_zhfx/src/App.vue

<template>
  <div v-if="isLogined" class="main">
    <div class="header-body">
      <div class="header-title">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.667vh" height="3.704vh" viewBox="0 0 377.437 91.615" enable-background="new 0 0 377.437 91.615" xml:space="preserve">
          <g id="图层_1">
            <g>
              <path
                id="XMLID_489_"
                fill="#FFF"
                d="M148.946,81.252c-6.114,0-10.656-4.561-10.656-10.33v-0.061c0-5.708,4.448-10.389,10.833-10.389c3.919,0,6.269,1.265,8.197,3.103l-2.912,3.241c-1.602-1.407-3.233-2.266-5.315-2.266c-3.503,0-6.025,2.811-6.025,6.256v0.055c0,3.444,2.463,6.313,6.025,6.313c2.378,0,3.833-0.915,5.468-2.35l2.909,2.84C155.329,79.877,152.955,81.252,148.946,81.252z"
              />
              <polygon id="XMLID_488_" fill="#FFF" points="173.271,60.817 173.271,68.472 164.839,68.472 164.839,60.817 160.263,60.817 160.263,80.907 164.839,80.907 164.839,72.547 173.271,72.547 173.271,80.907 177.843,80.907 177.843,60.817" />
              <path id="XMLID_486_" fill="#FFF" d="M195.929,80.907l-10.063-12.77v12.77h-4.516v-20.09h4.214l9.743,12.373V60.817h4.514v20.09H195.929z" />
              <path
                id="XMLID_484_"
                fill="#FFF"
                d="M304.535,81.252c-6.47,0-10.928-4.39-10.928-10.33v-0.061c0-5.708,4.606-10.389,10.901-10.389c3.741,0,5.992,0.845,8.429,2.482l-2.564,3.243c-1.789-1.208-3.028-1.694-6.012-1.646c-3.325,0.055-5.967,2.839-5.967,6.256v0.055c0,3.676,2.607,6.374,6.291,6.374c1.664,0,3.146-0.401,4.307-1.206v-2.871h-2.908v-3.817h7.332v8.725C311.277,79.817,308.336,81.252,304.535,81.252z"
              />
              <path id="XMLID_482_" fill="#FFF" d="M245.533,80.907l-10.063-12.77v12.77h-4.515v-20.09h4.213l9.744,12.373V60.817h4.513v20.09H245.533z" />
              <path id="XMLID_480_" fill="#FFF" d="M321.476,80.907v-8.793l-6.949-11.297h5.346l4.361,7.936l4.397-7.936h5.196l-6.951,11.238v8.853H321.476z" />
              <polygon fill="#FFF" points="228.012,64.895 228.012,60.817 211.357,60.817 211.357,80.907 228.012,80.907 228.012,76.83 215.967,76.83 215.967,72.831 226.732,72.831 226.732,68.753 215.967,68.753 215.967,64.895 " />
              <polygon fill="#FFF" points="269.557,64.895 269.557,60.817 252.902,60.817 252.902,80.907 269.557,80.907 269.557,76.83 257.511,76.83 257.511,72.831 268.277,72.831 268.277,68.753 257.511,68.753 257.511,64.895 " />
              <path
                fill="#FFF"
                d="M291.333,80.907l-3.983-7.74c2.177-1.005,3.696-3.265,3.696-5.896v0c0-3.564-2.784-6.454-6.22-6.454H272.98v20.09h4.57v-7.182h5.515l3.695,7.182H291.333z M277.55,64.895h6.774c1.265,0,2.29,1.064,2.29,2.376v0c0,1.312-1.025,2.376-2.29,2.376h-6.774V64.895z"
              />
            </g>
            <g>
              <g>
                <path
                  id="XMLID_479_"
                  fill="#FFF"
                  d="M167.55,39.067h-1.561c-0.546-2.03-1.035-3.547-1.82-5.373l-4.36-0.004
c0.771,2.025,1.339,3.833,1.692,5.377h-3.128v-6.282h8.215v-3.861h-8.215v-4.49h8.393v-3.899h-21.599v3.899h8.101v4.49h-7.686
v3.861h7.686v6.282h-8.758v3.976h23.04V39.067z"
                />
                <path
                  id="XMLID_476_"
                  fill="#FFF"
                  d="M170.113,14.394l-28.202,0.001c-2.03,0-3.621,1.457-3.621,3.316l0.002,28.005c0.001,2.115,1.9,3.424,3.66,3.424h28.409c0.824,0,1.732-0.351,2.432-0.939c0.807-0.679,1.251-1.602,1.251-2.596l-0.001-27.778C174.042,15.742,172.5,14.394,170.113,14.394z M168.858,18.367v26.724l-25.463,0V18.369L168.858,18.367z"
                />
              </g>
              <g>
                <path
                  id="XMLID_475_"
                  fill="#FFF"
                  d="M234.621,16.644h-4.845l2.238,5.092h-6.883l4.632-7.075h-5.637l-4.689,7.134c-0.575,0.918-0.678,1.757-0.296,2.503c0.463,0.803,1.204,1.227,2.21,1.26l14.021-0.001c0.056-0.004,1.374-0.119,1.961-1.121c0.408-0.696,0.352-1.623-0.169-2.754C236.499,20.237,234.621,16.644,234.621,16.644z"
                />
                <path
                  id="XMLID_471_"
                  fill="#FFF"
                  d="M236.358,27.874c-0.485-0.513-1.212-0.773-2.16-0.773h-11.46c-2.727,0-2.758,2.355-2.758,2.379v19.587h4.861v-6.638h7.269v2.625h-4.913v3.937l6.701-0.002c2.039,0,3.072-0.957,3.072-2.843l-0.001-16.651C236.971,29.456,237.012,28.565,236.358,27.874z M232.11,30.884v2.218h-7.269v-2.218H232.11z M232.11,36.658v2.215h-7.269v-2.215
H232.11z"
                />
                <path id="XMLID_470_" fill="#FFF" d="M242.25,30.455l13.047,0.002v-4.014h-10.943V25.07c7.277-2.622,11.396-9.303,11.396-9.303h-5.433c0,0-2.434,3.517-5.964,4.758v-5.864h-5.064l0.002,13.225C239.291,29.519,240.369,30.455,242.25,30.455z" />
                <path
                  id="XMLID_469_"
                  fill="#FFF"
                  d="M244.353,37.835v-6.236h-5.023l0.002,14.284c0,2.032,1.009,3.106,2.918,3.106l13.047,0v-4.051h-10.943v-2.266c6.72-2.542,11.458-10.166,11.458-10.166h-5.463C250.348,32.507,248.039,36.192,244.353,37.835z"
                />
              </g>
              <path
                fill="#FFF"
                d="M183.913,20.6h25.993v5.788h4.901l-0.001-6.153c0-2.054-1.338-3.382-3.409-3.382h-11.566v-2.773h-5.542v2.773h-11.27c-2.447,0-3.967,1.296-3.967,3.382v6.153h4.861L183.913,20.6z M206.875,37.054h2.163l4.669-9.237H208.6l-3.441,6.245c-0.656-1.251-1.267-2.746-1.791-4.375h-2.899c-0.464-0.776-1.154-1.718-1.886-2.574c0.149-0.216,0.356-0.573,0.622-1.043l0.016-0.028h9.064v-3.709h-22.71v3.709h7.542c-3.771,2.954-11.774,4.27-13.435,4.518v4.199c1.49-0.195,9.366-1.363,15.546-4.938c0.19,0.258,0.519,0.775,0.69,1.048c-4.112,4.071-14.113,5.95-16.236,6.312v4.247c1.536-0.243,10.602-1.82,17.617-6.536c0.08,0.459,0.094,0.901,0.158,1.861c-4.899,3.313-9.952,5.405-17.775,7.207v4.28c1.733-0.309,11.518-2.4,17.775-6.687v2.684c0,0.691-0.642,1.331-1.338,1.321h-5.732v3.891h7.327c2.973,0,4.516-1.455,4.516-4.354v-7.226c2.196,3.848,6.276,8.845,13.004,10.846v-4.457C213.257,43.436,208.773,40.441,206.875,37.054z"
              />
              <g>
                <polygon id="XMLID_468_" fill="#FFF" points="268.998,32.332 264.811,23.662 259.317,23.662 263.189,32.332" />
                <polygon id="XMLID_467_" fill="#FFF" points="268.756,22.309 264.964,14.394 259.558,14.394 263.006,22.309 " />
                <path
                  fill="#FFF"
                  d="M268.529,34.2h-5.266l-0.025,0.219c-0.008,0.072-1.178,6.718-4.536,14.771h5.556c3.063-6.815,4.233-14.631,4.242-14.717
L268.529,34.2z"
                />
                <path
                  id="XMLID_463_"
                  fill="#FFF"
                  d="M295.075,32.643l-0.001-9.424c0-1.685-1.122-2.613-3.159-2.613h-4.069v-1.97h8.552v-3.861l-23.179,0
c-2.138,0-3.314,1.033-3.314,2.907v15.127c0.094,4.181-0.5,10.588-2.858,16.035l-0.149,0.346h5.222l0.062-0.157
c1.788-4.525,2.667-10.194,2.667-15.55V18.636h8.272v1.97l-3.532,0c-1.978,0-3.045,1.346-3.045,2.613v9.389
c0,2.487,1.452,2.83,3.021,2.83h3.995v9.957h-2.495v3.861l4.273,0c1.978,0,3.205-1.082,3.205-2.822V35.439h3.268
C293.461,35.439,295.075,35.223,295.075,32.643z M290.214,24.198v2.064h-8.812l-0.001-2.064H290.214z M290.214,29.819v2.064
h-8.811v-2.064H290.214z"
                />
                <path
                  id="XMLID_462_"
                  fill="#FFF"
                  d="M281.646,37.1c-1.886,0-3.186,0-4.351,0c-0.627,5.028-3.023,11.032-3.023,11.032h4.543
C278.815,48.132,281.02,43.161,281.646,37.1z"
                />
                <path fill="#FFF" d="M294.034,37.1h-4.363c0.198,1.057,1.316,6.682,3.187,11.032h4.584C295.631,43.114,294.361,38.359,294.034,37.1z" />
              </g>
              <path
                fill="#FFF"
                d="M337.303,37.937h-15.507v-1.854h13.598v-3.657h-12.877v-1.711h11.708V27.22h-11.708v-1.464h11.83v-3.575h-11.83v-1.527
h12.887v-3.737h-12.847c-0.535-2.42-0.683-2.698-0.683-2.698h-5.107c0.16,0.604,0.42,1.602,0.686,2.698h-7
c0.766-1.27,0.968-2.103,1.056-2.698l-4.921,0c-0.208,0.749-1.412,4.409-5.522,6.996v4.682c1.223-0.327,1.979-0.9,2.491-1.249
v8.921c0,0.873,0.251,1.537,0.746,1.975c0.768,0.681,1.833,0.543,1.844,0.539h10.504v1.854h-15.305v3.938h5.432
c-0.691,1.998-3.551,6.909-3.551,6.909h5.647c0,0,2.693-4.816,3.358-6.909h4.418v7.381h5.146v-7.381h4.416
c0.857,2.406,3.469,6.909,3.469,6.909h5.637c0,0-2.983-5.131-3.66-6.909h5.646V37.937z M317.453,32.427H308.5v-1.711h8.953V32.427
z M317.453,27.22H308.5v-1.464h8.953V27.22z M317.453,22.181H308.5v-1.527h8.953V22.181z"
              />
              <g>
                <path
                  fill="#FFF"
                  id="XMLID_459_"
                  d="M377.435,18.514c0-2.424-1.459-3.814-4.004-3.814l-27.645,0.001c-2.516,0-3.901,1.322-3.901,3.723
l0.005,27.152c0,2.556,1.81,3.449,4.039,3.449l0.046,0.003l27.269-0.003c2.292,0,4.193-0.972,4.193-3.449L377.435,18.514z
 M372.292,44.977h-25.341V18.675l25.34-0.003L372.292,44.977z"
                />
                <path
                  fill="#FFF"
                  d="M366.732,23.889v-4.182h-5.146v4.182h-12.902v4.052h8.563c-1.48,3.031-5.104,7.505-8.642,9.59v4.647
c6.305-2.621,10.252-7.973,12.981-12.76v10.448h-6.755v4.014h7.576c2.708,0,4.325-1.467,4.325-3.923V27.941h4.158v-4.052H366.732
z"
                />
              </g>
            </g>
            <g>
              <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="61.5049" y1="30.1548" x2="61.5049" y2="66.792">
                <stop offset="0" style="stop-color:#F6AB00" />
                <stop offset="0.5" style="stop-color:#D84C14" />
                <stop offset="0.75" style="stop-color:#CC2A1C" />
                <stop offset="1" style="stop-color:#C11920" />
              </linearGradient>
              <path
                fill="url(#SVGID_1_)"
                d="M102.96,39.692L77.737,64.915l-2.879-2.878l23.934-23.932c-6.846-2.449-14.003-4.243-21.396-5.306
			L61.508,48.687l-2.879-2.879l13.626-13.625c-3.539-0.341-7.127-0.518-10.756-0.518c-5.668,0-11.237,0.427-16.676,1.249
			L31.928,45.808l16.229,16.229l-2.879,2.878L26.171,45.808l11.593-11.593C25.018,37,13.093,41.981,2.406,48.742l42.873,42.874
			l16.229-16.229l16.229,16.229l42.867-42.867C115.039,45.228,109.138,42.189,102.96,39.692z"
              />
              <path
                id="XMLID_457_"
                fill="none"
                d="M122.614,44.877l-12.419-12.419L77.737,64.915l-2.879-2.878l31.538-31.538
			c0.509-0.508,0.509-1.332,0-1.84l-12.43-12.431L61.508,48.687l-2.879-2.879L90.26,14.176c0.456-0.456,0.456-1.196,0-1.652
			L77.737,0L31.928,45.808l16.229,16.229l-2.879,2.878L26.171,45.808l31.467-31.466c0.547-0.547,0.547-1.435,0-1.982L45.279,0
			L0.374,44.906c-0.498,0.498-0.498,1.306,0,1.804l44.905,44.905l16.229-16.229l16.229,16.229l44.877-44.876
			C123.128,46.225,123.128,45.391,122.614,44.877z"
              />
            </g>
          </g>
          <g id="图层_3">
            <path
              id="XMLID_458_"
              fill="#C11920"
              d="M122.614,44.877l-12.419-12.419L77.737,64.915l-2.879-2.878l31.538-31.538
c0.509-0.508,0.509-1.332,0-1.84l-12.43-12.431L61.508,48.687l-2.879-2.879L90.26,14.176c0.456-0.456,0.456-1.196,0-1.652L77.737,0
L31.928,45.808l16.229,16.229l-2.879,2.878L26.171,45.808l31.467-31.466c0.547-0.547,0.547-1.435,0-1.982L45.279,0L0.374,44.906
c-0.498,0.498-0.498,1.306,0,1.804l44.905,44.905l16.229-16.229l16.229,16.229l44.877-44.876
C123.128,46.225,123.128,45.391,122.614,44.877z"
            />
          </g>
          <g id="图层_2">
            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="61.5" y1="30.1548" x2="61.5" y2="66.792">
              <stop offset="0" style="stop-color:#F6AB00" />
              <stop offset="0.5" style="stop-color:#D84C14" />
              <stop offset="0.75" style="stop-color:#CC2A1C" />
              <stop offset="1" style="stop-color:#C11920" />
            </linearGradient>
            <path
              fill="url(#SVGID_2_)"
              d="M102.956,39.692L77.732,64.915l-2.879-2.878l23.934-23.932c-6.846-2.449-14.003-4.243-21.396-5.306
L61.503,48.687l-2.879-2.879L72.25,32.182c-3.539-0.341-7.127-0.518-10.756-0.518c-5.668,0-11.237,0.427-16.676,1.249
L31.923,45.808l16.229,16.229l-2.879,2.878L26.167,45.808l11.593-11.593C25.013,37,13.088,41.981,2.401,48.742l42.873,42.874
l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956,39.692z"
            />
          </g>
          <g id="图层_4"></g>
        </svg>
      </div>
      <div class="header-menu-body"><Header @onMenuClick="HeaderMenuClick" /></div>
    </div>
    <div class="menu-body" :class="{ hover: isShowMenu }" @mouseenter="showMenu" @mouseleave="hideMenu"><Menu :root="root" /></div>
    <div class="main-body">
      <router-view />
    </div>
  </div>
  <login-page v-if="!isLogined" @onLogin="login" />
</template>

<script>
// 导入header.vue文件
import Menu from "@/views/layout/Menu.vue";
import Header from "@/views/layout/Header.vue";

import { mapMutations } from "vuex";

import LoginPage from "./views/layout/login-page.vue";
export default {
  components: {
    Menu,
    Header,
    LoginPage,
  },

  data() {
    return {
      isShowMenu: false,
      // 当前子系统
      root: "",
      isLogined: true,
      memuCloseTimeout: null,
    };
  },

  created() {
    let that = this;
    that.$nextTick(() => {
      that.API.requestData({
        isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
        method: "POST", // 请求方式，默认为 GET ，可缺省
        subUrl: "admin/loginvue", // 请求接口地址，必传项
        data: {
          username: "admin",
          password: "admin",
        },
        success(res) {
          localStorage.setItem("authToken", res.data.authToken);
          localStorage.setItem("username", res.data.user.laborName);

          that.API.requestData({
            method: "POST", // 请求方式，默认为 GET ，可缺省
            subUrl: "admin/usermenu", // 请求接口地址，必传项
            success() {
              // that.BASE.showMsg({
              //   msg: "登陆成功",
              //   type: "success",
              // });
              // that.$router.push('/'); // 跳转到首页
            },
          });
        },
      });
    });
  },
  
  methods: {
    // 切换子系统事件
    HeaderMenuClick(data) {
      this.root = data.id;
    },
    showMenu() {
      this.isShowMenu = true;
      this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
    },
    hideMenu() {
      const that = this;
      this.memuCloseTimeout = setTimeout(function(){
        that.isShowMenu = false;
      }, 500 )
      
    },
    login(params) {
      if (params.username && params.password) this.isLogined = true;
    },
  },
};
</script>

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

* {
  box-sizing: border-box;

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

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

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

body {
  margin: 0;
  background: #fff;
  color: #fff;
  background-image: url("./assets/background.png");
  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;
  .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: 99;
    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;
    // }
  }
}
</style>