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

/**
 * ============================================
 * 健身房管理系统小程序 - 全局配色变量
 * 主题：清新健康运动风格
 * 主色调：浅蓝渐变 + 活力橙点缀
 * 兼容暗色/浅色模式基础，保证可访问性
 * ============================================
 */

:root {
    /* ========== 主品牌色（清新浅蓝色系）========== */
    --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-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;            /* 浅灰辅助背景 - 分割区域或禁用态背景 */
    
    /* ========== 文本色系 ========== */
    --text-dark: #1E2A3A;          /* 主要文字 - 标题、正文，保证高对比度 */
    --text-muted: #5E6F8D;         /* 辅助文字 - 次要信息、占位符，保持易读性 */
    --text-light: #8A99B4;         /* 更浅文字 - 提示语、时间戳，但需注意与背景对比 */
    --text-inverse: #FFFFFF;       /* 反白文字 - 深色/橙色背景上的文字 */
    
    /* ========== 边框/分割线 ========== */
    --border-light: #E9EDF2;       /* 浅边框 - 卡片分割、列表边界，细腻柔和 */
    --border-focus: #FF6B35;       /* 聚焦边框 - 输入框选中或强调区域，使用橙色点缀 */
    
    /* ========== 状态颜色（功能性） ========== */
    --success-green: #2ECC71;      /* 成功绿 - 已完成课程、健康打卡 */
    --warning-amber: #F39C12;      /* 警示橙黄 - 提醒、到期提示 */
    --error-red: #E74C3C;          /* 错误红 - 异常情况或取消预约 */
    --info-blue: #3498DB;          /* 信息蓝 - 提示气泡、帮助文字 */
    
    /* ========== 渐变色 (提升活力感) ========== */
    --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%);    /* 微弱渐变 - 增加细节精致度 */
    
    /* ========== TabBar 配色（清新蓝调风格）========== */
    /* 引用位置：components/TabBar.vue */
    --tabbar-bg: rgba(200, 225, 238, 0.8);           /* TabBar背景色 - 半透明浅蓝色毛玻璃效果 */
    --tabbar-shadow: rgba(120, 185, 215, 0.2);        /* TabBar阴影色 - 蓝色系柔和阴影 */
    --tabbar-icon-inactive: gray;                       /* 未选中图标颜色 - 灰色 */
    --tabbar-icon-active: #5A98B0;                     /* 选中图标颜色 - 蓝绿色 */
    --tabbar-text-inactive: #8AABBB;                   /* 未选中文字颜色 - 浅灰蓝 */
    --tabbar-text-active: #5A98B0;                     /* 选中文字颜色 - 蓝绿色（与图标一致） */
    
    /* ========== 通用蓝色系阴影（用于卡片、按钮等）========== */
    /* 引用位置：components/index/RecommendCourses.vue, QuickEntry.vue, TodayRecommend.vue */
    --shadow-blue-light: rgba(120, 185, 215, 0.18);    /* 浅蓝色阴影 - 卡片悬浮效果 */
    
    /* ========== 阴影层级 ========== */
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);   /* 卡片小阴影 轻量浮起 */
    --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;             /* 小组件、标签圆角 */
    --radius-md: 20px;             /* 标准卡片圆角 */
    --radius-lg: 28px;             /* 大容器、头部卡片圆角 */
    --radius-full: 999px;          /* 胶囊按钮、头像完全圆角 */
    
    /* ========== 布局与间距 ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* ========== 字体 (移动端优先) ========== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 0.7rem;        /* 辅助标注 */
    --font-size-sm: 0.8rem;        /* 次要文字 */
    --font-size-base: 0.9rem;      /* 正文基准 */
    --font-size-md: 1rem;          /* 小标题 */
    --font-size-lg: 1.2rem;        /* 卡片标题 */
    --font-size-xl: 1.4rem;        /* 大数字/欢迎语 */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
}

/* ========== 暗色模式适配（可选，保持品牌一致性） ========== */
@media (prefers-color-scheme: dark) {
    :root {
        /* 暗色模式下微调背景与文字，保留品牌色核心 */
        --bg-light: #121826;
        --bg-white: #1E2636;
        --bg-gray: #0F141F;
        --text-dark: #EDF2F7;
        --text-muted: #9AA9C1;
        --border-light: #2A3346;
        --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.4);
        /* 保留主色深蓝与橙色不变，但可适当提高对比 */
        --primary-dark: #123A5E;   /* 亮一点保证深色背景可见度 */
        --accent-orange: #FF7846;  /* 稍微提亮橙色 */
    }
}

/* ========== 辅助类 (方便开发直接复用) ========== */

/* 背景色类 */
.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;
    border: none;
    border-radius: var(--radius-full);
    padding: 10px 20px;
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-orange-glow);
    transition: all 0.2s ease;
}
.btn-orange:active {
    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);
}