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

feat(consumer): 首页未登录态改版(品牌锁定版+CTA闪动+三区块折叠+后台取数)

- 品牌区重构图: 左上角 logo 与「浠艾福」并列, 下带副标「全家人的主动健康陪跑」, 加竖向分隔线收拢为一组
- Hero: 免费体验按钮加呼吸闪动; 五维小框缩成一排; 标语移至 CTA 上方; 删除副标语
- 价值主张: 精炼四框文案(基于测评数据/个性化专属/家庭共治/积分奖励), 标题去掉问号
- 三步上手改为闪动可点击引导, 点击进入登录/注册, 三步不再平铺展示
- 热门活动/热门商品/推荐阅读统一为默认收起+闪烁「查看更多」, 点击展开
- 推荐文章与热门商品改为后台取数各 3 条(按 sort_order 升序), 失败回退兜底
- 文章卡片去掉日期与分类小方块; 删除底部重复登录按钮
- 底部 GEO 文案精炼为 20 字黄色 slogan
asus 1 неделя назад
Родитель
Сommit
bc9bc25075
1 измененных файлов с 300 добавлено и 225 удалено
  1. 300 225
      cfc-frontend/pages/index-home/index.vue

+ 300 - 225
cfc-frontend/pages/index-home/index.vue

@@ -285,130 +285,84 @@
   <view v-else class="discover-container">
   <view v-else class="discover-container">
     <!-- 品牌 Hero 区 -->
     <!-- 品牌 Hero 区 -->
     <view class="hero-section">
     <view class="hero-section">
-      <image class="hero-logo" src="/static/logo.png" mode="aspectFit" />
-      <text class="hero-name">浠艾福</text>
-      <text class="hero-identity">您的专属家庭主动健康管理师</text>
-      <text class="hero-slogan">家里每个人的状态,你真的看见了?</text>
-      <text class="hero-powered">亿图腾科技出品</text>
-
+      <view class="brand-bar">
+        <image class="brand-logo" src="/static/logo.png" mode="aspectFit" />
+        <view class="brand-texts">
+          <text class="brand-name">浠艾福</text>
+          <text class="brand-tagline">全家人的主动健康陪跑</text>
+        </view>
+      </view>
       <view class="hero-dims">
       <view class="hero-dims">
-        <view class="hero-dim"><text class="hero-dim-emoji">🌏</text><text class="hero-dim-label">身·根基</text></view>
-        <view class="hero-dim"><text class="hero-dim-emoji">⚡</text><text class="hero-dim-label">智·认知</text></view>
-        <view class="hero-dim"><text class="hero-dim-emoji">💧</text><text class="hero-dim-label">富·创富</text></view>
-        <view class="hero-dim"><text class="hero-dim-emoji">🌿</text><text class="hero-dim-label">行·和谐</text></view>
-        <view class="hero-dim"><text class="hero-dim-emoji">🔥</text><text class="hero-dim-label">心·大爱</text></view>
+        <view class="hero-dim"><text class="hero-dim-emoji">🌏</text><text class="hero-dim-label">身</text></view>
+        <view class="hero-dim"><text class="hero-dim-emoji">⚡</text><text class="hero-dim-label">智</text></view>
+        <view class="hero-dim"><text class="hero-dim-emoji">💧</text><text class="hero-dim-label">富</text></view>
+        <view class="hero-dim"><text class="hero-dim-emoji">🌿</text><text class="hero-dim-label">行</text></view>
+        <view class="hero-dim"><text class="hero-dim-emoji">🔥</text><text class="hero-dim-label">心</text></view>
       </view>
       </view>
 
 
-      <text class="hero-sub-slogan">家庭成员的习惯、长者的身体、自己的精力——不用等到出问题才着急。先看见,先了解,不等问题发生。</text>
+      <text class="hero-slogan">家里每个人的状态,你真的看见了吗?</text>
 
 
       <button class="hero-cta-btn" @click="handleLogin">免费体验 · 登录 / 注册</button>
       <button class="hero-cta-btn" @click="handleLogin">免费体验 · 登录 / 注册</button>
+      <text class="hero-powered">亿图腾科技出品</text>
     </view>
     </view>
 
 
     <!-- ② 平台作用·价值主张 -->
     <!-- ② 平台作用·价值主张 -->
     <view class="value-prop-section">
     <view class="value-prop-section">
-      <text class="value-prop-title">为什么选择浠艾福?</text>
+      <text class="value-prop-title">为什么选择浠艾福</text>
       <view class="value-prop-grid">
       <view class="value-prop-grid">
         <view class="value-prop-card">
         <view class="value-prop-card">
           <text class="value-prop-icon">🧪</text>
           <text class="value-prop-icon">🧪</text>
           <view class="value-prop-texts">
           <view class="value-prop-texts">
