Parcourir la source

redesign: 重构登录前首页与登录页,引入主动健康闭环×五维框架

Sisyphus il y a 2 semaines
Parent
commit
496336a768
2 fichiers modifiés avec 324 ajouts et 194 suppressions
  1. 145 35
      cfc-frontend/pages/index-home/index.vue
  2. 179 159
      cfc-frontend/pages/login/login.vue

+ 145 - 35
cfc-frontend/pages/index-home/index.vue

@@ -226,34 +226,84 @@
     <view class="hero-section">
     <view class="hero-section">
       <image class="hero-logo" src="/static/logo.png" mode="aspectFit" />
       <image class="hero-logo" src="/static/logo.png" mode="aspectFit" />
       <text class="hero-name">浠艾福</text>
       <text class="hero-name">浠艾福</text>
-      <text class="hero-slogan">给全家的一站式幸福提案</text>
+      <text class="hero-slogan">给全家的一站式主动健康方案</text>
       <text class="hero-powered">亿图腾科技出品</text>
       <text class="hero-powered">亿图腾科技出品</text>
 
 
       <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>
     </view>
     </view>
 
 
-    <!-- 价值说明 -->
-    <view class="value-cards">
-      <view class="value-card">
-        <text class="value-card-emoji">📊</text>
-        <text class="value-card-title">五维健康自检</text>
-        <text class="value-card-desc">15 题快速评估全家身·心·智·行·富状态</text>
+    <!-- 主动健康闭环 -->
+    <view class="section">
+      <view class="section-header">
+        <text class="section-title">🔄 主动健康闭环</text>
       </view>
       </view>
-      <view class="value-card">
-        <text class="value-card-emoji">👨‍👩‍👧</text>
-        <text class="value-card-title">家庭成长计划</text>
-        <text class="value-card-desc">为孩子定制每日任务,家长随时跟踪进度</text>
+      <view class="loop-cards">
+        <view class="loop-card">
+          <view class="loop-card-icon loop-icon-indigo"><text>🔍</text></view>
+          <text class="loop-card-name">提前识别</text>
+          <text class="loop-card-desc">AI 多维评估,绘制健康基线</text>
+        </view>
+        <view class="loop-card">
+          <view class="loop-card-icon loop-icon-green"><text>🛡️</text></view>
+          <text class="loop-card-name">风险管控</text>
+          <text class="loop-card-desc">分级管控,不让隐患成问题</text>
+        </view>
+        <view class="loop-card">
+          <view class="loop-card-icon loop-icon-amber"><text>⚡</text></view>
+          <text class="loop-card-name">主动干预</text>
+          <text class="loop-card-desc">任务与能量追踪,融入日常</text>
+        </view>
+        <view class="loop-card">
+          <view class="loop-card-icon loop-icon-red"><text>📊</text></view>
+          <text class="loop-card-name">效果评估</text>
+          <text class="loop-card-desc">档案记录轨迹,数据持续优化</text>
+        </view>
       </view>
       </view>
-      <view class="value-card">
-        <text class="value-card-emoji">🧠</text>
-        <text class="value-card-title">专业心智测评</text>
-        <text class="value-card-desc">预约成长规划师,获取个性化成长建议</text>
+    </view>
+
+    <!-- 五维能量 -->
+    <view class="section">
+      <view class="section-header">
+        <text class="section-title">🌐 五维能量 · 五行相生</text>
+      </view>
+      <view class="dims-cards">
+        <view class="dims-card-row">
+          <view class="dims-card-item">
+            <text class="dims-card-emoji">🌏</text>
+            <text class="dims-card-name">身 · 根基永固</text>
+            <text class="dims-card-desc">精准营养 · 健康报告 · 体质调理</text>
+          </view>
+          <view class="dims-card-item">
+            <text class="dims-card-emoji">⚡</text>
+            <text class="dims-card-name">智 · 赋能未来</text>
+            <text class="dims-card-desc">心智测评 · 素质培养 · 成长档案</text>
+          </view>
+        </view>
+        <view class="dims-card-row">
+          <view class="dims-card-item">
+            <text class="dims-card-emoji">💧</text>
+            <text class="dims-card-name">富 · 利他创富</text>
+            <text class="dims-card-desc">创客生态 · 积分奖励</text>
+          </view>
+          <view class="dims-card-item">
+            <text class="dims-card-emoji">🌿</text>
+            <text class="dims-card-name">行 · 人际和谐</text>
+            <text class="dims-card-desc">亲子关系 · 夫妻情感 · 社交人脉</text>
+          </view>
+        </view>
+        <view class="dims-card-row">
+          <view class="dims-card-item dims-card-item-full">
+            <text class="dims-card-emoji">🔥</text>
+            <text class="dims-card-name">心 · 大爱相随</text>
+            <text class="dims-card-desc">情绪疏导 · 关系心理学</text>
+          </view>
+        </view>
       </view>
       </view>
     </view>
     </view>
 
 
