cfc/cfc-frontend/uni.scss

/**
 * ============================================================
 * 浠艾福 (XAF) Design System — UniApp SCSS Variables
 * ============================================================
 *
 * 色彩体系: 柔和天蓝 + 珊瑚暖色 (信任专业 + 家庭温暖)
 * 风格: 极简扁平圆角 (全角色统一) 
 * Logo配色参考: #6BB9F0 (中蓝) / #D6EAF8 (浅蓝) / ❤白色心形
 * 
 * 设计原则:
 * - 扁平圆角：全端统一，无Claymorphism
 * - 蓝色为品牌色：传递信任/专业/平静
 * - 珊瑚暖色为点缀：保留"家庭温暖"和"关怀"
 * - 心形符号：品牌识别元素
 * - 减少装饰动效，聚焦内容可读性
 *
 * v3.0 — 2026-06-06
 * ============================================================
 */

// ============================================================
// 1. 品牌色彩 (Brand Colors)
// ============================================================

/* 主色调 - 柔和天蓝 (Logo蓝色) */
$uni-primary: #5B9BD5;          // Logo中蓝 - 主品牌色
$uni-primary-light: #8FC5E8;    // 浅蓝
$uni-primary-dark: #3A7CC4;     // 深蓝
$uni-primary-pale: #D6EAF8;     // 极浅蓝 (Logo背景色)

/* 辅助暖色 - 珊瑚粉 (家庭温暖) */
$uni-warm: #F08A7A;             // 心形暖色 - 保留"关爱"感
$uni-warm-light: #F4B0A5;
$uni-warm-dark: #E06A58;

/* 语义色 (Semantic) */
$uni-success: #4CAF50;
$uni-success-light: #81C784;
$uni-warning: #FFB74D;
$uni-warning-light: #FFD54F;
$uni-error: #EF5350;
$uni-error-light: #E57373;
$uni-info: #5B9BD5;             // 复用了品牌蓝

/* 中性色 (Neutral) — 冷调中性，匹配蓝色系 */
$uni-bg-color: #F5F9FC;        // 极浅蓝灰背景
$uni-bg-color-grey: #EDF2F7;   // 浅灰蓝
$uni-bg-color-dark: #E2E8F0;   // 灰蓝
$uni-surface: #FFFFFF;          // 卡片/表面
$uni-border-color: #CBD5E1;    // 冷灰边框
$uni-border-color-light: #E2E8F0;
$uni-text-color: #1E293B;      // 深蓝灰 (正文)
$uni-text-color-secondary: #64748B; // 次要文字
$uni-text-color-grey: #94A3B8; // 灰色文字
$uni-text-color-placeholder: #94A3B8;
$uni-text-color-inverse: #FFFFFF;

// ============================================================
// 2. 字体系统 (Typography)
// ============================================================

/* 字体栈 - 小程序不支持自定义字体 */
$uni-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
  'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

$uni-font-family-display: $uni-font-family;
$uni-font-family-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

/* 字号 */
$uni-font-size-xs: 20rpx;
$uni-font-size-sm: 24rpx;
$uni-font-size-base: 28rpx;
$uni-font-size-lg: 32rpx;
$uni-font-size-xl: 36rpx;
$uni-font-size-2xl: 44rpx;
$uni-font-size-3xl: 52rpx;

/* 字重 */
$uni-font-weight-normal: 400;
$uni-font-weight-medium: 500;
$uni-font-weight-bold: 600;
$uni-font-weight-black: 700;

// ============================================================
// 3. 间距系统 (Spacing)
// ============================================================

$uni-spacing-xs: 8rpx;
$uni-spacing-sm: 16rpx;
$uni-spacing-md: 24rpx;
$uni-spacing-lg: 32rpx;
$uni-spacing-xl: 48rpx;
$uni-spacing-2xl: 64rpx;

$uni-page-padding: 32rpx;

// ============================================================
// 4. 圆角 (Border Radius)
// ============================================================

$uni-radius-sm: 10rpx;
$uni-radius-md: 16rpx;
$uni-radius-lg: 24rpx;
$uni-radius-xl: 32rpx;
$uni-radius-full: 50%;
$uni-radius-round: 9999rpx;

// ============================================================
// 5. 阴影 (Shadows) — 极简风格，轻微阴影
// ============================================================

$uni-shadow-sm: 0 2rpx 8rpx rgba(91, 155, 213, 0.06);
$uni-shadow-md: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
$uni-shadow-lg: 0 8rpx 32rpx rgba(91, 155, 213, 0.10);
$uni-shadow-inner: inset 0 1rpx 4rpx rgba(0, 0, 0, 0.04);

// ============================================================
// 6. 动画 (Animations) — 节制使用
// ============================================================

$uni-transition-fast: 0.15s ease;
$uni-transition-base: 0.25s ease;
$uni-transition-slow: 0.3s ease;

// ============================================================
// 7. CSS 自定义属性
// ============================================================

