zuowei/tuhui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show full artwork previews

Browse Source
This commit is contained in:
jimi
2026-03-09 14:34:04 +08:00
parent beae751f25
commit 02ac19f063
2 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/Works.css
View File

@@ -104,7 +104,13 @@
position: relative; position: relative;
height: 290px; height: 290px;
overflow: hidden; overflow: hidden;
background: linear-gradient(135deg, #f7ede2 0%, #efe2d4 100%); display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 42%),
linear-gradient(135deg, #eef7fb 0%, #d9ebf2 100%);
} }
.work-image::after { .work-image::after {
@@ -119,12 +125,12 @@
.work-image img { .work-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.work-card:hover .work-image img { .work-card:hover .work-image img {
transform: scale(1.06); transform: scale(1.03);
} }
.work-image-overlay { .work-image-overlay {

22
frontend/src/pages/WorkDetail.css
View File

@@ -164,7 +164,14 @@
position: relative; position: relative;
border-radius: 24px; border-radius: 24px;
overflow: hidden; overflow: hidden;
background: linear-gradient(135deg, #f8efe6 0%, #f1e2d4 100%); display: flex;
align-items: center;
justify-content: center;
min-height: 520px;
padding: 24px;
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.7), transparent 40%),
linear-gradient(135deg, #eef7fb 0%, #d9ebf2 100%);
} }
.work-image-shell::after { .work-image-shell::after {
@@ -178,8 +185,9 @@
.work-image { .work-image {
width: 100%; width: 100%;
max-height: min(72vh, 880px);
display: block; display: block;
object-fit: cover; object-fit: contain;
} }
.preview-benefits { .preview-benefits {
@@ -280,15 +288,15 @@
width: 100%; width: 100%;
padding-top: 150%; padding-top: 150%;
overflow: hidden; overflow: hidden;
background: #f2e8de; background: linear-gradient(135deg, #edf6fb 0%, #dcecf4 100%);
} }
.related-work-image img { .related-work-image img {
position: absolute; position: absolute;
inset: 0; inset: 12px;
width: 100%; width: calc(100% - 24px);
height: 100%; height: calc(100% - 24px);
object-fit: cover; object-fit: contain;
} }
.related-work-overlay { .related-work-overlay {