<template>
  <div class="demo">
    <h2 class="demo-title">轮播列表</h2>
    <custom-scroll-board :chart-config="boardOption" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const boardOption = ref({
  attr: { w: 200, h: 200 },
  option: {
    header: ['列1', '列2', '列3'],
    dataset: [
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3'],
    ],
    index: true,
    columnWidth: [30, 100, 100],
    align: ['center', 'right', 'right', 'right'],
    rowNum: 5,
    waitTime: 2,
    headerHeight: 40,
    carousel: 'single',
    headerBGC: '#00BAFF',
    oddRowBGC: '#003B51',
    evenRowBGC: '#0A2732',
  },
});
</script>
<style lang="scss" scoped>
.demo {
  margin: 30px auto 0;
  width: 500px;
  height: 500px;
  background-color: #ffffff;
  &-title {
    margin-bottom: 20px;
  }
}
</style>
