|
@@ -0,0 +1,517 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="duo-container">
|
|
|
|
|
+ <view class="loading-state" v-if="loading">
|
|
|
|
|
+ <text>加载中...</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <template v-if="!loading && dataLoaded">
|
|
|
|
|
+ <!-- 双人头像区 -->
|
|
|
|
|
+ <view class="duo-header">
|
|
|
|
|
+ <view class="person-card">
|
|
|
|
|
+ <view class="person-avatar">{{ name1.charAt(0) }}</view>
|
|
|
|
|
+ <text class="person-name">{{ name1 }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="compatibility-badge">
|
|
|
|
|
+ <text class="compatibility-score">{{ overallScore }}</text>
|
|
|
|
|
+ <text class="compatibility-label">兼容分</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="person-card">
|
|
|
|
|
+ <view class="person-avatar">{{ name2.charAt(0) }}</view>
|
|
|
|
|
+ <text class="person-name">{{ name2 }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 维度评分条 -->
|
|
|
|
|
+ <view class="dimension-summary">
|
|
|
|
|
+ <view class="dimension-item" v-for="dim in dimensions" :key="dim.key" @click="activeTab = dim.key">
|
|
|
|
|
+ <text class="dimension-label">{{ dim.label }}</text>
|
|
|
|
|
+ <view class="dimension-bar-track">
|
|
|
|
|
+ <view class="dimension-bar-fill" :style="{ width: dim.score + '%', background: dim.color }"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="dimension-score">{{ dim.score }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- Tab 切换 -->
|
|
|
|
|
+ <view class="tab-bar">
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="tab-item"
|
|
|
|
|
+ v-for="tab in tabs"
|
|
|
|
|
+ :key="tab.key"
|
|
|
|
|
+ :class="activeTab === tab.key ? 'tab-active' : ''"
|
|
|
|
|
+ @click="activeTab = tab.key">
|
|
|
|
|
+ <text>{{ tab.label }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 八字合盘 Tab -->
|
|
|
|
|
+ <view class="tab-content" v-if="activeTab === 'zodiac'">
|
|
|
|
|
+ <view class="info-card">
|
|
|
|
|
+ <view class="info-row" v-if="data.baziPairingSummary">
|
|
|
|
|
+ <text class="info-label">合盘摘要</text>
|
|
|
|
|
+ <text class="info-value">{{ data.baziPairingSummary }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 五行互补 Tab -->
|
|
|
|
|
+ <view class="tab-content" v-if="activeTab === 'wuxing'">
|
|
|
|
|
+ <view class="wuxing-grid">
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="wuxing-card"
|
|
|
|
|
+ v-for="wx in wuxingData"
|
|
|
|
|
+ :key="wx.element"
|
|
|
|
|
+ :style="{ background: wx.color + '18', borderColor: wx.color }">
|
|
|
|
|
+ <text class="wuxing-card-elem">{{ wx.elementLabel }}</text>
|
|
|
|
|
+ <view class="wuxing-card-bars">
|
|
|
|
|
+ <view class="wuxing-bar-pair">
|
|
|
|
|
+ <text class="wuxing-bar-label">{{ name1 }}</text>
|
|
|
|
|
+ <view class="wuxing-bar-track-s">
|
|
|
|
|
+ <view class="wuxing-bar-fill-s" :style="{ width: wx.v1 + '%', background: wx.color }"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="wuxing-bar-val">{{ wx.v1 }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="wuxing-bar-pair">
|
|
|
|
|
+ <text class="wuxing-bar-label">{{ name2 }}</text>
|
|
|
|
|
+ <view class="wuxing-bar-track-s">
|
|
|
|
|
+ <view class="wuxing-bar-fill-s" :style="{ width: wx.v2 + '%', background: wx.color }"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="wuxing-bar-val">{{ wx.v2 }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <text class="wuxing-card-desc">{{ wx.description }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-card" v-if="data.wuxingComplementarity">
|
|
|
|
|
+ <text class="info-label">五行互补分析</text>
|
|
|
|
|
+ <text class="info-value" style="margin-top:12rpx">{{ data.wuxingComplementarity.analysis }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 生肖配对 Tab -->
|
|
|
|
|
+ <view class="tab-content" v-if="activeTab === 'zodiac'">
|
|
|
|
|
+ <view class="info-card" v-if="data.zodiacCompatibility">
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="info-label">生肖配对</text>
|
|
|
|
|
+ <text class="info-value">{{ zodLabel1 }} & {{ zodLabel2 }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row" v-if="data.zodiacCompatibility.affinityType">
|
|
|
|
|
+ <text class="info-label">配对关系</text>
|
|
|
|
|
+ <text class="info-value">{{ data.zodiacCompatibility.affinityType }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row" v-if="data.zodiacCompatibility.description">
|
|
|
|
|
+ <text class="info-label">详解</text>
|
|
|
|
|
+ <text class="info-value">{{ data.zodiacCompatibility.description }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="info-label">得分</text>
|
|
|
|
|
+ <text class="info-value score-high">{{ data.zodiacCompatibility.score }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 灵数关系 Tab -->
|
|
|
|
|
+ <view class="tab-content" v-if="activeTab === 'lifenumber'">
|
|
|
|
|
+ <view class="info-card" v-if="data.lifeNumberRelationship">
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="info-label">{{ name1 }} 灵数</text>
|
|
|
|
|
+ <text class="info-value">{{ data.lifeNumberRelationship.lifeNumber1 }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="info-label">{{ name2 }} 灵数</text>
|
|
|
|
|
+ <text class="info-value">{{ data.lifeNumberRelationship.lifeNumber2 }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="info-label">关系数</text>
|
|
|
|
|
+ <text class="info-value score-primary">{{ data.lifeNumberRelationship.relationshipNumber }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row" v-if="data.lifeNumberRelationship.relationshipType">
|
|
|
|
|
+ <text class="info-label">关系类型</text>
|
|
|
|
|
+ <text class="info-value">{{ data.lifeNumberRelationship.relationshipType }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row" v-if="data.lifeNumberRelationship.description">
|
|
|
|
|
+ <text class="info-label">详解</text>
|
|
|
|
|
+ <text class="info-value">{{ data.lifeNumberRelationship.description }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="info-label">得分</text>
|
|
|
|
|
+ <text class="info-value score-high">{{ data.lifeNumberRelationship.score }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="empty-state" v-if="!loading && !dataLoaded">
|
|
|
|
|
+ <text>暂无兼容数据</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import config from '../../config'
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ loading: true,
|
|
|
|
|
+ dataLoaded: false,
|
|
|
|
|
+ memberId1: null,
|
|
|
|
|
+ memberId2: null,
|
|
|
|
|
+ name1: '',
|
|
|
|
|
+ name2: '',
|
|
|
|
|
+ overallScore: 0,
|
|
|
|
|
+ data: {},
|
|
|
|
|
+ activeTab: 'wuxing',
|
|
|
|
|
+ tabs: [
|
|
|
|
|
+ { key: 'bazi', label: '八字合盘' },
|
|
|
|
|
+ { key: 'wuxing', label: '五行互补' },
|
|
|
|
|
+ { key: 'zodiac', label: '生肖配对' },
|
|
|
|
|
+ { key: 'lifenumber', label: '灵数关系' }
|
|
|
|
|
+ ],
|
|
|
|
|
+ dimensions: [],
|
|
|
|
|
+ wuxingColors: {
|
|
|
|
|
+ wood: '#10B981',
|
|
|
|
|
+ fire: '#FF6B9D',
|
|
|
|
|
+ earth: '#FF8C42',
|
|
|
|
|
+ metal: '#6366F1',
|
|
|
|
|
+ water: '#3B82F6'
|
|
|
|
|
+ },
|
|
|
|
|
+ wuxingLabels: {
|
|
|
|
|
+ wood: '木', fire: '火', earth: '土', metal: '金', water: '水'
|
|
|
|
|
+ },
|
|
|
|
|
+ zodiacNames: {
|
|
|
|
|
+ rat: '鼠', ox: '牛', tiger: '虎', rabbit: '兔', dragon: '龙',
|
|
|
|
|
+ snake: '蛇', horse: '马', sheep: '羊', monkey: '猴',
|
|
|
|
|
+ rooster: '鸡', dog: '狗', pig: '猪'
|
|
|
|
|
+ },
|
|
|
|
|
+ wuxingElements: ['wood', 'fire', 'earth', 'metal', 'water']
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ zodLabel1() {
|
|
|
|
|
+ var z = this.data.zodiacCompatibility
|
|
|
|
|
+ return z ? (this.zodiacNames[z.zodiac1] || z.zodiac1) : ''
|
|
|
|
|
+ },
|
|
|
|
|
+ zodLabel2() {
|
|
|
|
|
+ var z = this.data.zodiacCompatibility
|
|
|
|
|
+ return z ? (this.zodiacNames[z.zodiac2] || z.zodiac2) : ''
|
|
|
|
|
+ },
|
|
|
|
|
+ wuxingData() {
|
|
|
|
|
+ var wc = this.data.wuxingComplementarity
|
|
|
|
|
+ if (!wc || !wc.elementScores) return []
|
|
|
|
|
+ var arr = []
|
|
|
|
|
+ for (var i = 0; i < this.wuxingElements.length; i++) {
|
|
|
|
|
+ var elem = this.wuxingElements[i]
|
|
|
|
|
+ var es = wc.elementScores[elem]
|
|
|
|
|
+ if (es === undefined) continue
|
|
|
|
|
+ arr.push({
|
|
|
|
|
+ element: elem,
|
|
|
|
|
+ elementLabel: this.wuxingLabels[elem],
|
|
|
|
|
+ color: this.wuxingColors[elem],
|
|
|
|
|
+ v1: wc.member1Elements[elem] || 0,
|
|
|
|
|
+ v2: wc.member2Elements[elem] || 0,
|
|
|
|
|
+ score: es,
|
|
|
|
|
+ description: this.wuxingDesc(elem, es)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ return arr.sort(function(a, b) { return b.score - a.score })
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ onLoad(params) {
|
|
|
|
|
+ this.memberId1 = params.memberId1
|
|
|
|
|
+ this.memberId2 = params.memberId2
|
|
|
|
|
+ this.loadData()
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ loadData() {
|
|
|
|
|
+ var self = this
|
|
|
|
|
+
|
|
|
|
|
+ uni.request({
|
|
|
|
|
+ url: config.API_BASE_URL + '/api/mind/traditional/compatibility',
|
|
|
|
|
+ method: 'POST',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ memberId1: self.memberId1,
|
|
|
|
|
+ memberId2: self.memberId2,
|
|
|
|
|
+ memberType1: 'child',
|
|
|
|
|
+ memberType2: 'child'
|
|
|
|
|
+ },
|
|
|
|
|
+ success: function(res) {
|
|
|
|
|
+ self.loading = false
|
|
|
|
|
+ if (res.data && res.data.code === 200 && res.data.data) {
|
|
|
|
|
+ var d = res.data.data
|
|
|
|
|
+ self.data = d
|
|
|
|
|
+ self.overallScore = d.overallScore || 0
|
|
|
|
|
+ self.name1 = d.memberName1 || '成员1'
|
|
|
|
|
+ self.name2 = d.memberName2 || '成员2'
|
|
|
|
|
+ self.buildDimensions(d)
|
|
|
|
|
+ self.dataLoaded = true
|
|
|
|
|
+ } else {
|
|
|
|
|
+ self.dataLoaded = false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: function() {
|
|
|
|
|
+ self.loading = false
|
|
|
|
|
+ self.dataLoaded = false
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ buildDimensions(d) {
|
|
|
|
|
+ var dims = []
|
|
|
|
|
+ if (d.zodiacCompatibility && d.zodiacCompatibility.score !== undefined) {
|
|
|
|
|
+ dims.push({ key: 'zodiac', label: '生肖配对', score: d.zodiacCompatibility.score, color: '#8B5CF6' })
|
|
|
|
|
+ }
|
|
|
|
|
+ if (d.wuxingComplementarity && d.wuxingComplementarity.score !== undefined) {
|
|
|
|
|
+ dims.push({ key: 'wuxing', label: '五行互补', score: d.wuxingComplementarity.score, color: '#10B981' })
|
|
|
|
|
+ }
|
|
|
|
|
+ if (d.wuxingComplementarity && d.wuxingComplementarity.bloodTypeScore !== undefined) {
|
|
|
|
|
+ dims.push({ key: 'blood', label: '血型兼容', score: d.wuxingComplementarity.bloodTypeScore, color: '#FF6B9D' })
|
|
|
|
|
+ }
|
|
|
|
|
+ if (d.lifeNumberRelationship && d.lifeNumberRelationship.score !== undefined) {
|
|
|
|
|
+ dims.push({ key: 'lifenumber', label: '灵数关系', score: d.lifeNumberRelationship.score, color: '#F59E0B' })
|
|
|
|
|
+ }
|
|
|
|
|
+ this.dimensions = dims
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ wuxingDesc(elem, score) {
|
|
|
|
|
+ if (score >= 70) return '互补良好'
|
|
|
|
|
+ if (score >= 50) return '较为平衡'
|
|
|
|
|
+ return '有待加强'
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.duo-container {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: #F8F6F0;
|
|
|
|
|
+ padding-bottom: 40rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.loading-state {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 120rpx 0;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.duo-header {
|
|
|
|
|
+ background: linear-gradient(135deg, #8B5CF6, #A78BFA);
|
|
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+}
|
|
|
|
|
+.person-card {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+.person-avatar {
|
|
|
|
|
+ width: 88rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: rgba(255,255,255,0.3);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.person-name {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: rgba(255,255,255,0.9);
|
|
|
|
|
+ margin-top: 12rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.compatibility-badge {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+}
|
|
|
|
|
+.compatibility-score {
|
|
|
|
|
+ font-size: 64rpx;
|
|
|
|
|
+ font-weight: 800;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+}
|
|
|
|
|
+.compatibility-label {
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ color: rgba(255,255,255,0.7);
|
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.dimension-summary {
|
|
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ padding: 24rpx 28rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 16rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.dimension-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 12rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.dimension-label {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ width: 96rpx;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.dimension-bar-track {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 16rpx;
|
|
|
|
|
+ background: #F0F0F0;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+.dimension-bar-fill {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ transition: width 0.3s;
|
|
|
|
|
+}
|
|
|
|
|
+.dimension-score {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ width: 56rpx;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+}
|
|
|
|
|
+.tab-bar {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin: 0 32rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+.tab-item {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ border-bottom: 4rpx solid transparent;
|
|
|
|
|
+}
|
|
|
|
|
+.tab-active {
|
|
|
|
|
+ color: #8B5CF6;
|
|
|
|
|
+ border-bottom-color: #8B5CF6;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+}
|
|
|
|
|
+.tab-content {
|
|
|
|
|
+ margin: 0 32rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 0 0 20rpx 20rpx;
|
|
|
|
|
+ padding: 28rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.info-card {
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+ background: #FAFAFA;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.info-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 12rpx 0;
|
|
|
|
|
+ border-bottom: 1rpx solid #F0F0F0;
|
|
|
|
|
+}
|
|
|
|
|
+.info-row:last-child {
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+}
|
|
|
|
|
+.info-label {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+}
|
|
|
|
|
+.info-value {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ max-width: 60%;
|
|
|
|
|
+}
|
|
|
|
|
+.score-high {
|
|
|
|
|
+ color: #10B981;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.score-primary {
|
|
|
|
|
+ color: #8B5CF6;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-grid {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+ gap: 16rpx;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-card {
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ border: 2rpx solid;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-card-elem {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ margin-bottom: 12rpx;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-card-bars {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-bar-pair {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-bar-label {
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ width: 60rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-bar-track-s {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 12rpx;
|
|
|
|
|
+ background: #F0F0F0;
|
|
|
|
|
+ border-radius: 6rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-bar-fill-s {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ border-radius: 6rpx;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-bar-val {
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+}
|
|
|
|
|
+.wuxing-card-desc {
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+}
|
|
|
|
|
+.empty-state {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 120rpx 0;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|