/* ===== 基础设置 ===== */ .page { min-height: 100vh; width: 100%; box-sizing: border-box; padding: 220rpx 32rpx 48rpx; background-image: linear-gradient(180deg, #ffeed9 0%, rgba(245,245,245,0) 120%); } /* 卡片容器 */ .section { margin: 0 auto; padding: 48rpx 40rpx 40rpx; background-color: #ffffff; border-radius: 32rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08); max-width: 680rpx; /* 更大屏适配 */ } /* 顶部 Logo 与标题 */ .logo-area { display: flex; flex-direction: column; align-items: center; } .logo { width: 232rpx; height: 232rpx; border-radius: 28rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.12); } .title { margin-top: 28rpx; color: #1c2023; font-size: 44rpx; line-height: 1.32; font-weight: 600; font-family: AlibabaPuHuiTi; text-align: center; letter-spacing: 0.5rpx; } /* 按钮区域 */ .btn-group { margin-top: 56rpx; display: grid; grid-auto-rows: min-content; row-gap: 22rpx; } /* 按钮基类 */ .btn { width: 100%; box-sizing: border-box; border-radius: 20rpx; padding: 32rpx 28rpx; display: flex; align-items: center; justify-content: center; transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease, border-color 120ms ease; } /* 主按钮:橙色 */ .btn--primary { background-color: #ff8d1a; box-shadow: 0 10rpx 20rpx rgba(255,141,26,0.25); } /* 描边按钮:白底橙边 */ .btn--outline { background-color: #ffffff; border: 4rpx solid #ff8d1a; } /* 按钮文字 */ .btn-text { font-size: 34rpx; line-height: 1.2; font-weight: 700; color: #ff8d1a; font-family: SourceHanSansCN; } .btn-text--light { color: #ffffff; } /* 交互态(按压反馈) */ .btn--hover { transform: translateY(2rpx) scale(0.99); opacity: 0.96; } .btn--primary.btn--hover { background-color: #e67807; /* 按压加深 */ } /* 兼容你原有的工具类(如仍有使用可保留) */ .mt-9 { margin-top: 16rpx; } /* 可选:为小屏做一点收紧(不影响大屏) */ @media (max-width: 360px) { .section { padding: 40rpx 28rpx 32rpx; } .btn { padding: 28rpx 24rpx; } .title { font-size: 42rpx; } }