全家
{{ familyScore }}
{{ member.name }}
{{ getMemberScore(member) }}
›
全家
{{ familyScore }}
{{ member.name }}
{{ getMemberScore(member) }}
›
{{ dualDimension.primary.label || '心' }}
{{ dualDimension.secondary.label || '智' }}
.family-energy-bar {
margin: 20rpx 30rpx;
background: $app-surface;
border-radius: 24rpx;
padding: 28rpx 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.bar-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20rpx;
}
.bar-icon { font-size: 32rpx; margin-right: 8rpx; }
.bar-title { font-size: 28rpx; font-weight: bold; color: $facade-text-strong; flex: 1; }
.bar-total-score { font-size: 40rpx; font-weight: bold; color: $brand-primary; margin-right: 12rpx; }
.bar-expand-icon {
font-size: 20rpx;
color: $facade-text-ghost-light;
transition: transform 0.3s ease;
}
.bar-row {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 16rpx;
padding: 8rpx 0;
}
.bar-row:last-child { margin-bottom: 0; }
.bar-row-member:active { opacity: 0.6; }
.bar-label {
font-size: 24rpx;
color: $facade-text-body;
width: 80rpx;
flex-shrink: 0;
}
.bar-track {
flex: 1;
height: 24rpx;
background: $facade-fill;
border-radius: 12rpx;
overflow: hidden;
margin: 0 12rpx;
}
.bar-fill {
height: 100%;
border-radius: 12rpx;
transition: width 0.5s ease;
}
.bar-value {
font-size: 26rpx;
font-weight: bold;
color: $facade-text-strong;
width: 60rpx;
text-align: right;
flex-shrink: 0;
}
.bar-arrow {
font-size: 28rpx;
color: $facade-text-ghost;
margin-left: 8rpx;
}
.bar-row-family .bar-fill {
background: linear-gradient(90deg, $brand-primary, $brand-primary-light);
}
/* ===== 堆叠模式 ===== */
.stacked-track {
display: flex;
flex-direction: row;
overflow: hidden;
}
.bar-fill-primary {
border-radius: 12rpx 0 0 12rpx;
}
.bar-fill-secondary {
border-radius: 0 12rpx 12rpx 0;
margin-left: 2rpx;
}
.stacked-legend {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 12rpx;
gap: 24rpx;
}
.legend-item {
display: flex;
flex-direction: row;
align-items: center;
}
.legend-dot {
width: 16rpx;
height: 16rpx;
border-radius: 8rpx;
margin-right: 6rpx;
}
.legend-label {
font-size: 22rpx;
color: $facade-text-muted;
}