{{ member.relationship || member.relativeLabel || member.roleLabel || '成员' }}
💍
{{ member.nickname }}
第{{ member.generation }}代
📞
{{ member.phone }}
{{ energyScore }}
分
✓
.family-member-card {
display: flex;
flex-direction: column;
align-items: center;
width: 110rpx;
padding: 10rpx 8rpx;
border-radius: 16rpx;
background: $app-surface;
border: 2rpx solid transparent;
position: relative;
flex-shrink: 0;
}
.family-member-card.selected {
border-color: $brand-primary;
box-shadow: 0 0 0 2rpx rgba(249, 115, 22, 0.15);
}
.card-avatar-wrap {
position: relative;
width: 64rpx;
height: 64rpx;
margin-bottom: 6rpx;
}
.card-avatar {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: $facade-fill-gray-100;
}
.card-relation-badge {
position: absolute;
bottom: -4rpx;
left: 50%;
transform: translateX(-50%);
padding: 1rpx 8rpx;
border-radius: 10rpx;
white-space: nowrap;
max-width: 84rpx;
}
.card-relation-text {
font-size: 16rpx;
color: $app-surface;
font-weight: 500;
line-height: 1.4;
}
.card-spouse-mark {
position: absolute;
top: -4rpx;
right: -4rpx;
width: 24rpx;
height: 24rpx;
display: flex;
align-items: center;
justify-content: center;
}
.spouse-icon {
font-size: 18rpx;
}
.card-relation-dots {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 4rpx;
height: 12rpx;
}
.relation-dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
margin: 0 4rpx;
}
.card-nickname {
font-size: 22rpx;
color: $facade-text-gray-700;
font-weight: 600;
text-align: center;
line-height: 1.3;
max-width: 100rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-generation-line {
margin-top: 2rpx;
}
.card-generation-text {
font-size: 14rpx;
color: $facade-text-gray-400;
}
.card-contact-row {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rpx;
}
.contact-icon {
font-size: 18rpx;
}
.contact-phone {
font-size: 16rpx;
color: $status-info;
margin-left: 2rpx;
}
.card-energy {
display: flex;
align-items: baseline;
justify-content: center;
margin-top: 2rpx;
}
.energy-value {
font-size: 20rpx;
color: $brand-primary;
font-weight: bold;
}
.energy-unit {
font-size: 16rpx;
color: $facade-text-gray-400;
margin-left: 2rpx;
}
.card-selected-mark {
position: absolute;
top: 4rpx;
right: 4rpx;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background: $brand-primary;
display: flex;
align-items: center;
justify-content: center;
}
.mark-icon {
font-size: 16rpx;
color: $app-surface;
font-weight: bold;
}