lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 修复海报图片

Browse Source
This commit is contained in:
李琦
2026-08-03 17:05:00 +08:00
parent 66a84ced72
commit 46dad0fd3f
2 changed files with 64 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vite-tailwindcss/src/views/hb/index.vue
View File

@@ -353,7 +353,7 @@ async function bakeObjectFitImages(root) {
}
async function mountCaptureQr(host) {
const isSplit = host.classList.contains('sp-card')
const isSplit = host.classList.contains('sp-shell') || !!host.querySelector?.('.sp-card')
const target = isSplit
? (host.querySelector('.sp-left') || host)
: (host.querySelector('.hb-inner') || host)

89
vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
View File

@@ -6,21 +6,44 @@
`sp-m-${cfg.mobileLayout || 'auto'}`,
]"
>
<div class="sp-card" data-poster-capture>
<div class="sp-frame-ornament sp-frame-ornament-tl" aria-hidden="true">
<svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
</div>
<div class="sp-frame-ornament sp-frame-ornament-tr" aria-hidden="true">
<svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
</div>
<div class="sp-frame-ornament sp-frame-ornament-bl" aria-hidden="true">
<svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
</div>
<div class="sp-frame-ornament sp-frame-ornament-br" aria-hidden="true">
<svg viewBox="0 0 48 48"><use href="#hb-icon-corner" /></svg>
</div>
<div class="sp-card-rim" aria-hidden="true"></div>
<section class="sp-left">
<div class="sp-shell" data-poster-capture>
<div class="sp-shell-outer">
<div class="sp-shell-gap">
<div class="sp-card">
<div class="sp-frame-ornament sp-frame-ornament-tl" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none">
<path d="M4 44V18c0-8 6-14 14-14h26" stroke="currentColor" stroke-width="2"/>
<path d="M10 44V24c0-6 4-10 10-10h24" stroke="currentColor" stroke-width="1.2" opacity="0.55"/>
<circle cx="18" cy="18" r="3" fill="currentColor"/>
<path d="M18 8c6 2 10 6 12 12" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
</svg>
</div>
<div class="sp-frame-ornament sp-frame-ornament-tr" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none">
<path d="M4 44V18c0-8 6-14 14-14h26" stroke="currentColor" stroke-width="2"/>
<path d="M10 44V24c0-6 4-10 10-10h24" stroke="currentColor" stroke-width="1.2" opacity="0.55"/>
<circle cx="18" cy="18" r="3" fill="currentColor"/>
<path d="M18 8c6 2 10 6 12 12" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
</svg>
</div>
<div class="sp-frame-ornament sp-frame-ornament-bl" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none">
<path d="M4 44V18c0-8 6-14 14-14h26" stroke="currentColor" stroke-width="2"/>
<path d="M10 44V24c0-6 4-10 10-10h24" stroke="currentColor" stroke-width="1.2" opacity="0.55"/>
<circle cx="18" cy="18" r="3" fill="currentColor"/>
<path d="M18 8c6 2 10 6 12 12" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
</svg>
</div>
<div class="sp-frame-ornament sp-frame-ornament-br" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none">
<path d="M4 44V18c0-8 6-14 14-14h26" stroke="currentColor" stroke-width="2"/>
<path d="M10 44V24c0-6 4-10 10-10h24" stroke="currentColor" stroke-width="1.2" opacity="0.55"/>
<circle cx="18" cy="18" r="3" fill="currentColor"/>
<path d="M18 8c6 2 10 6 12 12" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
</svg>
</div>
<div class="sp-card-rim" aria-hidden="true"></div>
<section class="sp-left">
<div class="sp-photo" :class="{ 'is-show': stage >= 1 }">
<img
v-if="cfg.heroImg"
@@ -126,6 +149,9 @@
</button>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -239,35 +265,45 @@ onBeforeUnmount(() => {
}
.sp.is-visible { opacity: 1; transform: none; }
.sp-shell {
position: relative;
width: 100%;
}
.sp-shell-outer {
padding: 1px;
border-radius: 14px;
background: linear-gradient(145deg, #f0d78c, #d4af37 45%, #a8892e);
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.4);
}
.sp-shell-gap {
padding: 4px;
border-radius: 13px;
background: #7a0000;
border: 1px solid rgba(240, 215, 140, 0.28);
}
.sp-card {
position: relative;
display: flex;
flex-direction: column;
border: 2px solid #d4af37;
border-radius: 12px;
border-radius: 10px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(240, 215, 140, 0.35),
0 0 0 5px rgba(122, 0, 0, 0.55),
0 0 0 6px rgba(212, 175, 55, 0.55),
0 16px 42px rgba(0, 0, 0, 0.4);
min-height: min(720px, calc(100dvh - 32px));
min-height: min(720px, calc(100dvh - 48px));
background: #8b0000;
}
.sp-card-rim {
position: absolute;
inset: 5px;
border: 1px solid rgba(240, 215, 140, 0.45);
border-radius: 8px;
border-radius: 7px;
pointer-events: none;
z-index: 6;
box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.18);
}
.sp-frame-ornament {
position: absolute;
width: 28px;
height: 28px;
color: rgba(240, 215, 140, 0.9);
color: rgba(240, 215, 140, 0.95);
z-index: 7;
pointer-events: none;
}
@@ -297,10 +333,11 @@ onBeforeUnmount(() => {
.sp-m-landscape .sp-photo { min-height: 100%; }
.sp-frame-ornament { width: 22px; height: 22px; }
.sp-card-rim { inset: 4px; }
.sp-shell-gap { padding: 3px; }
}
@media (min-width: 720px) {
.sp-card { flex-direction: row; min-height: min(560px, calc(100dvh - 40px)); }
.sp-card { flex-direction: row; min-height: min(560px, calc(100dvh - 56px)); }
.sp-left { width: 54%; }
.sp-right { width: 46%; }
}