-            <text class="value-prop-name">免费五维测评</text>
-            <text class="value-prop-desc">从身体到心智,20 分钟看清全家健康状况</text>
+            <text class="value-prop-name">基于测评数据</text>
+            <text class="value-prop-desc">客观量化专业动态追踪</text>
           </view>
           </view>
         </view>
         </view>
         <view class="value-prop-card">
         <view class="value-prop-card">
           <text class="value-prop-icon">🎯</text>
           <text class="value-prop-icon">🎯</text>
           <view class="value-prop-texts">
           <view class="value-prop-texts">
-            <text class="value-prop-name">个性化成长方案</text>
-            <text class="value-prop-desc">基于测评数据,AI+专家定制专属行动计划</text>
+            <text class="value-prop-name">个性化专属</text>
+            <text class="value-prop-desc">千人千案精准针对 AI赋能</text>
           </view>
           </view>
         </view>
         </view>
         <view class="value-prop-card">
         <view class="value-prop-card">
           <text class="value-prop-icon">👨‍👩‍👧</text>
           <text class="value-prop-icon">👨‍👩‍👧</text>
           <view class="value-prop-texts">
           <view class="value-prop-texts">
-            <text class="value-prop-name">全家共管</text>
-            <text class="value-prop-desc">一个家庭一张网,三代同框、全员参与,成长看得见</text>
+            <text class="value-prop-name">家庭共治</text>
+            <text class="value-prop-desc">筑牢全家健康 和谐幸福长久</text>
           </view>
           </view>
         </view>
         </view>
         <view class="value-prop-card">
         <view class="value-prop-card">
           <text class="value-prop-icon">📈</text>
           <text class="value-prop-icon">📈</text>
           <view class="value-prop-texts">
           <view class="value-prop-texts">
-            <text class="value-prop-name">任务与积分激励</text>
-            <text class="value-prop-desc">把健康管理变成每天的小行动,习惯自然养成</text>
+            <text class="value-prop-name">积分奖励</text>
+            <text class="value-prop-desc">每一步都算数 有回报</text>
           </view>
           </view>
         </view>
         </view>
       </view>
       </view>
     </view>
     </view>
 
 
-    <!-- ③ 三步上手 -->
-    <view class="how-it-works">
-      <text class="how-it-works-title">三步,全家健康从今天开始</text>
-      <view class="step-row">
-        <view class="step-item">
-          <view class="step-num">1</view>
-          <text class="step-name">登录/注册</text>
-          <text class="step-sub">(30 秒)</text>
-        </view>
-        <view class="step-arrow">›</view>
-        <view class="step-item">
-          <view class="step-num">2</view>
-          <text class="step-name">完成五维测评</text>
-          <text class="step-sub">(全家各一份)</text>
-        </view>
-        <view class="step-arrow">›</view>
-        <view class="step-item">
-          <view class="step-num">3</view>
-          <text class="step-name">获得专属方案</text>
-          <text class="step-sub">(照着做,持续优化)</text>
-        </view>
-      </view>
+    <!-- ③ 三步上手(闪烁引导,点击登录/注册,步骤按序执行) -->
+    <view class="how-it-works how-cta" @click="handleLogin">
+      <text class="how-it-works-title how-flicker">✨ 三步开启全家健康之旅</text>
+      <text class="how-it-works-hint">登录 / 注册后,按引导依次完成,全家健康即刻开始 ›</text>
     </view>
     </view>
 
 
     <!-- 五行沙盘预览 -->
     <!-- 五行沙盘预览 -->
     <wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
     <wuxing-sandbox mode="preview" badgeText="登录查看完整报告" @point-click="handleLogin" />
 
 
-    <!-- 热门活动(无条件展示) -->
-    <view class="section">
-      <view class="section-header">
-        <text class="section-title">🔥 热门活动</text>
-        <text class="section-more" @click="goActivities">查看更多 ›</text>
-      </view>
-      <view v-if="dimensionActivities.length === 0" class="empty-state" style="padding: 40rpx 0;">
-        <text class="empty-text">暂无活动</text>
-      </view>
-      <view class="activity-list" v-else>
-        <view class="activity-card" v-for="act in dimensionActivities" :key="act.id" @click="goActivityDetail(act)">
-          <image class="activity-cover" :src="getImageUrl(act.coverImage) || '/static/default-activity.png'" mode="aspectFill" />
-          <view class="activity-info">
-            <text class="activity-name line-clamp-1">{{ act.title }}</text>
-            <view class="activity-meta">
-              <text class="activity-time">{{ act.startTime }}</text>
-            </view>
-            <view class="activity-bottom">
-              <text class="activity-status" :class="'status-' + (act.status || 'upcoming')">{{ act.status === 'ongoing' ? '进行中' : act.status === 'ended' ? '已结束' : '即将开始' }}</text>
-              <text class="activity-fee" v-if="act.price && act.price > 0">¥{{ (act.price / 100).toFixed(0) }}</text>
-              <text class="activity-fee fee-free" v-else>免费</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 推荐阅读(无条件展示) -->
+    <!-- 推荐阅读(无条件展示,置顶) -->
     <view class="section">
     <view class="section">
       <view class="section-header">
       <view class="section-header">
         <text class="section-title">📖 推荐阅读</text>
         <text class="section-title">📖 推荐阅读</text>
