sundynix/sundynix-pets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fe): 引入线性图标体系，tabBar 去 emoji，清掉 172KB 死资源

Browse Source 
图标不走字体走 mask-image。Tabler 的 outline 图标是 stroke+fill:none，
字形只认填充轮廓，直接转字体会生成空字形——真机表现和「字体没加载」
一模一样，很容易往错方向排查。mask 走渲染 alpha，描边正常参与，
同样支持 currentColor 染色，没有这个坑。

- styles/iconfont.wxss：38 个图标内联 base64，19.9KB
- components/pt-icon：name 支持图标名 / 记录类型 / 老数据里的 emoji，
  三层降级兜底，绝不留空白；virtualHost 避免多一层节点破坏 flex
- custom-tab-bar：🏠📅✍️📊🐾 换成图标，顺手把抄了一遍的三个色值换回 var()
- project.config.json：packOptions.ignore 排掉 preview.html、6 个候选 logo
  等 172KB 死资源，之前它们全打进包里

preview-v2.html 是设计验证页，本身也不参与打包。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
2026-07-29 10:28:48 +08:00
parent 9adafb1354
commit b4a4a4b3c0
11 changed files with 263 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pets-fe/preview-v2.html
+104
View File
@@ -0,0 +1,104 @@
<!doctype html>
<meta charset="utf-8">
<title>肉垫计划 · 设计预览 v2</title>
<!--
这是给「人和 Claude 都能看见」的设计验证页，不参与小程序打包（见 project.config.json 的 packOptions.ignore）。
换算：1px = 2rpx。这里定死 token 数值和门面版式，再翻译进 app.wxss。
-->
<style>
body{font-family:-apple-system,"PingFang SC",sans-serif;background:#F8F6F2;color:#2D2925;margin:0;padding:28px 32px 60px}
h2{font-size:17px;font-weight:600;margin:34px 0 6px}
h2:first-of-type{margin-top:0}
.hint{font-size:12px;color:#8D8277;margin:0 0 16px}
.pt-i{display:inline-block;-webkit-mask-image:var(--m);mask-image:var(--m);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;vertical-align:-.125em}
.wall{display:grid;grid-template-columns:repeat(10,1fr);gap:16px 8px;max-width:760px}
.cell{text-align:center;font-size:10px;color:#8D8277}
.cell .pt-i{font-size:20px;color:#2D2925;display:block;margin:0 auto 6px}
.sizes span{margin-right:26px}
.s16{font-size:16px}.s20{font-size:20px}.s24{font-size:24px}.s28{font-size:28px}
.tones{display:grid;grid-template-columns:repeat(4,116px);gap:12px}
.tone{border-radius:20px;padding:14px 0;text-align:center;font-size:12px}
.t1{background:#FFF4E4;color:#A96500}.t2{background:#EAF7F1;color:#2E7D5B}
.t3{background:#EEF5FF;color:#3C6EBA}.t4{background:#F4F0FF;color:#765AC5}
.tone .pt-i{font-size:24px;display:block;margin:0 auto 6px}
.dark{background:#2D2925;color:#fff;border-radius:20px;padding:13px 22px;display:inline-block;font-size:14px}
.tabbar{display:flex;max-width:375px;background:#fff;border-top:1px solid #EEE6DC;border-radius:0 0 12px 12px}
.tb{flex:1;text-align:center;padding:9px 0 12px;font-size:10px;color:#8D8277}
.tb.on{color:#DD8420}
.tb .pt-i{font-size:21px;display:block;margin:0 auto 3px}
.pt-i-weight{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik03IDIwbDEwIDAiIC8+PHBhdGggZD0iTTYgNmw2IC0xbDYgMSIgLz48cGF0aCBkPSJNMTIgM2wwIDE3IiAvPjxwYXRoIGQ9Ik05IDEybC0zIC02bC0zIDZhMyAzIDAgMCAwIDYgMCIgLz48cGF0aCBkPSJNMjEgMTJsLTMgLTZsLTMgNmEzIDMgMCAwIDAgNiAwIiAvPjwvc3ZnPg==")}
.pt-i-poop{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMCAxMmguMDEiIC8+PHBhdGggZD0iTTE0IDEyaC4wMSIgLz48cGF0aCBkPSJNMTAgMTZhMy41IDMuNSAwIDAgMCA0IDAiIC8+PHBhdGggZD0iTTExIDRjMiAwIDMuNSAxLjUgMy41IDRsLjE2NCAwYTIuNSAyLjUgMCAwIDEgMi4xOTYgMy4zMmEzIDMgMCAwIDEgMS42MTUgMy4wNjNhMyAzIDAgMCAxIC0xLjI5OSA1LjYwN2wtLjE3NiAwaC0xMGEzIDMgMCAwIDEgLTEuNDc0IC01LjYxM2EzIDMgMCAwIDEgMS42MTUgLTMuMDYyYTIuNSAyLjUgMCAwIDEgMi4xOTUgLTMuMzJsLjE2NCAwYzEuNSAwIDIuNSAtMiAxLjUgLTRsMCAuMDA1IiAvPjwvc3ZnPg==")}
.pt-i-food{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00IDExaDE2YTEgMSAwIDAgMSAxIDF2LjVjMCAxLjUgLTIuNTE3IDUuNTczIC00IDYuNXYxYTEgMSAwIDAgMSAtMSAxaC04YTEgMSAwIDAgMSAtMSAtMXYtMWMtMS42ODcgLTEuMDU0IC00IC01IC00IC02LjV2LS41YTEgMSAwIDAgMSAxIC0xIiAvPjxwYXRoIGQ9Ik04IDdjMS42NTcgMCAzIC0uODk1IDMgLTJzLTEuMzQzIC0yIC0zIC0ycy0zIC44OTUgLTMgMnMxLjM0MyAyIDMgMiIgLz48cGF0aCBkPSJNMTEgNWg5IiAvPjwvc3ZnPg==")}
.pt-i-symptom{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xOSA1YTIuODI4IDIuODI4IDAgMCAxIDAgNGwtOCA4aC00di00bDggLThhMi44MjggMi44MjggMCAwIDEgNCAwIiAvPjxwYXRoIGQ9Ik0xNiA3bC0xLjUgLTEuNSIgLz48cGF0aCBkPSJNMTMgMTBsLTEuNSAtMS41IiAvPjxwYXRoIGQ9Ik0xMCAxM2wtMS41IC0xLjUiIC8+PHBhdGggZD0iTTcgMTdsLTMgMyIgLz48L3N2Zz4=")}
.pt-i-medicine{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00LjUgMTIuNWw4IC04YTQuOTQgNC45NCAwIDAgMSA3IDdsLTggOGE0Ljk0IDQuOTQgMCAwIDEgLTcgLTciIC8+PHBhdGggZD0iTTguNSA4LjVsNyA3IiAvPjwvc3ZnPg==")}
.pt-i-cost{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0zIDEyYTkgOSAwIDEgMCAxOCAwYTkgOSAwIDEgMCAtMTggMCIgLz48cGF0aCBkPSJNOSAxM2g2IiAvPjxwYXRoIGQ9Ik05IDhsMyA0LjUiIC8+PHBhdGggZD0iTTE1IDhsLTMgNC41djQuNSIgLz48L3N2Zz4=")}
.pt-i-vaccine{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xNyAzbDQgNCIgLz48cGF0aCBkPSJNMTkgNWwtNC41IDQuNSIgLz48cGF0aCBkPSJNMTEuNSA2LjVsNiA2IiAvPjxwYXRoIGQ9Ik0xNi41IDExLjVsLTYuNSA2LjVoLTR2LTRsNi41IC02LjUiIC8+PHBhdGggZD0iTTcuNSAxMi41bDEuNSAxLjUiIC8+PHBhdGggZD0iTTEwLjUgOS41bDEuNSAxLjUiIC8+PHBhdGggZD0iTTMgMjFsMyAtMyIgLz48L3N2Zz4=")}
.pt-i-deworm{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMS40NiAyMC44NDZhMTIgMTIgMCAwIDEgLTcuOTYgLTE0Ljg0NmExMiAxMiAwIDAgMCA4LjUgLTNhMTIgMTIgMCAwIDAgOC41IDNhMTIgMTIgMCAwIDEgLS4wOSA3LjA2IiAvPjxwYXRoIGQ9Ik0xNSAxOWwyIDJsNCAtNCIgLz48L3N2Zz4=")}
.pt-i-photo{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik01IDdoMWEyIDIgMCAwIDAgMiAtMmExIDEgMCAwIDEgMSAtMWg2YTEgMSAwIDAgMSAxIDFhMiAyIDAgMCAwIDIgMmgxYTIgMiAwIDAgMSAyIDJ2OWEyIDIgMCAwIDEgLTIgMmgtMTRhMiAyIDAgMCAxIC0yIC0ydi05YTIgMiAwIDAgMSAyIC0yIiAvPjxwYXRoIGQ9Ik05IDEzYTMgMyAwIDEgMCA2IDBhMyAzIDAgMCAwIC02IDAiIC8+PC9zdmc+")}
.pt-i-home{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik01IDEybC0yIDBsOSAtOWw5IDlsLTIgMCIgLz48cGF0aCBkPSJNNSAxMnY3YTIgMiAwIDAgMCAyIDJoMTBhMiAyIDAgMCAwIDIgLTJ2LTciIC8+PHBhdGggZD0iTTkgMjF2LTZhMiAyIDAgMCAxIDIgLTJoMmEyIDIgMCAwIDEgMiAydjYiIC8+PC9zdmc+")}
.pt-i-plan{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00IDdhMiAyIDAgMCAxIDIgLTJoMTJhMiAyIDAgMCAxIDIgMnYxMmEyIDIgMCAwIDEgLTIgMmgtMTJhMiAyIDAgMCAxIC0yIC0ydi0xMiIgLz48cGF0aCBkPSJNMTYgM3Y0IiAvPjxwYXRoIGQ9Ik04IDN2NCIgLz48cGF0aCBkPSJNNCAxMWgxNiIgLz48cGF0aCBkPSJNOCAxNHY0IiAvPjxwYXRoIGQ9Ik0xMiAxNHY0IiAvPjxwYXRoIGQ9Ik0xNiAxNHY0IiAvPjwvc3ZnPg==")}
.pt-i-record{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00IDIwaDRsMTAuNSAtMTAuNWEyLjgyOCAyLjgyOCAwIDEgMCAtNCAtNGwtMTAuNSAxMC41djQiIC8+PHBhdGggZD0iTTEzLjUgNi41bDQgNCIgLz48cGF0aCBkPSJNMTYgMTloNiIgLz48cGF0aCBkPSJNMTkgMTZ2NiIgLz48L3N2Zz4=")}
.pt-i-report{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0zIDN2MThoMTgiIC8+PHBhdGggZD0iTTIwIDE4djMiIC8+PHBhdGggZD0iTTE2IDE2djUiIC8+PHBhdGggZD0iTTEyIDEzdjgiIC8+PHBhdGggZD0iTTggMTZ2NSIgLz48cGF0aCBkPSJNMyAxMWM2IDAgNSAtNSA5IC01czMgNSA5IDUiIC8+PC9zdmc+")}
.pt-i-community{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xNC43IDEzLjVjLTEuMSAtMiAtMS40NDEgLTIuNSAtMi43IC0yLjVjLTEuMjU5IDAgLTEuNzM2IC43NTUgLTIuODM2IDIuNzQ3Yy0uOTQyIDEuNzAzIC0yLjg0NiAxLjg0NSAtMy4zMjEgMy4yOTFjLS4wOTcgLjI2NSAtLjE0NSAuNjc3IC0uMTQzIC45NjJjMCAxLjE3NiAuNzg3IDIgMS44IDJjMS4yNTkgMCAzIC0xIDQuNSAtMXMzLjI0MSAxIDQuNSAxYzEuMDEzIDAgMS44IC0uODIzIDEuOCAtMmMwIC0uMjg1IC0uMDQ5IC0uNjk3IC0uMTQ2IC0uOTYyYy0uNDc1IC0xLjQ1MSAtMi41MTIgLTEuODM1IC0zLjQ1NCAtMy41MzgiIC8+PHBhdGggZD0iTTIwLjE4OCA4LjA4MmExLjAzOSAxLjAzOSAwIDAgMCAtLjQwNiAtLjA4MmgtLjAxNWMtLjczNSAuMDEyIC0xLjU2IC43NSAtMS45OTMgMS44NjZjLS41MTkgMS4zMzUgLS4yOCAyLjcgLjUzOCAzLjA1MmMuMTI5IC4wNTUgLjI2NyAuMDgyIC40MDYgLjA4MmMuNzM5IDAgMS41NzUgLS43NDIgMi4wMTEgLTEuODY2Yy41MTYgLTEuMzM1IC4yNzMgLTIuNyAtLjU0IC0zLjA1MmwtLjAwMSAwIiAvPjxwYXRoIGQ9Ik05LjQ3NCA5Yy4wNTUgMCAuMTA5IDAgLjE2MyAtLjAxMWMuOTQ0IC0uMTI4IDEuNTMzIC0xLjM0NiAxLjMyIC0yLjcyMmMtLjIwMyAtMS4yOTcgLTEuMDQ3IC0yLjI2NyAtMS45MzIgLTIuMjY3Yy0uMDU1IDAgLS4xMDkgMCAtLjE2MyAuMDExYy0uOTQ0IC4xMjggLTEuNTMzIDEuMzQ2IC0xLjMyIDIuNzIyYy4yMDQgMS4yOTMgMS4wNDggMi4yNjcgMS45MzMgMi4yNjciIC8+PHBhdGggZD0iTTE2LjQ1NiA2LjczM2MuMjE0IC0xLjM3NiAtLjM3NSAtMi41OTQgLTEuMzIgLTIuNzIyYTEuMTY0IDEuMTY0IDAgMCAwIC0uMTYyIC0uMDExYy0uODg1IDAgLTEuNzI4IC45NyAtMS45MyAyLjI2N2MtLjIxNCAxLjM3NiAuMzc1IDIuNTk0IDEuMzIgMi43MjJjLjA1NCAuMDA3IC4xMDggLjAxMSAuMTYyIC4wMTFjLjg4NSAwIDEuNzMgLS45NzQgMS45MyAtMi4yNjciIC8+PHBhdGggZD0iTTUuNjkgMTIuOTE4Yy44MTYgLS4zNTIgMS4wNTQgLTEuNzE5IC41MzYgLTMuMDUyYy0uNDM2IC0xLjEyNCAtMS4yNzEgLTEuODY2IC0yLjAwOSAtMS44NjZjLS4xNCAwIC0uMjc3IC4wMjcgLS40MDcgLjA4MmMtLjgxNiAuMzUyIC0xLjA1NCAxLjcxOSAtLjUzNiAzLjA1MmMuNDM2IDEuMTI0IDEuMjcxIDEuODY2IDIuMDA5IDEuODY2Yy4xNCAwIC4yNzcgLS4wMjcgLjQwNyAtLjA4MiIgLz48L3N2Zz4=")}
.pt-i-back{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xNSA2bC02IDZsNiA2IiAvPjwvc3ZnPg==")}
.pt-i-next{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik05IDZsNiA2bC02IDYiIC8+PC9zdmc+")}
.pt-i-plus{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMiA1bDAgMTQiIC8+PHBhdGggZD0iTTUgMTJsMTQgMCIgLz48L3N2Zz4=")}
.pt-i-check{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik01IDEybDUgNWwxMCAtMTAiIC8+PC9zdmc+")}
.pt-i-close{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xOCA2bC0xMiAxMiIgLz48cGF0aCBkPSJNNiA2bDEyIDEyIiAvPjwvc3ZnPg==")}
.pt-i-trash{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00IDdsMTYgMCIgLz48cGF0aCBkPSJNMTAgMTFsMCA2IiAvPjxwYXRoIGQ9Ik0xNCAxMWwwIDYiIC8+PHBhdGggZD0iTTUgN2wxIDEyYTIgMiAwIDAgMCAyIDJoOGEyIDIgMCAwIDAgMiAtMmwxIC0xMiIgLz48cGF0aCBkPSJNOSA3di0zYTEgMSAwIDAgMSAxIC0xaDRhMSAxIDAgMCAxIDEgMXYzIiAvPjwvc3ZnPg==")}
.pt-i-edit{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00IDIwaDRsMTAuNSAtMTAuNWEyLjgyOCAyLjgyOCAwIDEgMCAtNCAtNGwtMTAuNSAxMC41djQiIC8+PHBhdGggZD0iTTEzLjUgNi41bDQgNCIgLz48L3N2Zz4=")}
.pt-i-share{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMyA0djRjLTYuNTc1IDEuMDI4IC05LjAyIDYuNzg4IC0xMCAxMmMtLjAzNyAuMjA2IDUuMzg0IC01Ljk2MiAxMCAtNnY0bDggLTdsLTggLTciIC8+PC9zdmc+")}
.pt-i-comment{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0zIDIwbDEuMyAtMy45Yy0yLjMyNCAtMy40MzcgLTEuNDI2IC03Ljg3MiAyLjEgLTEwLjM3NGMzLjUyNiAtMi41MDEgOC41OSAtMi4yOTYgMTEuODQ1IC40OGMzLjI1NSAyLjc3NyAzLjY5NSA3LjI2NiAxLjAyOSAxMC41MDFjLTIuNjY2IDMuMjM1IC03LjYxNSA0LjIxNSAtMTEuNTc0IDIuMjkzbC00LjcgMSIgLz48L3N2Zz4=")}
.pt-i-like{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xOS41IDEyLjU3MmwtNy41IDcuNDI4bC03LjUgLTcuNDI4YTUgNSAwIDEgMSA3LjUgLTYuNTY2YTUgNSAwIDEgMSA3LjUgNi41NzIiIC8+PC9zdmc+")}
.pt-i-like-on{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMCIgPjxwYXRoIGQ9Ik02Ljk3OSAzLjA3NGE2IDYgMCAwIDEgNC45ODggMS40MjVsLjAzNyAuMDMzbC4wMzQgLS4wM2E2IDYgMCAwIDEgNC43MzMgLTEuNDRsLjI0NiAuMDM2YTYgNiAwIDAgMSAzLjM2NCAxMC4wMDhsLS4xOCAuMTg1bC0uMDQ4IC4wNDFsLTcuNDUgNy4zNzlhMSAxIDAgMCAxIC0xLjMxMyAuMDgybC0uMDk0IC0uMDgybC03LjQ5MyAtNy40MjJhNiA2IDAgMCAxIDMuMTc2IC0xMC4yMTV6IiAvPjwvc3ZnPg==")}
.pt-i-more{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00IDEyYTEgMSAwIDEgMCAyIDBhMSAxIDAgMSAwIC0yIDAiIC8+PHBhdGggZD0iTTExIDEyYTEgMSAwIDEgMCAyIDBhMSAxIDAgMSAwIC0yIDAiIC8+PHBhdGggZD0iTTE4IDEyYTEgMSAwIDEgMCAyIDBhMSAxIDAgMSAwIC0yIDAiIC8+PC9zdmc+")}
.pt-i-bell{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMCA1YTIgMiAwIDEgMSA0IDBhNyA3IDAgMCAxIDQgNnYzYTQgNCAwIDAgMCAyIDNoLTE2YTQgNCAwIDAgMCAyIC0zdi0zYTcgNyAwIDAgMSA0IC02IiAvPjxwYXRoIGQ9Ik05IDE3djFhMyAzIDAgMCAwIDYgMHYtMSIgLz48L3N2Zz4=")}
.pt-i-settings{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMC4zMjUgNC4zMTdjLjQyNiAtMS43NTYgMi45MjQgLTEuNzU2IDMuMzUgMGExLjcyNCAxLjcyNCAwIDAgMCAyLjU3MyAxLjA2NmMxLjU0MyAtLjk0IDMuMzEgLjgyNiAyLjM3IDIuMzdhMS43MjQgMS43MjQgMCAwIDAgMS4wNjUgMi41NzJjMS43NTYgLjQyNiAxLjc1NiAyLjkyNCAwIDMuMzVhMS43MjQgMS43MjQgMCAwIDAgLTEuMDY2IDIuNTczYy45NCAxLjU0MyAtLjgyNiAzLjMxIC0yLjM3IDIuMzdhMS43MjQgMS43MjQgMCAwIDAgLTIuNTcyIDEuMDY1Yy0uNDI2IDEuNzU2IC0yLjkyNCAxLjc1NiAtMy4zNSAwYTEuNzI0IDEuNzI0IDAgMCAwIC0yLjU3MyAtMS4wNjZjLTEuNTQzIC45NCAtMy4zMSAtLjgyNiAtMi4zNyAtMi4zN2ExLjcyNCAxLjcyNCAwIDAgMCAtMS4wNjUgLTIuNTcyYy0xLjc1NiAtLjQyNiAtMS43NTYgLTIuOTI0IDAgLTMuMzVhMS43MjQgMS43MjQgMCAwIDAgMS4wNjYgLTIuNTczYy0uOTQgLTEuNTQzIC44MjYgLTMuMzEgMi4zNyAtMi4zN2MxIC42MDggMi4yOTYgLjA3IDIuNTcyIC0xLjA2NSIgLz48cGF0aCBkPSJNOSAxMmEzIDMgMCAxIDAgNiAwYTMgMyAwIDAgMCAtNiAwIiAvPjwvc3ZnPg==")}
.pt-i-ai{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xNiAxOGEyIDIgMCAwIDEgMiAyYTIgMiAwIDAgMSAyIC0yYTIgMiAwIDAgMSAtMiAtMmEyIDIgMCAwIDEgLTIgMm0wIC0xMmEyIDIgMCAwIDEgMiAyYTIgMiAwIDAgMSAyIC0yYTIgMiAwIDAgMSAtMiAtMmEyIDIgMCAwIDEgLTIgMm0tNyAxMmE2IDYgMCAwIDEgNiAtNmE2IDYgMCAwIDEgLTYgLTZhNiA2IDAgMCAxIC02IDZhNiA2IDAgMCAxIDYgNiIgLz48L3N2Zz4=")}
.pt-i-warn{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMiA5djQiIC8+PHBhdGggZD0iTTEwLjM2MyAzLjU5MWwtOC4xMDYgMTMuNTM0YTEuOTE0IDEuOTE0IDAgMCAwIDEuNjM2IDIuODcxaDE2LjIxNGExLjkxNCAxLjkxNCAwIDAgMCAxLjYzNiAtMi44N2wtOC4xMDYgLTEzLjUzNmExLjkxNCAxLjkxNCAwIDAgMCAtMy4yNzQgMCIgLz48cGF0aCBkPSJNMTIgMTZoLjAxIiAvPjwvc3ZnPg==")}
.pt-i-doc{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xNCAzdjRhMSAxIDAgMCAwIDEgMWg0IiAvPjxwYXRoIGQ9Ik0xNyAyMWgtMTBhMiAyIDAgMCAxIC0yIC0ydi0xNGEyIDIgMCAwIDEgMiAtMmg3bDUgNXYxMWEyIDIgMCAwIDEgLTIgMiIgLz48cGF0aCBkPSJNOSA5bDEgMCIgLz48cGF0aCBkPSJNOSAxM2w2IDAiIC8+PHBhdGggZD0iTTkgMTdsNiAwIiAvPjwvc3ZnPg==")}
.pt-i-note{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik01IDVhMiAyIDAgMCAxIDIgLTJoMTBhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEgLTIgMmgtMTBhMiAyIDAgMCAxIC0yIC0ybDAgLTE0IiAvPjxwYXRoIGQ9Ik05IDdsNiAwIiAvPjxwYXRoIGQ9Ik05IDExbDYgMCIgLz48cGF0aCBkPSJNOSAxNWw0IDAiIC8+PC9zdmc+")}
.pt-i-book{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0zIDE5YTkgOSAwIDAgMSA5IDBhOSA5IDAgMCAxIDkgMCIgLz48cGF0aCBkPSJNMyA2YTkgOSAwIDAgMSA5IDBhOSA5IDAgMCAxIDkgMCIgLz48cGF0aCBkPSJNMyA2bDAgMTMiIC8+PHBhdGggZD0iTTEyIDZsMCAxMyIgLz48cGF0aCBkPSJNMjEgNmwwIDEzIiAvPjwvc3ZnPg==")}
.pt-i-trend{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik00IDE5bDE2IDAiIC8+PHBhdGggZD0iTTQgMTVsNCAtNmw0IDJsNCAtNWw0IDQiIC8+PC9zdmc+")}
.pt-i-cat{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0yMCAzdjEwYTggOCAwIDEgMSAtMTYgMHYtMTBsMy40MzIgMy40MzJhNy45NjMgNy45NjMgMCAwIDEgNC41NjggLTEuNDMyYzEuNzY5IDAgMy40MDMgLjU3NCA0LjcyOCAxLjU0NmwzLjI3MiAtMy41NDYiIC8+PHBhdGggZD0iTTIgMTZoNWwtNCA0IiAvPjxwYXRoIGQ9Ik0yMiAxNmgtNWw0IDQiIC8+PHBhdGggZD0iTTExIDE2YTEgMSAwIDEgMCAyIDBhMSAxIDAgMSAwIC0yIDAiIC8+PHBhdGggZD0iTTkgMTF2LjAxIiAvPjxwYXRoIGQ9Ik0xNSAxMXYuMDEiIC8+PC9zdmc+")}
.pt-i-dog{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0xMSA1aDIiIC8+PHBhdGggZD0iTTE5IDEyYy0uNjY3IDUuMzMzIC0yLjMzMyA4IC01IDhoLTRjLTIuNjY3IDAgLTQuMzMzIC0yLjY2NyAtNSAtOCIgLz48cGF0aCBkPSJNMTEgMTZjMCAuNjY3IC4zMzMgMSAxIDFzMSAtLjMzMyAxIC0xaC0yIiAvPjxwYXRoIGQ9Ik0xMiAxOHYyIiAvPjxwYXRoIGQ9Ik0xMCAxMXYuMDEiIC8+PHBhdGggZD0iTTE0IDExdi4wMSIgLz48cGF0aCBkPSJNNSA0bDYgLjk3bC02LjIzOCA2LjY4OGExLjAyMSAxLjAyMSAwIDAgMSAtMS40MSAuMTExYS45NTMgLjk1MyAwIDAgMSAtLjMyNyAtLjk1NGwxLjk3NSAtNi44MTUiIC8+PHBhdGggZD0iTTE5IDRsLTYgLjk3bDYuMjM4IDYuNjg4Yy4zNTggLjQwOCAuOTg5IC40NTggMS40MSAuMTExYS45NTMgLjk1MyAwIDAgMCAuMzI3IC0uOTU0bC0xLjk3NSAtNi44MTUiIC8+PC9zdmc+")}
.pt-i-user{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik04IDdhNCA0IDAgMSAwIDggMGE0IDQgMCAwIDAgLTggMCIgLz48cGF0aCBkPSJNNiAyMXYtMmE0IDQgMCAwIDEgNCAtNGg0YTQgNCAwIDAgMSA0IDR2MiIgLz48L3N2Zz4=")}
.pt-i-clock{--m:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0zIDEyYTkgOSAwIDEgMCAxOCAwYTkgOSAwIDAgMCAtMTggMCIgLz48cGF0aCBkPSJNMTIgN3Y1bDMgMyIgLz48L3N2Zz4=")}
</style>
<h2>1 · 图标全集（38 个，20px ≈ 40rpx）</h2>
<p class="hint">来源 Tabler Icons (MIT)。用 mask-image + currentColor，不是字体——Tabler 是描边图标，转字体要先展开轮廓，漏了会生成空字形。</p>
<div class="wall">
<div class="cell"><i class="pt-i pt-i-weight"></i><span>weight</span></div><div class="cell"><i class="pt-i pt-i-poop"></i><span>poop</span></div><div class="cell"><i class="pt-i pt-i-food"></i><span>food</span></div><div class="cell"><i class="pt-i pt-i-symptom"></i><span>symptom</span></div><div class="cell"><i class="pt-i pt-i-medicine"></i><span>medicine</span></div><div class="cell"><i class="pt-i pt-i-cost"></i><span>cost</span></div><div class="cell"><i class="pt-i pt-i-vaccine"></i><span>vaccine</span></div><div class="cell"><i class="pt-i pt-i-deworm"></i><span>deworm</span></div><div class="cell"><i class="pt-i pt-i-photo"></i><span>photo</span></div><div class="cell"><i class="pt-i pt-i-home"></i><span>home</span></div><div class="cell"><i class="pt-i pt-i-plan"></i><span>plan</span></div><div class="cell"><i class="pt-i pt-i-record"></i><span>record</span></div><div class="cell"><i class="pt-i pt-i-report"></i><span>report</span></div><div class="cell"><i class="pt-i pt-i-community"></i><span>community</span></div><div class="cell"><i class="pt-i pt-i-back"></i><span>back</span></div><div class="cell"><i class="pt-i pt-i-next"></i><span>next</span></div><div class="cell"><i class="pt-i pt-i-plus"></i><span>plus</span></div><div class="cell"><i class="pt-i pt-i-check"></i><span>check</span></div><div class="cell"><i class="pt-i pt-i-close"></i><span>close</span></div><div class="cell"><i class="pt-i pt-i-trash"></i><span>trash</span></div><div class="cell"><i class="pt-i pt-i-edit"></i><span>edit</span></div><div class="cell"><i class="pt-i pt-i-share"></i><span>share</span></div><div class="cell"><i class="pt-i pt-i-comment"></i><span>comment</span></div><div class="cell"><i class="pt-i pt-i-like"></i><span>like</span></div><div class="cell"><i class="pt-i pt-i-like-on"></i><span>like-on</span></div><div class="cell"><i class="pt-i pt-i-more"></i><span>more</span></div><div class="cell"><i class="pt-i pt-i-bell"></i><span>bell</span></div><div class="cell"><i class="pt-i pt-i-settings"></i><span>settings</span></div><div class="cell"><i class="pt-i pt-i-ai"></i><span>ai</span></div><div class="cell"><i class="pt-i pt-i-warn"></i><span>warn</span></div><div class="cell"><i class="pt-i pt-i-doc"></i><span>doc</span></div><div class="cell"><i class="pt-i pt-i-note"></i><span>note</span></div><div class="cell"><i class="pt-i pt-i-book"></i><span>book</span></div><div class="cell"><i class="pt-i pt-i-trend"></i><span>trend</span></div><div class="cell"><i class="pt-i pt-i-cat"></i><span>cat</span></div><div class="cell"><i class="pt-i pt-i-dog"></i><span>dog</span></div><div class="cell"><i class="pt-i pt-i-user"></i><span>user</span></div><div class="cell"><i class="pt-i pt-i-clock"></i><span>clock</span></div></div>
<h2>2 · 尺寸可读性</h2>
<p class="hint">32rpx(16px) 是正文里最常用的尺寸，重点看这一档描边够不够清楚。</p>
<div class="sizes">
<span class="s16"><i class="pt-i pt-i-weight"></i> 16px / 32rpx</span>
<span class="s20"><i class="pt-i pt-i-weight"></i> 20px / 40rpx</span>
<span class="s24"><i class="pt-i pt-i-weight"></i> 24px / 48rpx</span>
<span class="s28"><i class="pt-i pt-i-weight"></i> 28px / 56rpx</span>
</div>
<h2>3 · currentColor 染色 · 4 色分类块</h2>
<p class="hint">图标颜色跟随文字色，选中态只改一个 color 即可，emoji 做不到这点。</p>
<div class="tones">
<div class="tone t1"><i class="pt-i pt-i-weight"></i>体重</div>
<div class="tone t2"><i class="pt-i pt-i-food"></i>饮食</div>
<div class="tone t3"><i class="pt-i pt-i-symptom"></i>异常</div>
<div class="tone t4"><i class="pt-i pt-i-photo"></i>照片</div>
</div>
<h2>4 · 深色 CTA 上反白</h2>
<div class="dark"><i class="pt-i pt-i-ai"></i> 问问 AI 养宠助手</div>
<h2>5 · tabBar（替换 🏠📅✍️📊🐾）</h2>
<div class="tabbar">
<div class="tb on"><i class="pt-i pt-i-home"></i>首页</div>
<div class="tb"><i class="pt-i pt-i-plan"></i>计划</div>
<div class="tb"><i class="pt-i pt-i-record"></i>记录</div>
<div class="tb"><i class="pt-i pt-i-report"></i>报告</div>
<div class="tb"><i class="pt-i pt-i-community"></i>社区</div>
</div>