platform-customsdeclaration-ssr/layouts/default.vue

<template>
  <div class="default">
    <el-container>
      <el-header>
        <header-view @hasEvent="hasClick"/>
      </el-header>
      <el-container style="width:1360px;margin:0 auto; background:#f2f7fb">
        <el-aside :style="loadWidth === true ? width30 : width160" style="overflow:hidden;background: #fff;">
          <left-side :isTab="hasTab" @collapseEvent="setWidth"/>
        </el-aside>
        <el-main style="background: #fff;margin-left:10px;padding:0;padding-bottom: 100px">
          <div class="top"></div>
          <nuxt/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import { Header, LeftSide } from '@/components/default'
  export default {
    name: 'DefaultView',
    components: {
      HeaderView: Header,
      LeftSide
    },
    data () {
      return {
        loadWidth: false,
        hasTab: '',
        width30: {
          width:'30px'
        },
        width160: {
          width:'160px'
        }
      }
    },
    mounted() {
      this.$route.path.indexOf('severPage') !== -1 ?  this.hasTab = 'sever' : this.hasTab = 'client'
    },
    methods: {
      setWidth (type) {
        this.loadWidth = type
      },
      hasClick (type) {
        this.hasTab = type
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
  .el-header{
    padding:0;
    height: 130px !important;
    margin-bottom:20px;
    -moz-box-shadow: 0  5px 5px #bcd2ff;
    box-shadow:0  5px 5px #bcd2ff;
    overflow: hidden;
  }
  .top{
    height: 30px;
    background: #b9dbfa;
    margin-bottom:15px;
  }

</style>