-        <text class="section-more" @click="goArticles">更多 ›</text>
+        <text class="section-more" :class="!showArticles ? 'blink' : ''" @click="showArticles = !showArticles">{{ showArticles ? '收起 ‹' : '查看更多 ›' }}</text>
       </view>
       </view>
-      <view class="article-list">
+      <view v-if="showArticles" class="article-list">
         <view v-if="articlesLoading" class="loading-state" style="padding: 40rpx 0;">
         <view v-if="articlesLoading" class="loading-state" style="padding: 40rpx 0;">
           <text class="loading-text">加载中...</text>
           <text class="loading-text">加载中...</text>
         </view>
         </view>
         <!-- 无数据时显示占位卡片 -->
         <!-- 无数据时显示占位卡片 -->
         <template v-else-if="indexArticles.length === 0">
         <template v-else-if="indexArticles.length === 0">
           <view class="article-card" v-for="(item, i) in [1,2,3]" :key="i">
           <view class="article-card" v-for="(item, i) in [1,2,3]" :key="i">
-            <view class="article-category" :style="{ background: gradientColors[(i-1) % gradientColors.length] }">
-              <text class="article-category-text">推荐文章</text>
-            </view>
             <text class="article-title">暂无推荐文章</text>
             <text class="article-title">暂无推荐文章</text>
             <text class="article-summary">精彩内容即将上线,敬请期待</text>
             <text class="article-summary">精彩内容即将上线,敬请期待</text>
             <view class="article-meta">
             <view class="article-meta">
@@ -416,16 +370,12 @@
                 <text class="meta-icon">&#x1F4D6;</text>
                 <text class="meta-icon">&#x1F4D6;</text>
                 <text class="meta-text">0</text>
                 <text class="meta-text">0</text>
               </view>
               </view>
-              <text class="article-date">--</text>
             </view>
             </view>
           </view>
           </view>
         </template>
         </template>
-        <!-- 有数据时显示文章卡片 -->
+        <!-- 有数据时显示文章卡片(仅前 3 篇) -->
         <template v-else>
         <template v-else>
-          <view class="article-card" v-for="article in indexArticles" :key="article.id" @click="goArticleDetail(article.id)">
-            <view class="article-category" :style="{ background: article.categoryColor }">
-              <text class="article-category-text">{{ article.category }}</text>
-            </view>
+          <view class="article-card" v-for="article in indexArticles.slice(0, 3)" :key="article.id" @click="goArticleDetail(article.id)">
             <text class="article-title">{{ article.title }}</text>
             <text class="article-title">{{ article.title }}</text>
             <text class="article-summary">{{ article.summary }}</text>
             <text class="article-summary">{{ article.summary }}</text>
             <view class="article-meta">
             <view class="article-meta">
@@ -433,24 +383,74 @@
                 <text class="meta-icon">&#x1F4D6;</text>
                 <text class="meta-icon">&#x1F4D6;</text>
                 <text class="meta-text">{{ article.views }}</text>
                 <text class="meta-text">{{ article.views }}</text>
               </view>
               </view>
-              <text class="article-date">{{ article.date }}</text>
             </view>
             </view>
           </view>
           </view>
+          <text v-if="indexArticles.length > 3" class="section-more blink" style="display: block; text-align: right; margin-top: 12rpx;" @click="goArticles">查看全部 ›</text>
         </template>
         </template>
       </view>
       </view>
     </view>
     </view>
 
 
