hogwarts-ui 官方网站

Appearance

Cards 卡片组 ​

将多个卡片包含在一个卡片中，并且可以包含多个卡片组 卡片包含图片image，头部header，标签meta，描述description和拓展extra 每个内容均未可选，不传对应数据时展示为空

单卡片数据 ​

点击查看示例代码
vue
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>

为卡片标题设置icon ​

点击查看示例代码
vue
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    icon: 'setting',
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    icon: 'setting',
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>

为卡片标题图片标签 ​

点击查看示例代码
vue
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    img: 'https://ceshiren.com/uploads/default/original/3X/8/c/8cf1474235b0bfc751771a209e2eda4afd5b8335.jpeg',
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    img: 'https://ceshiren.com/uploads/default/original/3X/8/c/8cf1474235b0bfc751771a209e2eda4afd5b8335.jpeg',
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>

为拓展按钮单独设置跳转链接 ​

点击查看示例代码
vue
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    icon: 'setting',
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: [{name: '查看详情1', link: 'https://ceshiren.com'}]
  }
}
</script>
<template>
  <!-- 单个卡片 -->
  <h-cards :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    icon: 'setting',
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: [{name: '查看详情1', link: 'https://ceshiren.com'}]
  }
}
</script>

水平展示 图片在左 ​

点击查看示例代码
vue
<template>
  <!-- 水平展示 图片在左 -->
  <h-cards left :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>
<template>
  <!-- 水平展示 图片在左 -->
  <h-cards left :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>

水平展示 图片在右 ​

点击查看示例代码
vue
<template>
  <!-- 水平展示 图片在右 -->
  <h-cards right :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>
<template>
  <!-- 水平展示 图片在右 -->
  <h-cards right :h_data="h_card"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>

设置宽度 ​

点击查看示例代码
vue
<template>
  <!-- 设置宽度 -->
  <h-cards left :h_data="h_card" style="width: 50%"></h-cards>
  <h-cards left :h_data="h_card" style="width: 500px"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>
<template>
  <!-- 设置宽度 -->
  <h-cards left :h_data="h_card" style="width: 50%"></h-cards>
  <h-cards left :h_data="h_card" style="width: 500px"></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>

水平展示全宽 ​

点击查看示例代码
vue
<template>
  <!-- 设置宽度 -->
  <h-cards left :h_data="h_card" class='w-full'></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>
<template>
  <!-- 设置宽度 -->
  <h-cards left :h_data="h_card" class='w-full'></h-cards>
</template>

<script setup>
const h_card = {
  image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    extra: ['修改', '删除']
  }
}
</script>

卡片组 ​

点击查看示例代码
vue
<template>
  <!-- 设置宽度 -->
  <h-cards :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
  <!-- 设置宽度 -->
  <h-cards :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>

卡片组内部卡片左右布局 ​

点击查看示例代码
vue
<template>
  <!-- 设置宽度 -->
  <h-cards left row="two" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
  <!-- 设置宽度 -->
  <h-cards left row="two" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>

卡片组每行多个 ​

点击查看示例代码
vue
<template>
  <!-- 设置宽度 -->
  <h-cards row="one" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
  <!-- 设置宽度 -->
  <h-cards row="one" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
点击查看示例代码
vue
<template>
  <!-- 设置宽度 -->
  <h-cards row="two" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
  <!-- 设置宽度 -->
  <h-cards row="two" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
点击查看示例代码
vue
<template>
  <!-- 设置宽度 -->
  <h-cards row="three" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
  <!-- 设置宽度 -->
  <h-cards row="three" :h_data="h_cards"></h-cards>
</template>

<script setup>
const h_cards = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>

子卡片组 ​

点击查看示例代码
vue
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :h_data="h_card_sub1" ></h-cards>
        <h-cards :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :h_data="h_card_sub1" ></h-cards>
        <h-cards :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>

多个卡片组大小设置 ​

点击查看示例代码
vue
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>

子卡片组中的卡片水平展示 ​

点击查看示例代码
vue
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" row="three" :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" left :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" row="three" :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" left :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
点击查看示例代码
vue
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" left row="two" :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" left row="two" :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>

子卡片组垂直排列 ​

点击查看示例代码
vue
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" left row=two :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>
<template>
    <h-cards :h_data="h_card_parent">
        <h-cards :flex="4" left row=two :h_data="h_card_sub1" ></h-cards>
        <h-cards :flex="1" :h_data="h_card_sub2" ></h-cards>
    </h-cards>
</template>

<script setup>
const h_card_parent = {
//   image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
  content: {
    header: '90天测试开发实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    // description: ['学习大厂实用方法论，做有大局观、能拿结果的测试',],
    // extra: ['修改', '删除']
  }
}
const h_card_sub1 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
const h_card_sub2 = {
    // image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
    content: {
    header: '90天产品经理实战班',
    // meta: ['BAT大厂', '7200元', '三个月'],
    description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
    // extra: ['查看详情', '修改', '删除'],
    items: [
      {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      }, {
        image: 'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
        content: {
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理',],
          // extra: ['查看详情', '修改', '删除']
        }
      },
    ]
  }
}
</script>

API ​

属性名说明类型预设值
left图片和内容是否横向左右展示Booleanfalse
row一行展示几张卡片String-
column子卡片组排列方式是否纵向展示Booleanfalse
flex子卡片组默认占几份Number1

插槽 ​

插槽名说明
slot默认插槽，展示在content中
image外层卡片image
header外层卡片header
meta外层卡片meta
meta_item外层卡片meta_item
description外层卡片description
description_item外层卡片description_item
extra外层卡片extra
extra_item外层卡片extra_item
i_image内层子卡片image
i_header内层子卡片header
i_meta内层子卡片meta
i_meta_item内层子卡片meta_item
i_description内层子卡片description
i_description_item内层子卡片description_item
i_extra内层子卡片extra
i_extra_item内层子卡片extra_item