gdy_qywx_pc/src/views/layout/Layout.vue

<template>
  <div class="app-wrapper" :class="classObj">
    <div class="main-container">
      <navbar></navbar>
      <div class="main-content">
        <div class="app-content">
          <sidebar class="sidebar-container" v-if="show_sidebar" :classObj="classObj"></sidebar>
          <app-main></app-main>
        </div>
        <div class="footer_copyright" :class="show_sidebar?'footer_copyright_margin':''">Copyright © {{$moment().format("YYYY")}} 广东功道云数字科技有限公司 All Rights Reserved</div>
      </div>
    </div>
  </div>

</template>

<script>
  import {
    Navbar,
    Sidebar,
    AppMain
  } from './components'

  import ResizeMixin from './mixin/ResizeHandler'

  export default {
    name: 'layout',
    data() {
      return {
        video_show_box: true,
        video_show: true,
        show_sidebar: false,
        route_detail: this.$route.path
      }
    },

    components: {
      Navbar,
      Sidebar,
      AppMain,
    },

    mixins: [ResizeMixin],
    computed: {
      sidebar() {
        return this.$store.state.app.sidebar
      },
      device() {
        return this.$store.state.app.device
      },
      classObj() {
        return {
          // hideSidebar: !this.sidebar.opened,
          openSidebar: this.sidebar.opened,
          withoutAnimation: this.sidebar.withoutAnimation,
          mobile: this.device === 'mobile'
        }
      }
    },
    methods: {
      // handleClickOutside() {
      //   this.$store.dispatch('closeSideBar', {
      //     withoutAnimation: false
      //   })
      // }
    },
    watch:{
      $route(to,from){//当点击首页或刚进入时，左边导航栏不显示
        if(to.path === '/index' || to.path === '/workbench_blank'){
          this.show_sidebar = false
        }else{
          this.show_sidebar = true
        }
      }
    },
    created(){//当点击首页或刚进入时，左边导航栏不显示
      if(this.$route.path === '/index' || this.$route.path === '/workbench_blank'){
        this.show_sidebar = false
      }else{
        this.show_sidebar = true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-content{
    width: 1200px;
    margin: 0 auto;
    // height: calc(100% - 60px);
    position: relative;
  }
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .main-content{
    background-color:rgba(244, 246, 249, 1);
    padding-top: 60px; 
    height: 100%; 
    overflow-y: scroll;
  }


/*滚动条的宽度*/

.main-content::-webkit-scrollbar {
  width:9px;
  height:9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.main-content::-webkit-scrollbar-track {
  width: 3px;
  background-color:#fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}

/*滚动条的设置*/

.main-content::-webkit-scrollbar-thumb {
  background-color:#fff0;
  background-clip:padding-box;
  min-height:28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}
/*滚动条移上去的背景*/

.main-content:hover::-webkit-scrollbar-thumb{
  background-color:rgba(144,147,153,.3);
}

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .el-submenu__icon-arrow {
    margin-top: 0 !important;
  }
  .footer_copyright{
	padding-bottom: 10px;
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #606266;
    width: 1200px;
    margin: 0 auto;
  }
  .footer_copyright_margin{
    padding-left: 200px;
  }
</style>