<template>
  <div class="p-10">
    <div>
      <div class="p-10 mb-10 border text-16 border-primary rounded-3">
        这是taiwindcss示例，具体参考<a
          class="text-primary"
          href="https://www.tailwindcss.cn/"
          target="_blank"
          >文档</a
        >
      </div>
      <el-button
        @click="$modal.msgSuccess('测试提示')"
        class="mb-10"
        type="primary"
        >主要按钮</el-button
      >
      <ty-tabs
        class="mt-10"
        :tab-list="tabList"
        :default-active-index="defaultActiveIndex"
        type="card"
      />
    </div>
    <div class="w-1/2 mt-10 h-300">
      <BarChart />
    </div>
  </div>
</template>

<script>
import BarChart from './dashboard/BarChart';

export default {
  name: 'Index',
  components: {
    BarChart
  },
  data() {
    return {
      tabList: [
        { name: '标签1', value: 1 },
        { name: '标签2', value: 2, disabled: true },
        { name: '标签3', value: 3 },
        { name: '长标签当大于8个字时', value: 2 }
      ],
      defaultActiveIndex: 2
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped></style>