-    <!-- 底部登录按钮 -->
-    <view class="login-footer">
-      <button class="login-btn" @click="handleLogin">登录 / 注册</button>
+    <!-- 热门商品(默认收起,点击查看更多后展开,与热门活动同款交互) -->
+    <view class="section">
+      <view class="section-header">
+        <text class="section-title">🛒 热门商品</text>
+        <text class="section-more" :class="!showProducts ? 'blink' : ''" @click="showProducts = !showProducts">{{ showProducts ? '收起 ‹' : '查看更多 ›' }}</text>
+      </view>
+      <view v-if="showProducts">
+        <view v-if="hotProducts.length === 0" class="empty-state" style="padding: 40rpx 0;">
+          <text class="empty-text">暂无商品</text>
+        </view>
+        <view class="product-list" v-else>
+          <view class="product-card" v-for="prod in hotProducts" :key="prod.id" @click="goHotProduct(prod)">
+            <image class="product-cover" :src="getImageUrl(prod.coverImage) || '/static/default-product.png'" mode="aspectFill" />
+            <view class="product-info">
+              <text class="product-name line-clamp-1">{{ prod.name }}</text>
+              <text class="product-desc line-clamp-1">{{ prod.desc }}</text>
+              <view class="product-bottom">
+                <text class="product-fee" v-if="prod.price">¥{{ prod.price }}</text>
+                <text class="product-fee" v-else>立即查看 ›</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 热门活动(默认收起,点击查看更多后展开,置底) -->
+    <view class="section">
+      <view class="section-header">
+        <text class="section-title">🔥 热门活动</text>
+        <text class="section-more" :class="!showActivities ? 'blink' : ''" @click="showActivities = !showActivities">{{ showActivities ? '收起 ‹' : '查看更多 ›' }}</text>
+      </view>
+      <view v-if="showActivities">
+        <view v-if="dimensionActivities.length === 0" class="empty-state" style="padding: 40rpx 0;">
+          <text class="empty-text">暂无活动</text>
+        </view>
+        <view class="activity-list" v-else>
+          <view class="activity-card" v-for="act in dimensionActivities" :key="act.id" @click="goActivityDetail(act)">
+            <image class="activity-cover" :src="getImageUrl(act.coverImage) || '/static/default-activity.png'" mode="aspectFill" />
+            <view class="activity-info">
+              <text class="activity-name line-clamp-1">{{ act.title }}</text>
+              <view class="activity-meta">
+                <text class="activity-time">{{ act.startTime }}</text>
+              </view>
+              <view class="activity-bottom">
+                <text class="activity-status" :class="'status-' + (act.status || 'upcoming')">{{ act.status === 'ongoing' ? '进行中' : act.status === 'ended' ? '已结束' : '即将开始' }}</text>
+                <text class="activity-fee" v-if="act.price && act.price > 0">¥{{ (act.price / 100).toFixed(0) }}</text>
+                <text class="activity-fee fee-free" v-else>免费</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
     </view>
 
 
     <!-- 底部占位 -->
     <!-- 底部占位 -->
     <view style="height: 120rpx;"></view>
     <view style="height: 120rpx;"></view>
 
 
-    <!-- GEO 自然语言摘要区:搜一搜摘要位 + AI 抓取位(服务微信内/外 AI) -->
+    <!-- 底部品牌 slogan:原 GEO 摘要按运营要求精简为 20 字内的黄色 tagline -->
     <view class="geo-seo-block" style="padding:8rpx 32rpx 20rpx;">
     <view class="geo-seo-block" style="padding:8rpx 32rpx 20rpx;">
-      <text style="display:block;font-size:26rpx;line-height:42rpx;color:#7A7E83;">浠艾福是一款免费的面向家庭的成长助手,帮助家长通过任务管理、习惯打卡、五维成长测评(身、心、智、行、富)和心愿激励,陪伴孩子养成良好习惯、记录家庭成长。所有功能免费,数据仅存本机。</text>
+      <text style="display:block;font-size:26rpx;line-height:42rpx;font-weight:700;text-align:center;letter-spacing:1rpx;color:#FFC107;text-shadow:0 1rpx 3rpx rgba(0,0,0,0.18);">浠艾福:测一测、管一管,全家健康看得见。</text>
     </view>
     </view>
   </view>
   </view>
 
 
@@ -471,13 +471,42 @@ import OnboardingProgressBar from '../../components/OnboardingProgressBar.vue'
 import { BrandColors } from '../../utils/brand-colors.js'
 import { BrandColors } from '../../utils/brand-colors.js'
 import OnboardingGuide from '../../components/OnboardingGuide.vue'
 import OnboardingGuide from '../../components/OnboardingGuide.vue'
 import ConfigurableGuide from '../../components/ConfigurableGuide.vue'
 import ConfigurableGuide from '../../components/ConfigurableGuide.vue'
-import { acceptParentInvite, getActivityList, getFeaturedArticles, getEnergySandbox, getEnergyOverview, getFamilyMemberList, getChallengeList, getGuideConfig, getGuidePopupList, consumeGuidePopup, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, readNotification, getSurveyStatus, getSelfCheckStatus, getReferralCode, extractReferralCode, getAppLibrary, reportAppEnter, getEnergyLogs, getPointsLogs, getCfList, getCfSummary } from '../../utils/api.js'
+import { acceptParentInvite, getActivityList, getFeaturedArticles, productList, getEnergySandbox, getEnergyOverview, getFamilyMemberList, getChallengeList, getGuideConfig, getGuidePopupList, consumeGuidePopup, switchToFamilyMember, getMyMembership, updateChallengeProgress, respondChallenge, getTodayTasks, completeTask as completeTaskApi, getTodayParentTasks, completeParentTask as completeParentTaskApi, getTaskHistory, getNotices, getNotificationList, readNotification, getSurveyStatus, getSelfCheckStatus, getReferralCode, extractReferralCode, getAppLibrary, reportAppEnter, getEnergyLogs, getPointsLogs, getCfList, getCfSummary } from '../../utils/api.js'
 import { findAppByKey, getShortcutableApps } from '../../utils/app-library.js'
 import { findAppByKey, getShortcutableApps } from '../../utils/app-library.js'
 import nav from '../../utils/nav.js'
 import nav from '../../utils/nav.js'
 import config from '@/config.js'
 import config from '@/config.js'
 import { parseDate } from '../../utils/format.js'
 import { parseDate } from '../../utils/format.js'
 import fontScaleMixin from '@/mixins/font-scale.js'
 import fontScaleMixin from '@/mixins/font-scale.js'
 
 
