/* ===== 背景与页面 ===== */ .page { box-sizing: border-box; min-height: 100vh; padding: 68.7rpx 47.71rpx 80rpx; background-image: linear-gradient(180deg, #ffa64d 0%, #f5f5f5 30.1%); width: 100%; overflow-y: auto; overflow-x: hidden; } /* ===== 卡片容器 ===== */ .section, .card { background-color: #ffffff; border-radius: 24rpx; /* 略大圆角更现代 */ padding: 42rpx 32rpx 32rpx; box-shadow: 0 12rpx 36rpx rgba(0,0,0,0.08); } /* 顶部手机号 */ .phone { align-self: flex-start; margin-bottom: 8rpx; color: #323232; } /* ===== 表单字段 ===== */ .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: 22rpx; } .field:focus-within { border-color: #ff8d1a; box-shadow: 0 10rpx 24rpx rgba(255,141,26,0.14); } .field-row { display: flex; align-items: center; gap: 16rpx; padding-right: 16rpx; border-top: none; /* 覆盖你原 group 的上下边线视觉,改用阴影与留白 */ border-bottom: none; } .field-input { width: 100%; font-size: 30rpx; color: #1c2023; line-height: 44rpx; } .ph { color: #9aa0a6; } /* ===== 发送验证码按钮(text 充当按钮) ===== */ .code-btn { height: 44rpx; padding: 0 24rpx; background: #ff8d1a; border-radius: 14rpx; display: flex; align-items: center; justify-content: center; white-space: nowrap; color: #fff; font-size: 26rpx; font-weight: 600; 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; } /* ===== 分隔线 ===== */ .divider { margin-top: 20rpx; background-color: #eaeaea; height: 2rpx; border-radius: 2rpx; } /* ===== 主按钮 ===== */ .text-wrapper, .btn-primary { height: 96rpx; border-radius: 48rpx; /* 胶囊按钮 */ 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; } .text-wrapper:active, .btn-primary:active { transform: scale(0.985); } .btn-primary-text, .text_5 { color: #ffffff; font-size: 32rpx; font-weight: 700; } /* ===== 字体与基础色(沿用你原有 font 类命名) ===== */ .font { font-size: 30.53rpx; font-family: SourceHanSansCN; line-height: 1.45; color: #323232; } /* 你原有的一些类做柔性兼容(可保留以免他处引用报错) */ .group { margin-top: 20rpx; } /* 原本有上下边线,已在 field-row 中弱化处理 */ .text_1 { align-self: flex-start; margin-top: 16rpx; } .text_2 { line-height: 1.3; } .text_3 { color: #fff; } .text { margin-left: 0; line-height: 1.2; } .text_4 { line-height: 1.3; } .text_8 { align-self: flex-start; margin-top: 16rpx; } /* ===== 工具类 ===== */ .mt-16 { margin-top: 32rpx; } .mt-20 { margin-top: 40rpx; } .flex-1 { flex: 1; }