优化多个页面样式及组件功能，优化课程、发现、训练、首页等核心页面样式

gym-manage-uniapp/common/style/base.css

@@ -1,25 +1,37 @@
 /**
  * ============================================
  * 健身房管理系统小程序 - 全局配色变量
- * 主题：活力运动风格
- * 主色调：深蓝专业 + 活力橙热情
+ * 主题：清新健康运动风格
+ * 主色调：浅蓝渐变 + 活力橙点缀
  * 兼容暗色/浅色模式基础，保证可访问性
  * ============================================
  */
 
 :root {
-    /* ========== 主品牌色 ========== */
-    --primary-dark: #0B2B4B;      /* 深蓝主色 - 用于头部导航栏、重要按钮、品牌标识，体现专业信赖感 */
-    --primary-deep: #1A4A6F;      /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */
-    --primary-light: #2C6288;     /* 浅蓝色（预留）- 用于选中态或辅助背景，保持和谐渐变 */
+    /* ========== 主品牌色（清新浅蓝色系）========== */
+    --primary-dark: #0B2B4B;        /* 深蓝主色 - 用于重要文字、品牌标识，体现专业信赖感 */
+    --primary-deep: #1A4A6F;        /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */
     
-    /* ========== 强调/行动色 ========== */
+    /* 主页主题浅蓝渐变色系 */
+    --primary-sky-100: #D6EEF8;     /* 最浅蓝 - 渐变起始色，清新自然 */
+    --primary-sky-200: #E4F2FA;     /* 浅蓝 - 渐变第二层 */
+    --primary-sky-300: #EEF6FB;     /* 淡蓝 - 渐变第三层 */
+    --primary-sky-400: #F5FAFD;     /* 微蓝 - 渐变第四层 */
+    --primary-sky-500: #FAFCFE;     /* 极浅蓝 - 渐变第五层，接近白色 */
+    
+    /* 光晕效果色 */
+    --glow-blue-1: rgba(160, 210, 235, 0.35);  /* 蓝绿色光晕 */
+    --glow-blue-2: rgba(180, 220, 240, 0.3);   /* 浅蓝色光晕 */
+    --glow-blue-3: rgba(170, 215, 238, 0.25);  /* 浅蓝绿色光晕 */
+    
+    /* ========== 强调/行动色（活力橙）========== */
     --accent-orange: #FF6B35;      /* 活力橙 - 主要CTA按钮、会员标识、高亮徽章、关键数据，刺激行动力 */
     --accent-orange-light: #FF8C5A; /* 浅橙色 - hover轻量背景、渐变辅助，带来温暖运动感 */
     --accent-orange-dark: #E55A2B;  /* 深橙色 - 按压状态或重要警告，保持色彩体系完整 */
     
-    /* ========== 背景色系 ========== */
-    --bg-light: #F9FAFE;           /* 全局浅灰蓝背景 - 柔和且提升深蓝/橙色的视觉舒适度 */
+    /* ========== 背景色系（主页主题）========== */
+    --bg-gradient-primary: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%); /* 主页主渐变背景 */
+    --bg-light: #F5FAFD;           /* 全局浅蓝背景 - 柔和且提升蓝色/橙色的视觉舒适度 */
     --bg-white: #FFFFFF;           /* 纯白卡片背景 - 用于内容卡片、表单区域，提高可读性与层次感 */
     --bg-gray: #F2F5F9;            /* 浅灰辅助背景 - 分割区域或禁用态背景 */
     
@@ -42,6 +54,7 @@
     /* ========== 渐变色 (提升活力感) ========== */
     --gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);   /* 橙色渐变 - 会员按钮、重要徽章 */
     --gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%);     /* 深蓝渐变 - 头部banner或特别卡片 */
+    --gradient-sky: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%); /* 主页天空渐变 - 全局背景 */
     --gradient-subtle: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%);    /* 微弱渐变 - 增加细节精致度 */
     
     /* ========== 阴影层级 ========== */
@@ -49,6 +62,7 @@
     --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08);                                /* 中等阴影 - 弹窗或下拉菜单 */
     --shadow-lg: 0 20px 35px rgba(0, 0, 0, 0.12);                                /* 大阴影 - 模态框、悬浮元素 */
     --shadow-orange-glow: 0 4px 12px rgba(255, 107, 53, 0.25);                   /* 橙色光晕 - 增强CTA吸引力 */
+    --shadow-sky-glow: 0 4px 12px rgba(160, 210, 235, 0.2);                       /* 蓝色光晕 - 主页效果增强 */
     
     /* ========== 圆角规范 (柔和运动风) ========== */
     --radius-sm: 12px;             /* 小组件、标签圆角 */
@@ -95,18 +109,62 @@
 }
 
 /* ========== 辅助类 (方便开发直接复用) ========== */
+
+/* 背景色类 */
 .bg-primary {
     background-color: var(--primary-dark);
 }
 .bg-accent {
     background-color: var(--accent-orange);
 }
+.bg-gradient-sky {
+    background: var(--gradient-sky);
+}
+.bg-gradient-primary {
+    background: var(--bg-gradient-primary);
+}
+.bg-sky-100 {
+    background-color: var(--primary-sky-100);
+}
+.bg-sky-200 {
+    background-color: var(--primary-sky-200);
+}
+.bg-sky-300 {
+    background-color: var(--primary-sky-300);
+}
+.bg-sky-400 {
+    background-color: var(--primary-sky-400);
+}
+.bg-sky-500 {
+    background-color: var(--primary-sky-500);
+}
+
+/* 文字色类 */
 .text-primary {
     color: var(--primary-dark);
 }
 .text-accent {
     color: var(--accent-orange);
 }
+.text-sky-100 {
+    color: var(--primary-sky-100);
+}
+.text-sky-200 {
+    color: var(--primary-sky-200);
+}
+
+/* 光晕效果类 */
+.glow-blue-1 {
+    background: radial-gradient(circle, var(--glow-blue-1) 0%, transparent 70%);
+}
+.glow-blue-2 {
+    background: radial-gradient(circle, var(--glow-blue-2) 0%, transparent 70%);
+}
+.glow-blue-3 {
+    background: radial-gradient(circle, var(--glow-blue-3) 0%, transparent 70%);
+}
+
+/* 按钮类 */
 .btn-orange {
     background: var(--gradient-orange);
     color: white;
@@ -121,10 +179,35 @@
     transform: scale(0.97);
     background: var(--accent-orange-dark);
 }
+
+/* 卡片类 */
 .card-default {
     background: var(--bg-white);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
     padding: var(--spacing-md);
+}
+.card-sky {
+    background: var(--gradient-sky);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+}
+
+/* 阴影类 */
+.shadow-sky {
+    box-shadow: var(--shadow-sky-glow);
+}
+
+/* 通用页面容器 */
+.page-container-sky {
+    min-height: 100vh;
+    background: var(--gradient-sky);
+}
+
+/* 滚动容器 */
+.scroll-container-sky {
+    height: 100vh;
+    width: 100%;
+    background: var(--gradient-sky);
 }