<template>
  <div class="base">
    <h5 class="title">排版</h5>
    <h1>h1.Headline</h1>
    <h2>h2.Headline</h2>
    <h3>h3.Headline</h3>
    <h4>h4.Headline</h4>
    <h5>h5.Headline</h5>
    <h6>h6.Headline</h6>
    <del>这里是del</del>
    <small>这里是 small</small>
    <em>这里是em</em>
    <br>
    <br>
    <h5 class="title">网格</h5>
    <m-row :gutter="10" theme="theme-demo">
      <m-col class="xs-6">xs-6</m-col>
      <m-col class="xs-6">xs-6</m-col>
      <m-col class="xs-6 sm-12">xs-6 sm-12</m-col>
      <m-col class="xs-1">xs-1</m-col>
      <m-col class="xs-2">xs-2</m-col>
      <m-col class="xs-3">xs-3</m-col>
      <m-col class="xs-4">xs-4</m-col>
      <m-col class="xs-2">xs-2</m-col>
    </m-row>
    <br>
    <br>
    <h5 class="title">表格</h5>
    <m-table class="bordered hover striped">
      <thead>
        <tr>
          <th>head</th>
          <th>head</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>body</td>
          <td>body</td>
        </tr>
        <tr>
          <td>body</td>
          <td>body</td>
        </tr>
        <tr>
          <td>body</td>
          <td>body</td>
        </tr>
        <tr>
          <td>body</td>
          <td>body</td>
        </tr>
      </tbody>
    </m-table>
    <br>
    <br>
    <m-icon icon="icon-cangku"></m-icon>
    <br>
    <br>
    <m-tab :labels="['标签1','标签2']" :tabkey="0" @change="tabChange" type="block">
      <div>内容1</div>
      <div>内容2</div>
    </m-tab>
    <br>
    <br>
  </div>
</template>

<script>
  export default {
    name: 'Base',
    data: () => ({
      snycLine: {
        title: {
          text: 'CPU'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          }
        },
        series: [{
          name: 'CPU性能',
          type: 'line',
          data: []
        }]
      }
    }),
    methods: {
      tabChange (idx) {
//        console.log(idx)
      }
    },
    mounted () {

    }
  }
</script>

<style lang="scss">
  .title {
    margin-bottom: 16px;
  }
  .row {
    &.theme-demo {
      .col {
        border: 1px solid #ccc;
        background-color: #fff;
      }
    }
  }
</style>
