270 lines
7.6 KiB
SCSS
270 lines
7.6 KiB
SCSS
/**
|
|
* 柯大鸭潮玩 - 全局样式系统
|
|
*
|
|
* 基于潮玩盲盒风格的设计系统，采用暖橙渐变色调
|
|
* 传递惊喜、期待、活力的品牌调性
|
|
*/
|
|
|
|
/* ============================================
|
|
🎨 品牌色彩系统 - 潮玩盲盒 Pro (2025 Refined)
|
|
============================================ */
|
|
|
|
/* 主色调 - 更加活力与现代 */
|
|
$brand-primary: #FF6B00; // 核心品牌橙 (更纯粹)
|
|
$brand-secondary: #FF9500; // 次级品牌色 (用于渐变/辅助)
|
|
$brand-primary-light: #FF9500; // 亮橙
|
|
$brand-primary-dark: #E65100; // 深橙
|
|
|
|
/* 辅助色 - 丰富视觉层次 */
|
|
$accent-gold: #FFC107; // 质感金
|
|
$accent-orange: #FF9500; // 活力橙
|
|
$accent-red: #FF3B30; // 促销红
|
|
$accent-blue: #007AFF; // 科技蓝
|
|
$accent-purple: #AF52DE; // 梦幻紫
|
|
$accent-pink: #FF2D55; // 活力粉
|
|
$accent-cyan: #5AC8FA; // 清新蓝
|
|
$color-success: #34C759; // 成功色
|
|
$color-warning: #FF9F0A; // 警告色
|
|
$color-error: #FF3B30; // 错误色
|
|
|
|
/* 中性色 - 提升阅读体验 */
|
|
$text-main: #1D1D1F; // 主要文字 (接近纯黑但柔和)
|
|
$text-sub: #86868B; // 次要文字
|
|
$text-secondary: $text-sub; // Alias for compatibility
|
|
$text-tertiary: #C7C7CC; // 辅助/占位
|
|
$text-placeholder: $text-tertiary; // Alias for compatibility
|
|
$text-disabled: #D1D1D6; // 禁用状态文字
|
|
$text-inverse: #FFFFFF; // 反白文字
|
|
|
|
/* 背景色 - 营造氛围 */
|
|
$bg-page: #F5F5F7; // 页面底色 (高级灰)
|
|
$bg-card: #FFFFFF; // 卡片背景
|
|
$bg-glass: rgba(255, 255, 255, 0.8); // 毛玻璃背景
|
|
$bg-secondary: #F8F8F8; // 次级背景
|
|
$bg-grey: #FAFAFA; // 浅灰背景
|
|
|
|
/* 渐变色 - 视觉冲击力 */
|
|
// 使用 CSS 变量在 style 中定义，此处保留 SCSS 变量供编译使用
|
|
$gradient-brand: linear-gradient(135deg, #FF9500 0%, #FF5E00 100%);
|
|
$gradient-gold: linear-gradient(135deg, #FFD60A 0%, #FF9F0A 100%);
|
|
$gradient-red: linear-gradient(135deg, #FF3B30 0%, #D32F2F 100%);
|
|
$gradient-purple: linear-gradient(135deg, #BF5AF2 0%, #5E5CE6 100%);
|
|
|
|
/* ============================================
|
|
🌑 暗黑/特殊主题变量 (Dark Mode Support)
|
|
============================================ */
|
|
$bg-dark: #1A1A2E; // 深邃蓝黑
|
|
$bg-dark-card: rgba(30, 30, 50, 0.7); // 暗色玻璃卡片
|
|
$text-dark-main: #FFFFFF; // 暗色模式主字
|
|
$text-dark-sub: rgba(255, 255, 255, 0.7); // 暗色模式副字
|
|
$border-dark: rgba(255, 255, 255, 0.1); // 暗色边框
|
|
|
|
|
|
/* ============================================
|
|
📐 布局与间距
|
|
============================================ */
|
|
$font-xxs: 18rpx;
|
|
$font-xs: 22rpx;
|
|
$font-sm: 24rpx;
|
|
$font-md: 28rpx;
|
|
$font-lg: 32rpx;
|
|
$font-xl: 36rpx;
|
|
$font-xxl: 48rpx;
|
|
|
|
$spacing-xs: 8rpx;
|
|
$spacing-sm: 12rpx;
|
|
$spacing-md: 16rpx;
|
|
$spacing-lg: 24rpx;
|
|
$spacing-xl: 32rpx;
|
|
$spacing-xxl: 48rpx;
|
|
|
|
$radius-sm: 8rpx;
|
|
$radius-md: 16rpx;
|
|
$radius-lg: 24rpx;
|
|
$radius-xl: 32rpx;
|
|
$radius-round: 999rpx;
|
|
|
|
$border-color-light: #F0F0F0;
|
|
$border-color: $border-color-light;
|
|
|
|
|
|
/* ============================================
|
|
✨ 阴影与质感
|
|
============================================ */
|
|
$shadow-xs: 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
|
|
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
$shadow-md: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
$shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
|
|
$shadow-float: 0 16rpx 48rpx rgba(255, 107, 0, 0.15); // 悬浮投影
|
|
$shadow-inner: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
|
|
$shadow-lg: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
|
|
$shadow-warm: 0 8rpx 24rpx rgba(255, 107, 53, 0.15);
|
|
$shadow-glow: 0 4rpx 16rpx rgba(255, 159, 67, 0.4);
|
|
|
|
/* ============================================
|
|
🔄 动画时长
|
|
============================================ */
|
|
|
|
$transition-fast: 0.15s;
|
|
$transition-normal: 0.25s;
|
|
$transition-slow: 0.35s;
|
|
$ease-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
/* ============================================
|
|
📱 兼容uni-app官方变量
|
|
============================================ */
|
|
|
|
/* 行为相关颜色 - 使用新配色 */
|
|
$uni-color-primary: $brand-primary;
|
|
$uni-color-success: #10B981;
|
|
$uni-color-warning: $accent-gold;
|
|
$uni-color-error: $accent-red;
|
|
|
|
/* 文字基本颜色 */
|
|
$uni-text-color: $text-main;
|
|
$uni-text-color-inverse: $text-inverse;
|
|
$uni-text-color-grey: $text-tertiary;
|
|
$uni-text-color-placeholder: $text-tertiary;
|
|
$uni-text-color-disable: #D1D5DB;
|
|
|
|
/* 背景颜色 */
|
|
$uni-bg-color: $bg-card;
|
|
$uni-bg-color-grey: $bg-page;
|
|
$uni-bg-color-hover: #FFF0E6;
|
|
$uni-bg-color-mask: rgba(0, 0, 0, 0.5);
|
|
|
|
/* 边框颜色 */
|
|
$uni-border-color: #E5E7EB;
|
|
|
|
/* 尺寸变量 */
|
|
$uni-font-size-sm: 12px;
|
|
$uni-font-size-base: 14px;
|
|
$uni-font-size-lg: 16px;
|
|
|
|
$uni-img-size-sm: 20px;
|
|
$uni-img-size-base: 26px;
|
|
$uni-img-size-lg: 40px;
|
|
|
|
/* Border Radius */
|
|
$uni-border-radius-sm: 4px;
|
|
$uni-border-radius-base: 8px;
|
|
$uni-border-radius-lg: 12px;
|
|
$uni-border-radius-circle: 50%;
|
|
|
|
/* 水平间距 */
|
|
$uni-spacing-row-sm: 6px;
|
|
$uni-spacing-row-base: 12px;
|
|
$uni-spacing-row-lg: 16px;
|
|
|
|
/* 垂直间距 */
|
|
$uni-spacing-col-sm: 6px;
|
|
$uni-spacing-col-base: 10px;
|
|
$uni-spacing-col-lg: 14px;
|
|
|
|
/* 透明度 */
|
|
$uni-opacity-disabled: 0.4;
|
|
|
|
/* 文章场景相关 */
|
|
$uni-color-title: $text-main;
|
|
$uni-font-size-title: 20px;
|
|
$uni-color-subtitle: $text-sub;
|
|
$uni-font-size-subtitle: 16px;
|
|
$uni-color-paragraph: $text-sub;
|
|
$uni-font-size-paragraph: 15px;
|
|
|
|
/* ============================================
|
|
🛠 工具 Mixins
|
|
============================================ */
|
|
|
|
@mixin text-ellipsis($lines: 1) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: $lines;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
/* ============================================
|
|
💎 核心公共 UI 类 (Premium UI 6.0)
|
|
============================================ */
|
|
|
|
/* 1. 统一背景装饰 - 漂浮光球 */
|
|
.bg-decoration {
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -100rpx; right: -100rpx;
|
|
width: 600rpx; height: 600rpx;
|
|
background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
|
|
filter: blur(60rpx);
|
|
border-radius: 50%;
|
|
opacity: 0.8;
|
|
animation: float 10s ease-in-out infinite;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 200rpx; left: -200rpx;
|
|
width: 500rpx; height: 500rpx;
|
|
background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
|
|
filter: blur(50rpx);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
animation: float 15s ease-in-out infinite reverse;
|
|
}
|
|
}
|
|
|
|
/* 2. 毛玻璃卡片基类 */
|
|
.glass-card {
|
|
background: $bg-glass;
|
|
backdrop-filter: blur(20rpx);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
box-shadow: $shadow-card;
|
|
border-radius: $radius-lg;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 3. 通用功能按钮 */
|
|
.btn-primary {
|
|
background: $gradient-brand;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
border-radius: $radius-round;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: $shadow-warm;
|
|
transition: all 0.2s $ease-out;
|
|
|
|
&:active {
|
|
transform: scale(0.96);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: $text-main;
|
|
font-weight: 600;
|
|
border-radius: $radius-round;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: $shadow-sm;
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
transition: all 0.2s $ease-out;
|
|
|
|
&:active {
|
|
transform: scale(0.96);
|
|
background: #fff;
|
|
}
|
|
} |