Skip to content

Card v7

基础用法

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

<script setup>
const h_data = {
  component: 'h-card-v7',
  class_list: 'h-row-4',
  header: '90天产品经理实战班',
  description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
  extra: [
	{ name: '查看详情', link: 'https://www.baidu.com' }, 
	{ name: '修改', link: 'https://www.baidu.com' },
	{ name: '返回', link: 'https://www.baidu.com' },
  ],
  content: [
    {
      header: {
        name: ['90天产品经理实战班', '90天产品经理实战班'],
        class: ''
      },
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [
        { name: '查看详情', link: 'https://www.baidu.com' }, 
        { name: '修改', link: 'https://www.baidu.com' },
        { name: '返回', link: 'https://www.baidu.com', class: ' ml-auto' },
        ],
    },
    {
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
    },
	{
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
    },
	{
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
    },
  ]
}
</script>
<template>
	<h-card-v7 :h_data="h_data"></h-card-v7>
</template>

<script setup>
const h_data = {
  component: 'h-card-v7',
  class_list: 'h-row-4',
  header: '90天产品经理实战班',
  description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
  extra: [
	{ name: '查看详情', link: 'https://www.baidu.com' }, 
	{ name: '修改', link: 'https://www.baidu.com' },
	{ name: '返回', link: 'https://www.baidu.com' },
  ],
  content: [
    {
      header: {
        name: ['90天产品经理实战班', '90天产品经理实战班'],
        class: ''
      },
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [
        { name: '查看详情', link: 'https://www.baidu.com' }, 
        { name: '修改', link: 'https://www.baidu.com' },
        { name: '返回', link: 'https://www.baidu.com', class: ' ml-auto' },
        ],
    },
    {
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
    },
	{
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
    },
	{
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
      extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
    },
  ]
}
</script>