diff --git a/backend/internal/handler/templates/public_product.html b/backend/internal/handler/templates/public_product.html index 80ff9c5..54ff7f0 100644 --- a/backend/internal/handler/templates/public_product.html +++ b/backend/internal/handler/templates/public_product.html @@ -36,7 +36,9 @@ --glow1:rgba(124,31,44,.05); --glow2:rgba(181,134,47,.04); --seal-bg:rgba(255,253,248,.78); } *{box-sizing:border-box;margin:0;padding:0;} + html{background:var(--bg);height:100%;} body{ + min-height:100%; background-color:var(--bg); background-image: radial-gradient(circle at 12% 0%, var(--glow1), transparent 38%), @@ -44,9 +46,11 @@ color:var(--text); font:var(--fs-title)/1.75 var(--font); -webkit-font-smoothing:antialiased; + -webkit-tap-highlight-color:transparent; transition:background-color .25s,color .25s; } - .page{max-width:560px;margin:0 auto;padding:0 16px 40px;} + /* 自适应满屏：页眉贴顶、页脚贴底、中间信息弹性填充；内容超屏时自然滚动 */ + .page{max-width:560px;margin:0 auto;padding:0 16px 24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;} a{color:var(--primary);text-decoration:none;} /* 顶部题签 */ @@ -56,11 +60,29 @@ border-bottom:1px solid var(--border);position:relative; } .mast a{color:var(--primary-dark);font-weight:700;letter-spacing:.3em;} + /* 主题选择器：与 App ThemePickerPill 同构（衬衫图标 + 主题名 + ▾ + 下拉单选） */ .thm{ - position:absolute;right:0;top:50%;transform:translateY(-58%);width:30px;height:30px; + position:absolute;right:0;top:50%;transform:translateY(-58%); + display:flex;align-items:center;gap:6px;height:30px;padding:0 11px; border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface); - color:var(--muted);font-size:14px;line-height:1;cursor:pointer; + color:var(--text);font-size:var(--fs-sm);font-family:var(--font);cursor:pointer;letter-spacing:0; } + .thm svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} + .thm svg.cv{width:13px;height:13px;} + .thm-menu{ + position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:136px;padding:4px; + background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md); + box-shadow:0 4px 14px var(--shadow); + } + .thm-menu[hidden]{display:none;} + .thm-menu button{ + display:flex;align-items:center;gap:4px;width:100%;height:36px;padding:0 10px; + border:none;background:none;color:var(--text);font-size:var(--fs-body); + font-family:var(--font);cursor:pointer;border-radius:4px;text-align:left; + } + .thm-menu button:hover{background:var(--brand50);} + .thm-menu button.on{color:var(--primary);font-weight:600;} + .thm-menu .ck{width:16px;color:var(--primary);font-weight:700;flex:none;} /* 图片区（永远存在）+ 右上「正品」章（--accent 酒红） */ .hero{margin:18px 0 0;position:relative;animation:rise .5s ease both;} @@ -123,8 +145,8 @@ .desc{padding:13px 2px;font-size:14px;color:var(--text);white-space:pre-wrap;text-align:justify;} .more{display:block;text-align:center;padding:12px 0 10px;font-size:13.5px;font-weight:600;border-top:1px solid var(--border-subtle);} - /* 页脚 */ - .foot{margin-top:30px;text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:2;animation:rise .5s ease .18s both;} + /* 页脚：flex 撑到视口底部 */ + .foot{margin-top:auto;padding-top:30px;text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:2;animation:rise .5s ease .18s both;} .foot-rule{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:var(--border);} .foot-rule::before,.foot-rule::after{content:"";height:1px;background:var(--border);flex:1;} .foot a{color:var(--muted);} @@ -149,7 +171,18 @@
-
岩美酒库
+
岩美酒库 + + +
{{if .Found}}
@@ -234,14 +267,27 @@
{{if .Images}} diff --git a/backend/internal/handler/templates/public_shop.html b/backend/internal/handler/templates/public_shop.html index 853eb1f..b9718ec 100644 --- a/backend/internal/handler/templates/public_shop.html +++ b/backend/internal/handler/templates/public_shop.html @@ -34,7 +34,9 @@ --glow1:rgba(124,31,44,.05); --glow2:rgba(181,134,47,.04); } *{box-sizing:border-box;margin:0;padding:0;} + html{background:var(--bg);height:100%;} body{ + min-height:100%; background-color:var(--bg); background-image: radial-gradient(circle at 12% 0%, var(--glow1), transparent 38%), @@ -42,9 +44,11 @@ color:var(--text); font:var(--fs-title)/1.7 var(--font); -webkit-font-smoothing:antialiased; + -webkit-tap-highlight-color:transparent; transition:background-color .25s,color .25s; } - .page{max-width:560px;margin:0 auto;padding:0 16px 40px;} + /* 自适应满屏：页眉贴顶、页脚贴底、中间信息弹性填充；内容超屏时自然滚动 */ + .page{max-width:560px;margin:0 auto;padding:0 16px 24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;} a{color:var(--primary);text-decoration:none;} .mast{ @@ -53,11 +57,29 @@ border-bottom:1px solid var(--border);position:relative; } .mast a{color:var(--primary-dark);font-weight:700;letter-spacing:.3em;} + /* 主题选择器：与 App ThemePickerPill 同构（衬衫图标 + 主题名 + ▾ + 下拉单选） */ .thm{ - position:absolute;right:0;top:50%;transform:translateY(-58%);width:30px;height:30px; + position:absolute;right:0;top:50%;transform:translateY(-58%); + display:flex;align-items:center;gap:6px;height:30px;padding:0 11px; border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface); - color:var(--muted);font-size:14px;line-height:1;cursor:pointer; + color:var(--text);font-size:var(--fs-sm);font-family:var(--font);cursor:pointer;letter-spacing:0; } + .thm svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} + .thm svg.cv{width:13px;height:13px;} + .thm-menu{ + position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:136px;padding:4px; + background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md); + box-shadow:0 4px 14px var(--shadow); + } + .thm-menu[hidden]{display:none;} + .thm-menu button{ + display:flex;align-items:center;gap:4px;width:100%;height:36px;padding:0 10px; + border:none;background:none;color:var(--text);font-size:var(--fs-body); + font-family:var(--font);cursor:pointer;border-radius:4px;text-align:left;letter-spacing:0;text-indent:0; + } + .thm-menu button:hover{background:var(--brand50);} + .thm-menu button.on{color:var(--primary);font-weight:600;} + .thm-menu .ck{width:16px;color:var(--primary);font-weight:700;flex:none;} /* 店铺题名 */ .shop{text-align:center;padding:24px 0 4px;animation:rise .5s ease both;} @@ -110,7 +132,7 @@ .empty h2{font-size:17px;margin-bottom:8px;color:var(--heading);} .empty p{color:var(--muted);font-size:var(--fs-body);} - .foot{margin-top:30px;text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:2;} + .foot{margin-top:auto;padding-top:30px;text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:2;} .foot-rule{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:var(--border);} .foot-rule::before,.foot-rule::after{content:"";height:1px;background:var(--border);flex:1;} .foot a{color:var(--muted);} @@ -131,7 +153,18 @@
-
岩美酒库
+
岩美酒库 + + +
{{if .Found}}
{{if .LogoURL}}{{.ShopName}}{{end}} @@ -184,14 +217,27 @@