<template>
  <div class="row">
    <tn-row :gutter="10">
      <tn-col :span="12"><div :style="styles"></div></tn-col>
      <tn-col :span="6"><div :style="styles"></div></tn-col>
      <tn-col :span="3"><div :style="styles"></div></tn-col>
    </tn-row>
    <tn-row :gutter="20" justify="space-between" align="center" style="margin-top:20px;height:100px;background:#008EE9;">
      <tn-col :span="12"><div :style="styles"></div></tn-col>
      <tn-col :span="6"><div :style="styles"></div></tn-col>
    </tn-row>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Row, Col } from '../../tunas'

export default Vue.extend({
  components: {
    tnRow: Row,
    tnCol: Col
  },

  computed: {
    styles () {
      return {
        marginTop: '10px',
        borderRadius: '4px',
        minHeight: '36px',
        background: '#d3dce6'
      }
    }
  },

  mounted () {
  }
})
</script>
