组件 顶部常见布局类型

<template>
  <div>
    <el-header>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple header-left-content">
            <img class="header-left-img" src="../assets/image/banner-test-1.jpg" />
            <ul class="header-left-menu-ulbox">
              <li v-for="(item,index) in headermenu" :key="index">
                <router-link :to="item.url">{{item.name}}</router-link>
              </li>
            </ul>
            <i class="el-icon-edit header-top-icon-edit"></i>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple-light header-right-content">
            <i :class="[itemicon.icon]" v-for="(itemicon,indexicon) in icondata" :key="indexicon"></i>
          </div>
        </el-col>
      </el-row>
    </el-header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //顶部菜单数据 开始
      headermenu: [
        { name: "基础数据平台", url: "/basic" },
        { name: "设备管理系统", url: "/equipment" },
        { name: "授权系统", url: "/authorization" },
        { name: "资源平台", url: "/resource" },
        { name: "同步课堂", url: "/sync" }
      ],
      icondata: [
        { icon: "el-icon-edit" },
        { icon: "el-icon-share" },
        { icon: "el-icon-delete" },
        { icon: "el-icon-search" }
      ]
    };
  }
};
</script>

<style  scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  height: 60px;
  line-height: 60px;
  padding: 0;
}
.header-left-content {
  text-align: left;
  display: flex;
}
.header-right-content {
  text-align: right;
}
/* 控制右边的图标 */
.header-right-content > i {
  width: 20px;
}
.header-left-img {
  width: 90px;
  height: 60px;
}

.header-left-menu-ulbox {
  display: flex;
}
.header-left-menu-ulbox > li {
  width: 90px;
  text-align: center;
}
.header-top-icon-edit {
  display: inline-block;
  width: 90px;
  height: 60px;
  line-height: 60px;
}
</style>

 

 <el-header> 是用的容器布局属性中的数据