|
@@ -17,7 +17,7 @@
|
|
|
<view class="member-card" v-for="member in members" :key="member.memberId">
|
|
<view class="member-card" v-for="member in members" :key="member.memberId">
|
|
|
<!-- 头部 -->
|
|
<!-- 头部 -->
|
|
|
<view class="card-header">
|
|
<view class="card-header">
|
|
|
- <view class="avatar" :style="{ backgroundColor: member.colorHex || '#6B7280' }">
|
|
|
|
|
|
|
+ <view class="avatar" :style="{ backgroundColor: member.colorHex || memberColorFallback }">
|
|
|
<text class="avatar-text">{{ member.nickname ? member.nickname.charAt(0) : 'M' }}</text>
|
|
<text class="avatar-text">{{ member.nickname ? member.nickname.charAt(0) : 'M' }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="member-info">
|
|
<view class="member-info">
|
|
@@ -99,13 +99,15 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { BrandColors } from '../../utils/brand-colors.js'
|
|
|
import { mapState, mapGetters, mapActions } from 'vuex'
|
|
import { mapState, mapGetters, mapActions } from 'vuex'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
data: function() {
|
|
data: function() {
|
|
|
return {
|
|
return {
|
|
|
loading: false,
|
|
loading: false,
|
|
|
- members: []
|
|
|
|
|
|
|
+ members: [],
|
|
|
|
|
+ memberColorFallback: BrandColors.textSlate
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -146,12 +148,12 @@ export default {
|
|
|
|
|
|
|
|
getWuxingData: function(wuxingElements) {
|
|
getWuxingData: function(wuxingElements) {
|
|
|
if (!wuxingElements) return []
|
|
if (!wuxingElements) return []
|
|
|
- var colorMap = { wood: '#10B981', fire: '#FF6B9D', earth: '#FF8C42', metal: '#6366F1', water: '#3B82F6' }
|
|
|
|
|
|
|
+ var colorMap = { wood: BrandColors.success, fire: BrandColors.mind, earth: BrandColors.body, metal: BrandColors.wisdom, water: BrandColors.infoBlue }
|
|
|
var labelMap = { wood: '木', fire: '火', earth: '土', metal: '金', water: '水' }
|
|
var labelMap = { wood: '木', fire: '火', earth: '土', metal: '金', water: '水' }
|
|
|
var result = []
|
|
var result = []
|
|
|
for (var key in wuxingElements) {
|
|
for (var key in wuxingElements) {
|
|
|
if (wuxingElements.hasOwnProperty(key)) {
|
|
if (wuxingElements.hasOwnProperty(key)) {
|
|
|
- result.push({ key: key, label: labelMap[key] || key, value: wuxingElements[key], color: colorMap[key] || '#94A3B8' })
|
|
|
|
|
|
|
+ result.push({ key: key, label: labelMap[key] || key, value: wuxingElements[key], color: colorMap[key] || BrandColors.appTextSubtle })
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
return result.sort(function(a, b) { return b.value - a.value })
|
|
return result.sort(function(a, b) { return b.value - a.value })
|
|
@@ -163,8 +165,8 @@ export default {
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
getLifeNumberColor: function(num) {
|
|
getLifeNumberColor: function(num) {
|
|
|
- var colors = { 1: '#F97316', 2: '#EC4899', 3: '#8B5CF6', 4: '#F59E0B', 5: '#3B82F6', 6: '#10B981', 7: '#6366F1', 8: '#EF4444', 9: '#14B8A6' }
|
|
|
|
|
- return colors[num] || '#6B7280'
|
|
|
|
|
|
|
+ var colors = { 1: BrandColors.primary, 2: BrandColors.pink, 3: BrandColors.violet, 4: BrandColors.wealth, 5: BrandColors.infoBlue, 6: BrandColors.success, 7: BrandColors.wisdom, 8: BrandColors.danger, 9: BrandColors.tealDeep }
|
|
|
|
|
+ return colors[num] || BrandColors.textSlate
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
getLifeNumberTitle: function(num) {
|
|
getLifeNumberTitle: function(num) {
|
|
@@ -178,8 +180,8 @@ export default {
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
getDimColor: function(key) {
|
|
getDimColor: function(key) {
|
|
|
- var colors = { body: '#FF8C42', mind: '#FF6B9D', wisdom: '#6366F1', action: '#10B981', wealth: '#F59E0B' }
|
|
|
|
|
- return colors[key] || '#6B7280'
|
|
|
|
|
|
|
+ var colors = { body: BrandColors.body, mind: BrandColors.mind, wisdom: BrandColors.wisdom, action: BrandColors.action, wealth: BrandColors.wealth }
|
|
|
|
|
+ return colors[key] || BrandColors.textSlate
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -188,7 +190,7 @@ export default {
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.traditional-container {
|
|
.traditional-container {
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
|
- background: #FFF8F0;
|
|
|
|
|
|
|
+ background: $dim-body-tint;
|
|
|
padding-bottom: 80rpx;
|
|
padding-bottom: 80rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|