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

fix: maximize artwork previews with watermark

Browse Source
This commit is contained in:
jimi
2026-03-09 16:41:34 +08:00
parent cce27b7281
commit 770c303a00
3 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,10 +107,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 16px; padding: 8px;
background: background: #ffffff;
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 {
@@ -123,8 +121,10 @@
} }
.work-image img { .work-image img {
width: 100%; max-width: 100%;
height: 100%; max-height: 100%;
width: auto;
height: auto;
object-fit: contain; object-fit: contain;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }

8
frontend/src/components/Works.jsx
View File

@@ -103,7 +103,13 @@ const Works = ({ title, type, categoryFilter, sectionId }) => {
cover={ cover={
<div className="work-image"> <div className="work-image">
<img <img
src={work.thumbnail_image ? `${API_CONFIG.baseURL}${work.thumbnail_image}` : getImageUrl(work.id)} src={
work.watermarked_image
? `${API_CONFIG.baseURL}${work.watermarked_image}`
: work.thumbnail_image
? `${API_CONFIG.baseURL}${work.thumbnail_image}`
: getImageUrl(work.id)
}
alt={work.title} alt={work.title}
loading="lazy" loading="lazy"
onError={(e) => { onError={(e) => {

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

@@ -167,25 +167,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 520px; padding: 0;
padding: 24px; background: #ffffff;
background: border: 1px solid rgba(232, 223, 214, 0.95);
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 {
content: ''; display: none;
position: absolute;
inset: auto 0 0;
height: 26%;
background: linear-gradient(180deg, transparent, rgba(28, 22, 18, 0.12));
pointer-events: none;
} }
.work-image { .work-image {
width: 100%; width: 100%;
max-height: min(72vh, 880px); height: auto;
display: block; display: block;
object-fit: contain; object-fit: contain;
} }