为 PluginFolderCard 组件添加背景图片计算逻辑和背景遮罩样式,优化背景显示效果

This commit is contained in:
jxxghp
2025-05-24 17:36:32 +08:00
parent 11c8c488da
commit 8b1805628e
+21 -3
View File
@@ -71,6 +71,11 @@ const folderSettings = ref<FolderConfig>({
showIcon: true, showIcon: true,
}) })
// 计算背景图片
const backgroundImage = computed(() => {
return props.folderConfig.background || folderSettings.value.background
})
// 预设图标选项 // 预设图标选项
const iconOptions = [ const iconOptions = [
'mdi-folder', 'mdi-folder',
@@ -277,12 +282,15 @@ const dropdownItems = ref([
'plugin-folder-card--hover': hover.isHovering, 'plugin-folder-card--hover': hover.isHovering,
}" }"
> >
<template v-if="props.folderConfig.background || folderSettings.background" #image> <template v-if="backgroundImage" #image>
<VImg :src="props.folderConfig.background || folderSettings.background" cover position="top"> </VImg> <VImg :src="backgroundImage" cover position="top"> </VImg>
</template> </template>
<!-- 背景遮罩当有背景图片时 -->
<div v-if="backgroundImage" class="plugin-folder-card__overlay" />
<!-- 背景渐变层 --> <!-- 背景渐变层 -->
<div class="plugin-folder-card__bg" :style="{ background: backgroundGradient }" /> <div v-else class="plugin-folder-card__bg" :style="{ background: backgroundGradient }" />
<!-- 卡片内容 --> <!-- 卡片内容 -->
<div class="plugin-folder-card__content"> <div class="plugin-folder-card__content">
@@ -480,6 +488,16 @@ const dropdownItems = ref([
outline: none; outline: none;
} }
&__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
}
&__content { &__content {
position: relative; position: relative;
z-index: 2; z-index: 2;