海报暂未开放
@@ -85,10 +102,13 @@ @@ -175,6 +283,54 @@ onUnmounted(() => { overflow-x: hidden; font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif; } +.hb-main { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + max-width: 960px; +} +.hb-poster-wrap { + display: flex; + justify-content: center; + min-width: 0; + width: 100%; +} +.hb-pc-tools { + position: fixed; + right: 20px; + bottom: 20px; + z-index: 25; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 10px; + pointer-events: none; +} +.hb-pc-tools > * { pointer-events: auto; } +.hb-save-btn { + appearance: none; + border: 1.5px solid #d4af37; + background: linear-gradient(180deg, rgba(212, 175, 55, 0.45), rgba(155, 0, 0, 0.72)); + color: #f0d78c; + padding: 10px 16px; + border-radius: 999px; + letter-spacing: 0.2em; + font-size: 13px; + cursor: pointer; + box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + backdrop-filter: blur(6px); +} +.hb-save-btn:disabled { opacity: 0.65; cursor: wait; } +.hb-save-btn:not(:disabled):hover { + filter: brightness(1.08); +} .hb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .hb-bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hb-bg-xi { @@ -262,3 +418,85 @@ onUnmounted(() => { @keyframes hb-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes hb-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.25); } } + + + diff --git a/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue b/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue index 568797b..dbaedf4 100644 --- a/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue +++ b/vite-tailwindcss/src/views/hb/templates/ClassicPoster.vue @@ -1,6 +1,9 @@ -
-
+
+
@@ -116,7 +119,11 @@
/>
-
+
@@ -193,6 +200,12 @@ watch(
opacity: 1;
transform: translateY(0) scale(1);
}
+@media (max-width: 719px) {
+ .hb-m-portrait { width: min(420px, 100%); }
+ .hb-m-landscape { width: min(100%, 640px); }
+ .hb-m-landscape .hb-inner { min-height: min(520px, 78dvh); }
+ .hb-m-landscape .hb-title { font-size: clamp(24px, 7vw, 34px); }
+}
.hb-frame {
position: relative;
border: 1.5px solid var(--hb-gold);
diff --git a/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue b/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
index e5b954c..fa96d0c 100644
--- a/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
+++ b/vite-tailwindcss/src/views/hb/templates/SplitPoster.vue
@@ -1,6 +1,12 @@
-
-
+
+
![]()
@@ -91,7 +97,11 @@
♥
-
+
@@ -174,6 +184,7 @@ watch(
.sp.is-visible { opacity: 1; transform: none; }
.sp-card {
+ position: relative;
display: flex;
flex-direction: column;
border: 1.5px solid var(--hb-gold);
@@ -184,6 +195,30 @@ watch(
background: #8b0000;
}
+/* 手机端：自动 = 上下；竖向强制上下；横屏强制左右 */
+@media (max-width: 719px) {
+ .sp-m-auto .sp-card,
+ .sp-m-portrait .sp-card {
+ flex-direction: column;
+ }
+ .sp-m-auto .sp-left,
+ .sp-m-portrait .sp-left {
+ width: 100%;
+ }
+ .sp-m-landscape .sp-card {
+ flex-direction: row;
+ min-height: min(420px, 70dvh);
+ }
+ .sp-m-landscape .sp-left { width: 44%; min-height: 0; }
+ .sp-m-landscape .sp-right { width: 56%; padding: 12px 10px; }
+ .sp-m-landscape .sp-slogan { font-size: clamp(22px, 6vw, 32px); }
+ .sp-m-landscape .sp-xi-top { font-size: 32px; }
+ .sp-m-landscape .sp-name { font-size: 14px; }
+ .sp-m-landscape .sp-line { font-size: 11px; }
+ .sp-m-landscape .sp-greeting { font-size: 12px; }
+ .sp-m-landscape .sp-photo { min-height: 100%; }
+}
+
@media (min-width: 720px) {
.sp-card { flex-direction: row; min-height: min(560px, calc(100dvh - 40px)); }
.sp-left { width: 46%; }