hogwarts-ui 官方网站

Appearance

v1 卡片组 ​

基础用法 ​

  • 传入 target: '_blank'时会新开页面打开，默认是在当前页面打开
vue
<h-card-v1 h_data="ui_card_v51"></h-card-v1>
<h-card-v1 h_data="ui_card_v51"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 :h_data="ui_card_v51"></h-card-v1>
</template>

<script setup>
	const ui_card_v51 = {
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com', target: '_blank' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
<template>
	<h-card-v1 :h_data="ui_card_v51"></h-card-v1>
</template>

<script setup>
	const ui_card_v51 = {
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com', target: '_blank' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
点击查看示例代码（yaml）
yaml
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
    target: '_blank'
  - name: 修改
    link: 'https://www.baidu.com'
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
    target: '_blank'
  - name: 修改
    link: 'https://www.baidu.com'

基础用法-视频播放 ​

  • 传入 video 替换当前图片区域为播放地址
vue
<h-card-v1 h_data="ui_card_v511"></h-card-v1>
<h-card-v1 h_data="ui_card_v511"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 :h_data="ui_card_v511"></h-card-v1>
</template>

<script setup>
	const ui_card_v511 = {
		video: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com', target: '_blank' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
<template>
	<h-card-v1 :h_data="ui_card_v511"></h-card-v1>
</template>

<script setup>
	const ui_card_v511 = {
		video: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com', target: '_blank' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
点击查看示例代码（yaml）
yaml
video: https://www.runoob.com/try/demo_source/mov_bbb.mp4
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
    target: '_blank'
  - name: 修改
    link: 'https://www.baidu.com'
video: https://www.runoob.com/try/demo_source/mov_bbb.mp4
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
    target: '_blank'
  - name: 修改
    link: 'https://www.baidu.com'

图片在左 ​

  • 图片在左或右可以直接用 left,right 属性快速实现，也可以加 class="h-left" 样式来实现，
vue
<h-card-v1 left h_data="ui_card_v52"></h-card-v1>
<h-card-v1 class="h-left" h_data="ui_card_v52"></h-card-v1>
<h-card-v1 left h_data="ui_card_v52"></h-card-v1>
<h-card-v1 class="h-left" h_data="ui_card_v52"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 left :h_data="ui_card_v52"></h-card-v1>
</template>

<script setup>
	const ui_card_v52 = {
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
<template>
	<h-card-v1 left :h_data="ui_card_v52"></h-card-v1>
</template>

<script setup>
	const ui_card_v52 = {
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
点击查看示例代码（yaml）
yaml
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
  - name: 修改
    link: 'https://www.baidu.com'
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
  - name: 修改
    link: 'https://www.baidu.com'

图片换成 icon ​

  • 图片的位置可以换成 icon，icon 可以设置大小，背景，可以根据需求自由添加
  • icon 可以设置大小，从小到大依次为 mini,tiny,small,(不传),large,big,huge,massive
  • icon 可以设置为圆形或者方形，圆形为 circular，方形为 bordered
  • icon 可以设置不同的颜色，red，orange，yellow，olive 等等所有颜色都支持，
  • icon 可以设置颜色反转，inverted，让背景和 icon 颜色调换
vue
<h-card-v1 h_data="ui_card_v522"></h-card-v1>
<h-card-v1 :h_data="ui_card_v5222"></h-card-v1>
<h-card-v1 class="h-left" h_data="ui_card_v523"></h-card-v1>
<h-card-v1 h_data="ui_card_v522"></h-card-v1>
<h-card-v1 :h_data="ui_card_v5222"></h-card-v1>
<h-card-v1 class="h-left" h_data="ui_card_v523"></h-card-v1>
点击查看示例代码
vue
<script setup>
	const ui_card_v52 = {
		icon: {
			name: 'user huge yellow inverted circular',
			class: 'bg-gradient-to-r from-blue-300 to-green-300 py-20 px-20 rounded'
		},
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理']
	}
</script>
<script setup>
	const ui_card_v52 = {
		icon: {
			name: 'user huge yellow inverted circular',
			class: 'bg-gradient-to-r from-blue-300 to-green-300 py-20 px-20 rounded'
		},
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理']
	}
</script>
点击查看示例代码（yaml）
yaml
icon:
  name: user huge yellow inverted circular
  class: bg-gradient-to-r from-blue-300 to-green-300 py-20 px-20 rounded
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
icon:
  name: user huge yellow inverted circular
  class: bg-gradient-to-r from-blue-300 to-green-300 py-20 px-20 rounded
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理

单张卡片占一行 ​

vue
<h-card-v1 class="h-left h-row-full" h_data="ui_card_v52"></h-card-v1>
<h-card-v1 class="h-left h-row-full" h_data="ui_card_v52"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 class="h-left h-row-full" :h_data="ui_card_v52"></h-card-v1>
</template>

<script setup>
	const ui_card_v52 = {
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
<template>
	<h-card-v1 class="h-left h-row-full" :h_data="ui_card_v52"></h-card-v1>
</template>

<script setup>
	const ui_card_v52 = {
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
点击查看示例代码（yaml）
yaml
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
  - name: 修改
    link: 'https://www.baidu.com'
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
  - name: 修改
    link: 'https://www.baidu.com'

图片/icon 和内容分别控制占多少分 ​

  • h-image-1(默认) h-content-1 代表图片占 1 份，内容占 1 份
  • h-image-1(默认) h-content-2 代表图片占 1 份，内容占 2 份
  • h-image-2 h-content-1 代表图片占 2 份，内容占 1 份
  • h-image-1(默认) h-content-3 代表图片占 1 份，内容占 3 份
  • h-image-1(默认) h-content-4 代表图片占 1 份，内容占 4 份
  • 默认图片占一份，h-image-1 可写可不写，直接传 h-content-[1/2/3/4/5/6/7/8/9/10] 就可以控制内容占几份
vue
<h-card-v1
	class="h-left h-row-full h-image-1 h-content-1"
	:h_data="ui_card_v52"></h-card-v1>
<h-card-v1
	class="h-left h-row-full h-image-1 h-content-1"
	:h_data="ui_card_v52"></h-card-v1>
vue
<h-card-v1
	class="h-left h-row-full h-content-2"
	:h_data="ui_card_v52"></h-card-v1>
<h-card-v1
	class="h-left h-row-full h-content-2"
	:h_data="ui_card_v52"></h-card-v1>
vue
<h-card-v1
	class="h-left h-row-full h-content-3"
	:h_data="ui_card_v52"></h-card-v1>
<h-card-v1
	class="h-left h-row-full h-content-3"
	:h_data="ui_card_v52"></h-card-v1>
vue
<h-card-v1
	class="h-left h-row-full h-content-4"
	:h_data="ui_card_v52"></h-card-v1>
<h-card-v1
	class="h-left h-row-full h-content-4"
	:h_data="ui_card_v52"></h-card-v1>
vue
<h-card-v1
	class="h-left h-row-full h-image-2 h-content-1"
	:h_data="ui_card_v52"></h-card-v1>
<h-card-v1
	class="h-left h-row-full h-image-2 h-content-1"
	:h_data="ui_card_v52"></h-card-v1>

内容排列方式 ​

  • 从上往下(默认)
  • 居中 h-center
  • 平分 h-between
vue
<h-card-v1 class="h-left h-center h-row-full" :h_data="ui_card_v52"></h-card-v1>
<h-card-v1 class="h-left h-center h-row-full" :h_data="ui_card_v52"></h-card-v1>
vue
<h-card-v1
	class="h-left h-between h-row-full"
	:h_data="ui_card_v52"></h-card-v1>
<h-card-v1
	class="h-left h-between h-row-full"
	:h_data="ui_card_v52"></h-card-v1>

卡片固定在上下左右某个位置 ​

  • 固定在左上 h-left-top
  • 固定在左中 h-left-center
  • 固定在左下 h-left-bottom
  • 固定在右上 h-right-top
  • 固定在右中 h-right-center
  • 固定在右下 h-right-bottom
  • 固定在中下 h-center-bottom
vue
<h-card-v1 class="h-right-bottom" :h_data="ui_card_v522"></h-card-v1>
<h-card-v1 class="h-right-bottom" :h_data="ui_card_v522"></h-card-v1>

子卡片组 ​

vue
<h-card-v1 h_data="ui_card_v53"></h-card-v1>
<h-card-v1 h_data="ui_card_v53"></h-card-v1>

子卡片组-图片在左，一行一个，给图片指定高度 ​

  • h-image-150，代表图片高度为150px，范围为[50, 100, 150, ..., 650]
vue
<h-card-v1 class="h-left h-row-1" h_data="ui_card_v53"></h-card-v1>
<h-card-v1 class="h-left h-row-1" h_data="ui_card_v53"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 :h_data="ui_card_v53"></h-card-v1>
</template>

<script setup>
	const ui_card_v53 = {
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		items: [
			{
				icon: {
					name: 'fa fa-user text-6xl',
					class:
						'bg-gradient-to-r from-blue-300 to-green-300 px-2 py-12 rounded'
				},
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				icon: {
					name: 'fa fa-user text-6xl',
					class:
						'bg-gradient-to-r from-blue-300 to-green-300 px-2 py-12 rounded'
				},
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/1/2/1261a22163ccc8b554194ff94c2118d641b1b100.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			}
		]
	}
</script>
<template>
	<h-card-v1 :h_data="ui_card_v53"></h-card-v1>
</template>

<script setup>
	const ui_card_v53 = {
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		items: [
			{
				icon: {
					name: 'fa fa-user text-6xl',
					class:
						'bg-gradient-to-r from-blue-300 to-green-300 px-2 py-12 rounded'
				},
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				icon: {
					name: 'fa fa-user text-6xl',
					class:
						'bg-gradient-to-r from-blue-300 to-green-300 px-2 py-12 rounded'
				},
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/1/2/1261a22163ccc8b554194ff94c2118d641b1b100.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			}
		]
	}
</script>
点击查看示例代码（yaml）
yaml
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
items:
  - icon:
      name: user huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: coffee huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: fax huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: chess queen huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: desktop huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-pink-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: hourglass huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-red-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
items:
  - icon:
      name: user huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: coffee huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: fax huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: chess queen huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-green-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: desktop huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-pink-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - icon:
      name: hourglass huge olive inverted circular
      class: bg-gradient-to-r from-blue-300 to-red-300 px-2 rounded
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'

子卡片组一行展示两个 ​

vue
<h-card-v1 class="h-left h-row-2" h_data="ui_card_v51"></h-card-v1>
<h-card-v1 class="h-left h-row-2" h_data="ui_card_v51"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 class="h-left h-row-2" :h_data="ui_card_v53"></h-card-v1>
</template>

<script setup>
	const ui_card_v53 = {
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		items: [
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			}
		]
	}
</script>
<template>
	<h-card-v1 class="h-left h-row-2" :h_data="ui_card_v53"></h-card-v1>
</template>

<script setup>
	const ui_card_v53 = {
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		items: [
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			},
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: '90天产品经理实战班',
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' }
				]
			}
		]
	}
</script>
点击查看示例代码（yaml）
yaml
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
items:
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header:
      name: 90天产品经理实战班
      class: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
items:
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header:
      name: 90天产品经理实战班
      class: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'
  - image: >-
      https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
    header: 90天产品经理实战班
    meta:
      - BAT大厂
      - 7200元
      - 三个月
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
    extra:
      - name: 查看详情
        link: 'https://www.baidu.com'
      - name: 修改
        link: 'https://www.baidu.com'

主题 ​

点击查看示例代码
vue
<h-card-v1 class="red" header="90天产品经理实战班-红"></h-card-v1>
<h-card-v1 class="orange" header="90天产品经理实战班-橙"></h-card-v1>
<h-card-v1 class="yellow" header="90天产品经理实战班-黄"></h-card-v1>
<h-card-v1 class="green" header="90天产品经理实战班-绿"></h-card-v1>
<h-card-v1 class="cyan" header="90天产品经理实战班-青"></h-card-v1>
<h-card-v1 class="blue" header="90天产品经理实战班-蓝"></h-card-v1>
<h-card-v1 class="purple" header="90天产品经理实战班-紫"></h-card-v1>
<h-card-v1 class="red" header="90天产品经理实战班-红"></h-card-v1>
<h-card-v1 class="orange" header="90天产品经理实战班-橙"></h-card-v1>
<h-card-v1 class="yellow" header="90天产品经理实战班-黄"></h-card-v1>
<h-card-v1 class="green" header="90天产品经理实战班-绿"></h-card-v1>
<h-card-v1 class="cyan" header="90天产品经理实战班-青"></h-card-v1>
<h-card-v1 class="blue" header="90天产品经理实战班-蓝"></h-card-v1>
<h-card-v1 class="purple" header="90天产品经理实战班-紫"></h-card-v1>

主题+链接 ​

点击查看示例代码
vue
<h-card-v1 class="red" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="orange" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="yellow" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="green" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="cyan" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="blue" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="purple" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="red" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="orange" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="yellow" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="green" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="cyan" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="blue" h_data="ui_card_v052"></h-card-v1>
<h-card-v1 class="purple" h_data="ui_card_v052"></h-card-v1>
yaml
header:
  name: 90天产品经理实战班
  link: 'https://www.baidu.com/'
  class: justify-center
header:
  name: 90天产品经理实战班
  link: 'https://www.baidu.com/'
  class: justify-center

header 追加样式 ​

vue
<h-card-v1 h_data="ui_card_v051"></h-card-v1>
<h-card-v1 h_data="ui_card_v051"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 :h_data="ui_card_v051"></h-card-v1>
</template>

<script setup>
	const ui_card_v051 = {
		items: [
			{
				header: {
					name: '90天产品经理实战班',
					class:
						'bg-gradient-to-r from-sky-500 to-indigo-500 justify-center text-white p-3'
				},
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				]
			},
			{
				header: {
					name: '90天产品经理实战班',
					class:
						'bg-gradient-to-r from-violet-500 to-fuchsia-500 justify-center text-white p-3'
				},
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				]
			},
			{
				header: {
					name: '90天产品经理实战班',
					class:
						'bg-gradient-to-r from-purple-500 to-purple-200 justify-center text-white p-3'
				},
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				]
			}
		]
	}
</script>
<template>
	<h-card-v1 :h_data="ui_card_v051"></h-card-v1>
</template>

<script setup>
	const ui_card_v051 = {
		items: [
			{
				header: {
					name: '90天产品经理实战班',
					class:
						'bg-gradient-to-r from-sky-500 to-indigo-500 justify-center text-white p-3'
				},
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				]
			},
			{
				header: {
					name: '90天产品经理实战班',
					class:
						'bg-gradient-to-r from-violet-500 to-fuchsia-500 justify-center text-white p-3'
				},
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				]
			},
			{
				header: {
					name: '90天产品经理实战班',
					class:
						'bg-gradient-to-r from-purple-500 to-purple-200 justify-center text-white p-3'
				},
				description: [
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
				]
			}
		]
	}
