fashion-ssr-vue3/components/common/block/exhibited.vue

<script lang='ts' setup>
import icon_01 from '~/assets/images/blog_icon01.png'
import icon_02 from '~/assets/images/blog_icon02.png'
import icon_03 from '~/assets/images/blog_icon03.png'
import icon_04 from '~/assets/images/blog_icon04.png'

const list = [
  {
    icon: icon_01,
    title: 'Products In Stock',
    total: '20,000',
  },
  {
    icon: icon_02,
    title: 'Monthly Updating',
    total: '5,000',
  },
  {
    icon: icon_03,
    title: 'Product Portfolios',
    total: '2,000',
  },
  {
    icon: icon_04,
    title: 'Display Solutions',
    total: '200',
  },
]
</script>

<template>
  <div
    class="bg-#0F0820 pt-110px pb-120px  data-section"
    data-section-color="#0F0820"
  >
    <div class="w-1200-auto text-center flex gap-150px justify-between">
      <div v-for="item, index in list" :key="index">
        <img
          :src="item.icon"
          alt=""
          class="w-80px h-80px mx-auto"
        >
        <div class="text-#fff text-36px fw-900 mt-20px mb-10px ls-2 custom-title-font">
          {{ item.total }}+
        </div>
        <div class="text-#fff text-20px fw-500 custom-title-font">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

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