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

<!-- @format -->

<script lang="ts" setup>
import { ConstKeys } from '~/enums/const-enums'

const list = ref([
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
    img: 'https://picsum.photos/300/300',
    slug: 'test',
  },
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
    img: 'https://picsum.photos/300/300',
    slug: 'test2',
  },
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'EJET Spark catalog description, spark the trend, ignate sales. EJET Spark cat description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. ',
    img: 'https://picsum.photos/300/300',
    slug: 'test3',
  },
])

// const { data, pending, error, refresh } = await useAsyncData(
//   'brand-detail',
//   () => $fetch(`${ConstKeys.DOMAINPRO}/client/brand/list/default`, { params: { pageNo: 1, pageSize: 8 } }),
// )
// 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">
        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>
.custom-title-bg {
  position: relative;
  display: inline-block;
  background: url(~/assets/images/title_bg.png);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 100% auto;
  padding-bottom: 8px;
}
</style>