+// 发现页(未登录态)推荐阅读 —— 运营指定固定精选 3 篇,顺序不可变。
+// id 为占位 slug,正式上线请替换为 CMS 中的真实文章 id(goArticleDetail 按 id 跳转详情)。
+var DISCOVER_ARTICLES = [
+  {
+    id: 'article-leaky-gut',
+    title: '肠漏:被忽视的慢性病根源',
+    summary: '肠道通透性增加如何牵连免疫、代谢与神经,为何它是众多慢性问题的共同土壤。',
+    views: '0',
+    date: '',
+    coverImage: ''
+  },
+  {
+    id: 'article-why-microbiome-test',
+    title: '为什么要做菌群检测',
+    summary: '一次菌群检测能看见什么,如何把抽象的微生态变成可执行的家庭健康行动。',
+    views: '0',
+    date: '',
+    coverImage: ''
+  },
+  {
+    id: 'article-adhd-microbiome',
+    title: '多动症儿童菌群特征确认',
+    summary: '研究显示注意缺陷多动儿童的肠道菌群结构存在差异,早筛查、早干预更从容。',
+    views: '0',
+    date: '',
+    coverImage: ''
+  }
+]
+
 export default {
 export default {
   mixins: [fontScaleMixin],
   mixins: [fontScaleMixin],
 components: {
 components: {
@@ -523,8 +552,16 @@ components: {
       _guidePopupAttempted: false,
       _guidePopupAttempted: false,
 
 
       dimensionActivities: [],
       dimensionActivities: [],
-      indexArticles: [],
+      indexArticles: DISCOVER_ARTICLES,
       articlesLoading: false,
       articlesLoading: false,
+      showActivities: false,
+      hotProducts: [
+        { id: 1, name: '肠道菌群测评', coverImage: '', desc: '科学看见肠道微生态,量化全家健康底牌', price: null },
+        { id: 3, name: '电解还原水机', coverImage: '', desc: '日常饮水升级,守护全家长期健康', price: null },
+        { id: 2, name: 'DAN 测评', coverImage: '', desc: '多维能力评估,精准定位成长方向', price: null }
+      ],
+      showProducts: true,
+      showArticles: true,
       gradientColors: [
       gradientColors: [
         `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
         `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
         `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
         `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
@@ -1768,6 +1805,10 @@ title: '添加家庭成员',
     goMoreProducts: function() {
     goMoreProducts: function() {
       uni.navigateTo({ url: '/pages/shop/index/index' })
       uni.navigateTo({ url: '/pages/shop/index/index' })
     },
     },
+    goHotProduct: function(prod) {
+      // 热门商品为首页精选,点击统一进入商城列表(商品详情 id 以商城内实际数据为准)
+      uni.navigateTo({ url: '/pages/shop/index/index' })
+    },
     goArticleDetail: function(article) {
     goArticleDetail: function(article) {
       var id = article.id || article
       var id = article.id || article
       uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
       uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
@@ -1872,6 +1913,7 @@ title: '添加家庭成员',
         this.currentRole = ''
         this.currentRole = ''
         this.loadDimensionActivities()
         this.loadDimensionActivities()
         this.loadFeaturedArticles()
         this.loadFeaturedArticles()
+        this.loadDiscoverProducts()
         return
         return
       }
       }
       this.syncRoleAndTabBar()
       this.syncRoleAndTabBar()
@@ -2061,38 +2103,56 @@ title: '添加家庭成员',
         self._checkSplashReady()
         self._checkSplashReady()
       })
       })
     },
     },
+    // 热门商品:从后台取 3 个,后台按 sort_order 升序、createdAt 倒序返回。
+    // 接口异常或无数据时保留兜底项,避免区块空白。
+    loadDiscoverProducts: function() {
+      var self = this
+      productList({ page: 1, size: 3 }).then(function(res) {
+        if (res && res.code === 200 && res.data) {
+          var records = res.data.records || []
+          if (records.length) {
+            self.hotProducts = records.slice(0, 3).map(function(item) {
+              return {
+                id: item.id,
+                name: item.name || '',
+                coverImage: item.coverImage || item.image || '',
+                desc: item.description || item.summary || '',
+                price: (item.price != null && Number(item.price) > 0) ? (Number(item.price) / 100) : null
+              }
+            })
+          }
+        }
+      }).catch(function() {})
+    },
     loadFeaturedArticles: function() {
     loadFeaturedArticles: function() {
       var self = this
       var self = this
       this.articlesLoading = true
       this.articlesLoading = true
-      getFeaturedArticles({ size: 5 }).then(function(res) {
+      // 推荐阅读:从后台取 3 条,后台按 sort_order 升序、publishedAt 倒序返回。
+      // 仅当接口异常或无数据时,才回退到运营精选集,保证区块不空白。
+      getFeaturedArticles({ size: 3 }).then(function(res) {
         self.articlesLoading = false
         self.articlesLoading = false
-        if (res && res.code === 200) {
-          var gradientColors = [
-            `linear-gradient(135deg, ${BrandColors.action}, ${BrandColors.successLight3})`,
-            `linear-gradient(135deg, ${BrandColors.info}, ${BrandColors.infoLight})`,
-            `linear-gradient(135deg, ${BrandColors.wealth}, ${BrandColors.warning})`,
-            `linear-gradient(135deg, ${BrandColors.primary}, ${BrandColors.primaryLight})`,
-            `linear-gradient(135deg, ${BrandColors.wisdom}, ${BrandColors.wisdomLight})`
-          ]
-          // res.data is the response wrapper, articles are in res.data.data
-          var rawList = res.data && (Array.isArray(res.data) ? res.data : (res.data.data || res.data.records || []))
-          var list = Array.isArray(rawList) ? rawList : []
-          self.indexArticles = list.map(function(item, index) {
+        var list = []
+        if (res && res.code === 200 && res.data) {
+          list = Array.isArray(res.data) ? res.data : (res.data.records || [])
+        }
+        if (list && list.length) {
+          self.indexArticles = list.slice(0, 3).map(function(item) {
             return {
             return {
               id: item.id,
               id: item.id,
-              category: item.categoryName || item.category || '热门文章',
-              categoryColor: gradientColors[index % gradientColors.length],
               title: item.title || '',
               title: item.title || '',
               summary: item.summary || '',
               summary: item.summary || '',
               views: item.viewCount ? String(item.viewCount) : '0',
               views: item.viewCount ? String(item.viewCount) : '0',
-              date: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
-              coverImage: item.coverImage
+              date: item.publishedAt ? String(item.publishedAt).slice(0, 10) : '',
+              coverImage: item.coverImage || ''
             }
             }
           })
           })
+        } else {
+          self.indexArticles = DISCOVER_ARTICLES.slice()
         }
         }
         self._checkSplashReady()
         self._checkSplashReady()
       }).catch(function() {
       }).catch(function() {
         self.articlesLoading = false
         self.articlesLoading = false
+        self.indexArticles = DISCOVER_ARTICLES.slice()
         self._checkSplashReady()
         self._checkSplashReady()
       })
       })
     },
     },
@@ -2250,38 +2310,54 @@ $c-warm-tint:     #FFF3E7;
   border: 1rpx solid rgba($brand-primary, 0.12);
   border: 1rpx solid rgba($brand-primary, 0.12);
 }
 }
 
 
