|
|
@@ -163,6 +163,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { mapState, mapGetters, mapActions } from 'vuex'
|
|
|
+import { BrandColors } from '../../utils/brand-colors.js'
|
|
|
|
|
|
export default {
|
|
|
data: function() {
|
|
|
@@ -255,7 +256,7 @@ export default {
|
|
|
|
|
|
// 清空画布
|
|
|
ctx.clearRect(0, 0, w, h)
|
|
|
- ctx.fillStyle = '#FFF8F0'
|
|
|
+ ctx.fillStyle = BrandColors.bodyTint
|
|
|
ctx.fillRect(0, 0, w, h)
|
|
|
|
|
|
// 获取数据
|
|
|
@@ -278,7 +279,7 @@ export default {
|
|
|
drawRadar: function(ctx, cx, cy, r, members) {
|
|
|
var axes = ['木', '火', '土', '金', '水']
|
|
|
var elementKeys = ['wood', 'fire', 'earth', 'metal', 'water']
|
|
|
- var elementColors = ['BrandColors.success', '#FF6B9D', 'BrandColors.body', 'BrandColors.wisdom', '#F59E0B']
|
|
|
+ var elementColors = [BrandColors.success, BrandColors.mind, BrandColors.body, BrandColors.wisdom, BrandColors.wealth]
|
|
|
var angleStep = (Math.PI * 2) / 5
|
|
|
|
|
|
// 获取五行数据
|
|
|
@@ -386,14 +387,14 @@ export default {
|
|
|
}
|
|
|
|
|
|
// 中心文字:家庭名 + 最强/最弱
|
|
|
- ctx.fillStyle = '#1F2937'
|
|
|
+ ctx.fillStyle = BrandColors.textGray800
|
|
|
ctx.font = 'bold 11px sans-serif'
|
|
|
ctx.textAlign = 'center'
|
|
|
ctx.textBaseline = 'middle'
|
|
|
ctx.fillText(familyLabel, cx, cy - 6)
|
|
|
|
|
|
if (strongest || weakest) {
|
|
|
- ctx.fillStyle = '#6B7280'
|
|
|
+ ctx.fillStyle = BrandColors.textSlate
|
|
|
ctx.font = '9px sans-serif'
|
|
|
var strongestZh = strongest === 'wood' ? '木' : strongest === 'fire' ? '火' : strongest === 'earth' ? '土' : strongest === 'metal' ? '金' : strongest === 'water' ? '水' : strongest
|
|
|
var weakestZh = weakest === 'wood' ? '木' : weakest === 'fire' ? '火' : weakest === 'earth' ? '土' : weakest === 'metal' ? '金' : weakest === 'water' ? '水' : weakest
|
|
|
@@ -415,12 +416,12 @@ export default {
|
|
|
ctx.arc(x, y, 15, 0, Math.PI * 2)
|
|
|
ctx.fillStyle = this.getMemberColor(member.effectiveRole)
|
|
|
ctx.fill()
|
|
|
- ctx.strokeStyle = '#FFF'
|
|
|
+ ctx.strokeStyle = BrandColors.white
|
|
|
ctx.lineWidth = 2
|
|
|
ctx.stroke()
|
|
|
|
|
|
// 绘制名字
|
|
|
- ctx.fillStyle = '#FFF'
|
|
|
+ ctx.fillStyle = BrandColors.white
|
|
|
ctx.font = '10px sans-serif'
|
|
|
ctx.textAlign = 'center'
|
|
|
ctx.textBaseline = 'middle'
|
|
|
@@ -532,7 +533,7 @@ export default {
|
|
|
if (score >= 80) {
|
|
|
ctx.strokeStyle = 'BrandColors.success'
|
|
|
} else if (score >= 60) {
|
|
|
- ctx.strokeStyle = '#F59E0B'
|
|
|
+ ctx.strokeStyle = BrandColors.wealth
|
|
|
} else {
|
|
|
ctx.strokeStyle = 'BrandColors.danger'
|
|
|
}
|
|
|
@@ -544,10 +545,10 @@ export default {
|
|
|
getMemberColor: function(role) {
|
|
|
var colorMap = {
|
|
|
'parent': 'BrandColors.primary',
|
|
|
- 'child': '#3B82F6',
|
|
|
- 'teacher': '#8B5CF6'
|
|
|
+ 'child': BrandColors.infoBlue,
|
|
|
+ 'teacher': BrandColors.violet
|
|
|
}
|
|
|
- return colorMap[role] || '#6B7280'
|
|
|
+ return colorMap[role] || BrandColors.textSlate
|
|
|
},
|
|
|
|
|
|
getEightCharsText: function(eightChars) {
|
|
|
@@ -568,8 +569,8 @@ export default {
|
|
|
},
|
|
|
|
|
|
getDimColor: function(key) {
|
|
|
- var colors = { body: 'BrandColors.body', mind: '#FF6B9D', wisdom: 'BrandColors.wisdom', action: 'BrandColors.success', wealth: '#F59E0B' }
|
|
|
- return colors[key] || '#6B7280'
|
|
|
+ var colors = { body: BrandColors.body, mind: BrandColors.mind, wisdom: BrandColors.wisdom, action: BrandColors.success, wealth: BrandColors.wealth }
|
|
|
+ return colors[key] || BrandColors.textSlate
|
|
|
},
|
|
|
|
|
|
onCanvasTouchEnd: function(e) {
|
|
|
@@ -695,9 +696,16 @@ export default {
|
|
|
import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
|
|
|
|
|
|
<style lang="scss">
|
|
|
+// ===== 天盘页专属色阶(暖橙提示 + 紫罗兰软阶;单页专用,约定见 uni.scss §14)=====
|
|
|
+$c-tp-orange: #FDBA74; // 暖橙(徽章渐变档)
|
|
|
+$c-tp-brown-deep: #7C2D12; // 深棕文字(暖卡内)
|
|
|
+$c-tp-brown: #9A3412; // 棕橙文字(橙卡内)
|
|
|
+$c-tp-violet-soft: #E0D4FF; // 紫罗兰软底渐变终
|
|
|
+$c-tp-violet-text: #6D28D9; // 紫罗兰文字
|
|
|
+
|
|
|
.tianpan-container {
|
|
|
min-height: 100vh;
|
|
|
- background: linear-gradient(180deg, #FFF8F0 0%, $app-surface 100%);
|
|
|
+ background: linear-gradient(180deg, $dim-body-tint 0%, $app-surface 100%);
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
@@ -748,7 +756,7 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
|
|
|
.tianpan-canvas {
|
|
|
width: 750rpx;
|
|
|
height: 750rpx;
|
|
|
- background: #FFF8F0;
|
|
|
+ background: $dim-body-tint;
|
|
|
border-radius: 32rpx;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(249, 114, 22, 0.1);
|
|
|
}
|
|
|
@@ -816,7 +824,7 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
|
|
|
|
|
|
.item-arrow {
|
|
|
font-size: 40rpx;
|
|
|
- color: #D1D5DB;
|
|
|
+ color: $app-border-strong;
|
|
|
}
|
|
|
|
|
|
.empty-state {
|
|
|
@@ -830,7 +838,7 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
|
|
|
.fortune-card {
|
|
|
margin: 32rpx;
|
|
|
padding: 40rpx;
|
|
|
- background: linear-gradient(135deg, $brand-primary-light-2 0%, #FDBA74 100%);
|
|
|
+ background: linear-gradient(135deg, $brand-primary-light-2 0%, $c-tp-orange 100%);
|
|
|
border-radius: 32rpx;
|
|
|
box-shadow: 0 8rpx 24rpx rgba(249, 114, 22, 0.2);
|
|
|
}
|
|
|
@@ -845,12 +853,12 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
|
|
|
.fortune-title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #7C2D12;
|
|
|
+ color: $c-tp-brown-deep;
|
|
|
}
|
|
|
|
|
|
.fortune-date {
|
|
|
font-size: 24rpx;
|
|
|
- color: #9A3412;
|
|
|
+ color: $c-tp-brown;
|
|
|
}
|
|
|
|
|
|
.fortune-content {
|
|
|
@@ -859,14 +867,14 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
|
|
|
|
|
|
.fortune-text {
|
|
|
font-size: 28rpx;
|
|
|
- color: #9A3412;
|
|
|
+ color: $c-tp-brown;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.fortune-arrow {
|
|
|
text-align: right;
|
|
|
font-size: 24rpx;
|
|
|
- color: #7C2D12;
|
|
|
+ color: $c-tp-brown-deep;
|
|
|
}
|
|
|
|
|
|
/* 成员弹窗 */
|
|
|
@@ -1002,16 +1010,16 @@ import { body, danger, primary, success, wisdom } from '@/utils/brand-colors.js'
|
|
|
|
|
|
/* 传统命理入口卡片 */
|
|
|
.tradition-card {
|
|
|
- background: linear-gradient(135deg, #F5F0FF 0%, #E0D4FF 100%);
|
|
|
+ background: linear-gradient(135deg, $facade-violet-tint 0%, $c-tp-violet-soft 100%);
|
|
|
box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.2);
|
|
|
}
|
|
|
|
|
|
.tradition-card .fortune-title {
|
|
|
- color: #6D28D9;
|
|
|
+ color: $c-tp-violet-text;
|
|
|
}
|
|
|
|
|
|
.tradition-card .fortune-text {
|
|
|
- color: #7C3AED;
|
|
|
+ color: $facade-violet-deep;
|
|
|
}
|
|
|
|
|
|
.tradition-card .fortune-arrow {
|