cfc/cfc-frontend/pages/index/child-index.vue

<template>
  <view class="container">
    <!-- 加载状态 -->
    <BaseLoading :loading="loading" text="正在加载..." />

    <!-- 撒花庆祝 -->
    <ConfettiCelebration :show="showConfetti" />

    <!-- 空状态 - 无孩子 -->
    <BaseEmpty
      v-if="!loading && !hasChildren"
      icon="🌈"
      title="欢迎来到知心益家！"
      description="让爸爸妈妈帮你添加，开始快乐成长之旅"
    >
      <template #action>
        <PlayfulButton variant="clay" size="lg" @click="goToAddChild">
          ➕ 添加我
        </PlayfulButton>
      </template>
    </BaseEmpty>

<!-- ====== 主内容（有孩子时） ====== -->
<view class="main-content" v-if="!loading && hasChildren">
<!-- ============================================================
A) 五维理念区
============================================================ -->
<view class="philosophy-section animate-fade-in animate-stagger-1">
<view class="philosophy-banner">
<text class="philosophy-title">浠艾福</text>
<view class="philosophy-five">
<text class="five-item five-body">🌏 身泰</text>
<text class="five-item five-wisdom">⚔️ 智达</text>
<text class="five-item five-mind">🔥 心怡</text>
<text class="five-item five-action">🌿 行远</text>
<text class="five-item five-wealth">💧 富沛</text>
</view>
</view>
</view>

<!-- 五维能量沙盘 -->
<view class="animate-fade-in animate-stagger-2">
<wuxing-sandbox mode="live"
  :scores="{}"
  :overall-score="0"
  :members="[]"
  :dimensions="energyDimensions"
  :total-energy="totalEnergy"
  :total-health-index="totalHealthIndex"
  show-dimension-bar="false"
  star-height="400rpx"
  @point-click="goToEnergyDetail" />
</view>

<!-- 连续打卡徽章 -->
<view
class="streak-badge-wrap animate-slide-up animate-stagger-3"
v-if="streakDays > 0"
@click="showStreakDetail"
hover-class="streak-pressed"
>
<text class="streak-fire">🔥</text>
<view class="streak-info">
<text class="streak-days">{{ streakDays }}</text>
<text class="streak-unit">天坚持</text>
</view>
</view>

