fashion-ssr-vue3/components/business/categories/list.vue

<!-- @format -->

<script lang="ts" setup>
import templateTwo from './comp/temp2.vue'
import templateOne from './comp/temp1.vue'

const list_column_one = [
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    type: 'A',
    slug: 'test',
  },
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    slug: 'test2',
    type: 'B',
  },
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    slug: 'test3',
    type: 'A',
  },
]
const list_column_two = [
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    type: 'B',
    slug: 'test',
  },
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    slug: 'test2',
    type: 'B',
  },
]
const list_column_three = [
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    type: 'A',
    slug: 'test',
  },
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    slug: 'test2',
    type: 'B',
  },
  {
    title: 'Real-Time Trend Curation',
    subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
    img: 'https://picsum.photos/300/300',
    slug: 'test3',
    type: 'A',
  },
]
</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">
        Access Category-Driven <span class="custom-title-bg">Solutions</span>
      </h2>
      <div class="text-#999 text-22px mb-80px">
        For viral-ready, trend-optimized products - Ready to download！
      </div>
      <div class="flex gap-40px text-left">
        <div class="flex flex-col gap-40px flex-1">
          <div v-for="(item, index) in list_column_one" :key="index">
            <template-one v-if="item.type === 'A'" :item />
            <template-two v-if="item.type === 'B'" :item />
          </div>
        </div>
        <div class="flex flex-col gap-40px flex-1">
          <div v-for="(item, index) in list_column_two" :key="index">
            <template-one v-if="item.type === 'A'" :item />
            <template-two v-if="item.type === 'B'" :item />
          </div>
        </div>
        <div class="flex flex-col gap-40px flex-1">
          <div v-for="(item, index) in list_column_three" :key="index">
            <template-one v-if="item.type === 'A'" :item />
            <template-two v-if="item.type === 'B'" :item />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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