hogwarts-ui 官方网站poster-v1 海报
- poster本身是一个容器，它能设置背景图和背景颜色
设置背景图片
- 背景图使用background传递，图片可以在素材库挑选，也可以在网上搜好看的图片，然后上传到素材库进行使用
点击查看示例代码
vue
<template>
<h-poster-v1 :h_data="h_data1"></h-poster-v1>
</template>
<script setup>
const h_data1 = {
// 组件名称
component: 'h-poster-v1',
// 样式
class: 'w-[750px] ',
// 背景图片
background: 'http://dev-poster.ceba.ceshiren.com/static/b2.jpeg'
}
</script><template>
<h-poster-v1 :h_data="h_data1"></h-poster-v1>
</template>
<script setup>
const h_data1 = {
// 组件名称
component: 'h-poster-v1',
// 样式
class: 'w-[750px] ',
// 背景图片
background: 'http://dev-poster.ceba.ceshiren.com/static/b2.jpeg'
}
</script>点击查看示例代码(yaml)
yaml
component: h-poster-v1
class: w-[750px]
background: http://dev-poster.ceba.ceshiren.com/static/b2.jpegcomponent: h-poster-v1
class: w-[750px]
background: http://dev-poster.ceba.ceshiren.com/static/b2.jpeg设置背景颜色
- 设置背景颜色使用class参数，直接作用在容器本身上，方法参考tailwind的背景颜色
点击查看示例代码
vue
<template>
<h-poster-v1 :h_data="h_data2"></h-poster-v1>
</template>
<script setup>
const h_data2 = {
// 组件名称
component: 'h-poster-v1',
// 样式
class: 'w-[750px] bg-[#50d71e]',
}
</script><template>
<h-poster-v1 :h_data="h_data2"></h-poster-v1>
</template>
<script setup>
const h_data2 = {
// 组件名称
component: 'h-poster-v1',
// 样式
class: 'w-[750px] bg-[#50d71e]',
}
</script>点击查看示例代码(yaml)
yaml
component: h-poster-v1
class: w-[750px] bg-[#50d71e]component: h-poster-v1
class: w-[750px] bg-[#50d71e]设置背景颜色-渐变
- 背景颜色也可以使用渐变，参考tailwind的背景渐变色
点击查看示例代码
vue
<template>
<h-poster-v1 :h_data="h_data3"></h-poster-v1>
</template>
<script setup>
const h_data3 = {
// 组件名称
component: 'h-poster-v1',
// 样式
class: 'w-[750px] bg-gradient-to-b from-[#daf2ff] to-[#fe6917]',
}
</script><template>
<h-poster-v1 :h_data="h_data3"></h-poster-v1>
</template>
<script setup>
const h_data3 = {
// 组件名称
component: 'h-poster-v1',
// 样式
class: 'w-[750px] bg-gradient-to-b from-[#daf2ff] to-[#fe6917]',
}
</script>点击查看示例代码(yaml)
yaml
component: h-poster-v1
class: w-[750px] bg-gradient-to-b from-[#daf2ff] to-[#fe6917]component: h-poster-v1
class: w-[750px] bg-gradient-to-b from-[#daf2ff] to-[#fe6917]