@@ -1365,42 +1415,102 @@ membershipDays: 0,
   white-space: nowrap;
   white-space: nowrap;
 }
 }
 
 
-/* ===== 价值说明卡片 ===== */
-.value-cards {
+/* ===== 主动健康闭环 ===== */
+.loop-cards {
   display: flex;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: 16rpx;
   gap: 16rpx;
-  margin: 24rpx 30rpx;
+  margin: 20rpx 30rpx;
 }
 }
 
 
-.value-card {
+.loop-card {
+  width: 47%;
   background: #fff;
   background: #fff;
   border-radius: 20rpx;
   border-radius: 20rpx;
-  padding: 28rpx 28rpx;
+  padding: 24rpx 20rpx;
+  text-align: center;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+  border: 1rpx solid #F3F4F6;
+}
+
+.loop-card-icon {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 34rpx;
+  margin-bottom: 12rpx;
+}
+
+.loop-icon-indigo { background: rgba(99,102,241,0.15); }
+.loop-icon-green { background: rgba(16,185,129,0.15); }
+.loop-icon-amber { background: rgba(245,158,11,0.15); }
+.loop-icon-red { background: rgba(239,68,68,0.15); }
+
+.loop-card-name {
+  display: block;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #1F2937;
+  margin-bottom: 6rpx;
+}
+
+.loop-card-desc {
+  display: block;
+  font-size: 22rpx;
+  color: #6B7280;
+  line-height: 1.5;
+}
+
+/* ===== 五维能量 ===== */
+.dims-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  margin: 20rpx 30rpx;
+}
+
+.dims-card-row {
   display: flex;
   display: flex;
-  align-items: flex-start;
-  gap: 20rpx;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.dims-card-item {
+  flex: 1;
+  min-width: 280rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx 20rpx;
+  text-align: center;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
-  border: 1rpx solid rgba(249,115,22,0.08);
+  border: 1rpx solid #F3F4F6;
 }
 }
 
 
-.value-card-emoji {
+.dims-card-item-full {
+  flex-basis: 100%;
+}
+
+.dims-card-emoji {
+  display: block;
   font-size: 44rpx;
   font-size: 44rpx;
-  flex-shrink: 0;
-  margin-top: 2rpx;
+  margin-bottom: 10rpx;
 }
 }
 
 
-.value-card-title {
+.dims-card-name {
   display: block;
   display: block;
-  font-size: 30rpx;
+  font-size: 28rpx;
   font-weight: bold;
   font-weight: bold;
   color: #1F2937;
   color: #1F2937;
   margin-bottom: 6rpx;
   margin-bottom: 6rpx;
 }
 }
 
 
-.value-card-desc {
+.dims-card-desc {
   display: block;
   display: block;
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: #6B7280;
   color: #6B7280;
   line-height: 1.5;
   line-height: 1.5;
 }
 }

+ 179 - 159
cfc-frontend/pages/login/login.vue

@@ -4,53 +4,54 @@
     <view class="logo-section">
     <view class="logo-section">
       <image class="logo" src="/static/logo.png" mode="aspectFit" @error="handleImageError"></image>
       <image class="logo" src="/static/logo.png" mode="aspectFit" @error="handleImageError"></image>
       <text class="app-name">浠艾福</text>
       <text class="app-name">浠艾福</text>
-      <text class="slogan">给全家的一站式幸福提案</text>
+      <text class="slogan">给全家的一站式主动健康方案</text>
       <text class="powered">亿图腾科技出品</text>
       <text class="powered">亿图腾科技出品</text>
     </view>
     </view>
 
 
