liebao-web/src/views/home.vue

<template>
  <el-container>
    <sidebar></sidebar>
    <el-container>
      <el-header style="text-align: right;height: 80px;line-height: 80px;">
        <span class="header-button">充值中心</span>
        <span class="header-button">打印设置</span>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <span style="cursor: pointer;">nickName</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main style="background:#F1F2F5;">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import sidebar from '../common/sider.vue';
  import headerVue from '../common/header.vue';
  export default {
    data() {
      return {

      }
    },
    components: {
      sidebar,
      headerVue
    },
    created() {
    },
    methods: {
      
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .el-header {
    position: relative;
    width: 100%;
    height: 80px;
  }

  .el-main {
    position: absolute;
    left: 254px;
    right: 0;
    top: 80px;
    bottom: 0;
    overflow-y: auto;
    background-color: #F1F2F5;
    padding: 10px;
    min-width: 1550px;
  }

  .header-button {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #777777;
    cursor: pointer;
    margin-right: 40px;
  }

  .header-button {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #777777;
    cursor: pointer;
    margin-right: 40px;
  }

  .home-content {
    display: flex;

    .side-box {
      // width: 200px;
      position: relative;
    }

    .content {
      flex: 1;
      flex-shrink: 1;
    }

    .title {
      color: #0074D9;
    }
  }
</style>