Просмотр исходного кода

refactor(home): 首页重新设计 — 对齐新TabBar页面模式

- 移除 TabTransition 行过渡页
- 移除 FamilyEnergyBar(沙盘已含能量信息)
- 移除 DimensionTasks/圈子模块,移入功能入口
- 新增 3列功能入口网格(对齐健康/成长页 grid-3col)
- 移除未登录态五维全景幸福矩阵
- 重构结构:Banner → FamilyMemberStrip → 沙盘 → 网格 → 挑战 → 推荐
- 清理冗余 JS 数据/方法/API调用和 CSS 样式
Xiaogang Liao 2 месяцев назад
Родитель
Сommit
becd89c5ad
1 измененных файлов с 324 добавлено и 424 удалено
  1. 324 424
      cfc-frontend/pages/index-home/index.vue

+ 324 - 424
cfc-frontend/pages/index-home/index.vue

@@ -1,8 +1,48 @@
 <template>
 <view>
-
-  <!-- Tabbar 切换过渡页 -->
-  <tab-transition v-if="showTabTransition" dimCode="action" ref="tabTransition" @close="showTabTransition = false" />
+  <!-- 冷启动 splash overlay — 覆盖首页直到数据加载完毕(tab 切回时不显示) -->
+  <view class="splash-overlay" :class="{'fade-out': splashOverlayFading}" v-if="splashOverlay || splashOverlayFading">
+    <view class="splash-overlay-bg">
+      <view class="bg-circle bg-circle-1"></view>
+      <view class="bg-circle bg-circle-2"></view>
+      <view class="bg-circle bg-circle-3"></view>
+    </view>
+    <view class="splash-overlay-body">
+      <view class="splash-logo-wrap">
+        <image class="splash-logo-img" src="/static/logo.png" mode="aspectFit" />
+      </view>
+      <text class="splash-brand-name">浠艾福</text>
+      <text class="splash-brand-en">Care Family</text>
+      <view class="splash-dims-row">
+        <view class="splash-dim-item">
+          <view class="splash-dim-circle" style="background:rgba(255,140,66,0.3);"><text class="splash-dim-icon">🌏</text></view>
+          <text class="splash-dim-label">身</text>
+        </view>
+        <view class="splash-dim-item">
+          <view class="splash-dim-circle" style="background:rgba(255,107,157,0.3);"><text class="splash-dim-icon">🔥</text></view>
+          <text class="splash-dim-label">心</text>
+        </view>
+        <view class="splash-dim-item">
+          <view class="splash-dim-circle" style="background:rgba(99,102,241,0.3);"><text class="splash-dim-icon">⚡</text></view>
+          <text class="splash-dim-label">智</text>
+        </view>
+        <view class="splash-dim-item">
+          <view class="splash-dim-circle" style="background:rgba(16,185,129,0.3);"><text class="splash-dim-icon">🌿</text></view>
+          <text class="splash-dim-label">行</text>
+        </view>
+        <view class="splash-dim-item">
+          <view class="splash-dim-circle" style="background:rgba(245,158,11,0.3);"><text class="splash-dim-icon">💧</text></view>
+          <text class="splash-dim-label">富</text>
+        </view>
+      </view>
+      <text class="splash-tagline">给全家的一站式幸福提案</text>
+      <view class="splash-overlay-loading">
+        <view class="splash-overlay-dot"></view>
+        <view class="splash-overlay-dot"></view>
+        <view class="splash-overlay-dot"></view>
+      </view>
+    </view>
+  </view>
 
   <!-- 登录态 — 直接内嵌,保持底签可见 -->
   <view v-if="currentRole" class="logged-in-container">
@@ -11,6 +51,15 @@
       tagline="知行合一 · 快乐成长"
       quote="千里之行,始于足下" />
 
+    <!-- 家庭成员选择条 -->
+    <FamilyMemberStrip
+      :members="familyMembersVisible"
+      :selectedMemberId="selectedMemberId"
+      :isParent="isFamilyAdmin"
+      @select="onFamilyMemberSelect"
+      @switch="onFamilyMemberSwitch"
+      @removed="loadFamilyMembers" />
+
     <!-- 能量沙盘 — Canvas 五行星图 -->
     <view v-if="hasFamily">
       <WuxingSandbox
