question-bank-web/src/views/main.vue

<template>
  <el-container>
    <el-aside width="200px">
      <AsideMenu :collapse="isCollapseMenu" />
    </el-aside>

    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4" style="text-align: left;padding-left: 10px;">
             <i class="el-icon-star-on"></i>
            &nbsp;
            <label style="font-size: 16px;">真不错</label>
          </el-col>
          <el-col :span="2" :offset="18">
            <el-dropdown style="cursor: pointer;">
              <el-avatar icon="el-icon-user-solid" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);"/>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link :to="{name: 'Logout'}">退出登录</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main :style="{height: (screenHeight - 60) + 'px', padding: 0 + 'px ' + 10 + 'px', paddingTop: 10 + 'px'}">
        <transition name="el-fade-in-linear">
          <router-view />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import AsideMenu from '@/components/layout/aside-menu'

export default {
  name: 'Main',
  components: {
    AsideMenu
  },
  data () {
    return {
      screenHeight: document.documentElement.clientHeight, // 获取可视屏幕高度
      isCollapseMenu: false
    }
  },
  watch: {
    screenHeight (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        const that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.documentElement.clientHeight
        that.screenHeight = window.screenHeight
      })()
    }
  },
  methods: {
    collapseMenu () {
      /* el-aside有一个默认值为300,暂时没有很好的方式来处理伸缩菜单栏来处理样式问题... */
      this.isCollapseMenu = !!this.isCollapseMenu
    }
  }
}
</script>

<style>
  .el-header, .el-footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .el-footer {
    height: 40px !important;
    line-height: 40px !important;
  }

  .el-main {
    background-color: #eee;
    color: #333;
    text-align: center;
    padding: 0px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-icon-star-on{
  color:yellow;
  font-size:50px;
  }
</style>