/* ========== 基础 ========== */ .page { box-sizing: border-box; padding: 72rpx 32rpx 48rpx; background-color: #ffffff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } .logo { width: 220rpx; height: 220rpx; border-radius: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06); } .title-wrap { margin-top: 24rpx; align-items: center; text-align: center; } .title { font-size: 40rpx; line-height: 1.2; color: #1c2023; } .subtitle { margin-top: 12rpx; font-size: 28rpx; color: #666a73; } .bold-text { font-weight: 700; } /* ========== 卡片容器 ========== */ .card { width: 100%; margin-top: 32rpx; background: #fff; border-radius: 24rpx; box-shadow: 0 10rpx 28rpx rgba(0,0,0,0.06); padding: 28rpx; } /* ========== 标签切换 ========== */ .tabs { display: flex; align-items: center; gap: 32rpx; padding: 8rpx 4rpx 20rpx; border-bottom: 1rpx solid #f1f1f1; } .tab { font-size: 28rpx; color: #666a73; padding: 8rpx 6rpx; position: relative; transition: color .2s, transform .2s; } .tab.active { color: #1c2023; font-weight: 700; transform: translateY(-1rpx); } .tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12rpx; height: 6rpx; background: #ff8d1a; border-radius: 6rpx; } /* ========== 表单区 ========== */ .form { padding-top: 24rpx; } .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: 20rpx; } .field-input { width: 100%; font-size: 30rpx; color: #1c2023; line-height: 44rpx; } .field-input:focus { outline: none; border: none; } .field:focus-within { border-color: #ff8d1a; box-shadow: 0 8rpx 24rpx rgba(255,141,26,0.12); } .ph { color: #9aa0a6; } /* 输入+验证码并排 */ .field-row { display: flex; align-items: center; gap: 16rpx; padding-right: 16rpx; margin-bottom: 26rpx; } .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); active-opacity: 0.85; } .code-btn:active { transform: scale(0.98); } .code-btn-text { color: #fff; font-size: 24rpx; font-weight: 600; } /* 忘记密码链接 */ .link-right { margin-top: 16rpx; font-size: 26rpx; color: #666a73; align-self: flex-end; } /* 登录按钮 */ .btn-primary { margin-top: 32rpx; 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; } /* 协议区 */ .agreements { margin-top: 28rpx; display: flex; align-items: center; gap: 16rpx; } .checkbox { transform: scale(0.92); } .agreements-text { display: flex; align-items: center; flex-wrap: wrap; gap: 8rpx; line-height: 1.4; } .muted { color: #666a73; font-size: 26rpx; } .link { color: #ff5e00; font-size: 26rpx; } .link-strong { color: #ff5e00; font-size: 28rpx; font-weight: 700; } /* 注册区 */ .register { margin-top: 24rpx; text-align: center; display: flex; justify-content: center; gap: 8rpx; } /* 加入我们 CTA */ .cta-join { margin-top: 48rpx; padding: 16rpx 22rpx; border: 1rpx solid #ff8d1a; border-radius: 14rpx; display: flex; align-items: center; gap: 12rpx; } .cta-join-text { color: #ff8d1a; font-size: 28rpx; } .cta-join-img { width: 44rpx; height: 44rpx; } /* ========== 兼容你原先用到的类名(可选保留) ========== */ .font { font-size: 37.5rpx; color: #1c2023; } .font_2 { font-size: 30rpx; color: #1c2023; } .font_4 { font-size: 26rpx; color: #383838; } .font_5 { font-size: 26rpx; color: #ff5e00; } .toggle-text { font-size: 28rpx; transition: font-size .2s; } .toggle-text.active { font-size: 36rpx; font-weight: 700; } /* 简易工具类(若你全局已有可删除) */ .items-center { align-items: center; } .self-center { align-self: center; } .self-end { align-self: flex-end; } .justify-evenly { justify-content: space-evenly; } .relative { position: relative; } .shrink-0 { flex-shrink: 0; } .ml-2 { margin-left: 16rpx; } .ml-8 { margin-left: 32rpx; } .ml-12 { margin-left: 48rpx; } .mt-12 { margin-top: 24rpx; } .mt-20 { margin-top: 40rpx; }