cfc/cfc-frontend/uni.scss

/**
 * ============================================================
 * 知心益家 (ZXYJ) Design System — UniApp SCSS Variables
 * ============================================================
 *
 * 色彩体系: 暖橙 + 天蓝 (儿童友好 + 专业信任)
 * 风格: Claymorphism (孩子端) / 扁平卡片 (家长端) / 专业工具 (规划师端)
 * 角色色彩: 家长=暖橙 / 孩子=暖橙+天蓝 / 规划师=蓝色调
 *
 * v2.0 — 2026-06-05
 * ============================================================
 */

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

/* 主色调 - 暖橙 (Primary) */
$uni-primary: #F97316;
$uni-primary-light: #FB923C;
$uni-primary-dark: #EA580C;

/* 强调色 - 天蓝 (Accent) */
$uni-accent: #0EA5E9;
$uni-accent-light: #38BDF8;
$uni-accent-dark: #0284C7;

/* 语义色 (Semantic) */
$uni-success: #22C55E;
$uni-success-light: #4ADE80;
$uni-warning: #F59E0B;
$uni-warning-light: #FBBF24;
$uni-error: #EF4444;
$uni-error-light: #F87171;

/* 中性色 (Neutral) */
$uni-bg-color: #FFF7ED;       // 暖白背景
$uni-bg-color-grey: #FFF2E4;  // 浅暖灰
$uni-bg-color-dark: #F5E6D3;  // 暖灰
$uni-surface: #FFFFFF;         // 卡片/表面
$uni-border-color: #FED7AA;   // 浅橙边框
$uni-border-color-light: #FFEDD5; // 更浅边框
$uni-text-color: #3D2E1E;     // 暖深棕 (正文)
$uni-text-color-secondary: #6B5A4A; // 次要文字
$uni-text-color-grey: #94A3B8; // 灰蓝 (禁用/占位)
$uni-text-color-placeholder: #A8A29E; // 占位文字
$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: 'JetBrains 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: 12rpx;
$uni-radius-md: 20rpx;
$uni-radius-lg: 32rpx;
$uni-radius-xl: 40rpx;
$uni-radius-full: 50%;
$uni-radius-round: 9999rpx;

// ============================================================
// 5. 阴影 (Shadows)
// ============================================================

$uni-shadow-sm: 0 4rpx 12rpx rgba(249, 115, 22, 0.06);
$uni-shadow-md: 0 8rpx 24rpx rgba(249, 115, 22, 0.10);
$uni-shadow-lg: 0 16rpx 48rpx rgba(249, 115, 22, 0.14);
$uni-shadow-inner: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

/* Claymorphism 双重阴影（孩子端风格） */
$uni-shadow-clay: inset -4rpx -4rpx 12rpx rgba(249, 115, 22, 0.05),
  6rpx 6rpx 18rpx rgba(249, 115, 22, 0.10);

/* 规划师端阴影（蓝色调） */
$uni-shadow-blue-sm: 0 4rpx 12rpx rgba(59, 130, 246, 0.06);
$uni-shadow-blue-md: 0 8rpx 24rpx rgba(59, 130, 246, 0.10);

// ============================================================
// 6. 动画 (Animations)
// ============================================================

$uni-transition-fast: 0.15s ease;
$uni-transition-base: 0.25s ease;
$uni-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
$uni-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

// ============================================================
// 7. CSS 自定义属性 (CSS Custom Properties)
//    用于运行时动态覆盖和组件级使用
// ============================================================

:root {
  // 品牌色
  --color-primary: #F97316;
  --color-primary-light: #FB923C;
  --color-primary-dark: #EA580C;
  --color-accent: #0EA5E9;
  --color-accent-light: #38BDF8;

  // 语义色
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  // 中性色
  --bg: #FFF7ED;
  --bg-grey: #FFF2E4;
  --surface: #FFFFFF;
  --text: #3D2E1E;
  --text-secondary: #6B5A4A;
  --muted: #94A3B8;
  --border: #FED7AA;
  --border-light: #FFEDD5;

  // 间距（转换为 px 近似值，rpx 在组件内使用）
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-page: 16px;

  // 圆角
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  // 阴影
  --shadow-sm: 0 2px 6px rgba(249, 115, 22, 0.06);
  --shadow-md: 0 4px 12px rgba(249, 115, 22, 0.10);
  --shadow-lg: 0 8px 24px rgba(249, 115, 22, 0.14);
  --shadow-clay: inset -2px -2px 6px rgba(249, 115, 22, 0.05),
    3px 3px 10px rgba(249, 115, 22, 0.10);

  // 字体
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  // 角色专属色（规划师端用蓝色系）
  --color-teacher-primary: #3B82F6;
  --color-teacher-bg: #EFF6FF;
}

// ============================================================
// 8. 实用工具类 (Utility Classes)
// ============================================================

// --- 文字 ---
.text-primary { color: $uni-primary; }
.text-accent { color: $uni-accent; }
.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-accent { background-color: $uni-accent; }
.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. Claymorphism 风格 (孩子端视觉)
// ============================================================

@mixin clay-card($border-color: $uni-border-color) {
  border-radius: $uni-radius-md;
  border: 4rpx solid $border-color;
  background: linear-gradient(145deg, #FFFFFF, $uni-bg-color);
  box-shadow: $uni-shadow-clay;
}

@mixin clay-button($bg-color: $uni-primary) {
  border-radius: $uni-radius-lg;
  border: 3px solid $uni-border-color;
  background: linear-gradient(145deg, lighten($bg-color, 8%), $bg-color);
  box-shadow:
    inset -3rpx -3rpx 10rpx rgba(255, 255, 255, 0.3),
    4rpx 4rpx 12rpx rgba($bg-color, 0.3);
  transition: transform $uni-transition-fast;

  &:active {
    transform: scale(0.96);
  }
}

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

// ============================================================
// 10. 关键帧动画
// ============================================================

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

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

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

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba($uni-primary, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12rpx rgba($uni-primary, 0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8rpx);
  }
}

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

@keyframes confettiFall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes pointsFly {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100rpx) scale(1.5);
  }
}

// 动画实用类
.animate-fade-in { animation: fadeIn $uni-transition-base both; }
.animate-slide-up { animation: slideUp $uni-transition-slow both; }
.animate-slide-down { animation: slideDown $uni-transition-base both; }
.animate-scale-in { animation: scaleIn $uni-transition-slow both; }
.animate-bounce-in { animation: bounceIn $uni-transition-bounce both; }
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }

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

// ============================================================
// 11. 骨架屏 (Skeleton)
// ============================================================

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

.skeleton {
  @include skeleton;
}

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

.skeleton-block {
  @include skeleton;
  height: 160rpx;
}