|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<!-- 家庭天盘卡片 — 心维度专属 (#FF6B9D 火) -->
|
|
|
- <view class="tianpan-card" v-if="visible">
|
|
|
+ <view class="tianpan-card" v-if="visible" :style="themeStyle">
|
|
|
<!-- 卡片头部 -->
|
|
|
<view class="tp-header">
|
|
|
<view class="tp-header-left">
|
|
|
@@ -189,6 +189,26 @@ export default {
|
|
|
luckyElementColor: function() {
|
|
|
var dir = this.luckyDirection
|
|
|
return this.dirColorMap[dir] || '#FF6B9D'
|
|
|
+ },
|
|
|
+ themeStyle: function() {
|
|
|
+ var color = this.themeColor || '#FF6B9D'
|
|
|
+ var lighter = color + '15'
|
|
|
+ var borderColor = color + '20'
|
|
|
+ var shadowColor = color + '25'
|
|
|
+ return {
|
|
|
+ '--theme-color': color,
|
|
|
+ '--theme-lighter': lighter,
|
|
|
+ '--theme-border': borderColor,
|
|
|
+ '--theme-shadow': shadowColor,
|
|
|
+ '--theme-gradient': 'linear-gradient(135deg, ' + color + ', ' + color + 'CC)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isChild: function() {
|
|
|
+ try {
|
|
|
+ return this.$store && this.$store.state && this.$store.state.role === 'child'
|
|
|
+ } catch (e) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -432,6 +452,54 @@ export default {
|
|
|
ctx.strokeStyle = '#FFFFFF'
|
|
|
ctx.lineWidth = 1.5
|
|
|
ctx.stroke()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCompassClick: function(e) {
|
|
|
+ if (!this.isChild || !this.fortune) return
|
|
|
+
|
|
|
+ var touch = e.touches && e.touches[0]
|
|
|
+ if (!touch) return
|
|
|
+
|
|
|
+ var self = this
|
|
|
+ uni.createSelectorQuery().in(this).select('#tianpanCompass').boundingClientRect(function(rect) {
|
|
|
+ if (!rect) return
|
|
|
+ var touchX = touch.clientX - rect.left
|
|
|
+ var touchY = touch.clientY - rect.top
|
|
|
+ var cx = self._compassW / 2
|
|
|
+ var cy = self._compassH / 2
|
|
|
+ var radius = Math.min(cx, cy) - 4
|
|
|
+
|
|
|
+ // 判断点击区域
|
|
|
+ var elements = [
|
|
|
+ { label: '东', description: '家庭成长力', name: '木' },
|
|
|
+ { label: '南', description: '温馨家庭情', name: '火' },
|
|
|
+ { label: '西', description: '和谐人际关系', name: '金' },
|
|
|
+ { label: '北', description: '智慧与理性', name: '水' },
|
|
|
+ { label: '中', description: '稳固与安定', name: '土' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ for (var i = 0; i < elements.length; i++) {
|
|
|
+ var elem = elements[i]
|
|
|
+ var angle = elem.label === '东' ? 0 : elem.label === '南' ? Math.PI / 2 : elem.label === '西' ? Math.PI : elem.label === '北' ? -Math.PI / 2 : null
|
|
|
+ if (angle === null) continue
|
|
|
+
|
|
|
+ var labelR = radius * 0.7
|
|
|
+ var lx = cx + labelR * Math.cos(angle)
|
|
|
+ var ly = cy + labelR * Math.sin(angle)
|
|
|
+ var dist = Math.sqrt(Math.pow(touchX - lx, 2) + Math.pow(touchY - ly, 2))
|
|
|
+
|
|
|
+ if (dist <= 20) {
|
|
|
+ uni.showModal({
|
|
|
+ title: elem.name + '·' + elem.label + '方',
|
|
|
+ content: '这里是家里' + elem.name + '能量最旺的方向！\n' + elem.description + '，记得多在这个方向活动哦~',
|
|
|
+ confirmText: '知道啦',
|
|
|
+ showCancel: false,
|
|
|
+ confirmColor: self.themeColor || '#FF6B9D'
|
|
|
+ })
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).exec()
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -443,10 +511,10 @@ export default {
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 24rpx;
|
|
|
padding: 28rpx 24rpx;
|
|
|
- /* Claymorphism 双阴影 */
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(255, 107, 157, 0.12),
|
|
|
+ /* 动态主题阴影 */
|
|
|
+ box-shadow: 0 4rpx 16rpx var(--theme-shadow, rgba(255, 107, 157, 0.12)),
|
|
|
0 2rpx 4rpx rgba(0, 0, 0, 0.04);
|
|
|
- border: 1rpx solid rgba(255, 107, 157, 0.08);
|
|
|
+ border: 1rpx solid var(--theme-border, rgba(255, 107, 157, 0.08));
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
@@ -458,7 +526,7 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 24rpx;
|
|
|
padding-bottom: 20rpx;
|
|
|
- border-bottom: 1rpx solid rgba(255, 107, 157, 0.10);
|
|
|
+ border-bottom: 1rpx solid var(--theme-border, rgba(255, 107, 157, 0.10));
|
|
|
}
|
|
|
.tp-header-left {
|
|
|
display: flex;
|
|
|
@@ -469,12 +537,12 @@ export default {
|
|
|
width: 64rpx;
|
|
|
height: 64rpx;
|
|
|
border-radius: 20rpx;
|
|
|
- background: linear-gradient(135deg, #FF6B9D, #FF8FB1);
|
|
|
+ background: var(--theme-gradient, linear-gradient(135deg, #FF6B9D, #FF8FB1));
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 16rpx;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.30);
|
|
|
+ box-shadow: 0 4rpx 12rpx var(--theme-shadow, rgba(255, 107, 157, 0.30));
|
|
|
}
|
|
|
.tp-icon-text {
|
|
|
font-size: 32rpx;
|
|
|
@@ -498,14 +566,14 @@ export default {
|
|
|
width: 56rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 28rpx;
|
|
|
- background: #FFF0F3;
|
|
|
+ background: var(--theme-lighter, #FFF0F3);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.tp-action-text {
|
|
|
font-size: 28rpx;
|
|
|
- color: #FF6B9D;
|
|
|
+ color: var(--theme-color, #FF6B9D);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.tp-header-action:active {
|
|
|
@@ -613,7 +681,7 @@ export default {
|
|
|
}
|
|
|
.tp-mood-bar-fill {
|
|
|
height: 100%;
|
|
|
- background: linear-gradient(90deg, #FF6B9D, #FF8FB1);
|
|
|
+ background: var(--theme-gradient, linear-gradient(90deg, #FF6B9D, #FF8FB1));
|
|
|
border-radius: 5rpx;
|
|
|
transition: width 0.5s;
|
|
|
}
|
|
|
@@ -631,7 +699,7 @@ export default {
|
|
|
.tp-direction-value {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 700;
|
|
|
- color: #FF6B9D;
|
|
|
+ color: var(--theme-color, #FF6B9D);
|
|
|
}
|
|
|
|
|
|
/* ===== 底部提示 ===== */
|
|
|
@@ -641,7 +709,7 @@ export default {
|
|
|
align-items: flex-start;
|
|
|
margin-top: 20rpx;
|
|
|
padding: 16rpx;
|
|
|
- background: #FFF5F0;
|
|
|
+ background: var(--theme-lighter, #FFF5F0);
|
|
|
border-radius: 14rpx;
|
|
|
}
|
|
|
.tp-footer-icon {
|
|
|
@@ -674,13 +742,13 @@ export default {
|
|
|
}
|
|
|
.tp-advice-icon {
|
|
|
font-size: 24rpx;
|
|
|
- color: #FF6B9D;
|
|
|
+ color: var(--theme-color, #FF6B9D);
|
|
|
margin-right: 12rpx;
|
|
|
}
|
|
|
.tp-advice-label {
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 600;
|
|
|
- color: #FF6B9D;
|
|
|
+ color: var(--theme-color, #FF6B9D);
|
|
|
margin-right: 12rpx;
|
|
|
min-width: 60rpx;
|
|
|
}
|
|
|
@@ -696,7 +764,7 @@ export default {
|
|
|
margin-top: 16rpx;
|
|
|
text-align: center;
|
|
|
padding: 14rpx;
|
|
|
- background: linear-gradient(135deg, #FFF0F3, #FFE0E8);
|
|
|
+ background: var(--theme-lighter, linear-gradient(135deg, #FFF0F3, #FFE0E8));
|
|
|
border-radius: 14rpx;
|
|
|
}
|
|
|
.tp-detail-btn:active {
|
|
|
@@ -704,7 +772,7 @@ export default {
|
|
|
}
|
|
|
.tp-detail-text {
|
|
|
font-size: 24rpx;
|
|
|
- color: #FF6B9D;
|
|
|
+ color: var(--theme-color, #FF6B9D);
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
</style>
|
openhands