-.hero-logo {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 24rpx;
+.brand-bar {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 4rpx 0;
+  box-sizing: border-box;
+}
+.brand-logo {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
   background: $app-surface;
   background: $app-surface;
-  box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.18);
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.18);
+  flex-shrink: 0;
 }
 }
-
-.hero-name {
-  display: block;
-  font-size: calc(48rpx * var(--font-scale, 1));
+.brand-texts {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  padding-left: 20rpx;
+  border-left: 2rpx solid rgba($brand-primary, 0.28);
+}
+.brand-name {
+  font-size: calc(38rpx * var(--font-scale, 1));
   font-weight: bold;
   font-weight: bold;
   color: $c-brand-ink;
   color: $c-brand-ink;
-  margin-top: 16rpx;
-  letter-spacing: 6rpx;
+  letter-spacing: 3rpx;
+  line-height: 1.2;
 }
 }
-
-.hero-identity {
+.brand-tagline {
   display: block;
   display: block;
-  font-size: calc(28rpx * var(--font-scale, 1));
-  font-weight: 600;
+  font-size: calc(22rpx * var(--font-scale, 1));
+  font-weight: 500;
   color: $brand-primary-deep;
   color: $brand-primary-deep;
-  margin-top: 12rpx;
-  letter-spacing: 2rpx;
+  margin-top: 6rpx;
+  letter-spacing: 1rpx;
+  line-height: 1.2;
+  white-space: nowrap;
 }
 }
 
 
 .hero-slogan {
 .hero-slogan {
   display: block;
   display: block;
   font-size: calc(26rpx * var(--font-scale, 1));
   font-size: calc(26rpx * var(--font-scale, 1));
   color: $c-brand-ink-2;
   color: $c-brand-ink-2;
-  margin-top: 8rpx;
+  margin-top: 24rpx;
   font-weight: 500;
   font-weight: 500;
+  text-align: center;
 }
 }
 
 
 .hero-powered {
 .hero-powered {
@@ -2294,23 +2370,25 @@ $c-warm-tint:     #FFF3E7;
 .hero-dims {
 .hero-dims {
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
-  gap: 16rpx;
-  margin-top: 28rpx;
-  flex-wrap: wrap;
+  gap: 10rpx;
+  margin-top: 20rpx;
+  flex-wrap: nowrap;
 }
 }
 
 
 .hero-dim {
 .hero-dim {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
-  gap: 6rpx;
-  padding: 12rpx 16rpx;
+  gap: 4rpx;
+  padding: 8rpx 0;
   background: rgba($app-surface, 0.7);
   background: rgba($app-surface, 0.7);
-  border-radius: 16rpx;
+  border-radius: 14rpx;
+  flex: 1;
+  max-width: 116rpx;
 }
 }
 
 
 .hero-dim-emoji {
 .hero-dim-emoji {
-  font-size: calc(32rpx * var(--font-scale, 1));
+  font-size: calc(30rpx * var(--font-scale, 1));
 }
 }
 
 
 .hero-dim-label {
 .hero-dim-label {
@@ -2321,14 +2399,6 @@ $c-warm-tint:     #FFF3E7;
 }
 }
 
 
 /* ===== 未登录态 Hero 副标语 / CTA ===== */
 /* ===== 未登录态 Hero 副标语 / CTA ===== */
-.hero-sub-slogan {
-  display: block;
-  font-size: calc(22rpx * var(--font-scale, 1));
-  color: $brand-primary-dark;
-  margin-top: 18rpx;
-  font-weight: 500;
-}
-
 .hero-cta-btn {
 .hero-cta-btn {
   margin: 28rpx auto 0;
   margin: 28rpx auto 0;
   display: block;
   display: block;
@@ -2343,10 +2413,25 @@ $c-warm-tint:     #FFF3E7;
   text-align: center;
   text-align: center;
   border: none;
   border: none;
   box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.3);
   box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.3);
+  animation: heroPulse 1.6s ease-in-out infinite;
 }
 }
 .hero-cta-btn::after {
 .hero-cta-btn::after {
   border: none;
   border: none;
 }
 }
