// ============================================================= // Apple HIG 按钮设计规范(全局统一) // 设计原则:清晰层级 / 统一圆角 / 充足点击热区(≥44pt) / 流畅按压反馈 // 颜色通过全局 CSS 变量(--primaryColor 等) 驱动,跟随主题切换 // 所有变量均带 fallback,未注入时也保证可用 // ============================================================= // ---------- 基础按钮 ---------- .btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: none; outline: none; font-family: inherit; font-weight: 600; letter-spacing: 0.3rpx; border-radius: 14rpx; // iOS 标准圆角 min-height: 88rpx; // ≥44pt 点击热区 padding: 0 40rpx; font-size: 30rpx; line-height: 1.2; color: var(--textPrimary, #3D3630); background: var(--btn-secondary-bg, rgba(0, 0, 0, 0.06)); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer; white-space: nowrap; // 兼容小程序 text 子节点 text { line-height: 1.2; } } // ---------- 主按钮:填充主题色(渐变) ---------- .btn--primary { background: var(--gradientSoft, linear-gradient(135deg, #C68E3F 0%, #D4AA60 100%)); color: #ffffff; box-shadow: 0 8rpx 24rpx rgba(var(--primaryColorRGB, 198, 142, 63), 0.28); } .btn--primary:active { transform: scale(0.97); opacity: 0.92; box-shadow: 0 4rpx 12rpx rgba(var(--primaryColorRGB, 198, 142, 63), 0.2); } // ---------- 强调按钮:纯色主题填充(无渐变,更克制) ---------- .btn--solid { background: var(--primaryColor, #C68E3F); color: #ffffff; } .btn--solid:active { transform: scale(0.97); opacity: 0.9; } // ---------- 次要按钮:iOS 经典灰底 ---------- .btn--secondary { background: var(--btn-secondary-bg, rgba(0, 0, 0, 0.06)); color: var(--textPrimary, #3D3630); } .btn--secondary:active { transform: scale(0.97); opacity: 0.85; } // ---------- 描边/幽灵按钮:透明底 + 主题色 + 细边框 ---------- .btn--ghost { background: transparent; color: var(--primaryColor, #C68E3F); border: 2rpx solid var(--primaryColor, #C68E3F); } .btn--ghost:active { transform: scale(0.97); background: rgba(var(--primaryColorRGB, 198, 142, 63), 0.08); } // ---------- 纯文字按钮:无底无框 ---------- .btn--plain { background: transparent; color: var(--primaryColor, #C68E3F); min-height: 72rpx; padding: 0 24rpx; } .btn--plain:active { opacity: 0.6; } // ---------- 危险按钮 ---------- .btn--danger { background: var(--dangerColor, #C75B4A); color: #ffffff; } .btn--danger:active { transform: scale(0.97); opacity: 0.9; } // ---------- 图标按钮(圆形) ---------- .btn--icon { width: 72rpx; height: 72rpx; min-height: 0; padding: 0; border-radius: 50%; background: var(--btn-secondary-bg, rgba(0, 0, 0, 0.06)); color: var(--textPrimary, #3D3630); } .btn--icon:active { transform: scale(0.92); opacity: 0.85; } // ---------- 尺寸变体 ---------- .btn--block { display: flex; width: 100%; } .btn--sm { min-height: 64rpx; padding: 0 28rpx; font-size: 26rpx; border-radius: 12rpx; } .btn--lg { min-height: 96rpx; font-size: 32rpx; border-radius: 16rpx; } .btn--pill { border-radius: 999rpx; } // ---------- 禁用态 ---------- .btn[disabled], .btn.is-disabled, .btn.disabled { opacity: 0.4; pointer-events: none; } // ---------- 按钮组(Action Sheet 风格,iOS 等分排列) ---------- .btn-group { display: flex; align-items: stretch; gap: 24rpx; } .btn-group .btn { flex: 1; }