-    <!-- 角色价值说明 -->
-    <view class="value-section">
-      <view class="value-title">你能得到什么</view>
-
-      <!-- 家长端 -->
-      <view class="role-card role-parent">
-        <view class="role-badge">
-          <text class="role-badge-icon">👨‍👩‍👧</text>
-          <text class="role-badge-text">家长</text>
-        </view>
-        <view class="role-items">
-          <view class="role-item"><text class="role-item-icon">📋</text><text class="role-item-text">一键创建家庭成长计划</text></view>
-          <view class="role-item"><text class="role-item-icon">📊</text><text class="role-item-text">跟踪孩子任务完成情况</text></view>
-          <view class="role-item"><text class="role-item-icon">🧠</text><text class="role-item-text">预约专业心智测评</text></view>
-          <view class="role-item"><text class="role-item-icon">🩺</text><text class="role-item-text">健康报告 AI 智能解析</text></view>
-        </view>
+    <!-- 主动健康理念 -->
+    <view class="concept-card">
+      <view class="concept-title">什么是主动健康</view>
+      <view class="concept-desc">
+        不等问题发生,先一步<span class="concept-highlight">识别风险</span>、<span class="concept-highlight">主动干预</span>、<span class="concept-highlight">持续评估</span>——把全家健康管理融入每一天。
       </view>
       </view>
+    </view>
 
 
-      <!-- 孩子端 -->
-      <view class="role-card role-child">
-        <view class="role-badge role-badge-child">
-          <text class="role-badge-icon">👶</text>
-          <text class="role-badge-text">孩子</text>
-        </view>
-        <view class="role-items">
-          <view class="role-item"><text class="role-item-icon">🎯</text><text class="role-item-text">每日趣味任务挑战</text></view>
-          <view class="role-item"><text class="role-item-icon">🏆</text><text class="role-item-text">积分兑换心愿奖励</text></view>
-          <view class="role-item"><text class="role-item-icon">🧩</text><text class="role-item-text">专注力小游戏训练</text></view>
+    <!-- 主动健康闭环 -->
+    <view class="section-block">
+      <view class="section-label">主动健康闭环</view>
+      <view
+        v-for="(step, i) in loopSteps"
+        :key="step.name"
+        class="loop-step-wrap"
+      >
+        <view class="loop-step" :class="step.color">
+          <view class="loop-step-icon"><text>{{ step.icon }}</text></view>
+          <view class="loop-step-text">
+            <text class="loop-step-name">{{ step.name }}</text>
+            <text class="loop-step-desc">{{ step.desc }}</text>
+          </view>
         </view>
         </view>
+        <view v-if="i < loopSteps.length - 1" class="loop-arrow"><text>↓</text></view>
       </view>
       </view>
+      <view class="loop-cycle"><text>🔄 持续优化 · 循环往复,主动健康永不止步</text></view>
     </view>
     </view>
 
 
     <!-- 五维能量 -->
     <!-- 五维能量 -->
-    <view class="wuxing-section">
-      <view class="wuxing-title">五维成长体系</view>
-      <view class="wuxing-tags">
-        <view class="wuxing-tag wuxing-body"><text class="wuxing-emoji">🌏</text>身·健康</view>
-        <view class="wuxing-tag wuxing-mind"><text class="wuxing-emoji">🔥</text>心·情绪</view>
-        <view class="wuxing-tag wuxing-wisdom"><text class="wuxing-emoji">⚡</text>智·赋能</view>
-        <view class="wuxing-tag wuxing-action"><text class="wuxing-emoji">🌿</text>行·习惯</view>
-        <view class="wuxing-tag wuxing-wealth"><text class="wuxing-emoji">💧</text>富·财商</view>
+    <view class="section-block">
+      <view class="section-label">五维能量 · 五行相生</view>
+      <view class="dims-card">
+        <view
+          v-for="dim in dimensions"
+          :key="dim.name"
+          class="dim-item"
+        >
+          <view class="dim-item-icon" :class="dim.color"><text>{{ dim.emoji }}</text></view>
+          <view class="dim-item-text">
+            <text class="dim-item-name">{{ dim.name }} · {{ dim.tag }}</text>
+            <text class="dim-item-desc">{{ dim.desc }}</text>
+          </view>
+        </view>
       </view>
       </view>
-      <text class="wuxing-desc">五行平衡 · 全面评估全家健康状态</text>
     </view>
     </view>
 
 
     <!-- 登录表单 -->
     <!-- 登录表单 -->
