// 必须转发和使用 theme.scss
|
@forward './theme.scss';
|
@use './theme.scss' as *;
|
|
// ============================================
|
// 全局 SCSS 变量（建议直接复用，如有特殊设计需求可按需修改）
|
// ============================================
|
|
// 屏幕适配（设计稿基准 750rpx）
|
$screen-width: 750rpx;
|
$page-padding: 32rpx; // 页面左右安全边距
|
$page-spacing: 32rpx;
|
$max-content-width: 686rpx; // 750 - 32*2，内容最大宽度
|
|
// 间距（8px 网格系统）
|
$spacing-xs: 8rpx;
|
$spacing-sm: 16rpx;
|
$spacing-md: 24rpx;
|
$spacing-lg: 32rpx;
|
$spacing-xl: 48rpx;
|
|
// 圆角（语义化）
|
$radius-xs: 4rpx; // 小元素：标签、徽章
|
$radius-sm: 8rpx; // 卡片内小元素
|
$radius-md: 12rpx; // 常规卡片
|
$radius-lg: 16rpx; // 大卡片
|
$radius-xl: 20rpx; // 特大卡片
|
$radius-button: 48rpx; // 按钮专用（全圆角，符合主流小程序）
|
$radius-round: 999rpx; // 完全圆形
|
|
// 按钮高度（新增）
|
$button-height-sm: 64rpx; // 小按钮（次要操作）
|
$button-height-md: 80rpx; // 常规按钮（主流标准）
|
$button-height-lg: 96rpx; // 大按钮（主要操作、底部固定）
|
|
// 阴影（语义化）
|
$shadow-card: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); // 卡片阴影
|
$shadow-card-hover: 0 4rpx 20rpx rgba(0, 0, 0, 0.12); // 卡片悬浮
|
$shadow-float: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); // 浮层阴影（如筛选栏、底部操作栏）
|
$shadow-popup: 0 8rpx 32rpx rgba(0, 0, 0, 0.15); // 弹窗阴影
|
|
// 字体大小
|
$font-size-xs: 22rpx;
|
$font-size-sm: 24rpx;
|
$font-size-md: 28rpx;
|
$font-size-lg: 32rpx;
|
$font-size-xl: 36rpx;
|
$font-size-xxl: 40rpx;
|
|
// 行高
|
$line-height-tight: 1.3;
|
$line-height-normal: 1.5;
|
$line-height-loose: 1.8;
|
|
// 字重
|
$font-weight-normal: 400;
|
$font-weight-medium: 500;
|
$font-weight-semibold: 600;
|
$font-weight-bold: 700;
|
|
// 过渡动画
|
$transition-fast: 0.15s ease;
|
$transition-base: 0.25s ease;
|
$transition-slow: 0.35s ease;
|
|
// ============================================
|
// 常用 Mixin
|
// ============================================
|
// 单行文本省略
|
@mixin text-ellipsis {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
// 多行文本省略
|
@mixin text-ellipsis-multi($lines: 2) {
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: $lines;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
// 清除浮动
|
@mixin clearfix {
|
&::after {
|
content: '';
|
display: table;
|
clear: both;
|
}
|
}
|
|
// 水平垂直居中
|
@mixin flex-center {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
// 横向滚动容器（微信小程序兼容）
|
@mixin scroll-x-container {
|
white-space: nowrap;
|
}
|
|
// 横向滚动子项（微信小程序兼容，必须配合 scroll-x-container 使用）
|
@mixin scroll-x-item($width) {
|
display: inline-block;
|
width: $width;
|
vertical-align: top;
|
white-space: normal; // 恢复子项内部换行
|
}
|
|
// Button 样式重置与保护
|
// 使用方法：@include button-reset;
|
@mixin button-reset {
|
padding: 0;
|
margin: 0;
|
line-height: normal;
|
text-align: inherit;
|
white-space: nowrap; // 强制不换行
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box; // 关键：确保 padding 和 border 不会撑大尺寸
|
|
&::after {
|
border: none;
|
}
|
}
|