<!-- ============================================================
B) 积分卡片 — Claymorphism 暖橙黏土风格
============================================================ -->
      <view
        class="points-card animate-bounce-in"
        @click="goToRewards"
        hover-class="points-card-pressed"
      >
        <!-- 装饰圆点 -->
        <view class="points-deco points-deco--1"></view>
        <view class="points-deco points-deco--2"></view>

        <view class="points-top">
          <view class="points-left">
            <text class="points-label">🌟 我的星星</text>
            <text class="points-number">{{ totalPoints }}</text>
          </view>
          <view class="points-level-tag">
            <text class="level-emoji">{{ levelEmoji }}</text>
            <text class="level-name">{{ levelName }}</text>
          </view>
        </view>

        <view class="points-progress">
          <text class="progress-hint" v-if="pointsToNext > 0">
            还差 <text class="progress-hint-num">{{ pointsToNext }}</text> 颗星星升到 {{ nextLevelName }}
          </text>
          <text class="progress-hint" v-else>
            🎉 已经是最高等级啦！
          </text>
          <view class="progress-track">
            <view
              class="progress-fill"
              :style="'width: ' + levelProgress + '%'"
            ></view>
          </view>
        </view>
      </view>

      <!-- ============================================================
      C) 今日任务 — 可水平滑动的黏土卡片
      ============================================================ -->
      <view class="tasks-section animate-slide-up animate-stagger-3">
        <view class="section-header">
          <text class="section-title">📋 今日任务</text>
          <text class="section-link" @click="goToTasks">查看全部 →</text>
        </view>

        <scroll-view
          class="tasks-scroll"
          scroll-x
          enhanced
          :show-scrollbar="false"
          v-if="todayTasks.length > 0"
        >
          <view
            class="task-clay-card"
            v-for="(task, tIdx) in todayTasks"
            :key="task.id"
            @click="handleTaskClick(task)"
            hover-class="task-card-pressed"
            :style="'animation-delay: ' + (tIdx * 80) + 'ms'"
          >
            <view class="task-card-icon-wrap" :class="'task-cat--' + getTaskCategoryClass(task)">
              <text class="task-card-icon">{{ getTaskIcon(task) }}</text>
            </view>
            <text class="task-card-name">{{ task.title }}</text>
            <text class="task-card-points" v-if="task.points">+{{ task.points }}⭐</text>
            <view class="task-card-badge">
              <BaseBadge :variant="getBadgeVariant(task)" size="xs">
                {{ getStatusText(task) }}
              </BaseBadge>
            </view>
          </view>
        </scroll-view>

        <!-- 今日任务空状态 -->
        <view class="tasks-empty" v-else @click="goToTasks">
          <view class="tasks-empty-icon">🎯</view>
          <text class="tasks-empty-title">今天没有任务哦</text>
          <text class="tasks-empty-desc">让爸爸妈妈给你布置任务吧～</text>
        </view>
      </view>

      <!-- ============================================================
      D) 快捷操作 — 2×2 黏土按钮网格
      ============================================================ -->
      <view class="quick-section animate-slide-up animate-stagger-4">
        <view class="section-header">
          <text class="section-title">🚀 快捷入口</text>
        </view>
        <view class="quick-grid">
          <view
            class="quick-clay-btn"
            @click="goToTasks"
            hover-class="quick-btn-pressed"
          >
            <view class="quick-btn-icon quick-icon--tasks">
              <text class="quick-emoji">📋</text>
            </view>
            <text class="quick-btn-label">我的任务</text>
          </view>

          <view
            class="quick-clay-btn"
            @click="goToRewards"
            hover-class="quick-btn-pressed"
          >
            <view class="quick-btn-icon quick-icon--rewards">
              <text class="quick-emoji">⭐</text>
            </view>
            <text class="quick-btn-label">心愿商城</text>
          </view>

          <view
            class="quick-clay-btn"
            @click="goToGrowth"
            hover-class="quick-btn-pressed"
          >
            <view class="quick-btn-icon quick-icon--growth">
              <text class="quick-emoji">🏆</text>
            </view>
            <text class="quick-btn-label">成长档案</text>
          </view>

          <view
            class="quick-clay-btn"
            @click="goToGames"
            hover-class="quick-btn-pressed"
          >
            <view class="quick-btn-icon quick-icon--games">
              <text class="quick-emoji">🎮</text>
            </view>
            <text class="quick-btn-label">小游戏</text>
          </view>
        </view>
      </view>

      <!-- ============================================================
      E) 最近成就 — 水平滚动徽章
      ============================================================ -->
      <view
        class="achievement-section animate-slide-up animate-stagger-5"
        v-if="earnedBadges.length > 0"
      >
        <view class="section-header">
          <text class="section-title">🏅 最近成就</text>
        </view>
        <scroll-view
          class="achievement-scroll"
          scroll-x
          enhanced
          :show-scrollbar="false"
        >
          <view
            class="achievement-item"
            v-for="badge in earnedBadges"
            :key="badge.id"
            hover-class="achievement-pressed"
          >
            <view class="achievement-icon-wrap">
              <text class="achievement-icon">{{ badge.icon }}</text>
            </view>
            <text class="achievement-name">{{ badge.name }}</text>
          </view>

          <!-- 锁定占位徽章 -->
          <view
            class="achievement-item achievement-item--locked"
            v-for="lockedBadge in lockedBadges"
            :key="lockedKey(lockedBadge)"
          >
            <view class="achievement-icon-wrap achievement-icon-wrap--locked">
              <text class="achievement-icon achievement-icon--locked">🔒</text>
            </view>
            <text class="achievement-name achievement-name--locked">{{ lockedBadge.name }}</text>
          </view>
        </scroll-view>
      </view>

      <!-- 底部安全留白 -->
      <view class="bottom-spacer"></view>
    </view>
  </view>
