el-container空隙

• 源码-更改了容器的显示，占满屏幕

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row class="el-row1">
          <el-col :span="12">
            <div class="grid-content ep-bg-purple">
              <span style="color: white">当前用户</span>
            </div>

            <div>
              <span style="color: white">新闻系统</span>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
              <el-button @click="$router.push('/')">聊天室</el-button>
              <el-button @click="$router.push('/toybox/game')">猜数字游戏</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <RouterView></RouterView>
      </el-main>

      <el-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>

.el-row1 {
  background-color: black;
  display: flex;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


.common-layout {
  display: flex;
  justify-content: flex-start;
  background-color: #2c3e50;
  width: 100vw;
  height: 100vh;
}
</style>

修改app组件

在app组件中改一下#app的css

<style>
html,body,#app{
  height:100%;
  margin: 0;
  padding: 0;
  /*overflow-x: hidden;*/
}
</style>

el-header容器空隙

检查前端

手动测试修改下

修改el-header

/*解决el-header左右占不满的问题*/
.el-header{
  padding: 0;
}

• 虽然是灰色，但是实际上是应用成功的
  

el-container

这个common-layout很容易影响布局，导致我们后续自设的css不起作用，建议删除