dsh-design-studio 0.9.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.en.md +6 -4
- package/README.md +6 -4
- package/assets/demo.gif +0 -0
- package/assets/hero-sm.jpg +0 -0
- package/cordis.patch.yml +5 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/_shots/menu.jpg +0 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/app.css +64 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/cart.html +120 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/design.json +56 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/menu.html +200 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/order.html +135 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/tokens.css +43 -0
- package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/_shots/email.jpg +0 -0
- package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/design.json +20 -0
- package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/email.html +268 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/_shots/courses.jpg +0 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/courses.html +364 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/design.json +49 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/lesson.html +196 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/tokens.css +55 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/ui.css +255 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/_shots/poster.jpg +0 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/design.json +21 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/poster.html +165 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/tokens.css +35 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/_shots/home.jpg +0 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/app.css +155 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/booking.html +232 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/design.json +57 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/health.html +221 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/home.html +225 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/tokens.css +54 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/_shots/overview.jpg +0 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/app.css +79 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/design.json +51 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/entries.html +161 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/icons.svg +30 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/overview.html +181 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/tokens.css +50 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/_shots/home.jpg +0 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/book.html +279 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/design.json +21 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/home.html +348 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/style.css +297 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/tokens.css +49 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/01-cover.html +133 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/02-highlights.html +67 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/03-growth.html +89 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/04-milestones.html +92 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/05-next.html +99 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/06-thanks.html +61 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/_shots/01-cover.jpg +0 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/deck.css +67 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/design.json +25 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/tokens.css +30 -0
- package/gallery-seed/index.json +1 -0
- package/gallery-seed/thumbs/orderg-x__alley-noodles.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__autumn-sale.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__little-painter.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__moon-fair.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__paw-diary.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__pocket-ledger.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__time-bookshop.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__year-review.webp +0 -0
- package/lib/browser.js +23 -9
- package/lib/bundle.js +12 -3
- package/lib/client.js +3106 -111
- package/lib/core.js +44 -11
- package/lib/gallery/css.js +230 -0
- package/lib/gallery/html.js +313 -0
- package/lib/gallery/index.js +22 -0
- package/lib/gallery/market-routes.js +306 -0
- package/lib/gallery/market.js +623 -0
- package/lib/gallery/pack.js +311 -0
- package/lib/gallery/policy.js +1560 -0
- package/lib/gallery/qrfind.js +181 -0
- package/lib/gallery/render.js +148 -0
- package/lib/gallery/routes.js +360 -0
- package/lib/gallery/tar.js +118 -0
- package/lib/gallery/use.js +125 -0
- package/lib/gallery/zip.js +212 -0
- package/lib/handoff.js +291 -29
- package/lib/history.js +3 -1
- package/lib/index.js +118 -24
- package/lib/inspire.js +142 -0
- package/lib/offline.js +17 -0
- package/lib/picker.js +425 -32
- package/lib/serve.js +88 -11
- package/lib/works.js +238 -0
- package/locale/en.json +2 -1
- package/locale/offline/en.json +6 -0
- package/locale/offline/zh.json +6 -0
- package/locale/zh.json +2 -1
- package/package.json +10 -3
- package/skills/ui-design/SKILL.md +9 -0
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #F5F7FB;
|
|
3
|
+
--surface: #FFFFFF;
|
|
4
|
+
--text: #0F172A;
|
|
5
|
+
--muted: #55657D;
|
|
6
|
+
--line: #E2E8F0;
|
|
7
|
+
--primary: #2457F5;
|
|
8
|
+
--primary-hover: #1C49DB;
|
|
9
|
+
--primary-soft: #E9EFFE;
|
|
10
|
+
--accent: #0F8F8E;
|
|
11
|
+
--accent-soft: #E2F3F2;
|
|
12
|
+
--accent-ink: #0A7372;
|
|
13
|
+
--on: #FFFFFF;
|
|
14
|
+
--link: #2457F5;
|
|
15
|
+
--danger: #C0392B;
|
|
16
|
+
--danger-soft: #FCEDEB;
|
|
17
|
+
--side: #EDF1F7;
|
|
18
|
+
--side-line: #DCE3ED;
|
|
19
|
+
--hover: #F1F4F9;
|
|
20
|
+
--track: #E8EDF4;
|
|
21
|
+
|
|
22
|
+
--cat-housing: #2457F5;
|
|
23
|
+
--cat-food: #EB6834;
|
|
24
|
+
--cat-transit: #0BA394;
|
|
25
|
+
--cat-shopping: #EDA100;
|
|
26
|
+
--cat-fun: #7A5CE0;
|
|
27
|
+
--cat-other: #94A3B8;
|
|
28
|
+
|
|
29
|
+
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
30
|
+
--mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
31
|
+
|
|
32
|
+
--fs-sm: 12px;
|
|
33
|
+
--fs-md: 13px;
|
|
34
|
+
--fs-lg: 15px;
|
|
35
|
+
--fs-xl: 28px;
|
|
36
|
+
|
|
37
|
+
--space-1: 4px;
|
|
38
|
+
--space-2: 8px;
|
|
39
|
+
--space-3: 12px;
|
|
40
|
+
--space-4: 16px;
|
|
41
|
+
--space-5: 24px;
|
|
42
|
+
--space-6: 32px;
|
|
43
|
+
|
|
44
|
+
--radius: 8px;
|
|
45
|
+
--radius-sm: 6px;
|
|
46
|
+
--radius-xs: 4px;
|
|
47
|
+
--shadow: 0 1px 3px rgba(15, 23, 42, .08);
|
|
48
|
+
--shadow-pop: 0 8px 24px rgba(15, 23, 42, .12);
|
|
49
|
+
--ease: cubic-bezier(.2, .8, .2, 1);
|
|
50
|
+
}
|
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<meta name="dsh-design" content="web">
|
|
7
|
+
<title>雾港来信 · 拾光书店</title>
|
|
8
|
+
<link rel="stylesheet" href="tokens.css">
|
|
9
|
+
<link rel="stylesheet" href="style.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<div class="strip">
|
|
14
|
+
<div class="wrap">
|
|
15
|
+
<span class="num">第 38 期 · 2026 年 11 月号</span>
|
|
16
|
+
<span class="open"><i></i>今日营业 10:00 – 22:00 · 二楼咖啡角开放</span>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<header class="mast compact">
|
|
21
|
+
<div class="wrap">
|
|
22
|
+
<div class="mast-row">
|
|
23
|
+
<a class="logo" href="home.html">拾光书店</a>
|
|
24
|
+
<span></span>
|
|
25
|
+
<a class="more" href="home.html">← 回到本期首页</a>
|
|
26
|
+
</div>
|
|
27
|
+
<nav class="mast-nav" aria-label="栏目">
|
|
28
|
+
<a href="home.html#feature" aria-current="page">本月主推</a>
|
|
29
|
+
<a href="home.html#new">新书上架</a>
|
|
30
|
+
<a href="home.html#picks">店员推荐</a>
|
|
31
|
+
<a href="home.html#events">读书会</a>
|
|
32
|
+
<a href="home.html#visit">到店</a>
|
|
33
|
+
<a class="end" href="#top">我的书单 <span class="count num">2</span></a>
|
|
34
|
+
</nav>
|
|
35
|
+
</div>
|
|
36
|
+
</header>
|
|
37
|
+
|
|
38
|
+
<main id="top" class="page-end">
|
|
39
|
+
<div class="wrap">
|
|
40
|
+
<nav class="crumbs" aria-label="位置">
|
|
41
|
+
<a href="home.html">首页</a><span>/</span><a href="home.html#new">文学</a><span>/</span><a href="home.html#new">长篇小说</a><span>/</span><span class="here">雾港来信</span>
|
|
42
|
+
</nav>
|
|
43
|
+
|
|
44
|
+
<section class="detail" aria-label="书籍信息">
|
|
45
|
+
<div class="detail-cover">
|
|
46
|
+
<svg class="cover" viewBox="0 0 400 600" role="img" aria-label="《雾港来信》封面：雾里的灯塔和海上漂着的一封信">
|
|
47
|
+
<defs>
|
|
48
|
+
<linearGradient id="fogB" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#EEEBE4"/><stop offset="1" stop-color="#C8C4BA"/></linearGradient>
|
|
49
|
+
<pattern id="seaB" width="10" height="7" patternUnits="userSpaceOnUse"><path d="M0 3.5h10" stroke="#E8E4DA" stroke-width=".8" opacity=".28"/></pattern>
|
|
50
|
+
</defs>
|
|
51
|
+
<rect width="400" height="600" fill="url(#fogB)"/>
|
|
52
|
+
<path d="M0 392 C60 372 110 384 160 368 S260 352 310 364 S380 372 400 362 V430 H0Z" fill="#B7B3AA"/>
|
|
53
|
+
<path d="M128 266 L400 214 L400 322Z" fill="#FFFFFF" opacity=".5"/>
|
|
54
|
+
<path d="M98 430 L110 284 H134 L146 430Z" fill="#161616"/>
|
|
55
|
+
<path d="M106 334 H138 M103 382 H141" stroke="#EEEBE4" stroke-width="7"/>
|
|
56
|
+
<rect x="106" y="264" width="32" height="20" fill="#161616"/>
|
|
57
|
+
<rect x="113" y="268" width="18" height="12" fill="#F6F3EC"/>
|
|
58
|
+
<path d="M101 264 L122 244 L143 264Z" fill="#161616"/>
|
|
59
|
+
<rect y="426" width="400" height="174" fill="#25292C"/>
|
|
60
|
+
<rect y="426" width="400" height="174" fill="url(#seaB)"/>
|
|
61
|
+
<rect y="300" width="400" height="30" fill="#FFFFFF" opacity=".42"/>
|
|
62
|
+
<rect y="346" width="400" height="12" fill="#FFFFFF" opacity=".32"/>
|
|
63
|
+
<rect y="410" width="400" height="26" fill="#FFFFFF" opacity=".26"/>
|
|
64
|
+
<g transform="translate(46 474) rotate(-7)">
|
|
65
|
+
<rect width="128" height="80" fill="#F3EFE6"/>
|
|
66
|
+
<path d="M0 0 L64 46 L128 0" fill="none" stroke="#161616" stroke-width="2"/>
|
|
67
|
+
<rect x="98" y="10" width="20" height="24" fill="none" stroke="#161616" stroke-width="1.5" stroke-dasharray="2.5 2"/>
|
|
68
|
+
</g>
|
|
69
|
+
<text x="346" y="64" font-family="'Songti SC', 'Noto Serif SC', serif" font-weight="900" font-size="56" fill="#111111" style="writing-mode: vertical-rl; letter-spacing: 10px">雾港来信</text>
|
|
70
|
+
<text x="290" y="68" font-family="'Songti SC', 'Noto Serif SC', serif" font-size="16" fill="#111111" style="writing-mode: vertical-rl; letter-spacing: 6px">沈栖 著</text>
|
|
71
|
+
<rect x="280" y="166" width="20" height="20" fill="#111111"/>
|
|
72
|
+
<text x="290" y="181" text-anchor="middle" font-family="'Songti SC', serif" font-weight="700" font-size="13" fill="#F3EFE6">栖</text>
|
|
73
|
+
<text x="200" y="574" text-anchor="middle" font-family="'Songti SC', serif" font-size="13" fill="#D8D3C8" letter-spacing="6">青岚出版社</text>
|
|
74
|
+
</svg>
|
|
75
|
+
<div class="thumbs">
|
|
76
|
+
<figure class="on">
|
|
77
|
+
<svg viewBox="0 0 120 120" aria-hidden="true"><rect width="120" height="120" fill="#DCD8CF"/><rect x="34" y="12" width="52" height="78" fill="#C8C4BA"/><path d="M48 90 L51 54 H57 L60 90Z" fill="#161616"/><rect x="34" y="68" width="52" height="22" fill="#25292C"/><path d="M76 18 V44" stroke="#111111" stroke-width="5"/></svg>
|
|
78
|
+
<figcaption>封面</figcaption>
|
|
79
|
+
</figure>
|
|
80
|
+
<figure>
|
|
81
|
+
<svg viewBox="0 0 120 120" aria-hidden="true"><rect width="120" height="120" fill="#DCD8CF"/><rect x="34" y="12" width="52" height="78" fill="#25292C"/><path d="M42 26 H78 M42 32 H78 M42 38 H72 M42 48 H78 M42 54 H66" stroke="#D8D3C8" stroke-width="1.6"/><rect x="42" y="72" width="16" height="10" fill="none" stroke="#D8D3C8" stroke-width="1"/></svg>
|
|
82
|
+
<figcaption>封底</figcaption>
|
|
83
|
+
</figure>
|
|
84
|
+
<figure>
|
|
85
|
+
<svg viewBox="0 0 120 120" aria-hidden="true"><rect width="120" height="120" fill="#DCD8CF"/><rect x="18" y="16" width="84" height="70" fill="#FBFAF6"/><path d="M60 16 V86" stroke="#D5D0C4" stroke-width="1"/><path d="M26 30 H52 M26 36 H52 M26 42 H48 M26 48 H52 M26 54 H44 M68 26 H86 M68 40 H94 M68 46 H94 M68 52 H90 M68 58 H94 M68 64 H82" stroke="#8A867D" stroke-width="1.4"/></svg>
|
|
86
|
+
<figcaption>内页</figcaption>
|
|
87
|
+
</figure>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="detail-text">
|
|
92
|
+
<div class="top-line"><span class="kicker">本月主推 · 长篇小说</span><span class="label num">NO.11</span></div>
|
|
93
|
+
<h1>雾港来信</h1>
|
|
94
|
+
<p class="sub">一座港口城市，十二封没有寄出的信。</p>
|
|
95
|
+
<p class="byline"><span><b>沈栖</b> 著</span><span>首部长篇</span><span>店员 阿禾 推荐</span></p>
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
<div class="order">
|
|
99
|
+
<div class="price"><b class="num"><small>¥</small>58</b><s class="num">¥68</s><span>店内价</span></div>
|
|
100
|
+
<p class="stock"><b>店内现货 4 本</b><span>今天下单到店，明天 10 点后可取</span></p>
|
|
101
|
+
<div class="acts">
|
|
102
|
+
<a class="btn btn-red" href="#top">
|
|
103
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true"><path d="M6 3.5h12v17l-6-4.2-6 4.2z"/></svg>
|
|
104
|
+
加入书单
|
|
105
|
+
</a>
|
|
106
|
+
<a class="btn btn-line" href="home.html#visit">到店预留</a>
|
|
107
|
+
</div>
|
|
108
|
+
<p class="hint">加入书单后，到店报上名字即可取书，为你保留 3 天。</p>
|
|
109
|
+
</div>
|
|
110
|
+
<dl class="facts">
|
|
111
|
+
<div><dt>出版</dt><dd>青岚出版社</dd></div>
|
|
112
|
+
<div><dt>时间</dt><dd class="num">2026 年 9 月</dd></div>
|
|
113
|
+
<div><dt>页数</dt><dd class="num">368 页</dd></div>
|
|
114
|
+
<div><dt>装帧</dt><dd>精装 · 锁线</dd></div>
|
|
115
|
+
<div><dt>开本</dt><dd class="num">32 开</dd></div>
|
|
116
|
+
<div><dt>店内位置</dt><dd>二楼 文学区 B3</dd></div>
|
|
117
|
+
</dl>
|
|
118
|
+
</div>
|
|
119
|
+
</section>
|
|
120
|
+
|
|
121
|
+
<section class="block" aria-labelledby="author-title">
|
|
122
|
+
<div class="block-side"><h2 id="author-title">作者</h2><p>关于沈栖</p></div>
|
|
123
|
+
<div class="author">
|
|
124
|
+
<div class="portrait">
|
|
125
|
+
<svg viewBox="0 0 160 200" role="img" aria-label="作者沈栖的线描画像">
|
|
126
|
+
<rect width="160" height="200" fill="#EAE5DA"/>
|
|
127
|
+
<path d="M18 200 C22 162 48 146 80 146 C112 146 138 162 142 200Z" fill="#111111"/>
|
|
128
|
+
<path d="M70 128 H90 V150 C86 156 74 156 70 150Z" fill="#F4F1EA" stroke="#111111" stroke-width="1.5"/>
|
|
129
|
+
<path d="M48 70 C48 42 64 30 82 30 C102 30 116 46 114 74 C114 98 112 118 104 132 C110 104 104 82 100 70 C88 82 66 86 52 84 C52 104 54 120 58 132 C50 118 48 96 48 70Z" fill="#111111"/>
|
|
130
|
+
<path d="M54 84 C66 86 88 82 100 70 C104 82 108 100 104 120 C98 134 90 140 80 140 C68 140 60 132 56 118 C53 108 53 96 54 84Z" fill="#F4F1EA" stroke="#111111" stroke-width="1.5"/>
|
|
131
|
+
<path d="M66 104 q5 3 10 0 M86 104 q5 3 10 0 M76 124 q5 2 10 0" fill="none" stroke="#111111" stroke-width="1.5" stroke-linecap="round"/>
|
|
132
|
+
</svg>
|
|
133
|
+
</div>
|
|
134
|
+
<div>
|
|
135
|
+
<h3>沈栖<span>小说作者 · 前报社夜班编辑</span></h3>
|
|
136
|
+
<p>1987 年生于南方一座海边小城，做过十年报社夜班编辑，习惯在凌晨三点改完最后一版稿子再回家。写过两本短篇集，《雾港来信》是她的第一部长篇，前后写了四年。她说这本书是写给所有「话到嘴边又咽回去」的人的。</p>
|
|
137
|
+
<ul class="works">
|
|
138
|
+
<li>潮间带<small class="num">2019</small></li>
|
|
139
|
+
<li>夜班电车<small class="num">2022</small></li>
|
|
140
|
+
<li>雾港来信<small class="num">2026</small></li>
|
|
141
|
+
</ul>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</section>
|
|
145
|
+
|
|
146
|
+
<section class="block" aria-labelledby="excerpt-title">
|
|
147
|
+
<div class="block-side"><h2 id="excerpt-title">书摘</h2><p class="num">第一封信 · 第 3 页</p></div>
|
|
148
|
+
<div>
|
|
149
|
+
<div class="excerpt">
|
|
150
|
+
<p><span class="drop" aria-hidden="true">雾</span>是从海上来的。每年十一月，它总在傍晚六点左右漫过防波堤，先吞掉灯塔的底座，再吞掉码头上那排生锈的铁桩。母亲说，雾港的人都习惯把话留到第二天再说——反正今晚谁也看不清谁的脸。</p>
|
|
151
|
+
<p>我在邮局后面的阁楼里找到那只铁皮盒子时，雾刚好漫到窗台。盒子里是十二封信，每一封都贴好了邮票，写好了地址，却一封也没有寄出去。最上面那封的收信人，是我。</p>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="excerpt-foot"><span>节选自《雾港来信》，青岚出版社授权店内展示</span><span class="num">3 / 368</span></div>
|
|
154
|
+
</div>
|
|
155
|
+
</section>
|
|
156
|
+
|
|
157
|
+
<section class="block" aria-labelledby="review-title">
|
|
158
|
+
<div class="block-side"><h2 id="review-title">店员书评</h2><p>读完才写，不收稿费</p></div>
|
|
159
|
+
<article class="review">
|
|
160
|
+
<div class="review-head">
|
|
161
|
+
<span class="av dark">禾</span>
|
|
162
|
+
<span class="who"><b>阿禾</b><span class="num">拾光书店 · 文学区 · 2026 年 10 月 28 日</span></span>
|
|
163
|
+
<span class="score" aria-label="推荐指数 4 / 5"><i></i><i></i><i></i><i></i><i class="o"></i>推荐指数</span>
|
|
164
|
+
</div>
|
|
165
|
+
<h3>一本适合在雨天读完的书</h3>
|
|
166
|
+
<div class="review-body">
|
|
167
|
+
<p>沈栖写的是一座港口城市，其实写的是「没说出口」的那部分人生。十二封信对应十二个月，每一封都把故事往回推一点。读到一半你才发现，写信的人和收信的人，早就在同一条街上擦肩而过很多次了。</p>
|
|
168
|
+
<p>她的句子很短，很干净，没有一句在用力。我最喜欢第七封信，写父亲修船的那个冬天，只有三页。我是在店里读完的，抬起头，外面真的下雨了。</p>
|
|
169
|
+
<p>如果你喜欢安静、慢热、结尾留一点余温的小说，这本可以放进今年的书单。不太建议一口气读完，一天一封信刚刚好。</p>
|
|
170
|
+
</div>
|
|
171
|
+
<ul class="readers">
|
|
172
|
+
<li><p>「第九封信让我在地铁上哭了。」</p><span>读者 林小姐 · 读书会成员</span></li>
|
|
173
|
+
<li><p>「雾写得太好了，读完想去海边住一晚。」</p><span>读者 陈先生 · 周六常客</span></li>
|
|
174
|
+
</ul>
|
|
175
|
+
</article>
|
|
176
|
+
</section>
|
|
177
|
+
|
|
178
|
+
<section class="sec" aria-labelledby="more-title">
|
|
179
|
+
<div class="sec-head">
|
|
180
|
+
<h2 id="more-title">同一张书桌</h2>
|
|
181
|
+
<p>读完《雾港来信》，店员们会接着推荐这几本。</p>
|
|
182
|
+
<a class="more" href="home.html#new">更多新书 →</a>
|
|
183
|
+
</div>
|
|
184
|
+
<ul class="shelf four">
|
|
185
|
+
<li>
|
|
186
|
+
<a class="book" href="home.html#new">
|
|
187
|
+
<svg class="cover" viewBox="0 0 200 300" role="img" aria-label="《盐与灯塔》封面">
|
|
188
|
+
<rect width="200" height="300" fill="#22324A"/>
|
|
189
|
+
<circle cx="60" cy="86" r="22" fill="#E9E2D0"/>
|
|
190
|
+
<path d="M118 236 L126 132 H140 L148 236Z" fill="none" stroke="#E9E2D0" stroke-width="2"/>
|
|
191
|
+
<path d="M122 120 H144 V132 H122Z M126 120 L133 110 L140 120" fill="none" stroke="#E9E2D0" stroke-width="2"/>
|
|
192
|
+
<path d="M0 236 H200" stroke="#E9E2D0" stroke-width="1.5"/>
|
|
193
|
+
<path d="M10 252 q10 -6 20 0 t20 0 t20 0 M90 266 q10 -6 20 0 t20 0 t20 0 M30 282 q10 -6 20 0 t20 0" fill="none" stroke="#8FA0B4" stroke-width="1.2"/>
|
|
194
|
+
<text x="176" y="40" font-family="'Songti SC', serif" font-weight="900" font-size="26" fill="#E9E2D0" style="writing-mode: vertical-rl; letter-spacing: 4px">盐与灯塔</text>
|
|
195
|
+
<text x="152" y="42" font-family="'Songti SC', serif" font-size="10" fill="#C9D1DB" style="writing-mode: vertical-rl; letter-spacing: 2px">林望舒</text>
|
|
196
|
+
</svg>
|
|
197
|
+
<span class="cat">小说</span>
|
|
198
|
+
<h3>盐与灯塔</h3>
|
|
199
|
+
<p class="by">林望舒 著</p>
|
|
200
|
+
<p class="pr num"><b>¥49</b><span class="muted">也写海</span></p>
|
|
201
|
+
</a>
|
|
202
|
+
</li>
|
|
203
|
+
<li>
|
|
204
|
+
<a class="book" href="home.html#new">
|
|
205
|
+
<svg class="cover" viewBox="0 0 200 300" role="img" aria-label="《夜航的鲸》封面">
|
|
206
|
+
<rect width="200" height="300" fill="#141414"/>
|
|
207
|
+
<g fill="#E9E2D0"><circle cx="34" cy="40" r="1.4"/><circle cx="70" cy="62" r="1"/><circle cx="150" cy="30" r="1.6"/><circle cx="172" cy="78" r="1"/><circle cx="120" cy="54" r="1"/><circle cx="24" cy="110" r="1"/><circle cx="96" cy="24" r="1.2"/></g>
|
|
208
|
+
<path d="M22 196 C40 160 96 150 136 166 C156 174 168 172 178 160 C176 176 168 186 156 190 C150 214 112 228 70 220 C44 214 28 206 22 196Z" fill="#E9E2D0"/>
|
|
209
|
+
<circle cx="60" cy="190" r="2.4" fill="#141414"/>
|
|
210
|
+
<path d="M0 238 H200" stroke="#E9E2D0" stroke-width=".8" opacity=".5"/>
|
|
211
|
+
<text x="20" y="270" font-family="'Songti SC', serif" font-weight="900" font-size="26" fill="#E9E2D0" letter-spacing="3">夜航的鲸</text>
|
|
212
|
+
<text x="20" y="288" font-family="'Songti SC', serif" font-size="10" fill="#B8B2A4" letter-spacing="2">周未 诗集</text>
|
|
213
|
+
</svg>
|
|
214
|
+
<span class="cat">诗集</span>
|
|
215
|
+
<h3>夜航的鲸</h3>
|
|
216
|
+
<p class="by">周未 著</p>
|
|
217
|
+
<p class="pr num"><b>¥42</b><span class="muted">封面画家的诗</span></p>
|
|
218
|
+
</a>
|
|
219
|
+
</li>
|
|
220
|
+
<li>
|
|
221
|
+
<a class="book" href="home.html#new">
|
|
222
|
+
<svg class="cover" viewBox="0 0 200 300" role="img" aria-label="《小城修表人》封面">
|
|
223
|
+
<rect width="200" height="300" fill="#E8E2D4"/>
|
|
224
|
+
<circle cx="100" cy="132" r="62" fill="#F7F4EC" stroke="#111111" stroke-width="2"/>
|
|
225
|
+
<circle cx="100" cy="132" r="54" fill="none" stroke="#111111" stroke-width=".8"/>
|
|
226
|
+
<path d="M100 82 V90 M100 174 V182 M50 132 H58 M142 132 H150 M75 89 l3 5 M122 175 l3 5 M57 107 l5 3 M138 154 l5 3 M125 89 l-3 5 M78 175 l-3 5 M143 107 l-5 3 M62 154 l-5 3" stroke="#111111" stroke-width="1.6"/>
|
|
227
|
+
<path d="M100 132 L100 96 M100 132 L126 146" stroke="#111111" stroke-width="2.4" stroke-linecap="round"/>
|
|
228
|
+
<circle cx="100" cy="132" r="3.5" fill="#111111"/>
|
|
229
|
+
<text x="100" y="244" text-anchor="middle" font-family="'Songti SC', serif" font-weight="900" font-size="26" fill="#111111" letter-spacing="2">小城修表人</text>
|
|
230
|
+
<text x="100" y="268" text-anchor="middle" font-family="'Songti SC', serif" font-size="10" fill="#444444" letter-spacing="3">苏迟 著</text>
|
|
231
|
+
</svg>
|
|
232
|
+
<span class="cat">非虚构</span>
|
|
233
|
+
<h3>小城修表人</h3>
|
|
234
|
+
<p class="by">苏迟 著</p>
|
|
235
|
+
<p class="pr num"><b>¥59</b><span class="muted">也写等待</span></p>
|
|
236
|
+
</a>
|
|
237
|
+
</li>
|
|
238
|
+
<li>
|
|
239
|
+
<a class="book" href="home.html#new">
|
|
240
|
+
<svg class="cover" viewBox="0 0 200 300" role="img" aria-label="《慢车去北方》封面">
|
|
241
|
+
<rect width="200" height="300" fill="#C99A4A"/>
|
|
242
|
+
<circle cx="148" cy="150" r="32" fill="#F1E3C6"/>
|
|
243
|
+
<rect y="196" width="200" height="104" fill="#8E6B30"/>
|
|
244
|
+
<path d="M0 240 H200 M0 262 H200 M0 282 H200" stroke="#A47D3B" stroke-width="1"/>
|
|
245
|
+
<path d="M0 196 H200" stroke="#111111" stroke-width="1.5"/>
|
|
246
|
+
<g fill="#111111"><rect x="16" y="182" width="32" height="12"/><rect x="51" y="182" width="32" height="12"/><rect x="86" y="182" width="32" height="12"/><rect x="121" y="178" width="22" height="16"/></g>
|
|
247
|
+
<path d="M172 146 V196 M165 153 H179 M190 158 V196" stroke="#111111" stroke-width="1.2"/>
|
|
248
|
+
<text x="18" y="54" font-family="'Songti SC', serif" font-weight="900" font-size="30" fill="#111111">慢车</text>
|
|
249
|
+
<text x="18" y="90" font-family="'Songti SC', serif" font-weight="900" font-size="30" fill="#111111">去北方</text>
|
|
250
|
+
<text x="18" y="114" font-family="'Songti SC', serif" font-size="10" fill="#111111" letter-spacing="2">陆远山 著</text>
|
|
251
|
+
</svg>
|
|
252
|
+
<span class="cat">游记</span>
|
|
253
|
+
<h3>慢车去北方</h3>
|
|
254
|
+
<p class="by">陆远山 著</p>
|
|
255
|
+
<p class="pr num"><b>¥56</b><span class="muted">也写远方</span></p>
|
|
256
|
+
</a>
|
|
257
|
+
</li>
|
|
258
|
+
</ul>
|
|
259
|
+
</section>
|
|
260
|
+
</div>
|
|
261
|
+
</main>
|
|
262
|
+
|
|
263
|
+
<footer class="foot">
|
|
264
|
+
<div class="wrap">
|
|
265
|
+
<div class="foot-grid">
|
|
266
|
+
<div>
|
|
267
|
+
<a class="logo" href="home.html">拾光书店</a>
|
|
268
|
+
<p>每月一期《拾光》店刊，记下这个月读到的好书和来过的人，到店免费取阅。</p>
|
|
269
|
+
</div>
|
|
270
|
+
<div><h4>逛书店</h4><ul><li><a href="home.html#feature">本月主推</a></li><li><a href="home.html#new">新书上架</a></li><li><a href="home.html#picks">店员推荐</a></li><li><a href="home.html#events">读书会</a></li></ul></div>
|
|
271
|
+
<div><h4>关于</h4><ul><li><a href="home.html#visit">到店指南</a></li><li><a href="#">我们的故事</a></li><li><a href="#">店员们</a></li><li><a href="#">合作与寄售</a></li></ul></div>
|
|
272
|
+
<div><h4>这周在读</h4><ul><li><a href="book.html">《雾港来信》</a></li><li><a href="home.html#new">《盐与灯塔》</a></li><li><a href="home.html#new">《小城修表人》</a></li></ul></div>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="foot-base"><span>© 2026 拾光书店 · 梧桐巷 17 号</span><span>书是慢慢读的，店也是慢慢开的。</span></div>
|
|
275
|
+
</div>
|
|
276
|
+
</footer>
|
|
277
|
+
|
|
278
|
+
</body>
|
|
279
|
+
</html>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"format": 1,
|
|
3
|
+
"type": "template",
|
|
4
|
+
"title": { "zh": "拾光书店", "en": "Shiguang Books" },
|
|
5
|
+
"description": {
|
|
6
|
+
"zh": "巷子里的独立书店官网：杂志感首页（本月主推、新书上架、店员推荐、读书会、到店）和一本书的详情页（书摘、作者、店员书评）",
|
|
7
|
+
"en": "Site for an independent bookshop: a magazine-style home page and a book detail page with excerpt, author notes and a staff review"
|
|
8
|
+
},
|
|
9
|
+
"kind": "web",
|
|
10
|
+
"screens": [
|
|
11
|
+
{ "file": "home.html", "title": { "zh": "首页", "en": "Home" } },
|
|
12
|
+
{ "file": "book.html", "title": { "zh": "书籍详情", "en": "Book detail" } }
|
|
13
|
+
],
|
|
14
|
+
"style": "editorial",
|
|
15
|
+
"categories": ["retail", "media"],
|
|
16
|
+
"tags": ["landing", "article", "detail", "list", "illustration"],
|
|
17
|
+
"lang": "zh",
|
|
18
|
+
"license": "CC0-1.0",
|
|
19
|
+
"author": { "login": "orderg-x", "id": 271418316 },
|
|
20
|
+
"ai": { "generated": true, "tool": "dsh-design-studio@0.11.0" }
|
|
21
|
+
}
|