<template>
  <Banner />
  <div class="m-content">
    <el-card shadow="hover">
      <div class="m-tc-container">
        <h1 class="m-tc-title">分类 - {{ categoryList.length }}</h1>
        <div class="m-tc-content">
          <router-link
            v-for="category in categoryList"
            :key="category._id"
            :style="{ 'font-size': Math.floor(Math.random() * 10) + 18 + 'px' }"
            :to="'/about'"
          >
            {{ category.name }}
          </router-link>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import Banner from '@/components/Banner.vue'
import { ref, onMounted } from 'vue'
import { getCategoryList } from '../../api/category'

const categoryList = ref([])

onMounted(async () => {
  const { data } = await getCategoryList()
  categoryList.value = data
})
</script>

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