/** * 主题相关的SCSS混合器 * 统一管理所有与主题色 #0055A2 相关的样式 */ // 主题色变量 $theme-primary: #0055A2 !default; $theme-primary-light: #337AB7 !default; $theme-primary-dark: #003F73 !default; $theme-primary-gradient: rgba(0, 85, 162, 0.6) !default; // 渐变混合器 - 水平渐变 @mixin gradient-horizontal($start: $theme-primary, $end: $theme-primary-gradient) { background: linear-gradient(90deg, $start, $end); } // 渐变混合器 - 垂直渐变 @mixin gradient-vertical($start: $theme-primary, $end: $theme-primary-gradient) { background: linear-gradient(180deg, $start 0%, $end 100%); } // 渐变混合器 - 对角渐变 @mixin gradient-diagonal($start: $theme-primary, $end: $theme-primary-gradient) { background: linear-gradient(135deg, $start, $end); } // 主题按钮样式 @mixin theme-button() { @include gradient-horizontal(); color: #ffffff; border: none; border-radius: 40rpx; font-weight: 500; transition: all 0.3s ease; &:active { @include gradient-horizontal($theme-primary-dark, rgba(0, 63, 115, 0.6)); transform: scale(0.98); } } // 主题头部渐变 @mixin theme-header() { @include gradient-vertical(); color: #ffffff; padding: 0 0 120rpx 0; box-sizing: border-box; }