mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-08 01:06:41 +08:00
fix: prevent download card shadow clipping
This commit is contained in:
@@ -71,8 +71,8 @@ async function deleteDownload() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="cardState" class="downloading-card-shadow-shell">
|
||||
<VCard
|
||||
v-if="cardState"
|
||||
:key="props.info?.hash"
|
||||
class="downloading-card flex flex-col h-full overflow-hidden"
|
||||
rounded="lg"
|
||||
@@ -126,15 +126,38 @@ async function deleteDownload() {
|
||||
</VCardActions>
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
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-responsive),
|
||||
|
||||
@@ -76,7 +76,12 @@ useKeepAliveRefresh(fetchData, {
|
||||
|
||||
<template>
|
||||
<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
|
||||
v-if="filteredDataList.length > 0"
|
||||
:items="filteredDataList"
|
||||
@@ -96,3 +101,11 @@ useKeepAliveRefresh(fetchData, {
|
||||
/>
|
||||
</VPullToRefresh>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// VPullToRefresh 自带 overflow: hidden,给下载卡阴影预留裁剪范围内的缓冲区。
|
||||
.downloading-refresh-shell {
|
||||
margin: -1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user