root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(admin-web): apply blurred-backdrop cover treatment to KOL cards

Browse Source 
Switch KOL package, template, and workspace card covers from object-fit
cover to a blurred backdrop with a contained foreground image so non-16:9
artwork no longer crops awkwardly. Also restyle the package detail back
button, swap the generate-button copy for the canonical key, and rename
"prompts" counts to "refined templates" in i18n.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
liangxu
2026-04-25 23:17:04 +08:00
parent cde70ca5e0
commit ae63f60def
6 changed files with 186 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/views/WorkspaceView.vue
+34 -4
View File
@@ -342,7 +342,10 @@ function stopRecentArticlesPolling(): void {
class="kol-card"
@click="openRefinedTemplate(card)"
>
<div class="kol-card-cover" :style="card.package_cover ? { backgroundImage: `url(${card.package_cover})` } : {}">
<div
class="kol-card-cover"
:style="card.package_cover ? { '--cover-image': `url(${card.package_cover})` } : {}"
>
<div v-if="!card.package_cover" class="kol-card-cover-fallback">
<AppstoreOutlined class="fallback-icon" />
</div>
@@ -728,15 +731,41 @@ function stopRecentArticlesPolling(): void {
.kol-card-cover {
height: 120px;
background-size: cover;
background-position: center;
background-color: #f8fafc;
background-color: #f3f6fa;
position: relative;
border-bottom: 1px solid #f1f5f9;
overflow: hidden;
isolation: isolate;
}
.kol-card-cover::before {
content: "";
position: absolute;
inset: -16px;
z-index: 0;
background-image: var(--cover-image);
background-position: center;
background-size: cover;
filter: blur(16px);
opacity: 0.55;
transform: scale(1.08);
}
.kol-card-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-image: var(--cover-image);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.kol-card-cover-fallback {
position: relative;
z-index: 2;
height: 100%;
width: 100%;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
@@ -753,6 +782,7 @@ function stopRecentArticlesPolling(): void {
.kol-card-hover-overlay {
position: absolute;
inset: 0;
z-index: 3;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;