<template>
  <div class="chart-container">
    <el-container>
      <el-aside width="250px"></el-aside>
      <el-container>
        <el-header class="chart-action-bar" style="height: 40px;text-align: right;">
          <el-button icon="el-icon-video-play" type="text">
            预览
          </el-button>
          <el-button icon="el-icon-view" type="text">
            查询脚本
          </el-button>
          <el-button icon="el-icon-delete" type="text">
            清空
          </el-button>
          <el-button icon="el-icon-plus" type="text">
            保存
          </el-button>
          <el-button icon="el-icon-close" type="text">
            取消
          </el-button>
        </el-header>
        <el-main style="border: 1px dashed #999;"></el-main>
      </el-container>
      <el-aside width="300px">
        <el-container>
          <el-tabs type="border-card" stretch style="width: 100%;">
            <el-tab-pane label="图表属性">
              <el-main>
                <div class="chart-tab-pane">图表属性</div>
              </el-main>
            </el-tab-pane>
            <el-tab-pane label="图表配置">
              <el-main>
                <div class="chart-tab-pane">图表配置</div>
              </el-main>
            </el-tab-pane>
          </el-tabs>
        </el-container>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'ChartMake'
}
</script>

<style lang="scss" scoped>
.chart-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  .el-container {
    height: 100%;
    width: 100%;
    box-shadow: 0 0 1px 1px #ccc;
    .el-header {
      color: #333;
      border-bottom: 2px solid #e4e7ed;
      .chart-action-bar {
        height: 40px;
        line-height: 40px;
      }
    }
    .el-aside {
      color: #333;
      padding: 0;
      margin-bottom: 0;
      background: #FFFFFF;
      box-shadow: 0 0 1px 1px #ccc;
      .chart-tab-pane {

      }
    }
    .el-main {
      padding: 0;
    }
  }
}

</style>
