<route lang="yaml">
style:
  navigationBarTitleText: 添加标签
  navigationBarBackgroundColor: '#fff'
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { ref } from 'vue'

const tags = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
const tags2 = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
const tags3 = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
</script>
<template>
  <div class="bg-white flex-grow p-3.5 flex flex-col">
    <SectionHeading title="游学标签" custom-class="my-6" size="base"></SectionHeading>
    <div class="flex flex-wrap">
      <template v-for="(it, i) in tags" :key="i">
        <wd-tag custom-class="m-1">{{ it }}</wd-tag>
      </template>
    </div>
    <SectionHeading title="活动标签" custom-class="my-6" size="base"></SectionHeading>
    <div class="flex flex-wrap">
      <template v-for="(it, i) in tags2" :key="i">
        <wd-tag custom-class="m-1" type="primary">{{ it }}</wd-tag>
      </template>
    </div>
    <SectionHeading title="自定义标签" custom-class="my-6" size="base"></SectionHeading>
    <div class="flex flex-wrap">
      <template v-for="(it, i) in tags3" :key="i">
        <wd-tag custom-class="m-1">{{ it }}</wd-tag>
      </template>
      <wd-tag custom-class="m-1">
        <wd-icon name="add"></wd-icon>
      </wd-tag>
    </div>
    <div class="flex-1"></div>
    <div><wd-button block :round="false">确定</wd-button></div>
  </div>
</template>