</script>
点击查看示例代码（yaml）
yaml
items:
  - header:
      name: 90天产品经理实战班
      class: bg-gradient-to-r from-sky-500 to-indigo-500 justify-center text-white p-3
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - header:
      name: 90天产品经理实战班
      class: >-
        bg-gradient-to-r from-violet-500 to-fuchsia-500 justify-center p-3
        text-white
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - header:
      name: 90天产品经理实战班
      class: bg-gradient-to-r from-purple-500 to-purple-200 justify-center text-white p-3
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
items:
  - header:
      name: 90天产品经理实战班
      class: bg-gradient-to-r from-sky-500 to-indigo-500 justify-center text-white p-3
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - header:
      name: 90天产品经理实战班
      class: >-
        bg-gradient-to-r from-violet-500 to-fuchsia-500 justify-center p-3
        text-white
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - header:
      name: 90天产品经理实战班
      class: bg-gradient-to-r from-purple-500 to-purple-200 justify-center text-white p-3
    description:
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      - 学习大厂实用方法论，做有大局观、能拿结果的产品经理

卡片组里放其他子组件 ​

vue
<h-card-v1 class="h-row-1" h_data="ui_card_v0522"></h-card-v1>
<h-card-v1 class="h-row-1" h_data="ui_card_v0522"></h-card-v1>
vue
<h-card-v1 class="h-row-2" h_data="ui_card_v0522"></h-card-v1>
<h-card-v1 class="h-row-2" h_data="ui_card_v0522"></h-card-v1>
vue
<h-card-v1 class="h-row-3" h_data="ui_card_v0522"></h-card-v1>
<h-card-v1 class="h-row-3" h_data="ui_card_v0522"></h-card-v1>
点击查看示例代码
vue
<template>
	<h-card-v1 class="h-row-2" :h_data="ui_card_v0522"></h-card-v1>
