/* ===== 页面基础 ===== */ .page { box-sizing: border-box; min-height: 100vh; padding: 64rpx 32rpx 48rpx; background: #ffffff; display: flex; flex-direction: column; align-items: center; } .logo { width: 200rpx; height: 200rpx; border-radius: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06); } .page-title { margin-top: 16rpx; font-size: 36rpx; color: #1c2023; font-weight: 700; } /* ===== 卡片容器 ===== */ .card { width: 100%; margin-top: 28rpx; background: #fff; border-radius: 24rpx; box-shadow: 0 10rpx 28rpx rgba(0,0,0,0.06); padding: 28rpx; } .card-title { font-size: 32rpx; color: #1c2023; font-weight: 700; padding-bottom: 12rpx; border-bottom: 1rpx solid #f1f1f1; } /* ===== 表单 ===== */ .form { padding-top: 20rpx; } .field { background: #fff; border: 1rpx solid #e9e9ec; border-radius: 16rpx; padding: 20rpx 24rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04); margin-top: 18rpx; } .field:focus-within { border-color: #ff8d1a; box-shadow: 0 8rpx 24rpx rgba(255,141,26,0.12); } .field-input { width: 100%; font-size: 30rpx; color: #1c2023; line-height: 44rpx; } .ph { color: #9aa0a6; } /* 输入 + 发送验证码 并排 */ .field-row { display: flex; align-items: center; gap: 16rpx; padding-right: 16rpx; } .flex-1 { flex: 1; } .field-last { margin-bottom: 26rpx; } /* ===== 发送验证码按钮(用 text 作为按钮) ===== */ .code-btn { height: 44rpx; padding: 0 24rpx; background: #ff8d1a; border-radius: 14rpx; display: flex; align-items: center; justify-content: center; white-space: nowrap; box-shadow: 0 8rpx 18rpx rgba(255,141,26,0.25); color: #fff; font-size: 24rpx; font-weight: 600; transition: transform .08s ease-in-out, opacity .2s; } .code-btn:active { transform: scale(0.98); } .code-btn.disabled { opacity: 0.55; box-shadow: none; } /* ===== 右侧链接 ===== */ .link-right { margin-top: 14rpx; font-size: 26rpx; color: #666a73; align-self: flex-end; } /* ===== 主按钮 ===== */ .btn-primary { margin-top: 28rpx; height: 96rpx; border-radius: 18rpx; background: linear-gradient(180deg, #ff9a2d 0%, #ff8d1a 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 14rpx 28rpx rgba(255,141,26,0.28); transition: transform .06s ease-in-out; } .btn-primary:active { transform: scale(0.985); } .btn-primary-text { color: #ffffff; font-size: 32rpx; font-weight: 700; } /* ===== 可选:保留一些你原先可能依赖的工具类,避免其它页面受影响 ===== */ .flex-col { display: flex; flex-direction: column; } .flex-row { display: flex; flex-direction: row; } .items-center { align-items: center; } .self-center { align-self: center; } .self-stretch { align-self: stretch; } .self-start { align-self: flex-start; } .relative { position: relative; } .shrink-0 { flex-shrink: 0; } .mt-20 { margin-top: 40rpx; } .mt-22 { margin-top: 44rpx; } .ml-12 { margin-left: 24rpx; }