@@ -40,24 +89,38 @@
       </view>
     </view>
 
-    <!-- 家庭成员选择条 -->
-    <FamilyMemberStrip
-      :members="familyMembersVisible"
-      :selectedMemberId="selectedMemberId"
-      :isParent="isFamilyAdmin"
-      @select="onFamilyMemberSelect"
-      @switch="onFamilyMemberSwitch"
-      @removed="loadFamilyMembers" />
-
-    <!-- 五维能量条 -->
-    <FamilyEnergyBar
-      v-if="sandboxData"
-      dimensionCode="action"
-      :sandboxData="sandboxData"
-      :dualDimension="dualDimension" />
+    <!-- 功能入口网格(3列,与健康/成长页一致) -->
+    <view class="section">
+      <view class="grid-3col">
+        <view class="grid-item" @click="navTo('/pages/tasks/tasks')">
+          <view class="grid-icon" style="background:rgba(99,102,241,0.15)"><text>📋</text></view>
+          <text class="grid-label">任务</text>
+        </view>
+        <view class="grid-item" @click="navTo('/pages/action-detail/interaction-log')">
+          <view class="grid-icon" style="background:rgba(16,185,129,0.15)"><text>💬</text></view>
+          <text class="grid-label">记录互动</text>
+        </view>
+        <view class="grid-item" @click="navTo('/pages/mind-detail/family-dashboard')">
+          <view class="grid-icon" style="background:rgba(139,92,246,0.15)"><text>🏠</text></view>
+          <text class="grid-label">家庭天盘</text>
+        </view>
+        <view class="grid-item" @click="navTo('/pages/profile-extra/family-members')">
+          <view class="grid-icon" style="background:rgba(245,158,11,0.15)"><text>👨‍👩‍👧‍👦</text></view>
+          <text class="grid-label">成员管理</text>
+        </view>
+        <view class="grid-item" @click="navTo('/pages/discover/circles')">
+          <view class="grid-icon" style="background:rgba(255,107,157,0.15)"><text>🤝</text></view>
+          <text class="grid-label">圈子</text>
+        </view>
+        <view class="grid-item" @click="navTo('/pages/shop/index/index')">
+          <view class="grid-icon" style="background:rgba(249,115,22,0.15)"><text>🛒</text></view>
+          <text class="grid-label">商城</text>
+        </view>
+      </view>
+    </view>
 
     <!-- 家庭挑战任务 -->
-    <view v-if="hasFamily" class="section challenge-section">
+    <view v-if="hasFamily" class="section">
       <view class="section-header">
         <text class="section-title">🔥 家庭挑战</text>
         <text class="section-more" @click="goChallengeManage">管理 ›</text>
@@ -74,19 +137,14 @@
       <FamilyEmptyState type="card" />
     </view>
 
-    <!-- 今日行动任务 -->
-    <DimensionTasks
-      dimensionCode="action"
-      :tasks="dimensionTasks"
-      @taskClick="onTaskClick"
-      @moreTasks="goTasks" />
-
+    <!-- 推荐文章 -->
     <ArticleBookshelf
       :articles="actionArticles"
       :isLoggedIn="true"
       @articleClick="goArticleDetail"
       @moreArticles="goMoreArticles" />
 
+    <!-- 推荐商品 -->
     <DimensionProducts
       dimensionCode="action"
       :products="dimensionProducts"
@@ -94,58 +152,6 @@
       @productClick="goProductDetail"
       @moreProducts="goMoreProducts" />
 
