dsh-design-studio 0.10.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 +4 -3
- package/README.md +4 -3
- 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 +1455 -39
- package/lib/core.js +22 -2
- 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 +190 -36
- package/lib/history.js +3 -1
- package/lib/index.js +106 -19
- package/lib/inspire.js +142 -0
- package/lib/offline.js +17 -0
- package/lib/picker.js +33 -0
- 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 +9 -2
- package/skills/ui-design/SKILL.md +9 -0
|
@@ -0,0 +1,135 @@
|
|
|
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="miniprogram">
|
|
7
|
+
<title>订单 · 巷口面馆</title>
|
|
8
|
+
<link rel="stylesheet" href="tokens.css">
|
|
9
|
+
<link rel="stylesheet" href="app.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body class="order-page">
|
|
12
|
+
<header class="mp-top paper">
|
|
13
|
+
<div class="mp-status"><span>9:41</span><span class="mp-sys"><svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5.5" width="3" height="6.5" rx="1"/><rect x="10" y="3" width="3" height="9" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg><svg width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><path d="M8 2.2c2.5 0 4.8 1 6.5 2.6l1.2-1.3A11 11 0 0 0 8 .4 11 11 0 0 0 .3 3.5l1.2 1.3A9.3 9.3 0 0 1 8 2.2z"/><path d="M8 5.8c1.5 0 2.9.6 3.9 1.5l1.2-1.3A7.4 7.4 0 0 0 8 4a7.4 7.4 0 0 0-5.1 2l1.2 1.3c1-.9 2.4-1.5 3.9-1.5z"/><path d="M8 9.3c.6 0 1.2.2 1.6.6L8 11.6 6.4 9.9c.4-.4 1-.6 1.6-.6z"/></svg><svg width="27" height="13" viewBox="0 0 27 13" aria-hidden="true"><rect x=".5" y=".5" width="23" height="12" rx="3.5" fill="none" stroke="currentColor" opacity=".45"/><rect x="2" y="2" width="18" height="9" rx="2"/><path d="M25 4.5v4c.8-.3 1.5-1.1 1.5-2s-.7-1.7-1.5-2z" opacity=".5"/></svg></span></div>
|
|
14
|
+
<div class="mp-nav"><h1>订单</h1></div>
|
|
15
|
+
</header>
|
|
16
|
+
<main class="mp-page">
|
|
17
|
+
<div class="tabs" role="tablist" aria-label="订单状态">
|
|
18
|
+
<button class="tab-btn on" role="tab" aria-selected="true">进行中<b>1</b></button>
|
|
19
|
+
<button class="tab-btn" role="tab" aria-selected="false">已完成</button>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<section class="ticket" aria-label="取餐信息">
|
|
23
|
+
<div class="ticket-top">
|
|
24
|
+
<p class="ticket-label">取餐号</p>
|
|
25
|
+
<span class="state"><svg class="ico sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c3.9 0 6.5-2.6 6.5-6.2 0-3.3-2.3-5.6-3.9-7.8-.4 2-1.4 3.2-2.6 3.8.2-3-1.2-5.6-3.8-7.3.2 3.1-1.6 5-3 7A7.3 7.3 0 0 0 5.5 15c0 3.5 2.6 6 6.5 6z"/></svg>面已下锅</span>
|
|
26
|
+
</div>
|
|
27
|
+
<p class="pickup serif">A086</p>
|
|
28
|
+
<p class="ticket-sub">堂食 · 听到叫号，到窗口取面</p>
|
|
29
|
+
<svg class="big-bowl" viewBox="0 0 120 112" aria-hidden="true">
|
|
30
|
+
<path d="M40 30c-4-5 3.5-8-.5-13.5M52 27c-4-5 3.5-8-.5-13.5" fill="none" stroke="#C2A48B" stroke-width="2.2" stroke-linecap="round"/>
|
|
31
|
+
<path d="M88 4L64 52M100 9L71 54" stroke="#8A5A3A" stroke-width="3.4" stroke-linecap="round"/>
|
|
32
|
+
<path d="M68 26c-3 7 3 11 0 18s3 10 0 14M73 28c-3 7 3 11 0 18s3 10 0 13M78 30c-2.6 6.6 2.6 10 0 16.4" fill="none" stroke="#E9C474" stroke-width="2.4" stroke-linecap="round"/>
|
|
33
|
+
<path d="M14 58c1.4 23 19 37 46 37s44.6-14 46-37" fill="#FFF9F2" stroke="#2B1D14" stroke-width="2.4" stroke-linecap="round"/>
|
|
34
|
+
<path d="M24 76q4.2-3.8 8.4 0t8.4 0 8.4 0 8.4 0 8.4 0 8.4 0 8.4 0 8.4 0" fill="none" stroke="#A9542A" stroke-width="2.2" stroke-linecap="round"/>
|
|
35
|
+
<path d="M45 95c2 4.4 28 4.4 30 0" fill="none" stroke="#2B1D14" stroke-width="2.4" stroke-linecap="round"/>
|
|
36
|
+
<ellipse cx="60" cy="58" rx="46" ry="14" fill="#9C4A26" stroke="#2B1D14" stroke-width="2.4"/>
|
|
37
|
+
<path d="M24 60c4-3 8 2.6 12 0s8 2.6 12 0 8 2.6 12 0 8 2.6 12 0 8 2.6 12 0" fill="none" stroke="#F2D795" stroke-width="2.6" stroke-linecap="round"/>
|
|
38
|
+
<path transform="translate(36 54) rotate(-8)" d="M-8 0c4.6-3.4 12-3 15.4.4C5.4 4.2-3.2 5-8 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.4"/>
|
|
39
|
+
<path transform="translate(50 62) rotate(5)" d="M-8 0c4.6-3.4 12-3 15.4.4C5.4 4.2-3.2 5-8 0z" fill="#6E3218" stroke="#2B1D14" stroke-width="1.4"/>
|
|
40
|
+
<path d="M78 52.5c2.6-4.6 11-5.2 15-1 0 0-5 6.8-15 1z" fill="#FFFDF7" stroke="#2B1D14" stroke-width="1.4"/><circle cx="86" cy="51.8" r="3" fill="#F2B33D"/>
|
|
41
|
+
<circle cx="62" cy="55" r="2" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".9"/><circle cx="70" cy="63" r="2" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".9"/><circle cx="28" cy="61" r="2" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".9"/><circle cx="88" cy="62" r="2" fill="#9DB97A" stroke="#4E6B3A" stroke-width=".9"/>
|
|
42
|
+
</svg>
|
|
43
|
+
<div class="eta">
|
|
44
|
+
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>
|
|
45
|
+
<p>预计 <b class="num">10:54</b> 可取<span>还要约 8 分钟 · 前面 2 单</span></p>
|
|
46
|
+
</div>
|
|
47
|
+
<ol class="steps" aria-label="制作进度">
|
|
48
|
+
<li class="done"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 12.5l4 4 9-9"/></svg></i><b>已下单</b><span class="num">10:42</span></li>
|
|
49
|
+
<li class="done"><i><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 12.5l4 4 9-9"/></svg></i><b>备料</b><span class="num">10:44</span></li>
|
|
50
|
+
<li class="now"><i></i><b>煮面中</b><span>约 6 分钟</span></li>
|
|
51
|
+
<li><i></i><b>请取餐</b><span>叫号</span></li>
|
|
52
|
+
</ol>
|
|
53
|
+
</section>
|
|
54
|
+
|
|
55
|
+
<section class="card detail">
|
|
56
|
+
<header class="card-head"><h2>订单明细</h2><span class="shopname"><svg class="ico sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5l1.5-5h13l1.5 5"/><path d="M4 9.5c0 1.8 1.3 2.8 2.7 2.8S9.3 11.3 9.3 9.5c0 1.8 1.3 2.8 2.7 2.8s2.7-1 2.7-2.8c0 1.8 1.3 2.8 2.6 2.8S20 11.3 20 9.5"/><path d="M5.5 12v8h13v-8"/><path d="M10 20v-4.5h4V20"/></svg>巷口面馆 · 老街店</span></header>
|
|
57
|
+
<div class="row"><div><p>红烧牛肉面</p><small>中碗 · 微辣 · 加煎蛋</small></div><span class="x">×1</span><span class="num">¥29</span></div>
|
|
58
|
+
<div class="row"><div><p>葱油拌面</p><small>标准份</small></div><span class="x">×2</span><span class="num">¥28</span></div>
|
|
59
|
+
<div class="row"><div><p>凉拌黄瓜</p><small>蒜香 · 微辣</small></div><span class="x">×1</span><span class="num">¥8</span></div>
|
|
60
|
+
<hr class="dash">
|
|
61
|
+
<div class="row sub"><p>满 60 减 5</p><span class="num minus">−¥5</span></div>
|
|
62
|
+
<div class="row paid"><p>实付</p><span class="price"><small>¥</small>60</span></div>
|
|
63
|
+
</section>
|
|
64
|
+
|
|
65
|
+
<section class="card info">
|
|
66
|
+
<p><span>订单编号</span><span class="num">XK-1107-0386</span></p>
|
|
67
|
+
<p><span>下单时间</span><span class="num">11月7日 10:42</span></p>
|
|
68
|
+
<p><span>用餐方式</span><span>堂食</span></p>
|
|
69
|
+
<p><span>口味备注</span><span>不要香菜，汤多一点，面煮软一点</span></p>
|
|
70
|
+
</section>
|
|
71
|
+
|
|
72
|
+
<div class="after">
|
|
73
|
+
<a class="btn-ghost" href="menu.html">再来一单</a>
|
|
74
|
+
<button class="btn-ghost">开发票</button>
|
|
75
|
+
</div>
|
|
76
|
+
</main>
|
|
77
|
+
<nav class="mp-tabbar" aria-label="主导航">
|
|
78
|
+
<a href="menu.html"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 11.5h17a8.5 8.5 0 0 1-17 0z"/><path d="M9 20.5h6"/><path d="M12.5 3.5l-2.5 8M18.5 4l-4.5 7.5"/></svg><span>点单</span></a>
|
|
79
|
+
<a class="on" href="order.html" aria-current="page"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3.5h12v17l-2.4-1.5-2.4 1.5-2.4-1.5-2.4 1.5L6 20.5z"/><path d="M9 8.5h6M9 12.5h6M9 16h3"/></svg><span>订单</span></a>
|
|
80
|
+
<span class="tab"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20.5c1.3-3.8 4.1-5.6 7.5-5.6s6.2 1.8 7.5 5.6"/></svg><span>我的</span></span>
|
|
81
|
+
</nav>
|
|
82
|
+
|
|
83
|
+
<style>
|
|
84
|
+
.order-page .mp-page { padding-top: 8px; padding-bottom: 116px; }
|
|
85
|
+
.tabs { display: flex; gap: 24px; margin-bottom: 8px; }
|
|
86
|
+
.tab-btn { position: relative; height: 44px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-body); color: var(--color-muted); }
|
|
87
|
+
.tab-btn b { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); line-height: 16px; text-align: center; }
|
|
88
|
+
.tab-btn.on { color: var(--color-text); font-weight: 600; }
|
|
89
|
+
.tab-btn.on::after { content: ""; position: absolute; left: 2px; right: 22px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--color-primary); transform: rotate(-1.5deg); }
|
|
90
|
+
|
|
91
|
+
.ticket { position: relative; padding: 18px 20px 16px; border-radius: var(--radius-hand); background: var(--color-surface); box-shadow: var(--shadow); overflow: hidden; }
|
|
92
|
+
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: radial-gradient(circle at 9px 0, var(--color-bg) 5px, transparent 5.6px) 0 0 / 18px 7px repeat-x; }
|
|
93
|
+
.ticket-top { display: flex; align-items: center; gap: 8px; }
|
|
94
|
+
.ticket-label { font-size: var(--text-md); color: var(--color-muted); }
|
|
95
|
+
.state { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-deep); font-size: var(--text-sm); font-weight: 600; }
|
|
96
|
+
.pickup { margin-top: 6px; font-size: var(--text-hero); line-height: 1.12; font-weight: 700; letter-spacing: .02em; color: var(--color-text); }
|
|
97
|
+
.ticket-sub { margin-top: 4px; font-size: var(--text-md); color: var(--color-muted); }
|
|
98
|
+
.big-bowl { position: absolute; right: 10px; top: 22px; width: 124px; height: 116px; }
|
|
99
|
+
.eta { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--color-bg); }
|
|
100
|
+
.eta .ico { color: var(--color-primary); }
|
|
101
|
+
.eta p { font-size: var(--text-md); line-height: 1.35; }
|
|
102
|
+
.eta b { font-size: var(--text-xl); color: var(--color-primary); }
|
|
103
|
+
.eta span { display: block; font-size: var(--text-sm); color: var(--color-muted); }
|
|
104
|
+
|
|
105
|
+
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
|
|
106
|
+
.steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 13px; border-top: 2px dashed var(--color-line); }
|
|
107
|
+
.steps::after { content: ""; position: absolute; left: 12.5%; width: 50%; top: 13px; border-top: 2px solid var(--color-accent); }
|
|
108
|
+
.steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
|
|
109
|
+
.steps i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); border: 2px dashed var(--color-line); margin-bottom: 4px; }
|
|
110
|
+
.steps .ico { width: 16px; height: 16px; stroke-width: 2.6; }
|
|
111
|
+
.steps .done i { background: var(--color-accent); border: 0; color: var(--color-on-primary); }
|
|
112
|
+
.steps .now i { background: var(--color-primary); border: 0; box-shadow: 0 0 0 5px var(--color-primary-soft); }
|
|
113
|
+
.steps .now i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-surface); }
|
|
114
|
+
.steps b { font-size: var(--text-sm); font-weight: 600; }
|
|
115
|
+
.steps span { font-size: var(--text-xs); color: var(--color-muted); }
|
|
116
|
+
.steps .now b { color: var(--color-primary); }
|
|
117
|
+
.steps li:not(.done):not(.now) b { color: var(--color-muted); font-weight: 400; }
|
|
118
|
+
|
|
119
|
+
.detail { margin-top: 12px; }
|
|
120
|
+
.shopname { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--color-muted); }
|
|
121
|
+
.row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: var(--text-md); }
|
|
122
|
+
.row > div, .row > p { flex: 1; min-width: 0; }
|
|
123
|
+
.row > div small { display: block; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.3; }
|
|
124
|
+
.row .x { color: var(--color-muted); }
|
|
125
|
+
.row .num { min-width: 36px; text-align: right; }
|
|
126
|
+
.row .minus { color: var(--color-primary-deep); font-weight: 600; }
|
|
127
|
+
.paid p { font-weight: 600; }
|
|
128
|
+
.paid .price { font-size: var(--text-xl); }
|
|
129
|
+
|
|
130
|
+
.info p { display: flex; gap: 16px; font-size: var(--text-md); line-height: 1.5; padding: 4px 0; }
|
|
131
|
+
.info p > span:first-child { flex-shrink: 0; width: 56px; color: var(--color-muted); }
|
|
132
|
+
.after { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
|
|
133
|
+
</style>
|
|
134
|
+
</body>
|
|
135
|
+
</html>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* 巷口面馆 · 设计变量（温暖手作） */
|
|
2
|
+
:root {
|
|
3
|
+
--color-bg: #F6EFE6;
|
|
4
|
+
--color-surface: #FFF9F2;
|
|
5
|
+
--color-paper: #EFE4D6;
|
|
6
|
+
--color-text: #2B1D14;
|
|
7
|
+
--color-muted: #6E5A4B;
|
|
8
|
+
--color-line: #E7D9C8;
|
|
9
|
+
--color-primary: #A9542A;
|
|
10
|
+
--color-primary-deep: #8C4321;
|
|
11
|
+
--color-primary-soft: #F4DFD0;
|
|
12
|
+
--color-on-primary: #FFFFFF;
|
|
13
|
+
--color-accent: #5E7A4A;
|
|
14
|
+
--color-accent-soft: #E4EAD8;
|
|
15
|
+
--color-link: #52703F;
|
|
16
|
+
|
|
17
|
+
--font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
|
|
18
|
+
--font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
19
|
+
|
|
20
|
+
--text-xs: 10px;
|
|
21
|
+
--text-sm: 12px;
|
|
22
|
+
--text-md: 14px;
|
|
23
|
+
--text-body: 15px;
|
|
24
|
+
--text-lg: 17px;
|
|
25
|
+
--text-xl: 20px;
|
|
26
|
+
--text-hero: 64px;
|
|
27
|
+
|
|
28
|
+
--space-1: 4px;
|
|
29
|
+
--space-2: 8px;
|
|
30
|
+
--space-3: 12px;
|
|
31
|
+
--space-4: 16px;
|
|
32
|
+
--space-5: 20px;
|
|
33
|
+
--space-6: 24px;
|
|
34
|
+
|
|
35
|
+
--radius-sm: 10px;
|
|
36
|
+
--radius-md: 16px;
|
|
37
|
+
--radius-lg: 20px;
|
|
38
|
+
--radius-full: 999px;
|
|
39
|
+
--radius-hand: 18px 14px 19px 15px / 15px 19px 14px 18px;
|
|
40
|
+
|
|
41
|
+
--shadow: 0 8px 24px rgba(120, 72, 30, .12);
|
|
42
|
+
--shadow-sm: 0 2px 8px rgba(120, 72, 30, .10);
|
|
43
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"format": 1,
|
|
3
|
+
"type": "template",
|
|
4
|
+
"title": { "zh": "秋日上新", "en": "Autumn Drop" },
|
|
5
|
+
"description": {
|
|
6
|
+
"zh": "服装店的秋季上新促销邮件：红橙头图、金黄锯齿优惠券、倒计时、四件商品网格和通栏主按钮，表格布局、内联样式",
|
|
7
|
+
"en": "An autumn new-arrivals sale email for a clothing shop: red-orange hero, gold notched coupons, countdown, four-product grid and a full-width button, built with tables and inline styles"
|
|
8
|
+
},
|
|
9
|
+
"kind": "email",
|
|
10
|
+
"screens": [
|
|
11
|
+
{ "file": "email.html", "title": { "zh": "上新邮件", "en": "Sale email" } }
|
|
12
|
+
],
|
|
13
|
+
"style": "sale",
|
|
14
|
+
"categories": ["retail"],
|
|
15
|
+
"tags": ["sale", "newsletter"],
|
|
16
|
+
"lang": "zh",
|
|
17
|
+
"license": "CC0-1.0",
|
|
18
|
+
"author": { "login": "orderg-x", "id": 271418316 },
|
|
19
|
+
"ai": { "generated": true, "tool": "dsh-design-studio@0.11.0" }
|
|
20
|
+
}
|
|
@@ -0,0 +1,268 @@
|
|
|
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="email">
|
|
7
|
+
<title>上新邮件 · 秋栗衣铺</title>
|
|
8
|
+
<style>
|
|
9
|
+
@media (max-width: 620px) {
|
|
10
|
+
.w100 { width: 100% !important; }
|
|
11
|
+
.stack { display: block !important; width: 100% !important; }
|
|
12
|
+
.px { padding-left: 20px !important; padding-right: 20px !important; }
|
|
13
|
+
}
|
|
14
|
+
</style>
|
|
15
|
+
</head>
|
|
16
|
+
<body style="margin:0;padding:0;background:#FFF5F0;">
|
|
17
|
+
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">满 399 减 80 的券已经放进你的账户，秋季新品 8 折起，只到 11 月 9 日。</div>
|
|
18
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#FFF5F0;">
|
|
19
|
+
<tr><td align="center" style="padding:20px 0 32px;">
|
|
20
|
+
|
|
21
|
+
<table role="presentation" class="w100" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:600px;background:#FFFFFF;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(207,46,14,.12);font-family:'PingFang SC','HarmonyOS Sans SC','微软雅黑',Arial,sans-serif;color:#1F1A17;">
|
|
22
|
+
|
|
23
|
+
<tr><td class="px" style="padding:16px 32px;">
|
|
24
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
|
|
25
|
+
<td style="vertical-align:middle;">
|
|
26
|
+
<svg width="32" height="32" viewBox="0 0 32 32" role="img" aria-label="秋栗衣铺" style="vertical-align:middle;"><circle cx="16" cy="16" r="16" fill="#CF2E0E"/><path d="M16 7C11 11 10 17 13 22C14 24 16 25 16 25S18 24 19 22C22 17 21 11 16 7Z" fill="#FFB800"/><path d="M16 11V25" stroke="#CF2E0E" stroke-width="1.6" stroke-linecap="round"/></svg>
|
|
27
|
+
<span style="vertical-align:middle;margin-left:8px;font-size:16px;font-weight:700;letter-spacing:.16em;">秋栗衣铺</span>
|
|
28
|
+
</td>
|
|
29
|
+
<td align="right" style="vertical-align:middle;font-size:14px;color:#6B5E57;">
|
|
30
|
+
<a href="#" style="display:inline-block;padding:6px 4px;line-height:20px;color:#6B5E57;text-decoration:none;">新品</a>
|
|
31
|
+
<a href="#" style="display:inline-block;padding:6px 4px;margin-left:8px;line-height:20px;color:#6B5E57;text-decoration:none;">女装</a>
|
|
32
|
+
<a href="#" style="display:inline-block;padding:6px 4px;margin-left:8px;line-height:20px;color:#6B5E57;text-decoration:none;">男装</a>
|
|
33
|
+
<a href="#" style="display:inline-block;padding:6px 4px;margin-left:8px;line-height:20px;color:#6B5E57;text-decoration:none;">配饰</a>
|
|
34
|
+
</td>
|
|
35
|
+
</tr></table>
|
|
36
|
+
</td></tr>
|
|
37
|
+
|
|
38
|
+
<tr><td style="background:#CF2E0E;">
|
|
39
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
|
|
40
|
+
<td class="stack px" style="width:318px;padding:40px 0 36px 32px;vertical-align:top;">
|
|
41
|
+
<span style="display:inline-block;padding:4px 12px;border-radius:999px;background:#FFB800;color:#1F1A17;font-size:14px;font-weight:700;line-height:20px;">限时 72 小时 · 11.07 – 11.09</span>
|
|
42
|
+
<h1 style="margin:16px 0 8px;font-size:56px;line-height:1.1;font-weight:900;letter-spacing:.02em;color:#FFFFFF;">秋日上新</h1>
|
|
43
|
+
<p style="margin:0;font-size:16px;line-height:1.6;color:#FFFFFF;">大衣、毛衣、灯芯绒都到了。<br>新品 <b style="font-size:24px;color:#FFB800;">8</b> 折起，满 399 再减 80。</p>
|
|
44
|
+
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:24px;"><tr>
|
|
45
|
+
<td style="padding:0 16px 0 0;font-size:14px;line-height:20px;color:#FFFFFF;"><b style="font-size:24px;line-height:28px;display:block;">36</b>款新品</td>
|
|
46
|
+
<td style="padding:0 16px;border-left:1px solid rgba(255,255,255,.35);font-size:14px;line-height:20px;color:#FFFFFF;"><b style="font-size:24px;line-height:28px;display:block;">0 元</b>全场运费</td>
|
|
47
|
+
<td style="padding:0 0 0 16px;border-left:1px solid rgba(255,255,255,.35);font-size:14px;line-height:20px;color:#FFFFFF;"><b style="font-size:24px;line-height:28px;display:block;">7 天</b>无理由退换</td>
|
|
48
|
+
</tr></table>
|
|
49
|
+
</td>
|
|
50
|
+
<td class="stack" align="right" style="vertical-align:bottom;">
|
|
51
|
+
<svg width="282" height="300" viewBox="0 0 282 300" role="img" aria-label="衣架上挂着驼色大衣和姜黄毛衣，枫叶飘落" style="display:block;">
|
|
52
|
+
<defs>
|
|
53
|
+
<symbol id="maple" viewBox="0 0 40 44"><path d="M20 2L24 12L32 8L29 18L38 18L31 25L34 30L24 29L22 37L20 33L18 37L16 29L6 30L9 25L2 18L11 18L8 8L16 12Z"/><path d="M20 33V43" stroke="currentColor" stroke-width="2" fill="none"/></symbol>
|
|
54
|
+
</defs>
|
|
55
|
+
<circle cx="200" cy="120" r="132" fill="#DA4220"/>
|
|
56
|
+
<circle cx="200" cy="120" r="92" fill="#E2552B"/>
|
|
57
|
+
<path d="M40 34H282" stroke="#8F1E07" stroke-width="6" stroke-linecap="round"/>
|
|
58
|
+
<path d="M60 34V300" stroke="#8F1E07" stroke-width="6"/>
|
|
59
|
+
<g transform="translate(92 34)">
|
|
60
|
+
<path d="M44 0C44 -10 54 -10 54 0M49 0V12L12 30H86L49 12" fill="none" stroke="#FFD9CB" stroke-width="3" stroke-linejoin="round"/>
|
|
61
|
+
<path d="M28 28Q49 36 70 28L88 42L94 222H4L10 42Z" fill="#E7B47E"/>
|
|
62
|
+
<path d="M10 42L-6 56L-12 196H6L14 92Z" fill="#D29B63"/>
|
|
63
|
+
<path d="M88 42L104 56L110 196H92L84 92Z" fill="#D29B63"/>
|
|
64
|
+
<path d="M32 30L49 104L66 30Q49 38 32 30Z" fill="#F7EBDD"/>
|
|
65
|
+
<path d="M30 30L49 108L40 82L22 38Z" fill="#C88B55"/>
|
|
66
|
+
<path d="M68 30L49 108L58 82L76 38Z" fill="#C88B55"/>
|
|
67
|
+
<circle cx="49" cy="132" r="3.5" fill="#7A4A26"/><circle cx="49" cy="158" r="3.5" fill="#7A4A26"/>
|
|
68
|
+
<path d="M18 160H38M60 160H80" stroke="#A86F3E" stroke-width="2.5" stroke-linecap="round"/>
|
|
69
|
+
</g>
|
|
70
|
+
<g transform="translate(176 34)">
|
|
71
|
+
<path d="M44 0C44 -10 54 -10 54 0M49 0V12L14 28H84L49 12" fill="none" stroke="#FFD9CB" stroke-width="3" stroke-linejoin="round"/>
|
|
72
|
+
<path d="M30 26Q49 36 68 26L92 38L104 150L88 154L80 74V176H18V74L10 154L-6 150L6 38Z" fill="#F2B233"/>
|
|
73
|
+
<path d="M34 28Q49 40 64 28" fill="none" stroke="#D9951A" stroke-width="5" stroke-linecap="round"/>
|
|
74
|
+
<path d="M40 46C34 58 46 66 40 78S46 98 40 110 46 130 40 142M58 46C64 58 52 66 58 78S52 98 58 110 52 130 58 142" fill="none" stroke="#D9951A" stroke-width="3" stroke-linecap="round"/>
|
|
75
|
+
<path d="M18 164H80" stroke="#D9951A" stroke-width="10"/>
|
|
76
|
+
<path d="M26 160V170M36 160V170M46 160V170M56 160V170M66 160V170M76 160V170" stroke="#F2B233" stroke-width="2"/>
|
|
77
|
+
</g>
|
|
78
|
+
<g fill="#FFB800" color="#FFB800">
|
|
79
|
+
<use href="#maple" x="8" y="80" width="30" height="33" transform="rotate(-18 23 96)"/>
|
|
80
|
+
<use href="#maple" x="112" y="246" width="26" height="29" transform="rotate(24 125 260)"/>
|
|
81
|
+
</g>
|
|
82
|
+
<g fill="#FF9A5C" color="#FF9A5C">
|
|
83
|
+
<use href="#maple" x="20" y="196" width="22" height="24" transform="rotate(30 31 208)"/>
|
|
84
|
+
<use href="#maple" x="244" y="232" width="28" height="31" transform="rotate(-30 258 248)"/>
|
|
85
|
+
</g>
|
|
86
|
+
</svg>
|
|
87
|
+
</td>
|
|
88
|
+
</tr></table>
|
|
89
|
+
</td></tr>
|
|
90
|
+
|
|
91
|
+
<tr><td class="px" style="padding:32px 32px 8px;">
|
|
92
|
+
<h2 style="margin:0;font-size:24px;line-height:1.3;font-weight:700;">2 张券已到账</h2>
|
|
93
|
+
<p style="margin:4px 0 0;font-size:14px;line-height:1.6;color:#6B5E57;">结账时自动抵扣，可以和新品 8 折一起用</p>
|
|
94
|
+
</td></tr>
|
|
95
|
+
<tr><td class="px" style="padding:16px 32px 8px;">
|
|
96
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
|
|
97
|
+
<td class="stack" style="width:50%;padding:0 8px 0 0;">
|
|
98
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-radius:8px;overflow:hidden;"><tr>
|
|
99
|
+
<td style="width:8px;background-color:#FFB800;background-image:radial-gradient(circle at 0 6px,#FFFFFF 4.5px,transparent 5px);background-size:8px 12px;background-repeat:repeat-y;"></td>
|
|
100
|
+
<td style="background:#FFB800;padding:16px 4px 16px 10px;vertical-align:middle;white-space:nowrap;">
|
|
101
|
+
<span style="font-size:24px;font-weight:800;color:#A3200A;vertical-align:4px;">¥</span><span style="font-size:40px;line-height:44px;font-weight:900;color:#A3200A;letter-spacing:-.02em;">80</span>
|
|
102
|
+
</td>
|
|
103
|
+
<td style="background:#FFB800;padding:16px 8px;vertical-align:middle;font-size:14px;line-height:20px;">
|
|
104
|
+
<b style="display:block;font-size:16px;line-height:24px;">满 399 可用</b>全场通用
|
|
105
|
+
</td>
|
|
106
|
+
<td style="width:44px;background:#F5A800;border-left:2px dashed rgba(31,26,23,.35);text-align:center;vertical-align:middle;padding:8px 0;">
|
|
107
|
+
<a href="#" style="display:inline-block;padding:6px 7px;writing-mode:vertical-rl;letter-spacing:2px;font-size:14px;line-height:18px;font-weight:700;color:#1F1A17;text-decoration:none;">去使用</a>
|
|
108
|
+
</td>
|
|
109
|
+
<td style="width:8px;background-color:#F5A800;background-image:radial-gradient(circle at 100% 6px,#FFFFFF 4.5px,transparent 5px);background-size:8px 12px;background-repeat:repeat-y;"></td>
|
|
110
|
+
</tr></table>
|
|
111
|
+
</td>
|
|
112
|
+
<td class="stack" style="width:50%;padding:0 0 0 8px;">
|
|
113
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-radius:8px;overflow:hidden;"><tr>
|
|
114
|
+
<td style="width:8px;background-color:#FFB800;background-image:radial-gradient(circle at 0 6px,#FFFFFF 4.5px,transparent 5px);background-size:8px 12px;background-repeat:repeat-y;"></td>
|
|
115
|
+
<td style="background:#FFB800;padding:16px 4px 16px 10px;vertical-align:middle;white-space:nowrap;">
|
|
116
|
+
<span style="font-size:24px;font-weight:800;color:#A3200A;vertical-align:4px;">¥</span><span style="font-size:40px;line-height:44px;font-weight:900;color:#A3200A;letter-spacing:-.02em;">30</span>
|
|
117
|
+
</td>
|
|
118
|
+
<td style="background:#FFB800;padding:16px 8px;vertical-align:middle;font-size:14px;line-height:20px;">
|
|
119
|
+
<b style="display:block;font-size:16px;line-height:24px;">满 199 可用</b>毛衣专区
|
|
120
|
+
</td>
|
|
121
|
+
<td style="width:44px;background:#F5A800;border-left:2px dashed rgba(31,26,23,.35);text-align:center;vertical-align:middle;padding:8px 0;">
|
|
122
|
+
<a href="#" style="display:inline-block;padding:6px 7px;writing-mode:vertical-rl;letter-spacing:2px;font-size:14px;line-height:18px;font-weight:700;color:#1F1A17;text-decoration:none;">去使用</a>
|
|
123
|
+
</td>
|
|
124
|
+
<td style="width:8px;background-color:#F5A800;background-image:radial-gradient(circle at 100% 6px,#FFFFFF 4.5px,transparent 5px);background-size:8px 12px;background-repeat:repeat-y;"></td>
|
|
125
|
+
</tr></table>
|
|
126
|
+
</td>
|
|
127
|
+
</tr></table>
|
|
128
|
+
</td></tr>
|
|
129
|
+
|
|
130
|
+
<tr><td class="px" style="padding:24px 32px 8px;">
|
|
131
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#FFF5F0;border-radius:12px;"><tr>
|
|
132
|
+
<td style="padding:16px 20px;vertical-align:middle;">
|
|
133
|
+
<b style="display:block;font-size:16px;line-height:24px;color:#CF2E0E;">距活动结束还有</b>
|
|
134
|
+
<span style="font-size:14px;line-height:20px;color:#6B5E57;">11 月 9 日 24:00 恢复原价</span>
|
|
135
|
+
</td>
|
|
136
|
+
<td align="right" style="padding:16px 20px;vertical-align:middle;white-space:nowrap;">
|
|
137
|
+
<span style="display:inline-block;min-width:44px;padding:8px 0;border-radius:8px;background:#1F1A17;color:#FFFFFF;font-size:28px;line-height:32px;font-weight:800;text-align:center;">02</span><span style="display:inline-block;padding:0 6px;font-size:14px;color:#6B5E57;">天</span><span style="display:inline-block;min-width:44px;padding:8px 0;border-radius:8px;background:#1F1A17;color:#FFFFFF;font-size:28px;line-height:32px;font-weight:800;text-align:center;">23</span><span style="display:inline-block;padding:0 6px;font-size:14px;color:#6B5E57;">时</span><span style="display:inline-block;min-width:44px;padding:8px 0;border-radius:8px;background:#1F1A17;color:#FFFFFF;font-size:28px;line-height:32px;font-weight:800;text-align:center;">59</span><span style="display:inline-block;padding:0 6px;font-size:14px;color:#6B5E57;">分</span><span style="display:inline-block;min-width:44px;padding:8px 0;border-radius:8px;background:#CF2E0E;color:#FFFFFF;font-size:28px;line-height:32px;font-weight:800;text-align:center;">42</span><span style="display:inline-block;padding:0 0 0 6px;font-size:14px;color:#6B5E57;">秒</span>
|
|
138
|
+
</td>
|
|
139
|
+
</tr></table>
|
|
140
|
+
</td></tr>
|
|
141
|
+
|
|
142
|
+
<tr><td class="px" style="padding:32px 32px 16px;">
|
|
143
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
|
|
144
|
+
<td><h2 style="margin:0;font-size:24px;line-height:1.3;font-weight:700;">本周新品</h2></td>
|
|
145
|
+
<td align="right"><a href="#" style="display:inline-block;padding:6px 0;line-height:20px;font-size:14px;color:#C2290B;text-decoration:none;font-weight:600;">查看全部 36 款 ›</a></td>
|
|
146
|
+
</tr></table>
|
|
147
|
+
</td></tr>
|
|
148
|
+
|
|
149
|
+
<tr><td class="px" style="padding:0 32px;">
|
|
150
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
151
|
+
<tr>
|
|
152
|
+
<td class="stack" style="width:50%;padding:0 8px 24px 0;vertical-align:top;">
|
|
153
|
+
<svg width="260" height="232" viewBox="0 0 260 232" role="img" aria-label="驼色羊毛混纺落肩大衣" style="display:block;width:100%;height:auto;border-radius:12px;">
|
|
154
|
+
<rect width="260" height="232" fill="#FBEDE4"/>
|
|
155
|
+
<circle cx="130" cy="120" r="88" fill="#F6E0D2"/>
|
|
156
|
+
<g transform="translate(81 20)">
|
|
157
|
+
<path d="M44 0C44 -9 54 -9 54 0M49 0V10L14 26H84L49 10" fill="none" stroke="#B9A79B" stroke-width="2.5" stroke-linejoin="round"/>
|
|
158
|
+
<path d="M28 24Q49 32 70 24L88 38L94 196H4L10 38Z" fill="#C8935A"/>
|
|
159
|
+
<path d="M10 38L-6 52L-12 176H6L14 86Z" fill="#B47F4A"/>
|
|
160
|
+
<path d="M88 38L104 52L110 176H92L84 86Z" fill="#B47F4A"/>
|
|
161
|
+
<path d="M32 26L49 96L66 26Q49 34 32 26Z" fill="#F4E9DC"/>
|
|
162
|
+
<path d="M30 26L49 100L40 76L22 34Z" fill="#A87140"/>
|
|
163
|
+
<path d="M68 26L49 100L58 76L76 34Z" fill="#A87140"/>
|
|
164
|
+
<circle cx="49" cy="120" r="3.5" fill="#5E381B"/><circle cx="49" cy="144" r="3.5" fill="#5E381B"/>
|
|
165
|
+
<path d="M18 146H38M60 146H80" stroke="#8E5A2E" stroke-width="2.5" stroke-linecap="round"/>
|
|
166
|
+
</g>
|
|
167
|
+
</svg>
|
|
168
|
+
<p style="margin:12px 0 4px;"><span style="display:inline-block;padding:0 8px;border-radius:4px;background:#CF2E0E;color:#FFFFFF;font-size:12px;line-height:20px;font-weight:700;">新品</span> <span style="display:inline-block;padding:0 8px;border-radius:4px;background:#FFF5F0;color:#C2290B;font-size:12px;line-height:20px;font-weight:700;">包邮</span></p>
|
|
169
|
+
<a href="#" style="display:block;font-size:16px;line-height:24px;color:#1F1A17;text-decoration:none;">羊毛混纺落肩大衣 · 驼色</a>
|
|
170
|
+
<p style="margin:4px 0 0;white-space:nowrap;"><b style="font-size:24px;line-height:28px;color:#CF2E0E;">¥479</b> <s style="font-size:14px;color:#6B5E57;">¥599</s></p>
|
|
171
|
+
</td>
|
|
172
|
+
<td class="stack" style="width:50%;padding:0 0 24px 8px;vertical-align:top;">
|
|
173
|
+
<svg width="260" height="232" viewBox="0 0 260 232" role="img" aria-label="姜黄色粗针麻花毛衣" style="display:block;width:100%;height:auto;border-radius:12px;">
|
|
174
|
+
<rect width="260" height="232" fill="#FDF1DC"/>
|
|
175
|
+
<circle cx="130" cy="120" r="88" fill="#FBE7C2"/>
|
|
176
|
+
<g transform="translate(81 34)">
|
|
177
|
+
<path d="M30 0Q49 12 68 0L94 12L118 118L98 124L82 52V164H16V52L0 124L-20 118L4 12Z" fill="#E0A526"/>
|
|
178
|
+
<path d="M32 2Q49 16 66 2" fill="none" stroke="#B9830F" stroke-width="6" stroke-linecap="round"/>
|
|
179
|
+
<path d="M40 22C34 34 46 42 40 54S46 74 40 86 46 106 40 118 46 138 40 148M58 22C64 34 52 42 58 54S52 74 58 86 52 106 58 118 52 138 58 148" fill="none" stroke="#B9830F" stroke-width="3" stroke-linecap="round"/>
|
|
180
|
+
<path d="M16 156H82" stroke="#C48D17" stroke-width="12"/>
|
|
181
|
+
<path d="M24 150V162M34 150V162M44 150V162M54 150V162M64 150V162M74 150V162" stroke="#E0A526" stroke-width="2"/>
|
|
182
|
+
<path d="M-20 118L0 124" stroke="#C48D17" stroke-width="8" stroke-linecap="round"/>
|
|
183
|
+
<path d="M98 124L118 118" stroke="#C48D17" stroke-width="8" stroke-linecap="round"/>
|
|
184
|
+
</g>
|
|
185
|
+
</svg>
|
|
186
|
+
<p style="margin:12px 0 4px;"><span style="display:inline-block;padding:0 8px;border-radius:4px;background:#FFB800;color:#1F1A17;font-size:12px;line-height:20px;font-weight:700;">限时</span> <span style="display:inline-block;padding:0 8px;border-radius:4px;background:#FFF5F0;color:#C2290B;font-size:12px;line-height:20px;font-weight:700;">包邮</span></p>
|
|
187
|
+
<a href="#" style="display:block;font-size:16px;line-height:24px;color:#1F1A17;text-decoration:none;">粗针麻花毛衣 · 姜黄</a>
|
|
188
|
+
<p style="margin:4px 0 0;white-space:nowrap;"><b style="font-size:24px;line-height:28px;color:#CF2E0E;">¥239</b> <s style="font-size:14px;color:#6B5E57;">¥299</s></p>
|
|
189
|
+
</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td class="stack" style="width:50%;padding:0 8px 24px 0;vertical-align:top;">
|
|
193
|
+
<svg width="260" height="232" viewBox="0 0 260 232" role="img" aria-label="咖啡色灯芯绒直筒裤" style="display:block;width:100%;height:auto;border-radius:12px;">
|
|
194
|
+
<defs><pattern id="cord" width="6" height="12" patternUnits="userSpaceOnUse"><rect width="6" height="12" fill="#7B5136"/><rect width="2" height="12" fill="#6A442C"/></pattern></defs>
|
|
195
|
+
<rect width="260" height="232" fill="#F7ECE4"/>
|
|
196
|
+
<circle cx="130" cy="120" r="88" fill="#F0DDD0"/>
|
|
197
|
+
<g transform="translate(84 18)">
|
|
198
|
+
<path d="M2 14H90L100 196H56L46 66L36 196H-8Z" fill="url(#cord)"/>
|
|
199
|
+
<rect x="2" y="2" width="88" height="16" rx="2" fill="#6A442C"/>
|
|
200
|
+
<path d="M14 2V18M32 2V18M60 2V18M78 2V18" stroke="#553521" stroke-width="3"/>
|
|
201
|
+
<circle cx="46" cy="10" r="3.5" fill="#D8B89A"/>
|
|
202
|
+
<path d="M46 18V60" stroke="#553521" stroke-width="2"/>
|
|
203
|
+
<path d="M6 22C16 30 22 40 24 50M86 22C76 30 70 40 68 50" fill="none" stroke="#553521" stroke-width="2.5" stroke-linecap="round"/>
|
|
204
|
+
<path d="M-6 184H36M56 184H98" stroke="#553521" stroke-width="2"/>
|
|
205
|
+
</g>
|
|
206
|
+
</svg>
|
|
207
|
+
<p style="margin:12px 0 4px;"><span style="display:inline-block;padding:0 8px;border-radius:4px;background:#CF2E0E;color:#FFFFFF;font-size:12px;line-height:20px;font-weight:700;">新品</span> <span style="display:inline-block;padding:0 8px;border-radius:4px;background:#FFF5F0;color:#C2290B;font-size:12px;line-height:20px;font-weight:700;">仅剩 46 件</span></p>
|
|
208
|
+
<a href="#" style="display:block;font-size:16px;line-height:24px;color:#1F1A17;text-decoration:none;">灯芯绒直筒裤 · 咖啡</a>
|
|
209
|
+
<p style="margin:4px 0 0;white-space:nowrap;"><b style="font-size:24px;line-height:28px;color:#CF2E0E;">¥199</b> <s style="font-size:14px;color:#6B5E57;">¥249</s></p>
|
|
210
|
+
</td>
|
|
211
|
+
<td class="stack" style="width:50%;padding:0 0 24px 8px;vertical-align:top;">
|
|
212
|
+
<svg width="260" height="232" viewBox="0 0 260 232" role="img" aria-label="酒红格纹羊绒围巾" style="display:block;width:100%;height:auto;border-radius:12px;">
|
|
213
|
+
<defs><pattern id="plaid" width="28" height="28" patternUnits="userSpaceOnUse"><rect width="28" height="28" fill="#9E2B2B"/><rect y="10" width="28" height="8" fill="#7E1F22" opacity=".8"/><rect x="10" width="8" height="28" fill="#7E1F22" opacity=".6"/><rect y="13" width="28" height="2" fill="#E8B04A" opacity=".8"/><rect x="13" width="2" height="28" fill="#E8B04A" opacity=".6"/></pattern></defs>
|
|
214
|
+
<rect width="260" height="232" fill="#FBEBEA"/>
|
|
215
|
+
<circle cx="130" cy="120" r="88" fill="#F6DCDA"/>
|
|
216
|
+
<path d="M74 54C74 30 186 30 186 54C186 74 160 82 130 82S74 74 74 54Z" fill="none" stroke="url(#plaid)" stroke-width="26"/>
|
|
217
|
+
<path d="M96 70L82 188H122L128 78Z" fill="url(#plaid)"/>
|
|
218
|
+
<path d="M134 78L146 200H184L160 68Z" fill="url(#plaid)"/>
|
|
219
|
+
<path d="M84 192V204M92 192V205M100 192V205M108 192V205M116 192V204M148 204V216M156 204V217M164 204V217M172 204V217M180 204V216" stroke="#9E2B2B" stroke-width="3" stroke-linecap="round"/>
|
|
220
|
+
</svg>
|
|
221
|
+
<p style="margin:12px 0 4px;"><span style="display:inline-block;padding:0 8px;border-radius:4px;background:#FFB800;color:#1F1A17;font-size:12px;line-height:20px;font-weight:700;">限时</span> <span style="display:inline-block;padding:0 8px;border-radius:4px;background:#FFF5F0;color:#C2290B;font-size:12px;line-height:20px;font-weight:700;">送礼盒</span></p>
|
|
222
|
+
<a href="#" style="display:block;font-size:16px;line-height:24px;color:#1F1A17;text-decoration:none;">格纹羊绒围巾 · 酒红</a>
|
|
223
|
+
<p style="margin:4px 0 0;white-space:nowrap;"><b style="font-size:24px;line-height:28px;color:#CF2E0E;">¥159</b> <s style="font-size:14px;color:#6B5E57;">¥199</s></p>
|
|
224
|
+
</td>
|
|
225
|
+
</tr>
|
|
226
|
+
</table>
|
|
227
|
+
</td></tr>
|
|
228
|
+
|
|
229
|
+
<tr><td class="px" style="padding:0 32px 8px;">
|
|
230
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
|
|
231
|
+
<td align="center" style="background:#CF2E0E;border-radius:12px;box-shadow:0 4px 12px rgba(207,46,14,.24);">
|
|
232
|
+
<a href="#" style="display:block;padding:16px 0;font-size:16px;line-height:24px;font-weight:700;color:#FFFFFF;text-decoration:none;letter-spacing:.08em;">立即选购 · 新品 8 折起</a>
|
|
233
|
+
</td>
|
|
234
|
+
</tr></table>
|
|
235
|
+
<p style="margin:12px 0 0;text-align:center;font-size:14px;line-height:20px;color:#6B5E57;">券和折扣自动叠加，结账时直接显示最低价</p>
|
|
236
|
+
</td></tr>
|
|
237
|
+
|
|
238
|
+
<tr><td class="px" style="padding:24px 32px 32px;">
|
|
239
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #F5DDD2;"><tr>
|
|
240
|
+
<td align="center" style="width:33%;padding:20px 4px 0;font-size:14px;line-height:20px;color:#6B5E57;">
|
|
241
|
+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#CF2E0E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:block;margin:0 auto 8px;"><path d="M3 6H14V16H3Z"/><path d="M14 9H18L21 12V16H14"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg>
|
|
242
|
+
全场包邮
|
|
243
|
+
</td>
|
|
244
|
+
<td align="center" style="width:34%;padding:20px 4px 0;font-size:14px;line-height:20px;color:#6B5E57;">
|
|
245
|
+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#CF2E0E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:block;margin:0 auto 8px;"><path d="M4 12A8 8 0 1 0 7 5.8"/><path d="M4 4V9H9"/></svg>
|
|
246
|
+
7 天无理由退换
|
|
247
|
+
</td>
|
|
248
|
+
<td align="center" style="width:33%;padding:20px 4px 0;font-size:14px;line-height:20px;color:#6B5E57;">
|
|
249
|
+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#CF2E0E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:block;margin:0 auto 8px;"><path d="M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"/><path d="M4 7.5L12 12L20 7.5M12 12V21"/></svg>
|
|
250
|
+
48 小时内发货
|
|
251
|
+
</td>
|
|
252
|
+
</tr></table>
|
|
253
|
+
</td></tr>
|
|
254
|
+
|
|
255
|
+
<tr><td class="px" style="padding:24px 32px 28px;background:#FFF5F0;font-size:12px;line-height:20px;color:#6B5E57;text-align:center;">
|
|
256
|
+
<p style="margin:0 0 4px;font-size:14px;font-weight:700;color:#1F1A17;letter-spacing:.12em;">秋栗衣铺</p>
|
|
257
|
+
<p style="margin:0;">只做好穿、耐穿的基本款</p>
|
|
258
|
+
<p style="margin:0 0 16px;">你收到这封邮件，是因为订阅了秋栗衣铺的上新提醒。</p>
|
|
259
|
+
<a href="#" style="display:inline-block;padding:4px 16px;border:1px solid #E7C9BC;border-radius:999px;color:#6B5E57;text-decoration:none;font-size:12px;line-height:20px;">退订</a>
|
|
260
|
+
<a href="#" style="display:inline-block;margin-left:8px;padding:4px 16px;border:1px solid #E7C9BC;border-radius:999px;color:#6B5E57;text-decoration:none;font-size:12px;line-height:20px;">少收一点：每月一封</a>
|
|
261
|
+
</td></tr>
|
|
262
|
+
|
|
263
|
+
</table>
|
|
264
|
+
|
|
265
|
+
</td></tr>
|
|
266
|
+
</table>
|
|
267
|
+
</body>
|
|
268
|
+
</html>
|