fashion-ssr-vue3/components/business/contact/method.vue

<script lang='ts' setup>
import Mail from '@/assets/images/email.png'
import WhatsApp from '@/assets/images/wechat.png'
import LiveChat from '@/assets/images/live_chat.png'

const list = [
  {
    icon: Mail,
    title: 'Email Us',
    intro: 'Available 24/7 for your inquiries',
    contact: 'contact@company.com',
  },
  {
    icon: WhatsApp,
    title: 'WhatsApp',
    intro: 'Chat with us on WhatsApp',
    contact: '+1 (234) 567-890',
  },
  {
    icon: LiveChat,
    title: 'Live Chat',
    intro: 'Service hours 8:30AM-5:30PM',
    contact: 'Contact number 10001',
  },
]
</script>

<template>
  <div class="h-290px bg-#fff pos-relative w-1200-auto">
    <div class="grid grid-cols-3 gap-30px pos-absolute top--90px w-full">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="b-rd-12px bg-#fff text-center shadow p-30px"
      >
        <div class="p-20px b-rd-50% bg-#F2E5F2 inline-grid mb-20px">
          <img :src="item.icon" class="w-24px h-24px" alt="">
        </div>
        <div class="fw-800 text-24px custom-title-font">
          {{ item.title }}
        </div>
        <div class="my-12px text-#999">
          {{ item.intro }}
        </div>
        <div class="text-#9B6CFF">
          {{ item.contact }}
        </div>
      </div>
    </div>
  </div>
</template>

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