mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
为 PluginFolderCard 组件添加背景图片计算逻辑和背景遮罩样式,优化背景显示效果
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user