sportCms/src/views/Index/Index.vue

<template>
  <div class="IndexContainer">

    <el-container>
      <el-aside :class="[{ 'shortElaside': isCollapse }, { 'lognElaside': !isCollapse }]">
        <Navside :isCollapse="isCollapse" @lefthide="leftHide" @refreshList="addTabs"></Navside>
      </el-aside>

      <el-container>
        <el-header>
          <Headside @lefthide="leftHide" :tableTabs="tableTabs"></Headside>
        </el-header>
        <el-main :style="{'height': clientHeight+'px'}">
          <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: true,
      aSideState: false,
      clientHeight: document.documentElement.clientHeight - 50,
      tableTabs:[],
      editableTabsValue: '1',
    }
  },
  mounted() {
    console.log();
    // checkScreen
    if (document.body.clientWidth < 768) {
      this.$message.warning('请横屏使用本系统');
    }
  },
  methods: {
    //控制添加tab标签
    addTabs(v) {
      let notExist = true;
      let existIndex = -1;
      this.tableTabs.forEach((tab, index) => {
        if(tab.clmurl == v.clmurl){
          notExist = false;
          existIndex = index;
          this.editableTabsValue = tab.title;
          return false;
        }
      });
      if(notExist){
        this.tableTabs.push(v);
      }else{
        console.log(this.editableTabsValue);
        // this.tableTabs.splice(existIndex,1);
        // console.log(this.tableTabs[0]);
      }
    },
    //控制显示左侧导航栏
    leftHide() {
      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;
}

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

.shortElaside {
  width: 72px !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: scroll;
  padding: 10px 20px;
  padding-bottom: 60px;
  margin-bottom: 30px;
}


@media (min-width: 320px) and (max-width: 1367px) {
  .el-header {
    height: 40px !important;
  }

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

  .el-container.is-vertical {
    left: 60px;
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }

  .el-transfer__buttons {
    width: 20px;
    padding: 3px;
  }

  .el-transfer .el-transfer__buttons {
    width: 60px;
    padding: 3px;
  }

  .el-transfer .el-button + .el-button {
    float: right;
  }

  /*.context {
  border-radius: 12px;
  height: 823px !important;
  overflow-y: scroll;
}*/
  .el-dialog {
    padding: 5px;
    padding-bottom: 15px;
  }

  .el-aside.lognElaside {
    width: 100px !important;
  }

  .logoContainer img {
    display: none !important;
  }

  .el-main {
    position: relative;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    padding-bottom: 60px;
    margin-bottom: 30px;
  }

  .el-main > .context {
    /*height: 640px;*/
    /*overflow-y: scroll;*/
    padding: 6px !important;
  }

  .table {
    /*width: 950px;*/
    /*overflow-x: scroll;*/
  }

  .el-dialog {
    max-width: 960px;
  }

  /deep/ .el-footer {
    display: none;
  }

  .footer {
    display: none;
    height: 14px;
    padding: 3px;
  }
}
</style>