GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-30 21:00:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jxxghp
2025-05-24 17:36:32 +08:00
parent 11c8c488da
commit 8b1805628e
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/cards/PluginFolderCard.vue
View File

@@ -71,6 +71,11 @@ const folderSettings = ref<FolderConfig>({
showIcon: true,
})
// 计算背景图片
const backgroundImage = computed(() => {
return props.folderConfig.background || folderSettings.value.background
})
// 预设图标选项
const iconOptions = [
'mdi-folder',
@@ -277,12 +282,15 @@ const dropdownItems = ref([
'plugin-folder-card--hover': hover.isHovering,
}"
>
<template v-if="props.folderConfig.background || folderSettings.background" #image>
<VImg :src="props.folderConfig.background || folderSettings.background" cover position="top"> </VImg>
<template v-if="backgroundImage" #image>
<VImg :src="backgroundImage" cover position="top"> </VImg>
</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">
@@ -480,6 +488,16 @@ const dropdownItems = ref([
outline: none;
}
&__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
}
&__content {
position: relative;
z-index: 2;