hogwarts-ui 官方网站

Appearance

Contact 联系我们 ​

基础用法 ​

vue
<h-contact-v1 class="h-right-center" :h_data="h_contact_1"></h-contact-v1>
<h-contact-v1 class="h-right-center" :h_data="h_contact_1"></h-contact-v1>
点击查看示例代码
vue
<template>
  <h-contact-v1 class="h-right-center" :h_data="h_contact_1"></h-contact-v1>
</template>

<script setup>
const h_contact_1 = {
  items: [
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      icon: 'fa fa-phone fa-2x',
      header: '免费回电',
    },
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      icon: 'fa fa-envelope fa-2x',
      header: '在线客服',
    },
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      icon: 'fa fa-wechat fa-2x',
      header: '留言表单',
    },
  ]
}
</script>
<template>
  <h-contact-v1 class="h-right-center" :h_data="h_contact_1"></h-contact-v1>
</template>

<script setup>
const h_contact_1 = {
  items: [
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      icon: 'fa fa-phone fa-2x',
      header: '免费回电',
    },
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      icon: 'fa fa-envelope fa-2x',
      header: '在线客服',
    },
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      icon: 'fa fa-wechat fa-2x',
      header: '留言表单',
    },
  ]
}
</script>
点击查看示例代码（yaml）
yaml
items:
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    icon: 'fa fa-phone fa-2x'
    header: 免费回电
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    icon: 'fa fa-envelope fa-2x'
    header: 在线客服
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    icon: 'fa fa-wechat fa-2x'
    header: 留言表单
items:
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    icon: 'fa fa-phone fa-2x'
    header: 免费回电
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    icon: 'fa fa-envelope fa-2x'
    header: 在线客服
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    icon: 'fa fa-wechat fa-2x'
    header: 留言表单