.login-bg { min-height: 100vh; background: #f7f8fa; display: flex; align-items: center; justify-content: center; } .login-box { width: 90vw; max-width: 600rpx; background: #fff; border-radius: 24rpx; box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08); padding: 60rpx 40rpx 40rpx 40rpx; display: flex; flex-direction: column; align-items: center; } .login-title { font-size: 40rpx; font-weight: bold; margin-bottom: 40rpx; } .login-tabs { display: flex; width: 100%; margin-bottom: 30rpx; } .tab { flex: 1; text-align: center; font-size: 28rpx; padding: 16rpx 0; color: #888; border-bottom: 4rpx solid transparent; } .tab.active { color: #7ac81e; border-bottom: 4rpx solid #7ac81e; font-weight: bold; } .login-form { width: 100%; margin-bottom: 20rpx; } .login-input { width: 90%; height: 80rpx; border: 1rpx solid #eee; border-radius: 12rpx; margin-bottom: 20rpx; padding: 0 24rpx; font-size: 28rpx; background: #f7f8fa; } .code-row { display: flex; align-items: center; } .code-input { flex: 1; margin-right: 16rpx; } .code-btn { height: 80rpx; background: #7ac81e; color: #fff; border-radius: 12rpx; padding: 0 24rpx; font-size: 28rpx; } .login-btn { width: 100%; height: 80rpx; background: #7ac81e; color: #fff; font-size: 32rpx; border-radius: 40rpx; margin-bottom: 20rpx; } .login-btn:disabled { background: #b2e59e; } .login-agree { display: flex; align-items: center; font-size: 24rpx; color: #888; margin-bottom: 30rpx; } .login-agree .link { color: #7ac81e; margin: 0 4rpx; } .login-divider { width: 100%; text-align: center; color: #bbb; font-size: 24rpx; margin: 30rpx 0 20rpx 0; } .wechat-btn, .qq-btn { width: 100%; height: 70rpx; border-radius: 35rpx; font-size: 28rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 16rpx; border: 1rpx solid #eee; background: #f7f8fa; } .wechat-btn { color: #09bb07; border: 1rpx solid #09bb07; } .qq-btn { color: #498ff6; border: 1rpx solid #498ff6; } .icon { width: 40rpx; height: 40rpx; margin-right: 16rpx; } .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */ display: flex; align-items: center; justify-content: center; z-index: 999; /* 确保在最上层 */ } .register-popup-content { background-color: #fff; border-radius: 24rpx; width: 85vw; /* 弹窗宽度 */ max-width: 600rpx; padding: 60rpx 40rpx; position: relative; /* 用于定位关闭按钮 */ display: flex; flex-direction: column; align-items: center; } .register-popup-content .popup-title { font-size: 40rpx; font-weight: bold; margin-bottom: 40rpx; color: #333; } .register-form { width: 100%; margin-bottom: 30rpx; } /* 注册表单的输入框样式,可以复用登录的 login-input */ .register-form .login-input { width: 90%; /* 输入框宽度调整为100% */ height: 80rpx; border: 1rpx solid #eee; border-radius: 12rpx; margin-bottom: 20rpx; padding: 0 24rpx; font-size: 28rpx; background: #f7f8fa; } /* 注册表单的获取验证码行样式,可以复用登录的 code-row */ .register-form .code-row { display: flex; align-items: center; margin-bottom: 20rpx; /* 增加底部间距 */ } /* 注册表单的验证码输入框样式,可以复用登录的 code-input */ .register-form .code-input { flex: 1; margin-right: 16rpx; width: auto; /* 验证码输入框宽度自适应 */ } /* 注册表单的获取验证码按钮样式,可以复用登录的 code-btn */ .register-form .code-btn { height: 80rpx; background: #7ac81e; color: #fff; border-radius: 12rpx; padding: 0 24rpx; font-size: 28rpx; } /* 注册按钮样式,可以复用登录的 login-btn */ .register-popup-content .login-btn { width: 100%; height: 80rpx; background: #7ac81e; color: #fff; font-size: 32rpx; border-radius: 40rpx; margin-bottom: 0; /* 移除底部间距 */ } .close-btn { position: absolute; top: 20rpx; right: 20rpx; font-size: 36rpx; /* 调整文本大小 */ color: #999; padding: 10rpx; /* 可以加个边框或者背景 */ /* border: 1rpx solid #999; */ /* border-radius: 50%; */ /* background-color: #eee; */ } /* 如果你没有引入uni-ui,可以使用文本X并给样式 */ /* .close-btn text { font-size: 36rpx; } */ .form-actions { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: -10rpx; margin-bottom: 20rpx; padding: 0 10rpx; } .login-link { color: #7ac81e; font-size: 26rpx; } .forgot-password-link { color: #7ac81e; font-size: 26rpx; }