feat: Mobile 全站 CSS 变量对齐

- 批量替换 18 个页面硬编码颜色 → CSS 变量
- sandbox page 完整迁移(参考页)
- App.vue + variables.css 统一 Token 定义
- 剩余仅保留语义色(红色价格、绿色完成、阴影、渐变)
- 剩余 16 页按相同模式可逐步迁移
This commit is contained in:
yuzhiran-dev
2026-05-18 11:52:57 +08:00
parent 1a8b3fbaab
commit 21078ae287
19 changed files with 127 additions and 127 deletions
+11 -11
View File
@@ -79,22 +79,22 @@ async function submitComment() {
<style scoped>
.post-detail { padding: 30rpx; }
.post { background: #fff; border-radius: 16rpx; padding: 30rpx; }
.post { background: var(--card); border-radius: 16rpx; padding: 30rpx; }
.title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 16rpx; }
.meta { display: flex; justify-content: space-between; margin-bottom: 24rpx; }
.author { font-size: 24rpx; color: #4f8cff; }
.time { font-size: 22rpx; color: #ccc; }
.content { font-size: 28rpx; color: #333; line-height: 1.8; margin-bottom: 24rpx; }
.author { font-size: 24rpx; color: var(--brand); }
.time { font-size: 22rpx; color: var(--muted-foreground); }
.content { font-size: 28rpx; color: var(--foreground); line-height: 1.8; margin-bottom: 24rpx; }
.actions { }
.action { font-size: 26rpx; color: #666; }
.action { font-size: 26rpx; color: var(--muted-foreground); }
.comments-section { margin-top: 30rpx; }
.section-title { font-size: 30rpx; font-weight: bold; display: block; margin-bottom: 20rpx; }
.comment-list { background: #fff; border-radius: 16rpx; padding: 20rpx; }
.comment { padding: 16rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.comment-list { background: var(--card); border-radius: 16rpx; padding: 20rpx; }
.comment { padding: 16rpx 0; border-bottom: 1rpx solid var(--muted); }
.comment:last-child { border-bottom: none; }
.comment-author { font-size: 24rpx; color: #4f8cff; display: block; margin-bottom: 8rpx; }
.comment-content { font-size: 26rpx; color: #333; }
.comment-author { font-size: 24rpx; color: var(--brand); display: block; margin-bottom: 8rpx; }
.comment-content { font-size: 26rpx; color: var(--foreground); }
.comment-input-area { display: flex; align-items: center; gap: 16rpx; margin-top: 24rpx; }
.comment-input { flex: 1; background: #fff; border-radius: 12rpx; padding: 20rpx 24rpx; font-size: 26rpx; border: 1rpx solid #e8e8e8; }
.btn-submit { background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 16rpx 32rpx; font-size: 26rpx; border: none; }
.comment-input { flex: 1; background: var(--card); border-radius: 12rpx; padding: 20rpx 24rpx; font-size: 26rpx; border: 1rpx solid var(--border); }
.btn-submit { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 16rpx 32rpx; font-size: 26rpx; border: none; }
</style>