|
@@ -918,10 +918,10 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
/* ============================================================
|
|
/* ============================================================
|
|
|
知心益家 — 孩子端首页 Flat Rounded 设计系统
|
|
知心益家 — 孩子端首页 Flat Rounded 设计系统
|
|
|
- 色彩体系:品牌蓝(#5B9BD5)+浅蓝(#8FC5E8) | 双重阴影 | 4rpx边框
|
|
|
|
|
|
|
+ 色彩体系:品牌橙(#F97316)+浅橙(#FB923C) | 双重阴影 | 4rpx边框
|
|
|
参考:uni.scss --color-primary, --bg, --shadow-clay, --radius-md
|
|
参考:uni.scss --color-primary, --bg, --shadow-clay, --radius-md
|
|
|
============================================================ */
|
|
============================================================ */
|
|
|
|
|
|
|
@@ -959,9 +959,9 @@ padding-top: 4rpx;
|
|
|
background: linear-gradient(145deg, #F5F9FC, #E0ECF8);
|
|
background: linear-gradient(145deg, #F5F9FC, #E0ECF8);
|
|
|
padding: 12rpx 24rpx 12rpx 18rpx;
|
|
padding: 12rpx 24rpx 12rpx 18rpx;
|
|
|
border-radius: 40rpx;
|
|
border-radius: 40rpx;
|
|
|
- border: 4rpx solid #8FC5E8;
|
|
|
|
|
|
|
+ border: 4rpx solid $brand-primary-light;
|
|
|
box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
|
|
box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
|
|
|
- 4rpx 4rpx 14rpx rgba(143,197,232,0.30);
|
|
|
|
|
|
|
+ 4rpx 4rpx 14rpx rgba(251,146,60,0.30);
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
}
|
|
}
|
|
@@ -996,17 +996,17 @@ padding-top: 4rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ----------------------------------------------------------
|
|
/* ----------------------------------------------------------
|
|
|
- 积分卡片 — Flat Rounded 蓝色渐变
|
|
|
|
|
|
|
+ 积分卡片 — Flat Rounded 橙色渐变
|
|
|
---------------------------------------------------------- */
|
|
---------------------------------------------------------- */
|
|
|
.points-card {
|
|
.points-card {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- background: linear-gradient(145deg, #8FC5E8, #5B9BD5);
|
|
|
|
|
|
|
+ background: linear-gradient(145deg, $brand-primary-light, $brand-primary);
|
|
|
border-radius: 32rpx;
|
|
border-radius: 32rpx;
|
|
|
padding: 32rpx;
|
|
padding: 32rpx;
|
|
|
margin-bottom: 28rpx;
|
|
margin-bottom: 28rpx;
|
|
|
- border: 4rpx solid #3A7CC4;
|
|
|
|
|
|
|
+ border: 4rpx solid $brand-primary-dark;
|
|
|
box-shadow: inset -4rpx -4rpx 14rpx rgba(255,255,255,0.20),
|
|
box-shadow: inset -4rpx -4rpx 14rpx rgba(255,255,255,0.20),
|
|
|
- 8rpx 8rpx 28rpx rgba(91,155,213,0.25);
|
|
|
|
|
|
|
+ 8rpx 8rpx 28rpx rgba(249,115,22,0.25);
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
}
|
|
}
|
|
@@ -1015,7 +1015,7 @@ padding-top: 4rpx;
|
|
|
.points-card-pressed {
|
|
.points-card-pressed {
|
|
|
transform: scale(0.97);
|
|
transform: scale(0.97);
|
|
|
box-shadow: inset 2rpx 2rpx 10rpx rgba(0,0,0,0.08),
|
|
box-shadow: inset 2rpx 2rpx 10rpx rgba(0,0,0,0.08),
|
|
|
- 4rpx 4rpx 16rpx rgba(91,155,213,0.18);
|
|
|
|
|
|
|
+ 4rpx 4rpx 16rpx rgba(249,115,22,0.18);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* 装饰圆 */
|
|
/* 装饰圆 */
|
|
@@ -1180,7 +1180,7 @@ padding-top: 4rpx;
|
|
|
margin-right: 20rpx;
|
|
margin-right: 20rpx;
|
|
|
border: 4rpx solid var(--border, #CBD5E1);
|
|
border: 4rpx solid var(--border, #CBD5E1);
|
|
|
box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
|
|
box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
|
|
|
- 6rpx 6rpx 20rpx rgba(91,155,213,0.08);
|
|
|
|
|
|
|
+ 6rpx 6rpx 20rpx rgba(249,115,22,0.08);
|
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
@@ -1202,7 +1202,7 @@ padding-top: 4rpx;
|
|
|
margin-bottom: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
|
border: 3rpx solid var(--border-light, #E2E8F0);
|
|
border: 3rpx solid var(--border-light, #E2E8F0);
|
|
|
box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5),
|
|
box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5),
|
|
|
- 3rpx 3rpx 8rpx rgba(91,155,213,0.06);
|
|
|
|
|
|
|
+ 3rpx 3rpx 8rpx rgba(249,115,22,0.06);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.task-card-icon {
|
|
.task-card-icon {
|
|
@@ -1213,7 +1213,7 @@ padding-top: 4rpx;
|
|
|
/* 分类图标底色 */
|
|
/* 分类图标底色 */
|
|
|
.task-cat--study .task-card-icon-wrap { background: rgba(14,165,233,0.12); border-color: #BAE6FD; }
|
|
.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--reading .task-card-icon-wrap { background: rgba(34,197,94,0.12); border-color: #BBF7D0; }
|
|
|
-.task-cat--life .task-card-icon-wrap { background: rgba(91,155,213,0.12); border-color: #CBD5E1; }
|
|
|
|
|
|
|
+.task-cat--life .task-card-icon-wrap { background: rgba(2,132,199,0.12); border-color: #CBD5E1; }
|
|
|
.task-cat--sports .task-card-icon-wrap { background: rgba(59,130,246,0.12); border-color: #BFDBFE; }
|
|
.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--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--art .task-card-icon-wrap { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }
|
|
@@ -1307,7 +1307,7 @@ padding-top: 4rpx;
|
|
|
border-radius: 28rpx;
|
|
border-radius: 28rpx;
|
|
|
border: 4rpx solid var(--border, #CBD5E1);
|
|
border: 4rpx solid var(--border, #CBD5E1);
|
|
|
box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
|
|
box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
|
|
|
- 6rpx 6rpx 20rpx rgba(91,155,213,0.08);
|
|
|
|
|
|
|
+ 6rpx 6rpx 20rpx rgba(249,115,22,0.08);
|
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
min-height: 180rpx;
|
|
min-height: 180rpx;
|
|
|
}
|
|
}
|
|
@@ -1316,7 +1316,7 @@ padding-top: 4rpx;
|
|
|
.quick-btn-pressed {
|
|
.quick-btn-pressed {
|
|
|
transform: scale(0.94);
|
|
transform: scale(0.94);
|
|
|
box-shadow: inset 2rpx 2rpx 8rpx rgba(0,0,0,0.06),
|
|
box-shadow: inset 2rpx 2rpx 8rpx rgba(0,0,0,0.06),
|
|
|
- 3rpx 3rpx 10rpx rgba(91,155,213,0.06);
|
|
|
|
|
|
|
+ 3rpx 3rpx 10rpx rgba(249,115,22,0.06);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.quick-btn-icon {
|
|
.quick-btn-icon {
|
|
@@ -1329,7 +1329,7 @@ padding-top: 4rpx;
|
|
|
margin-bottom: 14rpx;
|
|
margin-bottom: 14rpx;
|
|
|
border: 3rpx solid var(--border-light, #E2E8F0);
|
|
border: 3rpx solid var(--border-light, #E2E8F0);
|
|
|
box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5),
|
|
box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5),
|
|
|
- 3rpx 3rpx 8rpx rgba(91,155,213,0.06);
|
|
|
|
|
|
|
+ 3rpx 3rpx 8rpx rgba(249,115,22,0.06);
|
|
|
transition: transform 0.2s ease;
|
|
transition: transform 0.2s ease;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1341,7 +1341,7 @@ padding-top: 4rpx;
|
|
|
/* 各按钮图标色彩 */
|
|
/* 各按钮图标色彩 */
|
|
|
.quick-icon--tasks { background: rgba(14,165,233,0.15); border-color: #BAE6FD; }
|
|
.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--rewards { background: rgba(245,158,11,0.15); border-color: #FDE68A; }
|
|
|
-.quick-icon--growth { background: rgba(91,155,213,0.15); border-color: #CBD5E1; }
|
|
|
|
|
|
|
+.quick-icon--growth { background: rgba(2,132,199,0.15); border-color: #CBD5E1; }
|
|
|
.quick-icon--games { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }
|
|
.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--quiz { background: rgba(99,102,241,0.15); border-color: #C7D2FE; }
|
|
|
|
|
|
|
@@ -1389,7 +1389,7 @@ padding-top: 4rpx;
|
|
|
background: linear-gradient(145deg, #DCE8F5, #C8DDF0);
|
|
background: linear-gradient(145deg, #DCE8F5, #C8DDF0);
|
|
|
border: 4rpx solid var(--border, #CBD5E1);
|
|
border: 4rpx solid var(--border, #CBD5E1);
|
|
|
box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
|
|
box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
|
|
|
- 4rpx 4rpx 14rpx rgba(91,155,213,0.08);
|
|
|
|
|
|
|
+ 4rpx 4rpx 14rpx rgba(249,115,22,0.08);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|