fashion-ssr-vue3/components/business/trends/index.vue

<!-- @format -->

<script lang="ts" setup>
import { Api } from '@/api/model/url'

const list = ref([])

const requestUrl = `${process.env.MY_ENV_DEV_URL}${Api.CatalogueList}`
const params = { pageNo: 1, pageSize: 3, state: 1, trend: 1, order: 'desc' }
const { data, pending, error, refresh } = await useAsyncData(
  'catalogue-list',
  () => $fetch(requestUrl, { params }),
)
list.value = data.value?.result.records
</script>

<template>
  <div class="bg-#fff py-120px">
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
        Download with The Latest <span class="custom-title-bg">Trends</span>
      </h2>
      <div class="text-#999 w-850px text-22px mb-80px mx-auto lh-34px">
        Spot emerging hits, viral styles, and seasonal must-haves. Curated with
        real-time market insights to help you stock ahead of the trend curve.
      </div>
      <div class="flex flex-col gap-40px">
        <div v-for="(item, index) in list" :key="index">
          <business-trends-comp-item v-if="index % 2 === 0" :item="item" />
          <business-trends-comp-item2 v-else :item="item" />
        </div>
      </div>
    </div>
  </div>
</template>

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