+/* 免费体验按钮:呼吸式闪动,吸引点击 */
+@keyframes heroPulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.3);
+  }
+  50% {
+    transform: scale(1.045);
+    box-shadow: 0 8rpx 34rpx rgba($brand-primary, 0.6);
+  }
+}
+.hero-cta-btn:active {
+  transform: scale(0.97);
+}
 
 
 /* ===== 价值主张(为什么选择浠艾福) ===== */
 /* ===== 价值主张(为什么选择浠艾福) ===== */
 .value-prop-section {
 .value-prop-section {
@@ -2401,7 +2486,7 @@ $c-warm-tint:     #FFF3E7;
   line-height: 1.5;
   line-height: 1.5;
 }
 }
 
 
-/* ===== 三步上手 ===== */
+/* ===== 三步上手(闪烁引导,点击登录/注册) ===== */
 .how-it-works {
 .how-it-works {
   margin: 32rpx $uni-space-lg 0;
   margin: 32rpx $uni-space-lg 0;
   padding: 32rpx 24rpx;
   padding: 32rpx 24rpx;
@@ -2409,57 +2494,35 @@ $c-warm-tint:     #FFF3E7;
   border-radius: 24rpx;
   border-radius: 24rpx;
   box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.04);
   box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.04);
 }
 }
+.how-cta {
+  text-align: center;
+  cursor: pointer;
+  background: linear-gradient(135deg, $facade-brand-tint, rgba($brand-primary, 0.12));
+  border: 1rpx solid rgba($brand-primary, 0.18);
+}
+.how-cta:active {
+  transform: scale(0.985);
+}
 .how-it-works-title {
 .how-it-works-title {
   display: block;
   display: block;
   font-size: calc(32rpx * var(--font-scale, 1));
   font-size: calc(32rpx * var(--font-scale, 1));
   font-weight: bold;
   font-weight: bold;
   color: $facade-text-strong;
   color: $facade-text-strong;
   text-align: center;
   text-align: center;
-  margin-bottom: 28rpx;
 }
 }
-.step-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-.step-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
+.how-flicker {
+  color: $brand-primary-deep;
+  animation: flickerText 1.4s ease-in-out infinite;
 }
 }
-.step-num {
-  width: 48rpx;
-  height: 48rpx;
-  line-height: 48rpx;
-  border-radius: 50%;
-  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
-  color: $app-surface;
-  font-size: calc(26rpx * var(--font-scale, 1));
-  font-weight: bold;
-  text-align: center;
-  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.3);
+@keyframes flickerText {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 }
-.step-name {
-  font-size: calc(24rpx * var(--font-scale, 1));
-  color: $facade-text-strong;
-  font-weight: 500;
-  margin-top: 12rpx;
-  text-align: center;
-}
-.step-sub {
-  font-size: calc(20rpx * var(--font-scale, 1));
+.how-it-works-hint {
+  display: block;
+  font-size: calc(22rpx * var(--font-scale, 1));
   color: $facade-text-muted;
   color: $facade-text-muted;
-  margin-top: 4rpx;
-  text-align: center;
-}
-.step-arrow {
-  font-size: calc(28rpx * var(--font-scale, 1));
-  color: $brand-primary;
-  line-height: 1;
-  align-self: center;
-  padding: 0 6rpx;
+  margin-top: 12rpx;
 }
 }
 
 
 /* ===== 品牌定位语(保留旧样式,不再使用) ===== */
 /* ===== 品牌定位语(保留旧样式,不再使用) ===== */
