|
|
@@ -574,10 +574,16 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
+// ===== 页面级局部调色板(单页专有色阶;同值才映射全局令牌,约定见 uni.scss §14) =====
|
|
|
+$c-col-bg: #FAFBFC; // 三栏列背景(蓝灰近白)
|
|
|
+$c-footer-tint:#FFF5F0; // 底部提示浅底(暖调)
|
|
|
+$c-detail-tint:#FFE0E8; // 查看详情按钮渐变终点(粉)
|
|
|
+// 运势五级 ramp 与洞察棕已提全局(fortune 系 / mind-insight-ink,与 mind-detail index 共用)
|
|
|
+
|
|
|
.tianpan-card {
|
|
|
margin: 20rpx 30rpx;
|
|
|
- background: #FFFFFF;
|
|
|
+ background: $app-surface;
|
|
|
border-radius: 24rpx;
|
|
|
padding: 28rpx 24rpx;
|
|
|
/* 动态主题阴影 */
|
|
|
@@ -606,7 +612,7 @@ export default {
|
|
|
width: 64rpx;
|
|
|
height: 64rpx;
|
|
|
border-radius: 20rpx;
|
|
|
- background: var(--theme-gradient, linear-gradient(135deg, #FF6B9D, #FF8FB1));
|
|
|
+ background: var(--theme-gradient, linear-gradient(135deg, $dim-mind, $dim-mind-light-2));
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
@@ -615,7 +621,7 @@ export default {
|
|
|
}
|
|
|
.tp-icon-text {
|
|
|
font-size: 32rpx;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: $app-surface;
|
|
|
}
|
|
|
.tp-header-info {
|
|
|
display: flex;
|
|
|
@@ -624,25 +630,25 @@ export default {
|
|
|
.tp-title {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 700;
|
|
|
- color: #1E293B;
|
|
|
+ color: $uni-text-color;
|
|
|
}
|
|
|
.tp-subtitle {
|
|
|
font-size: 22rpx;
|
|
|
- color: #94A3B8;
|
|
|
+ color: $app-text-subtle;
|
|
|
margin-top: 2rpx;
|
|
|
}
|
|
|
.tp-header-action {
|
|
|
width: 56rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 28rpx;
|
|
|
- background: var(--theme-lighter, #FFF0F3);
|
|
|
+ background: var(--theme-lighter, $dim-mind-tint-2);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.tp-action-text {
|
|
|
font-size: 28rpx;
|
|
|
- color: var(--theme-color, #FF6B9D);
|
|
|
+ color: var(--theme-color, $dim-mind);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.tp-header-action:active {
|
|
|
@@ -662,7 +668,7 @@ export default {
|
|
|
align-items: center;
|
|
|
padding: 16rpx 8rpx;
|
|
|
border-radius: 20rpx;
|
|
|
- background: #FAFBFC;
|
|
|
+ background: $c-col-bg;
|
|
|
}
|
|
|
.tp-col-fortune {
|
|
|
margin-right: 12rpx;
|
|
|
@@ -682,7 +688,7 @@ export default {
|
|
|
}
|
|
|
.tp-col-label {
|
|
|
font-size: 22rpx;
|
|
|
- color: #94A3B8;
|
|
|
+ color: $app-text-subtle;
|
|
|
margin-bottom: 12rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
@@ -694,34 +700,34 @@ export default {
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.fortune-level-0 {
|
|
|
- background: #FFEBEE;
|
|
|
+ background: $fortune-0-tint;
|
|
|
}
|
|
|
.fortune-level-0 .tp-fortune-text {
|
|
|
- color: #D32F2F;
|
|
|
+ color: $fortune-0-ink;
|
|
|
}
|
|
|
.fortune-level-1 {
|
|
|
- background: #FFF3E0;
|
|
|
+ background: $fortune-1-tint;
|
|
|
}
|
|
|
.fortune-level-1 .tp-fortune-text {
|
|
|
- color: #E65100;
|
|
|
+ color: $fortune-1-ink;
|
|
|
}
|
|
|
.fortune-level-2 {
|
|
|
- background: #FFFDE7;
|
|
|
+ background: $fortune-2-tint;
|
|
|
}
|
|
|
.fortune-level-2 .tp-fortune-text {
|
|
|
- color: #F9A825;
|
|
|
+ color: $fortune-2-ink;
|
|
|
}
|
|
|
.fortune-level-3 {
|
|
|
- background: #F3E5F5;
|
|
|
+ background: $fortune-3-tint;
|
|
|
}
|
|
|
.fortune-level-3 .tp-fortune-text {
|
|
|
- color: #7B1FA2;
|
|
|
+ color: $fortune-3-ink;
|
|
|
}
|
|
|
.fortune-level-4 {
|
|
|
- background: #FFCDD2;
|
|
|
+ background: $fortune-4-tint;
|
|
|
}
|
|
|
.fortune-level-4 .tp-fortune-text {
|
|
|
- color: #B71C1C;
|
|
|
+ color: $fortune-4-ink;
|
|
|
}
|
|
|
.tp-fortune-text {
|
|
|
font-size: 26rpx;
|
|
|
@@ -729,7 +735,7 @@ export default {
|
|
|
}
|
|
|
.tp-fortune-desc {
|
|
|
font-size: 20rpx;
|
|
|
- color: #94A3B8;
|
|
|
+ color: $app-text-subtle;
|
|
|
text-align: center;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
@@ -738,19 +744,19 @@ export default {
|
|
|
.tp-mood-value {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 600;
|
|
|
- color: #1E293B;
|
|
|
+ color: $uni-text-color;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
.tp-mood-bar-track {
|
|
|
width: 100%;
|
|
|
height: 10rpx;
|
|
|
- background: #E2E8F0;
|
|
|
+ background: $uni-bg-color-dark;
|
|
|
border-radius: 5rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.tp-mood-bar-fill {
|
|
|
height: 100%;
|
|
|
- background: var(--theme-gradient, linear-gradient(90deg, #FF6B9D, #FF8FB1));
|
|
|
+ background: var(--theme-gradient, linear-gradient(90deg, $dim-mind, $dim-mind-light-2));
|
|
|
border-radius: 5rpx;
|
|
|
transition: width 0.5s;
|
|
|
}
|
|
|
@@ -768,7 +774,7 @@ export default {
|
|
|
.tp-direction-value {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 700;
|
|
|
- color: var(--theme-color, #FF6B9D);
|
|
|
+ color: var(--theme-color, $dim-mind);
|
|
|
}
|
|
|
|
|
|
/* ===== 底部提示 ===== */
|
|
|
@@ -778,7 +784,7 @@ export default {
|
|
|
align-items: flex-start;
|
|
|
margin-top: 20rpx;
|
|
|
padding: 16rpx;
|
|
|
- background: var(--theme-lighter, #FFF5F0);
|
|
|
+ background: var(--theme-lighter, $c-footer-tint);
|
|
|
border-radius: 14rpx;
|
|
|
}
|
|
|
.tp-footer-icon {
|
|
|
@@ -788,7 +794,7 @@ export default {
|
|
|
}
|
|
|
.tp-footer-text {
|
|
|
font-size: 22rpx;
|
|
|
- color: #8B6914;
|
|
|
+ color: $mind-insight-ink;
|
|
|
line-height: 1.5;
|
|
|
flex: 1;
|
|
|
}
|
|
|
@@ -811,19 +817,19 @@ export default {
|
|
|
}
|
|
|
.tp-advice-icon {
|
|
|
font-size: 24rpx;
|
|
|
- color: var(--theme-color, #FF6B9D);
|
|
|
+ color: var(--theme-color, $dim-mind);
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
.tp-advice-label {
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 600;
|
|
|
- color: var(--theme-color, #FF6B9D);
|
|
|
+ color: var(--theme-color, $dim-mind);
|
|
|
margin-right: 12rpx;
|
|
|
min-width: 60rpx;
|
|
|
}
|
|
|
.tp-advice-text {
|
|
|
font-size: 22rpx;
|
|
|
- color: #374151;
|
|
|
+ color: $facade-text-gray-700;
|
|
|
flex: 1;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
@@ -833,7 +839,7 @@ export default {
|
|
|
margin-top: 16rpx;
|
|
|
text-align: center;
|
|
|
padding: 14rpx;
|
|
|
- background: var(--theme-lighter, linear-gradient(135deg, #FFF0F3, #FFE0E8));
|
|
|
+ background: var(--theme-lighter, linear-gradient(135deg, $dim-mind-tint-2, $c-detail-tint));
|
|
|
border-radius: 14rpx;
|
|
|
}
|
|
|
.tp-detail-btn:active {
|
|
|
@@ -841,7 +847,7 @@ export default {
|
|
|
}
|
|
|
.tp-detail-text {
|
|
|
font-size: 24rpx;
|
|
|
- color: var(--theme-color, #FF6B9D);
|
|
|
+ color: var(--theme-color, $dim-mind);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
@@ -867,18 +873,18 @@ export default {
|
|
|
}
|
|
|
.tp-trad-label {
|
|
|
font-size: 20rpx;
|
|
|
- color: #94A3B8;
|
|
|
+ color: $app-text-subtle;
|
|
|
margin-bottom: 6rpx;
|
|
|
}
|
|
|
.tp-trad-value {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 600;
|
|
|
- color: var(--theme-color, #FF6B9D);
|
|
|
+ color: var(--theme-color, $dim-mind);
|
|
|
}
|
|
|
.tp-trad-bar-track {
|
|
|
width: 80%;
|
|
|
height: 8rpx;
|
|
|
- background: #E2E8F0;
|
|
|
+ background: $uni-bg-color-dark;
|
|
|
border-radius: 4rpx;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 4rpx;
|
|
|
@@ -889,7 +895,7 @@ export default {
|
|
|
}
|
|
|
.tp-trad-val {
|
|
|
font-size: 20rpx;
|
|
|
- color: #64748B;
|
|
|
+ color: $uni-text-color-secondary;
|
|
|
}
|
|
|
.tp-trad-row-split {
|
|
|
justify-content: space-around;
|
|
|
@@ -898,7 +904,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- background: var(--theme-lighter, #FFF0F3);
|
|
|
+ background: var(--theme-lighter, $dim-mind-tint-2);
|
|
|
padding: 8rpx 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
@@ -909,6 +915,6 @@ export default {
|
|
|
.tp-trad-tag-text {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 600;
|
|
|
- color: var(--theme-color, #FF6B9D);
|
|
|
+ color: var(--theme-color, $dim-mind);
|
|
|
}
|
|
|
</style>
|