|
@@ -43,7 +43,7 @@
|
|
|
|
|
|
|
|
<!-- 吉位 -->
|
|
<!-- 吉位 -->
|
|
|
<view class="data-item">
|
|
<view class="data-item">
|
|
|
- <view class="data-icon" :style="{ backgroundColor: '#FFA500' }">
|
|
|
|
|
|
|
+ <view class="data-icon" :style="{ backgroundColor: dataIconColor }">
|
|
|
<text class="data-icon-text">🧭</text>
|
|
<text class="data-icon-text">🧭</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="data-info">
|
|
<view class="data-info">
|
|
@@ -161,6 +161,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { BrandColors } from '../../utils/brand-colors.js'
|
|
|
import MpHtml from '@/components/mp-html/mp-html.vue'
|
|
import MpHtml from '@/components/mp-html/mp-html.vue'
|
|
|
import { parseDate } from '../../utils/format.js'
|
|
import { parseDate } from '../../utils/format.js'
|
|
|
import { getFamilyFortune, getWeekFortune, getMonthFortune, getFortuneReports, reportAppEnter
|
|
import { getFamilyFortune, getWeekFortune, getMonthFortune, getFortuneReports, reportAppEnter
|
|
@@ -175,6 +176,7 @@ export default {
|
|
|
components: { MpHtml },
|
|
components: { MpHtml },
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+ dataIconColor: BrandColors.goldDeep,
|
|
|
showMenu: false,
|
|
showMenu: false,
|
|
|
viewMode: 'week', // week, month, history
|
|
viewMode: 'week', // week, month, history
|
|
|
familyFortune: {
|
|
familyFortune: {
|
|
@@ -194,11 +196,11 @@ export default {
|
|
|
monthFortunes: [],
|
|
monthFortunes: [],
|
|
|
weeklyReports: [],
|
|
weeklyReports: [],
|
|
|
elementColors: {
|
|
elementColors: {
|
|
|
- '木': '#10B981',
|
|
|
|
|
- '火': '#FF6B9D',
|
|
|
|
|
- '土': '#FF8C42',
|
|
|
|
|
- '金': '#6366F1',
|
|
|
|
|
- '水': '#3B82F6'
|
|
|
|
|
|
|
+ '木': BrandColors.success,
|
|
|
|
|
+ '火': BrandColors.mind,
|
|
|
|
|
+ '土': BrandColors.body,
|
|
|
|
|
+ '金': BrandColors.wisdom,
|
|
|
|
|
+ '水': BrandColors.infoBlue
|
|
|
},
|
|
},
|
|
|
// 详情模态框
|
|
// 详情模态框
|
|
|
showWeeklyReport: false,
|
|
showWeeklyReport: false,
|
|
@@ -393,7 +395,7 @@ export default {
|
|
|
// 外圈背景
|
|
// 外圈背景
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.arc(cx, cy, outerR, 0, Math.PI * 2)
|
|
ctx.arc(cx, cy, outerR, 0, Math.PI * 2)
|
|
|
- ctx.fillStyle = '#FFF5F7'
|
|
|
|
|
|
|
+ ctx.fillStyle = BrandColors.blush
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
ctx.strokeStyle = luckyColor + '40'
|
|
ctx.strokeStyle = luckyColor + '40'
|
|
|
ctx.lineWidth = 1.5
|
|
ctx.lineWidth = 1.5
|
|
@@ -431,7 +433,7 @@ export default {
|
|
|
ctx.stroke()
|
|
ctx.stroke()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- ctx.fillStyle = isLucky ? luckyColor : '#9CA3AF'
|
|
|
|
|
|
|
+ ctx.fillStyle = isLucky ? luckyColor : BrandColors.textGray400
|
|
|
ctx.font = (isLucky ? 'bold ' : '') + '12px sans-serif'
|
|
ctx.font = (isLucky ? 'bold ' : '') + '12px sans-serif'
|
|
|
ctx.textAlign = 'center'
|
|
ctx.textAlign = 'center'
|
|
|
ctx.textBaseline = 'middle'
|
|
ctx.textBaseline = 'middle'
|
|
@@ -443,7 +445,7 @@ export default {
|
|
|
ctx.arc(cx, cy, 5, 0, Math.PI * 2)
|
|
ctx.arc(cx, cy, 5, 0, Math.PI * 2)
|
|
|
ctx.fillStyle = luckyColor
|
|
ctx.fillStyle = luckyColor
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
- ctx.strokeStyle = '#FFFFFF'
|
|
|
|
|
|
|
+ ctx.strokeStyle = BrandColors.white
|
|
|
ctx.lineWidth = 2
|
|
ctx.lineWidth = 2
|
|
|
ctx.stroke()
|
|
ctx.stroke()
|
|
|
},
|
|
},
|
|
@@ -481,9 +483,9 @@ export default {
|
|
|
ctx.clearRect(0, 0, w, h)
|
|
ctx.clearRect(0, 0, w, h)
|
|
|
|
|
|
|
|
// 背景
|
|
// 背景
|
|
|
- ctx.fillStyle = '#FFFFFF'
|
|
|
|
|
|
|
+ ctx.fillStyle = BrandColors.white
|
|
|
ctx.fillRect(padding, padding, chartW, chartH)
|
|
ctx.fillRect(padding, padding, chartW, chartH)
|
|
|
- ctx.strokeStyle = '#F3F4F6'
|
|
|
|
|
|
|
+ ctx.strokeStyle = BrandColors.fillGray100
|
|
|
ctx.lineWidth = 1
|
|
ctx.lineWidth = 1
|
|
|
ctx.strokeRect(padding, padding, chartW, chartH)
|
|
ctx.strokeRect(padding, padding, chartW, chartH)
|
|
|
|
|
|
|
@@ -496,7 +498,7 @@ export default {
|
|
|
const scoreSteps = Math.ceil((maxScore - minScore) / step)
|
|
const scoreSteps = Math.ceil((maxScore - minScore) / step)
|
|
|
|
|
|
|
|
// Y 轴刻度
|
|
// Y 轴刻度
|
|
|
- ctx.fillStyle = '#6B7280'
|
|
|
|
|
|
|
+ ctx.fillStyle = BrandColors.textSlate
|
|
|
ctx.font = '10px sans-serif'
|
|
ctx.font = '10px sans-serif'
|
|
|
ctx.textAlign = 'right'
|
|
ctx.textAlign = 'right'
|
|
|
ctx.textBaseline = 'middle'
|
|
ctx.textBaseline = 'middle'
|
|
@@ -509,7 +511,7 @@ export default {
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(padding - 5, y)
|
|
ctx.moveTo(padding - 5, y)
|
|
|
ctx.lineTo(padding, y)
|
|
ctx.lineTo(padding, y)
|
|
|
- ctx.strokeStyle = '#E5E7EB'
|
|
|
|
|
|
|
+ ctx.strokeStyle = BrandColors.gray200
|
|
|
ctx.stroke()
|
|
ctx.stroke()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -517,7 +519,7 @@ export default {
|
|
|
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
|
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
|
|
const labels = this.weekFortunes.map((f, i) => weekDays[i] || '')
|
|
const labels = this.weekFortunes.map((f, i) => weekDays[i] || '')
|
|
|
|
|
|
|
|
- ctx.fillStyle = '#6B7280'
|
|
|
|
|
|
|
+ ctx.fillStyle = BrandColors.textSlate
|
|
|
ctx.font = '10px sans-serif'
|
|
ctx.font = '10px sans-serif'
|
|
|
ctx.textAlign = 'center'
|
|
ctx.textAlign = 'center'
|
|
|
ctx.textBaseline = 'top'
|
|
ctx.textBaseline = 'top'
|
|
@@ -529,7 +531,7 @@ export default {
|
|
|
ctx.beginPath()
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(x, padding + chartH)
|
|
ctx.moveTo(x, padding + chartH)
|
|
|
ctx.lineTo(x, padding + chartH + 5)
|
|
ctx.lineTo(x, padding + chartH + 5)
|
|
|
- ctx.strokeStyle = '#E5E7EB'
|
|
|
|
|
|
|
+ ctx.strokeStyle = BrandColors.gray200
|
|
|
ctx.stroke()
|
|
ctx.stroke()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -551,7 +553,7 @@ export default {
|
|
|
ctx.arc(x, y, 4, 0, Math.PI * 2)
|
|
ctx.arc(x, y, 4, 0, Math.PI * 2)
|
|
|
ctx.fillStyle = this.getFortuneColor(f.fortuneLevel)
|
|
ctx.fillStyle = this.getFortuneColor(f.fortuneLevel)
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
- ctx.strokeStyle = '#FFFFFF'
|
|
|
|
|
|
|
+ ctx.strokeStyle = BrandColors.white
|
|
|
ctx.lineWidth = 2
|
|
ctx.lineWidth = 2
|
|
|
ctx.stroke()
|
|
ctx.stroke()
|
|
|
|
|
|
|
@@ -604,13 +606,13 @@ export default {
|
|
|
// 获取运势颜色
|
|
// 获取运势颜色
|
|
|
getFortuneColor(level) {
|
|
getFortuneColor(level) {
|
|
|
const colors = {
|
|
const colors = {
|
|
|
- '大吉': '#EF4444',
|
|
|
|
|
- '吉': '#F97316',
|
|
|
|
|
- '平': '#FBBF24',
|
|
|
|
|
- '凶': '#6366F1',
|
|
|
|
|
- '大凶': '#8B5CF6'
|
|
|
|
|
|
|
+ '大吉': BrandColors.danger,
|
|
|
|
|
+ '吉': BrandColors.primary,
|
|
|
|
|
+ '平': BrandColors.warning,
|
|
|
|
|
+ '凶': BrandColors.wisdom,
|
|
|
|
|
+ '大凶': BrandColors.violet
|
|
|
}
|
|
}
|
|
|
- return colors[level] || '#666666'
|
|
|
|
|
|
|
+ return colors[level] || BrandColors.textBody
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
// 获取运势等级数值(用于CSS class)
|
|
// 获取运势等级数值(用于CSS class)
|
|
@@ -671,6 +673,9 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
|
|
+// ===== 家庭看板专属色阶(单页专用,约定见 uni.scss §14)=====
|
|
|
|
|
+$c-fd-blush: #FFF5F7; // 画布/卡片浅粉底
|
|
|
|
|
+
|
|
|
.family-dashboard {
|
|
.family-dashboard {
|
|
|
background-color: $facade-fill-gray-50;
|
|
background-color: $facade-fill-gray-50;
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|