Răsfoiți Sursa

refactor(web): Phase 1 企业级 UI 统一 + 修复非表格页表单被裁切无滚动条

UI 统一(Ant Design 5 设计令牌):
- 全局清扫旧品牌紫 #6366F1/#8B5CF6/#818CF8/#A78BFA -> 品牌蓝 #1677FF/#4096FF
- Dashboard/Login 移除装饰性渐变与 emoji,改为扁平 token 语义色
- Login 品牌面板 ::before 微弱径向光晕改为纯平占位层
- MembershipCenter .stat-purple 卡片由紫改品牌蓝
- Layout 侧栏菜单激活色 #6366F1 -> #1677FF

修复:
- admin-tokens: 卡片弹性撑满链仅在含 .adm-table-wrap(表格页)时生效;
  非表格页(表单/编辑/详情)恢复自然高度,由外层 .el-main 统一整体滚动。
  修复商品编辑(ProductEdit)等长表单页内容被容器裁切且无滚动条、
  下半部分无法编辑的问题(该类页根为 .admin-page 且不含表格)。
liaoxg 1 săptămână în urmă
părinte
comite
a51bb86825

+ 1 - 1
cfc-web/src/components/DimensionWeightPicker.vue

@@ -54,7 +54,7 @@ export default {
     return {
       dimensions: [
         { code: 'body', name: '身·土', color: '#FF8C42', currentValue: 20 },
-        { code: 'wisdom', name: '智·金', color: '#6366F1', currentValue: 20 },
+        { code: 'wisdom', name: '智·金', color: '#1677FF', currentValue: 20 },
         { code: 'action', name: '行·木', color: '#10B981', currentValue: 20 },
         { code: 'wealth', name: '富·水', color: '#F59E0B', currentValue: 20 },
         { code: 'mind', name: '心·火', color: '#FF6B9D', currentValue: 20 }

+ 51 - 0
cfc-web/src/styles/admin-tokens.css

@@ -667,3 +667,54 @@
   flex: 1 1 auto;
   min-height: 0;
 }
+
+/* ==== 非表格页(表单/编辑/详情)滚动修复 ==== */
+/* 背景:Layout.vue 与上文 blanket 规则无差别强制 .admin-page / .el-card / .el-card__body
+   进入 flex:1 + min-height:0 撑满链(本意是让列表页「只有表格内部滚动」)。
+   副作用:无表格的长表单页(如商品编辑 ProductEdit)内容被容器裁切且没有滚动条,
+   下半部分无法编辑。
+   修复:仅当页面内存在 .adm-table-wrap 时才进入撑满链;否则页面与卡片恢复自然高度,
+   由外层 .el-main(overflow-y:auto)统一整体滚动。 */
+.admin-page:not(:has(.adm-table-wrap)),
+.page-container:not(:has(.adm-table-wrap)) {
+  flex: 0 0 auto;
+  display: block;
+  min-height: calc(100vh - 60px);
+}
+.admin-page:not(:has(.adm-table-wrap)) > .el-card,
+.page-container:not(:has(.adm-table-wrap)) > .el-card,
+.admin-page:not(:has(.adm-table-wrap)) > div:only-child > .el-card,
+.page-container:not(:has(.adm-table-wrap)) > div:only-child > .el-card {
+  flex: 0 0 auto;
+  display: block;
+  min-height: 0;
+}
+.admin-page:not(:has(.adm-table-wrap)) > .el-card .el-card__body,
+.page-container:not(:has(.adm-table-wrap)) > .el-card .el-card__body,
+.admin-page:not(:has(.adm-table-wrap)) > div:only-child > .el-card .el-card__body,
+.page-container:not(:has(.adm-table-wrap)) > div:only-child > .el-card .el-card__body {
+  flex: 0 0 auto;
+  display: block;
+  min-height: 0;
+  padding: 20px;
+}
+/* 任意层级卡片:非表格页一律不得被撑满链强制拉伸 */
+.admin-page:not(:has(.adm-table-wrap)) .el-card.el-card,
+.page-container:not(:has(.adm-table-wrap)) .el-card.el-card {
+  flex: 0 0 auto;
+  display: block;
+  min-height: 0;
+}
+.admin-page:not(:has(.adm-table-wrap)) .el-card__body.el-card__body,
+.page-container:not(:has(.adm-table-wrap)) .el-card__body.el-card__body {
+  flex: 0 0 auto;
+  display: block;
+  min-height: 0;
+}
+/* 非表格页的标签页容器恢复自然高度(tab 内若含表格则 :has 为真,不受本条影响) */
+.admin-page:not(:has(.adm-table-wrap)) .el-tabs,
+.page-container:not(:has(.adm-table-wrap)) .el-tabs {
+  flex: 0 0 auto;
+  display: block;
+  min-height: 0;
+}

+ 66 - 65
cfc-web/src/views/Dashboard.vue

@@ -4,17 +4,16 @@
       <!-- 欢迎区域 -->
       <div class="welcome-banner">
         <div class="welcome-content">
-          <h1 class="welcome-title">欢迎回来!👋</h1>
+          <h1 class="welcome-title">欢迎回来!</h1>
           <p class="welcome-desc">今天是 {{ todayDate }},来看看今天的运营数据吧</p>
         </div>
-        <div class="welcome-illustration">📊</div>
-      </div>
+        </div>
 
 <!-- 统计卡片 -->
 <el-row :gutter="20" class="stats-row">
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card" shadow="hover">
-      <div class="stat-icon" style="background: linear-gradient(135deg, #FF8C42, #FFA66B);">
+    <el-card class="stat-card" shadow="never">
+      <div class="stat-icon" style="background: #FFFBE6; color: #D48806;">
         <i class="el-icon-s-home"></i>
       </div>
       <div class="stat-info">
@@ -24,8 +23,8 @@
     </el-card>
   </el-col>
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card" shadow="hover">
-      <div class="stat-icon" style="background: linear-gradient(135deg, #6366F1, #818CF8);">
+    <el-card class="stat-card" shadow="never">
+      <div class="stat-icon" style="background: #E6F4FF; color: #1677FF;">
         <i class="el-icon-user"></i>
       </div>
       <div class="stat-info">
@@ -35,8 +34,8 @@
     </el-card>
   </el-col>
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card" shadow="hover">
-      <div class="stat-icon" style="background: linear-gradient(135deg, #F59E0B, #FBBF24);">
+    <el-card class="stat-card" shadow="never">
+      <div class="stat-icon" style="background: #FFFBE6; color: #D48806;">
         <i class="el-icon-s-custom"></i>
       </div>
       <div class="stat-info">
@@ -46,8 +45,8 @@
     </el-card>
   </el-col>
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card" shadow="hover">
-      <div class="stat-icon" style="background: linear-gradient(135deg, #10B981, #34D399);">
+    <el-card class="stat-card" shadow="never">
+      <div class="stat-icon" style="background: #F6FFED; color: #389E0D;">
         <i class="el-icon-s-cooperation"></i>
       </div>
       <div class="stat-info">
@@ -61,7 +60,7 @@
 <!-- 第二行统计卡片 -->
 <el-row :gutter="20" class="stats-row">
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card todo-stat-card" shadow="hover" @click.native="stats.pendingGuideCount > 0 && $router.push('/review-center?tab=guide')">
+    <el-card class="stat-card todo-stat-card" shadow="never" @click.native="stats.pendingGuideCount > 0 && $router.push('/review-center?tab=guide')">
       <div class="stat-icon" :class="stats.pendingGuideCount > 0 ? 'todo-heart' : 'todo-disabled'">
         <i class="el-icon-s-check"></i>
       </div>
@@ -75,7 +74,7 @@
     </el-card>
   </el-col>
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card todo-stat-card" shadow="hover" @click.native="stats.pendingPackageCount > 0 && $router.push('/review-center?tab=package')">
+    <el-card class="stat-card todo-stat-card" shadow="never" @click.native="stats.pendingPackageCount > 0 && $router.push('/review-center?tab=package')">
       <div class="stat-icon" :class="stats.pendingPackageCount > 0 ? 'todo-danger' : 'todo-disabled'">
         <i class="el-icon-s-goods"></i>
       </div>
@@ -89,8 +88,8 @@
     </el-card>
   </el-col>
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card" shadow="hover">
-      <div class="stat-icon" style="background: linear-gradient(135deg, #0EA5E9, #38BDF8);">
+    <el-card class="stat-card" shadow="never">
+      <div class="stat-icon" style="background: #E6F4FF; color: #1677FF;">
         <i class="el-icon-user-solid"></i>
       </div>
       <div class="stat-info">
@@ -100,8 +99,8 @@
     </el-card>
   </el-col>
   <el-col :xs="12" :sm="12" :md="6">
-    <el-card class="stat-card" shadow="hover">
-      <div class="stat-icon" style="background: linear-gradient(135deg, #8B5CF6, #A78BFA);">
+    <el-card class="stat-card" shadow="never">
+      <div class="stat-icon" style="background: #E6F4FF; color: #1677FF;">
         <i class="el-icon-s-home"></i>
       </div>
       <div class="stat-info">
@@ -117,7 +116,7 @@
   <el-col :span="16">
     <el-card class="chart-card" v-loading="trendLoading">
       <div slot="header" class="card-header">
-        <span class="card-title">📈 用户与家庭增长趋势(近30天)</span>
+        <span class="card-title"> 用户与家庭增长趋势(近30天)</span>
       </div>
       <div ref="trendChart" class="echarts-container"></div>
     </el-card>
@@ -125,7 +124,7 @@
   <el-col :span="8">
     <el-card class="chart-card" v-loading="memberLoading">
       <div slot="header" class="card-header">
-        <span class="card-title">🍩 会员等级分布</span>
+        <span class="card-title"> 会员等级分布</span>
       </div>
       <div ref="memberPieChart" class="echarts-container"></div>
     </el-card>
@@ -135,9 +134,9 @@
 <!-- 内容区域 -->
       <el-row :gutter="20" class="content-row">
         <el-col :span="14">
-          <el-card class="content-card" shadow="hover">
+          <el-card class="content-card" shadow="never">
             <div slot="header" class="card-header">
-              <span class="card-title">📋 最近任务</span>
+              <span class="card-title"> 最近任务</span>
               <el-button type="text" size="small" @click="$router.push('/tasks')">
                 查看全部 →
               </el-button>
@@ -168,9 +167,9 @@
         </el-col>
 
 <el-col :span="10">
-<el-card class="content-card system-health-card" shadow="hover">
+<el-card class="content-card system-health-card" shadow="never">
 <div slot="header" class="card-header">
-  <span class="card-title">⚙️ 系统状态</span>
+  <span class="card-title"> 系统状态</span>
   <el-tag size="mini" type="success">正常运行</el-tag>
 </div>
 <div class="health-grid">
@@ -604,14 +603,15 @@ initMemberPieChart() {
 
 /* 欢迎横幅 */
 .welcome-banner {
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
-  border-radius: 16px;
-  padding: 32px;
+  background: #E6F4FF; color: #1677FF;
+  border-radius: 8px;
+  padding: 24px 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
-  color: #FFFFFF;
+  color: #1E293B;
+  border: 1px solid #E6F4FF;
 }
 
 .welcome-title {
@@ -622,7 +622,7 @@ initMemberPieChart() {
 
 .welcome-desc {
   font-size: 16px;
-  opacity: 0.9;
+  color: rgba(0,0,0,0.65);
   margin: 0;
 }
 
@@ -636,8 +636,8 @@ initMemberPieChart() {
 }
 
 .stat-card {
-  border-radius: 12px;
-  border: none;
+  border-radius: 8px;
+  border: 1px solid #F0F0F0;
 }
 
 .stat-card ::v-deep .el-card__body {
@@ -659,24 +659,25 @@ initMemberPieChart() {
 .stat-icon {
   width: 56px;
   height: 56px;
-  border-radius: 12px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
-  color: #fff;
+  color: #1677FF;
+  background: #E6F4FF;
   margin-right: 16px;
   flex-shrink: 0;
 }
 
-.stat-icon.blue { background: linear-gradient(135deg, #6366F1, #818CF8); }
-.stat-icon.green { background: linear-gradient(135deg, #10B981, #34D399); }
-.stat-icon.orange { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
-.stat-icon.purple { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
-.stat-icon.todo-warning { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
-.stat-icon.todo-heart { background: linear-gradient(135deg, #FF6B9D, #FF8FB3); }
-.stat-icon.todo-danger { background: linear-gradient(135deg, #EF4444, #F87171); }
-.stat-icon.todo-disabled { background: linear-gradient(135deg, #CBD5E1, #94A3B8); }
+.stat-icon.blue { background:#E6F4FF; color:#1677FF; }
+.stat-icon.green { background: #F6FFED; color: #389E0D; }
+.stat-icon.orange { background: #FFFBE6; color: #D48806; }
+.stat-icon.purple { background:#E6F4FF; color:#1677FF; }
+.stat-icon.todo-warning { background: #FFFBE6; color: #D48806; }
+.stat-icon.todo-heart { background: #FFF1F0; color: #CF1322; }
+.stat-icon.todo-danger { background: #FFF1F0; color: #CF1322; }
+.stat-icon.todo-disabled { background: #F5F5F5; color: rgba(0,0,0,0.45); }
 
 .stat-value {
   font-size: 28px;
@@ -693,7 +694,7 @@ initMemberPieChart() {
 
 .stat-trend {
   font-size: 12px;
-  color: #6366F1;
+  color: #1677FF;
   margin-top: 8px;
 }
 
@@ -707,8 +708,8 @@ initMemberPieChart() {
 }
 
 .content-card {
-  border-radius: 12px;
-  border: none;
+  border-radius: 8px;
+  border: 1px solid #F0F0F0;
   margin-bottom: 20px;
 }
 
@@ -738,8 +739,8 @@ initMemberPieChart() {
 
 /* 系统健康面板 */
 .system-health-card {
-  border-radius: 12px;
-  border: none;
+  border-radius: 8px;
+  border: 1px solid #F0F0F0;
 }
 
 .health-grid {
@@ -768,31 +769,31 @@ initMemberPieChart() {
 }
 
 .health-icon--status {
-  background: linear-gradient(135deg, #10B981, #059669);
+  background: #F6FFED; color: #389E0D;
 }
 
 .health-icon--version {
-  background: linear-gradient(135deg, #6366F1, #4F46E5);
+  background: #E6F4FF; color: #1677FF;
 }
 
 .health-icon--time {
-  background: linear-gradient(135deg, #F59E0B, #D97706);
+  background: #FFFBE6; color: #D48806;
 }
 
 .health-icon--api {
-  background: linear-gradient(135deg, #0EA5E9, #0284C7);
+  background: #E6F4FF; color: #1677FF;
 }
 
 .health-icon--uptime {
-  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
+  background: #E6F4FF; color: #1677FF;
 }
 
 .health-icon--cpu {
-  background: linear-gradient(135deg, #EF4444, #F87171);
+  background: #FFF1F0; color: #CF1322;
 }
 
 .health-icon--memory {
-  background: linear-gradient(135deg, #10B981, #059669);
+  background: #F6FFED; color: #389E0D;
 }
 
 .health-info {
@@ -849,7 +850,7 @@ initMemberPieChart() {
 
 .quick-item i {
   font-size: 24px;
-  color: #6366F1;
+  color: #1677FF;
   margin-bottom: 8px;
 }
 
@@ -908,35 +909,35 @@ initMemberPieChart() {
 }
 
 .action-icon--primary {
-  background: linear-gradient(135deg, #FF8C42, #FF6B35);
+  background: #FFFBE6; color: #D48806;
 }
 
 .action-icon--family {
-  background: linear-gradient(135deg, #6366F1, #4F46E5);
+  background: #E6F4FF; color: #1677FF;
 }
 
 .action-icon--guide {
-  background: linear-gradient(135deg, #F59E0B, #D97706);
+  background: #FFFBE6; color: #D48806;
 }
 
 .action-icon--package {
-  background: linear-gradient(135deg, #10B981, #059669);
+  background: #F6FFED; color: #389E0D;
 }
 
 .action-icon--reward {
-  background: linear-gradient(135deg, #FF6B9D, #E11D48);
+  background: #FFF1F0; color: #CF1322;
 }
 
 .action-icon--user {
-  background: linear-gradient(135deg, #0EA5E9, #0284C7);
+  background: #E6F4FF; color: #1677FF;
 }
 
 .action-icon--audit {
-  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
+  background: #E6F4FF; color: #1677FF;
 }
 
 .action-icon--settings {
-  background: linear-gradient(135deg, #6B7280, #4B5563);
+  background: #F5F5F5; color: rgba(0,0,0,0.45);
 }
 
 .action-label {
@@ -950,8 +951,8 @@ initMemberPieChart() {
   margin-bottom: 24px;
 }
 .chart-card {
-  border-radius: 12px;
-  border: none;
+  border-radius: 8px;
+  border: 1px solid #F0F0F0;
   min-height: 320px;
 }
 .echarts-container {
@@ -982,7 +983,7 @@ initMemberPieChart() {
   font-weight: 600;
   margin: 14px 0 6px;
   color: #1E293B;
-  border-left: 3px solid #6366F1;
+  border-left: 3px solid #1677FF;
   padding-left: 8px;
 }
 .changelog-body h3 {
@@ -1024,7 +1025,7 @@ initMemberPieChart() {
   padding: 0;
 }
 .changelog-body a {
-  color: #6366F1;
+  color: #1677FF;
   text-decoration: none;
 }
 .changelog-body a:hover {

+ 4 - 4
cfc-web/src/views/Layout.vue

@@ -15,7 +15,7 @@
           class="sidebar-menu"
           background-color="transparent"
           text-color="#64748B"
-          active-text-color="#6366F1"
+          active-text-color="#1677FF"
           @select="handleMenuSelect"
         >
 <template v-for="item in effectiveMenuItems">
@@ -757,7 +757,7 @@ export default {
 }
 
 .invite-code-btn {
-  color: #6366F1;
+  color: #1677FF;
   font-size: 13px;
 }
 .invite-code-btn:hover {
@@ -777,7 +777,7 @@ export default {
   padding: 4px;
 }
 .msg-btn:hover {
-  color: #6366F1;
+  color: #1677FF;
 }
 
 .invite-code-content {
@@ -929,7 +929,7 @@ export default {
     padding: 8px;
   }
   .hamburger-btn:hover {
-    color: #6366F1;
+    color: #1677FF;
   }
 
   .el-header {

+ 19 - 35
cfc-web/src/views/Login.vue

@@ -50,27 +50,27 @@
             <!-- 五维节点 (CSS 公转,72°等分) -->
             <!-- 身(橙) 0° -->
             <div class="orbit-node" style="--node-color:#FF8C42; --orbit-angle:0deg; --orbit-delay:0s;">
-              <span class="node-icon">🌏</span>
+              <span class="node-icon"></span>
               <span class="node-label">身</span>
             </div>
             <!-- 智(紫) 72° -->
-            <div class="orbit-node" style="--node-color:#6366F1; --orbit-angle:72deg; --orbit-delay:-3s;">
-              <span class="node-icon">⚔️</span>
+            <div class="orbit-node" style="--node-color:#1677FF; --orbit-angle:72deg; --orbit-delay:-3s;">
+              <span class="node-icon"></span>
               <span class="node-label">智</span>
             </div>
             <!-- 富(金) 144° -->
             <div class="orbit-node" style="--node-color:#F59E0B; --orbit-angle:144deg; --orbit-delay:-6s;">
-              <span class="node-icon">💧</span>
+              <span class="node-icon"></span>
               <span class="node-label">富</span>
             </div>
             <!-- 行(绿) 216° -->
             <div class="orbit-node" style="--node-color:#10B981; --orbit-angle:216deg; --orbit-delay:-9s;">
-              <span class="node-icon">🌿</span>
+              <span class="node-icon"></span>
               <span class="node-label">行</span>
             </div>
             <!-- 心(粉) 288° -->
             <div class="orbit-node" style="--node-color:#FF6B9D; --orbit-angle:288deg; --orbit-delay:-12s;">
-              <span class="node-icon">🔥</span>
+              <span class="node-icon"></span>
               <span class="node-label">心</span>
             </div>
 
@@ -111,7 +111,7 @@
             </div>
           </div>
           <div class="role-tags">
-            <span class="role-tag" style="border-color:#6366F1;color:#818CF8">家庭客户</span>
+            <span class="role-tag" style="border-color:#1677FF;color:#4096FF">家庭客户</span>
             <span class="role-tag" style="border-color:#FF6B9D;color:#FF8CB3">服务商</span>
             <span class="role-tag" style="border-color:#10B981;color:#34D399">平台运营</span>
           </div>
@@ -365,7 +365,7 @@ export default {
 /* ============================================================
    登录页面 — 亿图腾 · 浠艾福 (Care Family)
    五维能量轮盘设计 · 2026-07-02 重新设计
-   品牌色: 身#FF8C42 / 智#6366F1 / 富#F59E0B / 行#10B981 / 心#FF6B9D
+   品牌色: 身#FF8C42 / 智#1677FF / 富#F59E0B / 行#10B981 / 心#FF6B9D
    ============================================================ */
 
 .login-page {
@@ -389,23 +389,16 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(160deg,
-    #1A0F00 0%,
-    #2D1810 30%,
-    #3D2B1F 60%,
-    #4A3020 100%);
+  background: #2B2018;
   overflow: hidden;
 }
 
-/* 背景纹理 — 暖金粒子光晕 */
+/* 背景占位层(纯平,无装饰渐变) */
 .brand-panel::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
-  background:
-    radial-gradient(ellipse 100% 40% at 50% 30%, rgba(255, 215, 0, 0.04) 0%, transparent 70%),
-    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(255, 140, 66, 0.05) 0%, transparent 70%),
-    radial-gradient(circle 50% 50% at 20% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 60%);
+  background: transparent;
   pointer-events: none;
   z-index: 0;
 }
@@ -452,10 +445,7 @@ export default {
   font-weight: 700;
   letter-spacing: 4px;
   line-height: 1.3;
-  background: linear-gradient(135deg, #FFE066 0%, #F59E0B 50%, #FFE066 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #F59E0B;
 }
 
 .brand-dot {
@@ -544,7 +534,7 @@ export default {
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FFD700, #F59E0B);
+  background: #F59E0B;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -650,10 +640,7 @@ export default {
 }
 
 .mission-title .highlight {
-  background: linear-gradient(135deg, #FF8C42, #F59E0B);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #F59E0B;
 }
 
 .mission-desc {
@@ -689,10 +676,7 @@ export default {
 .stat-num {
   font-size: 22px;
   font-weight: 700;
-  background: linear-gradient(135deg, #FFE066, #F59E0B);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #F59E0B;
   line-height: 1.2;
 }
 
@@ -767,7 +751,7 @@ export default {
   width: 52px;
   height: 52px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #E8F4FA 0%, #D6EAF8 100%);
+  background: #E8F4FA;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -853,14 +837,14 @@ export default {
   font-weight: 500;
   letter-spacing: 6px;
   border-radius: 10px;
-  background: linear-gradient(135deg, #4A9BD7, #3A7CC4);
+  background: #1677FF;
   border: none;
   transition: all 0.3s;
   font-family: inherit;
 }
 
 .login-btn:hover {
-  background: linear-gradient(135deg, #5BABE8, #4A86CE);
+  background: #4096FF;
   box-shadow: 0 4px 16px rgba(74, 155, 215, 0.35);
   transform: translateY(-1px);
 }
@@ -891,7 +875,7 @@ export default {
   .form-panel {
     flex: 1;
     padding: 24px;
-    background: linear-gradient(160deg, #1A0F00, #3D2B1F);
+    background: #2B2018;
   }
   .form-card {
     box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);

+ 3 - 3
cfc-web/src/views/TeacherDashboard.vue

@@ -37,7 +37,7 @@
       </el-col>
       <el-col :span="6">
         <div class="td-stat-card">
-          <div class="td-stat-icon" style="background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%)">
+          <div class="td-stat-icon" style="background: linear-gradient(135deg, #1677FF 0%, #4096FF 100%)">
             <i class="el-icon-wallet"></i>
           </div>
           <div class="td-stat-content">
@@ -76,7 +76,7 @@
             </div>
             <div class="td-action-item" @click="$router.push('/teacher-assessment')">
               <div class="td-action-icon" style="background: #F5F3FF">
-                <i class="el-icon-edit-outline" style="color: #8B5CF6"></i>
+                <i class="el-icon-edit-outline" style="color: #1677FF"></i>
               </div>
               <span>DAN测评</span>
             </div>
@@ -109,7 +109,7 @@
               <div class="td-today-stat-label">新订单</div>
             </div>
             <div class="td-today-stat-item">
-              <div class="td-today-stat-value" style="color: #8B5CF6">{{ todayStats.pendingReviews }}</div>
+              <div class="td-today-stat-value" style="color: #1677FF">{{ todayStats.pendingReviews }}</div>
               <div class="td-today-stat-label">待审核</div>
             </div>
           </div>

+ 1 - 1
cfc-web/src/views/admin/Dashboard.vue

@@ -279,7 +279,7 @@ export default {
 .stat-cyan .stat-icon-wrap   { background: #CFFAFE; color: #06B6D4; }
 .stat-green .stat-icon-wrap  { background: #D1FAE5; color: #10B981; }
 .stat-red .stat-icon-wrap    { background: #FEE2E2; color: #EF4444; }
-.stat-purple .stat-icon-wrap { background: #EDE9FE; color: #8B5CF6; }
+.stat-purple .stat-icon-wrap { background: #EDE9FE; color: #1677FF; }
 .stat-body { flex: 1; min-width: 0; }
 .stat-value { font-size: 24px; font-weight: 700; color: #1E293B; line-height: 1.2; }
 .stat-label { font-size: 13px; color: #94A3B8; margin-top: 2px; }

+ 1 - 1
cfc-web/src/views/admin/EnergyBehaviorConfig.vue

@@ -148,7 +148,7 @@ import { getEnergyBehaviorList, updateEnergyBehavior, toggleEnergyBehavior } fro
 const DIMENSION_MAP = {
   body: { name: '身', color: '#FF8C42' },
   mind: { name: '心', color: '#FF6B9D' },
-  wisdom: { name: '智', color: '#6366F1' },
+  wisdom: { name: '智', color: '#1677FF' },
   action: { name: '行', color: '#10B981' },
   wealth: { name: '富', color: '#F59E0B' }
 }

+ 2 - 2
cfc-web/src/views/admin/EnergySandbox.vue

@@ -72,7 +72,7 @@
         </el-table-column>
         <el-table-column prop="overallScore" label="综合" width="80" align="center">
           <template slot-scope="scope">
-            <el-tag size="small" color="#6366F1" effect="dark">{{ scope.row.overallScore != null ? scope.row.overallScore : '-' }}</el-tag>
+            <el-tag size="small" color="#1677FF" effect="dark">{{ scope.row.overallScore != null ? scope.row.overallScore : '-' }}</el-tag>
           </template>
         </el-table-column>
         <template slot="empty">
@@ -108,7 +108,7 @@ export default {
         { key: 'wisdomScore', label: '智', color: '#409EFF' },
         { key: 'wealthScore', label: '富', color: '#F0C929' },
         { key: 'actionScore', label: '行', color: '#E6A23C' },
-        { key: 'overallScore', label: '综合', color: '#6366F1' }
+        { key: 'overallScore', label: '综合', color: '#1677FF' }
       ]
     }
   },

+ 1 - 1
cfc-web/src/views/admin/MbtiProfiles.vue

@@ -3,7 +3,7 @@
     <el-card shadow="never">
       <div slot="header" class="admin-page-header">
         <span class="admin-page-title">
-          <i class="el-icon-user" style="color: #6366F1; margin-right: 8px;"></i>
+          <i class="el-icon-user" style="color: #1677FF; margin-right: 8px;"></i>
           MBTI 人格画像库(16型)
         </span>
         <div class="header-actions">

+ 1 - 1
cfc-web/src/views/admin/MembershipCenter.vue

@@ -639,7 +639,7 @@ export default {
 .stat-cyan   .stat-icon-wrap { background: #cffafe; color: #06b6d4; }
 .stat-green  .stat-icon-wrap { background: #d1fae5; color: #10b981; }
 .stat-red    .stat-icon-wrap { background: #fee2e2; color: #ef4444; }
-.stat-purple .stat-icon-wrap { background: #ede9fe; color: #8b5cf6; }
+.stat-purple .stat-icon-wrap { background: #E6F4FF; color: #1677FF; }
 .stat-info   .stat-icon-wrap { background: #f1f5f9; color: #64748b; }
 .stat-primary .stat-icon-wrap { background: #dbeafe; color: #3b82f6; }
 

+ 1 - 1
cfc-web/src/views/admin/ProfileManagement.vue

@@ -172,7 +172,7 @@ export default {
       return m[dim] || dim
     },
     dimColor(dim) {
-      var m = { body: '#FF8C42', wisdom: '#6366F1', mind: '#FF6B9D', action: '#10B981', wealth: '#F59E0B' }
+      var m = { body: '#FF8C42', wisdom: '#1677FF', mind: '#FF6B9D', action: '#10B981', wealth: '#F59E0B' }
       return m[dim] || '#999'
     },
     domainLabel(d) {

+ 1 - 1
cfc-web/src/views/teacher/TeacherFamilies.vue

@@ -418,7 +418,7 @@ export default {
 }
 
 .stat-icon.purple {
-  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
+  background: linear-gradient(135deg, #1677FF 0%, #4096FF 100%);
 }
 
 .stat-value {

+ 1 - 1
cfc-web/src/views/teacher/TeacherOrders.vue

@@ -434,7 +434,7 @@ export default {
 }
 
 .stat-card.gradient-purple {
-  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
+  background: linear-gradient(135deg, #1677FF 0%, #4096FF 100%);
 }
 
 .stat-icon-bg {

+ 1 - 1
cfc-web/src/views/teacher/TeacherPackages.vue

@@ -468,7 +468,7 @@ export default {
 }
 
 .stat-icon.purple {
-  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
+  background: linear-gradient(135deg, #1677FF 0%, #4096FF 100%);
 }
 
 .stat-value {

+ 2 - 2
cfc-web/src/views/teacher/TeacherTeam.vue

@@ -216,7 +216,7 @@
           </el-col>
           <el-col :span="8">
             <div class="mini-stat">
-              <div class="mini-stat-value" style="color: #8B5CF6">{{ currentMember.childrenCount || 0 }}</div>
+              <div class="mini-stat-value" style="color: #1677FF">{{ currentMember.childrenCount || 0 }}</div>
               <div class="mini-stat-label">服务孩子</div>
             </div>
           </el-col>
@@ -432,7 +432,7 @@ export default {
 }
 
 .stat-icon.purple {
-  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
+  background: linear-gradient(135deg, #1677FF 0%, #4096FF 100%);
 }
 
 .stat-value {