-    <!-- ===== 我的圈子 ===== -->
-    <view class="circle-section" v-if="isLoggedIn()">
-      <view class="circle-header">
-        <text class="circle-section-title">🤝 我的圈子</text>
-        <text class="circle-header-link" @click="goDiscoverCircles">发现更多 ›</text>
-      </view>
-      <scroll-view class="circle-scroll" scroll-x enable-flex v-if="myCircles.length > 0">
-        <view class="circle-scroll-inner">
-          <view class="circle-card-wrap" v-for="item in myCircles" :key="getCircleKey(item)" @click="onCircleClick(item)">
-            <CircleCard :circle="item" compact />
-          </view>
-        </view>
-      </scroll-view>
-      <view class="circle-empty" v-else>
-        <text class="circle-empty-text">暂未加入圈子,去发现看看</text>
-      </view>
-
-      <!-- ===== 发现推荐 ===== -->
-      <view class="circle-discover" v-if="discoverCirclesList.length > 0">
-        <view class="circle-header">
-          <text class="circle-section-title">🔍 发现推荐</text>
-          <text class="circle-header-link" @click="goDiscoverCircles">查看更多 ›</text>
-        </view>
-        <view class="discover-list">
-          <view class="discover-item" v-for="item in discoverCirclesList" :key="getCircleKey(item)" @click="onCircleClick(item)">
-            <CircleCard :circle="item" />
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 圈子详情弹窗 -->
-    <CircleDetail
-      :visible="circleDetailVisible"
-      :circle="detailCircle"
-      :isMember="selectedCircleIsMember"
-      @close="circleDetailVisible = false"
-      @join="onCircleJoin"
-      @leave="onCircleLeave" />
-
-    <!-- 功能入口 -->
-    <view class="func-section">
-      <view class="func-grid">
-        <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
-          <view class="func-icon-wrap">
-            <text class="func-icon">{{ item.icon }}</text>
-          </view>
-          <text class="func-label">{{ item.label }}</text>
-        </view>
-      </view>
-    </view>
-
     <!-- 底部占位 -->
     <view class="bottom-spacer" style="height: 40rpx;"></view>
   </view>
@@ -275,34 +281,6 @@
       </view>
     </view>
 
-    <!-- 五维全景幸福矩阵 -->
-    <view class="why-section">
-      <view class="section-header">
-        <text class="section-title">🌏 五维全景幸福矩阵 — 给全家的一站式幸福提案</text>
-      </view>
-      <view class="dim-matrix">
-        <view
-          v-for="dim in dimList" :key="dim.code"
-          class="dim-card"
-          :style="'border-left:6rpx solid ' + dim.color"
-        >
-          <view class="dim-icon-circle" :style="'background:' + dim.bgColor">
-            <text class="dim-icon">{{ dim.icon }}</text>
-          </view>
-          <view class="dim-tag" :style="'color:' + dim.color + ';background:' + dim.bgColor">{{ dim.name }} · {{ dim.title }}</view>
-          <text class="dim-desc">{{ dim.desc }}</text>
-        </view>
-      </view>
-      <!-- 五维能量环装饰 -->
-      <view class="dim-energy-row">
-        <view
-          v-for="c in energyDotColors" :key="c"
-          class="energy-dot"
-          :style="'background:' + c"
-        ></view>
-      </view>
-    </view>
-
     <!-- 底部登录按钮 -->
     <view class="login-footer">
       <button class="login-btn" @click="handleLogin">登录 / 注册</button>
@@ -317,44 +295,25 @@
 </template>
 
 <script>
-import nav from '../../utils/nav'
+import store from '../../store/index.js'
+import WuxingSandbox from '../../components/wuxing-sandbox.vue'
 import PageBanner from '../../components/PageBanner.vue'
 import WuxingSandbox from '../../components/wuxing-sandbox.vue'
-import TabTransition from '../../components/tab-transition.vue'
 import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
-import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
-import DimensionTasks from '../../components/DimensionTasks.vue'
 import DimensionProducts from '../../components/DimensionProducts.vue'
 import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
-import CircleCard from '../../components/CircleCard.vue'
-import CircleDetail from '../../components/CircleDetail.vue'
-import LoginGuideCard from '../../components/LoginGuideCard.vue'
 import FamilyChallengeCard from '../../components/FamilyChallengeCard.vue'
-import { acceptParentInvite, productList, getActivityList, getFeaturedArticles, getFamilyEnergySandbox, getVisibleFamilyMembers, getTodayTasksByCategory, getChildren, getEnergyOverview, getProductsByDomain, getChallengeList, getMyCircles, discoverCircles, joinGeneralCircle, leaveGeneralCircle, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge } from '../../utils/api.js'
+import { acceptParentInvite, productList, getActivityList, getFeaturedArticles, getFamilyEnergySandbox, getVisibleFamilyMembers, getChildren, getProductsByDomain, getChallengeList, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge } from '../../utils/api.js'
 import store from '../../store/index.js'
 import config from '@/config.js'
 