@@ -2547,35 +2610,6 @@ $c-warm-tint:     #FFF3E7;
 /* ===== 五维全景幸福矩阵 ===== */
 /* ===== 五维全景幸福矩阵 ===== */
 
 
 /* ===== 底部登录 ===== */
 /* ===== 底部登录 ===== */
-.login-footer {
-  margin: 40rpx $uni-space-lg;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.login-btn {
-  width: 100%;
-  height: 88rpx;
-  line-height: 88rpx;
-  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
-  color: $app-surface;
-  font-size: calc(32rpx * var(--font-scale, 1));
-  font-weight: bold;
-  border-radius: 24rpx;
-  text-align: center;
-  border: none;
-  box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.3);
-}
-.login-btn::after {
-  border: none;
-}
-.login-footer-text {
-  font-size: calc(22rpx * var(--font-scale, 1));
-  color: $brand-primary;
-  margin-top: 16rpx;
-  font-weight: 500;
-}
-
 /* ===== 加载占位 ===== */
 /* ===== 加载占位 ===== */
 .loading-container {
 .loading-container {
   display: flex;
   display: flex;
@@ -2617,6 +2651,10 @@ $c-warm-tint:     #FFF3E7;
   font-size: calc(24rpx * var(--font-scale, 1));
   font-size: calc(24rpx * var(--font-scale, 1));
   color: $brand-primary;
   color: $brand-primary;
 }
 }
+/* 查看更多闪烁(不强制改色,仅做透明度闪动) */
+.blink {
+  animation: flickerText 1.4s ease-in-out infinite;
+}
 /* 区块标题右侧计数徽标(家庭任务数) */
 /* 区块标题右侧计数徽标(家庭任务数) */
 .section-header-extra {
 .section-header-extra {
   display: flex;
   display: flex;
@@ -2693,6 +2731,57 @@ $c-warm-tint:     #FFF3E7;
   font-size: calc(22rpx * var(--font-scale, 1));
   font-size: calc(22rpx * var(--font-scale, 1));
   color: $facade-text-muted;
   color: $facade-text-muted;
 }
 }
+
+/* ===== 热门商品列表 ===== */
+.product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+.product-card {
+  background: $app-surface;
+  border-radius: 16rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.product-card:active {
+  opacity: 0.8;
+}
+.product-cover {
+  width: 200rpx;
+  height: 160rpx;
+  flex-shrink: 0;
+  background: $facade-fill;
+}
+.product-info {
+  flex: 1;
+  padding: 16rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.product-name {
+  font-size: calc(28rpx * var(--font-scale, 1));
+  font-weight: bold;
+  color: $facade-text-strong;
+  margin-bottom: 6rpx;
+}
+.product-desc {
+  font-size: calc(22rpx * var(--font-scale, 1));
+  color: $facade-text-muted;
+  margin-bottom: 8rpx;
+}
+.product-bottom {
+  display: flex;
+  align-items: center;
+}
+.product-fee {
+  font-size: calc(22rpx * var(--font-scale, 1));
+  color: $brand-primary;
+  font-weight: 600;
+}
 .activity-bottom {
 .activity-bottom {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
@@ -2737,16 +2826,6 @@ $c-warm-tint:     #FFF3E7;
 .article-card:active {
 .article-card:active {
   opacity: 0.8;
   opacity: 0.8;
 }
 }
-.article-category {
-  display: inline-block;
-  padding: 4rpx 14rpx;
-  border-radius: 8rpx;
-  margin-bottom: 10rpx;
-}
-.article-category-text {
-  font-size: calc(20rpx * var(--font-scale, 1));
-  color: $app-surface;
-}
 .article-title {
 .article-title {
   display: block;
   display: block;
   font-size: calc(28rpx * var(--font-scale, 1));
   font-size: calc(28rpx * var(--font-scale, 1));
@@ -2784,10 +2863,6 @@ $c-warm-tint:     #FFF3E7;
   font-size: calc(22rpx * var(--font-scale, 1));
   font-size: calc(22rpx * var(--font-scale, 1));
   color: $facade-text-muted;
   color: $facade-text-muted;
 }
 }
-.article-date {
-  font-size: calc(22rpx * var(--font-scale, 1));
-  color: $facade-text-ghost-light;
-}
 
 
 /* ===== Splash Loading Overlay(冷启动蒙板,来自 merge splash.vue) ===== */
 /* ===== Splash Loading Overlay(冷启动蒙板,来自 merge splash.vue) ===== */
 .splash-overlay {
 .splash-overlay {