Skip to content

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:
  - 融合人工智能
  - 构建高效测试体系沙龙