</template>

<script setup>
	const ui_card_v0522 = {
		items: [
			{
				component: 'h-vega-v1',
				meta: {
					mark: 'bar',
					title: 'A Simple Bar Chart',
					encoding: {
						x: { field: 'a', type: 'ordinal' },
						y: { field: 'b', type: 'quantitative' }
					}
				},
				content: [
					{ a: 'A', b: 28 },
					{ a: 'B', b: 55 },
					{ a: 'C', b: 43 },
					{ a: 'D', b: 91 },
					{ a: 'E', b: 81 },
					{ a: 'F', b: 53 },
					{ a: 'G', b: 19 },
					{ a: 'H', b: 87 },
					{ a: 'I', b: 52 }
				]
			},
			{
				component: 'h-vega-v1',
				meta: {
					mark: 'line',
					title: 'A Simple Bar Chart',
					encoding: {
						x: { field: 'a', type: 'ordinal' },
						y: { field: 'b', type: 'quantitative' }
					},
					strokeDash: { field: 'predicted', type: 'nominal' }
				},
				content: [
					{ a: 'A', b: 28, predicted: false },
					{ a: 'B', b: 55, predicted: false },
					{ a: 'D', b: 91, predicted: false },
					{ a: 'E', b: 81, predicted: false },
					{ a: 'E', b: 81, predicted: true },
					{ a: 'G', b: 19, predicted: true },
					{ a: 'H', b: 87, predicted: true }
				]
			},
			{
				component: 'h-vega-v1',
				meta: {
					mark: 'arc',
					title: 'A Simple Bar Chart',
					encoding: {
						theta: { field: 'value', type: 'quantitative' },
						color: { field: 'category', type: 'nominal' }
					}
				},
				content: [
					{ category: 1, value: 4 },
					{ category: 2, value: 6 },
					{ category: 3, value: 10 },
					{ category: 4, value: 3 },
					{ category: 5, value: 7 },
					{ category: 6, value: 8 }
				]
			}
		]
	}
