content-v2 内容卡片
基本用法
点击查看示例代码
vue
<template>
<h-content-v2 :h_data="h_data1"></h-content-v2>
</template>
<script setup>
const h_data1 = {
// 组件名称
component: 'h-content-v2',
// 样式
class: '',
// 图片
content: ['融合人工智能', '构建高效测试体系沙龙']
}
</script><template>
<h-content-v2 :h_data="h_data1"></h-content-v2>
</template>
<script setup>
const h_data1 = {
// 组件名称
component: 'h-content-v2',
// 样式
class: '',
// 图片
content: ['融合人工智能', '构建高效测试体系沙龙']
}
</script>点击查看示例代码(yaml)
yaml
component: h-content-v2
content:
- 融合人工智能
- 构建高效测试体系沙龙component: h-content-v2
content:
- 融合人工智能
- 构建高效测试体系沙龙增加图片,大小标题
点击查看示例代码
vue
<template>
<h-content-v2 :h_data="h_data2"></h-content-v2>
</template>
<script setup>
const h_data2 = {
// 组件名称
component: 'h-content-v2',
// 样式
class: '',
image: 'http://dev-poster.ceba.ceshiren.com/static/d1.jpeg',
header: '思寒测吧CTO',
subheader: '测吧CTO、资深测试架构师',
// 图片
content: [
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
},
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
},
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
},
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
}
]
}
</script><template>
<h-content-v2 :h_data="h_data2"></h-content-v2>
</template>
<script setup>
const h_data2 = {
// 组件名称
component: 'h-content-v2',
// 样式
class: '',
image: 'http://dev-poster.ceba.ceshiren.com/static/d1.jpeg',
header: '思寒测吧CTO',
subheader: '测吧CTO、资深测试架构师',
// 图片
content: [
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
},
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
},
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
},
{
icon: 'fa fa-check-circle',
name: '5个月大咖强化集训,掌握测试开发必备技能'
}
]
}
</script>点击查看示例代码(yaml)
yaml
component: h-content-v2
content:
- 融合人工智能
- 构建高效测试体系沙龙component: h-content-v2
content:
- 融合人工智能
- 构建高效测试体系沙龙
hogwarts-ui 官方网站