feat(backend): 公开页视觉改版——酒背标美学 + 页脚品牌链接/ICP + 图片区常驻
- 宣纸暖白底 × 宋体衬线题名 × 酒红「正品」印章，信息行点线引导（酒单式） - 图片区永远存在：无图时显示酒瓶线稿占位「实物图整理中」 - 页脚：岩美酒库链接（jiu.51yanmei.com）+ 京ICP备2026039814号（链工信部） - 仍零 JS、零外部资源，整页 ~9KB；入场动效纯 CSS，reduced-motion 降级 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
@@ -5,83 +5,155 @@
|
||||
<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;}
|
||||
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;}
|
||||
/* 与商品页同族：宣纸暖白 × 墨色衬线 × 酒红点睛，「本店酒单」气质。零 JS。 */
|
||||
:root{
|
||||
--paper:#F6F1E7; --card:#FCFAF4; --ink:#2A2420; --muted:#8A7F70;
|
||||
--wine:#8B2331; --gold:#9A6B2F; --line:#E2D7C3; --line-soft:#EDE5D4;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
body{
|
||||
background-color:var(--paper);
|
||||
background-image:
|
||||
radial-gradient(circle at 12% 8%, rgba(154,107,47,.06), transparent 42%),
|
||||
radial-gradient(circle at 88% 92%, rgba(139,35,49,.05), transparent 42%);
|
||||
color:var(--ink);
|
||||
font:15px/1.7 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
.page{max-width:560px;margin:0 auto;padding:0 18px 44px;}
|
||||
a{color:var(--wine);text-decoration:none;}
|
||||
|
||||
.mast{
|
||||
display:flex;align-items:center;justify-content:center;gap:10px;
|
||||
padding:20px 0 14px;color:var(--muted);font-size:12px;letter-spacing:.35em;
|
||||
border-bottom:1px solid var(--line);position:relative;
|
||||
}
|
||||
.mast::after{content:"";position:absolute;left:0;right:0;bottom:3px;border-bottom:1px solid var(--line-soft);}
|
||||
.mast a{color:var(--ink);font-weight:600;letter-spacing:.35em;}
|
||||
|
||||
/* 店铺题名 */
|
||||
.shop{text-align:center;padding:26px 0 6px;animation:rise .6s ease both;}
|
||||
.shop img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--card);padding:2px;margin-bottom:10px;}
|
||||
.shop h1{font-size:23px;font-weight:700;font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;letter-spacing:.08em;}
|
||||
.shop .sub{color:var(--muted);font-size:12px;letter-spacing:.25em;margin-top:6px;}
|
||||
.shop .sub b{color:var(--gold);font-weight:600;}
|
||||
|
||||
form{display:flex;gap:10px;margin:18px 0 6px;animation:rise .6s ease .08s both;}
|
||||
input[type=search]{
|
||||
flex:1;border:1px solid var(--line);border-radius:3px;padding:10px 14px;font-size:14px;
|
||||
background:var(--card);outline:none;color:var(--ink);letter-spacing:.02em;
|
||||
}
|
||||
input[type=search]::placeholder{color:var(--muted);opacity:.7;letter-spacing:.06em;}
|
||||
input[type=search]:focus{border-color:var(--gold);}
|
||||
button{
|
||||
border:1px solid var(--wine);background:var(--wine);color:#F6F1E7;border-radius:3px;
|
||||
padding:0 20px;font-size:13.5px;letter-spacing:.3em;text-indent:.3em;cursor:pointer;
|
||||
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
|
||||
}
|
||||
|
||||
.sec-t{
|
||||
display:flex;align-items:center;gap:14px;color:var(--wine);font-size:13px;letter-spacing:.4em;text-indent:.4em;
|
||||
font-weight:700;justify-content:center;margin:20px 0 14px;
|
||||
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
|
||||
}
|
||||
.sec-t::before,.sec-t::after{content:"";height:1px;background:var(--line);flex:1;max-width:64px;}
|
||||
|
||||
/* 酒单条目 */
|
||||
.list{animation:rise .6s ease .14s both;}
|
||||
.item{
|
||||
display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
|
||||
border-radius:5px;padding:12px 14px;margin-bottom:10px;color:var(--ink);position:relative;
|
||||
}
|
||||
.item::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-58%);color:var(--line);font-size:16px;}
|
||||
.item img,.item .ph{width:58px;height:58px;border-radius:3px;flex:none;border:1px solid var(--line-soft);background:var(--paper);}
|
||||
.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(--gold);opacity:.5;}
|
||||
.item .m{flex:1;min-width:0;padding-right:16px;}
|
||||
.item .nm{
|
||||
font-weight:700;font-size:15.5px;line-height:1.45;
|
||||
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
|
||||
}
|
||||
.item .sb{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:.06em;}
|
||||
.item .cd{font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;margin-top:2px;opacity:.85;}
|
||||
.item .pr{
|
||||
flex:none;color:var(--wine);font-weight:700;font-size:16px;padding-right:14px;
|
||||
font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
|
||||
}
|
||||
|
||||
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:13.5px;animation:rise .6s ease .2s both;}
|
||||
.pager a{color:var(--wine);font-weight:600;letter-spacing:.1em;padding:8px 2px;}
|
||||
.pager .off{color:var(--line);letter-spacing:.1em;}
|
||||
.pager .pg{color:var(--muted);font-size:12px;letter-spacing:.15em;}
|
||||
|
||||
.empty{text-align:center;padding:56px 20px;background:var(--card);border:1px solid var(--line);border-radius:5px;animation:rise .6s ease both;}
|
||||
.empty h2{font-size:17px;margin-bottom:8px;font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;}
|
||||
.empty p{color:var(--muted);font-size:13px;}
|
||||
|
||||
.foot{margin-top:34px;text-align:center;color:var(--muted);font-size:12px;line-height:2.1;}
|
||||
.foot-rule{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--gold);}
|
||||
.foot-rule::before,.foot-rule::after{content:"";height:1px;background:var(--line);flex:1;}
|
||||
.foot a{color:var(--muted);}
|
||||
.foot .brand{color:var(--wine);font-weight:600;letter-spacing:.1em;}
|
||||
.foot .icp{font-size:11px;opacity:.85;}
|
||||
|
||||
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
|
||||
@media (prefers-reduced-motion:reduce){*{animation:none!important;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="page">
|
||||
<header class="mast"><a href="https://jiu.51yanmei.com">岩美酒库</a><span>正品溯源</span></header>
|
||||
{{if .Found}}
|
||||
<div class="head">
|
||||
<div class="shop">
|
||||
{{if .LogoURL}}<img src="{{.LogoURL}}" alt="{{.ShopName}}" decoding="async">{{end}}
|
||||
<div>
|
||||
<h1>{{.ShopName}}</h1>
|
||||
<div class="sub">在售商品 {{.Total}} 件 · 正品保障</div>
|
||||
</div>
|
||||
<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> · 正品溯源</div>
|
||||
<div class="icp"><a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备2026039814号</a></div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user