cfc/cfc-frontend/pages/wisdom/wisdom_temp/training-hub.vue

<template>
  <view class="container">
    <PageBanner theme="wisdom"
      tagline="智慧训练中心"
      :quote="bannerQuote" />

    <!-- 训练说明 -->
    <view class="intro-card">
      <text class="intro-icon">&#x2696;&#xFE0F;</text>
      <text class="intro-title">智·训练中心</text>
      <text class="intro-desc">通过科学设计的认知训练游戏，全面提升专注力、逻辑思维与反应速度。每日坚持训练，让智慧之金更加闪耀。</text>
    </view>

    <!-- 推荐训练 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">推荐训练</text>
        <text class="section-subtitle">选择一项开始挑战</text>
      </view>
      <view class="game-list">
        <view class="game-card" v-for="game in games" :key="game.code" @click="goGame(game)">
          <view class="game-icon-wrap">
            <text class="game-icon">{{ game.icon }}</text>
          </view>
          <view class="game-info">
            <text class="game-title">{{ game.name }}</text>
            <text class="game-desc">{{ game.desc }}</text>
            <view class="game-meta">
              <view class="difficulty-row">
                <text class="difficulty-label">难度：</text>
                <view class="stars-row">
                  <text class="star filled" v-for="i in game.difficulty" :key="'on' + i">&#x2605;</text>
                  <text class="star empty" v-for="i in (5 - game.difficulty)" :key="'off' + i">&#x2605;</text>
                </view>
              </view>
              <text class="game-badge" v-if="game.badge">{{ game.badge }}</text>
            </view>
          </view>
          <button class="start-btn" hover-class="start-btn-hover">开始挑战</button>
        </view>
      </view>
    </view>

    <!-- 训练小贴士 -->
    <view class="tip-section">
      <view class="tip-card">
        <view class="tip-left-bar"></view>
        <view class="tip-body">
          <text class="tip-title">&#x1F4A1; 训练建议</text>
          <text class="tip-content">每次训练15-30分钟效果最佳；保持专注，减少干扰；循序渐进，从简单模式开始；定期复盘进步，保持训练动力。</text>
        </view>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'

var GAME_LIST = [
  {
    code: 'schulte',
    name: '舒尔特方格',
    icon: '\u{1F3AF}',
    desc: '提升专注力与反应速度',
    difficulty: 3,
    badge: '入门推荐'
  },
  {
    code: '1a2b',
    name: '猜数字',
    icon: '\u{1F522}',
    desc: '锻炼逻辑思维与推理能力',
    difficulty: 4,
    badge: '进阶挑战'
  }
]

var GAME_PAGES = {
  schulte: '/pages/games/schulte',
  '1a2b': '/pages/games/1a2b'
}

export default {
  components: { PageBanner },
  data: function() {
    return {
      games: GAME_LIST,
      childId: null,
      bannerQuote: '学而不思则罔，思而不学则殆'
    }
  },
  onLoad: function(options) {
    if (options && options.childId) {
      this.childId = options.childId
    } else {
      var stored = uni.getStorageSync('currentChildId')
      if (stored) {
        this.childId = stored
      }
    }
    uni.setNavigationBarTitle({
      title: '智慧训练中心'
    })
  },
  methods: {
    goGame: function(game) {
      var url = GAME_PAGES[game.code]
      if (!url) {
        uni.showToast({ title: '游戏暂未开放', icon: 'none' })
        return
      }
      var childId = this.childId || ''
      var queryParams = '?childId=' + childId + '&dimension=wisdom'
      uni.navigateTo({ url: url + queryParams })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #FFFBEB;
  padding-bottom: 120rpx;
}

/* ===== 训练说明卡 ===== */
.intro-card {
  margin: 30rpx;
  background: linear-gradient(135deg, #FFFBEB 0%, #FFF8E1 100%);
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1rpx solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 4rpx 20rpx rgba(255, 215, 0, 0.1);
}

.intro-icon {
  font-size: 56rpx;
  margin-bottom: 16rpx;
}

.intro-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #B8860B;
  margin-bottom: 16rpx;
  letter-spacing: 2rpx;
}

.intro-desc {
  font-size: 26rpx;
  color: #8B7355;
  text-align: center;
  line-height: 1.7;
}

/* ===== 通用区段 ===== */
.section {
  margin: 20rpx 30rpx;
}

.section-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #5D4037;
}

.section-subtitle {
  font-size: 24rpx;
  color: #A0896E;
  margin-top: 6rpx;
}

/* ===== 游戏卡片 ===== */
.game-list {
  display: flex;
  flex-direction: column;
}

.game-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid rgba(255, 215, 0, 0.15);
  box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.08);
}

.game-card:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.game-icon-wrap {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
}

.game-icon {
  font-size: 48rpx;
}

.game-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 24rpx;
}

.game-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #5D4037;
  margin-bottom: 8rpx;
}

.game-desc {
  font-size: 26rpx;
  color: #8B7355;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.game-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.difficulty-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.difficulty-label {
  font-size: 22rpx;
  color: #A0896E;
  margin-right: 8rpx;
}

.stars-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.star {
  font-size: 24rpx;
  margin-right: 4rpx;
}

.star.filled {
  color: #FFD700;
}

.star.empty {
  color: #E0D5C0;
}

.game-badge {
  font-size: 20rpx;
  color: #B8860B;
  background: #FFFBEB;
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  border: 1rpx solid rgba(255, 215, 0, 0.3);
  line-height: 1.6;
}

.start-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
  color: #5D4037;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  border: none;
  padding: 0;
  letter-spacing: 4rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
}

.start-btn-hover {
  opacity: 0.8;
  transform: scale(0.96);
}

/* ===== 训练小贴士 ===== */
.tip-section {
  margin: 20rpx 30rpx 0;
}

.tip-card {
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  overflow: hidden;
  border: 1rpx solid rgba(255, 215, 0, 0.1);
}

.tip-left-bar {
  width: 6rpx;
  flex-shrink: 0;
  background: linear-gradient(180deg, #FFD700 0%, #FFA000 100%);
}

.tip-body {
  flex: 1;
  padding: 28rpx 24rpx;
  display: flex;
  flex-direction: column;
}

.tip-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #B8860B;
  margin-bottom: 12rpx;
}

.tip-content {
  font-size: 24rpx;
  color: #8B7355;
  line-height: 1.7;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 120rpx;
}
</style>