@@ -87,7 +88,7 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import { wechatPhoneLogin, checkTeamInviteStatus, joinTeamByInvite, bindReferral, bindFamilyInviter } from '../../utils/api.js'
+import { wechatPhoneLogin, checkTeamInviteStatus, joinTeamByInvite, bindReferral } from '../../utils/api.js'
 
 
 export default {
 export default {
   data() {
   data() {
@@ -96,24 +97,28 @@ export default {
       agreed: false,
       agreed: false,
       nickname: '',
       nickname: '',
       avatar: '',
       avatar: '',
-      redirectUrl: ''
+      redirectUrl: '',
+      loopSteps: [
+        { icon: '🔍', name: '提前识别', desc: 'AI 多维评估,绘制健康基线', color: 'loop-indigo' },
+        { icon: '🛡️', name: '风险管控', desc: '分级管控,不让隐患成问题', color: 'loop-green' },
+        { icon: '⚡', name: '主动干预', desc: '任务与能量追踪,融入日常', color: 'loop-amber' },
+        { icon: '📊', name: '效果评估', desc: '档案记录轨迹,数据持续优化', color: 'loop-red' }
+      ],
+      dimensions: [
+        { emoji: '🌏', name: '身', tag: '根基永固', desc: '精准营养 · 健康报告 · 体质调理', color: 'dim-body' },
+        { emoji: '⚡', name: '智', tag: '赋能未来', desc: '心智测评 · 素质培养 · 成长档案', color: 'dim-wisdom' },
+        { emoji: '💧', name: '富', tag: '利他创富', desc: '创客生态 · 积分奖励', color: 'dim-wealth' },
+        { emoji: '🌿', name: '行', tag: '人际和谐', desc: '亲子关系 · 夫妻情感 · 社交人脉', color: 'dim-action' },
+        { emoji: '🔥', name: '心', tag: '大爱相随', desc: '情绪疏导 · 关系心理学', color: 'dim-mind' }
+      ]
     }
     }
   },
   },
   onLoad(options) {
   onLoad(options) {
-      options = options || {}
-      // 处理家庭邀请码(新流程:仅首次注册时绑定邀请人)
-      if (options.familyInviteCode) {
-        uni.setStorageSync('pendingFamilyInviteCode', options.familyInviteCode)
-      }
-      // 兼容旧邀请码参数
+      // 处理邀请码
       if (options.inviteCode) {
       if (options.inviteCode) {
         uni.setStorageSync('inviteCode', options.inviteCode)
         uni.setStorageSync('inviteCode', options.inviteCode)
         uni.setStorageSync('inviteType', options.inviteType || 'family')
         uni.setStorageSync('inviteType', options.inviteType || 'family')
       }
       }
-      // 推广码
-      if (options.refCode) {
-        uni.setStorageSync('pendingRefCode', options.refCode)
-      }
       // 存储登录后跳转地址
       // 存储登录后跳转地址
       if (options.redirect) {
       if (options.redirect) {
         this.redirectUrl = decodeURIComponent(options.redirect)
         this.redirectUrl = decodeURIComponent(options.redirect)
@@ -193,50 +198,12 @@ export default {
       self.$store.commit('setFamilyId', data.familyId)
       self.$store.commit('setFamilyId', data.familyId)
       uni.showToast({ title: '登录成功', icon: 'success' })
       uni.showToast({ title: '登录成功', icon: 'success' })
       self.loading = false
       self.loading = false
-
-      // 判断是否首次注册(后端返回 needsRoleSelect 或无 familyId)
-      var isNewUser = data.needsRoleSelect === true || !data.familyId
-
-      // 处理家庭邀请码(仅首次注册时绑定邀请人)
-      var familyInviteCode = uni.getStorageSync('pendingFamilyInviteCode')
-      if (familyInviteCode && isNewUser) {
-        // 新用户注册:绑定家庭邀请人
-        self.bindFamilyInviter(familyInviteCode).then(function() {
-          uni.removeStorageSync('pendingFamilyInviteCode')
-          self.handlePostLoginRouting()
-        }).catch(function() {
-          uni.removeStorageSync('pendingFamilyInviteCode')
-          self.handlePostLoginRouting()
-        })
-        return
-      }
-
-      // 非新用户或无家庭邀请码,清理存储并走原有流程
-      if (familyInviteCode) {
-        uni.removeStorageSync('pendingFamilyInviteCode')
-      }
-      
       if (data.needsRoleSelect) {
       if (data.needsRoleSelect) {
         uni.redirectTo({ url: '/pages/user-edit/user-edit?token=' + data.token + '&userId=' + data.userId + '&autoParent=true' })
         uni.redirectTo({ url: '/pages/user-edit/user-edit?token=' + data.token + '&userId=' + data.userId + '&autoParent=true' })
       } else {
       } else {
         self.handlePostLoginRouting()
         self.handlePostLoginRouting()
       }
       }
     },
     },
-
-    // 绑定家庭邀请人(首次注册调用)
-    bindFamilyInviter: function(code) {
-      var self = this
-      return bindFamilyInviter(code).then(function(res) {
-        if (res && res.code === 200) {
-          console.log('首次注册绑定家庭邀请人成功', code)
-          uni.showToast({ title: '已关联邀请家庭', icon: 'success' })
-        } else if (res && res.code === 400) {
-          console.log('已有邀请人,跳过绑定')
-        }
-      }).catch(function(e) {
-        console.log('绑定家庭邀请人失败', e)
-      })
-    },
     handlePostLoginRouting() {
     handlePostLoginRouting() {
       const inviteCode = uni.getStorageSync('inviteCode')
       const inviteCode = uni.getStorageSync('inviteCode')
       const inviteType = uni.getStorageSync('inviteType')
       const inviteType = uni.getStorageSync('inviteType')
@@ -343,7 +310,7 @@ export default {
 <style scoped>
 <style scoped>
 .login-container {
 .login-container {
   min-height: 100vh;
   min-height: 100vh;
-  background: linear-gradient(160deg, #FFF7ED 0%, #FED7AA 60%, #F97316 100%);
+  background: linear-gradient(160deg, #FFF7ED 0%, #FED7AA 55%, #FB923C 100%);
   padding: 48rpx 40rpx 40rpx;
   padding: 48rpx 40rpx 40rpx;
 }
 }
 
 
@@ -373,7 +340,7 @@ export default {
 .slogan {
 .slogan {
   display: block;
   display: block;
   font-size: 26rpx;
   font-size: 26rpx;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.88);
   margin-top: 8rpx;
   margin-top: 8rpx;
 }
 }
 
 
@@ -384,12 +351,41 @@ export default {
   margin-top: 12rpx;
   margin-top: 12rpx;
 }
 }
 
 
-/* ===== 角色价值说明 ===== */
-.value-section {
-  margin-bottom: 32rpx;
+/* ===== 主动健康理念 ===== */
+.concept-card {
+  background: rgba(255, 255, 255, 0.22);
+  border: 1rpx solid rgba(255, 255, 255, 0.35);
+  border-radius: 20rpx;
+  padding: 28rpx 32rpx;
+  margin-bottom: 36rpx;
+}
+
+.concept-title {
+  display: block;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 12rpx;
+}
+
+.concept-desc {
+  font-size: 25rpx;
+  color: rgba(255, 255, 255, 0.92);
+  line-height: 1.7;
 }
 }
 
 
-.value-title {
+.concept-highlight {
+  color: #FFD700;
+  font-weight: 600;
+}
+
+/* ===== 章节块 ===== */
+.section-block {
+  margin-bottom: 36rpx;
+}
+
+.section-label {
+  display: block;
   font-size: 28rpx;
   font-size: 28rpx;
   font-weight: 600;
   font-weight: 600;
   color: #fff;
   color: #fff;
@@ -397,107 +393,131 @@ export default {
   padding-left: 4rpx;
   padding-left: 4rpx;
 }
 }
 
 
-.role-card {
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 20rpx;
-  padding: 24rpx 28rpx;
-  margin-bottom: 16rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
+/* ===== 主动健康闭环 ===== */
+.loop-step-wrap {
+  margin-bottom: 6rpx;
 }
 }
 
 
-.role-badge {
-  display: inline-flex;
+.loop-step {
+  display: flex;
   align-items: center;
   align-items: center;
-  gap: 8rpx;
-  background: linear-gradient(135deg, #FF8C42, #FF6B2D);
-  border-radius: 30rpx;
-  padding: 8rpx 20rpx;
-  margin-bottom: 20rpx;
+  gap: 20rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 22rpx 26rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+  border-left: 6rpx solid #6366F1;
 }
 }
 
 
-.role-badge-child {
-  background: linear-gradient(135deg, #FF6B9D, #FF3D7F);
-}
+.loop-indigo { border-left-color: #6366F1; }
+.loop-green { border-left-color: #10B981; }
+.loop-amber { border-left-color: #F59E0B; }
+.loop-red { border-left-color: #EF4444; }
 
 
-.role-badge-icon {
-  font-size: 28rpx;
+.loop-step-icon {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  flex-shrink: 0;
 }
 }
 
 
-.role-badge-text {
-  font-size: 26rpx;
-  font-weight: 600;
-  color: #fff;
-}
+.loop-indigo .loop-step-icon { background: rgba(99,102,241,0.12); }
+.loop-green .loop-step-icon { background: rgba(16,185,129,0.12); }
+.loop-amber .loop-step-icon { background: rgba(245,158,11,0.12); }
+.loop-red .loop-step-icon { background: rgba(239,68,68,0.12); }
 
 
-.role-items {
+.loop-step-text {
+  flex: 1;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
-  gap: 14rpx;
+  min-width: 0;
 }
 }
 
 
-.role-item {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
+.loop-step-name {
+  font-size: 29rpx;
+  font-weight: bold;
+  color: #1F2937;
+  margin-bottom: 4rpx;
 }
 }
 
 
-.role-item-icon {
+.loop-step-desc {
+  font-size: 23rpx;
+  color: #6B7280;
+  line-height: 1.5;
+}
+
+.loop-arrow {
+  text-align: center;
+  padding: 8rpx 0;
   font-size: 28rpx;
   font-size: 28rpx;
-  flex-shrink: 0;
+  color: rgba(255,255,255,0.75);
 }
 }
 
 
-.role-item-text {
-  font-size: 26rpx;
-  color: #374151;
-  line-height: 1.5;
+.loop-cycle {
+  text-align: center;
+  margin-top: 18rpx;
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.85);
 }
 }
 
 
 /* ===== 五维能量 ===== */
 /* ===== 五维能量 ===== */
-.wuxing-section {
-  background: rgba(255, 255, 255, 0.92);
+.dims-card {
+  background: #fff;
   border-radius: 20rpx;
   border-radius: 20rpx;
   padding: 28rpx;
   padding: 28rpx;
-  margin-bottom: 32rpx;
-  text-align: center;
-  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
+  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
 }
 }
 
 
-.wuxing-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1F2937;
-  margin-bottom: 20rpx;
+.dim-item {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 12rpx 0;
+}
+
+.dim-item + .dim-item {
+  border-top: 1rpx solid #F3F4F6;
 }
 }
 
 
-.wuxing-tags {
+.dim-item-icon {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 16rpx;
   display: flex;
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
   justify-content: center;
   justify-content: center;
-  gap: 12rpx;
-  margin-bottom: 16rpx;
+  font-size: 34rpx;
+  flex-shrink: 0;
 }
 }
 
 
-.wuxing-tag {
-  font-size: 24rpx;
-  padding: 10rpx 20rpx;
-  border-radius: 30rpx;
-  color: #fff;
-  font-weight: 500;
-}
+.dim-body .dim-item-icon { background: rgba(255,140,66,0.15); }
+.dim-wisdom .dim-item-icon { background: rgba(99,102,241,0.15); }
+.dim-wealth .dim-item-icon { background: rgba(245,158,11,0.15); }
+.dim-action .dim-item-icon { background: rgba(16,185,129,0.15); }
+.dim-mind .dim-item-icon { background: rgba(255,107,157,0.15); }
 
 
-.wuxing-body { background: rgba(255, 140, 66, 0.85); }
-.wuxing-mind { background: rgba(255, 107, 157, 0.85); }
-.wuxing-wisdom { background: rgba(99, 102, 241, 0.85); }
-.wuxing-action { background: rgba(16, 185, 129, 0.85); }
-.wuxing-wealth { background: rgba(245, 158, 11, 0.85); }
+.dim-item-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
 
 
-.wuxing-emoji {
-  margin-right: 4rpx;
+.dim-item-name {
+  font-size: 29rpx;
+  font-weight: bold;
+  color: #1F2937;
+  margin-bottom: 4rpx;
 }
 }
 
 
-.wuxing-desc {
-  font-size: 22rpx;
-  color: #9CA3AF;
+.dim-item-desc {
+  font-size: 23rpx;
+  color: #6B7280;
+  line-height: 1.5;
 }
 }
 
 
 /* ===== 登录表单 ===== */
 /* ===== 登录表单 ===== */
@@ -570,4 +590,4 @@ export default {
   color: #5B9BD5;
   color: #5B9BD5;
   text-decoration: underline;
   text-decoration: underline;
 }
 }
-</style>
+</style>