alai-dev/ai-learning-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Mobile 全站 CSS 变量对齐

Browse Source 
- 批量替换 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
Download Patch File Download Diff File Expand all files Collapse all files
mobile/src/pages/circle-detail/index.vue
+7 -7
View File
@@ -63,13 +63,13 @@ const goPost = (id: number) => uni.navigateTo({ url: `/pages/post-detail/index?i
<style scoped> <style scoped>
.circle-detail { } .circle-detail { }
.header { padding: 40rpx 30rpx; background: #fff; border-bottom: 1rpx solid #f0f0f0; } .header { padding: 40rpx 30rpx; background: var(--card); border-bottom: 1rpx solid var(--border); }
.name { font-size: 40rpx; font-weight: bold; color: #4f8cff; display: block; } .name { font-size: 40rpx; font-weight: bold; color: var(--brand); display: block; }
.desc { font-size: 26rpx; color: #666; margin-top: 16rpx; display: block; } .desc { font-size: 26rpx; color: var(--muted-foreground); margin-top: 16rpx; display: block; }
.btn-join { background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: none; } .btn-join { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: none; }
.btn-leave { background: #fff; color: #ff4d4f; border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: 1rpx solid #ff4d4f; } .btn-leave { background: var(--card); color: #ff4d4f; border-radius: 10rpx; padding: 16rpx 40rpx; font-size: 26rpx; margin-top: 20rpx; border: 1rpx solid #ff4d4f; }
.post-list { padding: 20rpx 30rpx; } .post-list { padding: 20rpx 30rpx; }
.post-item { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; } .post-item { background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
.post-title { font-size: 28rpx; font-weight: 500; display: block; } .post-title { font-size: 28rpx; font-weight: 500; display: block; }
.post-meta { font-size: 22rpx; color: #999; margin-top: 8rpx; display: block; } .post-meta { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
</style> </style>
mobile/src/pages/circles/index.vue
+5 -5
View File
@@ -32,12 +32,12 @@ const goDetail = (id: number) => uni.navigateTo({ url: `/pages/circle-detail/ind
<style scoped> <style scoped>
.circles { padding: 30rpx; } .circles { padding: 30rpx; }
.circle-card { .circle-card {
background: #fff; border-radius: 16rpx; padding: 28rpx; margin-bottom: 16rpx; background: var(--card); border-radius: 16rpx; padding: 28rpx; margin-bottom: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
} }
.circle-name { font-size: 32rpx; font-weight: bold; color: #4f8cff; display: block; } .circle-name { font-size: 32rpx; font-weight: bold; color: var(--brand); display: block; }
.circle-desc { font-size: 26rpx; color: #666; margin-top: 12rpx; display: block; } .circle-desc { font-size: 26rpx; color: var(--muted-foreground); margin-top: 12rpx; display: block; }
.circle-meta { display: flex; justify-content: space-between; margin-top: 16rpx; } .circle-meta { display: flex; justify-content: space-between; margin-top: 16rpx; }
.circle-count { font-size: 22rpx; color: #999; } .circle-count { font-size: 22rpx; color: var(--muted-foreground); }
.circle-tags { font-size: 22rpx; color: #4f8cff; } .circle-tags { font-size: 22rpx; color: var(--brand); }
</style> </style>
mobile/src/pages/community/index.vue
+9 -9
View File
@@ -59,24 +59,24 @@ const goCreate = () => {
<style scoped> <style scoped>
.community { } .community { }
.tabs { display: flex; background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; } .tabs { display: flex; background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: #666; border-radius: 6rpx; } .tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: var(--muted-foreground); border-radius: 6rpx; }
.tab.active { color: #4f8cff; font-weight: bold; background: #eef3ff; } .tab.active { color: var(--brand); font-weight: bold; background: #eef3ff; }
.post-list { padding: 20rpx 30rpx; } .post-list { padding: 20rpx 30rpx; }
.post-card { .post-card {
background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; background: var(--card); border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
} }
.post-header { display: flex; justify-content: space-between; margin-bottom: 12rpx; } .post-header { display: flex; justify-content: space-between; margin-bottom: 12rpx; }
.author { font-size: 24rpx; color: #4f8cff; } .author { font-size: 24rpx; color: var(--brand); }
.time { font-size: 22rpx; color: #ccc; } .time { font-size: 22rpx; color: var(--muted-foreground); }
.post-title { font-size: 30rpx; font-weight: 500; display: block; margin-bottom: 16rpx; } .post-title { font-size: 30rpx; font-weight: 500; display: block; margin-bottom: 16rpx; }
.post-footer { display: flex; gap: 24rpx; } .post-footer { display: flex; gap: 24rpx; }
.stat { font-size: 22rpx; color: #999; } .stat { font-size: 22rpx; color: var(--muted-foreground); }
.fab { .fab {
position: fixed; right: 40rpx; bottom: 100rpx; position: fixed; right: 40rpx; bottom: 100rpx;
width: 100rpx; height: 100rpx; background: #4f8cff; border-radius: 50%; width: 100rpx; height: 100rpx; background: var(--brand); border-radius: 50%;
display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(79,140,255,0.4); display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(79,140,255,0.4);
} }
.fab-icon { font-size: 48rpx; color: #fff; } .fab-icon { font-size: 48rpx; color: var(--card); }
</style> </style>
mobile/src/pages/course-detail/index.vue
+7 -7
View File
@@ -61,18 +61,18 @@ const goLesson = (lessonId: number) => {
background: linear-gradient(transparent, rgba(0,0,0,0.7)); background: linear-gradient(transparent, rgba(0,0,0,0.7));
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
} }
.title { font-size: 36rpx; font-weight: bold; color: #fff; display: block; } .title { font-size: 36rpx; font-weight: bold; color: var(--card); display: block; }
.meta { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; } .meta { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; }
.price { font-size: 28rpx; color: #4f8cff; margin-top: 12rpx; display: inline-block; } .price { font-size: 28rpx; color: var(--brand); margin-top: 12rpx; display: inline-block; }
.price.paid { color: #ff6b6b; } .price.paid { color: #ff6b6b; }
.body { padding: 30rpx; } .body { padding: 30rpx; }
.section { margin-bottom: 40rpx; } .section { margin-bottom: 40rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; display: block; } .section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 20rpx; display: block; }
.desc { font-size: 26rpx; color: #666; line-height: 1.6; } .desc { font-size: 26rpx; color: var(--muted-foreground); line-height: 1.6; }
.chapter { margin-bottom: 20rpx; background: #fff; border-radius: 12rpx; overflow: hidden; } .chapter { margin-bottom: 20rpx; background: var(--card); border-radius: 12rpx; overflow: hidden; }
.chapter-title { font-size: 28rpx; font-weight: 500; padding: 20rpx 24rpx; background: #f8f9ff; display: block; } .chapter-title { font-size: 28rpx; font-weight: 500; padding: 20rpx 24rpx; background: var(--muted); display: block; }
.lesson { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 24rpx; border-bottom: 1rpx solid #f5f5f5; } .lesson { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 24rpx; border-bottom: 1rpx solid var(--muted); }
.lesson:last-child { border-bottom: none; } .lesson:last-child { border-bottom: none; }
.lesson-title { font-size: 26rpx; color: #333; } .lesson-title { font-size: 26rpx; color: var(--foreground); }
.lesson-status { font-size: 24rpx; } .lesson-status { font-size: 24rpx; }
</style> </style>
mobile/src/pages/courses/index.vue
+8 -8
View File
@@ -73,26 +73,26 @@ const goDetail = (id: number) => uni.navigateTo({ url: `/pages/course-detail/ind
<style scoped> <style scoped>
.courses { } .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-scroll { white-space: nowrap; }
.category-list { display: flex; gap: 16rpx; } .category-list { display: flex; gap: 16rpx; }
.category-tag { .category-tag {
display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx; 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-list { padding: 20rpx 30rpx; }
.course-card { .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); margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
} }
.cover { width: 200rpx; height: 150rpx; } .cover { width: 200rpx; height: 150rpx; }
.info { flex: 1; padding: 20rpx; } .info { flex: 1; padding: 20rpx; }
.title { font-size: 28rpx; font-weight: 500; display: block; } .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; } .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; } .price.paid { color: #ff6b6b; }
.count { font-size: 22rpx; color: #ccc; } .count { font-size: 22rpx; color: var(--muted-foreground); }
.loading-more { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; } .loading-more { text-align: center; padding: 30rpx; color: var(--muted-foreground); font-size: 26rpx; }
</style> </style>
mobile/src/pages/create-post/index.vue
+5 -5
View File
@@ -44,15 +44,15 @@ async function submit() {
.create-post { padding: 30rpx; } .create-post { padding: 30rpx; }
.form { } .form { }
.input { .input {
background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx; background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
margin-bottom: 24rpx; border: 1rpx solid #e8e8e8; margin-bottom: 24rpx; border: 1rpx solid var(--border);
} }
.textarea { .textarea {
background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx; background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
margin-bottom: 24rpx; border: 1rpx solid #e8e8e8; min-height: 300rpx; margin-bottom: 24rpx; border: 1rpx solid var(--border); min-height: 300rpx;
} }
.btn-primary { .btn-primary {
background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx; background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none; font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
} }
</style> </style>
mobile/src/pages/favorites/index.vue
+5 -5
View File
@@ -51,11 +51,11 @@ function goDetail(item: any) {
<style scoped> <style scoped>
.favorites { } .favorites { }
.tabs { display: flex; background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; } .tabs { display: flex; background: var(--card); padding: 20rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: #666; } .tab { font-size: 28rpx; padding: 8rpx 24rpx; margin-right: 16rpx; color: var(--muted-foreground); }
.tab.active { color: #4f8cff; font-weight: bold; border-bottom: 3rpx solid #4f8cff; } .tab.active { color: var(--brand); font-weight: bold; border-bottom: 3rpx solid var(--brand); }
.list { padding: 20rpx 30rpx; } .list { padding: 20rpx 30rpx; }
.item { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; } .item { background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
.item-title { font-size: 28rpx; } .item-title { font-size: 28rpx; }
.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: #999; } .empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: var(--muted-foreground); }
</style> </style>
mobile/src/pages/index/index.vue
+14 -14
View File
@@ -104,42 +104,42 @@ const goPost = (id: number) => uni.navigateTo({ url: `/pages/post-detail/index?i
<style scoped> <style scoped>
.home { padding-bottom: 20rpx; } .home { padding-bottom: 20rpx; }
.header-banner { .header-banner {
background: linear-gradient(135deg, #4f8cff, #6c5ce7); background: linear-gradient(135deg, var(--brand), #6c5ce7);
padding: 60rpx 40rpx; padding: 60rpx 40rpx;
text-align: center; text-align: center;
} }
.slogan { font-size: 44rpx; font-weight: bold; color: #fff; display: block; } .slogan { font-size: 44rpx; font-weight: bold; color: var(--card); display: block; }
.sub-slogan { font-size: 28rpx; color: rgba(255,255,255,0.8); margin-top: 16rpx; display: block; } .sub-slogan { font-size: 28rpx; color: rgba(255,255,255,0.8); margin-top: 16rpx; display: block; }
.section { padding: 30rpx 30rpx 0; } .section { padding: 30rpx 30rpx 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
.section-title { font-size: 32rpx; font-weight: bold; } .section-title { font-size: 32rpx; font-weight: bold; }
.section-more { font-size: 26rpx; color: #4f8cff; } .section-more { font-size: 26rpx; color: var(--brand); }
.course-scroll { white-space: nowrap; } .course-scroll { white-space: nowrap; }
.course-list { display: flex; gap: 20rpx; } .course-list { display: flex; gap: 20rpx; }
.course-card { .course-card {
width: 280rpx; background: #fff; border-radius: 16rpx; overflow: hidden; display: inline-block; width: 280rpx; background: var(--card); border-radius: 16rpx; overflow: hidden; display: inline-block;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
} }
.course-cover { width: 280rpx; height: 160rpx; } .course-cover { width: 280rpx; height: 160rpx; }
.course-info { padding: 16rpx; } .course-info { padding: 16rpx; }
.course-title { font-size: 26rpx; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .course-title { font-size: 26rpx; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-price { font-size: 24rpx; color: #4f8cff; margin-top: 8rpx; display: inline-block; } .course-price { font-size: 24rpx; color: var(--brand); margin-top: 8rpx; display: inline-block; }
.price-pay { color: #ff6b6b; } .price-pay { color: #ff6b6b; }
.prompt-list { background: #fff; border-radius: 16rpx; overflow: hidden; } .prompt-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
.prompt-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; } .prompt-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.prompt-item:last-child { border-bottom: none; } .prompt-item:last-child { border-bottom: none; }
.prompt-title { font-size: 28rpx; font-weight: 500; display: block; } .prompt-title { font-size: 28rpx; font-weight: 500; display: block; }
.prompt-desc { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prompt-desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circle-list { display: flex; flex-wrap: wrap; gap: 16rpx; } .circle-list { display: flex; flex-wrap: wrap; gap: 16rpx; }
.circle-item { .circle-item {
background: #fff; border-radius: 12rpx; padding: 20rpx; flex: 1; min-width: 200rpx; background: var(--card); border-radius: 12rpx; padding: 20rpx; flex: 1; min-width: 200rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
} }
.circle-name { font-size: 28rpx; font-weight: 500; color: #4f8cff; display: block; } .circle-name { font-size: 28rpx; font-weight: 500; color: var(--brand); display: block; }
.circle-count { font-size: 22rpx; color: #999; margin-top: 8rpx; display: block; } .circle-count { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
.post-list { background: #fff; border-radius: 16rpx; overflow: hidden; } .post-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
.post-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; } .post-item { padding: 24rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.post-item:last-child { border-bottom: none; } .post-item:last-child { border-bottom: none; }
.post-title { font-size: 28rpx; font-weight: 500; display: block; } .post-title { font-size: 28rpx; font-weight: 500; display: block; }
.post-meta { font-size: 22rpx; color: #999; margin-top: 8rpx; display: block; } .post-meta { font-size: 22rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
</style> </style>
mobile/src/pages/learning-progress/index.vue
+7 -7
View File
@@ -51,18 +51,18 @@ onMounted(async () => {
.learning-progress { padding: 30rpx; } .learning-progress { padding: 30rpx; }
.stats { display: flex; gap: 20rpx; margin-bottom: 40rpx; } .stats { display: flex; gap: 20rpx; margin-bottom: 40rpx; }
.stat-item { .stat-item {
flex: 1; background: #fff; border-radius: 16rpx; padding: 30rpx; text-align: center; flex: 1; background: var(--card); border-radius: 16rpx; padding: 30rpx; text-align: center;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
} }
.stat-value { font-size: 40rpx; font-weight: bold; color: #4f8cff; display: block; } .stat-value { font-size: 40rpx; font-weight: bold; color: var(--brand); display: block; }
.stat-label { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; } .stat-label { font-size: 24rpx; color: var(--muted-foreground); margin-top: 8rpx; display: block; }
.course-list { } .course-list { }
.course-item { .course-item {
display: flex; align-items: center; background: #fff; border-radius: 12rpx; display: flex; align-items: center; background: var(--card); border-radius: 12rpx;
padding: 24rpx; margin-bottom: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
} }
.course-name { width: 200rpx; font-size: 26rpx; font-weight: 500; } .course-name { width: 200rpx; font-size: 26rpx; font-weight: 500; }
.progress-bar { flex: 1; height: 16rpx; background: #f0f0f0; border-radius: 8rpx; margin: 0 20rpx; overflow: hidden; } .progress-bar { flex: 1; height: 16rpx; background: var(--border); border-radius: 8rpx; margin: 0 20rpx; overflow: hidden; }
.progress-fill { height: 100%; background: #4f8cff; border-radius: 8rpx; } .progress-fill { height: 100%; background: var(--brand); border-radius: 8rpx; }
.progress-text { font-size: 24rpx; color: #4f8cff; width: 80rpx; text-align: right; } .progress-text { font-size: 24rpx; color: var(--brand); width: 80rpx; text-align: right; }
</style> </style>
mobile/src/pages/lesson/index.vue
+3 -3
View File
@@ -49,11 +49,11 @@ async function markComplete() {
<style scoped> <style scoped>
.lesson { padding: 30rpx; } .lesson { padding: 30rpx; }
.content-area { background: #fff; border-radius: 16rpx; padding: 40rpx; } .content-area { background: var(--card); border-radius: 16rpx; padding: 40rpx; }
.lesson-title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 30rpx; } .lesson-title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 30rpx; }
.lesson-content { font-size: 28rpx; color: #333; line-height: 1.8; } .lesson-content { font-size: 28rpx; color: var(--foreground); line-height: 1.8; }
.btn-complete { .btn-complete {
background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx; background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
font-size: 28rpx; text-align: center; margin-top: 40rpx; border: none; font-size: 28rpx; text-align: center; margin-top: 40rpx; border: none;
} }
.completed-text { display: block; text-align: center; font-size: 28rpx; color: #52c41a; margin-top: 40rpx; } .completed-text { display: block; text-align: center; font-size: 28rpx; color: #52c41a; margin-top: 40rpx; }
mobile/src/pages/login/index.vue
+6 -6
View File
@@ -47,17 +47,17 @@ const goRegister = () => uni.navigateTo({ url: '/pages/register/index' })
<style scoped> <style scoped>
.login { padding: 100rpx 40rpx; } .login { padding: 100rpx 40rpx; }
.logo-area { text-align: center; margin-bottom: 80rpx; } .logo-area { text-align: center; margin-bottom: 80rpx; }
.logo-text { font-size: 52rpx; font-weight: bold; color: #4f8cff; display: block; } .logo-text { font-size: 52rpx; font-weight: bold; color: var(--brand); display: block; }
.logo-sub { font-size: 28rpx; color: #999; margin-top: 16rpx; display: block; } .logo-sub { font-size: 28rpx; color: var(--muted-foreground); margin-top: 16rpx; display: block; }
.form { } .form { }
.input { .input {
background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx; background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
margin-bottom: 24rpx; border: 1rpx solid #e8e8e8; margin-bottom: 24rpx; border: 1rpx solid var(--border);
} }
.btn-primary { .btn-primary {
background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx; background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none; font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
} }
.links { text-align: center; margin-top: 40rpx; } .links { text-align: center; margin-top: 40rpx; }
.link { font-size: 26rpx; color: #4f8cff; } .link { font-size: 26rpx; color: var(--brand); }
</style> </style>
mobile/src/pages/membership/index.vue
+3 -3
View File
@@ -48,14 +48,14 @@ async function createOrder(plan: any) {
border-radius: 20rpx; padding: 40rpx; text-align: center; margin-bottom: 40rpx; border-radius: 20rpx; padding: 40rpx; text-align: center; margin-bottom: 40rpx;
} }
.plan-label { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; } .plan-label { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; }
.plan-name { font-size: 40rpx; font-weight: bold; color: #fff; margin: 16rpx 0; display: block; } .plan-name { font-size: 40rpx; font-weight: bold; color: var(--card); margin: 16rpx 0; display: block; }
.plan-expire { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; } .plan-expire { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; }
.plans { display: flex; gap: 24rpx; } .plans { display: flex; gap: 24rpx; }
.plan-card { .plan-card {
flex: 1; background: #fff; border-radius: 16rpx; padding: 40rpx 30rpx; text-align: center; flex: 1; background: var(--card); border-radius: 16rpx; padding: 40rpx 30rpx; text-align: center;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06); box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
} }
.plan-name { font-size: 30rpx; font-weight: 500; display: block; } .plan-name { font-size: 30rpx; font-weight: 500; display: block; }
.plan-price { font-size: 44rpx; font-weight: bold; color: #ff6b6b; margin: 20rpx 0; display: block; } .plan-price { font-size: 44rpx; font-weight: bold; color: #ff6b6b; margin: 20rpx 0; display: block; }
.plan-desc { font-size: 24rpx; color: #999; } .plan-desc { font-size: 24rpx; color: var(--muted-foreground); }
</style> </style>
mobile/src/pages/post-detail/index.vue
+11 -11
View File
@@ -79,22 +79,22 @@ async function submitComment() {
<style scoped> <style scoped>
.post-detail { padding: 30rpx; } .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; } .title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 16rpx; }
.meta { display: flex; justify-content: space-between; margin-bottom: 24rpx; } .meta { display: flex; justify-content: space-between; margin-bottom: 24rpx; }
.author { font-size: 24rpx; color: #4f8cff; } .author { font-size: 24rpx; color: var(--brand); }
.time { font-size: 22rpx; color: #ccc; } .time { font-size: 22rpx; color: var(--muted-foreground); }
.content { font-size: 28rpx; color: #333; line-height: 1.8; margin-bottom: 24rpx; } .content { font-size: 28rpx; color: var(--foreground); line-height: 1.8; margin-bottom: 24rpx; }
.actions { } .actions { }
.action { font-size: 26rpx; color: #666; } .action { font-size: 26rpx; color: var(--muted-foreground); }
.comments-section { margin-top: 30rpx; } .comments-section { margin-top: 30rpx; }
.section-title { font-size: 30rpx; font-weight: bold; display: block; margin-bottom: 20rpx; } .section-title { font-size: 30rpx; font-weight: bold; display: block; margin-bottom: 20rpx; }
.comment-list { background: #fff; border-radius: 16rpx; padding: 20rpx; } .comment-list { background: var(--card); border-radius: 16rpx; padding: 20rpx; }
.comment { padding: 16rpx 0; border-bottom: 1rpx solid #f5f5f5; } .comment { padding: 16rpx 0; border-bottom: 1rpx solid var(--muted); }
.comment:last-child { border-bottom: none; } .comment:last-child { border-bottom: none; }
.comment-author { font-size: 24rpx; color: #4f8cff; display: block; margin-bottom: 8rpx; } .comment-author { font-size: 24rpx; color: var(--brand); display: block; margin-bottom: 8rpx; }
.comment-content { font-size: 26rpx; color: #333; } .comment-content { font-size: 26rpx; color: var(--foreground); }
.comment-input-area { display: flex; align-items: center; gap: 16rpx; margin-top: 24rpx; } .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; } .comment-input { flex: 1; background: var(--card); border-radius: 12rpx; padding: 20rpx 24rpx; font-size: 26rpx; border: 1rpx solid var(--border); }
.btn-submit { background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 16rpx 32rpx; font-size: 26rpx; border: none; } .btn-submit { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 16rpx 32rpx; font-size: 26rpx; border: none; }
</style> </style>
mobile/src/pages/profile/index.vue
+8 -8
View File
@@ -78,31 +78,31 @@ function handleLogout() {
<style scoped> <style scoped>
.profile { padding: 30rpx; } .profile { padding: 30rpx; }
.user-card { .user-card {
background: linear-gradient(135deg, #4f8cff, #6c5ce7); background: linear-gradient(135deg, var(--brand), #6c5ce7);
border-radius: 20rpx; padding: 40rpx; display: flex; align-items: center; margin-bottom: 30rpx; border-radius: 20rpx; padding: 40rpx; display: flex; align-items: center; margin-bottom: 30rpx;
} }
.avatar { .avatar {
width: 100rpx; height: 100rpx; border-radius: 50%; background: rgba(255,255,255,0.2); width: 100rpx; height: 100rpx; border-radius: 50%; background: rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center; margin-right: 24rpx; display: flex; align-items: center; justify-content: center; margin-right: 24rpx;
} }
.avatar-text { font-size: 40rpx; color: #fff; font-weight: bold; } .avatar-text { font-size: 40rpx; color: var(--card); font-weight: bold; }
.user-info { flex: 1; } .user-info { flex: 1; }
.nickname { font-size: 32rpx; font-weight: bold; color: #fff; display: block; } .nickname { font-size: 32rpx; font-weight: bold; color: var(--card); display: block; }
.member { font-size: 22rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: inline-block; background: rgba(255,255,255,0.15); padding: 4rpx 16rpx; border-radius: 20rpx; } .member { font-size: 22rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: inline-block; background: rgba(255,255,255,0.15); padding: 4rpx 16rpx; border-radius: 20rpx; }
.member.free { background: transparent; } .member.free { background: transparent; }
.login-prompt { padding: 40rpx; text-align: center; } .login-prompt { padding: 40rpx; text-align: center; }
.login-text { font-size: 32rpx; color: #fff; } .login-text { font-size: 32rpx; color: var(--card); }
.menu-list { background: #fff; border-radius: 16rpx; overflow: hidden; } .menu-list { background: var(--card); border-radius: 16rpx; overflow: hidden; }
.menu-item { .menu-item {
display: flex; align-items: center; padding: 28rpx 30rpx; display: flex; align-items: center; padding: 28rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5; border-bottom: 1rpx solid var(--muted);
} }
.menu-item:last-child { border-bottom: none; } .menu-item:last-child { border-bottom: none; }
.menu-icon { font-size: 32rpx; margin-right: 20rpx; } .menu-icon { font-size: 32rpx; margin-right: 20rpx; }
.menu-text { flex: 1; font-size: 28rpx; } .menu-text { flex: 1; font-size: 28rpx; }
.menu-arrow { font-size: 28rpx; color: #ccc; } .menu-arrow { font-size: 28rpx; color: var(--muted-foreground); }
.btn-logout { .btn-logout {
background: #fff; color: #ff4d4f; border-radius: 12rpx; padding: 24rpx; background: var(--card); color: #ff4d4f; border-radius: 12rpx; padding: 24rpx;
font-size: 28rpx; text-align: center; margin-top: 40rpx; border: 1rpx solid #ff4d4f; font-size: 28rpx; text-align: center; margin-top: 40rpx; border: 1rpx solid #ff4d4f;
} }
</style> </style>
mobile/src/pages/prompt-detail/index.vue
+7 -7
View File
@@ -52,13 +52,13 @@ async function toggleFavorite() {
<style scoped> <style scoped>
.prompt-detail { padding: 30rpx; } .prompt-detail { padding: 30rpx; }
.card { background: #fff; border-radius: 16rpx; padding: 30rpx; } .card { background: var(--card); border-radius: 16rpx; padding: 30rpx; }
.title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 12rpx; } .title { font-size: 36rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
.desc { font-size: 26rpx; color: #666; display: block; margin-bottom: 30rpx; } .desc { font-size: 26rpx; color: var(--muted-foreground); display: block; margin-bottom: 30rpx; }
.content-box { background: #f8f9ff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 30rpx; } .content-box { background: var(--muted); border-radius: 12rpx; padding: 24rpx; margin-bottom: 30rpx; }
.content-label { font-size: 24rpx; color: #4f8cff; display: block; margin-bottom: 12rpx; } .content-label { font-size: 24rpx; color: var(--brand); display: block; margin-bottom: 12rpx; }
.content-text { font-size: 26rpx; color: #333; line-height: 1.7; } .content-text { font-size: 26rpx; color: var(--foreground); line-height: 1.7; }
.actions { display: flex; gap: 20rpx; } .actions { display: flex; gap: 20rpx; }
.btn-copy { flex: 1; background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: none; } .btn-copy { flex: 1; background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: none; }
.btn-like { flex: 1; background: #fff; color: #ff6b6b; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: 1rpx solid #ff6b6b; } .btn-like { flex: 1; background: var(--card); color: #ff6b6b; border-radius: 10rpx; padding: 20rpx; font-size: 26rpx; text-align: center; border: 1rpx solid #ff6b6b; }
</style> </style>
mobile/src/pages/prompts/index.vue
+7 -7
View File
@@ -51,22 +51,22 @@ const goDetail = (id: number) => uni.navigateTo({ url: `/pages/prompt-detail/ind
<style scoped> <style scoped>
.prompts { } .prompts { }
.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-scroll { white-space: nowrap; }
.category-list { display: flex; gap: 16rpx; } .category-list { display: flex; gap: 16rpx; }
.tag { .tag {
display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx; display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx;
background: #f5f5f5; color: #666; background: var(--muted); color: var(--muted-foreground);
} }
.tag.active { background: #4f8cff; color: #fff; } .tag.active { background: var(--brand); color: var(--card); }
.prompt-list { padding: 20rpx 30rpx; } .prompt-list { padding: 20rpx 30rpx; }
.prompt-card { .prompt-card {
background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; background: var(--card); border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
} }
.title { font-size: 28rpx; font-weight: 500; display: block; } .title { font-size: 28rpx; font-weight: 500; display: block; }
.desc { font-size: 24rpx; color: #999; margin-top: 12rpx; display: block; } .desc { font-size: 24rpx; color: var(--muted-foreground); margin-top: 12rpx; display: block; }
.meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; } .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; }
.tag-label { font-size: 22rpx; color: #4f8cff; background: #eef3ff; padding: 4rpx 16rpx; border-radius: 20rpx; } .tag-label { font-size: 22rpx; color: var(--brand); background: #eef3ff; padding: 4rpx 16rpx; border-radius: 20rpx; }
.views { font-size: 22rpx; color: #ccc; } .views { font-size: 22rpx; color: var(--muted-foreground); }
</style> </style>
mobile/src/pages/register/index.vue
+4 -4
View File
@@ -52,13 +52,13 @@ const goLogin = () => uni.navigateTo({ url: '/pages/login/index' })
<style scoped> <style scoped>
.register { padding: 100rpx 40rpx; } .register { padding: 100rpx 40rpx; }
.input { .input {
background: #fff; border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx; background: var(--card); border-radius: 12rpx; padding: 24rpx 30rpx; font-size: 28rpx;
margin-bottom: 24rpx; border: 1rpx solid #e8e8e8; margin-bottom: 24rpx; border: 1rpx solid var(--border);
} }
.btn-primary { .btn-primary {
background: #4f8cff; color: #fff; border-radius: 12rpx; padding: 24rpx; background: var(--brand); color: var(--card); border-radius: 12rpx; padding: 24rpx;
font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none; font-size: 30rpx; text-align: center; margin-top: 30rpx; border: none;
} }
.links { text-align: center; margin-top: 40rpx; } .links { text-align: center; margin-top: 40rpx; }
.link { font-size: 26rpx; color: #4f8cff; } .link { font-size: 26rpx; color: var(--brand); }
</style> </style>
mobile/src/pages/sandbox/index.vue
+2 -2
View File
@@ -96,7 +96,7 @@ function onModelChange(e: any) {
.content { .content {
display: inline-block; padding: 16rpx 20rpx; border-radius: 12rpx; font-size: 28rpx; line-height: 1.6; display: inline-block; padding: 16rpx 20rpx; border-radius: 12rpx; font-size: 28rpx; line-height: 1.6;
} }
.message.user .content { background: var(--brand); color: #fff; border-radius: 12rpx 0 12rpx 12rpx; } .message.user .content { background: var(--brand); color: var(--card); border-radius: 12rpx 0 12rpx 12rpx; }
.message.ai .content { background: var(--card); color: var(--foreground); border-radius: 0 12rpx 12rpx 12rpx; } .message.ai .content { background: var(--card); color: var(--foreground); border-radius: 0 12rpx 12rpx 12rpx; }
.input-area { .input-area {
display: flex; align-items: center; padding: 16rpx 30rpx; background: var(--card); display: flex; align-items: center; padding: 16rpx 30rpx; background: var(--card);
@@ -104,7 +104,7 @@ function onModelChange(e: any) {
} }
.input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; } .input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
.btn-send { .btn-send {
background: var(--brand); color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx; background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 14rpx 28rpx;
font-size: 26rpx; margin-left: 16rpx; border: none; font-size: 26rpx; margin-left: 16rpx; border: none;
} }
</style> </style>
mobile/src/pages/search/index.vue
+9 -9
View File
@@ -67,18 +67,18 @@ function goDetail(item: any) {
<style scoped> <style scoped>
.search { } .search { }
.search-bar { display: flex; gap: 16rpx; padding: 20rpx 30rpx; background: #fff; } .search-bar { display: flex; gap: 16rpx; padding: 20rpx 30rpx; background: var(--card); }
.input { flex: 1; background: #f5f5f5; border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; } .input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
.btn-search { background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx; font-size: 26rpx; border: none; } .btn-search { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 14rpx 28rpx; font-size: 26rpx; border: none; }
.tabs { display: flex; background: #fff; padding: 16rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; } .tabs { display: flex; background: var(--card); padding: 16rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.tab { font-size: 26rpx; padding: 8rpx 20rpx; margin-right: 12rpx; color: #666; } .tab { font-size: 26rpx; padding: 8rpx 20rpx; margin-right: 12rpx; color: var(--muted-foreground); }
.tab.active { color: #4f8cff; font-weight: bold; border-bottom: 3rpx solid #4f8cff; } .tab.active { color: var(--brand); font-weight: bold; border-bottom: 3rpx solid var(--brand); }
.result-list { padding: 20rpx 30rpx; } .result-list { padding: 20rpx 30rpx; }
.result-item { .result-item {
background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
} }
.result-title { font-size: 28rpx; font-weight: 500; display: block; margin-bottom: 8rpx; } .result-title { font-size: 28rpx; font-weight: 500; display: block; margin-bottom: 8rpx; }
.result-desc { font-size: 24rpx; color: #999; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-desc { font-size: 24rpx; color: var(--muted-foreground); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: #999; } .empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: var(--muted-foreground); }
</style> </style>