lc
bce796d893
- 主按钮与自由/循环训练按钮圆角统一为 16rpx（直角→折中方案） - 自由训练/循环训练两个次按钮改为并排一行，文字精简为「自由训练」「循环训练」 - 两个次按钮 size 由 md 改为 xl，与主按钮高度一致 - 新增 preview-buttons.html 对照预览 - 更新工作记忆
161 lines
5.1 KiB
HTML
161 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>首页按钮：圆角 vs 直角 对照预览</title>
|
|
<style>
|
|
:root {
|
|
--primary: #FF6B35;
|
|
--primary-light: #FF8C5A;
|
|
--primary-bg: #FFF3ED;
|
|
--primary-rgb: 255,107,53;
|
|
--text-secondary: #999999;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
|
|
background: #f4f5f7;
|
|
color: #222;
|
|
padding: 32px 16px 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
h1 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
|
|
.sub { font-size: 13px; color: #888; margin-bottom: 28px; text-align: center; line-height: 1.6; }
|
|
|
|
.compare {
|
|
display: flex;
|
|
gap: 28px;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.col {
|
|
background: #fff;
|
|
border-radius: 18px;
|
|
padding: 24px 22px 28px;
|
|
width: 320px;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,0.06);
|
|
}
|
|
.col h2 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
.col .tag {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.col.round .tag { background: var(--primary-bg); color: var(--primary); }
|
|
.col.square .tag { background: #eee; color: #666; }
|
|
|
|
/* ---- button replica (matches ui-btn) ---- */
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border: none;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
width: 100%;
|
|
margin-bottom: 14px;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
.btn .dot { width: 18px; height: 18px; border-radius: 50%; background: currentColor; opacity: .85; }
|
|
|
|
.btn--xl { height: 54px; font-size: 18px; }
|
|
.btn--md { height: 40px; font-size: 15px; }
|
|
.btn--lg { height: 48px; font-size: 17px; }
|
|
|
|
.btn--primary {
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
|
color: #fff;
|
|
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
|
|
}
|
|
.btn--ghost {
|
|
background: rgba(var(--primary-rgb), 0.14);
|
|
color: var(--primary);
|
|
border: 1px solid rgba(var(--primary-rgb), 0.22);
|
|
}
|
|
|
|
/* the only difference that matters: */
|
|
.round .btn { border-radius: 24px; }
|
|
.square .btn { border-radius: 8px; } /* ≈16rpx */
|
|
|
|
/* two secondary buttons side by side */
|
|
.btn-row { display: flex; gap: 8px; }
|
|
.btn-row .btn { margin-bottom: 14px; }
|
|
|
|
.context-note {
|
|
margin-top: 16px;
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
line-height: 1.5;
|
|
border-top: 1px dashed #eee;
|
|
padding-top: 12px;
|
|
}
|
|
.verdict {
|
|
margin-top: 30px;
|
|
font-size: 13px;
|
|
color: #666;
|
|
text-align: center;
|
|
max-width: 660px;
|
|
line-height: 1.7;
|
|
}
|
|
.verdict b { color: var(--primary); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>首页功能按钮 · 圆角 vs 直角</h1>
|
|
<p class="sub">左侧是小程序现状（圆角 48rpx），右侧是本次改后的效果（直角 0）。<br/>同一套按钮、同一套配色，方便你直接对比「好不好看」。</p>
|
|
|
|
<div class="compare">
|
|
<!-- 圆角现状 -->
|
|
<div class="col round">
|
|
<h2>现状 · 圆角</h2>
|
|
<span class="tag">border-radius: 48rpx</span>
|
|
|
|
<div class="btn btn--primary btn--xl"><span class="dot"></span>开始训练</div>
|
|
<div class="btn-row">
|
|
<div class="btn btn--ghost btn--xl"><span class="dot"></span>自由训练</div>
|
|
<div class="btn btn--ghost btn--md"><span class="dot"></span>循环训练</div>
|
|
</div>
|
|
<hr style="border:none;border-top:1px solid #f0f0f0;margin:18px 0 16px;">
|
|
<div class="btn btn--primary btn--lg">开始自由训练</div>
|
|
<div class="btn btn--primary btn--lg">保存并开始</div>
|
|
|
|
<div class="context-note">页面其余元素仍是圆角：卡片 24rpx、进度条 6rpx、目标环是正圆。</div>
|
|
</div>
|
|
|
|
<!-- 直角改后 -->
|
|
<div class="col square">
|
|
<h2>改后 · 小圆角</h2>
|
|
<span class="tag">border-radius: 16rpx</span>
|
|
|
|
<div class="btn btn--primary btn--xl"><span class="dot"></span>开始训练</div>
|
|
<div class="btn-row">
|
|
<div class="btn btn--ghost btn--xl"><span class="dot"></span>自由训练</div>
|
|
<div class="btn btn--ghost btn--md"><span class="dot"></span>循环训练</div>
|
|
</div>
|
|
<hr style="border:none;border-top:1px solid #f0f0f0;margin:18px 0 16px;">
|
|
<div class="btn btn--primary btn--lg">开始自由训练</div>
|
|
<div class="btn btn--primary btn--lg">保存并开始</div>
|
|
|
|
<div class="context-note">仅首页这几个按钮变直角，全局组件与其他页面不受影响。</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="verdict">
|
|
小圆角（16rpx）比 10rpx 更圆润一点，更接近卡片的 24rpx 圆角语言，但仍不是全胶囊，保留了清爽感。<br/>
|
|
已应用到首页 5 个按钮（仅首页、不动全局组件）。若还想微调，往上可贴近卡片的 24rpx、往下回到 10rpx，说一声即可。
|
|
</p>
|
|
</body>
|
|
</html>
|