398 lines
7.0 KiB
SCSS
398 lines
7.0 KiB
SCSS
/* 全局样式配置文件 */
|
|
|
|
/* ==================== 主题色系 ==================== */
|
|
|
|
/* 浅色主题 */
|
|
:root {
|
|
--bg-primary: #f5f7fa;
|
|
--bg-secondary: #ffffff;
|
|
--bg-tertiary: #fafafa;
|
|
--text-primary: #333333;
|
|
--text-secondary: #888888;
|
|
--text-tertiary: #999999;
|
|
--border-color: #e0e0e0;
|
|
--border-light: #f0f0f0;
|
|
--shadow-color: rgba(0, 0, 0, 0.05);
|
|
--shadow-strong: rgba(0, 0, 0, 0.1);
|
|
--accent-color: #667eea;
|
|
--accent-hover: #5568d3;
|
|
--gradient-start: #f5f7fa;
|
|
--gradient-end: #c3cfe2;
|
|
--divider-color: #e0e0e0;
|
|
--card-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
--card-border: 1rpx solid #e0e0e0;
|
|
--radius-sm: 8rpx;
|
|
--radius-md: 12rpx;
|
|
--radius-lg: 16rpx;
|
|
--radius-xl: 24rpx;
|
|
--spacing-xs: 8rpx;
|
|
--spacing-sm: 12rpx;
|
|
--spacing-md: 16rpx;
|
|
--spacing-lg: 20rpx;
|
|
--spacing-xl: 24rpx;
|
|
--spacing-xxl: 32rpx;
|
|
--font-xs: 20rpx;
|
|
--font-sm: 24rpx;
|
|
--font-md: 28rpx;
|
|
--font-lg: 32rpx;
|
|
--font-xl: 36rpx;
|
|
--font-xxl: 42rpx;
|
|
--line-height-sm: 1.4;
|
|
--line-height-md: 1.5;
|
|
--line-height-lg: 1.6;
|
|
}
|
|
|
|
/* 深色主题 */
|
|
.theme-dark {
|
|
--bg-primary: #1a1a1a;
|
|
--bg-secondary: #2d2d2d;
|
|
--bg-tertiary: #3a3a3a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #aaaaaa;
|
|
--text-tertiary: #888888;
|
|
--border-color: #404040;
|
|
--border-light: #3a3a3a;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--shadow-strong: rgba(0, 0, 0, 0.5);
|
|
--accent-color: #667eea;
|
|
--accent-hover: #7a8fd8;
|
|
--gradient-start: #1a1a1a;
|
|
--gradient-end: #2d2d2d;
|
|
--divider-color: #404040;
|
|
--card-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
|
--card-border: 1rpx solid #404040;
|
|
}
|
|
|
|
/* ==================== 响应式断点 ==================== */
|
|
|
|
/* 超小屏手机 */
|
|
@media screen and (max-width: 375rpx) {
|
|
:root {
|
|
--font-xs: 18rpx;
|
|
--font-sm: 22rpx;
|
|
--font-md: 26rpx;
|
|
--font-lg: 30rpx;
|
|
--spacing-xs: 6rpx;
|
|
--spacing-sm: 10rpx;
|
|
--spacing-md: 14rpx;
|
|
--spacing-lg: 18rpx;
|
|
}
|
|
}
|
|
|
|
/* 小屏手机 */
|
|
@media screen and (min-width: 376rpx) and (max-width: 480rpx) {
|
|
:root {
|
|
--font-xs: 20rpx;
|
|
--font-sm: 24rpx;
|
|
--font-md: 28rpx;
|
|
--font-lg: 32rpx;
|
|
--spacing-xs: 8rpx;
|
|
--spacing-sm: 12rpx;
|
|
--spacing-md: 16rpx;
|
|
--spacing-lg: 20rpx;
|
|
}
|
|
}
|
|
|
|
/* 中等屏幕手机 */
|
|
@media screen and (min-width: 481rpx) and (max-width: 600rpx) {
|
|
:root {
|
|
--font-xs: 22rpx;
|
|
--font-sm: 26rpx;
|
|
--font-md: 30rpx;
|
|
--font-lg: 34rpx;
|
|
--spacing-xs: 10rpx;
|
|
--spacing-sm: 14rpx;
|
|
--spacing-md: 18rpx;
|
|
--spacing-lg: 22rpx;
|
|
}
|
|
}
|
|
|
|
/* 大屏手机/平板 */
|
|
@media screen and (min-width: 601rpx) and (max-width: 750rpx) {
|
|
:root {
|
|
--font-xs: 24rpx;
|
|
--font-sm: 28rpx;
|
|
--font-md: 32rpx;
|
|
--font-lg: 36rpx;
|
|
--spacing-xs: 12rpx;
|
|
--spacing-sm: 16rpx;
|
|
--spacing-md: 20rpx;
|
|
--spacing-lg: 24rpx;
|
|
}
|
|
}
|
|
|
|
/* 超大屏/桌面 */
|
|
@media screen and (min-width: 751rpx) {
|
|
:root {
|
|
--font-xs: 26rpx;
|
|
--font-sm: 30rpx;
|
|
--font-md: 34rpx;
|
|
--font-lg: 38rpx;
|
|
--spacing-xs: 14rpx;
|
|
--spacing-sm: 18rpx;
|
|
--spacing-md: 22rpx;
|
|
--spacing-lg: 26rpx;
|
|
}
|
|
}
|
|
|
|
/* ==================== 通用工具类 ==================== */
|
|
|
|
/* 布局 */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
|
|
/* 间距 */
|
|
.gap-xs {
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.gap-sm {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.gap-md {
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.gap-lg {
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.padding-xs {
|
|
padding: var(--spacing-xs);
|
|
}
|
|
|
|
.padding-sm {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.padding-md {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.padding-lg {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.padding-xl {
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
.margin-xs {
|
|
margin: var(--spacing-xs);
|
|
}
|
|
|
|
.margin-sm {
|
|
margin: var(--spacing-sm);
|
|
}
|
|
|
|
.margin-md {
|
|
margin: var(--spacing-md);
|
|
}
|
|
|
|
.margin-lg {
|
|
margin: var(--spacing-lg);
|
|
}
|
|
|
|
.margin-xl {
|
|
margin: var(--spacing-xl);
|
|
}
|
|
|
|
/* 文本 */
|
|
.text-xs {
|
|
font-size: var(--font-xs);
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: var(--font-sm);
|
|
}
|
|
|
|
.text-md {
|
|
font-size: var(--font-md);
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: var(--font-lg);
|
|
}
|
|
|
|
.text-xl {
|
|
font-size: var(--font-xl);
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.text-tertiary {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* 卡片 */
|
|
.card {
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--card-shadow);
|
|
border: var(--card-border);
|
|
}
|
|
|
|
.card-hover {
|
|
box-shadow: var(--shadow-strong);
|
|
transform: translateY(-2rpx);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.btn {
|
|
background: var(--accent-color);
|
|
color: #ffffff;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
font-size: var(--font-md);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-hover {
|
|
background: var(--accent-hover);
|
|
transform: translateY(-2rpx);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--accent-color);
|
|
border: 2rpx solid var(--accent-color);
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
font-size: var(--font-sm);
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: var(--spacing-md) var(--spacing-xl);
|
|
font-size: var(--font-lg);
|
|
}
|
|
|
|
/* 输入框 */
|
|
.input {
|
|
background: var(--bg-secondary);
|
|
border: var(--card-border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-size: var(--font-md);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.input-focus {
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 4rpx var(--shadow-color);
|
|
}
|
|
|
|
/* 分割线 */
|
|
.divider {
|
|
height: 1rpx;
|
|
background: var(--divider-color);
|
|
margin: var(--spacing-md) 0;
|
|
}
|
|
|
|
.divider-vertical {
|
|
width: 1rpx;
|
|
background: var(--divider-color);
|
|
margin: 0 var(--spacing-md);
|
|
}
|
|
|
|
/* 徽章 */
|
|
.badge {
|
|
background: var(--accent-color);
|
|
color: #ffffff;
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
font-size: var(--font-xs);
|
|
}
|
|
|
|
/* 骨架 */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
|
|
border-radius: var(--radius-sm);
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
/* 隐藏滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 6rpx;
|
|
height: 6rpx;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
/* 安全区域适配 */
|
|
.safe-area-bottom {
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.safe-area-top {
|
|
padding-top: constant(safe-area-inset-top);
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
/* 横屏适配 */
|
|
@media screen and (orientation: landscape) {
|
|
.safe-area-bottom {
|
|
padding-bottom: constant(safe-area-inset-left);
|
|
padding-bottom: env(safe-area-inset-left);
|
|
}
|
|
} |