|
|
@@ -271,26 +271,40 @@ onShow: function() {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
|
|
|
+// 文章类型标签四色(类型语义,本页专有;article 浅底已提全局 $tint-info-soft)
|
|
|
+$c-type-article-ink: #2b7fc4; // 文章(蓝)
|
|
|
+$c-type-knowledge-bg: #e8f8ee; // 知识(绿浅底)
|
|
|
+$c-type-knowledge-ink:#2a9055; // 知识(绿)
|
|
|
+$c-type-course-bg: #fef3e2; // 课程(橙浅底)
|
|
|
+$c-type-course-ink: #c47a2b; // 课程(橙)
|
|
|
+$c-type-tip-bg: #f3e8fd; // 贴士(紫浅底)
|
|
|
+$c-type-tip-ink: #7b2bc4; // 贴士(紫)
|
|
|
+// C-2 待翻转:旧品牌蓝残留(filter-chip.active 底色 / article-category 前景 + 浅底)。
|
|
|
+// B 批纪律保原值令牌化,翻转移交 C-2 角色分流(此处为品牌交互用法,预案翻品牌橙)
|
|
|
+$c-brand-legacy: #5B9BD5;
|
|
|
+$c-brand-legacy-tint: rgba(91,155,213,0.1);
|
|
|
+
|
|
|
.container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
min-height: 100vh;
|
|
|
- background: #f5f7fa;
|
|
|
+ background: $app-bg;
|
|
|
}
|
|
|
|
|
|
/* 筛选条 */
|
|
|
.filter-section {
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
padding: 16rpx 0 12rpx;
|
|
|
- border-bottom: 1rpx solid #eee;
|
|
|
+ border-bottom: 1rpx solid $facade-fill-3;
|
|
|
}
|
|
|
.dimension-scroll,
|
|
|
.category-scroll {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.dimension-scroll {
|
|
|
- border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ border-bottom: 1rpx solid $facade-fill;
|
|
|
padding-bottom: 12rpx;
|
|
|
}
|
|
|
.filter-chips {
|
|
|
@@ -302,14 +316,14 @@ onShow: function() {
|
|
|
display: inline-block;
|
|
|
padding: 8rpx 24rpx;
|
|
|
font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
- background: #f0f0f0;
|
|
|
+ color: $facade-text-body;
|
|
|
+ background: $facade-fill;
|
|
|
border-radius: 30rpx;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.filter-chip.active {
|
|
|
- background: #5B9BD5;
|
|
|
- color: #fff;
|
|
|
+ background: $c-brand-legacy;
|
|
|
+ color: $app-surface;
|
|
|
}
|
|
|
.filter-chip:first-child {
|
|
|
margin-left: 4rpx;
|
|
|
@@ -332,28 +346,28 @@ onShow: function() {
|
|
|
font-size: 18rpx;
|
|
|
padding: 2rpx 10rpx;
|
|
|
border-radius: 6rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- color: #666;
|
|
|
+ background: $facade-fill;
|
|
|
+ color: $facade-text-body;
|
|
|
}
|
|
|
.type-tag.type-article {
|
|
|
- background: #e8f4fd;
|
|
|
- color: #2b7fc4;
|
|
|
+ background: $tint-info-soft;
|
|
|
+ color: $c-type-article-ink;
|
|
|
}
|
|
|
.type-tag.type-knowledge {
|
|
|
- background: #e8f8ee;
|
|
|
- color: #2a9055;
|
|
|
+ background: $c-type-knowledge-bg;
|
|
|
+ color: $c-type-knowledge-ink;
|
|
|
}
|
|
|
.type-tag.type-course {
|
|
|
- background: #fef3e2;
|
|
|
- color: #c47a2b;
|
|
|
+ background: $c-type-course-bg;
|
|
|
+ color: $c-type-course-ink;
|
|
|
}
|
|
|
.type-tag.type-tip {
|
|
|
- background: #f3e8fd;
|
|
|
- color: #7b2bc4;
|
|
|
+ background: $c-type-tip-bg;
|
|
|
+ color: $c-type-tip-ink;
|
|
|
}
|
|
|
.difficulty-tag {
|
|
|
font-size: 18rpx;
|
|
|
- color: #f59e0b;
|
|
|
+ color: $dim-wealth;
|
|
|
}
|
|
|
|
|
|
/* 文章列表 */
|
|
|
@@ -370,7 +384,7 @@ onShow: function() {
|
|
|
}
|
|
|
.loading-text {
|
|
|
font-size: 26rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
|
.empty-icon {
|
|
|
font-size: 100rpx;
|
|
|
@@ -378,13 +392,13 @@ onShow: function() {
|
|
|
}
|
|
|
.empty-text {
|
|
|
font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
|
.article-grid {
|
|
|
padding: 20rpx 24rpx;
|
|
|
}
|
|
|
.article-card {
|
|
|
- background: #fff;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 16rpx;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 20rpx;
|
|
|
@@ -393,7 +407,7 @@ onShow: function() {
|
|
|
.article-cover {
|
|
|
width: 100%;
|
|
|
height: 280rpx;
|
|
|
- background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
+ background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
|
|
|
}
|
|
|
.article-body {
|
|
|
padding: 20rpx;
|
|
|
@@ -405,28 +419,28 @@ onShow: function() {
|
|
|
}
|
|
|
.article-category {
|
|
|
font-size: 20rpx;
|
|
|
- color: #5B9BD5;
|
|
|
- background: rgba(91,155,213,0.1);
|
|
|
+ color: $c-brand-legacy;
|
|
|
+ background: $c-brand-legacy-tint;
|
|
|
padding: 2rpx 12rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
.article-date {
|
|
|
font-size: 20rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
|
.article-title {
|
|
|
display: block;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ color: $facade-text-strong;
|
|
|
margin-bottom: 8rpx;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
.article-summary {
|
|
|
display: block;
|
|
|
font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
+ color: $facade-text-body;
|
|
|
line-height: 1.5;
|
|
|
margin-bottom: 12rpx;
|
|
|
overflow: hidden;
|
|
|
@@ -442,11 +456,11 @@ onShow: function() {
|
|
|
}
|
|
|
.article-author {
|
|
|
font-size: 20rpx;
|
|
|
- color: #999;
|
|
|
+ color: $facade-text-muted;
|
|
|
}
|
|
|
.article-read-count {
|
|
|
font-size: 20rpx;
|
|
|
- color: #bbb;
|
|
|
+ color: $facade-text-ghost-light;
|
|
|
}
|
|
|
.loading-more,
|
|
|
.no-more {
|
|
|
@@ -455,21 +469,21 @@ onShow: function() {
|
|
|
}
|
|
|
.no-more-text {
|
|
|
font-size: 24rpx;
|
|
|
- color: #ccc;
|
|
|
+ color: $facade-text-ghost;
|
|
|
}
|
|
|
|
|
|
/* 未登录提示 */
|
|
|
.login-hint-bar {
|
|
|
text-align: center;
|
|
|
padding: 20rpx;
|
|
|
- background: #fef9e7;
|
|
|
- border-top: 1rpx solid #f0e6c0;
|
|
|
+ background: $hint-cream-bg;
|
|
|
+ border-top: 1rpx solid $hint-cream-border;
|
|
|
margin: 20rpx 24rpx 0;
|
|
|
border-radius: 12rpx;
|
|
|
}
|
|
|
.login-hint-text {
|
|
|
font-size: 24rpx;
|
|
|
- color: #b8860b;
|
|
|
+ color: $hint-gold-ink;
|
|
|
}
|
|
|
|
|
|
/* 底部占位 */
|