flyLong/pc/src/views/Index.vue

<template>
  <div class="IndexContainer">
    <el-container>
      <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
        <Navside :isCollapse="isCollapse"></Navside>
      </el-aside>
      <el-container>
        <el-header>
          <Headside @lefthide="left_hide"></Headside>
        </el-header>
        <el-main>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
        <el-footer v-if="true"><p class="footer">济南佰意兴网络科技有限公司提供技术支持</p></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import Headside from '@/components/Headside.vue'
import Navside from '@/components/Navside.vue'
import Navs from '../api/Navs';

export default {
  name: 'Home',
  data() {
    return {
      isCollapse: document.body.clientWidth < 1366,
      aSideState: false,
      thisClick: 0,
      tabwildState: 1,
      navs: Navs,
      handleTabsList: [{
        title: '系统首页',
        name: '1',
        clmurl: '/',
      }],
      editableTabsValue: '1'
    }
  },
  mounted() {
    // checkScreen
    if (document.body.clientWidth < 1024) {
      this.$message.warning('请横屏使用本系统');
    }
  },
  methods: {
    left_hide() {
      this.aSideState = !this.aSideState;
      this.isCollapse = !this.isCollapse;
    },
  },
  components: {
    Headside,
    Navside
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-header {
  padding: 0 !important;
  height: 72px !important;
}

.shortElaside {
  width: 140px !important;
  overflow: hidden;
  height: 100%;
  float: left;
}

.lognElaside {
  width: 256px !important;
  overflow: hidden;
  height: 100%;
  float: left;
}

/deep/ .nav {
  width: 60px;
}

.IndexContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #F0F2F5;
}

.IndexContainer > .el-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 10px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-indent: -30%;
  font-size: 12px;
  color: #BDBDBD;
  background: #F0F2F5;
  z-index: 222;
}

.el-main {
  width: 100%;
  height: 100%;
  /*min-height: 800px;*/
  overflow: hidden;
  display: block;
  margin: 0 auto;
  overflow-y: hidden;
  padding: 10px 20px;
}

/*ipad only*/
@media only screen and (max-width: 1366px) {
  .lognElaside {
    width: 70px!important;
  }
  .logoContainer img {
    display: none!important;
  }
  .el-main {
    padding: 3px!important;
    overflow-y: scroll;
  }
  .el-main > .context {
    /*height: 640px;*/
    /*overflow-y: scroll;*/
    padding: 6px!important;
  }
  .table {
    /*width: 950px;*/
    /*overflow-x: scroll;*/
  }
  .el-dialog {
    max-width: 960px;
  }
  .el-dialog__body {
    padding: 3px;
  }
  .el-transfer__buttons {
    width: 60px;
    padding: 3px;
  }
  .el-transfer .el-button + .el-button {
    float: right;
  }
  .el-container.is-vertical {
    position: absolute;
    left: 140px;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
  }
  .context {
    border-radius: 12px;
    height: 823px!important;
    overflow-y: scroll;
  }
  .el-dialog {
    padding: 5px;
    padding-bottom: 15px;
  }
}
</style>