<template>
  <div class="container">
    <!--头部-->
    <div class="topbar-wrap">
        <div class="topbar-logo topbar-btn">
          <a href="/"><img src="../assets/logo.png" style="padding-left:8px;height:50px;"></a>
       </div>
       <div class="topbar-title">
         <span style="font-size: 18px;color: #fff;">mapbox接口功能系统</span>
       </div>
       <div class="topbar-account topbar-btn">
         <span class="userinfo-inner"><img src="https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png" /></span>
      </div>
    </div>
    <!--中间-->
    <div class = "main">
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
      </el-menu>
      <mapbox></mapbox>  
    </div>
  </div>
</template>

<script>
 //1.先使用import导入你要在该组件中使用的子组件  
import mapbox from './mapbox.vue'  
export default {
  name: 'Home',
  components: {mapbox},
  mounted(){
  },
  methods: {
     handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  data () {
    return {
      msg: '123'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    .topbar-wrap {
      height: 50px;
      line-height: 50px;
      background: #545c64;
      padding: 0px;
      .topbar-btn {
        color: #fff;
      }
      .topbar-logo {
        float: left;
        width: 89px;
        line-height: 26px;
      }
      .topbar-logos {
        float: left;
        width: 120px;
        line-height: 26px;
      }
      .topbar-title {
        float: left;
        text-align: left;
        width: 200px;
        padding-left: 10px;
        border-left: 1px solid #545c64;
      }
      .topbar-account {
        float: right;
        text-align: right;
        padding-right: 35px;
      }
      .userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
            background-repeat: no-repeat;
					}
				}
    }
    .main {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      flex-direction:row;
      position: absolute;
      top: 50px;
      width: 100%;
      bottom: 0px;
      overflow: hidden;
    }

}
</style>
