FE_middlePlatform_server/src/views/Home.vue

<template>
  <div class="wrapper">
    <v-head></v-head>
    <Navbar></Navbar>
    <div class="layout">
      <Sidebar :class="{ show: showSidebar }" :path.sync="path" />
      <div class="content-box">
        <transition name="move" mode="out-in">
          <router-view></router-view>
        </transition>
        <el-backtop target=".content-box"></el-backtop>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from '../components/Header.vue'
import Navbar from '../components/Navbar.vue'
import Sidebar from '../components/Sidebar.vue'
import Setting from "@/setting"
import util from "@/libs/util"
export default {
  data () {
    return {
      showSidebar: false,
      path: '',
    };
  },
  components: {
    vHead,
    Navbar,
    Sidebar,
  },
  watch: {
    '$route.path': {
      handler (val) {
        this.path = val
        // 是否显示左侧导航
        this.showSidebar = ['/configure', '/curriculum', '/information', '/shop', '/market', '/parnerOperation', '/parner', '/match', '/data', '/review', '/theoreticalCourse', '/resourse'].includes(val)
      },
      immediate: true
    }
  },
  created () {

  },
  methods: {
    // 长时间未操作,自动退出登录
    autoLogout () {
      let lastTime = new Date().getTime();
      document.onmousedown = () => {
        lastTime = new Date().getTime();
      };

      const timer = setInterval(() => {
        if (sessionStorage.getItem('token') && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) {
          clearInterval(timer)
          util.errorMsg("由于您已经有三个小时没有操作，系统自动登出，请重新登录。页面刷新到登录页。");
          setTimeout(() => {
            localStorage.removeItem('ms_username');
            localStorage.removeItem('token');
            sessionStorage.clear()
            location.reload()
          }, 1500);
        }
      }, 1000);
    }
  }
};
</script>


<style lang="scss" scoped>
.layout {
  display: flex;
  background: #f5f7fa;

  .content-box {
    width: calc(100vw - 208px);
    padding: 20px;
    box-sizing: border-box;
    // -webkit-transition: left 0.3s ease-in-out;
    // transition: left 0.3s ease-in-out;
  }

  .sidebar:not(.show) {
    margin-left: -200px;

    &+.content-box {
      width: 100%;
    }
  }
}
</style>