hogwarts-ui 官方网站

Appearance

Banner 横幅 ​

基础用法 ​

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

<script setup>
const h_data = {
    image: 'https://puui.qpic.cn/vpic_cover/u3506x4ckyp/u3506x4ckyp_1679062033_hz.jpg/1280',
    background: 'bg-gradient-to-r from-purple-400 via-pink-500 to-red-100',
    header: 'ChatGPT不会替代你，但掌握ChatGPT的人会4',
    description: ['测试工程师必备技能4', '2023企业培训解决方案新品发布4'],
    extra: ['限时免费观看4'],
}
</script>
<template>
  <h-banner-v1 :h_data="h_data"></h-banner-v1>
</template>

<script setup>
const h_data = {
    image: 'https://puui.qpic.cn/vpic_cover/u3506x4ckyp/u3506x4ckyp_1679062033_hz.jpg/1280',
    background: 'bg-gradient-to-r from-purple-400 via-pink-500 to-red-100',
    header: 'ChatGPT不会替代你，但掌握ChatGPT的人会4',
    description: ['测试工程师必备技能4', '2023企业培训解决方案新品发布4'],
    extra: ['限时免费观看4'],
}
</script>

背景图-bg-cover ​

vue
<h-banner-v1 class="bg-cover" :h_data="h_data1"></h-banner-v1>
<h-banner-v1 class="bg-cover" :h_data="h_data1"></h-banner-v1>

背景图-bg-contain ​

vue
<h-banner-v1 class="bg-contain" :h_data="h_data1"></h-banner-v1>
<h-banner-v1 class="bg-contain" :h_data="h_data1"></h-banner-v1>

背景图-bg-100 ​

vue
<h-banner-v1 class="bg-100" :h_data="h_data1"></h-banner-v1>
<h-banner-v1 class="bg-100" :h_data="h_data1"></h-banner-v1>
点击查看示例代码
vue
<template>
  <h-banner-v1 :h_data="h_data1"></h-banner-v1>
</template>

<script setup>
const h_data1 = {
    conponent: 'h-banner-v1',
    background: 'https://ceshiren.com/uploads/default/original/3X/d/3/d3d901343803939e288209ad0c0e7bcaaa803350.jpeg',
    header: 'ChatGPT不会替代你，但掌握ChatGPT的人会4',
    description: ['测试工程师必备技能4'],
    extra: ['限时免费观看4'],
}
</script>
<template>
  <h-banner-v1 :h_data="h_data1"></h-banner-v1>
</template>

<script setup>
const h_data1 = {
    conponent: 'h-banner-v1',
    background: 'https://ceshiren.com/uploads/default/original/3X/d/3/d3d901343803939e288209ad0c0e7bcaaa803350.jpeg',
    header: 'ChatGPT不会替代你，但掌握ChatGPT的人会4',
    description: ['测试工程师必备技能4'],
    extra: ['限时免费观看4'],
}
</script>

基础用法-v4 ​

点击查看示例代码
yaml
component: h-banner-v4
class: ' bg-[#0c0e25]'
background: >-
  https://ceshiren.com/uploads/default/original/3X/4/a/4a3d13a047f3e272b8c519535332ee60b0f2d527.jpeg
image:
  url: >-
    https://ceshiren.com/uploads/default/original/3X/f/9/f981abb44125698ad11ccfa809de4181ef872e33.png
  class: 'bottom-0 right-0 w-[420px]'
header: WEB全栈工程师
meta:
  - 课程全面升级
  - 原生应用技术课程融入
description:
  - icon: fa fa-circle !text-xs
    name: AGI 与 AIGC 落地
  - icon: fa fa-circle !text-xs
    name: AIGC 浪潮下的效能智能化
  - icon: fa fa-circle !text-xs
    name: AIGC 浪潮下的企业出海
  - icon: fa fa-circle !text-xs
    name: AIGC 浪潮下的企业出海
extra_data:
  title:
    icon: fa fa-map-marker
    name: '开课城市: 全国线上开课'
  subtitle:
    - icon: fa fa-check-circle
      name: 支持开发票
    - icon: fa fa-check-circle
      name: 支持企业团报
    - icon: fa fa-check-circle
      name: 支持分期
  meta:
    name: '课程价格: '
    subname: ¥ 3499
  submeta:
    name: 优惠
    subname:
      - 新用户
      - 复购
      - 老带新
  action:
    - name: 咨询
      class: 'text-[#fe7135]'
      link: 'https://www.baidu.com/'
    - name: 去报名
      class: 'text-white bg-[#fe7836]'
      link: 'https://www.baidu.com/'
component: h-banner-v4
class: ' bg-[#0c0e25]'
background: >-
  https://ceshiren.com/uploads/default/original/3X/4/a/4a3d13a047f3e272b8c519535332ee60b0f2d527.jpeg
image:
  url: >-
    https://ceshiren.com/uploads/default/original/3X/f/9/f981abb44125698ad11ccfa809de4181ef872e33.png
  class: 'bottom-0 right-0 w-[420px]'
header: WEB全栈工程师
meta:
  - 课程全面升级
  - 原生应用技术课程融入
description:
  - icon: fa fa-circle !text-xs
    name: AGI 与 AIGC 落地
  - icon: fa fa-circle !text-xs
    name: AIGC 浪潮下的效能智能化
  - icon: fa fa-circle !text-xs
    name: AIGC 浪潮下的企业出海
  - icon: fa fa-circle !text-xs
    name: AIGC 浪潮下的企业出海
extra_data:
  title:
    icon: fa fa-map-marker
    name: '开课城市: 全国线上开课'
  subtitle:
    - icon: fa fa-check-circle
      name: 支持开发票
    - icon: fa fa-check-circle
      name: 支持企业团报
    - icon: fa fa-check-circle
      name: 支持分期
  meta:
    name: '课程价格: '
    subname: ¥ 3499
  submeta:
    name: 优惠
    subname:
      - 新用户
      - 复购
      - 老带新
  action:
    - name: 咨询
      class: 'text-[#fe7135]'
      link: 'https://www.baidu.com/'
    - name: 去报名
      class: 'text-white bg-[#fe7836]'
      link: 'https://www.baidu.com/'