</template>

<script>
import { getChildren, getTodayTasks, getEnergyOverview } from '../../utils/api.js'
import PlayfulCard from '../../components/PlayfulCard.vue'
import PlayfulButton from '../../components/PlayfulButton.vue'
import BaseBadge from '../../components/BaseBadge.vue'
import BaseEmpty from '../../components/BaseEmpty.vue'
import BaseLoading from '../../components/BaseLoading.vue'
import ConfettiCelebration from '../../components/ConfettiCelebration.vue'
import WuxingSandbox from '../../components/wuxing-sandbox.vue'

/**
 * 等级配置表
 * 星星宝宝(0) → 月亮小朋友(200) → 太阳小天使(500) → 宇宙小英雄(1000)
 */
var LEVELS = [
  { min: 0,    max: 200,  name: '星星宝宝',   nextName: '月亮小朋友', emoji: '⭐' },
  { min: 200,  max: 500,  name: '月亮小朋友', nextName: '太阳小天使', emoji: '🌙' },
  { min: 500,  max: 1000, name: '太阳小天使', nextName: '宇宙小英雄', emoji: '☀️' },
  { min: 1000, max: Infinity, name: '宇宙小英雄', nextName: '👑 MAX', emoji: '🦸' }
]

/**
 * 任务分类 → 图标映射
 */
var TASK_ICONS = {
  '学习类': '📚',
  '阅读类': '📖',
  '生活类': '🏠',
  '运动类': '⚽',
  '家务类': '🧹',
  '艺术类': '🎨',
  '其他': '⭐'
}

