<template>
  <div class="mainStyle">
   <el-container>
      <el-aside :style="defaultLeftMenu">
        <div class="leftBox">
          <div class="logoBox">
            <img src="../assets/login/logo.png" @click="clickNotebook" width="118px" height="44px" class="logoImg" />
          </div>
          <div class="menuBox">
           <letfmenu></letfmenu>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header :style="defaultHeader">
          <div class="headerBox">
            <div class="headerBoxStyle">
               <el-row>
                <el-col :span="24">
                  <div class="headerLeftContent">
                    <div class="avatarBox pull-right">
                      <el-avatar class="avatarInfo" :size="46" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                      <span><b>Zhang Shan</b></span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-header>
        <el-main :style="defaultMainHeight">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import letfmenu from "./menu.vue"
export default {
  name: "home",
  data() {
    return {
      //自适应高度
      defaultMainHeight:{
        height:"",
        padding:"0 40"
      },
      defaultLeftMenu:{
        width:"200px",
        height:"",
        "border-right":" 1px solid rgb(255 255 255 / 15%)"
      },
      defaultHeader:{
        height:"60px",
        padding:"0 0"
      },

    };
  },
  components: { letfmenu },
  methods: {
    //自适应main区域高度
    getMainHeight() {
      let windowHeight = window.innerHeight;
      this.defaultMainHeight.height = windowHeight - 60 +"px";
      this.defaultLeftMenu.height = windowHeight +"px";
    },
    clickNotebook() {
      this.$router.push({path: '/home/notebook'});
    }
  },
  created: async function () {
    window.addEventListener("resize", this.getMainHeight);
    this.getMainHeight();
  }
};
</script>
<style scoped>
.mainStyle {
  background: url('../assets/login/logbackground.png') no-repeat;
}
.headerBoxStyle {
    background: rgb(0 0 0 / 15%);
    border-bottom: 1px solid rgb(255 255 255 / 15%);
}
.headerBox .el-row {
  height: 60px;
}
.leftBox{
  width: 100%;
  height: 100%;
  background-size:100% 100%;
}
.headerBox{
  width: 100%;
  height: 100%;
}
.headerBox .el-card {
  height: 60px;
}
.logoBox {
  width: 100%;
  height: 60px;
  background: rgb(255 255 255 / 15%);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.logoImg {
  position: relative;
  top: 10px;
  left: 18px;
}
.menuBox {
  width: 100%;
}
.headerLeftContent{
  /* text-align: right; */
  border-radius: 4px;
  min-height: 60px;
}
.headerLeftContent .avatarBox .avatarInfo {
  position: relative;
  right: 42px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 6px;
}
.avatarBox{
  width: 190px;
  height: 60px;
  border-left: solid 1px rgb(255 255 255 / 15%);
}
.avatarBox span{
  width: 190px;
  position: relative;
  left: 5px;
}
.avatarBox b{
  color: #fff;
  height: 46px;
  position: relative;
  top: -20px;
}
</style>
