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

<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import img01 from '@/assets/images/welfare_cart.png'
import img02 from '@/assets/images/welfare_brand.png'
import img03 from '@/assets/images/welfare_return.png'
import img04 from '@/assets/images/welfare_delivery.png'

const list = [
  {
    img: img01,
    title: '90-Day Buy Now Pay Later',
    subTitle: 'Generate sales before you pay',
  },
  {
    img: img02,
    title: 'Curated Brand Selection',
    subTitle: 'Hand-picked brands from China',
  },
  {
    img: img03,
    title: '60-Day Risk-Free Returns',
    subTitle: 'Return back what doesn\'t sell',
  },
  {
    img: img04,
    title: 'Easy Shipping and Delivery',
    subTitle: 'Seamless international delivery',
  },
]
</script>

<template>
  <div class="">
    <div class="flex mt-100px">
      <div v-for="item, index in list" :key="index" class="w-25% flex items-center justify-center pos-relative after:pos-absolute after:content-empty after:right-0 after:top-0 after:bottom-0 after:w-1px after:bg-#EEEEEE  !after:last:pos-unset">
        <div class="w-36px h-36px bg-#FAF5F1 b-1px b-solid b-#FAE7CE b-rd-50% flex justify-center items-center">
          <img :src="item.img" alt="" class="w-20px h-20px" srcset="">
        </div>
        <div class="ml-20px">
          <h3 class="!mb-10px !text-16px !fw-500 text-#333">
            {{ item.title }}
          </h3>
          <div class="fw-400 text-14px  text-#999999">
            {{ item.subTitle }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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