cfc/cfc-frontend/pages/profile-main/profile.vue

<template>
  <view class="container">

    <!-- 未登录 -->
    <view v-if="!isLoggedIn">
      <view class="login-prompt">
        <text class="prompt-icon">👤</text>
        <text class="prompt-title">登录浠艾福</text>
        <text class="prompt-desc">登录后查看个人资料、积分记录、能量数据与家庭管理</text>
        <button class="login-btn" @click="goLogin">登录 / 注册</button>
        <text class="skip-link" @click="goSkip">暂不登录，先逛逛 ›</text>
      </view>

      <view class="philosophy-card">
        <text class="philosophy-title">照顾家庭，从照顾好自己开始</text>
        <text class="philosophy-desc">你的状态，就是家的状态。先安顿好自己，才有余力温暖家人。</text>
      </view>
    </view>

    <!-- 已登录 -->
    <template v-else>
      <!-- 退出切换 -->
      <view class="exit-switch" v-if="isSwitchedChild" @click="onExitSwitch">
        <text>🔄 退出切换</text>
      </view>

      <!-- 身份卡 -->
      <view class="user-card">
        <view class="user-card-left">
          <view class="avatar-wrap" @click="goToEditInfo">
            <image v-if="userInfo.avatar" class="avatar-img" :src="userInfo.avatar" mode="aspectFill" />
            <text v-else class="avatar-text">{{ nickname.charAt(0) || '👤' }}</text>
          </view>
          <view class="user-meta">
            <view class="user-name-row">
              <text class="nickname">{{ nickname || '未设置昵称' }}</text>
              <text class="role-tag">{{ roleLabel }}</text>
            </view>
            <view class="user-sub" v-if="memberLevel">
              <view class="level-badge" :class="'level-' + memberLevel">{{ memberLevelText }}</view>
              <text v-if="isLifetime" class="days-left">永久有效</text>
              <text v-else-if="membershipDays > 0 && membershipDays <= 30" class="days-left">剩余 {{ membershipDays }} 天</text>
              <view v-if="hasUpgradeSpace" class="upgrade-btn" @click="goUpgrade">
                <text class="upgrade-btn-text">{{ upgradeBtnText }}</text>
              </view>
            </view>
            <view class="user-sub" v-else>
              <text class="days-left">开通会员解锁更多权益</text>
              <view class="upgrade-btn" @click="goUpgrade">
                <text class="upgrade-btn-text">立即开通</text>
              </view>
            </view>
          </view>
        </view>
        <view class="user-card-right" @click="goToPoints">
          <text class="points-num">{{ totalPoints }}</text>
          <text class="points-label">积分</text>
        </view>
      </view>

      <!-- 家庭成员速览 -->
      <view class="family-strip" v-if="familyMembers.length > 0">
        <view class="family-strip-header">
          <text class="family-strip-title">我的家庭</text>
          <text class="family-strip-count">{{ familyMembers.length }} 位成员</text>
        </view>
        <view class="family-avatars">
          <view
            v-for="member in familyMembers"
            :key="member.id"
            class="family-avatar-item"
            @click="goMemberDetail(member)"
          >
            <view class="family-avatar-wrap">
              <image v-if="member.avatar" class="family-avatar-img" :src="member.avatar" mode="aspectFill" />
              <text v-else class="family-avatar-text">{{ member.nickname ? member.nickname.charAt(0) : '?' }}</text>
              <view class="family-avatar-tag" :class="'tag-' + (member.effectiveRole || member.source || 'member')">{{ member.roleLabel || memberRoleLabel(member.effectiveRole) }}</view>
            </view>
            <text class="family-avatar-name">{{ member.nickname || member.realName || '成员' }}</text>
          </view>
          <view class="family-avatar-item" @click="goToFamily">
            <view class="family-avatar-wrap family-avatar-add">
              <text class="family-avatar-plus">+</text>
            </view>
            <text class="family-avatar-name">添加</text>
          </view>
        </view>
      </view>

      <!-- 个人成就统计 -->
      <view class="achievement-section">
        <view class="section-header-row">
          <text class="section-title">🏆 我的成就</text>
          <text class="section-sub">持续成长，看见改变</text>
        </view>
        <view class="achievement-grid">
          <view class="ach-item" @click="goToPoints">
            <view class="ach-icon-wrap" style="background:rgba(249,115,22,0.12)">
              <text class="ach-icon">💰</text>
            </view>
            <text class="ach-num">{{ totalPoints }}</text>
            <text class="ach-label">累计积分</text>
          </view>
          <view class="ach-item" @click="goToStreak">
            <view class="ach-icon-wrap" style="background:rgba(255,140,66,0.12)">
              <text class="ach-icon">🔥</text>
            </view>
            <text class="ach-num">{{ streakDays }}</text>
            <text class="ach-label">连续打卡</text>
          </view>
          <view class="ach-item" @click="goToTasks">
            <view class="ach-icon-wrap" style="background:rgba(99,102,241,0.12)">
              <text class="ach-icon">✅</text>
            </view>
            <text class="ach-num">{{ completedTasks }}</text>
            <text class="ach-label">完成任务</text>
          </view>
          <view class="ach-item" @click="goToWishes">
            <view class="ach-icon-wrap" style="background:rgba(245,158,11,0.12)">
              <text class="ach-icon">🎁</text>
            </view>
            <text class="ach-num">{{ rewardsEarned }}</text>
            <text class="ach-label">获得奖励</text>
          </view>
          <view class="ach-item" @click="goToBadges">
            <view class="ach-icon-wrap" style="background:rgba(236,72,153,0.12)">
              <text class="ach-icon">🏅</text>
            </view>
            <text class="ach-num">{{ badgesCollected }}</text>
            <text class="ach-label">收集勋章</text>
          </view>
          <view class="ach-item" @click="goToGrowth">
            <view class="ach-icon-wrap" style="background:rgba(16,185,129,0.12)">
              <text class="ach-icon">📈</text>
            </view>
            <text class="ach-num">{{ growthRecords }}</text>
            <text class="ach-label">成长记录</text>
          </view>
          <view class="ach-item" @click="goToChallenges">
            <view class="ach-icon-wrap" style="background:rgba(255,107,157,0.12)">
              <text class="ach-icon">🎯</text>
            </view>
            <text class="ach-num">{{ challengesJoined }}</text>
            <text class="ach-label">参加挑战</text>
          </view>
          <view class="ach-item" @click="goToHealthReports">
            <view class="ach-icon-wrap" style="background:rgba(14,165,233,0.12)">
              <text class="ach-icon">📋</text>
            </view>
            <text class="ach-num">{{ healthReports }}</text>
            <text class="ach-label">上传报告</text>
          </view>
        </view>
      </view>

      <!-- 有待办的提醒（条件显示） -->
      <view class="reminder-section" v-if="hasReminders">
        <text class="section-title">📌 待办提醒</text>
        <view class="reminder-grid">
          <view class="reminder-item" v-if="pendingTasks > 0" @click="goToTasks">
            <text class="reminder-icon">📋</text>
            <view class="reminder-body">
              <text class="reminder-text">待完成任务</text>
              <text class="reminder-count">{{ pendingTasks }} 项</text>
            </view>
            <text class="reminder-arrow">›</text>
          </view>
          <view class="reminder-item" v-if="orderUnpaid > 0" @click="goToOrders">
            <text class="reminder-icon">💳</text>
            <view class="reminder-body">
              <text class="reminder-text">待付款订单</text>
              <text class="reminder-count">{{ orderUnpaid }} 笔</text>
            </view>
            <text class="reminder-arrow">›</text>
          </view>
          <view class="reminder-item" v-if="orderShipped > 0" @click="goToOrders">
            <text class="reminder-icon">📦</text>
            <view class="reminder-body">
              <text class="reminder-text">待收货</text>
              <text class="reminder-count">{{ orderShipped }} 笔</text>
            </view>
            <text class="reminder-arrow">›</text>
          </view>
          <view class="reminder-item" v-if="orderAfterSale > 0" @click="goToOrders">
            <text class="reminder-icon">🔧</text>
            <view class="reminder-body">
              <text class="reminder-text">售后处理</text>
              <text class="reminder-count">{{ orderAfterSale }} 笔</text>
            </view>
            <text class="reminder-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 功能入口（精简网格） -->
      <view class="menu-grid-section">
        <view class="menu-grid">
          <view class="menu-grid-item" @click="goToFamily">
            <view class="menu-grid-icon-wrap" style="background:rgba(245,158,11,0.1)">
              <text class="menu-grid-icon">👨‍👩‍👧‍👦</text>
            </view>
            <text class="menu-grid-text">家庭成员</text>
          </view>
          <view class="menu-grid-item" @click="goToChallenges">
            <view class="menu-grid-icon-wrap" style="background:rgba(255,107,157,0.1)">
              <text class="menu-grid-icon">🔥</text>
            </view>
            <text class="menu-grid-text">家庭挑战</text>
          </view>
          <view class="menu-grid-item" @click="goToGrowth">
            <view class="menu-grid-icon-wrap" style="background:rgba(16,185,129,0.1)">
              <text class="menu-grid-icon">📈</text>
            </view>
            <text class="menu-grid-text">成长记录</text>
          </view>
          <view class="menu-grid-item" @click="goToHealthReports">
            <view class="menu-grid-icon-wrap" style="background:rgba(14,165,233,0.1)">
              <text class="menu-grid-icon">📋</text>
            </view>
            <text class="menu-grid-text">健康报告</text>
          </view>
          <view class="menu-grid-item" v-if="role === 'parent'" @click="goToAppointments">
            <view class="menu-grid-icon-wrap" style="background:rgba(99,102,241,0.1)">
              <text class="menu-grid-icon">📅</text>
            </view>
            <text class="menu-grid-text">测评预约</text>
          </view>
          <view class="menu-grid-item" @click="goToSettings">
            <view class="menu-grid-icon-wrap" style="background:rgba(107,114,128,0.1)">
              <text class="menu-grid-icon">⚙️</text>
            </view>
            <text class="menu-grid-text">设置</text>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <view class="logout-btn" @click="logout">
          <text class="logout-text">退出登录</text>
        </view>
      </view>
    </template>
    <AIFloatingAvatar />
  </view>
