hogwarts-ui 官方网站

Appearance

extra-v1 拓展 ​

  • extra底部拓展部分，可以设置描述和二维码

基本用法 ​

  • 可以传一张或多张二维码图片
点击查看示例代码
vue
<template>
  <h-extra-v1 :h_data="h_data1"></h-extra-v1>
</template>

<script setup>
const h_data1 = {
  // 组件名称
  component: 'h-extra-v1',
  // 样式
  class: 'bg-[#f26d3e] text-white',
  // 标题
  header: '限时优惠进行中>>>',
  // 内容
  content: [
    '日期：2024年9月24日',
    '时间：14:00-17:00',
    // '地址：电子科技大学成都学院（成都校区）北区3号楼C302'
  ],
  // 图片
  image: [
    'https://qrcode.ceba.ceshiren.com/qrcode/show?project=qrcode&pattern=dzkdrgznsl&from=hogwarts',
    'http://dev-poster.ceba.ceshiren.com/static/shalong.png',
  ]
}
</script>
<template>
  <h-extra-v1 :h_data="h_data1"></h-extra-v1>
</template>

<script setup>
const h_data1 = {
  // 组件名称
  component: 'h-extra-v1',
  // 样式
  class: 'bg-[#f26d3e] text-white',
  // 标题
  header: '限时优惠进行中>>>',
  // 内容
  content: [
    '日期：2024年9月24日',
    '时间：14:00-17:00',
    // '地址：电子科技大学成都学院（成都校区）北区3号楼C302'
  ],
  // 图片
  image: [
    'https://qrcode.ceba.ceshiren.com/qrcode/show?project=qrcode&pattern=dzkdrgznsl&from=hogwarts',
    'http://dev-poster.ceba.ceshiren.com/static/shalong.png',
  ]
}
</script>
点击查看示例代码(yaml)
yaml
component: h-extra-v1
header: 限时优惠进行中>>>
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
image:
  - https://qrcode.ceba.ceshiren.com/qrcode/show?project=qrcode&pattern=dzkdrgznsl&from=hogwarts
  - http://dev-poster.ceba.ceshiren.com/static/shalong.png
component: h-extra-v1
header: 限时优惠进行中>>>
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
image:
  - https://qrcode.ceba.ceshiren.com/qrcode/show?project=qrcode&pattern=dzkdrgznsl&from=hogwarts
  - http://dev-poster.ceba.ceshiren.com/static/shalong.png

不传图片时，内容会自动居中 ​

  • image参数不传时，就不会显示二维码或者图片，此时内容会自动居中
点击查看示例代码
vue
<template>
  <h-extra-v1 :h_data="h_data2"></h-extra-v1>
</template>

<script setup>
const h_data2 = {
  // 组件名称
  component: 'h-extra-v1',
  // 样式
  class: 'bg-[#f26d3e] text-white',
  // 标题
  header: '限时优惠进行中>>>',
  // 内容
  content: [
    '日期：2024年9月24日',
    '时间：14:00-17:00',
    // '地址：电子科技大学成都学院（成都校区）北区3号楼C302'
  ],
}
</script>
<template>
  <h-extra-v1 :h_data="h_data2"></h-extra-v1>
</template>

<script setup>
const h_data2 = {
  // 组件名称
  component: 'h-extra-v1',
  // 样式
  class: 'bg-[#f26d3e] text-white',
  // 标题
  header: '限时优惠进行中>>>',
  // 内容
  content: [
    '日期：2024年9月24日',
    '时间：14:00-17:00',
    // '地址：电子科技大学成都学院（成都校区）北区3号楼C302'
  ],
}
</script>
点击查看示例代码(yaml)
yaml
component: h-extra-v1
header: 限时优惠进行中>>>
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
image:
  - https://qrcode.ceba.ceshiren.com/qrcode/show?project=qrcode&pattern=dzkdrgznsl&from=hogwarts
  - http://dev-poster.ceba.ceshiren.com/static/shalong.png
component: h-extra-v1
header: 限时优惠进行中>>>
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
image:
  - https://qrcode.ceba.ceshiren.com/qrcode/show?project=qrcode&pattern=dzkdrgznsl&from=hogwarts
  - http://dev-poster.ceba.ceshiren.com/static/shalong.png