feat: 开屏页与发现页五维价值传达

开屏页：品牌名与 tagline 间插入五维图标弹入动画(0.8~1.8s延迟)

发现页：emoji 4 卡片替换为五维价值矩阵(身🌏心🔥智⚡行🌿富💧)

角色切换：transition fade out-in 0.3s 淡入淡出

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

cfc-frontend/pages/index/index.vue

@@ -7,6 +7,20 @@
         <text class="splash-logo-char">浠</text>
       </view>
       <text class="splash-brand-name">浠艾福</text>
+      <!-- 五维图标行 -->
+      <view class="splash-dims-row">
+        <view
+          v-for="(item, index) in splashDimList"
+          :key="item.code"
+          class="splash-dim-item"
+          :style="'animation-delay:' + (0.8 + index * 0.25) + 's'"
+        >
+          <view class="splash-dim-circle" :style="'background:' + hexToRgba(item.color, 0.25)">
+            <text class="splash-dim-icon">{{ item.icon }}</text>
+          </view>
+          <text class="splash-dim-label">{{ item.name }}</text>
+        </view>
+      </view>
       <text class="splash-tagline">给全家的一站式幸福提案</text>
       <view class="splash-loading">
         <view class="splash-dot splash-dot--1"></view>
@@ -67,33 +81,33 @@
       </view>
     </view>
 
-    <!-- 为何选择浠艾福 -->
+    <!-- 五维全景幸福矩阵 -->
     <view class="why-section">
       <view class="section-header">
-        <text class="section-title">💡 为什么选择浠艾福</text>
+        <text class="section-title">🌏 五维全景幸福矩阵 — 给全家的一站式幸福提案</text>
       </view>
-      <view class="feature-grid">
-        <view class="feature-item">
-          <text class="feature-icon">🎯</text>
-          <text class="feature-title">科学评估</text>
-          <text class="feature-desc">DAN少儿核心素养评估体系</text>
-        </view>
-        <view class="feature-item">
-          <text class="feature-icon">🏆</text>
-          <text class="feature-title">积分激励</text>
-          <text class="feature-desc">完成任务得积分，兑换心愿</text>
-        </view>
-        <view class="feature-item">
-          <text class="feature-icon">👨‍👩‍👧‍👦</text>
-          <text class="feature-title">家庭参与</text>
-          <text class="feature-desc">全家一起见证成长每一步</text>
-        </view>
-        <view class="feature-item">
-          <text class="feature-icon">🌟</text>
-          <text class="feature-title">专业规划</text>
-          <text class="feature-desc">成长规划师一对一指导</text>
+      <view class="dim-matrix">
+        <view
+          v-for="dim in dimList" :key="dim.code"
+          class="dim-card"
+          :style="'border-left:6rpx solid ' + dim.color"
+          @click="handleLogin"
+        >
+          <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>
 
     <!-- 底部登录按钮 -->
@@ -106,15 +120,17 @@
     <view style="height: 120rpx;"></view>
   </view>
 
-  <!-- 登录态 — 按角色渲染 -->
-  <template v-else>
-    <parent-index v-if="currentRole === 'parent'" />
-    <child-index v-else-if="currentRole === 'child'" />
-    <!-- teacher-index 已废弃，教师功能折入 parent-index -->
-    <view v-else class="loading-container">
-      <text>加载中...</text>
-    </view>
-  </template>
+  <!-- 登录态 — 按角色渲染（带淡入淡出过渡）-->
+  <view v-else class="role-switch-wrapper">
+    <transition name="fade" mode="out-in">
+      <parent-index v-if="currentRole === 'parent'" key="parent" />
+      <child-index v-else-if="currentRole === 'child'" key="child" />
+      <!-- teacher-index 已废弃，教师功能折入 parent-index -->
+      <view v-else class="loading-container" key="loading">
+        <text>加载中...</text>
+      </view>
+    </transition>
+  </view>
 </view>
 </template>
 
@@ -126,6 +142,14 @@ import PageBanner from '../../components/PageBanner.vue'
 import WuxingSandbox from '../../components/wuxing-sandbox.vue'
 import { acceptParentInvite, productList } from '../../utils/api.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: {
     ParentIndex,
@@ -290,6 +314,23 @@ export default {
           }
         })
       }, 500)
