tamakyi
001306d940
11 个模板里的硬编码字号/圆角换成令牌，为之后的深色与主题一致性打底。 字号（base.css 的 --tb-fs-xs/md/lg/xl/hero = 12/14/16/24/28）： - 0.70~0.88rem、0.72rem 等五六档零碎值 → --tb-fs-xs(标签/meta) / --tb-fs-md(正文、列表、按钮) - 0.95~1rem → --tb-fs-lg；1.5rem 大数字 → --tb-fs-xl；1.75rem 首页主标题 → --tb-fs-hero - 以下几处**故意改变了观感**（不是等价替换，先记下来免得以后当 regression 查）： explore 的 .explore-name 1.2rem → 1rem；.hot-vote-title 0.98 → 0.875； 首页 .tb-stat-num 手机端 1.25 → 1rem；.hot-vote-action 0.82 → 0.875（变大）。 圆角： - 8/9/10px → --tb-radius-sm(8) / --tb-radius(12，对话框与气泡)；3/4/5/6px → --tb-radius-xs(6) - 头像 50%、胶囊 999px 保留原样（语义值，不是视觉随意值） 其它：header 验证码输入框边框 #ccc → var(--tb-border)；chat 气泡与图片的圆角走内联 var()。 仍未令牌化（留给下一轮）：templates/user/profile.html 还有 16 处 font-size、base.css 自身 11 处 （0.78/0.82/0.88/0.95/1.1），邮件模板 mail/* 保持 px 不动（邮件客户端不保证 var()）。
109 lines
3.2 KiB
HTML
109 lines
3.2 KiB
HTML
{{template "base/header" .}}
|
|
<style>
|
|
.sponsor {
|
|
position: relative;
|
|
}
|
|
|
|
.sponsor > .popup {
|
|
width: 280px;
|
|
background: #eee;
|
|
color: #fff;
|
|
box-shadow: 0 0 5px 0 #ccc;
|
|
border-radius: var(--tb-radius-sm);
|
|
line-height: 0;
|
|
}
|
|
|
|
.sponsor > .alipay {
|
|
background: #00a2ea;
|
|
}
|
|
|
|
.sponsor > .popup > .head {
|
|
text-align: center;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.sponsor .qrcode {
|
|
text-align: center;
|
|
}
|
|
|
|
.sponsor .qrcode img {
|
|
margin: 30px auto;
|
|
width: 80%;
|
|
}
|
|
|
|
.sponsor ul.platform {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
text-align: center;
|
|
background: #FFF;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.sponsor ul.platform li {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.sponsor ul.platform li.active {
|
|
font-weight: 600;
|
|
filter: grayscale(0%);
|
|
}
|
|
|
|
.sponsor ul.platform li.icon-alipay {
|
|
background: url(https://cdn.github.red/wp-content/plugins/you-shang/image/alipay.svg) no-repeat center center;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<div class="uk-child-width-expand@s" uk-grid>
|
|
<div>
|
|
<h2>给 NekoBox 打钱</h2>
|
|
<p>NekoBox 创立于 2020 年疫情初期，一开始是我疫情在家花了三天时间随手写得一个匿名留言箱。</p>
|
|
<p>目前 NekoBox 的服务器、CDN 开销还是我一个人承担，如果你也想为我分担一些，欢迎给 NekoBox 打钱！👏🏻</p>
|
|
</div>
|
|
<div>
|
|
<div class="sponsor">
|
|
<div class="alipay popup" style="">
|
|
<div class="head">谢谢老板 Thanks♪(･ω･)ﾉ</div>
|
|
<div class="qrcode">
|
|
<div class="qrcode-li alipay"><img
|
|
src="https://cdn.github.red/wp-content/uploads/2021/02/alipay_qrcode.jpg">
|
|
<noscript><img src="https://cdn.github.red/wp-content/uploads/2021/02/alipay_qrcode.jpg"/></noscript>
|
|
</div>
|
|
</div>
|
|
<ul class="platform">
|
|
<li class="icon-alipay active" data-bg-color="#00a2ea" data-thanks="谢谢老板 Thanks♪(･ω･)ﾉ"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div uk-alert class="uk-text-small">感谢以下小伙伴对 NekoBox 的支持！</div>
|
|
<table class="uk-table uk-table-small uk-table-divider">
|
|
<thead>
|
|
<tr>
|
|
<th>日期</th>
|
|
<th>附言</th>
|
|
<th>金额</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody x-data="{ s: '' }" x-init="
|
|
s = await (async () => {
|
|
let html = '';
|
|
let items = (await(await fetch('https://pb.app.apicon.cn/api/collections/nekobox_sponsors/records?perPage=500&sort=-date')).json()).items;
|
|
items.forEach(item => {
|
|
html += `<tr class=uk-text-meta><td>${item.date.slice(0,10)}</td><td>${item.desc}</td><td>¥ ${item.price.toFixed(2)}</td></tr>`;
|
|
})
|
|
return html;
|
|
})()
|
|
" x-html="s">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{template "base/footer" .}}
|