|
|
@@ -459,115 +459,132 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style scoped>
|
|
|
- .container{background:#FFF7ED;min-height:100vh;padding-bottom:calc(160rpx + env(safe-area-inset-bottom))}
|
|
|
+<style scoped lang="scss">
|
|
|
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
|
|
|
+// 与 index-home / health-main / profile-main 同族:文字阶与品牌淡底同名同值
|
|
|
+$c-text-strong: #333;
|
|
|
+$c-text-body: #666;
|
|
|
+$c-text-deep: #555;
|
|
|
+$c-text-muted: #999;
|
|
|
+$c-text-faint: #888;
|
|
|
+$c-text-ghost: #CCC;
|
|
|
+$c-fill: #F0F0F0;
|
|
|
+$c-fill-2: #F5F5F5;
|
|
|
+$c-fill-cool: #F7F7F7;
|
|
|
+$c-brand-tint: #FFF7ED; // 品牌淡底(3 页复用,待提升全局)
|
|
|
+$c-brand-tint-2: #FFEDD5; // orange-100(2 页复用,待提升全局)
|
|
|
+$c-warm-tint-mat: #FFF3E0; // Material orange-50
|
|
|
+$c-brand-ink-mat: #E65100; // Material orange-900
|
|
|
+$c-danger-el: #F56C6C; // Element 红
|
|
|
+
|
|
|
+ .container{background:$c-brand-tint;min-height:100vh;padding-bottom:calc(160rpx + env(safe-area-inset-bottom))}
|
|
|
.section{margin:16rpx 24rpx}
|
|
|
/* 游客态 */
|
|
|
-.brand-strap{margin:0 24rpx 16rpx;background:linear-gradient(135deg,#F0FFF4,rgba(16,185,129,0.1));border-radius:16rpx;padding:20rpx 24rpx}
|
|
|
-.brand-strap-text{font-size:26rpx;color:#10B981;font-weight:600}
|
|
|
-.concept-card{margin:0 24rpx 16rpx;background:#fff;border-radius:20rpx;padding:28rpx;border-left:6rpx solid #10B981;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
-.concept-quote{font-size:30rpx;font-weight:bold;color:#333;display:block;margin-bottom:8rpx}
|
|
|
-.concept-desc{font-size:24rpx;color:#888;display:block;line-height:1.6}
|
|
|
-.case-card{margin:0 24rpx 16rpx;background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
+.brand-strap{margin:0 24rpx 16rpx;background:linear-gradient(135deg,$dim-action-tint,rgba($dim-action, 0.1));border-radius:16rpx;padding:20rpx 24rpx}
|
|
|
+.brand-strap-text{font-size:26rpx;color:$dim-action;font-weight:600}
|
|
|
+.concept-card{margin:0 24rpx 16rpx;background:$app-surface;border-radius:20rpx;padding:28rpx;border-left:6rpx solid $dim-action;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
+.concept-quote{font-size:30rpx;font-weight:bold;color:$c-text-strong;display:block;margin-bottom:8rpx}
|
|
|
+.concept-desc{font-size:24rpx;color:$c-text-faint;display:block;line-height:1.6}
|
|
|
+.case-card{margin:0 24rpx 16rpx;background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
.case-header{margin-bottom:12rpx}
|
|
|
-.case-label{font-size:24rpx;color:#10B981;font-weight:bold}
|
|
|
+.case-label{font-size:24rpx;color:$dim-action;font-weight:bold}
|
|
|
.case-body{padding:8rpx 0}
|
|
|
-.case-name{font-size:26rpx;color:#333;font-weight:600;display:block;margin-bottom:6rpx}
|
|
|
-.case-change{font-size:24rpx;color:#666;display:block;margin-bottom:12rpx}
|
|
|
+.case-name{font-size:26rpx;color:$c-text-strong;font-weight:600;display:block;margin-bottom:6rpx}
|
|
|
+.case-change{font-size:24rpx;color:$c-text-body;display:block;margin-bottom:12rpx}
|
|
|
.case-metrics{display:flex;gap:16rpx;margin-bottom:12rpx}
|
|
|
-.metric-item{display:flex;flex-direction:column;align-items:center;flex:1;background:#F0FFF4;border-radius:12rpx;padding:12rpx 8rpx}
|
|
|
-.metric-up{font-size:26rpx;font-weight:bold;color:#10B981}
|
|
|
-.metric-label{font-size:20rpx;color:#999;margin-top:4rpx}
|
|
|
-.case-note{font-size:22rpx;color:#888;display:block}
|
|
|
+.metric-item{display:flex;flex-direction:column;align-items:center;flex:1;background:$dim-action-tint;border-radius:12rpx;padding:12rpx 8rpx}
|
|
|
+.metric-up{font-size:26rpx;font-weight:bold;color:$dim-action}
|
|
|
+.metric-label{font-size:20rpx;color:$c-text-muted;margin-top:4rpx}
|
|
|
+.case-note{font-size:22rpx;color:$c-text-faint;display:block}
|
|
|
.guest-features{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 24rpx 16rpx}
|
|
|
-.feat-card{width:calc(50% - 8rpx);box-sizing:border-box;background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
+.feat-card{width:calc(50% - 8rpx);box-sizing:border-box;background:$app-surface;border-radius:20rpx;padding:24rpx;margin-bottom:16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
.feat-icon{font-size:40rpx;display:block;margin-bottom:8rpx}
|
|
|
-.feat-title{font-size:26rpx;font-weight:600;color:#333;display:block;margin-bottom:4rpx}
|
|
|
-.feat-desc{font-size:22rpx;color:#999;display:block}
|
|
|
+.feat-title{font-size:26rpx;font-weight:600;color:$c-text-strong;display:block;margin-bottom:4rpx}
|
|
|
+.feat-desc{font-size:22rpx;color:$c-text-muted;display:block}
|
|
|
.login-guide-section{margin:0 24rpx 24rpx}
|
|
|
/* 成长行动卡片 */
|
|
|
-.action-card{display:flex;align-items:center;padding:24rpx 28rpx;background:#fff;border-radius:16rpx;margin:0 24rpx 16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
+.action-card{display:flex;align-items:center;padding:24rpx 28rpx;background:$app-surface;border-radius:16rpx;margin:0 24rpx 16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
.action-card:active{opacity:0.85}
|
|
|
.action-icon{font-size:44rpx;margin-right:20rpx}
|
|
|
.action-info{flex:1}
|
|
|
-.action-title{font-size:28rpx;font-weight:600;color:#333;display:block}
|
|
|
-.action-desc{font-size:22rpx;color:#888;margin-top:4rpx;display:block}
|
|
|
-.action-arrow{font-size:32rpx;color:#ccc}
|
|
|
+.action-title{font-size:28rpx;font-weight:600;color:$c-text-strong;display:block}
|
|
|
+.action-desc{font-size:22rpx;color:$c-text-faint;margin-top:4rpx;display:block}
|
|
|
+.action-arrow{font-size:32rpx;color:$c-text-ghost}
|
|
|
/* section-header 组件通用样式 */
|
|
|
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12rpx}
|
|
|
-.section-title{font-size:28rpx;font-weight:600;color:#333}
|
|
|
-.section-more{font-size:24rpx;color:#F97316}
|
|
|
+.section-title{font-size:28rpx;font-weight:600;color:$c-text-strong}
|
|
|
+.section-more{font-size:24rpx;color:$brand-primary}
|
|
|
/* 登录后 */
|
|
|
-.reminder-bar{margin:12rpx 24rpx;background:#FFF3E0;border:1rpx solid #FFB74D;border-radius:12rpx;padding:14rpx 20rpx;display:flex;align-items:center;justify-content:space-between}
|
|
|
-.reminder-text{font-size:24rpx;color:#E65100}
|
|
|
-.reminder-close{font-size:28rpx;color:#999}
|
|
|
+.reminder-bar{margin:12rpx 24rpx;background:$c-warm-tint-mat;border:1rpx solid $uni-warning;border-radius:12rpx;padding:14rpx 20rpx;display:flex;align-items:center;justify-content:space-between}
|
|
|
+.reminder-text{font-size:24rpx;color:$c-brand-ink-mat}
|
|
|
+.reminder-close{font-size:28rpx;color:$c-text-muted}
|
|
|
/* 里程碑 */
|
|
|
-.milestone-card{background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
-.section-title-row{font-size:26rpx;font-weight:bold;color:#333;margin-bottom:16rpx;display:block}
|
|
|
+.milestone-card{background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
+.section-title-row{font-size:26rpx;font-weight:bold;color:$c-text-strong;margin-bottom:16rpx;display:block}
|
|
|
.milestone-grid{display:flex;justify-content:space-between}
|
|
|
.milestone-item{display:flex;flex-direction:column;align-items:center;flex:1}
|
|
|
.milestone-icon{font-size:40rpx;margin-bottom:4rpx}
|
|
|
-.milestone-value{font-size:28rpx;font-weight:bold;color:#F97316;margin-bottom:2rpx}
|
|
|
-.milestone-label{font-size:22rpx;color:#999}
|
|
|
+.milestone-value{font-size:28rpx;font-weight:bold;color:$brand-primary;margin-bottom:2rpx}
|
|
|
+.milestone-label{font-size:22rpx;color:$c-text-muted}
|
|
|
/* 今日成长 */
|
|
|
-.progress-card{background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
+.progress-card{background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16rpx}
|
|
|
-.progress-title{font-size:28rpx;font-weight:bold;color:#333}
|
|
|
-.progress-date{font-size:22rpx;color:#999}
|
|
|
+.progress-title{font-size:28rpx;font-weight:bold;color:$c-text-strong}
|
|
|
+.progress-date{font-size:22rpx;color:$c-text-muted}
|
|
|
.progress-grid{display:flex;justify-content:space-between}
|
|
|
-.progress-grid-item{flex:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20rpx 8rpx;background:#FFF7ED;border-radius:16rpx;margin-right:12rpx}
|
|
|
+.progress-grid-item{flex:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20rpx 8rpx;background:$c-brand-tint;border-radius:16rpx;margin-right:12rpx}
|
|
|
.progress-grid-item:last-child{margin-right:0}
|
|
|
-.progress-grid-item:active{opacity:0.85;background:#FFEDD5}
|
|
|
+.progress-grid-item:active{opacity:0.85;background:$c-brand-tint-2}
|
|
|
.progress-grid-icon{font-size:40rpx;margin-bottom:8rpx}
|
|
|
-.progress-grid-label{font-size:24rpx;color:#333;margin-bottom:8rpx;text-align:center}
|
|
|
+.progress-grid-label{font-size:24rpx;color:$c-text-strong;margin-bottom:8rpx;text-align:center}
|
|
|
.progress-grid-status{font-size:20rpx;flex-shrink:0}
|
|
|
-.status-done{color:#10B981}
|
|
|
-.status-pending{color:#ccc}
|
|
|
-.progress-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16rpx;padding-top:16rpx;border-top:1rpx solid #f5f5f5}
|
|
|
-.footer-text{font-size:24rpx;color:#666;font-weight:bold}
|
|
|
-.footer-streak{font-size:24rpx;color:#F97316;font-weight:bold}
|
|
|
+.status-done{color:$dim-action}
|
|
|
+.status-pending{color:$c-text-ghost}
|
|
|
+.progress-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16rpx;padding-top:16rpx;border-top:1rpx solid $c-fill-2}
|
|
|
+.footer-text{font-size:24rpx;color:$c-text-body;font-weight:bold}
|
|
|
+.footer-streak{font-size:24rpx;color:$brand-primary;font-weight:bold}
|
|
|
/* 任务中心预览 */
|
|
|
-.task-preview-card{background:#fff;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
+.task-preview-card{background:$app-surface;border-radius:20rpx;padding:24rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
|
|
|
.task-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16rpx}
|
|
|
-.task-preview-title{font-size:28rpx;font-weight:bold;color:#333}
|
|
|
-.task-preview-more{font-size:24rpx;color:#F97316}
|
|
|
+.task-preview-title{font-size:28rpx;font-weight:bold;color:$c-text-strong}
|
|
|
+.task-preview-more{font-size:24rpx;color:$brand-primary}
|
|
|
.task-preview-list{display:flex;flex-direction:column}
|
|
|
-.task-preview-item{display:flex;align-items:center;padding:16rpx 0;border-bottom:1rpx solid #f5f5f5}
|
|
|
+.task-preview-item{display:flex;align-items:center;padding:16rpx 0;border-bottom:1rpx solid $c-fill-2}
|
|
|
.task-preview-item:last-child{border-bottom:none}
|
|
|
.task-preview-left{flex:1;min-width:0}
|
|
|
-.task-preview-name{font-size:26rpx;color:#333;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
|
+.task-preview-name{font-size:26rpx;color:$c-text-strong;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
|
.task-preview-meta{display:flex;align-items:center;gap:12rpx;margin-top:6rpx}
|
|
|
-.task-preview-points{font-size:22rpx;color:#F97316;font-weight:bold}
|
|
|
-.task-preview-deadline{font-size:20rpx;color:#999}
|
|
|
-.task-preview-arrow{font-size:28rpx;color:#ccc;flex-shrink:0;margin-left:12rpx}
|
|
|
+.task-preview-points{font-size:22rpx;color:$brand-primary;font-weight:bold}
|
|
|
+.task-preview-deadline{font-size:20rpx;color:$c-text-muted}
|
|
|
+.task-preview-arrow{font-size:28rpx;color:$c-text-ghost;flex-shrink:0;margin-left:12rpx}
|
|
|
/* ===== 五维闭环体系样式 ===== */
|
|
|
-.wuxing-section { margin: 0 24rpx 16rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
-.wuxing-title { font-size: 30rpx; font-weight: bold; color: #333; text-align: center; margin-bottom: 6rpx; }
|
|
|
-.wuxing-desc { font-size: 22rpx; color: #999; text-align: center; margin-bottom: 20rpx; }
|
|
|
+.wuxing-section { margin: 0 24rpx 16rpx; background: $app-surface; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
|
|
|
+.wuxing-title { font-size: 30rpx; font-weight: bold; color: $c-text-strong; text-align: center; margin-bottom: 6rpx; }
|
|
|
+.wuxing-desc { font-size: 22rpx; color: $c-text-muted; text-align: center; margin-bottom: 20rpx; }
|
|
|
.wuxing-relations { margin-top: 8rpx; }
|
|
|
.rel-group { margin-bottom: 16rpx; }
|
|
|
-.rel-title { font-size: 24rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; display: block; }
|
|
|
+.rel-title { font-size: 24rpx; font-weight: bold; color: $c-text-strong; margin-bottom: 8rpx; display: block; }
|
|
|
.rel-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4rpx; margin-bottom: 6rpx; }
|
|
|
-.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: #f7f7f7; color: #555; }
|
|
|
-.rel-arrow { font-size: 20rpx; color: #10B981; font-weight: bold; }
|
|
|
-.rel-op { font-size: 20rpx; color: #f56c6c; font-weight: bold; }
|
|
|
-.rel-dot { font-size: 20rpx; color: #ccc; }
|
|
|
-.rel-hint { font-size: 20rpx; color: #999; line-height: 1.5; display: block; }
|
|
|
+.rel-item { font-size: 22rpx; padding: 4rpx 10rpx; border-radius: 8rpx; background: $c-fill-cool; color: $c-text-deep; }
|
|
|
+.rel-arrow { font-size: 20rpx; color: $dim-action; font-weight: bold; }
|
|
|
+.rel-op { font-size: 20rpx; color: $c-danger-el; font-weight: bold; }
|
|
|
+.rel-dot { font-size: 20rpx; color: $c-text-ghost; }
|
|
|
+.rel-hint { font-size: 20rpx; color: $c-text-muted; line-height: 1.5; display: block; }
|
|
|
.wuxing-cards { display: flex; flex-direction: column; gap: 10rpx; margin-top: 16rpx; }
|
|
|
-.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid #f0f0f0; }
|
|
|
+.wc-card { display: flex; align-items: center; padding: 16rpx 20rpx; border-radius: 16rpx; border: 2rpx solid $c-fill; }
|
|
|
.wc-card:active { opacity: 0.85; }
|
|
|
.wc-icon { font-size: 36rpx; margin-right: 16rpx; flex-shrink: 0; }
|
|
|
.wc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
|
.wc-name { font-size: 24rpx; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
-.wc-text { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; white-space: normal; }
|
|
|
-.wc-body { border-color: rgba(255,140,66,0.3); background: rgba(255,140,66,0.04); border-left: 8rpx solid #FF8C42; }
|
|
|
-.wc-body .wc-name { color: #FF8C42; }
|
|
|
-.wc-wisdom { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); border-left: 8rpx solid #6366F1; }
|
|
|
-.wc-wisdom .wc-name { color: #6366F1; }
|
|
|
-.wc-wealth { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.04); border-left: 8rpx solid #F59E0B; }
|
|
|
-.wc-wealth .wc-name { color: #F59E0B; }
|
|
|
-.wc-action { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.04); border-left: 8rpx solid #10B981; }
|
|
|
-.wc-action .wc-name { color: #10B981; }
|
|
|
-.wc-mind { border-color: rgba(255,107,157,0.3); background: rgba(255,107,157,0.04); border-left: 8rpx solid #FF6B9D; }
|
|
|
-.wc-mind .wc-name { color: #FF6B9D; }
|
|
|
+.wc-text { font-size: 20rpx; color: $c-text-muted; display: block; margin-top: 4rpx; white-space: normal; }
|
|
|
+.wc-body { border-color: rgba($dim-body, 0.3); background: rgba($dim-body, 0.04); border-left: 8rpx solid $dim-body; }
|
|
|
+.wc-body .wc-name { color: $dim-body; }
|
|
|
+.wc-wisdom { border-color: rgba($dim-wisdom, 0.3); background: rgba($dim-wisdom, 0.04); border-left: 8rpx solid $dim-wisdom; }
|
|
|
+.wc-wisdom .wc-name { color: $dim-wisdom; }
|
|
|
+.wc-wealth { border-color: rgba($dim-wealth, 0.3); background: rgba($dim-wealth, 0.04); border-left: 8rpx solid $dim-wealth; }
|
|
|
+.wc-wealth .wc-name { color: $dim-wealth; }
|
|
|
+.wc-action { border-color: rgba($dim-action, 0.3); background: rgba($dim-action, 0.04); border-left: 8rpx solid $dim-action; }
|
|
|
+.wc-action .wc-name { color: $dim-action; }
|
|
|
+.wc-mind { border-color: rgba($dim-mind, 0.3); background: rgba($dim-mind, 0.04); border-left: 8rpx solid $dim-mind; }
|
|
|
+.wc-mind .wc-name { color: $dim-mind; }
|
|
|
</style>
|