115 lines
2.6 KiB
Vue
115 lines
2.6 KiB
Vue
<!-- 卡片横幅组件 -->
|
|
<template>
|
|
<div class="art-card-sm flex-c flex-col pb-6" :style="{ height: height }">
|
|
<div class="flex-c flex-col gap-4 text-center">
|
|
<div class="w-45">
|
|
<img :src="image" :alt="title" class="w-full h-full object-contain" />
|
|
</div>
|
|
<div class="box-border px-4">
|
|
<p class="mb-2 text-lg font-semibold text-g-800">{{ title }}</p>
|
|
<p class="m-0 text-sm text-g-600">{{ description }}</p>
|
|
</div>
|
|
<div class="flex-c gap-3">
|
|
<div
|
|
v-if="cancelButton?.show"
|
|
class="inline-block h-9 px-3 text-sm/9 c-p select-none rounded-md border border-g-300"
|
|
:style="{
|
|
backgroundColor: cancelButton?.color,
|
|
color: cancelButton?.textColor
|
|
}"
|
|
@click="handleCancel"
|
|
>
|
|
{{ cancelButton?.text }}
|
|
</div>
|
|
<div
|
|
v-if="button?.show"
|
|
class="inline-block h-9 px-3 text-sm/9 c-p select-none rounded-md"
|
|
:style="{ backgroundColor: button?.color, color: button?.textColor }"
|
|
@click="handleClick"
|
|
>
|
|
{{ button?.text }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 导入默认图标
|
|
import defaultIcon from '@imgs/3d/icon1.webp'
|
|
|
|
defineOptions({ name: 'ArtCardBanner' })
|
|
|
|
// 定义卡片横幅组件的属性接口
|
|
interface CardBannerProps {
|
|
/** 高度 */
|
|
height?: string
|
|
/** 图片路径 */
|
|
image?: string
|
|
/** 标题文本 */
|
|
title: string
|
|
/** 描述文本 */
|
|
description: string
|
|
/** 主按钮配置 */
|
|
button?: {
|
|
/** 是否显示 */
|
|
show?: boolean
|
|
/** 按钮文本 */
|
|
text?: string
|
|
/** 背景颜色 */
|
|
color?: string
|
|
/** 文字颜色 */
|
|
textColor?: string
|
|
}
|
|
/** 取消按钮配置 */
|
|
cancelButton?: {
|
|
/** 是否显示 */
|
|
show?: boolean
|
|
/** 按钮文本 */
|
|
text?: string
|
|
/** 背景颜色 */
|
|
color?: string
|
|
/** 文字颜色 */
|
|
textColor?: string
|
|
}
|
|
}
|
|
|
|
// 定义组件属性默认值
|
|
withDefaults(defineProps<CardBannerProps>(), {
|
|
height: '24rem',
|
|
image: defaultIcon,
|
|
title: '',
|
|
description: '',
|
|
// 主按钮默认配置
|
|
button: () => ({
|
|
show: true,
|
|
text: '查看详情',
|
|
color: 'var(--theme-color)',
|
|
textColor: '#fff'
|
|
}),
|
|
// 取消按钮默认配置
|
|
cancelButton: () => ({
|
|
show: false,
|
|
text: '取消',
|
|
color: '#f5f5f5',
|
|
textColor: '#666'
|
|
})
|
|
})
|
|
|
|
// 定义组件事件
|
|
const emit = defineEmits<{
|
|
(e: 'click'): void // 主按钮点击事件
|
|
(e: 'cancel'): void // 取消按钮点击事件
|
|
}>()
|
|
|
|
// 主按钮点击处理函数
|
|
const handleClick = () => {
|
|
emit('click')
|
|
}
|
|
|
|
// 取消按钮点击处理函数
|
|
const handleCancel = () => {
|
|
emit('cancel')
|
|
}
|
|
</script>
|