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

<script lang='ts' setup>
import img01 from '@/assets/images/section02_img01.png'
import img02 from '@/assets/images/section02_img02.png'
import img03 from '@/assets/images/section02_img03.png'
import img04 from '@/assets/images/section02_img04.png'

const list = [
  {
    img: img01,
    style: 'width:110px;height: 96px',
    title: 'Source Manufacturers',
    subTitle: 'Selected product suppliers with the capability to develop unique products.',
  },
  {
    img: img02,
    style: 'width: 83px;height: 95px',
    title: 'Competitive Pricing',
    subTitle: 'Get the best quality products at the most competitive wholesale prices.',
  },
  {
    img: img03,
    style: 'width: 78px;height: 100px',
    title: 'Strict Quality Control',
    subTitle: 'Strict quality inspection to ensure the products meet our high standards.',
  },
  {
    img: img04,
    style: 'width:100px;height: 78px',
    title: 'Dedicated Support',
    subTitle: 'Smooth wholesale experience with dedicated customer manager service.',
  },
]
</script>

<template>
  <div class="grid grid-cols-2 gap-40px mt-210px">
    <div v-for="item, index in list" :key="index" class="px-90px h-270px bg-#F4F5F5 flex items-center">
      <div class="w-100px h-100px flex justify-center items-center">
        <img :src="item.img" alt="" :style="item.style" srcset="">
      </div>
      <div class="ml-70px flex-1">
        <h3 class="!mb-20px fw-600 text-26px text-#363C40 custom-title-font">
          {{ item.title }}
        </h3>
        <div class="text-18px text-#999  lh-28px">
          {{ item.subTitle }}
        </div>
      </div>
    </div>
  </div>
</template>

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