export default {
  components: {
    PlayfulCard,
    PlayfulButton,
    BaseBadge,
    BaseEmpty,
    BaseLoading,
    ConfettiCelebration,
    WuxingSandbox
  },
  data() {
    return {
      loading: true,
      hasChildren: false,
      nickname: '',
      childId: '',
      totalPoints: 0,
      streakDays: 0,
      completedCount: 0,
      totalTaskCount: 0,
      todayTasks: [],
      badges: [
        { id: 1, icon: '🌟', name: '早起鸟', unlocked: false },
        { id: 2, icon: '📚', name: '阅读小达人', unlocked: false },
        { id: 3, icon: '🏃', name: '运动健将', unlocked: false },
        { id: 4, icon: '🎨', name: '小艺术家', unlocked: false },
        { id: 5, icon: '🧹', name: '家务小能手', unlocked: false }
      ],
      _mounted: false,
      energyDimensions: [],
      totalEnergy: 0,
      totalHealthIndex: 0
    }
  },
  computed: {
    // ---------- 等级相关 ----------
    currentLevelIndex() {
      const pts = this.totalPoints
      if (pts >= 1000) return 3
      if (pts >= 500) return 2
      if (pts >= 200) return 1
      return 0
    },
    levelName() {
      return LEVELS[this.currentLevelIndex].name
    },
    nextLevelName() {
      return LEVELS[this.currentLevelIndex].nextName
    },
    levelEmoji() {
      return LEVELS[this.currentLevelIndex].emoji
    },
    currentLevelMin() {
      return LEVELS[this.currentLevelIndex].min
    },
    nextLevelMax() {
      return LEVELS[this.currentLevelIndex].max
    },
    levelProgress() {
      if (this.totalPoints >= 1000) return 100
      const range = this.nextLevelMax - this.currentLevelMin
      if (range <= 0) return 100
      const progress = ((this.totalPoints - this.currentLevelMin) / range) * 100
      return Math.min(100, Math.floor(progress))
    },
    pointsToNext() {
      if (this.totalPoints >= 1000) return 0
      return this.nextLevelMax - this.totalPoints
    },

    // ---------- 任务相关 ----------
    taskProgress() {
      if (this.totalTaskCount === 0) return 0
      return Math.floor((this.completedCount / this.totalTaskCount) * 100)
    },

    // ---------- 庆祝动画 ----------
    showConfetti() {
      return this.taskProgress >= 100 && this.totalTaskCount > 0
    },

    // ---------- 头像表情 ----------
    avatarEmoji() {
      const level = this.currentLevelIndex
      if (level >= 3) return '🦸'
      if (level >= 2) return '😇'
      if (level >= 1) return '🌙'
      return '🐣'
    },

    // ---------- 问候语 ----------
    timeGreeting() {
      const hour = new Date().getHours()
      if (hour < 6) return '🌛 夜深了，还没睡呀'
      if (hour < 9) return '🌅 早安！新的一天开始啦'
      if (hour < 12) return '☀️ 上午好！今天也要加油哦'
      if (hour < 14) return '🌤️ 中午好！吃饱了才有力气'
      if (hour < 18) return '🌻 下午好！继续保持好状态'
      if (hour < 21) return '🌆 晚上好！今天过得开心吗'
      return '🌛 该休息啦，明天继续加油'
    },

    // ---------- 成就徽章 ----------
    earnedBadges() {
      return this.badges.filter(function(b) { return b.unlocked })
    },
    lockedBadges() {
      return this.badges.filter(function(b) { return !b.unlocked })
    }
  },
  mounted() {
    this.loadData()
  },
  onShow() {
    if (this._mounted) {
      this.loadData()
    }
    this._mounted = true
  },
  methods: {
    // ======================== 数据加载 ========================
    async loadData() {
      this.loading = true
      try {
        const userInfo = uni.getStorageSync('userInfo')
        const role = uni.getStorageSync('currentRole') || 'child'
        if (role !== 'child') {
          uni.reLaunch({ url: '/pages/index/parent-index' })
          return
        }
        this.nickname = (userInfo && userInfo.nickname) ? userInfo.nickname : '小朋友'

        const childrenRes = await getChildren()
        const children = childrenRes.data || []
        if (children.length === 0) {
          this.hasChildren = false
          this.loading = false
          return
        }
        this.hasChildren = true
        const child = children[0] || {}
        this.childId = child.id || ''
        this.totalPoints = child.totalPoints || 0
        this.streakDays = child.streakDays || 0

        const tasksRes = await getTodayTasks(this.childId)
        const rawTasks = tasksRes.data || []
        this.todayTasks = rawTasks
        this.completedCount = rawTasks.filter(function(t) { return t.status === 'completed' }).length
        this.totalTaskCount = rawTasks.length

        // 解锁成就
        if (this.streakDays >= 7) {
          this.unlockBadge(1)
        }
        if (this.totalPoints >= 1000) {
          this.unlockBadge(2)
        }

        // 加载五维能量概览
        var energyChildId = this.childId
        if (energyChildId) {
          try {
            var overviewRes = await getEnergyOverview(energyChildId)
            if (overviewRes && overviewRes.data) {
              this.energyDimensions = overviewRes.data.dimensions || []
              this.totalEnergy = overviewRes.data.totalEnergy || 0
              this.totalHealthIndex = overviewRes.data.totalHealthIndex || 0
            }
          } catch (e) {
            console.log('获取能量概览失败', e)
          }
        }
      } catch (e) {
        console.error('加载数据失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    unlockBadge(id) {
      var badge = this.badges.find(function(b) { return b.id === id })
      if (badge) badge.unlocked = true
    },

    // ======================== 导航方法 ========================
    goToRewards() {
      this.$emit('navigate', { page: 'rewards' })
      uni.switchTab({ url: '/pages/rewards/rewards' })
    },
    goToTasks() {
      this.$emit('navigate', { page: 'tasks' })
      uni.switchTab({ url: '/pages/tasks/tasks' })
    },
    goToGrowth() {
      this.$emit('navigate', { page: 'growth' })
      uni.navigateTo({ url: '/pages/growth/growth' })
    },
    goToGames() {
      this.$emit('navigate', { page: 'games' })
      uni.navigateTo({ url: '/pages/games/games' })
    },
    goToAddChild() {
      this.$emit('navigate', { page: 'add-child' })
      uni.navigateTo({ url: '/pages/profile/create-child' })
    },
    showStreakDetail() {
      this.$emit('navigate', { page: 'streak-detail' })
      uni.showToast({ title: '连续打卡 ' + this.streakDays + ' 天啦！太棒了！', icon: 'none' })
    },
    showAchievements() {
      uni.showToast({ title: '成就页面开发中', icon: 'none' })
    },
    switchMode() {
      uni.showModal({
        title: '切换模式',
        content: '确定要切换回家长模式吗？',
        success: function(res) {
          if (res.confirm) {
            uni.switchTab({ url: '/pages/index/parent-index' })
          }
        }
      })
    },
    goToDomain(domain) {
      uni.showToast({ title: '即将上线', icon: 'none' })
    },
    goToEnergyDetail(code) {
      // 跳转到能量详情页（T10 创建）
      var childId = this.childId
      if (!childId || !code) return
      uni.navigateTo({
        url: '/pages/energy/detail?childId=' + childId + '&code=' + code
      })
    },

    // ======================== 任务交互 ========================
    handleTaskClick(task) {
      if (!task || !task.id) return
      this.$emit('navigate', { page: 'task-detail', taskId: task.id })

      // 如果任务尚未完成，弹出确认完成
      if (task.status !== 'completed' && task.status !== 'overdue') {
        uni.showModal({
          title: '完成任务',
          content: '确定完成「' + task.title + '」吗？',
          success: function(res) {
            if (res.confirm) {
              task.status = 'completed'
              // 重新计算完成数
              this.completedCount = this.todayTasks.filter(function(t) { return t.status === 'completed' }).length
              if (task.points) {
                uni.showToast({ title: '🎉 获得 ' + task.points + ' 颗星星！', icon: 'success' })
              }
            }
          }.bind(this)
        })
      }
    },

    // ======================== 任务工具方法 ========================
    getTaskIcon(task) {
      if (!task) return '📝'
      var cat = task.category || '其他'
      return TASK_ICONS[cat] || '📝'
    },
    getTaskCategoryClass(task) {
      if (!task) return 'default'
      var cat = task.category || '其他'
      var map = {
        '学习类': 'study',
        '阅读类': 'reading',
        '生活类': 'life',
        '运动类': 'sports',
        '家务类': 'chores',
        '艺术类': 'art'
      }
      return map[cat] || 'default'
    },
    getTaskStatus(task) {
      if (!task || !task.status) return 'pending'
      return task.status
    },
    getStatusText(task) {
      var status = this.getTaskStatus(task)
      if (status === 'completed') return '✅ 已完成'
      if (status === 'overdue') return '⏰ 已超时'
      return '⏳ 待完成'
    },
    getBadgeVariant(task) {
      var status = this.getTaskStatus(task)
      if (status === 'completed') return 'success'
      if (status === 'overdue') return 'error'
      return 'warning'
    },
    lockedKey(item) {
      return 'locked-' + item.id
    }
  }
}
</script>

<style scoped>
/* ============================================================
   知心益家 — 孩子端首页 Flat Rounded 设计系统
   色彩体系：品牌蓝(#5B9BD5)+浅蓝(#8FC5E8) | 双重阴影 | 4rpx边框
   参考：uni.scss --color-primary, --bg, --shadow-clay, --radius-md
   ============================================================ */

/* ----------------------------------------------------------
   容器 & 背景
   ---------------------------------------------------------- */
.container {
  min-height: 100vh;
  background: var(--bg, #F5F9FC);
  padding: 0 32rpx 48rpx;
}

.main-content {
  padding-top: 16rpx;
}

.bottom-spacer {
  height: 48rpx;
}

/* ----------------------------------------------------------
A) 五维理念区
---------------------------------------------------------- */
.philosophy-section {
margin-bottom: 32rpx;
}

.philosophy-banner {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border-radius: 28rpx;
padding: 32rpx 28rpx 24rpx;
text-align: center;
border: 3rpx solid rgba(147, 197, 253, 0.2);
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

.philosophy-title {
font-size: 36rpx;
font-weight: 800;
color: #FFD700;
letter-spacing: 8rpx;
display: block;
margin-bottom: 24rpx;
text-shadow: 0 2rpx 12rpx rgba(255, 215, 0, 0.3);
}

.philosophy-five {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 12rpx 8rpx;
}

.five-item {
font-size: 26rpx;
font-weight: 700;
color: #FFFFFF;
display: inline-flex;
align-items: center;
gap: 6rpx;
padding: 10rpx 16rpx;
border-radius: 24rpx;
background: rgba(255, 255, 255, 0.08);
border: 2rpx solid rgba(255, 255, 255, 0.12);
}

.five-body { border-color: rgba(147, 197, 253, 0.4); color: #BFDBFE; }
.five-wisdom { border-color: rgba(251, 191, 36, 0.4); color: #FDE68A; }
.five-mind { border-color: rgba(251, 146, 60, 0.4); color: #FDBA74; }
.five-action { border-color: rgba(134, 239, 172, 0.4); color: #BBF7D0; }
.five-wealth { border-color: rgba(147, 197, 253, 0.4); color: #BFDBFE; }

/* 连续打卡徽章 — 独立行 */
.streak-badge-wrap {
display: flex;
align-items: center;
gap: 10rpx;
justify-content: flex-end;
margin-bottom: 24rpx;
padding-top: 4rpx;
}

.streak-badge {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: linear-gradient(145deg, #F5F9FC, #E0ECF8);
  padding: 12rpx 24rpx 12rpx 18rpx;
  border-radius: 40rpx;
  border: 4rpx solid #8FC5E8;
  box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
              4rpx 4rpx 14rpx rgba(143,197,232,0.30);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.streak-badge:active,
.streak-pressed {
  transform: scale(0.94);
}

.streak-fire {
  font-size: 32rpx;
}

.streak-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.streak-days {
  font-size: 32rpx;
  font-weight: 800;
  color: #1E4A7A;
  line-height: 1.1;
}

.streak-unit {
  font-size: 18rpx;
  font-weight: 600;
  color: #2563EB;
}

/* ----------------------------------------------------------
   积分卡片 — Flat Rounded 蓝色渐变
   ---------------------------------------------------------- */
.points-card {
  position: relative;
  background: linear-gradient(145deg, #8FC5E8, #5B9BD5);
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 28rpx;
  border: 4rpx solid #3A7CC4;
  box-shadow: inset -4rpx -4rpx 14rpx rgba(255,255,255,0.20),
              8rpx 8rpx 28rpx rgba(91,155,213,0.25);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.points-card:active,
.points-card-pressed {
  transform: scale(0.97);
  box-shadow: inset 2rpx 2rpx 10rpx rgba(0,0,0,0.08),
              4rpx 4rpx 16rpx rgba(91,155,213,0.18);
}

/* 装饰圆 */
.points-deco {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.points-deco--1 {
  top: -60rpx;
  right: -40rpx;
  width: 220rpx;
  height: 220rpx;
}

.points-deco--2 {
  bottom: -30rpx;
  left: -30rpx;
  width: 120rpx;
  height: 120rpx;
}

.points-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 1;
}

.points-left {
  display: flex;
  flex-direction: column;
}

.points-label {
  font-size: 24rpx;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  margin-bottom: 4rpx;
}

.points-number {
  font-size: 64rpx;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.10);
}

.points-level-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.15);
  padding: 12rpx 20rpx;
  border-radius: 24rpx;
  border: 2rpx solid rgba(255,255,255,0.20);
  min-width: 120rpx;
}

.level-emoji {
  font-size: 36rpx;
  line-height: 1;
}

.level-name {
  font-size: 22rpx;
  font-weight: 700;
  color: #FFD700;
  margin-top: 4rpx;
}

/* 进度条 */
.points-progress {
  position: relative;
  z-index: 1;
}

.progress-hint {
  display: block;
  font-size: 22rpx;
  color: rgba(255,255,255,0.75);
  margin-bottom: 12rpx;
}

.progress-hint-num {
  font-weight: 700;
  color: #FFD700;
  font-size: 24rpx;
}

.progress-track {
  height: 14rpx;
  background: rgba(255,255,255,0.20);
  border-radius: 7rpx;
  overflow: hidden;
  border: 2rpx solid rgba(255,255,255,0.10);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FFB800);
  border-radius: 6rpx;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----------------------------------------------------------
   任务区域 — 水平滚动黏土卡片
   ---------------------------------------------------------- */
.tasks-section {
  margin-bottom: 28rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--text, #1E293B);
}

.section-link {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--color-primary, #5B9BD5);
  padding: 8rpx 4rpx;
}

.section-link:active {
  opacity: 0.6;
}

/* 任务水平滚动容器 */
.tasks-scroll {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow-x: auto;
  padding: 8rpx 0 16rpx;
  -webkit-overflow-scrolling: touch;
}

/* 单张任务黏土卡片 */
.task-clay-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  min-height: 260rpx;
  background: linear-gradient(145deg, #FFFFFF, var(--bg-grey, #EDF2F7));
  border-radius: 28rpx;
  padding: 24rpx 16rpx 20rpx;
  margin-right: 20rpx;
  border: 4rpx solid var(--border, #CBD5E1);
  box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
              6rpx 6rpx 20rpx rgba(91,155,213,0.08);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  flex-shrink: 0;
}

.task-clay-card:active,
.task-card-pressed {
  transform: scale(0.94);
}

/* 任务分类图标容器 */
.task-card-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
  border: 3rpx solid var(--border-light, #E2E8F0);
  box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5),
              3rpx 3rpx 8rpx rgba(91,155,213,0.06);
}

.task-card-icon {
  font-size: 42rpx;
  line-height: 1;
}

/* 分类图标底色 */
.task-cat--study   .task-card-icon-wrap { background: rgba(14,165,233,0.12); border-color: #BAE6FD; }
.task-cat--reading .task-card-icon-wrap { background: rgba(34,197,94,0.12);  border-color: #BBF7D0; }
.task-cat--life    .task-card-icon-wrap { background: rgba(91,155,213,0.12); border-color: #CBD5E1; }
.task-cat--sports  .task-card-icon-wrap { background: rgba(59,130,246,0.12); border-color: #BFDBFE; }
.task-cat--chores  .task-card-icon-wrap { background: rgba(245,158,11,0.12); border-color: #FDE68A; }
.task-cat--art     .task-card-icon-wrap { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }
.task-cat--default .task-card-icon-wrap { background: rgba(148,163,184,0.12); border-color: #E2E8F0; }

.task-card-name {
  font-size: 26rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-bottom: 6rpx;
}

.task-card-points {
  font-size: 24rpx;
  font-weight: 700;
  color: var(--color-primary, #5B9BD5);
  margin-bottom: 10rpx;
}

.task-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36rpx;
}

/* 任务空状态 */
.tasks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48rpx 32rpx;
  background: var(--surface, #FFFFFF);
  border-radius: 28rpx;
  border: 4rpx solid var(--border, #CBD5E1);
  box-shadow: var(--shadow-clay);
  transition: transform 0.2s ease;
}

.tasks-empty:active {
  transform: scale(0.98);
}

.tasks-empty-icon {
  font-size: 64rpx;
  margin-bottom: 16rpx;
}

.tasks-empty-title {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
  margin-bottom: 8rpx;
}

.tasks-empty-desc {
  font-size: 24rpx;
  color: var(--text-secondary, #64748B);
}

/* ----------------------------------------------------------
   快捷操作 — 2×2 黏土按钮网格
   ---------------------------------------------------------- */
.quick-section {
  margin-bottom: 28rpx;
}

.quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.quick-grid > * {
  width: calc(50% - 10rpx);
}

.quick-clay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28rpx 16rpx;
  background: linear-gradient(145deg, #FFFFFF, var(--bg-grey, #EDF2F7));
  border-radius: 28rpx;
  border: 4rpx solid var(--border, #CBD5E1);
  box-shadow: inset -4rpx -4rpx 10rpx rgba(255,255,255,0.6),
              6rpx 6rpx 20rpx rgba(91,155,213,0.08);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 180rpx;
}

.quick-clay-btn:active,
.quick-btn-pressed {
  transform: scale(0.94);
  box-shadow: inset 2rpx 2rpx 8rpx rgba(0,0,0,0.06),
              3rpx 3rpx 10rpx rgba(91,155,213,0.06);
}

.quick-btn-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14rpx;
  border: 3rpx solid var(--border-light, #E2E8F0);
  box-shadow: inset -2rpx -2rpx 6rpx rgba(255,255,255,0.5),
              3rpx 3rpx 8rpx rgba(91,155,213,0.06);
  transition: transform 0.2s ease;
}

.quick-emoji {
  font-size: 44rpx;
  line-height: 1;
}

/* 各按钮图标色彩 */
.quick-icon--tasks   { background: rgba(14,165,233,0.15); border-color: #BAE6FD; }
.quick-icon--rewards { background: rgba(245,158,11,0.15); border-color: #FDE68A; }
.quick-icon--growth  { background: rgba(91,155,213,0.15); border-color: #CBD5E1; }
.quick-icon--games   { background: rgba(236,72,153,0.12); border-color: #FBCFE8; }

.quick-btn-label {
  font-size: 28rpx;
  font-weight: 700;
  color: var(--text, #1E293B);
}

/* ----------------------------------------------------------
   成就区域 — 水平滚动徽章
   ---------------------------------------------------------- */
.achievement-section {
  margin-bottom: 28rpx;
}

.achievement-scroll {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow-x: auto;
  padding: 8rpx 0 8rpx;
  -webkit-overflow-scrolling: touch;
}

.achievement-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
  margin-right: 20rpx;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.achievement-item:active,
.achievement-pressed {
  transform: scale(0.92);
}

.achievement-icon-wrap {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(145deg, #DCE8F5, #C8DDF0);
  border: 4rpx solid var(--border, #CBD5E1);
  box-shadow: inset -3rpx -3rpx 8rpx rgba(255,255,255,0.5),
              4rpx 4rpx 14rpx rgba(91,155,213,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.achievement-icon {
  font-size: 44rpx;
  line-height: 1;
}

.achievement-name {
  font-size: 24rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
  text-align: center;
}

/* 锁定徽章 */
.achievement-item--locked {
  opacity: 0.50;
}

.achievement-icon-wrap--locked {
  background: var(--bg-grey, #EDF2F7);
  border-color: var(--border-light, #E2E8F0);
  box-shadow: none;
}

.achievement-icon--locked {
  filter: grayscale(1);
}

.achievement-name--locked {
  color: var(--muted, #94A3B8);
}

/* ----------------------------------------------------------
   加载 & 通用
   ---------------------------------------------------------- */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 0;
}

/* 连续打卡徽章的浮动动画 — 使用 uni.scss 全局 float keyframe */
.streak-badge {
  animation: float 3s ease-in-out infinite;
}

/* 等级标签的金色光晕 — 使用 uni.scss 全局 pulseGlow keyframe */
.points-level-tag {
  animation: pulseGlow 2.5s ease-in-out infinite;
}
</style>