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>