refactor(styles): centralize global theme tokens and mixins
This commit is contained in:
nepiedg
+127
-130
@@ -49,177 +49,174 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(52, 200, 160, 0.14), transparent 28%),
|
||||
radial-gradient(circle at top right, rgba(255, 255, 255, 0.78), transparent 24%),
|
||||
linear-gradient(180deg, #eef3f8 0%, #f5f7fb 38%, #fbfdff 100%);
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
background: $bg-page-gradient;
|
||||
color: $text-primary;
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-lg;
|
||||
line-height: $line-height-normal;
|
||||
}
|
||||
|
||||
// ---- 容器 ----
|
||||
.container {
|
||||
padding: 32rpx;
|
||||
padding: $spacing-xl;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// ---- 统一卡片 ----
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.64);
|
||||
box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.06);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
@include card-base;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
.card-light {
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
.card-solid {
|
||||
@include card-solid;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #1AA37A;
|
||||
.card-glass {
|
||||
@include card-glass;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: #667085;
|
||||
.card-elevated {
|
||||
@include card-elevated;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #98A2B3;
|
||||
.card-subtle {
|
||||
@include card-subtle;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
// ---- 文字工具类 ----
|
||||
.text-primary { color: $color-primary-dark; }
|
||||
.text-secondary { color: $text-secondary; }
|
||||
.text-muted { color: $text-muted; }
|
||||
.text-center { text-align: center; }
|
||||
.text-bold { font-weight: $font-weight-semibold; }
|
||||
|
||||
.text-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
// ---- Flex 工具类 ----
|
||||
.flex { display: flex; }
|
||||
.flex-center { @include flex-center; }
|
||||
.flex-between { @include flex-between; }
|
||||
.flex-col { @include flex-col; }
|
||||
.flex-1 { flex: 1; }
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gap-sm {
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.gap-md {
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.gap-lg {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.mt-sm {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.mt-md {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.mt-lg {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.mb-sm {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.mb-md {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.mb-lg {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
// ---- 间距工具类 ----
|
||||
.gap-sm { gap: $spacing-md; }
|
||||
.gap-md { gap: $spacing-lg; }
|
||||
.gap-lg { gap: $spacing-xl; }
|
||||
.mt-sm { margin-top: $spacing-md; }
|
||||
.mt-md { margin-top: $spacing-lg; }
|
||||
.mt-lg { margin-top: $spacing-xl; }
|
||||
.mb-sm { margin-bottom: $spacing-md; }
|
||||
.mb-md { margin-bottom: $spacing-lg; }
|
||||
.mb-lg { margin-bottom: $spacing-xl; }
|
||||
|
||||
// ---- 统一按钮 ----
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include btn-base;
|
||||
height: 96rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
font-size: $font-2xl;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.22);
|
||||
@include btn-primary;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
color: #111827;
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.08);
|
||||
@include btn-secondary;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: #1AA37A;
|
||||
border: 2rpx solid rgba(26, 163, 122, 0.32);
|
||||
@include btn-outline;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.66);
|
||||
box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.07);
|
||||
backdrop-filter: blur(28rpx);
|
||||
-webkit-backdrop-filter: blur(28rpx);
|
||||
// ---- 统一标签 ----
|
||||
.chip {
|
||||
@include chip;
|
||||
}
|
||||
|
||||
.surface-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.05);
|
||||
.chip-primary {
|
||||
@include chip-primary;
|
||||
}
|
||||
|
||||
.pill-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.68);
|
||||
color: #475467;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
.chip-muted {
|
||||
@include chip-muted;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@include badge;
|
||||
}
|
||||
|
||||
// ---- 进度条 ----
|
||||
.progress-bar {
|
||||
@include progress-bar;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
@include progress-fill;
|
||||
}
|
||||
|
||||
.progress-fill-done {
|
||||
@include progress-fill;
|
||||
background: linear-gradient(90deg, $color-primary, $color-primary-light);
|
||||
}
|
||||
|
||||
.progress-fill-pending {
|
||||
@include progress-fill;
|
||||
background: rgba($color-primary, 0.3);
|
||||
}
|
||||
|
||||
// ---- 圆环 ----
|
||||
.ring {
|
||||
@include ring;
|
||||
}
|
||||
|
||||
.ring-inner {
|
||||
@include ring-inner;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
}
|
||||
|
||||
.ring-value {
|
||||
font-size: $font-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.ring-label {
|
||||
font-size: $font-xs;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
// ---- 安全区域 ----
|
||||
.safe-area-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
@include safe-area-bottom;
|
||||
}
|
||||
|
||||
// ---- 底部占位 ----
|
||||
.bottom-safe {
|
||||
height: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
// ---- 骨架屏动画 ----
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
@keyframes fabFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-6rpx); }
|
||||
}
|
||||
|
||||
// ---- 分割线 ----
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: $border-divider;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user