+    },
+    hexToRgba: function(hex, alpha) {
+      var r = parseInt(hex.slice(1, 3), 16)
+      var g = parseInt(hex.slice(3, 5), 16)
+      var b = parseInt(hex.slice(5, 7), 16)
+      return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')'
+    }
+  },
+  computed: {
+    dimList: function() {
+      return DIMENSIONS
+    },
+    splashDimList: function() {
+      return DIMENSIONS
+    },
+    energyDotColors: function() {
+      return ['#8D6E63', '#FF6B35', '#FFD700', '#4CAF50', '#42A5F5']
     }
   }
 }
@@ -398,42 +439,81 @@ export default {
   color: #999;
 }
 
-/* ===== 为何选择 ===== */
+/* ===== 五维全景幸福矩阵 ===== */
 .why-section {
   margin: 30rpx;
 }
-.feature-grid {
+.dim-matrix {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 20rpx;
+  justify-content: center;
 }
-.feature-item {
-  width: calc(50% - 10rpx);
+.dim-card {
+  width: calc(33.33% - 14rpx);
   box-sizing: border-box;
   background: #fff;
   border-radius: 20rpx;
-  padding: 24rpx;
-  margin-bottom: 20rpx;
+  padding: 28rpx 16rpx 24rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  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;
 }
-.feature-icon {
-  font-size: 48rpx;
-  margin-bottom: 10rpx;
+.dim-card:active {
+  transform: scale(0.96);
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
 }
-.feature-title {
-  font-size: 24rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 6rpx;
+.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;
 }
-.feature-desc {
+.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: #999;
+  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%;
 }
 
 /* ===== 底部登录 ===== */
@@ -550,4 +630,59 @@ export default {
   0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
   40% { transform: scale(1); opacity: 1; }
 }
+
+/* ===== 五维图标行 ===== */
+.splash-dims-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  margin: 16rpx 0 20rpx;
+}
+.splash-dim-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rpx;
+  opacity: 0;
+  transform: translateY(20rpx);
+  animation: splash-dim-enter 0.4s ease forwards;
+}
+.splash-dim-circle {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.splash-dim-icon {
+  font-size: 28rpx;
+  line-height: 1;
+  color: #FFFFFF;
+}
+.splash-dim-label {
+  font-size: 18rpx;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1;
+}
+@keyframes splash-dim-enter {
+  from { opacity: 0; transform: translateY(20rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ===== 角色切换淡入淡出 ===== */
+.role-switch-wrapper {
+  width: 100%;
+  min-height: 100vh;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

cfc-frontend/pages/splash/splash.vue

@@ -9,6 +9,40 @@
       <!-- Brand Name -->
       <text class="splash-brand-name">浠艾福</text>
 
+      <!-- 五维图标行 -->
+      <view class="splash-dims-row">
+        <view class="splash-dim-item">
+          <view class="splash-dim-circle" style="background:rgba(141,110,99,0.25);">
+            <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,53,0.25);">
+            <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,215,0,0.25);">
+            <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(76,175,80,0.25);">
+            <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(66,165,245,0.25);">
+            <text class="splash-dim-icon">💧</text>
+          </view>
+          <text class="splash-dim-label">富</text>
+        </view>
+      </view>
+
       <!-- Tagline -->
       <text class="splash-tagline">给全家的一站式幸福提案</text>
 
@@ -159,4 +193,62 @@ export default {
     opacity: 1;
   }
 }
+
+/* ===== 五维图标行 ===== */
+.splash-dims-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  margin: 16rpx 0 20rpx;
+}
+
+.splash-dim-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rpx;
+  opacity: 0;
+  transform: translateY(20rpx);
+  animation: splash-dim-enter 0.4s ease forwards;
+}
+
+.splash-dim-item:nth-child(1) { animation-delay: 0.8s; }
+.splash-dim-item:nth-child(2) { animation-delay: 1.05s; }
+.splash-dim-item:nth-child(3) { animation-delay: 1.3s; }
+.splash-dim-item:nth-child(4) { animation-delay: 1.55s; }
+.splash-dim-item:nth-child(5) { animation-delay: 1.8s; }
+
+.splash-dim-circle {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.splash-dim-icon {
+  font-size: 28rpx;
+  line-height: 1;
+  color: #FFFFFF;
+}
+
+.splash-dim-label {
+  font-size: 18rpx;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1;
+}
+
+@keyframes splash-dim-enter {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>