feat: UI redesign with uv-ui color system and landscape imagery
- Replace all colors with uv-ui design tokens (primary #3c9cff, warning #f9ae3d, etc.) - Hero section: Wugong Mountain landscape photo with dark overlay - Super Player card: photo background, large typography, warning-color price/CTA, value comparison (¥198 vs ¥3800+) - Spots section: landscape thumbnails instead of CSS gradients, warning-color prices - Profile page: landscape hero header, CSS menu icons, floating card layout - Card list page: landscape hero header, filter pills, empty state design - TabBar: rename '入园码' to '旅游卡', Lucide-style PNG icons (home/card/profile) - Typography: corrected font weights (semibold for prices, medium for labels) - Remove broken font-loader (lxgw-wen-kai CDN 404) - Skip wx.getPrivacySetting in devtools to avoid framework timeout - Replace all inline SVG with CSS-only icons for mini-program compatibility - Add design system files (styles/, components/, animations) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jacobxu666
@@ -0,0 +1,143 @@
|
||||
// ============================================
|
||||
// Design Tokens — Minimalist Modern
|
||||
// ============================================
|
||||
|
||||
// === COLORS ===
|
||||
|
||||
// Brand accent — Electric Blue
|
||||
$color-accent: #0052FF;
|
||||
$color-accent-secondary: #4D7CFF;
|
||||
$color-accent-foreground: #FFFFFF;
|
||||
|
||||
// Semantic
|
||||
$color-success: #10B981;
|
||||
$color-warning: #F59E0B;
|
||||
$color-error: #EF4444;
|
||||
|
||||
// Neutrals
|
||||
$color-background: #FAFAFA;
|
||||
$color-foreground: #0F172A;
|
||||
$color-muted: #F1F5F9;
|
||||
$color-muted-foreground: #64748B;
|
||||
$color-border: #E2E8F0;
|
||||
$color-card: #FFFFFF;
|
||||
$color-ring: #0052FF;
|
||||
|
||||
// Gradients
|
||||
$gradient-accent: linear-gradient(135deg, #{$color-accent}, #{$color-accent-secondary});
|
||||
|
||||
// === TYPOGRAPHY ===
|
||||
|
||||
$font-family-display: 'Noto Serif SC', 'STSong', 'SimSun', serif;
|
||||
$font-family-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
|
||||
$font-family-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
|
||||
|
||||
$font-size-xs: 20rpx;
|
||||
$font-size-sm: 24rpx;
|
||||
$font-size-base: 28rpx;
|
||||
$font-size-lg: 32rpx;
|
||||
$font-size-xl: 36rpx;
|
||||
$font-size-2xl: 44rpx;
|
||||
$font-size-3xl: 56rpx;
|
||||
$font-size-display: 72rpx;
|
||||
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semibold: 600;
|
||||
$font-weight-bold: 700;
|
||||
|
||||
$line-height-tight: 1.2;
|
||||
$line-height-normal: 1.5;
|
||||
$line-height-relaxed: 1.75;
|
||||
|
||||
// === SPACING (rpx) ===
|
||||
|
||||
$spacing-0: 0;
|
||||
$spacing-1: 8rpx;
|
||||
$spacing-2: 16rpx;
|
||||
$spacing-3: 24rpx;
|
||||
$spacing-4: 32rpx;
|
||||
$spacing-5: 40rpx;
|
||||
$spacing-6: 48rpx;
|
||||
$spacing-8: 64rpx;
|
||||
$spacing-10: 80rpx;
|
||||
$spacing-12: 96rpx;
|
||||
$spacing-16: 128rpx;
|
||||
$spacing-20: 160rpx;
|
||||
|
||||
// === BORDER RADIUS ===
|
||||
|
||||
$radius-sm: 8rpx;
|
||||
$radius-base: 16rpx;
|
||||
$radius-lg: 24rpx;
|
||||
$radius-xl: 32rpx;
|
||||
$radius-2xl: 48rpx;
|
||||
$radius-full: 9999rpx;
|
||||
|
||||
// === SHADOWS ===
|
||||
|
||||
$shadow-sm: 0 2rpx 8rpx rgba(15, 23, 42, 0.04);
|
||||
$shadow-base: 0 4rpx 16rpx rgba(15, 23, 42, 0.08);
|
||||
$shadow-lg: 0 8rpx 32rpx rgba(15, 23, 42, 0.12);
|
||||
$shadow-xl: 0 16rpx 48rpx rgba(15, 23, 42, 0.16);
|
||||
$shadow-accent: 0 8rpx 24rpx rgba(0, 82, 255, 0.25);
|
||||
|
||||
// === TRANSITIONS ===
|
||||
|
||||
$transition-fast: 150ms ease;
|
||||
$transition-base: 250ms ease;
|
||||
$transition-slow: 400ms ease;
|
||||
|
||||
// === Z-INDEX ===
|
||||
|
||||
$z-base: 0;
|
||||
$z-dropdown: 100;
|
||||
$z-sticky: 200;
|
||||
$z-modal: 300;
|
||||
$z-toast: 400;
|
||||
|
||||
// === BORDER ===
|
||||
|
||||
$border-width: 1rpx;
|
||||
|
||||
// ============================================
|
||||
// Legacy $uni-* compatibility (for uni-ui)
|
||||
// ============================================
|
||||
|
||||
$uni-color-primary: $color-accent;
|
||||
$uni-color-success: $color-success;
|
||||
$uni-color-warning: $color-warning;
|
||||
$uni-color-error: $color-error;
|
||||
$uni-text-color: $color-foreground;
|
||||
$uni-text-color-inverse: #FFFFFF;
|
||||
$uni-text-color-grey: $color-muted-foreground;
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable: #c0c0c0;
|
||||
$uni-bg-color: $color-background;
|
||||
$uni-bg-color-grey: $color-muted;
|
||||
$uni-bg-color-hover: #f1f1f1;
|
||||
$uni-bg-color-mask: rgba(0, 0, 0, 0.4);
|
||||
$uni-border-color: $color-border;
|
||||
$uni-font-size-sm: $font-size-sm;
|
||||
$uni-font-size-base: $font-size-base;
|
||||
$uni-font-size-lg: $font-size-lg;
|
||||
$uni-font-size-title: 40rpx;
|
||||
$uni-font-size-subtitle: $font-size-xl;
|
||||
$uni-font-size-paragraph: 30rpx;
|
||||
$uni-img-size-sm: 40rpx;
|
||||
$uni-img-size-base: 52rpx;
|
||||
$uni-img-size-lg: 80rpx;
|
||||
$uni-border-radius-sm: $radius-sm;
|
||||
$uni-border-radius-base: $radius-base;
|
||||
$uni-border-radius-lg: $radius-lg;
|
||||
$uni-border-radius-circle: 50%;
|
||||
$uni-spacing-row-sm: 10rpx;
|
||||
$uni-spacing-row-base: 20rpx;
|
||||
$uni-spacing-row-lg: 30rpx;
|
||||
$uni-spacing-col-sm: 8rpx;
|
||||
$uni-spacing-col-base: 16rpx;
|
||||
$uni-spacing-col-lg: 24rpx;
|
||||
$uni-opacity-disabled: 0.3;
|
||||
$uni-color-title: $color-foreground;
|
||||
$uni-color-subtitle: $color-muted-foreground;
|
||||
$uni-color-paragraph: #3f536e;
|
||||
Reference in New Issue
Block a user