You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
1.9 KiB
SCSS
86 lines
1.9 KiB
SCSS
$primary-color: #2E7D32;
|
|
$primary-light: #4CAF50;
|
|
$primary-dark: #1B5E20;
|
|
$secondary-color: #1976D2;
|
|
$warning-color: #FF9800;
|
|
$danger-color: #F44336;
|
|
$success-color: #4CAF50;
|
|
$info-color: #2196F3;
|
|
|
|
$text-primary: #333333;
|
|
$text-secondary: #666666;
|
|
$text-hint: #999999;
|
|
$text-white: #FFFFFF;
|
|
|
|
$bg-primary: #F5F7FA;
|
|
$bg-card: #FFFFFF;
|
|
$bg-header: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
|
|
|
$border-radius: 16rpx;
|
|
$border-radius-lg: 24rpx;
|
|
$border-radius-xl: 32rpx;
|
|
|
|
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
|
$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
|
|
$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.16);
|
|
|
|
$spacing-xs: 8rpx;
|
|
$spacing-sm: 16rpx;
|
|
$spacing-md: 24rpx;
|
|
$spacing-lg: 32rpx;
|
|
$spacing-xl: 48rpx;
|
|
|
|
@mixin card-style {
|
|
background-color: $bg-card;
|
|
border-radius: $border-radius-lg;
|
|
box-shadow: $shadow-sm;
|
|
}
|
|
|
|
@mixin button-primary {
|
|
background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
|
color: $text-white;
|
|
border-radius: $border-radius-lg;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
@mixin button-secondary {
|
|
background: linear-gradient(135deg, $secondary-color 0%, #42A5F5 100%);
|
|
color: $text-white;
|
|
border-radius: $border-radius-lg;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@mixin button-danger {
|
|
background: linear-gradient(135deg, $danger-color 0%, #EF5350 100%);
|
|
color: $text-white;
|
|
border-radius: $border-radius-lg;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@mixin status-badge($color) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
background-color: rgba($color, 0.1);
|
|
color: $color;
|
|
}
|
|
|
|
@mixin page-container {
|
|
min-height: 100vh;
|
|
background-color: $bg-primary;
|
|
}
|
|
|
|
@mixin header-gradient {
|
|
background: $bg-header;
|
|
border-radius: 0 0 48rpx 48rpx;
|
|
} |