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