<template>   
<div>
  <el-container>
    <el-header style="font-size: 12px">
      <div class="logo">
        <img src="src/images/logo.png">
      </div>
      <span>cecloud-FE</span>
    </el-header>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu 
          :default-openeds="['1']" 
          default-active="1-1"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-menu"></i>组件</template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <router-link :to="{path:'index'}">Button 按钮</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link :to="{path:'choose'}">选择框</router-link>
            </el-menu-item>
            <el-menu-item index="1-3">
              <router-link :to="{path:'input'}">Input 输入框</router-link>
            </el-menu-item>
            <el-menu-item index="1-4">
              <router-link :to="{path:'message'}">Message 消息提示</router-link>
            </el-menu-item>
            <el-menu-item index="1-5">
              <router-link :to="{path:'tooltip'}">Tooltip 文字提示</router-link>
            </el-menu-item>
            <el-menu-item index="1-6">
              <router-link :to="{path:'switch'}">Switch 开关</router-link>
            </el-menu-item>
            <el-menu-item index="1-7">
              <router-link :to="{path:'slider'}">Slider 滑块</router-link>
            </el-menu-item>
            <el-menu-item index="1-8">
              <router-link :to="{path:'progress'}">Progress 进度条</router-link>
            </el-menu-item>
            <el-menu-item index="1-9">
              <router-link :to="{path:'pagination'}">Pagination 分页</router-link>
            </el-menu-item>
            <el-menu-item index="1-10">
              <router-link :to="{path:'transfer'}">Transfer 穿梭框</router-link>
            </el-menu-item>
            <el-menu-item index="1-11">
              <router-link :to="{path:'table'}">Table 表格</router-link>
            </el-menu-item>
            <el-menu-item index="1-12">
              <router-link :to="{path:'navigation'}">Navigation 导航</router-link>
            </el-menu-item>
             <el-menu-item index="1-13">
              <router-link :to="{path:'form'}">form</router-link>
            </el-menu-item>
            <el-menu-item index="1-14">
              <router-link :to="{path:'tree'}">Tree 树状控件</router-link>
            </el-menu-item>
            <el-menu-item index="1-15">
              <router-link :to="{path:'datepicker'}">DatePicker</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
    font-family: PingFangSC-Regular, PingFang SC !important;
  }
  .el-header {
    background-color: #13151e;
    color: #FFF;
    line-height: 60px;
    .logo {
      display: inline-block;
      padding: 16px 0px;
      height: 100%;
      box-sizing: border-box;
    }
    .logo img{
      height: 100%;
      vertical-align: top;
    }
    span {
      float: right;
    }
  }
  .el-aside {
    color: #333;
  }
</style>

<script>
export default {
  name: 'App'
}
</script>
<style lang="scss">
.el-menu-item-group__title {
  display: none;
}
.el-aside a {
  color: inherit;
  text-decoration: none;
}
.el-container {
  height: calc(100vh - 60px);
  .el-menu {
    height: 100%;
  }
}
</style>