:root {
  // 品牌色
  --color-primary: #5B9BD5;
  --color-primary-light: #8FC5E8;
  --color-primary-dark: #3A7CC4;
  --color-primary-pale: #D6EAF8;
  --color-warm: #F08A7A;
  --color-warm-light: #F4B0A5;

  // 语义色
  --color-success: #4CAF50;
  --color-warning: #FFB74D;
  --color-error: #EF5350;

  // 中性色
  --bg: #F5F9FC;
  --bg-grey: #EDF2F7;
  --surface: #FFFFFF;
  --text: #1E293B;
  --text-secondary: #64748B;
  --muted: #94A3B8;
  --border: #CBD5E1;
  --border-light: #E2E8F0;

  // 间距
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-page: 16px;

  // 圆角
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  // 阴影 — 极简风格
  --shadow-sm: 0 1px 4px rgba(91, 155, 213, 0.06);
  --shadow-md: 0 2px 8px rgba(91, 155, 213, 0.08);
  --shadow-lg: 0 4px 16px rgba(91, 155, 213, 0.10);
}

// ============================================================
// 8. 实用工具类
// ============================================================

// --- 文字色彩 ---
.text-primary { color: $uni-primary; }
.text-warm { color: $uni-warm; }
.text-success { color: $uni-success; }
.text-warning { color: $uni-warning; }
.text-error { color: $uni-error; }
.text-muted { color: $uni-text-color-grey; }
.text-secondary { color: $uni-text-color-secondary; }
.text-bold { font-weight: $uni-font-weight-bold; }
.text-black { font-weight: $uni-font-weight-black; }
.text-center { text-align: center; }
.text-sm { font-size: $uni-font-size-sm; }
.text-base { font-size: $uni-font-size-base; }
.text-lg { font-size: $uni-font-size-lg; }
.text-xl { font-size: $uni-font-size-xl; }
.text-2xl { font-size: $uni-font-size-2xl; }
.text-3xl { font-size: $uni-font-size-3xl; }

// --- 背景 ---
.bg-primary { background-color: $uni-primary; }
.bg-warm { background-color: $uni-warm; }
.bg-surface { background-color: $uni-surface; }
.bg-page { background-color: $uni-bg-color; }

// --- 圆角 ---
.radius-sm { border-radius: $uni-radius-sm; }
.radius-md { border-radius: $uni-radius-md; }
.radius-lg { border-radius: $uni-radius-lg; }
.radius-xl { border-radius: $uni-radius-xl; }

// --- 弹性布局 ---
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-xs { gap: $uni-spacing-xs; }
.gap-sm { gap: $uni-spacing-sm; }
.gap-md { gap: $uni-spacing-md; }
.gap-lg { gap: $uni-spacing-lg; }

// --- 间距 ---
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.p-sm { padding: $uni-spacing-sm; }
.p-md { padding: $uni-spacing-md; }
.p-lg { padding: $uni-spacing-lg; }
.mt-sm { margin-top: $uni-spacing-sm; }
.mt-md { margin-top: $uni-spacing-md; }
.mt-lg { margin-top: $uni-spacing-lg; }
.mb-sm { margin-bottom: $uni-spacing-sm; }
.mb-md { margin-bottom: $uni-spacing-md; }
.mb-lg { margin-bottom: $uni-spacing-lg; }

// --- 其他 ---
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ============================================================
// 9. 扁平圆角卡片 (Flat Rounded Card) — 全端统一风格
// ============================================================

@mixin flat-card($border-color: $uni-border-color-light) {
  border-radius: $uni-radius-md;
  background: $uni-surface;
  border: 1rpx solid $border-color;
  box-shadow: $uni-shadow-sm;
}

@mixin flat-button($bg-color: $uni-primary) {
  border-radius: $uni-radius-lg;
  background: $bg-color;
  color: #FFFFFF;
  border: none;
  transition: opacity $uni-transition-fast;

  &:active {
    opacity: 0.85;
  }
}

.flat-card {
  @include flat-card;
}

// ============================================================
// 10. 关键帧动画（精简）
// ============================================================

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

// 动画实用类
.animate-fade-in { animation: fadeIn $uni-transition-base both; }
.animate-slide-up { animation: slideUp $uni-transition-slow both; }
.animate-scale-in { animation: scaleIn $uni-transition-slow both; }
.animate-pulse-soft { animation: pulseSoft 3s ease-in-out infinite; }

// 交错入场
@for $i from 1 through 20 {
  .animate-stagger-#{$i} {
    animation-delay: #{$i * 60}ms;
  }
}

// ============================================================
// 11. 骨架屏
// ============================================================

@mixin skeleton {
  background: linear-gradient(
    90deg,
    $uni-border-color-light 25%,
    #F5F9FC 50%,
    $uni-border-color-light 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: $uni-radius-sm;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton { @include skeleton; }
.skeleton-text {
  @include skeleton;
  height: 28rpx;
  margin-bottom: 12rpx;
}
.skeleton-block {
  @include skeleton;
  height: 160rpx;
}