</template>

<script>
import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
import {
  getChildren, getVisibleFamilyMembers,
  getTodayTasksByCategory, getChallengeList, getMyMembership,
  verifyPassword, getPointsBalance, getUserInfo,
  cartCount, getOrderCounts, getReferralSummary,
  getProfileStats
} from '../../utils/api.js'

export default {
  components: { AIFloatingAvatar },
  data() {
    return {
      nickname: '',
      role: 'parent',
      isSwitchedChild: false,
      userInfo: {},
      memberLevel: null,
      membershipDays: 0,
      totalPoints: 0,
      // 个人成就
      completedTasks: 0,
      streakDays: 0,
      rewardsEarned: 0,
      badgesCollected: 0,
      growthRecords: 0,
      challengesJoined: 0,
      healthReports: 0,
      // 家庭
      familyMembers: [],
      // 商城
      orderUnpaid: 0,
      orderShipped: 0,
      orderAfterSale: 0,
      cartCount: 0,
      // 待办
      pendingTasks: 0,
      profileProgress: 0
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    },
    roleLabel() {
      var map = { parent: '家长', child: '孩子', teacher: '规划师' }
      return map[this.role] || '用户'
    },
    memberLevelText() {
      var map = { FREE: '免费用户', FAMILY: '家庭会员', PREMIUM: '高级会员', LIFETIME: '终身会员' }
      return map[this.memberLevel] || this.memberLevel || ''
    },
    isLifetime() {
      return this.memberLevel === 'LIFETIME'
    },
    hasUpgradeSpace() {
      return this.memberLevel === 'FREE' || this.memberLevel === 'FAMILY'
    },
    upgradeBtnText() {
      return this.memberLevel === 'FAMILY' ? '升级' : '立即开通'
    },
    hasReminders() {
      return this.pendingTasks > 0 || this.orderUnpaid > 0 || this.orderShipped > 0 || this.orderAfterSale > 0
    }
  },
  onShow() {
    if (!this.isLoggedIn) {
      return
    }
    var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    if (role === 'teacher') {
      uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
      return
    }
    this.role = role
    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
    this.nickname = (uni.getStorageSync('userInfo') || {}).nickname || ''
    this.loadAllData()
  },
  methods: {
    loadAllData() {
      this.loadUserInfo()
      this.loadMembership()
      this.loadPoints()
      this.loadFamily()
      this.loadTasks()
      this.loadChallenges()
      this.loadOrderCounts()
      this.loadProfileStats()
    },
    loadUserInfo() {
      var self = this
      getUserInfo().then(function(res) {
        if (res && res.code === 200 && res.data) {
          self.userInfo = res.data
          if (!self.nickname) self.nickname = res.data.nickname || ''
        }
      }).catch(function() {})
    },
    loadMembership() {
      var self = this
      getMyMembership().then(function(res) {
        if (res && res.data) {
          self.memberLevel = res.data.memberLevel || res.data.levelCode || null
          self.membershipDays = res.data.membershipDays || res.data.daysRemaining || 0
        }
      }).catch(function() {})
    },
    loadPoints() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('userId')
      if (!memberId) return
      getPointsBalance(memberId).then(function(res) {
        if (res && res.data) {
          self.totalPoints = res.data.totalPoints || res.data.points || 0
        }
      }).catch(function() {})
    },
    loadFamily() {
      var self = this
      getVisibleFamilyMembers().then(function(res) {
        var data = res && res.data ? res.data : []
        self.familyMembers = Array.isArray(data) ? data : []
      }).catch(function() {
        self.familyMembers = []
      })
    },
    loadTasks() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('userId')
      if (!memberId) return
      getTodayTasksByCategory(memberId, 'action').then(function(res) {
        if (res && res.data) {
          self.pendingTasks = Array.isArray(res.data) ? res.data.length : 0
        }
      }).catch(function() {})
      // fallback to storage
      if (!self.pendingTasks) {
        self.pendingTasks = parseInt(uni.getStorageSync('pendingTaskCount') || 0)
      }
    },
    loadChallenges() {
      var self = this
      getChallengeList({}).then(function(res) {
        if (res && res.data) {
          // 不在此处使用，仅确保请求
        }
      }).catch(function() {})
    },
    loadOrderCounts() {
      var self = this
      getOrderCounts().then(function(res) {
        if (res && res.data) {
          self.orderUnpaid = res.data.unpaid || res.data.paid || 0
          self.orderShipped = res.data.shipped || 0
          self.orderAfterSale = res.data.refunding || res.data.afterSale || 0
        }
      }).catch(function() {})
    },
    loadProfileStats() {
      var self = this
      getProfileStats().then(function(res) {
        if (res && res.code === 200 && res.data) {
          var d = res.data
          if (d.totalPoints != null) self.totalPoints = d.totalPoints
          if (d.streakDays != null) self.streakDays = d.streakDays
          if (d.completedTasks != null) self.completedTasks = d.completedTasks
          if (d.rewardsEarned != null) self.rewardsEarned = d.rewardsEarned
          if (d.badgesCollected != null) self.badgesCollected = d.badgesCollected
          if (d.growthRecords != null) self.growthRecords = d.growthRecords
          if (d.challengesJoined != null) self.challengesJoined = d.challengesJoined
          if (d.healthReports != null) self.healthReports = d.healthReports
        }
      }).catch(function() {})
    },
    goLogin: function() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    goSkip: function() {
      uni.switchTab({ url: '/pages/index-home/index' })
    },
    goToEditInfo: function() {
      uni.navigateTo({ url: '/pages/user-edit/user-edit' })
    },
    goToPoints: function() {
      uni.navigateTo({ url: '/pages/points/points' })
    },
    goToStreak: function() {
      uni.navigateTo({ url: '/pages/stats/completion-rate' })
    },
    goToTasks: function() {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goToWishes: function() {
      uni.navigateTo({ url: '/pages/wishes/index' })
    },
    goToBadges: function() {
      uni.navigateTo({ url: '/pages/rewards/badge' })
    },
    goToGrowth: function() {
      uni.navigateTo({ url: '/pages/growth-main/index' })
    },
    goToChallenges: function() {
      uni.navigateTo({ url: '/pages/health/challenge-manage' })
    },
    goToHealthReports: function() {
      uni.navigateTo({ url: '/pages/health/report-list' })
    },
    goUpgrade: function() {
      uni.navigateTo({ url: '/pages/membership/upgrade' })
    },
    goToFamily: function() {
      uni.navigateTo({ url: '/pages/profile-extra/family-members' })
    },
    goMemberDetail: function(member) {
      uni.navigateTo({ url: '/pages/home-pages/member-home-detail?memberId=' + member.id })
    },
    goToAppointments: function() {
      uni.navigateTo({ url: '/pages/parent/appointments' })
    },
    goToOrders: function() {
      uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
    },
    goToSettings: function() {
      uni.showActionSheet({
        itemList: ['完善信息', '家庭成员', '邀请加入', '设置密码', '隐私设置', '关于浠艾福'],
        success: function(res) {
          var urls = {
            0: '/pages/user-edit/user-edit',
            1: '/pages/profile-extra/family-members',
            3: '/pages/profile/settings'
          }
          if (res.tapIndex === 2) {
            // 邀请加入 - 触发分享
          }
          if (urls[res.tapIndex]) {
            uni.navigateTo({ url: urls[res.tapIndex] })
          }
        }
      })
    },
    memberRoleLabel: function(role) {
      var map = { parent: '家长', child: '孩子', teacher: '规划师' }
      return map[role] || '成员'
    },
    onExitSwitch: function() {
      var self = this
      uni.showModal({
        title: '退出切换',
        content: '请输入家长密码以确认退出',
        editable: true,
        success: function(res) {
          if (res.confirm && res.content) {
            verifyPassword(res.content).then(function(result) {
              if (result.code === 200) {
                self.$store.commit('switchBackToParent')
                self.isSwitchedChild = false
                self.role = 'parent'
                uni.showToast({ title: '已退出切换', icon: 'success' })
                uni.reLaunch({ url: '/pages/index-home/index' })
              } else {
                uni.showToast({ title: '密码错误', icon: 'none' })
              }
            }).catch(function() {
              uni.showToast({ title: '验证失败', icon: 'none' })
            })
          }
        }
      })
    },
    logout: function() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: function(res) {
          if (res.confirm) {
            this.$store.commit('logout')
            uni.reLaunch({ url: '/pages/index-home/index' })
          }
        }.bind(this)
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #F8F4EF;
  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}

