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

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

const tagList = ref([])

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

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