Compare commits
8 Commits
dbea2dc11a
...
7b14eb426b
| Author | SHA1 | Date | |
|---|---|---|---|
 wangjia
|
7b14eb426b | ||
|
wangjia
|
0de9ba7c21 | ||
|
wangjia
|
47d6490bf2 | ||
|
wangjia
|
8000f00e9e | ||
|
wangjia
|
d8f7fd903e | ||
|
wangjia
|
db9afb952c | ||
|
wangjia
|
f3efda3691 | ||
|
wangjia
|
d19e88e3f4 |
@@ -5,6 +5,17 @@
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [1.1.9] - 2026-07-07
|
||||
|
||||
### 改进
|
||||
- 商品/店铺公开页全新视觉：配色与 App 设计系统同源，支持三主题
|
||||
（经典蓝 / 琥珀深色 / 酒窖暖色），右上角衬衫图标下拉切换并记忆选择，
|
||||
首次打开自动跟随手机深浅色模式。
|
||||
- 商品图集升级：多图滑动带指示点，点击图片全屏查看、全屏内可滑动切换；
|
||||
无图商品保留图片占位区不再空缺。
|
||||
- 页面自适应满屏：页脚固定在屏幕底部，底部不再出现大片空白。
|
||||
- 页脚展示「技术支持：岩美科技」与 ICP 备案号，移除「在 App 中查看」入口。
|
||||
|
||||
## [1.1.8] - 2026-07-07
|
||||
|
||||
### 新功能
|
||||
|
||||
@@ -192,7 +192,6 @@ type productPageVM struct {
|
||||
ShopAddr string
|
||||
ShopHours string
|
||||
ShopWx string
|
||||
AppURL string
|
||||
}
|
||||
|
||||
// ProductPage GET /product/:public_id
|
||||
@@ -235,7 +234,6 @@ func (h *PublicHandler) ProductPage(c *gin.Context) {
|
||||
Origin: d.Origin,
|
||||
ShelfLife: d.ShelfLife,
|
||||
Storage: d.Storage,
|
||||
AppURL: "/app/product/" + p.PublicID,
|
||||
}
|
||||
for _, img := range p.Images {
|
||||
if img.URL != "" {
|
||||
|
||||
@@ -57,9 +57,9 @@ func TestProductPage_SSR(t *testing.T) {
|
||||
// OG 标签（og:url 指向 SSR 短链）
|
||||
assert.Contains(t, body, `property="og:title"`)
|
||||
assert.Contains(t, body, "/product/pub-ssr-001")
|
||||
// 门店互跳 + App 兜底链接
|
||||
// 门店互跳；「在 App 中查看」已移除（2026-07-07 用户拍板）
|
||||
assert.Contains(t, body, "/shop/"+shop.Code)
|
||||
assert.Contains(t, body, "/app/product/pub-ssr-001")
|
||||
assert.NotContains(t, body, "/app/product/")
|
||||
// 敏感字段零暴露（成本/进价永不出现在公开页）
|
||||
for _, s := range []string{"cost", "purchase_price", "profit"} {
|
||||
assert.NotContains(t, body, s, "公开页不得出现敏感字段名 %s", s)
|
||||
|
||||
@@ -5,97 +5,320 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.PageTitle}}</title>{{.OGTags}}
|
||||
<style>
|
||||
:root{--primary:#2563AC;--primary-dark:#154072;--ink:#232934;--muted:#6E7888;
|
||||
--border:#DCE2EB;--paper:#F5F7FA;--head:#F0F4FF;--ok:#2E8B57;--ok-bg:#E6F3EC;}
|
||||
*{box-sizing:border-box;margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
|
||||
body{background:var(--paper);color:var(--ink);line-height:1.65;font-size:15px;}
|
||||
.wrap{max-width:640px;margin:0 auto;padding:14px 14px 40px;}
|
||||
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;}
|
||||
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;border-radius:12px;margin-bottom:12px;}
|
||||
.gallery img{width:100%;max-width:640px;flex:0 0 100%;scroll-snap-align:center;border-radius:12px;object-fit:cover;background:#fff;border:1px solid var(--border);}
|
||||
h1{font-size:20px;line-height:1.4;margin-bottom:6px;}
|
||||
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px;}
|
||||
.chip{font-size:12px;padding:2px 10px;border-radius:10px;background:var(--head);color:var(--primary-dark);}
|
||||
.price{font-size:22px;font-weight:700;color:var(--primary);margin-top:6px;}
|
||||
.price small{font-size:12px;font-weight:400;color:var(--muted);}
|
||||
.row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #EEF1F5;font-size:14px;}
|
||||
.row:last-child{border-bottom:none;}
|
||||
.row span{color:var(--muted);flex:none;}
|
||||
.row b{font-weight:600;text-align:right;word-break:break-all;}
|
||||
.sec-t{font-size:13px;font-weight:600;color:var(--primary-dark);margin-bottom:8px;}
|
||||
.desc{font-size:14px;color:var(--ink);white-space:pre-wrap;}
|
||||
.verify{display:flex;align-items:center;gap:8px;background:var(--ok-bg);color:var(--ok);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:12px;}
|
||||
/* 设计系统单一真源：变量名与三主题（a 经典蓝浅 / b 琥珀深 / c 酒窖暖浅）色值
|
||||
逐字取自 .superpowers/prototype/tokens.css。SSR 页自包含无法直接引 tokens.css，
|
||||
改配色须先改原型令牌再同步此处。--glow/--seal-bg 为本页派生变量（主色低透明度/表面高透明度）。 */
|
||||
:root{
|
||||
--r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
|
||||
--fs-display:28px; --fs-h1:21px; --fs-title:15px; --fs-body:13px; --fs-sm:12px; --fs-xs:11px;
|
||||
--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Inter",sans-serif;
|
||||
--font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
|
||||
--scrim:rgba(15,20,30,.42);
|
||||
/* 主题 A（默认） */
|
||||
--bg:#F5F7FA; --surface:#FFFFFF; --border:#DCE2EB; --border-subtle:#ECEFF4;
|
||||
--text:#232934; --heading:#1B2430; --muted:#6E7888; --faint:#99A3B3;
|
||||
--primary:#2563AC; --primary-dark:#154072; --on-primary:#FFFFFF; --brand50:#EEF4FB; --accent:#8B2331;
|
||||
--shadow:rgba(20,40,70,.20); --sh-1:0 1px 3px var(--shadow);
|
||||
--glow1:rgba(37,99,172,.05); --glow2:rgba(21,64,114,.04); --seal-bg:rgba(255,255,255,.78);
|
||||
}
|
||||
:root[data-theme="b"]{
|
||||
--bg:#15151C; --surface:#1E1E27; --border:#2B2B37; --border-subtle:#26262F;
|
||||
--text:#E8E8EE; --heading:#F6F6F9; --muted:#9A9AA8; --faint:#6E6E7E;
|
||||
--primary:#F5A300; --primary-dark:#D98C00; --on-primary:#1A1408; --brand50:#2A2212; --accent:#F87171;
|
||||
--shadow:rgba(0,0,0,.55);
|
||||
--glow1:rgba(245,163,0,.04); --glow2:rgba(248,113,113,.03); --seal-bg:rgba(30,30,39,.78);
|
||||
}
|
||||
:root[data-theme="c"]{
|
||||
--bg:#FAF5EC; --surface:#FFFDF8; --border:#EADDC9; --border-subtle:#F1E8D8;
|
||||
--text:#33271F; --heading:#241A14; --muted:#917A64; --faint:#B9A488;
|
||||
--primary:#7C1F2C; --primary-dark:#5F1621; --on-primary:#F7E9D6; --brand50:#F3E7D2; --accent:#A23522;
|
||||
--shadow:rgba(74,20,32,.22);
|
||||
--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%),
|
||||
radial-gradient(circle at 100% 100%, var(--glow2), transparent 38%);
|
||||
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 24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
|
||||
a{color:var(--primary);text-decoration:none;}
|
||||
.shop-name{font-size:16px;font-weight:700;}
|
||||
.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:18px;}
|
||||
.foot a{color:var(--muted);text-decoration:underline;}
|
||||
.empty{text-align:center;padding:60px 20px;color:var(--muted);}
|
||||
.empty h1{font-size:18px;color:var(--ink);margin-bottom:8px;}
|
||||
|
||||
/* 顶部题签 */
|
||||
.mast{
|
||||
display:flex;align-items:center;justify-content:center;gap:10px;
|
||||
padding:18px 0 12px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:.3em;
|
||||
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%);
|
||||
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(--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;}
|
||||
.frame{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1);}
|
||||
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
|
||||
.gallery::-webkit-scrollbar{display:none;}
|
||||
.gallery img{width:100%;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;object-fit:contain;background:var(--surface);display:block;cursor:zoom-in;}
|
||||
.placeholder{
|
||||
aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
gap:10px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:.2em;background:var(--brand50);
|
||||
}
|
||||
.placeholder svg{width:44px;height:66px;stroke:var(--primary);opacity:.4;}
|
||||
.seal{
|
||||
position:absolute;top:12px;right:12px;z-index:3;width:56px;height:56px;border-radius:var(--r-pill);
|
||||
border:2px solid var(--accent);color:var(--accent);background:var(--seal-bg);
|
||||
display:flex;align-items:center;justify-content:center;transform:rotate(8deg);
|
||||
font-size:14px;font-weight:700;letter-spacing:.16em;text-indent:.16em;
|
||||
box-shadow:inset 0 0 0 2px var(--seal-bg);
|
||||
}
|
||||
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:3;}
|
||||
.dots i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--border);transition:all .25s;}
|
||||
.dots i.on{background:var(--primary);width:16px;border-radius:3px;}
|
||||
|
||||
/* 全屏灯箱（深底 = --toast-bg 提浓） */
|
||||
.lb{position:fixed;inset:0;z-index:99;background:rgba(31,35,48,.96);}
|
||||
.lb[hidden]{display:none;}
|
||||
.lb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:100%;scrollbar-width:none;}
|
||||
.lb-track::-webkit-scrollbar{display:none;}
|
||||
.lb-track img{width:100vw;height:100%;flex:0 0 100vw;scroll-snap-align:center;object-fit:contain;}
|
||||
.lb-x{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:var(--r-pill);
|
||||
border:1px solid rgba(255,255,255,.35);background:var(--scrim);color:#fff;font-size:16px;cursor:pointer;}
|
||||
.lb-n{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);
|
||||
font-size:var(--fs-sm);letter-spacing:.2em;font-family:var(--font-mono);}
|
||||
|
||||
/* 题名 */
|
||||
.head{text-align:center;padding:20px 6px 2px;animation:rise .5s ease .06s both;}
|
||||
h1{font-size:var(--fs-h1);line-height:1.45;font-weight:700;color:var(--heading);}
|
||||
.sub{color:var(--muted);font-size:var(--fs-body);letter-spacing:.12em;margin-top:5px;}
|
||||
.price{margin-top:10px;color:var(--accent);font-size:var(--fs-display);font-weight:700;}
|
||||
.price small{font-size:var(--fs-sm);color:var(--muted);font-weight:400;letter-spacing:.08em;}
|
||||
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;}
|
||||
.chip{font-size:var(--fs-sm);color:var(--primary);border-radius:var(--r-pill);padding:2px 11px;background:var(--brand50);}
|
||||
|
||||
/* 分节 */
|
||||
.sec{margin-top:22px;animation:rise .5s ease .12s both;}
|
||||
.sec-t{
|
||||
display:flex;align-items:center;gap:12px;color:var(--primary-dark);font-size:var(--fs-body);
|
||||
letter-spacing:.3em;text-indent:.3em;font-weight:700;justify-content:center;margin-bottom:10px;
|
||||
}
|
||||
.sec-t::before,.sec-t::after{content:"";height:1px;background:var(--border);flex:1;max-width:56px;}
|
||||
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:4px 16px;box-shadow:var(--sh-1);}
|
||||
|
||||
/* 信息行：label / value 两端对齐（App 列表行式） */
|
||||
.row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;font-size:14px;}
|
||||
.row+.row{border-top:1px solid var(--border-subtle);}
|
||||
.row span{color:var(--muted);flex:none;}
|
||||
.row b{font-weight:600;text-align:right;word-break:break-all;color:var(--text);}
|
||||
.row b.mono,.mono{font-family:var(--font-mono);font-size:var(--fs-body);}
|
||||
|
||||
.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);}
|
||||
|
||||
/* 页脚：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);}
|
||||
.foot .brand{color:var(--primary);font-weight:600;}
|
||||
.foot .icp{font-size:var(--fs-xs);opacity:.9;}
|
||||
|
||||
.empty{text-align:center;padding:80px 20px 60px;animation:rise .5s ease both;}
|
||||
.empty h1{font-size:19px;margin-bottom:10px;}
|
||||
.empty p{color:var(--muted);font-size:var(--fs-body);}
|
||||
|
||||
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
|
||||
@media (prefers-reduced-motion:reduce){*{animation:none!important;}}
|
||||
</style>
|
||||
<script>
|
||||
/* 首屏前定主题防闪烁：记忆值 > 系统深色(→b) > a */
|
||||
(function(){try{
|
||||
var t=localStorage.getItem('jiu-pub-theme');
|
||||
if(!t&&window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)t='b';
|
||||
if(t==='b'||t==='c')document.documentElement.setAttribute('data-theme',t);
|
||||
}catch(e){}})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="page">
|
||||
<header class="mast"><a href="https://jiu.51yanmei.com">岩美酒库</a>
|
||||
<button class="thm" id="thm" aria-label="切换主题">
|
||||
<svg viewBox="0 0 24 24"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
|
||||
<span id="thmName">经典蓝</span>
|
||||
<svg class="cv" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
||||
</button>
|
||||
<div class="thm-menu" id="thmMenu" hidden>
|
||||
<button data-t="a"><span class="ck"></span>A · 经典蓝</button>
|
||||
<button data-t="b"><span class="ck"></span>B · 琥珀</button>
|
||||
<button data-t="c"><span class="ck"></span>C · 酒窖</button>
|
||||
</div>
|
||||
</header>
|
||||
{{if .Found}}
|
||||
{{if .Images}}
|
||||
<div class="gallery">
|
||||
{{range $i, $img := .Images}}
|
||||
<img src="{{$img}}" alt="{{$.Name}}" decoding="async"{{if $i}} loading="lazy"{{end}}>
|
||||
{{end}}
|
||||
<div class="hero">
|
||||
<div class="frame">
|
||||
{{if .Images}}
|
||||
<div class="gallery" id="gal">
|
||||
{{range $i, $img := .Images}}<img src="{{$img}}" alt="{{$.Name}}" decoding="async"{{if $i}} loading="lazy"{{end}}>{{end}}
|
||||
</div>
|
||||
{{if gt (len .Images) 1}}<div class="dots">{{range .Images}}<i></i>{{end}}</div>{{end}}
|
||||
{{else}}
|
||||
<div class="placeholder">
|
||||
<svg viewBox="0 0 40 64" fill="none" stroke-width="1.4" stroke-linecap="round">
|
||||
<path d="M16 2h8M17 2v14c0 3 6 3 6 0V2M17 12c-6 5-9 9-9 16v28a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V28c0-7-3-11-9-16"/>
|
||||
<path d="M8 38h24" stroke-dasharray="2 3"/>
|
||||
</svg>
|
||||
<span>实物图整理中</span>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="seal">正品</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="card">
|
||||
<div class="head">
|
||||
<h1>{{.Name}}</h1>
|
||||
{{if .Keywords}}<div class="chips">{{range .Keywords}}<span class="chip">{{.}}</span>{{end}}</div>{{end}}
|
||||
{{if or .Series .Spec}}<div class="sub">{{.Series}}{{if and .Series .Spec}} · {{end}}{{.Spec}}</div>{{end}}
|
||||
{{if .Price}}<div class="price">{{.Price}}{{if .Unit}} <small>/ {{.Unit}}</small>{{end}}</div>{{end}}
|
||||
{{if .Keywords}}<div class="chips">{{range .Keywords}}<span class="chip">{{.}}</span>{{end}}</div>{{end}}
|
||||
</div>
|
||||
|
||||
<div class="verify">✓ 正品保障 · 扫码验真 · 官方渠道供应</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="sec">
|
||||
<div class="sec-t">商品信息</div>
|
||||
{{if .Code}}<div class="row"><span>商品编号</span><b>{{.Code}}</b></div>{{end}}
|
||||
{{if .Series}}<div class="row"><span>系列</span><b>{{.Series}}</b></div>{{end}}
|
||||
{{if .Spec}}<div class="row"><span>规格</span><b>{{.Spec}}</b></div>{{end}}
|
||||
{{if .Origin}}<div class="row"><span>产地</span><b>{{.Origin}}</b></div>{{end}}
|
||||
<div class="row"><span>保质期</span><b>{{.ShelfLife}}</b></div>
|
||||
<div class="row"><span>储存方式</span><b>{{.Storage}}</b></div>
|
||||
<div class="card">
|
||||
{{if .Code}}<div class="row"><span>商品编号</span><b class="mono">{{.Code}}</b></div>{{end}}
|
||||
{{if .Series}}<div class="row"><span>系列</span><b>{{.Series}}</b></div>{{end}}
|
||||
{{if .Spec}}<div class="row"><span>规格</span><b>{{.Spec}}</b></div>{{end}}
|
||||
{{if .Origin}}<div class="row"><span>产地</span><b>{{.Origin}}</b></div>{{end}}
|
||||
<div class="row"><span>保质期</span><b>{{.ShelfLife}}</b></div>
|
||||
<div class="row"><span>储存方式</span><b>{{.Storage}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .HasBatch}}
|
||||
<div class="card">
|
||||
<div class="sec">
|
||||
<div class="sec-t">批次信息</div>
|
||||
{{if .ProdDate}}<div class="row"><span>生产日期</span><b>{{.ProdDate}}</b></div>{{end}}
|
||||
{{if .BatchNo}}<div class="row"><span>批次号</span><b>{{.BatchNo}}</b></div>{{end}}
|
||||
{{if .InDate}}<div class="row"><span>入库日期</span><b>{{.InDate}}</b></div>{{end}}
|
||||
<div class="card">
|
||||
{{if .ProdDate}}<div class="row"><span>生产日期</span><b class="mono">{{.ProdDate}}</b></div>{{end}}
|
||||
{{if .BatchNo}}<div class="row"><span>批次号</span><b class="mono">{{.BatchNo}}</b></div>{{end}}
|
||||
{{if .InDate}}<div class="row"><span>入库日期</span><b class="mono">{{.InDate}}</b></div>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if .DescBody}}
|
||||
<div class="card">
|
||||
<div class="sec">
|
||||
<div class="sec-t">{{.DescTitle}}</div>
|
||||
<div class="desc">{{.DescBody}}</div>
|
||||
<div class="card"><div class="desc">{{.DescBody}}</div></div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if .HasShop}}
|
||||
<div class="card">
|
||||
<div class="sec">
|
||||
<div class="sec-t">门店信息</div>
|
||||
<div class="row"><span>门店</span><b>{{if .ShopCode}}<a class="shop-name" href="/shop/{{.ShopCode}}">{{.ShopName}} ›</a>{{else}}{{.ShopName}}{{end}}</b></div>
|
||||
{{if .ShopPhone}}<div class="row"><span>电话</span><b><a href="tel:{{.ShopPhone}}">{{.ShopPhone}}</a></b></div>{{end}}
|
||||
{{if .ShopAddr}}<div class="row"><span>地址</span><b>{{.ShopAddr}}</b></div>{{end}}
|
||||
{{if .ShopHours}}<div class="row"><span>营业时间</span><b>{{.ShopHours}}</b></div>{{end}}
|
||||
{{if .ShopWx}}<div class="row"><span>微信</span><b>{{.ShopWx}}</b></div>{{end}}
|
||||
{{if .ShopCode}}<div class="row"><span></span><b><a href="/shop/{{.ShopCode}}">查看本店更多商品 ›</a></b></div>{{end}}
|
||||
<div class="card">
|
||||
<div class="row"><span>门店</span><b>{{if .ShopCode}}<a href="/shop/{{.ShopCode}}">{{.ShopName}} ›</a>{{else}}{{.ShopName}}{{end}}</b></div>
|
||||
{{if .ShopPhone}}<div class="row"><span>电话</span><b class="mono"><a href="tel:{{.ShopPhone}}">{{.ShopPhone}}</a></b></div>{{end}}
|
||||
{{if .ShopAddr}}<div class="row"><span>地址</span><b>{{.ShopAddr}}</b></div>{{end}}
|
||||
{{if .ShopHours}}<div class="row"><span>营业时间</span><b>{{.ShopHours}}</b></div>{{end}}
|
||||
{{if .ShopWx}}<div class="row"><span>微信</span><b class="mono">{{.ShopWx}}</b></div>{{end}}
|
||||
{{if .ShopCode}}<a class="more" href="/shop/{{.ShopCode}}">查看本店更多商品 ›</a>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<div class="card empty">
|
||||
<div class="empty">
|
||||
<h1>商品不存在或已下架</h1>
|
||||
<p>请确认链接来源，或联系门店核实。</p>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="foot">岩美酒库 · 正品溯源{{if .AppURL}} · <a href="{{.AppURL}}">在 App 中查看</a>{{end}}</div>
|
||||
<footer class="foot">
|
||||
<div class="foot-rule">◆</div>
|
||||
<div>技术支持：<a class="brand" href="https://jiu.51yanmei.com">岩美科技</a> · <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备2026039814号</a></div>
|
||||
</footer>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var NAMES={a:'经典蓝',b:'琥珀',c:'酒窖'},root=document.documentElement,
|
||||
btn=document.getElementById('thm'),menu=document.getElementById('thmMenu'),
|
||||
label=document.getElementById('thmName');
|
||||
if(!btn||!menu)return;
|
||||
var opts=[].slice.call(menu.children);
|
||||
function cur(){return root.getAttribute('data-theme')||'a';}
|
||||
function paint(){
|
||||
label.textContent=NAMES[cur()];
|
||||
opts.forEach(function(b){var on=b.getAttribute('data-t')===cur();
|
||||
b.className=on?'on':'';b.querySelector('.ck').textContent=on?'✓':'';});
|
||||
}
|
||||
btn.addEventListener('click',function(e){e.stopPropagation();menu.hidden=!menu.hidden;});
|
||||
opts.forEach(function(b){b.addEventListener('click',function(e){
|
||||
e.stopPropagation();
|
||||
var t=b.getAttribute('data-t');
|
||||
if(t==='a')root.removeAttribute('data-theme');else root.setAttribute('data-theme',t);
|
||||
try{localStorage.setItem('jiu-pub-theme',t);}catch(err){}
|
||||
paint();menu.hidden=true;
|
||||
});});
|
||||
document.addEventListener('click',function(){menu.hidden=true;});
|
||||
paint();
|
||||
})();
|
||||
</script>
|
||||
{{if .Images}}
|
||||
<div class="lb" id="lb" hidden>
|
||||
<button class="lb-x" id="lbx" aria-label="关闭">✕</button>
|
||||
<div class="lb-track" id="lbt">
|
||||
{{range .Images}}<img src="{{.}}" alt="" loading="lazy">{{end}}
|
||||
</div>
|
||||
<div class="lb-n" id="lbn"></div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var gal=document.getElementById('gal'),lb=document.getElementById('lb'),
|
||||
lbt=document.getElementById('lbt'),lbn=document.getElementById('lbn');
|
||||
if(!gal||!lb)return;
|
||||
var imgs=[].slice.call(gal.children),n=imgs.length,
|
||||
dots=[].slice.call(document.querySelectorAll('.dots i'));
|
||||
function idx(el){return Math.min(n-1,Math.round(el.scrollLeft/el.clientWidth));}
|
||||
function paint(){var i=idx(gal);for(var k=0;k<dots.length;k++)dots[k].className=k===i?'on':'';}
|
||||
if(dots.length){gal.addEventListener('scroll',function(){requestAnimationFrame(paint);},{passive:true});}
|
||||
function num(){lbn.textContent=(idx(lbt)+1)+' / '+n;}
|
||||
imgs.forEach(function(im,i){im.addEventListener('click',function(){
|
||||
lb.hidden=false;document.body.style.overflow='hidden';
|
||||
lbt.scrollLeft=lbt.clientWidth*i;num();
|
||||
});});
|
||||
lbt.addEventListener('scroll',function(){requestAnimationFrame(num);},{passive:true});
|
||||
function close(){lb.hidden=true;document.body.style.overflow='';}
|
||||
document.getElementById('lbx').addEventListener('click',close);
|
||||
lb.addEventListener('click',function(e){if(e.target===lb||e.target===lbt)close();});
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,83 +5,240 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.PageTitle}}</title>{{.OGTags}}
|
||||
<style>
|
||||
:root{--primary:#2563AC;--primary-dark:#154072;--ink:#232934;--muted:#6E7888;
|
||||
--border:#DCE2EB;--paper:#F5F7FA;--head:#F0F4FF;}
|
||||
*{box-sizing:border-box;margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
|
||||
body{background:var(--paper);color:var(--ink);line-height:1.6;font-size:15px;}
|
||||
.wrap{max-width:640px;margin:0 auto;padding:14px 14px 40px;}
|
||||
.head{display:flex;align-items:center;gap:12px;padding:6px 2px 14px;}
|
||||
.head img{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--border);background:#fff;}
|
||||
.head h1{font-size:18px;line-height:1.3;}
|
||||
.head .sub{font-size:12px;color:var(--muted);}
|
||||
form{display:flex;gap:8px;margin-bottom:12px;}
|
||||
input[type=search]{flex:1;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:14px;background:#fff;outline:none;}
|
||||
/* 设计系统单一真源：变量名与三主题（a/b/c）色值逐字取自 .superpowers/prototype/tokens.css。
|
||||
与商品公开页同族；改配色须先改原型令牌再同步此处。--glow 为本页派生变量（主色低透明度）。 */
|
||||
:root{
|
||||
--r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
|
||||
--fs-h1:21px; --fs-title:15px; --fs-body:13px; --fs-sm:12px; --fs-xs:11px;
|
||||
--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Inter",sans-serif;
|
||||
--font-mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
|
||||
/* 主题 A（默认） */
|
||||
--bg:#F5F7FA; --surface:#FFFFFF; --border:#DCE2EB; --border-subtle:#ECEFF4;
|
||||
--text:#232934; --heading:#1B2430; --muted:#6E7888; --faint:#99A3B3;
|
||||
--primary:#2563AC; --primary-dark:#154072; --on-primary:#FFFFFF; --brand50:#EEF4FB; --accent:#8B2331;
|
||||
--shadow:rgba(20,40,70,.20); --sh-1:0 1px 3px var(--shadow);
|
||||
--glow1:rgba(37,99,172,.05); --glow2:rgba(21,64,114,.04);
|
||||
}
|
||||
:root[data-theme="b"]{
|
||||
--bg:#15151C; --surface:#1E1E27; --border:#2B2B37; --border-subtle:#26262F;
|
||||
--text:#E8E8EE; --heading:#F6F6F9; --muted:#9A9AA8; --faint:#6E6E7E;
|
||||
--primary:#F5A300; --primary-dark:#D98C00; --on-primary:#1A1408; --brand50:#2A2212; --accent:#F87171;
|
||||
--shadow:rgba(0,0,0,.55);
|
||||
--glow1:rgba(245,163,0,.04); --glow2:rgba(248,113,113,.03);
|
||||
}
|
||||
:root[data-theme="c"]{
|
||||
--bg:#FAF5EC; --surface:#FFFDF8; --border:#EADDC9; --border-subtle:#F1E8D8;
|
||||
--text:#33271F; --heading:#241A14; --muted:#917A64; --faint:#B9A488;
|
||||
--primary:#7C1F2C; --primary-dark:#5F1621; --on-primary:#F7E9D6; --brand50:#F3E7D2; --accent:#A23522;
|
||||
--shadow:rgba(74,20,32,.22);
|
||||
--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%),
|
||||
radial-gradient(circle at 100% 100%, var(--glow2), transparent 38%);
|
||||
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 24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
|
||||
a{color:var(--primary);text-decoration:none;}
|
||||
|
||||
.mast{
|
||||
display:flex;align-items:center;justify-content:center;gap:10px;
|
||||
padding:18px 0 12px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:.3em;
|
||||
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%);
|
||||
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(--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;}
|
||||
.shop img{width:56px;height:56px;border-radius:var(--r-pill);object-fit:cover;border:1px solid var(--border);background:var(--surface);padding:2px;margin-bottom:10px;}
|
||||
.shop h1{font-size:var(--fs-h1);font-weight:700;color:var(--heading);letter-spacing:.06em;}
|
||||
.shop .sub{color:var(--muted);font-size:var(--fs-sm);letter-spacing:.2em;margin-top:5px;}
|
||||
.shop .sub b{color:var(--primary);font-weight:600;}
|
||||
|
||||
form{display:flex;gap:10px;margin:16px 0 4px;animation:rise .5s ease .06s both;}
|
||||
input[type=search]{
|
||||
flex:1;border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 14px;font-size:14px;
|
||||
background:var(--surface);outline:none;color:var(--text);
|
||||
}
|
||||
input[type=search]::placeholder{color:var(--faint);}
|
||||
input[type=search]:focus{border-color:var(--primary);}
|
||||
button{border:none;background:var(--primary);color:#fff;border-radius:10px;padding:0 18px;font-size:14px;}
|
||||
.item{display:flex;gap:12px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;color:var(--ink);}
|
||||
.item img{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--border);flex:none;background:var(--paper);}
|
||||
.item .ph{width:64px;height:64px;border-radius:8px;border:1px solid var(--border);flex:none;background:var(--head);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;}
|
||||
.item .m{flex:1;min-width:0;}
|
||||
.item .nm{font-weight:600;font-size:15px;line-height:1.4;}
|
||||
.item .sb{font-size:12.5px;color:var(--muted);margin-top:2px;}
|
||||
.item .cd{font-size:12px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;margin-top:2px;}
|
||||
.item .pr{font-size:15px;font-weight:700;color:var(--primary);flex:none;align-self:center;}
|
||||
a{text-decoration:none;color:inherit;}
|
||||
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:14px;}
|
||||
.pager a{color:var(--primary);font-weight:600;padding:8px 4px;}
|
||||
.pager .off{color:var(--border);}
|
||||
.pager .pg{color:var(--muted);font-size:12.5px;}
|
||||
.empty{text-align:center;padding:60px 20px;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:12px;}
|
||||
.empty h2{font-size:16px;color:var(--ink);margin-bottom:6px;}
|
||||
.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:18px;}
|
||||
button{
|
||||
border:none;background:var(--primary);color:var(--on-primary);border-radius:var(--r-lg);
|
||||
padding:0 20px;font-size:14px;letter-spacing:.2em;text-indent:.2em;cursor:pointer;font-family:var(--font);
|
||||
}
|
||||
|
||||
.sec-t{
|
||||
display:flex;align-items:center;gap:12px;color:var(--primary-dark);font-size:var(--fs-body);
|
||||
letter-spacing:.3em;text-indent:.3em;font-weight:700;justify-content:center;margin:18px 0 12px;
|
||||
}
|
||||
.sec-t::before,.sec-t::after{content:"";height:1px;background:var(--border);flex:1;max-width:56px;}
|
||||
|
||||
/* 商品条目 */
|
||||
.list{animation:rise .5s ease .12s both;}
|
||||
.item{
|
||||
display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);
|
||||
border-radius:var(--r-xl);padding:12px 14px;margin-bottom:10px;color:var(--text);position:relative;box-shadow:var(--sh-1);
|
||||
}
|
||||
.item::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-58%);color:var(--faint);font-size:16px;}
|
||||
.item img,.item .ph{width:58px;height:58px;border-radius:var(--r-md);flex:none;border:1px solid var(--border-subtle);background:var(--brand50);}
|
||||
.item img{object-fit:cover;display:block;}
|
||||
.item .ph{display:flex;align-items:center;justify-content:center;}
|
||||
.item .ph svg{width:20px;height:32px;stroke:var(--primary);opacity:.4;}
|
||||
.item .m{flex:1;min-width:0;padding-right:16px;}
|
||||
.item .nm{font-weight:700;font-size:var(--fs-title);line-height:1.45;color:var(--heading);}
|
||||
.item .sb{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;}
|
||||
.item .cd{font-size:var(--fs-xs);color:var(--faint);font-family:var(--font-mono);margin-top:2px;}
|
||||
.item .pr{flex:none;color:var(--accent);font-weight:700;font-size:16px;padding-right:14px;}
|
||||
|
||||
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13.5px;animation:rise .5s ease .16s both;}
|
||||
.pager a{color:var(--primary);font-weight:600;letter-spacing:.08em;padding:8px 2px;}
|
||||
.pager .off{color:var(--border);letter-spacing:.08em;}
|
||||
.pager .pg{color:var(--muted);font-size:var(--fs-sm);letter-spacing:.12em;}
|
||||
|
||||
.empty{text-align:center;padding:56px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);animation:rise .5s ease both;box-shadow:var(--sh-1);}
|
||||
.empty h2{font-size:17px;margin-bottom:8px;color:var(--heading);}
|
||||
.empty p{color:var(--muted);font-size:var(--fs-body);}
|
||||
|
||||
.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);}
|
||||
.foot .brand{color:var(--primary);font-weight:600;}
|
||||
.foot .icp{font-size:var(--fs-xs);opacity:.9;}
|
||||
|
||||
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
|
||||
@media (prefers-reduced-motion:reduce){*{animation:none!important;}}
|
||||
</style>
|
||||
<script>
|
||||
/* 首屏前定主题防闪烁：记忆值 > 系统深色(→b) > a */
|
||||
(function(){try{
|
||||
var t=localStorage.getItem('jiu-pub-theme');
|
||||
if(!t&&window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)t='b';
|
||||
if(t==='b'||t==='c')document.documentElement.setAttribute('data-theme',t);
|
||||
}catch(e){}})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
{{if .Found}}
|
||||
<div class="head">
|
||||
{{if .LogoURL}}<img src="{{.LogoURL}}" alt="{{.ShopName}}" decoding="async">{{end}}
|
||||
<div>
|
||||
<h1>{{.ShopName}}</h1>
|
||||
<div class="sub">在售商品 {{.Total}} 件 · 正品保障</div>
|
||||
<div class="page">
|
||||
<header class="mast"><a href="https://jiu.51yanmei.com">岩美酒库</a>
|
||||
<button class="thm" id="thm" aria-label="切换主题">
|
||||
<svg viewBox="0 0 24 24"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
|
||||
<span id="thmName">经典蓝</span>
|
||||
<svg class="cv" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
||||
</button>
|
||||
<div class="thm-menu" id="thmMenu" hidden>
|
||||
<button data-t="a"><span class="ck"></span>A · 经典蓝</button>
|
||||
<button data-t="b"><span class="ck"></span>B · 琥珀</button>
|
||||
<button data-t="c"><span class="ck"></span>C · 酒窖</button>
|
||||
</div>
|
||||
</header>
|
||||
{{if .Found}}
|
||||
<div class="shop">
|
||||
{{if .LogoURL}}<img src="{{.LogoURL}}" alt="{{.ShopName}}" decoding="async">{{end}}
|
||||
<h1>{{.ShopName}}</h1>
|
||||
<div class="sub">在售商品 <b>{{.Total}}</b> 件</div>
|
||||
</div>
|
||||
|
||||
<form method="get" action="">
|
||||
<input type="search" name="q" value="{{.Q}}" placeholder="搜索本店商品（名称 / 编号 / 拼音）">
|
||||
<input type="search" name="q" value="{{.Q}}" placeholder="搜索本店商品：名称 / 编号 / 拼音">
|
||||
<button type="submit">搜索</button>
|
||||
</form>
|
||||
|
||||
<div class="sec-t">在售商品</div>
|
||||
|
||||
{{if .Items}}
|
||||
<div class="list">
|
||||
{{range .Items}}
|
||||
<a class="item" href="/product/{{.PublicID}}">
|
||||
{{if .Img}}<img src="{{.Img}}" alt="{{.Name}}" loading="lazy" decoding="async">{{else}}<span class="ph">暂无图</span>{{end}}
|
||||
{{if .Img}}<img src="{{.Img}}" alt="{{.Name}}" loading="lazy" decoding="async">{{else}}<span class="ph"><svg viewBox="0 0 40 64" fill="none" stroke-width="2" stroke-linecap="round"><path d="M16 2h8M17 2v14c0 3 6 3 6 0V2M17 12c-6 5-9 9-9 16v28a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V28c0-7-3-11-9-16"/></svg></span>{{end}}
|
||||
<span class="m">
|
||||
<span class="nm">{{.Name}}</span>
|
||||
<span class="nm" style="display:block">{{.Name}}</span>
|
||||
{{if .Sub}}<span class="sb" style="display:block">{{.Sub}}</span>{{end}}
|
||||
{{if .Code}}<span class="cd" style="display:block">{{.Code}}</span>{{end}}
|
||||
</span>
|
||||
{{if .Price}}<span class="pr">{{.Price}}</span>{{end}}
|
||||
</a>
|
||||
{{end}}
|
||||
<div class="pager">
|
||||
{{if .PrevURL}}<a href="{{.PrevURL}}">‹ 上一页</a>{{else}}<span class="off">‹ 上一页</span>{{end}}
|
||||
<span class="pg">第 {{.Page}} 页 · 共 {{.Total}} 件</span>
|
||||
{{if .NextURL}}<a href="{{.NextURL}}">下一页 ›</a>{{else}}<span class="off">下一页 ›</span>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pager">
|
||||
{{if .PrevURL}}<a href="{{.PrevURL}}">‹ 上一页</a>{{else}}<span class="off">‹ 上一页</span>{{end}}
|
||||
<span class="pg">第 {{.Page}} 页 · 共 {{.Total}} 件</span>
|
||||
{{if .NextURL}}<a href="{{.NextURL}}">下一页 ›</a>{{else}}<span class="off">下一页 ›</span>{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="empty">
|
||||
<h2>{{if .Q}}没有找到「{{.Q}}」相关商品{{else}}本店暂无在售商品{{end}}</h2>
|
||||
{{if .Q}}<p>换个关键词试试，或清空搜索查看全部。</p>{{end}}
|
||||
</div>
|
||||
<div class="empty">
|
||||
<h2>{{if .Q}}没有找到「{{.Q}}」相关商品{{else}}本店暂无在售商品{{end}}</h2>
|
||||
{{if .Q}}<p>换个关键词试试，或清空搜索查看全部。</p>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<div class="empty">
|
||||
<div class="empty" style="margin-top:40px">
|
||||
<h2>店铺不存在</h2>
|
||||
<p>请确认链接来源。</p>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="foot">岩美酒库 · 正品溯源</div>
|
||||
<footer class="foot">
|
||||
<div class="foot-rule">◆</div>
|
||||
<div>技术支持：<a class="brand" href="https://jiu.51yanmei.com">岩美科技</a> · <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备2026039814号</a></div>
|
||||
</footer>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var NAMES={a:'经典蓝',b:'琥珀',c:'酒窖'},root=document.documentElement,
|
||||
btn=document.getElementById('thm'),menu=document.getElementById('thmMenu'),
|
||||
label=document.getElementById('thmName');
|
||||
if(!btn||!menu)return;
|
||||
var opts=[].slice.call(menu.children);
|
||||
function cur(){return root.getAttribute('data-theme')||'a';}
|
||||
function paint(){
|
||||
label.textContent=NAMES[cur()];
|
||||
opts.forEach(function(b){var on=b.getAttribute('data-t')===cur();
|
||||
b.className=on?'on':'';b.querySelector('.ck').textContent=on?'✓':'';});
|
||||
}
|
||||
btn.addEventListener('click',function(e){e.stopPropagation();menu.hidden=!menu.hidden;});
|
||||
opts.forEach(function(b){b.addEventListener('click',function(e){
|
||||
e.stopPropagation();
|
||||
var t=b.getAttribute('data-t');
|
||||
if(t==='a')root.removeAttribute('data-theme');else root.setAttribute('data-theme',t);
|
||||
try{localStorage.setItem('jiu-pub-theme',t);}catch(err){}
|
||||
paint();menu.hidden=true;
|
||||
});});
|
||||
document.addEventListener('click',function(){menu.hidden=true;});
|
||||
paint();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user