Skip to content

Card v2

基础用法

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

<script setup>
	const h_data = {
		component: 'h-card-v2',
		header: '90天产品经理实战班',
		description: [
			'学习大厂实用方法论,做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论,做有大局观、能拿结果的产品经理'
		],
		content: [
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: {
					name: ['90天产品经理实战班', '90天产品经理实战班'],
					class:
						'bg-gradient-to-r from-sky-500 to-indigo-500 justify-center text-white p-3 h-20'
				},
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论,做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论,做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' },
					{
						name: '返回',
						link: 'https://www.baidu.com',
						class: '!bg-green-600 ml-auto'
					}
				]
			},
			{
				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-v2 class="h-left h-row-1" :h_data="h_data"></h-card-v2>
</template>

<script setup>
	const h_data = {
		component: 'h-card-v2',
		header: '90天产品经理实战班',
		description: [
			'学习大厂实用方法论,做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论,做有大局观、能拿结果的产品经理'
		],
		content: [
			{
				image:
					'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
				header: {
					name: ['90天产品经理实战班', '90天产品经理实战班'],
					class:
						'bg-gradient-to-r from-sky-500 to-indigo-500 justify-center text-white p-3 h-20'
				},
				meta: ['BAT大厂', '7200元', '三个月'],
				description: [
					'学习大厂实用方法论,做有大局观、能拿结果的产品经理',
					'学习大厂实用方法论,做有大局观、能拿结果的产品经理'
				],
				extra: [
					{ name: '查看详情', link: 'https://www.baidu.com' },
					{ name: '修改', link: 'https://www.baidu.com' },
					{
						name: '返回',
						link: 'https://www.baidu.com',
						class: '!bg-green-600 ml-auto'
					}
				]
			},
			{
				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>