-var DIMENSIONS = [
-  { code: 'body', name: '身', icon: '🌏', color: '#8D6E63', bgColor: 'rgba(141,110,99,0.15)', title: '主动健康', desc: '用最适合的方法,从根源调理家人体质,畅享高质量长寿生活' },
-  { code: 'mind', name: '心', icon: '🔥', color: '#FF6B35', bgColor: 'rgba(255,107,53,0.15)', title: '大爱传承', desc: '将长辈陪护升华为家族纽带,让家风温暖代代相传' },
-  { code: 'wisdom', name: '智', icon: '⚡', color: '#FFD700', bgColor: 'rgba(255,215,0,0.15)', title: '赋能未来', desc: '专业测评与素质培养,开启孩子面向未来的大智慧' },
-  { code: 'action', name: '行', icon: '🌿', color: '#4CAF50', bgColor: 'rgba(76,175,80,0.15)', title: '知行合一', desc: '在亲子户外与沙龙中,让健康生活方式真正知行合一' },
-  { code: 'wealth', name: '富', icon: '💧', color: '#42A5F5', bgColor: 'rgba(66,165,245,0.15)', title: '利他创富', desc: '依托创客生态,在利他分享中实现家庭第二收入曲线' }
-]
-
 export default {
   components: {
     PageBanner,
     WuxingSandbox,
-    TabTransition,
     FamilyMemberStrip,
-    FamilyEnergyBar,
-    DimensionTasks,
     DimensionProducts,
     ArticleBookshelf,
-    CircleCard,
-    CircleDetail,
-    LoginGuideCard,
     FamilyChallengeCard
   },
   data() {
@@ -364,10 +323,15 @@ export default {
     if (_token) {
       _currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || ''
     }
+    // 冷启动标记(由 App.vue onLaunch 设置,仅在冷启动时存在)
+    var _isFirstLaunch = (uni.getStorageSync('_showSplashOverlay') === '1')
     return {
       currentRole: _currentRole,
-      // TabTransition 始终默认 true,确保首次渲染即出现
-      showTabTransition: true,
+
+      // splash loading overlay(冷启动时展示,数据加载完关闭)
+      splashOverlay: _isFirstLaunch,
+      splashOverlayFading: false,
+      _splashReady: false,
 
       typeList: [
         { label: '全部', value: '' },
@@ -398,25 +362,11 @@ export default {
       membersChecked: false,
       selectedMemberId: null,
       sandboxData: null,
-      dualDimension: null,
-      dimensionTasks: [],
-      dimensionActivities: [],
       dimensionProducts: [],
       articles: [],
       children: [],
       currentChildId: null,
       activeChallenges: [],
-      myCircles: [],
-      discoverCirclesList: [],
-      circleDetailVisible: false,
-      detailCircle: null,
-      selectedCircleIsMember: false,
-      funcList: [
-        { icon: '\u{1F3CB}', label: '任务', needLogin: true, page: '/pages/tasks/tasks' },
-        { icon: '\u{1F4AC}', label: '记录互动', needLogin: true, page: '/pages/action-detail/interaction-log' },
-        { icon: '\u{1F3E0}', label: '家庭天盘', needLogin: true, page: '/pages/mind-detail/family-dashboard' },
-        { icon: '\u{1F468}\u200D\u{1F469}\u200D\u{1F467}', label: '成员管理', needLogin: true, page: '/pages/profile-extra/family-members' }
-      ],
       loggedInInitDone: false,
 
       // 会员状态(沙盘下方会员入口使用)
@@ -461,12 +411,6 @@ export default {
       if (result.length === 0) return this.articles.slice(0, 5)
       return result.slice(0, 5)
     },
-    dimList: function() {
-      return DIMENSIONS
-    },
-    energyDotColors: function() {
-      return ['#8D6E63', '#FF6B35', '#FFD700', '#4CAF50', '#42A5F5']
-    },
     // 会员入口显示:非会员显示开通;会员剩余≤30天显示续费
     showMemberEntry: function() {
       if (!this.isLoggedIn()) return false
@@ -492,14 +436,52 @@ export default {
     this._doInit(options)
   },
   onShow() {
-    // tab 切回:重置 TabTransition 确保过渡动画正常显示
-    this.showTabTransition = true
-    this._watchPageReady()
+    // splash overlay 已在 data() 中根据 storage 标记初始化,此处只需配置关闭条件
+    if (this.splashOverlay) {
+      uni.removeStorageSync('_showSplashOverlay')
+      this._splashLoadCount = 0
+      this._splashMinPassed = false
+
+      var self = this
+      // 最低展示 800ms
+      setTimeout(function() {
+        self._splashMinPassed = true
+        self._tryHideSplash()
+      }, 800)
+      // 最多展示 5s
+      setTimeout(function() {
+        if (self.splashOverlay) self._hideSplashOverlay()
+      }, 5000)
+    }
 
     // 始终执行初始化,确保登录态变更后及时切换视图
     this._doInit()
   },
   methods: {
+    _checkSplashReady() {
+      this._splashLoadCount++
+      this._tryHideSplash()
+    },
+    _tryHideSplash() {
+      if (this.splashOverlayFading) return
+      if (!this._splashMinPassed) return
+      if (this.isLoggedIn()) {
+        // 登录用户:等待子组件的 ready 信号
+        if (this._splashReady) this._hideSplashOverlay()
+      } else {
+        // 游客:等待 3 个 API 全部返回
+        if (this._splashLoadCount >= 3) this._hideSplashOverlay()
+      }
+    },
+    _hideSplashOverlay() {
+      if (this.splashOverlayFading) return
+      this.splashOverlayFading = true
+      var self = this
+      setTimeout(function() {
+        self.splashOverlay = false
+        self.splashOverlayFading = false
+      }, 400)
+    },
 
     // ===== 登录态数据加载 =====
     loadLoggedInData: function() {
@@ -524,49 +506,21 @@ export default {
       })
     },
     loadDimensionData: function() {
-      this.loadEnergyData()
       this.loadSandboxData()
-      this.loadDimensionTasks()
       this.loadActionProducts()
       this.loadActionArticles()
       this.loadChallenges()
-      this.loadMyCircles()
-      this.loadDiscoverCircles()
-    },
-    loadEnergyData: function() {
-      var self = this
-      if (!this.currentChildId) return
-      getEnergyOverview(this.currentChildId).then(function(res) {
-        if (res && res.data) {
-          var dims = res.data.dimensions
-          if (dims && dims.length > 0) {
-            for (var i = 0; i < dims.length; i++) {
-              if (dims[i].code === 'action') {
-                self.dualDimension = dims[i]
-                break
-              }
-            }
-          }
-        }
-      }).catch(function() {})
     },
     loadSandboxData: function() {
       var self = this
       getFamilyEnergySandbox().then(function(res) {
         if (res && res.data) {
           self.sandboxData = res.data
+          self._splashReady = true
+          self._tryHideSplash()
         }
       }).catch(function() {})
     },
-    loadDimensionTasks: function() {
-      var self = this
-      if (!this.currentChildId) return
-      getTodayTasksByCategory(this.currentChildId, 'action').then(function(res) {
-        if (res && res.data) {
-          self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
-        }
-      }).catch(function() { self.dimensionTasks = [] })
-    },
     loadActionProducts: function() {
       var self = this
       getProductsByDomain('action', 1, 4).then(function(res) {
@@ -643,57 +597,6 @@ export default {
         uni.showToast({ title: '操作失败,请重试', icon: 'none' })
       })
     },
-    loadMyCircles: function() {
-      var self = this
-      if (!this.currentChildId) return
-      getMyCircles(this.currentChildId, 'child').then(function(res) {
-        if (res.code === 200 && res.data) {
-          self.myCircles = Array.isArray(res.data) ? res.data : (res.data.list || [])
-        }
-      }).catch(function() { self.myCircles = [] })
-    },
-    loadDiscoverCircles: function() {
-      var self = this
-      if (!this.currentChildId) return
-      discoverCircles(this.currentChildId).then(function(res) {
-        if (res.code === 200 && res.data) {
-          self.discoverCirclesList = Array.isArray(res.data) ? res.data.slice(0, 3) : []
-        }
-      }).catch(function() { self.discoverCirclesList = [] })
-    },
-    getCircleKey: function(item) {
-      return item.id || item.circleId || Math.random()
-    },
-    onCircleClick: function(item) {
-      this.detailCircle = item
-      this.selectedCircleIsMember = item.isMember || false
-      this.circleDetailVisible = true
-    },
-    onCircleJoin: function(circle) {
-      var self = this
-      joinGeneralCircle({ circleId: circle.id }).then(function(res) {
-        if (res.code === 200) {
-          self.circleDetailVisible = false
-          self.loadMyCircles()
-          self.loadDiscoverCircles()
-          uni.showToast({ title: '加入成功', icon: 'success' })
-        }
-      }).catch(function() {})
-    },
-    onCircleLeave: function(circle) {
-      var self = this
-      leaveGeneralCircle({ circleId: circle.id }).then(function(res) {
-        if (res.code === 200) {
-          self.circleDetailVisible = false
-          self.loadMyCircles()
-          self.loadDiscoverCircles()
-          uni.showToast({ title: '已退出', icon: 'none' })
-        }
-      }).catch(function() {})
-    },
-    goDiscoverCircles: function() {
-      uni.navigateTo({ url: '/pages/discover/circles' })
-    },
     loadFamilyMembers: function() {
       var self = this
       getVisibleFamilyMembers().then(function(res) {
@@ -743,11 +646,8 @@ export default {
         uni.showToast({ title: '切换失败', icon: 'none' })
       })
     },
-    onTaskClick: function(task) {
-      uni.navigateTo({ url: '/pages/tasks/tasks' })
-    },
-    goTasks: function() {
-      uni.navigateTo({ url: '/pages/tasks/tasks' })
+    navTo: function(url) {
+      uni.navigateTo({ url: url })
     },
     goActivityDetail: function(act) {
       if (!act || !act.id) return
@@ -769,29 +669,6 @@ export default {
     goMoreArticles: function() {
       uni.navigateTo({ url: '/pages/article-center/index?dimension=action' })
     },
-    onFuncClick: function(item) {
-      nav.goPage(item.page)
-    },
-
-    // 首页 TabTransition 动态关闭:检测关键内容是否就绪
-    _watchPageReady() {
-      var self = this
-      var unwatch = this.$watch(function() {
-        if (!self.isLoggedIn()) {
-          return !!(self.products && self.products.length > 0) ||
-                 !!(self.dimensionActivities && self.dimensionActivities.length > 0) ||
-                 !!(self.indexArticles && self.indexArticles.length > 0)
-        }
-        // 登录用户:等待关键数据加载完成
-        return !!(self.currentRole && self.sandboxData)
-      }, function(val) {
-        if (val) {
-          if (unwatch) unwatch()
-          if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
-        }
-      })
-    },
-
     _doInit(options) {
       options = options || {}
       if (!this.isLoggedIn()) {
@@ -879,7 +756,10 @@ export default {
           var rawData = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
           self.products = Array.isArray(rawData) ? rawData : []
         }
+        self._checkSplashReady()
       }).catch(function() {
+        self.loading = false
+        self._checkSplashReady()
       })
     },
     loadDimensionActivities: function() {
@@ -890,7 +770,9 @@ export default {
           var rawData = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
           self.dimensionActivities = Array.isArray(rawData) ? rawData.slice(0, 3) : []
         }
+        self._checkSplashReady()
       }).catch(function() {
+        self._checkSplashReady()
       })
     },
     loadFeaturedArticles: function() {
@@ -922,8 +804,10 @@ export default {
             }
           })
         }
+        self._checkSplashReady()
       }).catch(function() {
         self.articlesLoading = false
+        self._checkSplashReady()
       })
     },
     goActivities: function() {
@@ -1066,21 +950,6 @@ export default {
 .recommend-section {
   margin: 20rpx 30rpx;
 }
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20rpx;
-}
-.section-title {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #333;
-}
-.section-more {
-  font-size: 24rpx;
-  color: #5B9BD5;
-}
 .type-filter-scroll {
   white-space: nowrap;
   margin-bottom: 20rpx;
@@ -1159,81 +1028,6 @@ export default {
 }
 
 /* ===== 五维全景幸福矩阵 ===== */
-.why-section {
-  margin: 30rpx;
-}
-.dim-matrix {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20rpx;
-  justify-content: center;
-}
-.dim-card {
-  width: calc(33.33% - 14rpx);
-  box-sizing: border-box;
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 28rpx 16rpx 24rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  position: relative;
-  overflow: hidden;
-}
-.dim-card:active {
-  transform: scale(0.96);
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
-}
-.dim-icon-circle {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 14rpx;
-  flex-shrink: 0;
-}
-.dim-icon {
-  font-size: 36rpx;
-  line-height: 1;
-}
-.dim-tag {
-  font-size: 22rpx;
-  font-weight: 600;
-  padding: 4rpx 14rpx;
-  border-radius: 20rpx;
-  margin-bottom: 10rpx;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.dim-desc {
-  font-size: 20rpx;
-  color: #888;
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-/* 五维能量环 */
-.dim-energy-row {
-  display: flex;
-  justify-content: center;
-  gap: 12rpx;
-  margin-top: 24rpx;
-  opacity: 0.5;
-}
-.energy-dot {
-  width: 10rpx;
-  height: 10rpx;
-  border-radius: 50%;
-}
 
 /* ===== 底部登录 ===== */
 .login-footer {
@@ -1460,100 +1254,206 @@ export default {
   color: #bbb;
 }
 
-/* ---- 登录态内容布局 ---- */
-.logged-in-container {
-  padding-bottom: 40rpx;
-}
-
-/* ===== 功能入口(原action页样式) ===== */
-.func-section {
-  margin: -40rpx 20rpx 0;
-  position: relative;
-  z-index: 2;
-}
-.func-grid {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 30rpx 16rpx;
+/* ===== Splash Loading Overlay(冷启动蒙板,来自 merge splash.vue) ===== */
+.splash-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 9999;
   display: flex;
-  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
-}
-.func-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity 0.4s ease;
 }
-.func-item:active {
-  opacity: 0.7;
+.splash-overlay.fade-out {
+  opacity: 0;
+  pointer-events: none;
 }
-.func-icon-wrap {
-  width: 88rpx;
-  height: 88rpx;
+
+/* ---- bg circles from splash.vue ---- */
+.splash-overlay-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
+.bg-circle {
+  position: absolute;
   border-radius: 50%;
-  background: #FFF7ED;
+  opacity: 0.12;
+}
+.bg-circle-1 {
+  width: 400rpx; height: 400rpx;
+  background: #FF8C42;
+  top: -100rpx; right: -80rpx;
+  animation: splash-float-1 4s ease-in-out infinite;
+}
+.bg-circle-2 {
+  width: 280rpx; height: 280rpx;
+  background: #FF6B9D;
+  bottom: 80rpx; left: -60rpx;
+  animation: splash-float-2 5s ease-in-out infinite;
+}
+.bg-circle-3 {
+  width: 180rpx; height: 180rpx;
+  background: #6366F1;
+  top: 50%; right: -40rpx;
+  animation: splash-float-3 6s ease-in-out infinite;
+}
+@keyframes splash-float-1 {
+  0%, 100% { transform: translateY(0) scale(1); }
+  50% { transform: translateY(-30rpx) scale(1.05); }
+}
+@keyframes splash-float-2 {
+  0%, 100% { transform: translateY(0) scale(1); }
+  50% { transform: translateY(20rpx) scale(1.08); }
+}
+@keyframes splash-float-3 {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20rpx) rotate(10deg); }
+}
+
+/* ---- body fade-in ---- */
+.splash-overlay-body {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  margin-bottom: 10rpx;
+  animation: splash-body-in 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
 }
-.func-icon {
-  font-size: 40rpx;
-}
-.func-label {
-  font-size: 24rpx;
-  color: #333;
-  font-weight: 500;
+@keyframes splash-body-in {
+  from { opacity: 0; transform: translateY(40rpx) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-/* ===== 圈子卡片 ===== */
-.circle-section {
-  margin: 20rpx 30rpx;
+/* ---- logo ---- */
+.splash-logo-wrap {
+  width: 160rpx; height: 160rpx;
+  border-radius: 40rpx;
+  background: rgba(255,255,255,0.95);
+  display: flex; align-items: center; justify-content: center;
+  margin-bottom: 16rpx;
+  box-shadow: 0 8rpx 32rpx rgba(249,115,22,0.25);
+  animation: splash-logo-pulse 2.5s ease-in-out infinite;
+}
+@keyframes splash-logo-pulse {
+  0%, 100% { box-shadow: 0 8rpx 32rpx rgba(249,115,22,0.25); }
+  50% { box-shadow: 0 8rpx 48rpx rgba(249,115,22,0.45); }
+}
+.splash-logo-img { width: 100rpx; height: 100rpx; }
+
+/* ---- brand ---- */
+.splash-brand-name {
+  font-size: 64rpx; font-weight: 800;
+  color: #7C2D12;
+  letter-spacing: 10rpx;
+  margin-bottom: 2rpx;
+}
+.splash-brand-en {
+  font-size: 20rpx;
+  color: rgba(124,45,18,0.5);
+  letter-spacing: 6rpx;
+  margin-bottom: 30rpx;
 }
-.circle-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20rpx;
+.splash-tagline {
+  font-size: 26rpx;
+  color: rgba(124,45,18,0.7);
+  letter-spacing: 4rpx;
+  margin-top: 24rpx;
 }
-.circle-section-title {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #333;
+
+/* ---- dims row from splash.vue (rounded circles) ---- */
+.splash-dims-row {
+  display: flex; flex-direction: row;
+  align-items: center; justify-content: center;
+  gap: 28rpx;
+}
+.splash-dim-item {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 8rpx;
+}
+.splash-dim-circle {
+  width: 80rpx; height: 80rpx;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
 }
-.circle-header-link {
-  font-size: 24rpx;
-  color: #5B9BD5;
+.splash-dim-icon { font-size: 36rpx; line-height: 1; }
+.splash-dim-label {
+  font-size: 22rpx; font-weight: 500;
+  color: rgba(124,45,18,0.75);
+  line-height: 1;
 }
-.circle-scroll {
-  white-space: nowrap;
+
+/* ---- staggered dim entry from splash.vue ---- */
+.splash-dim-item:nth-child(1) { animation: splash-dim-in 0.5s ease 0.1s both; }
+.splash-dim-item:nth-child(2) { animation: splash-dim-in 0.5s ease 0.2s both; }
+.splash-dim-item:nth-child(3) { animation: splash-dim-in 0.5s ease 0.3s both; }
+.splash-dim-item:nth-child(4) { animation: splash-dim-in 0.5s ease 0.4s both; }
+.splash-dim-item:nth-child(5) { animation: splash-dim-in 0.5s ease 0.5s both; }
+@keyframes splash-dim-in {
+  from { opacity: 0; transform: translateY(16rpx) scale(0.8); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
-.circle-scroll-inner {
-  display: inline-flex;
-  gap: 16rpx;
+
+/* ---- loading dots ---- */
+.splash-overlay-loading {
+  position: absolute;
+  bottom: 120rpx;
+  left: 0; right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12rpx;
 }
-.circle-card-wrap {
-  display: inline-block;
+.splash-overlay-dot {
+  width: 14rpx; height: 14rpx;
+  border-radius: 50%;
+  background: rgba(249,115,22,0.6);
+  animation: splash-dot-bounce 1.4s ease-in-out infinite both;
 }
-.circle-empty {
-  padding: 40rpx 0;
-  text-align: center;
+.splash-overlay-dot:nth-child(1) { animation-delay: -0.32s; }
+.splash-overlay-dot:nth-child(2) { animation-delay: -0.16s; }
+.splash-overlay-dot:nth-child(3) { animation-delay: 0s; }
+@keyframes splash-dot-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40%           { transform: scale(1);   opacity: 1; }
 }
-.circle-empty-text {
-  font-size: 26rpx;
-  color: #999;
+
+/* ---- 登录态内容布局 ---- */
+.logged-in-container {
+  padding-bottom: 40rpx;
 }
-.circle-discover {
-  margin-top: 30rpx;
+
+/* ===== 功能入口网格(3列,对齐健康/成长页) ===== */
+.grid-3col {
+  display: flex;
+  flex-wrap: wrap;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 8rpx 0;
 }
-.discover-list {
+
+.grid-item {
+  width: 33.33%;
   display: flex;
   flex-direction: column;
-  gap: 16rpx;
+  align-items: center;
+  padding: 20rpx 0;
 }
-.discover-item {
-  background: #fff;
-  border-radius: 16rpx;
-  overflow: hidden;
+
+.grid-icon {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8rpx;
 }
+
+.grid-icon text {
+  font-size: 32rpx;
+}
+
+.grid-item .grid-label {
+  font-size: 24rpx;
+  color: #666;
+}
+
 </style>