<template>
<div style="background-color: #f3f3f3; padding: 16px;">
<honjo-tabs v-model="value">
  <honjo-tab-pane label="用户管理" name="1">
    <honjo-card title="基本信息">
      <p>abcdefg</p>
      <p>abcdefg</p>
      <p>abcdefg</p>
    </honjo-card>
    <honjo-card title="关联信息" style="margin-top: 24px;">
      <p>abcdefg</p>
      <p>abcdefg</p>
      <p>abcdefg</p>
    </honjo-card>
  </honjo-tab-pane>
  <honjo-tab-pane label="配置管理" name="2">
    <honjo-card title="操作日志">
      <p>abcdefg</p>
      <p>abcdefg</p>
      <p>abcdefg</p>
    </honjo-card>
    <honjo-card title="评分" style="margin-top: 24px;">
      <p>abcdefg</p>
      <p>abcdefg</p>
      <p>abcdefg</p>
    </honjo-card>
  </honjo-tab-pane>
  <honjo-tab-pane label="角色管理" name="3">
    <honjo-card title="意见">
      <p>abcdefg</p>
      <p>abcdefg</p>
      <p>abcdefg</p>
    </honjo-card>
    <honjo-card title="性能" style="margin-top: 24px;">
      <p>abcdefg</p>
      <p>abcdefg</p>
      <p>abcdefg</p>
    </honjo-card>
  </honjo-tab-pane>
</honjo-tabs>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

/**
 * @title  基本
 * @desc 最基本的用法。
 */
@Component
export default class BasicExample extends Vue {
  value = '1'
}
</script>
