mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-09 09:46:44 +08:00
fix: prevent download card shadow clipping
This commit is contained in:
@@ -71,8 +71,8 @@ async function deleteDownload() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div v-if="cardState" class="downloading-card-shadow-shell">
|
||||||
<VCard
|
<VCard
|
||||||
v-if="cardState"
|
|
||||||
:key="props.info?.hash"
|
:key="props.info?.hash"
|
||||||
class="downloading-card flex flex-col h-full overflow-hidden"
|
class="downloading-card flex flex-col h-full overflow-hidden"
|
||||||
rounded="lg"
|
rounded="lg"
|
||||||
@@ -126,15 +126,38 @@ async function deleteDownload() {
|
|||||||
</VCardActions>
|
</VCardActions>
|
||||||
</div>
|
</div>
|
||||||
</VCard>
|
</VCard>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
// 外层壳承载主题阴影,避免 VCard 的圆角裁切层影响阴影外扩。
|
||||||
|
.downloading-card-shadow-shell {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 8px;
|
||||||
|
block-size: 100%;
|
||||||
|
box-shadow: var(--app-surface-shadow);
|
||||||
|
inline-size: 100%;
|
||||||
|
transition: box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
.downloading-card-shadow-shell:hover {
|
||||||
|
box-shadow: var(--app-surface-hover-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.downloading-card {
|
.downloading-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
background-color: rgb(31, 41, 55) !important;
|
background-color: rgb(31, 41, 55) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 阴影已经交给外层壳,内层卡片只负责裁切图片和内容圆角。
|
||||||
|
.downloading-card.downloading-card.v-card[class],
|
||||||
|
.downloading-card.downloading-card.v-card[class]:hover {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
// 图片槽和渐变遮罩统一继承卡片圆角,避免阴影增强后四角露出页面底色。
|
// 图片槽和渐变遮罩统一继承卡片圆角,避免阴影增强后四角露出页面底色。
|
||||||
.downloading-card :deep(.v-card__image),
|
.downloading-card :deep(.v-card__image),
|
||||||
.downloading-card :deep(.v-responsive),
|
.downloading-card :deep(.v-responsive),
|
||||||
|
|||||||
@@ -76,7 +76,12 @@ useKeepAliveRefresh(fetchData, {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
|
<LoadingBanner v-if="!isRefreshed" class="mt-12" />
|
||||||
<VPullToRefresh v-model="loading" @load="onRefresh" :pull-down-threshold="64">
|
<VPullToRefresh
|
||||||
|
v-model="loading"
|
||||||
|
class="downloading-refresh-shell"
|
||||||
|
@load="onRefresh"
|
||||||
|
:pull-down-threshold="64"
|
||||||
|
>
|
||||||
<ProgressiveCardGrid
|
<ProgressiveCardGrid
|
||||||
v-if="filteredDataList.length > 0"
|
v-if="filteredDataList.length > 0"
|
||||||
:items="filteredDataList"
|
:items="filteredDataList"
|
||||||
@@ -96,3 +101,11 @@ useKeepAliveRefresh(fetchData, {
|
|||||||
/>
|
/>
|
||||||
</VPullToRefresh>
|
</VPullToRefresh>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// VPullToRefresh 自带 overflow: hidden,给下载卡阴影预留裁剪范围内的缓冲区。
|
||||||
|
.downloading-refresh-shell {
|
||||||
|
margin: -1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user