|
|
@@ -0,0 +1,642 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <view class="nav-bar" :style="{ background: navGradient }">
|
|
|
+ <view class="nav-back" @click="goBack">
|
|
|
+ <text class="nav-back-icon">←</text>
|
|
|
+ </view>
|
|
|
+ <text class="nav-title">{{ pageTitle }}</text>
|
|
|
+ <view class="nav-right" @click="showMemberPicker = true">
|
|
|
+ <text class="nav-current-member">{{ currentMemberName }}</text>
|
|
|
+ <text class="nav-arrow">▼</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 加载中 -->
|
|
|
+ <view class="loading-wrap" v-if="loading">
|
|
|
+ <text class="loading-text">加载中...</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 未登录 -->
|
|
|
+ <template v-else-if="!isLoggedIn">
|
|
|
+ <view class="empty-state">
|
|
|
+ <text class="empty-icon">🌟</text>
|
|
|
+ <text class="empty-title">登录后查看五维能量</text>
|
|
|
+ <text class="empty-desc">了解您和家人的身·智·富·行·心能量状态</text>
|
|
|
+ <button class="login-btn" @click="goLogin">去登录</button>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 已登录 -->
|
|
|
+ <template v-else-if="!loading && sandboxData">
|
|
|
+ <!-- ===== 能量总览卡 ===== -->
|
|
|
+ <view class="overview-card">
|
|
|
+ <view class="overview-header">
|
|
|
+ <view class="overview-avatar" :style="{ background: avatarGradient }">
|
|
|
+ <text class="avatar-text">{{ avatarChar }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="overview-info">
|
|
|
+ <text class="overview-name">{{ currentMemberName }}</text>
|
|
|
+ <text class="overview-role">{{ currentRoleLabel }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="overview-score">
|
|
|
+ <text class="score-value">{{ overallScore || '--' }}</text>
|
|
|
+ <text class="score-label">综合能量</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 五维能量条 -->
|
|
|
+ <view class="dims-row">
|
|
|
+ <view class="dim-bar" v-for="dim in dimList" :key="dim.code" @click="goDimension(dim.code)">
|
|
|
+ <view class="dim-icon-wrap" :style="{ background: dim.color }">
|
|
|
+ <text class="dim-icon">{{ dim.icon }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="dim-bar-track">
|
|
|
+ <view class="dim-bar-fill" :style="{ width: getDimScore(dim.code) + '%', background: dim.color }"></view>
|
|
|
+ </view>
|
|
|
+ <text class="dim-bar-score">{{ getDimScore(dim.code) }}</text>
|
|
|
+ <text class="dim-bar-label">{{ dim.label }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- ===== 五维雷达图 ===== -->
|
|
|
+ <view class="section radar-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">五维雷达</text>
|
|
|
+ <text class="section-hint" v-if="currentView === 'family'">全家平均</text>
|
|
|
+ <text class="section-hint" v-else>{{ currentMemberName }}个人</text>
|
|
|
+ </view>
|
|
|
+ <RadarChart
|
|
|
+ v-if="radarDims.length >= 3"
|
|
|
+ :dimensions="radarDims"
|
|
|
+ :scores="radarScores"
|
|
|
+ :avg-scores="[]"
|
|
|
+ fillColor="rgba(102,126,234,0.2)"
|
|
|
+ strokeColor="#667eea"
|
|
|
+ gridColor="rgba(102,126,234,0.15)"
|
|
|
+ labelColor="#888"
|
|
|
+ :width="580"
|
|
|
+ :height="580"
|
|
|
+ @dimensionClick="goDimension" />
|
|
|
+ <view class="empty-radar" v-else>
|
|
|
+ <text>暂无足够数据生成雷达图</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- ===== 家庭成员对比 ===== -->
|
|
|
+ <view class="section compare-section" v-if="currentView !== 'self' && familyMembers.length > 1">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">家庭成员能量对比</text>
|
|
|
+ </view>
|
|
|
+ <view class="compare-list">
|
|
|
+ <view
|
|
|
+ class="compare-item"
|
|
|
+ v-for="m in familyMembers"
|
|
|
+ :key="m.memberId"
|
|
|
+ :class="{ active: selectedMemberId === m.memberId }"
|
|
|
+ @click="selectMember(m)">
|
|
|
+ <view class="compare-avatar" :style="{ background: memberColor(m) }">
|
|
|
+ <text class="compare-avatar-text">{{ m.name ? m.name.charAt(0) : '?' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="compare-info">
|
|
|
+ <text class="compare-name">{{ m.name || '成员' }}</text>
|
|
|
+ <text class="compare-role">{{ m.familyRole || m.memberType || '' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="compare-score">
|
|
|
+ <text class="compare-score-value" :style="{ color: memberColor(m) }">{{ m.overallScore || '--' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- ===== 快速入口 ===== -->
|
|
|
+ <view class="section quick-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">能量详情</text>
|
|
|
+ </view>
|
|
|
+ <view class="quick-grid">
|
|
|
+ <view
|
|
|
+ class="quick-item"
|
|
|
+ v-for="dim in dimList"
|
|
|
+ :key="dim.code"
|
|
|
+ @click="goDimension(dim.code)">
|
|
|
+ <view class="quick-icon-wrap" :style="{ background: dim.color + '22' }">
|
|
|
+ <text class="quick-icon">{{ dim.icon }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="quick-label">{{ dim.label }}</text>
|
|
|
+ <text class="quick-score">{{ getDimScore(dim.code) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部占位 -->
|
|
|
+ <view class="bottom-spacer"></view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 成员选择弹窗 -->
|
|
|
+ <view class="modal-mask" v-if="showMemberPicker" @click="showMemberPicker = false">
|
|
|
+ <view class="member-picker" @click.stop>
|
|
|
+ <view class="picker-header">
|
|
|
+ <text class="picker-title">选择查看对象</text>
|
|
|
+ <text class="picker-close" @click="showMemberPicker = false">×</text>
|
|
|
+ </view>
|
|
|
+ <view class="picker-item" :class="{ active: currentView === 'family' }" @click="switchView('family')">
|
|
|
+ <text class="picker-icon">🏠</text>
|
|
|
+ <text class="picker-label">全家总览</text>
|
|
|
+ <text class="picker-desc">家庭整体能量状态</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="picker-item"
|
|
|
+ v-for="m in familyMembers"
|
|
|
+ :key="m.memberId"
|
|
|
+ :class="{ active: selectedMemberId === m.memberId }"
|
|
|
+ @click="selectMember(m); showMemberPicker = false">
|
|
|
+ <view class="picker-avatar" :style="{ background: memberColor(m) }">
|
|
|
+ <text class="picker-avatar-text">{{ m.name ? m.name.charAt(0) : '?' }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="picker-label">{{ m.name || '成员' }}</text>
|
|
|
+ <text class="picker-desc">{{ m.familyRole || m.memberType || '' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import RadarChart from '../../components/RadarChart.vue'
|
|
|
+import { getFamilyEnergySandbox, getVisibleFamilyMembers } from '../../utils/api.js'
|
|
|
+
|
|
|
+var DIM_CONFIG = [
|
|
|
+ { code: 'body', label: '身', icon: '💪', color: '#10B981', gradient: 'linear-gradient(135deg,#10B981,#34D399)' },
|
|
|
+ { code: 'mind', label: '心', icon: '❤️', color: '#8B5CF6', gradient: 'linear-gradient(135deg,#8B5CF6,#A78BFA)' },
|
|
|
+ { code: 'wisdom', label: '智', icon: '🧠', color: '#F59E0B', gradient: 'linear-gradient(135deg,#F59E0B,#FBBF24)' },
|
|
|
+ { code: 'action', label: '行', icon: '⚡', color: '#F97316', gradient: 'linear-gradient(135deg,#F97316,#FB923C)' },
|
|
|
+ { code: 'wealth', label: '富', icon: '💎', color: '#3B82F6', gradient: 'linear-gradient(135deg,#3B82F6,#60A5FA)' }
|
|
|
+]
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { RadarChart },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ isLoggedIn: false,
|
|
|
+ sandboxData: null,
|
|
|
+ familyMembers: [],
|
|
|
+ selectedMemberId: null,
|
|
|
+ currentView: 'self', // self | family
|
|
|
+ showMemberPicker: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dimList() { return DIM_CONFIG },
|
|
|
+ currentMember() {
|
|
|
+ if (this.currentView === 'family') return null
|
|
|
+ return this.familyMembers.find(m => m.memberId === this.selectedMemberId) || null
|
|
|
+ },
|
|
|
+ currentMemberName() {
|
|
|
+ if (this.currentView === 'family') return '全家'
|
|
|
+ if (!this.currentMember) return '我'
|
|
|
+ return this.currentMember.name || '成员'
|
|
|
+ },
|
|
|
+ currentRoleLabel() {
|
|
|
+ if (this.currentView === 'family') return '家庭整体'
|
|
|
+ if (!this.currentMember) return ''
|
|
|
+ return this.currentMember.familyRole || this.currentMember.memberType || ''
|
|
|
+ },
|
|
|
+ overallScore() {
|
|
|
+ if (this.currentView === 'family') {
|
|
|
+ return this.sandboxData && this.sandboxData.overallScore
|
|
|
+ }
|
|
|
+ if (this.currentMember) {
|
|
|
+ return this.currentMember.overallScore
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ },
|
|
|
+ avatarChar() {
|
|
|
+ if (this.currentView === 'family') return '🏠'
|
|
|
+ if (this.currentMember) return (this.currentMember.name || '?').charAt(0)
|
|
|
+ return '👤'
|
|
|
+ },
|
|
|
+ avatarGradient() {
|
|
|
+ if (this.currentView === 'family') return 'linear-gradient(135deg,#667eea,#764ba2)'
|
|
|
+ if (this.currentMember) return this.memberColor(this.currentMember)
|
|
|
+ return 'linear-gradient(135deg,#8B5CF6,#A78BFA)'
|
|
|
+ },
|
|
|
+ navTitle() { return this.currentMemberName + ' · 五维能量' },
|
|
|
+ navGradient() {
|
|
|
+ if (this.currentView === 'family') return 'linear-gradient(135deg,#667eea,#764ba2)'
|
|
|
+ if (this.currentMember) {
|
|
|
+ var dim = DIM_CONFIG[0]
|
|
|
+ return dim.gradient
|
|
|
+ }
|
|
|
+ return 'linear-gradient(135deg,#667eea,#764ba2)'
|
|
|
+ },
|
|
|
+ pageTitle() { return this.navTitle },
|
|
|
+ radarDims() {
|
|
|
+ return DIM_CONFIG.map(d => d.label)
|
|
|
+ },
|
|
|
+ radarScores() {
|
|
|
+ if (this.currentView === 'family') {
|
|
|
+ var d = this.sandboxData
|
|
|
+ return DIM_CONFIG.map(dim => d ? (d[dim.code + 'Score'] || 0) : 0)
|
|
|
+ }
|
|
|
+ if (this.currentMember) {
|
|
|
+ return DIM_CONFIG.map(dim => this.currentMember[dim.code + 'Score'] || 0)
|
|
|
+ }
|
|
|
+ return [0, 0, 0, 0, 0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.checkLogin()
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.isLoggedIn) this.loadData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkLogin() {
|
|
|
+ this.isLoggedIn = !!uni.getStorageSync('token')
|
|
|
+ },
|
|
|
+ goLogin() {
|
|
|
+ uni.navigateTo({ url: '/pages/login/login' })
|
|
|
+ },
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack({ fail: function() { uni.switchTab({ url: '/pages/index-home/index' }) } })
|
|
|
+ },
|
|
|
+ memberColor(member) {
|
|
|
+ if (!member) return 'linear-gradient(135deg,#8B5CF6,#A78BFA)'
|
|
|
+ var types = { parent: '#F59E0B', child: '#10B981', teacher: '#3B82F6' }
|
|
|
+ var t = member.memberType || 'parent'
|
|
|
+ var colors = {
|
|
|
+ parent: 'linear-gradient(135deg,#F59E0B,#FBBF24)',
|
|
|
+ child: 'linear-gradient(135deg,#10B981,#34D399)',
|
|
|
+ teacher:'linear-gradient(135deg,#3B82F6,#60A5FA)'
|
|
|
+ }
|
|
|
+ return colors[t] || colors.parent
|
|
|
+ },
|
|
|
+ getDimScore(code) {
|
|
|
+ if (this.currentView === 'family') {
|
|
|
+ return this.sandboxData ? (this.sandboxData[code + 'Score'] || 0) : 0
|
|
|
+ }
|
|
|
+ if (this.currentMember) {
|
|
|
+ return this.currentMember[code + 'Score'] || 0
|
|
|
+ }
|
|
|
+ return 0
|
|
|
+ },
|
|
|
+ async loadData() {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ var res = await getFamilyEnergySandbox()
|
|
|
+ if (res && res.code === 200 && res.data) {
|
|
|
+ this.sandboxData = res.data
|
|
|
+ // 如果是新格式,提取 familyData
|
|
|
+ if (res.data.familyData) {
|
|
|
+ this.sandboxData = res.data.familyData
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 加载家庭成员
|
|
|
+ var memRes = await getVisibleFamilyMembers()
|
|
|
+ if (memRes && memRes.code === 200 && memRes.data) {
|
|
|
+ this.familyMembers = memRes.data
|
|
|
+ // 默认选中第一个非自己(如果有)
|
|
|
+ if (this.familyMembers.length > 0 && !this.selectedMemberId) {
|
|
|
+ this.selectedMemberId = this.familyMembers[0].memberId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('加载能量数据失败', e)
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ switchView(view) {
|
|
|
+ this.currentView = view
|
|
|
+ if (view === 'family') {
|
|
|
+ this.selectedMemberId = null
|
|
|
+ }
|
|
|
+ this.showMemberPicker = false
|
|
|
+ },
|
|
|
+ selectMember(member) {
|
|
|
+ this.selectedMemberId = member.memberId
|
|
|
+ this.currentView = 'self'
|
|
|
+ this.showMemberPicker = false
|
|
|
+ },
|
|
|
+ goDimension(code) {
|
|
|
+ var url = ''
|
|
|
+ switch (code) {
|
|
|
+ case 'body': url = '/pages/body-detail/index'
|
|
|
+ case 'mind': url = '/pages/mind-detail/index'
|
|
|
+ case 'wisdom': url = '/pages/wisdom-detail/index'
|
|
|
+ case 'action': url = '/pages/action-detail/index'
|
|
|
+ case 'wealth': url = '/pages/wealth/index'
|
|
|
+ default: return
|
|
|
+ }
|
|
|
+ if (this.currentView !== 'family' && this.selectedMemberId) {
|
|
|
+ url += '?memberId=' + this.selectedMemberId
|
|
|
+ }
|
|
|
+ uni.navigateTo({ url: url })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: linear-gradient(180deg, #0F1B2D 0%, #1A2744 100%);
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+}
|
|
|
+.nav-bar {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ padding-top: 40rpx;
|
|
|
+}
|
|
|
+.nav-back {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255,255,255,0.1);
|
|
|
+ border-radius: 30rpx;
|
|
|
+}
|
|
|
+.nav-back-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.nav-title {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 80rpx;
|
|
|
+}
|
|
|
+.nav-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ background: rgba(255,255,255,0.1);
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+}
|
|
|
+.nav-current-member {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.nav-arrow {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: rgba(255,255,255,0.6);
|
|
|
+}
|
|
|
+.loading-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 200rpx;
|
|
|
+}
|
|
|
+.loading-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(255,255,255,0.5);
|
|
|
+}
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 200rpx 40rpx;
|
|
|
+}
|
|
|
+.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
|
|
|
+.empty-title { font-size: 32rpx; color: #fff; font-weight: 600; margin-bottom: 12rpx; }
|
|
|
+.empty-desc { font-size: 24rpx; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 40rpx; }
|
|
|
+.login-btn {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ background: linear-gradient(135deg, #667eea, #764ba2);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+/* ===== 总览卡 ===== */
|
|
|
+.overview-card {
|
|
|
+ margin: 20rpx 30rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ background: rgba(255,255,255,0.06);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ border: 1rpx solid rgba(255,255,255,0.1);
|
|
|
+}
|
|
|
+.overview-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+.overview-avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.avatar-text { font-size: 36rpx; }
|
|
|
+.overview-info { flex: 1; }
|
|
|
+.overview-name { font-size: 32rpx; font-weight: 600; color: #fff; display: block; }
|
|
|
+.overview-role { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
|
|
+.overview-score { text-align: right; }
|
|
|
+.score-value { font-size: 48rpx; font-weight: 700; color: #667eea; display: block; line-height: 1; }
|
|
|
+.score-label { font-size: 20rpx; color: rgba(255,255,255,0.4); }
|
|
|
+/* ===== 五维能量条 ===== */
|
|
|
+.dims-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+.dim-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+.dim-icon-wrap {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.dim-icon { font-size: 26rpx; }
|
|
|
+.dim-bar-track {
|
|
|
+ flex: 1;
|
|
|
+ height: 20rpx;
|
|
|
+ background: rgba(255,255,255,0.08);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.dim-bar-fill {
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ transition: width 0.5s ease;
|
|
|
+}
|
|
|
+.dim-bar-score {
|
|
|
+ width: 50rpx;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.dim-bar-label {
|
|
|
+ width: 40rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: rgba(255,255,255,0.5);
|
|
|
+ text-align: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+/* ===== 雷达图 ===== */
|
|
|
+.section {
|
|
|
+ margin: 20rpx 30rpx;
|
|
|
+}
|
|
|
+.section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.section-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.section-hint {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: rgba(255,255,255,0.4);
|
|
|
+}
|
|
|
+.radar-section { }
|
|
|
+.empty-radar {
|
|
|
+ text-align: center;
|
|
|
+ padding: 80rpx;
|
|
|
+ color: rgba(255,255,255,0.3);
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
+/* ===== 成员对比 ===== */
|
|
|
+.compare-section { }
|
|
|
+.compare-list {
|
|
|
+ background: rgba(255,255,255,0.06);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1rpx solid rgba(255,255,255,0.08);
|
|
|
+}
|
|
|
+.compare-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ border-bottom: 1rpx solid rgba(255,255,255,0.06);
|
|
|
+ background: rgba(255,255,255,0.02);
|
|
|
+}
|
|
|
+.compare-item:last-child { border-bottom: none; }
|
|
|
+.compare-item.active { background: rgba(102,126,234,0.15); }
|
|
|
+.compare-avatar {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.compare-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
|
|
|
+.compare-info { flex: 1; }
|
|
|
+.compare-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
|
|
|
+.compare-role { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
|
|
|
+.compare-score { text-align: right; }
|
|
|
+.compare-score-value { font-size: 36rpx; font-weight: 700; }
|
|
|
+/* ===== 快速入口 ===== */
|
|
|
+.quick-section { }
|
|
|
+.quick-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 16rpx;
|
|
|
+ background: rgba(255,255,255,0.06);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ border: 1rpx solid rgba(255,255,255,0.08);
|
|
|
+}
|
|
|
+.quick-item {
|
|
|
+ width: calc(20% - 14rpx);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ background: rgba(255,255,255,0.04);
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+.quick-icon-wrap {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+}
|
|
|
+.quick-icon { font-size: 36rpx; }
|
|
|
+.quick-label { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-bottom: 6rpx; }
|
|
|
+.quick-score { font-size: 28rpx; font-weight: 600; color: #fff; }
|
|
|
+/* ===== 成员选择弹窗 ===== */
|
|
|
+.modal-mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
+ background: rgba(0,0,0,0.6);
|
|
|
+ z-index: 1000;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+.member-picker {
|
|
|
+ width: 100%;
|
|
|
+ background: #1A2744;
|
|
|
+ border-radius: 32rpx 32rpx 0 0;
|
|
|
+ padding: 20rpx 30rpx 60rpx;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.picker-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+}
|
|
|
+.picker-title { font-size: 30rpx; font-weight: 600; color: #fff; }
|
|
|
+.picker-close { font-size: 40rpx; color: rgba(255,255,255,0.4); line-height: 1; }
|
|
|
+.picker-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border-bottom: 1rpx solid rgba(255,255,255,0.06);
|
|
|
+}
|
|
|
+.picker-item:last-child { border-bottom: none; }
|
|
|
+.picker-item.active { background: rgba(102,126,234,0.1); margin: 0 -30rpx; padding-left: 30rpx; padding-right: 30rpx; border-radius: 16rpx; }
|
|
|
+.picker-icon { font-size: 36rpx; margin-right: 20rpx; }
|
|
|
+.picker-avatar {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.picker-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
|
|
|
+.picker-label { font-size: 28rpx; color: #fff; font-weight: 500; flex: 1; }
|
|
|
+.picker-desc { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
|
|
|
+.bottom-spacer { height: 40rpx; }
|
|
|
+</style>
|