hogwarts-ui 官方网站

Appearance

content-v3 内容卡片 ​

基本用法 ​

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

<script setup>
	const h_data1 = {
  // 组件名称
  component: 'h-content-v3',
  // 图片
  content: [
    {
      class: 'w-1/3',
      name: '￥100',
      subname: ['满￥1980', '可用']
    },
    {
      class: 'w-1/3',
      name: '￥300',
      subname: ['满￥2980', '可用']
    },
    {
      class: 'w-1/3',
      name: '￥300',
      subname: ['满￥3980', '可用']
    },
  ]
}
</script>
<template>
	<h-content-v3 :h_data="h_data1"></h-content-v3>
</template>

<script setup>
	const h_data1 = {
  // 组件名称
  component: 'h-content-v3',
  // 图片
  content: [
    {
      class: 'w-1/3',
      name: '￥100',
      subname: ['满￥1980', '可用']
    },
    {
      class: 'w-1/3',
      name: '￥300',
      subname: ['满￥2980', '可用']
    },
    {
      class: 'w-1/3',
      name: '￥300',
      subname: ['满￥3980', '可用']
    },
  ]
}
</script>
点击查看示例代码(yaml)
yaml
component: h-content-v3
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
component: h-content-v3
content:
  - 融合人工智能
  - 构建高效测试体系沙龙