/* 登录引导 */
.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 60rpx;
}
.prompt-icon { font-size: 100rpx; margin-bottom: 30rpx; }
.prompt-title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; }
.prompt-desc { font-size: 26rpx; color: #999; margin-bottom: 20rpx; }
.login-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 24rpx 80rpx;
}
.skip-link {
  font-size: 26rpx;
  color: #999;
  margin-top: 24rpx;
  text-decoration: underline;
}
.philosophy-card {
  margin: 0 40rpx 48rpx;
  background: linear-gradient(135deg, #FFF7ED, rgba(249, 115, 22, 0.06));
  border-radius: 20rpx;
  padding: 28rpx 32rpx;
  border-left: 6rpx solid #F97316;
}
.philosophy-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}
.philosophy-desc {
  font-size: 24rpx;
  color: #888;
  line-height: 1.6;
  display: block;
}

/* 退出切换 */
.exit-switch {
  margin: 0 30rpx 16rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 16rpx;
  border-radius: 12rpx;
  text-align: center;
  font-size: 26rpx;
}

/* 身份卡 */
.user-card {
  margin: 24rpx 30rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  padding: 32rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(102,126,234,0.3);
}
.user-card-left {
  display: flex;
  align-items: center;
  flex: 1;
}
.avatar-wrap {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  overflow: hidden;
  border: 3rpx solid rgba(255,255,255,0.3);
}
.avatar-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.avatar-text {
  font-size: 44rpx;
  color: #fff;
}
.user-meta { flex: 1; }
.user-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.nickname {
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
}
.role-tag {
  font-size: 20rpx;
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
}
.user-sub {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.level-badge {
  font-size: 22rpx;
  padding: 6rpx 20rpx;
  border-radius: 22rpx;
  font-weight: bold;
  border: 2rpx solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 6rpx;
  box-sizing: border-box;
  height: 40rpx;
}
.level-badge::before {
  content: '👑';
  font-size: 18rpx;
}
.level-FREE { background: linear-gradient(135deg, #9CA3AF, #6B7280); color: #fff; }
.level-FREE::before { content: ''; }
.level-FAMILY { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.level-PREMIUM { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; }
.level-LIFETIME {
  background: linear-gradient(135deg, #EC4899, #DB2777);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(236,72,153,0.45);
  border-color: rgba(255,255,255,0.55);
}
.days-left {
  font-size: 20rpx;
  color: rgba(255,255,255,0.85);
}
.upgrade-btn {
  background: rgba(255,255,255,0.22);
  border: 2rpx solid rgba(255,255,255,0.6);
  border-radius: 20rpx;
  padding: 6rpx 20rpx;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 40rpx;
  display: flex;
  align-items: center;
}
.upgrade-btn-text {
  font-size: 20rpx;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}
.user-card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  background: rgba(255,255,255,0.15);
  padding: 12rpx 24rpx;
  border-radius: 14rpx;
}
.points-num {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}
.points-label {
  font-size: 20rpx;
  color: rgba(255,255,255,0.7);
}

/* 家庭成员速览 */
.family-strip {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.family-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14rpx;
}
.family-strip-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}
.family-strip-count {
  font-size: 22rpx;
  color: #999;
}
.family-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16rpx;
  overflow-x: auto;
  padding-bottom: 4rpx;
}
.family-avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  flex-shrink: 0;
}
.family-avatar-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.family-avatar-img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}
.family-avatar-text {
  font-size: 28rpx;
  color: #666;
}
.family-avatar-wrap.family-avatar-add {
  background: #F8F4EF;
  border: 2rpx dashed #ccc;
}
.family-avatar-plus {
  font-size: 36rpx;
  color: #999;
}
.family-avatar-tag {
  position: absolute;
  bottom: -4rpx;
  right: -4rpx;
  font-size: 14rpx;
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
  color: #fff;
}
.family-avatar-tag.tag-parent { background: #6366F1; }
.family-avatar-tag.tag-child { background: #F97316; }
.family-avatar-tag.tag-teacher { background: #10B981; }
.family-avatar-tag.tag-member { background: #9CA3AF; }
.family-avatar-name {
  font-size: 20rpx;
  color: #666;
  white-space: nowrap;
}

/* 成就统计 */
.achievement-section {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.section-sub {
  font-size: 22rpx;
  color: #999;
}
.achievement-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.ach-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  padding: 10rpx 0;
}
.ach-icon-wrap {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rpx;
}
.ach-icon {
  font-size: 32rpx;
  line-height: 1;
}
.ach-num {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  line-height: 1;
}
.ach-label {
  font-size: 20rpx;
  color: #999;
  line-height: 1;
}

/* 待办提醒 */
.reminder-section {
  margin: 0 30rpx 20rpx;
}
.reminder-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12rpx;
}
.reminder-item {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 16rpx;
  padding: 18rpx 20rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.reminder-icon {
  font-size: 32rpx;
  flex-shrink: 0;
}
.reminder-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.reminder-text {
  font-size: 22rpx;
  color: #333;
  line-height: 1.2;
}
.reminder-count {
  font-size: 20rpx;
  color: #F97316;
  font-weight: bold;
  margin-top: 2rpx;
}
.reminder-arrow {
  font-size: 28rpx;
  color: #ccc;
  flex-shrink: 0;
}

/* 功能网格 */
.menu-grid-section {
  margin: 0 30rpx 20rpx;
}
.menu-grid {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}
.menu-grid-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  padding: 12rpx 0;
}
.menu-grid-icon-wrap {
  width: 68rpx;
  height: 68rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-grid-icon {
  font-size: 34rpx;
  line-height: 1;
}
.menu-grid-text {
  font-size: 22rpx;
  color: #666;
  line-height: 1;
}

/* 退出 */
.logout-section {
  margin: 0 30rpx;
  padding-bottom: 20rpx;
}
.logout-btn {
  width: 100%;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.logout-text {
  font-size: 26rpx;
  color: #FF4D4F;
  font-weight: 500;
}
</style>