|
|
@@ -1,11 +1,11 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- ===== 家庭信息头部 (带齿轮入口) ===== -->
|
|
|
- <view class="family-header" v-if="familyName">
|
|
|
+ <view class="family-header">
|
|
|
<view class="family-header-content">
|
|
|
<view class="family-header-icon">🏠</view>
|
|
|
<view class="family-header-text">
|
|
|
- <text class="family-name">{{ familyName }}</text>
|
|
|
+ <text class="family-name">{{ familyName || '我的家庭' }}</text>
|
|
|
<text class="family-member-count">{{ members.length }} 位成员</text>
|
|
|
</view>
|
|
|
<view class="header-settings-btn" @click="showSettings = true">
|
|
|
@@ -60,8 +60,17 @@
|
|
|
</view>
|
|
|
<text class="member-arrow">›</text>
|
|
|
</view>
|
|
|
- <view v-if="filteredMembers.length === 0" class="empty-row">
|
|
|
- <text class="empty-text">暂无成员</text>
|
|
|
+ <!-- 空状态:还没有家庭成员 -->
|
|
|
+ <view v-if="members.length === 0" class="empty-state-card">
|
|
|
+ <text class="empty-icon">👨👩👧👦</text>
|
|
|
+ <text class="empty-title">还没有家庭成员</text>
|
|
|
+ <view class="empty-actions">
|
|
|
+ <view class="empty-action-btn add-btn" @click="onAddMember">+ 添加</view>
|
|
|
+ <view class="empty-action-btn invite-btn" @click="onInvite">📨 邀请</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else-if="filteredMembers.length === 0" class="empty-row">
|
|
|
+ <text class="empty-text">暂无{{ filterType === 'parent' ? '家长' : '孩子' }}成员</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -518,6 +527,48 @@ export default {
|
|
|
color: #bbb;
|
|
|
}
|
|
|
|
|
|
+/* ===== 空状态卡片(无家庭成员时显示) ===== */
|
|
|
+.empty-state-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 60rpx 30rpx 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
|
+}
|
|
|
+.empty-icon {
|
|
|
+ font-size: 80rpx;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.empty-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+}
|
|
|
+.empty-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+.empty-action-btn {
|
|
|
+ padding: 16rpx 40rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.empty-action-btn:active {
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+.add-btn {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.invite-btn {
|
|
|
+ background: #f0f9ff;
|
|
|
+ color: #667eea;
|
|
|
+}
|
|
|
+
|
|
|
/* ===== 三维评分进度条(列表行内) ===== */
|
|
|
.member-quality-scores {
|
|
|
display: flex;
|