hogwarts-ui 官方网站

Appearance

content-v4 内容卡片 ​

基本用法 ​

点击查看示例代码
vue
<template>
	<h-content-v4 :h_data="h_data1"></h-content-v4>
</template>

<script setup>
const h_data1 = {
  // 组件名称
  component: 'h-content-v4',
  // 图片
  content: [
    {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
  ]
}
</script>
<template>
	<h-content-v4 :h_data="h_data1"></h-content-v4>
</template>

<script setup>
const h_data1 = {
  // 组件名称
  component: 'h-content-v4',
  // 图片
  content: [
    {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
        {
      header: '价值 ￥1299',
      img: 'http://dev-poster.ceba.ceshiren.com/static/c1.png',
      name: 'VIP年卡',
    },
  ]
}
</script>