feat: Mobile 全站 CSS 变量对齐
- 批量替换 18 个页面硬编码颜色 → CSS 变量 - sandbox page 完整迁移(参考页) - App.vue + variables.css 统一 Token 定义 - 剩余仅保留语义色(红色价格、绿色完成、阴影、渐变) - 剩余 16 页按相同模式可逐步迁移
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user