信任度
{{ scoreValues[0] }}
亲密度
{{ scoreValues[1] }}
沟通质量
{{ scoreValues[2] }}
➕
添加成员
📨
邀请成员
🔄
切换到该成员视角
✏️
编辑资料
📋
关系问卷
· 上次填写 {{ lastQuestionnaireText }}
💬
记录互动
📞
拨打电话
🗑️
移除成员
取消
🏠
还未创建家庭
创建家庭，开启全家幸福之旅
＋ 创建家庭
.family-member-strip {
margin: 16rpx 0;
padding: 0 30rpx;
}
.strip-scroll {
width: 100%;
white-space: nowrap;
}
.strip-inner {
display: flex;
flex-direction: row;
}
.strip-inner.scroll-mode {
gap: 16rpx;
}
.strip-inner.center-mode {
justify-content: center;
gap: 24rpx;
flex-wrap: wrap;
}
.strip-scroll .strip-inner.scroll-mode {
display: inline-flex;
}
/* 操作菜单 */
.action-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 999;
}
.action-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: $app-surface;
border-radius: 24rpx 24rpx 0 0;
z-index: 1000;
padding: 20rpx 0;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.action-title {
font-size: 30rpx;
font-weight: 600;
color: $facade-text-gray-800;
}
.action-relation {
font-size: 24rpx;
color: $facade-text-gray-400;
margin-top: 4rpx;
}
.action-item {
display: flex;
align-items: center;
padding: 24rpx 30rpx;
border-bottom: 1rpx solid $facade-fill-gray-50;
}
.action-item:active {
background: $facade-fill-gray-100;
}
.action-item-icon {
font-size: 32rpx;
margin-right: 16rpx;
}
.action-item-text {
font-size: 28rpx;
color: $facade-text-gray-700;
}
.action-danger .action-item-text {
color: $status-danger;
}
.action-cancel {
justify-content: center;
margin-top: 10rpx;
border-bottom: none;
}
.action-cancel .action-item-text {
color: $facade-text-slate;
}
.action-time {
font-size: 22rpx;
color: $facade-text-gray-400;
margin-left: 4rpx;
}
/* 空状态 */
.family-strip-empty {
margin: 16rpx 0;
padding: 40rpx 30rpx;
background: $app-surface;
border-radius: 24rpx;
display: flex;
justify-content: center;
}
.empty-content {
display: flex;
flex-direction: column;
align-items: center;
}
.empty-icon { font-size: 56rpx; }
.empty-title { font-size: 30rpx; font-weight: 600; color: $facade-text-gray-800; margin-top: 12rpx; }
.empty-desc { font-size: 24rpx; color: $facade-text-gray-400; margin-top: 8rpx; }
.empty-btn {
margin-top: 24rpx;
padding: 16rpx 48rpx;
background: $brand-primary;
color: $app-surface;
font-size: 28rpx;
border-radius: 40rpx;
}
/* Action Sheet 头部（覆盖原有 column 布局） */
.action-header {
display: flex;
flex-direction: row;
align-items: center;
padding: 24rpx 30rpx;
border-bottom: 1rpx solid $facade-fill-gray-100;
}
.action-avatar {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
margin-right: 20rpx;
background: $facade-fill-gray-100;
}
.action-header-info {
display: flex;
flex-direction: column;
}
/* 关系现状 */
.action-scores {
padding: 20rpx 30rpx;
}
.score-row {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 12rpx;
}
.score-label {
width: 110rpx;
font-size: 24rpx;
color: $facade-text-slate;
}
.score-bar-track {
flex: 1;
height: 14rpx;
background: $facade-fill-gray-100;
border-radius: 7rpx;
overflow: hidden;
}
.score-bar-fill {
height: 100%;
border-radius: 7rpx;
}
.score-bar-fill.trust { background: $status-success; }
.score-bar-fill.intimacy { background: $status-info; }
.score-bar-fill.communication { background: $dim-wealth; }
.score-value {
width: 70rpx;
text-align: right;
font-size: 24rpx;
color: $facade-text-gray-800;
font-weight: 600;
}
.action-divider {
height: 1rpx;
background: $facade-fill-gray-100;
margin: 0 30rpx;
}