</script>
<template>
	<h-card-v1 class="h-row-2" :h_data="ui_card_v0522"></h-card-v1>
</template>

<script setup>
	const ui_card_v0522 = {
		items: [
			{
				component: 'h-vega-v1',
				meta: {
					mark: 'bar',
					title: 'A Simple Bar Chart',
					encoding: {
						x: { field: 'a', type: 'ordinal' },
						y: { field: 'b', type: 'quantitative' }
					}
				},
				content: [
					{ a: 'A', b: 28 },
					{ a: 'B', b: 55 },
					{ a: 'C', b: 43 },
					{ a: 'D', b: 91 },
					{ a: 'E', b: 81 },
					{ a: 'F', b: 53 },
					{ a: 'G', b: 19 },
					{ a: 'H', b: 87 },
					{ a: 'I', b: 52 }
				]
			},
			{
				component: 'h-vega-v1',
				meta: {
					mark: 'line',
					title: 'A Simple Bar Chart',
					encoding: {
						x: { field: 'a', type: 'ordinal' },
						y: { field: 'b', type: 'quantitative' }
					},
					strokeDash: { field: 'predicted', type: 'nominal' }
				},
				content: [
					{ a: 'A', b: 28, predicted: false },
					{ a: 'B', b: 55, predicted: false },
					{ a: 'D', b: 91, predicted: false },
					{ a: 'E', b: 81, predicted: false },
					{ a: 'E', b: 81, predicted: true },
					{ a: 'G', b: 19, predicted: true },
					{ a: 'H', b: 87, predicted: true }
				]
			},
			{
				component: 'h-vega-v1',
				meta: {
					mark: 'arc',
					title: 'A Simple Bar Chart',
					encoding: {
						theta: { field: 'value', type: 'quantitative' },
						color: { field: 'category', type: 'nominal' }
					}
				},
				content: [
					{ category: 1, value: 4 },
					{ category: 2, value: 6 },
					{ category: 3, value: 10 },
					{ category: 4, value: 3 },
					{ category: 5, value: 7 },
					{ category: 6, value: 8 }
				]
			}
		]
	}
</script>