From 46dad0fd3fdc4ac684c0235c59c31e4e14c25f00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Mon, 3 Aug 2026 17:05:00 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E4=BF=AE=E5=A4=8D=E6=B5=B7=E6=8A=A5?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-tailwindcss/src/views/hb/index.vue       |  2 +-
 .../src/views/hb/templates/SplitPoster.vue    | 89 +++++++++++++------
 2 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/vite-tailwindcss/src/views/hb/index.vue b/vite-tailwindcss/src/views/hb/index.vue
index 05de68e..5f482bf 100644
--- a/vite-tailwindcss/src/views/hb/index.vue
+++ b/vite-tailwindcss/src/views/hb/index.vue
@@ -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)
diff --git a/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue b/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
index 42c8305..0cb3152 100644
--- a/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
+++ b/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
@@ -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%; }
 }