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
+8 -8
View File
@@ -73,26 +73,26 @@ const goDetail = (id: number) => uni.navigateTo({ url: `/pages/course-detail/ind
<style scoped>
.courses { }
.filter-bar { background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
.filter-bar { background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.category-scroll { white-space: nowrap; }
.category-list { display: flex; gap: 16rpx; }
.category-tag {
display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx;
background: #f5f5f5; color: #666;
background: var(--muted); color: var(--muted-foreground);
}
.category-tag.active { background: #4f8cff; color: #fff; }
.category-tag.active { background: var(--brand); color: var(--card); }
.course-list { padding: 20rpx 30rpx; }
.course-card {
display: flex; background: #fff; border-radius: 16rpx; overflow: hidden;
display: flex; background: var(--card); border-radius: 16rpx; overflow: hidden;
margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.cover { width: 200rpx; height: 150rpx; }
.info { flex: 1; padding: 20rpx; }
.title { font-size: 28rpx; font-weight: 500; display: block; }
.desc { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx; }
.price { font-size: 26rpx; color: #4f8cff; }
.price { font-size: 26rpx; color: var(--brand); }
.price.paid { color: #ff6b6b; }
.count { font-size: 22rpx; color: #ccc; }
.loading-more { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; }
.count { font-size: 22rpx; color: var(--muted-foreground); }
.loading-more { text-align: center; padding: 30rpx; color: var(--muted-foreground); font-size: 26rpx; }
</style>