|
|
@@ -919,6 +919,13 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+// ===== 孩子首页专属色阶(天空蓝渐变族 + 徽章金;单页专用,约定见 uni.scss §14)=====
|
|
|
+$c-ci-sky: #E0ECF8; // 顶部渐变终(浅天蓝)
|
|
|
+$c-ci-navy: #1E4A7A; // 深海军蓝文字
|
|
|
+$c-ci-gold: #FFB800; // 徽章金渐变终
|
|
|
+$c-ci-blue-1: #DCE8F5; // 空态卡渐变起
|
|
|
+$c-ci-blue-2: #C8DDF0; // 空态卡渐变终
|
|
|
+
|
|
|
/* ============================================================
|
|
|
知心益家 — 孩子端首页 Flat Rounded 设计系统
|
|
|
色彩体系:品牌橙($brand-primary)+浅橙($brand-primary-light) | 双重阴影 | 4rpx边框
|
|
|
@@ -956,7 +963,7 @@ padding-top: 4rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10rpx;
|
|
|
- background: linear-gradient(145deg, $uni-bg-color, #E0ECF8);
|
|
|
+ background: linear-gradient(145deg, $uni-bg-color, $c-ci-sky);
|
|
|
padding: 12rpx 24rpx 12rpx 18rpx;
|
|
|
border-radius: 40rpx;
|
|
|
border: 4rpx solid $brand-primary-light;
|
|
|
@@ -985,14 +992,14 @@ padding-top: 4rpx;
|
|
|
.streak-days {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 800;
|
|
|
- color: #1E4A7A;
|
|
|
+ color: $c-ci-navy;
|
|
|
line-height: 1.1;
|
|
|
}
|
|
|
|
|
|
.streak-unit {
|
|
|
font-size: 18rpx;
|
|
|
font-weight: 600;
|
|
|
- color: #2563EB;
|
|
|
+ color: $status-info-deep;
|
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------------
|
|
|
@@ -1121,7 +1128,7 @@ padding-top: 4rpx;
|
|
|
|
|
|
.progress-fill {
|
|
|
height: 100%;
|
|
|
- background: linear-gradient(90deg, $accent-gold, #FFB800);
|
|
|
+ background: linear-gradient(90deg, $accent-gold, $c-ci-gold);
|
|
|
border-radius: 6rpx;
|
|
|
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
}
|
|
|
@@ -1174,7 +1181,7 @@ padding-top: 4rpx;
|
|
|
align-items: center;
|
|
|
width: 200rpx;
|
|
|
min-height: 260rpx;
|
|
|
- background: linear-gradient(145deg, $app-surface, var(--bg-grey, #EDF2F7));
|
|
|
+ background: linear-gradient(145deg, $app-surface, var(--bg-grey, $uni-bg-color-grey));
|
|
|
border-radius: 28rpx;
|
|
|
padding: 24rpx 16rpx 20rpx;
|
|
|
margin-right: 20rpx;
|
|
|
@@ -1211,12 +1218,12 @@ padding-top: 4rpx;
|
|
|
}
|
|
|
|
|
|
/* 分类图标底色 */
|
|
|
-.task-cat--study .task-card-icon-wrap { background: rgba(14,165,233,0.12); border-color: #BAE6FD; }
|
|
|
-.task-cat--reading .task-card-icon-wrap { background: rgba(34,197,94,0.12); border-color: #BBF7D0; }
|
|
|
+.task-cat--study .task-card-icon-wrap { background: rgba(14,165,233,0.12); border-color: $tint-sky-line; }
|
|
|
+.task-cat--reading .task-card-icon-wrap { background: rgba(34,197,94,0.12); border-color: $tint-green-line; }
|
|
|
.task-cat--life .task-card-icon-wrap { background: rgba(2,132,199,0.12); border-color: $uni-border-color; }
|
|
|
-.task-cat--sports .task-card-icon-wrap { background: rgba(59,130,246,0.12); border-color: #BFDBFE; }
|
|
|
-.task-cat--chores .task-card-icon-wrap { background: rgba(245,158,11,0.12); border-color: #FDE68A; }
|
|
|
-.task-cat--art .task-card-icon-wrap { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }
|
|
|
+.task-cat--sports .task-card-icon-wrap { background: rgba(59,130,246,0.12); border-color: $tint-blue-line; }
|
|
|
+.task-cat--chores .task-card-icon-wrap { background: rgba(245,158,11,0.12); border-color: $status-warning-light; }
|
|
|
+.task-cat--art .task-card-icon-wrap { background: rgba(236,72,153,0.12); border-color: $tint-pink-line; }
|
|
|
.task-cat--default .task-card-icon-wrap { background: rgba(148,163,184,0.12); border-color: $uni-border-color-light; }
|
|
|
|
|
|
.task-card-name {
|
|
|
@@ -1303,7 +1310,7 @@ padding-top: 4rpx;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 28rpx 16rpx;
|
|
|
- background: linear-gradient(145deg, $app-surface, var(--bg-grey, #EDF2F7));
|
|
|
+ background: linear-gradient(145deg, $app-surface, var(--bg-grey, $uni-bg-color-grey));
|
|
|
border-radius: 28rpx;
|
|
|
border: 4rpx solid var(--border, $uni-border-color);
|
|
|
box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
|
|
|
@@ -1339,11 +1346,11 @@ padding-top: 4rpx;
|
|
|
}
|
|
|
|
|
|
/* 各按钮图标色彩 */
|
|
|
-.quick-icon--tasks { background: rgba(14,165,233,0.15); border-color: #BAE6FD; }
|
|
|
-.quick-icon--rewards { background: rgba(245,158,11,0.15); border-color: #FDE68A; }
|
|
|
+.quick-icon--tasks { background: rgba(14,165,233,0.15); border-color: $tint-sky-line; }
|
|
|
+.quick-icon--rewards { background: rgba(245,158,11,0.15); border-color: $status-warning-light; }
|
|
|
.quick-icon--growth { background: rgba(2,132,199,0.15); border-color: $uni-border-color; }
|
|
|
-.quick-icon--games { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }
|
|
|
-.quick-icon--quiz { background: rgba(99,102,241,0.15); border-color: #C7D2FE; }
|
|
|
+.quick-icon--games { background: rgba(236,72,153,0.12); border-color: $tint-pink-line; }
|
|
|
+.quick-icon--quiz { background: rgba(99,102,241,0.15); border-color: $tint-indigo-line; }
|
|
|
|
|
|
.quick-btn-label {
|
|
|
font-size: 28rpx;
|
|
|
@@ -1386,7 +1393,7 @@ padding-top: 4rpx;
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
border-radius: 50%;
|
|
|
- background: linear-gradient(145deg, #DCE8F5, #C8DDF0);
|
|
|
+ background: linear-gradient(145deg, $c-ci-blue-1, $c-ci-blue-2);
|
|
|
border: 4rpx solid var(--border, $uni-border-color);
|
|
|
box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
|
|
|
4rpx 4rpx 14rpx rgba(249,115,22,0.08);
|
|
|
@@ -1414,7 +1421,7 @@ padding-top: 4rpx;
|
|
|
}
|
|
|
|
|
|
.achievement-icon-wrap--locked {
|
|
|
- background: var(--bg-grey, #EDF2F7);
|
|
|
+ background: var(--bg-grey, $uni-bg-color-grey);
|
|
|
border-color: var(--border-light, $uni-border-color-light);
|
|
|
box-shadow: none;
|
|
|
}
|