252 lines
6.9 KiB
Text
252 lines
6.9 KiB
Text
|
/* 全局设计系统 - 基于Material Design 3和现代移动端最佳实践 */
|
||
|
|
|
||
|
|
/* ===== 颜色系统 ===== */
|
||
|
|
:root {
|
||
|
|
/* 主色调 - 基于微信绿色调优化 */
|
||
|
|
--primary-50: #e8f5e8;
|
||
|
|
--primary-100: #c8e6c9;
|
||
|
|
--primary-200: #a5d6a7;
|
||
|
|
--primary-300: #81c784;
|
||
|
|
--primary-400: #66bb6a;
|
||
|
|
--primary-500: #4caf50;
|
||
|
|
--primary-600: #43a047;
|
||
|
|
--primary-700: #388e3c;
|
||
|
|
--primary-800: #2e7d32;
|
||
|
|
--primary-900: #1b5e20;
|
||
|
|
|
||
|
|
/* 中性色 - 现代化灰色系统 */
|
||
|
|
--neutral-0: #ffffff;
|
||
|
|
--neutral-50: #fafafa;
|
||
|
|
--neutral-100: #f5f5f5;
|
||
|
|
--neutral-200: #eeeeee;
|
||
|
|
--neutral-300: #e0e0e0;
|
||
|
|
--neutral-400: #bdbdbd;
|
||
|
|
--neutral-500: #9e9e9e;
|
||
|
|
--neutral-600: #757575;
|
||
|
|
--neutral-700: #616161;
|
||
|
|
--neutral-800: #424242;
|
||
|
|
--neutral-900: #212121;
|
||
|
|
|
||
|
|
/* 语义化颜色 */
|
||
|
|
--success: #4caf50;
|
||
|
|
--warning: #ff9800;
|
||
|
|
--error: #f44336;
|
||
|
|
--info: #2196f3;
|
||
|
|
|
||
|
|
/* 背景色 */
|
||
|
|
--bg-primary: #ffffff;
|
||
|
|
--bg-secondary: #fafafa;
|
||
|
|
--bg-tertiary: #f5f5f5;
|
||
|
|
--bg-overlay: rgba(0, 0, 0, 0.5);
|
||
|
|
|
||
|
|
/* 文字颜色 */
|
||
|
|
--text-primary: #212121;
|
||
|
|
--text-secondary: #757575;
|
||
|
|
--text-tertiary: #bdbdbd;
|
||
|
|
--text-inverse: #ffffff;
|
||
|
|
|
||
|
|
/* 边框颜色 */
|
||
|
|
--border-light: #f0f0f0;
|
||
|
|
--border-medium: #e0e0e0;
|
||
|
|
--border-dark: #d0d0d0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== 字体系统 ===== */
|
||
|
|
.text-display {
|
||
|
|
font-size: 48rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1.2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-headline {
|
||
|
|
font-size: 40rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 1.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-subtitle {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-body {
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-caption {
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-label {
|
||
|
|
font-size: 22rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 1.3;
|
||
|
|
letter-spacing: 0.5rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== 间距系统 ===== */
|
||
|
|
.p-xs { padding: 8rpx; }
|
||
|
|
.p-sm { padding: 16rpx; }
|
||
|
|
.p-md { padding: 24rpx; }
|
||
|
|
.p-lg { padding: 32rpx; }
|
||
|
|
.p-xl { padding: 48rpx; }
|
||
|
|
|
||
|
|
.px-xs { padding-left: 8rpx; padding-right: 8rpx; }
|
||
|
|
.px-sm { padding-left: 16rpx; padding-right: 16rpx; }
|
||
|
|
.px-md { padding-left: 24rpx; padding-right: 24rpx; }
|
||
|
|
.px-lg { padding-left: 32rpx; padding-right: 32rpx; }
|
||
|
|
.px-xl { padding-left: 48rpx; padding-right: 48rpx; }
|
||
|
|
|
||
|
|
.py-xs { padding-top: 8rpx; padding-bottom: 8rpx; }
|
||
|
|
.py-sm { padding-top: 16rpx; padding-bottom: 16rpx; }
|
||
|
|
.py-md { padding-top: 24rpx; padding-bottom: 24rpx; }
|
||
|
|
.py-lg { padding-top: 32rpx; padding-bottom: 32rpx; }
|
||
|
|
.py-xl { padding-top: 48rpx; padding-bottom: 48rpx; }
|
||
|
|
|
||
|
|
.m-xs { margin: 8rpx; }
|
||
|
|
.m-sm { margin: 16rpx; }
|
||
|
|
.m-md { margin: 24rpx; }
|
||
|
|
.m-lg { margin: 32rpx; }
|
||
|
|
.m-xl { margin: 48rpx; }
|
||
|
|
|
||
|
|
.mx-xs { margin-left: 8rpx; margin-right: 8rpx; }
|
||
|
|
.mx-sm { margin-left: 16rpx; margin-right: 16rpx; }
|
||
|
|
.mx-md { margin-left: 24rpx; margin-right: 24rpx; }
|
||
|
|
.mx-lg { margin-left: 32rpx; margin-right: 32rpx; }
|
||
|
|
.mx-xl { margin-left: 48rpx; margin-right: 48rpx; }
|
||
|
|
|
||
|
|
.my-xs { margin-top: 8rpx; margin-bottom: 8rpx; }
|
||
|
|
.my-sm { margin-top: 16rpx; margin-bottom: 16rpx; }
|
||
|
|
.my-md { margin-top: 24rpx; margin-bottom: 24rpx; }
|
||
|
|
.my-lg { margin-top: 32rpx; margin-bottom: 32rpx; }
|
||
|
|
.my-xl { margin-top: 48rpx; margin-bottom: 48rpx; }
|
||
|
|
|
||
|
|
/* ===== 圆角系统 ===== */
|
||
|
|
.rounded-none { border-radius: 0; }
|
||
|
|
.rounded-xs { border-radius: 4rpx; }
|
||
|
|
.rounded-sm { border-radius: 8rpx; }
|
||
|
|
.rounded-md { border-radius: 12rpx; }
|
||
|
|
.rounded-lg { border-radius: 16rpx; }
|
||
|
|
.rounded-xl { border-radius: 24rpx; }
|
||
|
|
.rounded-full { border-radius: 50%; }
|
||
|
|
|
||
|
|
/* ===== 阴影系统 ===== */
|
||
|
|
.shadow-none { box-shadow: none; }
|
||
|
|
.shadow-sm { box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); }
|
||
|
|
.shadow-md { box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); }
|
||
|
|
.shadow-lg { box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12); }
|
||
|
|
.shadow-xl { box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.16); }
|
||
|
|
|
||
|
|
/* ===== 布局系统 ===== */
|
||
|
|
.flex { display: flex; }
|
||
|
|
.flex-col { flex-direction: column; }
|
||
|
|
.flex-row { flex-direction: row; }
|
||
|
|
.items-center { align-items: center; }
|
||
|
|
.items-start { align-items: flex-start; }
|
||
|
|
.items-end { align-items: flex-end; }
|
||
|
|
.justify-center { justify-content: center; }
|
||
|
|
.justify-between { justify-content: space-between; }
|
||
|
|
.justify-around { justify-content: space-around; }
|
||
|
|
.justify-start { justify-content: flex-start; }
|
||
|
|
.justify-end { justify-content: flex-end; }
|
||
|
|
|
||
|
|
.flex-1 { flex: 1; }
|
||
|
|
.flex-none { flex: none; }
|
||
|
|
|
||
|
|
/* ===== 定位系统 ===== */
|
||
|
|
.relative { position: relative; }
|
||
|
|
.absolute { position: absolute; }
|
||
|
|
.fixed { position: fixed; }
|
||
|
|
|
||
|
|
/* ===== 宽高系统 ===== */
|
||
|
|
.w-full { width: 100%; }
|
||
|
|
.h-full { height: 100%; }
|
||
|
|
.w-screen { width: 100vw; }
|
||
|
|
.h-screen { height: 100vh; }
|
||
|
|
|
||
|
|
/* ===== 透明度系统 ===== */
|
||
|
|
.opacity-0 { opacity: 0; }
|
||
|
|
.opacity-25 { opacity: 0.25; }
|
||
|
|
.opacity-50 { opacity: 0.5; }
|
||
|
|
.opacity-75 { opacity: 0.75; }
|
||
|
|
.opacity-100 { opacity: 1; }
|
||
|
|
|
||
|
|
/* ===== 过渡动画系统 ===== */
|
||
|
|
.transition-all { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||
|
|
.transition-opacity { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||
|
|
.transition-transform { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
|
||
|
|
|
||
|
|
/* ===== 变换系统 ===== */
|
||
|
|
.scale-95 { transform: scale(0.95); }
|
||
|
|
.scale-100 { transform: scale(1); }
|
||
|
|
.scale-105 { transform: scale(1.05); }
|
||
|
|
|
||
|
|
.translate-y-full { transform: translateY(100%); }
|
||
|
|
.translate-y-0 { transform: translateY(0); }
|
||
|
|
|
||
|
|
/* ===== 安全区域适配 ===== */
|
||
|
|
.safe-area-top {
|
||
|
|
padding-top: constant(safe-area-inset-top);
|
||
|
|
padding-top: env(safe-area-inset-top);
|
||
|
|
}
|
||
|
|
|
||
|
|
.safe-area-bottom {
|
||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
.safe-area-left {
|
||
|
|
padding-left: constant(safe-area-inset-left);
|
||
|
|
padding-left: env(safe-area-inset-left);
|
||
|
|
}
|
||
|
|
|
||
|
|
.safe-area-right {
|
||
|
|
padding-right: constant(safe-area-inset-right);
|
||
|
|
padding-right: env(safe-area-inset-right);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== 触摸友好 ===== */
|
||
|
|
.touch-target {
|
||
|
|
min-height: 88rpx; /* 44px */
|
||
|
|
min-width: 88rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===== 文字颜色工具类 ===== */
|
||
|
|
.text-primary { color: var(--text-primary); }
|
||
|
|
.text-secondary { color: var(--text-secondary); }
|
||
|
|
.text-tertiary { color: var(--text-tertiary); }
|
||
|
|
.text-inverse { color: var(--text-inverse); }
|
||
|
|
.text-success { color: var(--success); }
|
||
|
|
.text-warning { color: var(--warning); }
|
||
|
|
.text-error { color: var(--error); }
|
||
|
|
.text-info { color: var(--info); }
|
||
|
|
|
||
|
|
/* ===== 背景颜色工具类 ===== */
|
||
|
|
.bg-primary { background-color: var(--bg-primary); }
|
||
|
|
.bg-secondary { background-color: var(--bg-secondary); }
|
||
|
|
.bg-tertiary { background-color: var(--bg-tertiary); }
|
||
|
|
.bg-success { background-color: var(--success); }
|
||
|
|
.bg-warning { background-color: var(--warning); }
|
||
|
|
.bg-error { background-color: var(--error); }
|
||
|
|
.bg-info { background-color: var(--info); }
|
||
|
|
|
||
|
|
/* ===== 边框工具类 ===== */
|
||
|
|
.border { border: 1rpx solid var(--border-medium); }
|
||
|
|
.border-light { border: 1rpx solid var(--border-light); }
|
||
|
|
.border-dark { border: 1rpx solid var(--border-dark); }
|
||
|
|
.border-t { border-top: 1rpx solid var(--border-medium); }
|
||
|
|
.border-b { border-bottom: 1rpx solid var(--border-medium); }
|
||
|
|
.border-l { border-left: 1rpx solid var(--border-medium); }
|
||
|
|
.border-r { border-right: 1rpx solid var(--border-medium); }
|