/* ===== 基础布局 ===== */ .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-head { padding-bottom: 12rpx; border-bottom: 1rpx solid #f1f1f1; } .card-title { font-size: 32rpx; color: #1c2023; font-weight: 700; } .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; } /* ===== 验证码按钮 ===== */ .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); transition: transform .08s ease-in-out, opacity .2s; } .code-btn:active { transform: scale(0.98); } .code-btn.disabled { opacity: 0.55; box-shadow: none; } .code-btn-text { color: #fff; font-size: 24rpx; font-weight: 600; } /* ===== 协议区 ===== */ .agreements { margin-top: 22rpx; display: flex; align-items: center; gap: 14rpx; } .agreements-text { display: flex; align-items: center; gap: 8rpx; flex-wrap: wrap; } .muted { color: #666a73; font-size: 26rpx; } .link { color: #ff5e00; font-size: 26rpx; } .link-strong { color: #ff5e00; font-size: 28rpx; font-weight: 700; } /* ===== 主按钮 ===== */ .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; } /* ===== 底部引导 ===== */ .footer-tip { margin-top: 28rpx; display: flex; align-items: center; gap: 8rpx; } /* ===== 兼容你原先的类名(可选保留,避免影响其他样式) ===== */ .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-start { align-self: flex-start; } .self-stretch { align-self: stretch; } .relative { position: relative; } .shrink-0 { flex-shrink: 0; } .mt-20 { margin-top: 40rpx; } .mt-22 { margin-top: 44rpx; } /* 你原文件的 mt-22 语义留存 */ .mt-26 { margin-top: 52rpx; } .ml-13 { margin-left: 26rpx; } .ml-18 { margin-left: 36rpx; } /* 旧色彩类(若其他页面使用到,可保留) */ .text { color: #1c2023; } .font { font-size: 36rpx; } .font_2 { font-size: 26rpx; color: #1c2023; } .text_10, .text_11 { font-size: 26rpx; } /* 你原先的按钮类名占位(防止引用处报错) */ .text-wrapper_6 { }