fashion-ssr-vue3/components/business/home/products.vue

<script lang='ts' setup>
import {
  getFeatureListApi,
} from '~/api/model/feature'

const list = ref<any>([])

async function getFeatureList(pageNo = 1, pageSize = 4) {
  const params = {
    pageNo,
    pageSize,
  }
  const res: any = await getFeatureListApi(params)
  list.value = res.records
}
getFeatureList()
</script>

<template>
  <div class="pt-160px text-center">
    <h2 class="fw-600 text-40px text-#363C40 custom-title-font">
      Product Collections
    </h2>
    <div class="mt-20px w-500px mx-auto text-#999 text-16px lh-24px">
      Stay ahead with our selection of trending and exclusive products across various categories.
    </div>
    <div class="flex my-60px">
      <div class="pos-relative mr-20px">
        <img :src="list[0]?.thumbnailUrl" alt="" class="w-580px h-860px object-cover b-rd-20px" srcset="">
        <div class="pos-absolute bottom-0 w-100% p-20px">
          <div class="text-#fff text-left">
            <h3 class="fw-600 w-400px filterText text-26px !mb-10px custom-title-font">
              {{ list[0]?.title }}
            </h3>
            <div class="text-18px w-400px line-clamp-2 filterText mb-20px text-#d9d4cf lh-28px">
              {{ list[0]?.headImageText }}
            </div>
          </div>

          <NuxtLink v-if="list[0]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[0]?.slug } }">
            <svgo-arrowRight
              class="!w-40px !h-40px cursor-pointer hover-effect !fill-#fff text-16px"
              :filled="true"
            />
          </NuxtLink>
        </div>
        <img src="~/assets/images/decorate.png" class="w-384px h-128px pos-absolute top-0 right-6px" alt="" srcset="">
      </div>
      <div>
        <div class="pos-relative">
          <img :src="list[1]?.thumbnailUrl" alt="" class="w-800px h-406px object-cover b-rd-20px" srcset="">
          <div class="pos-absolute bottom-0 w-100% p-20px">
            <div class="text-#fff text-left">
              <h3 class="fw-600 w-600px filterText  text-26px !mb-10px custom-title-font">
                {{ list[1]?.title }}
              </h3>
              <div class="text-18px w-400px filterText line-clamp-2 mb-20px text-#d9d4cf lh-28px">
                {{ list[1]?.headImageText }}
              </div>
            </div>
            <NuxtLink v-if="list[1]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[1]?.slug } }">
              <svgo-arrowRight
                class="!w-40px !h-40px cursor-pointer hover-effect !fill-#fff text-16px"
                :filled="true"
              />
            </NuxtLink>
          </div>
        </div>
        <div class="flex mt-20px">
          <div class="pos-relative mr-20px">
            <img :src="list[2]?.thumbnailUrl" alt="" class="w-390px h-434px object-cover b-rd-20px" srcset="">
            <div class="pos-absolute bottom-0 w-100% p-20px">
              <div class="text-#fff text-left">
                <h3 class="fw-500 w-400px filterText text-26px !mb-10px custom-title-font">
                  {{ list[2]?.title }}
                </h3>
                <div class="text-18px w-280px line-clamp-2 filterText mb-20px text-#d9d4cf lh-28px">
                  {{ list[2]?.headImageText }}
                </div>
              </div>
              <NuxtLink v-if="list[2]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[2]?.slug } }">
                <svgo-arrowRight
                  class="!w-40px !h-40px   cursor-pointer hover-effect !fill-#fff text-16px"
                  :filled="true"
                />
              </NuxtLink>
            </div>
          </div>
          <div class="pos-relative">
            <img :src="list[3]?.thumbnailUrl" alt="" class="w-390px h-434px object-cover b-rd-20px" srcset="">
            <div class="pos-absolute bottom-0 w-100% p-20px">
              <div class="text-#fff text-left">
                <h3 class="fw-600 w-400px filterText text-26px mb-10px custom-title-font">
                  {{ list[3]?.title }}
                </h3>
                <div class="text-18px w-280px line-clamp-2 filterText mb-20px text-#d9d4cf lh-28px">
                  {{ list[3]?.headImageText }}
                </div>
              </div>
              <NuxtLink v-if="list[3]" class="cursor-pointer" :to="{ name: 'collections-name', params: { name: list[3]?.slug } }">
                <svgo-arrowRight
                  class="!w-40px !h-40px cursor-pointer hover-effect !fill-#fff text-16px"
                  :filled="true"
                />
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-center items-center">
      <NuxtLink to="/collections" class="flex justify-center items-center cursor-pointer">
        <div class="underline fw-600 text-#5B463E text-22px hover:text-#CC9879 custom-title-font">
          View All
        </div>
        <svgo-arrow class="!w-20px !h-20px ml-16px" />
      </NuxtLink>
    </div>
  </div>
</template>

<style lang='less' scoped>
.filterText{
  filter: drop-shadow(2px 4px 6px black);
}
</style>