designer-hub/src/pages/home/study-tour/list.vue

<route lang="yaml">
style:
  navigationBarTitleText: 游学计划
  navigationBarBackgroundColor: '#fff'
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { studyTourItemBg } from '@/core/libs/pngs'
import { getStudyTours } from '@/core/libs/requests'
import dayjs from 'dayjs'
import StudyTourCard from './components/study-tour-card.vue'

const { data, run } = useRequest(() => getStudyTours())
const title = computed(() => `${dayjs().year()}年游学计划`)
onMounted(() => run())
</script>
<template>
  <div class="px-3.5">
    <SectionHeading custom-class="py-6" :title="title"></SectionHeading>
    <div
      class="mx-3.5 text-justify text-black/40 text-sm font-normal font-['PingFang SC'] leading-relaxed"
    >
      *我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升
    </div>
    <template v-for="(it, index) in data" :key="index">
      <StudyTourCard custom-class="my-6"></StudyTourCard>
    </template>
  </div>
</template>