.popup-mask[data-v-af3fbef1] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); /* 半透明遮罩 */ z-index: 999; display: flex; align-items: center; justify-content: center; } .popup-content[data-v-af3fbef1] { width: 80%; /* 宽度大概屏幕 80% */ max-height: 70%; background-color: #fff; border-radius: 0.5rem; display: flex; flex-direction: column; overflow: hidden; } .popup-header[data-v-af3fbef1] { height: 3.125rem; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 0.0625rem solid #eee; } .popup-title[data-v-af3fbef1] { font-size: 1rem; font-weight: bold; color: #333; } .close-icon[data-v-af3fbef1] { position: absolute; right: 0.9375rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: #999; line-height: 1; padding: 0.3125rem; /* 增加点击区域 */ } .popup-body[data-v-af3fbef1] { padding: 0.9375rem; font-size: 0.875rem; color: #666; line-height: 1.6; max-height: 18.75rem; /* 限制高度滚动 */ box-sizing: border-box; } .popup-footer[data-v-af3fbef1] { padding: 0.9375rem; border-top: 0.0625rem solid #eee; } .confirm-btn[data-v-af3fbef1] { background: linear-gradient(90deg, #FF6F00 0%, #FF5722 100%); color: #fff; font-size: 0.9375rem; font-weight: bold; height: 2.5rem; line-height: 2.5rem; border-radius: 0.25rem; box-shadow: 0 0.125rem 0.3125rem rgba(255, 87, 34, 0.2); } .confirm-btn[data-v-af3fbef1]::after { border: none; } /* 引用样式文件 */ /* 页面容器 */ .container { height: 100vh; /* 强制全屏高度 */ overflow: hidden; /* 禁止溢出滚动 */ background-color: #fff; position: relative; display: flex; flex-direction: column; } /* 顶部 Banner */ .banner-area { width: 100%; position: relative; /* 移除高度限制,依靠 content-card 的 margin-top 控制遮挡 */ } .banner-img { width: 100%; display: block; /* 消除图片底部空隙 */ } /* 内容卡片 - 核心布局技巧 */ .content-card { flex: 1; background-color: #fff; margin-top: -2.5rem; /* 向上覆盖 banner,形成遮挡 */ /* 实现向上凸起的圆弧效果: 使用 border-radius 实现顶部椭圆 */ border-radius: 100% 100% 0 0 / 1.875rem 1.875rem 0 0; position: relative; z-index: 10; padding: 0 1.5625rem; display: flex; flex-direction: column; align-items: center; } /* 悬浮 Logo */ .logo-wrapper { margin-top: -2.1875rem; /* Logo 向上悬浮 */ margin-bottom: 1.5625rem; /* 添加白色光晕/阴影增强悬浮感 */ border-radius: 50%; box-shadow: 0 0.3125rem 1.25rem rgba(0, 0, 0, 0.1); background-color: #fff; padding: 0.25rem; /* 白色边框 */ } .logo-img { width: 3.75rem; height: 3.75rem; border-radius: 50%; display: block; } /* Tabs */ .tabs { display: flex; align-items: center; margin-bottom: 1.875rem; } .tab-item { display: flex; flex-direction: column; align-items: center; padding: 0 0.9375rem; } .tab-text { font-size: 1rem; color: #999; font-weight: 500; margin-bottom: 0.3125rem; } .tab-item.active .tab-text { color: #FF5722; /* 主色调橙色 */ font-weight: bold; font-size: 1.125rem; } .tab-indicator { width: 1.25rem; height: 0.1875rem; background-color: #FF5722; border-radius: 0.09375rem; } .divider { width: 1px; height: 0.9375rem; background-color: #eee; margin: 0 0.3125rem; } /* 表单 */ .form-area { width: 100%; } .input-group { display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; padding: 0.9375rem 0; margin-bottom: 0.625rem; } .area-code { display: flex; align-items: center; margin-right: 0.625rem; font-size: 1rem; color: #333; height: 100%; /* 确保高度撑满 */ } .arrow { font-size: 0.625rem; color: #999; margin-left: 0.25rem; /* margin-top: 4rpx; 移除微调,依靠 flex 居中 */ } .input { flex: 1; font-size: 0.9375rem; } .get-code-btn { background-color: #FFF0E9; /* 浅橙色背景 */ padding: 0.46875rem 0.9375rem; /* 增大内边距 */ border-radius: 1.25rem; /* 稍微增大圆角 */ display: flex; align-items: center; justify-content: center; } .code-text { color: #FF5722; font-size: 0.875rem; /* 增大字体 */ line-height: 1; /* 修正文字垂直居中 */ } .eye-icon { padding: 0.3125rem; display: flex; align-items: center; justify-content: center; } .svg-icon { width: 1.25rem; height: 1.25rem; } .forgot-pwd { width: 100%; text-align: right; padding-top: 0.625rem; font-size: 0.8125rem; color: #666; } /* 按钮 */ .login-btn { /* 鲜亮的橙色渐变 */ background: linear-gradient(90deg, #FF9E60 0%, #FF5722 100%); color: #fff; border-radius: 1.5625rem; margin-top: 1.875rem; margin-bottom: 1.25rem; font-size: 1.0625rem; font-weight: bold; box-shadow: 0 0.3125rem 0.9375rem rgba(255, 87, 34, 0.35); /* 增强投影 */ } .login-btn::after { border: none; } /* 协议 */ .agreement { display: flex; align-items: center; /* 改为居中对齐,如果文字换行可能需要改为 flex-start 并调整 margin-top */ justify-content: center; } .checkbox { width: 1rem; height: 1rem; border: 0.0625rem solid #ccc; border-radius: 50%; margin-right: 0.375rem; /* margin-top: 4rpx; 移除顶部 margin,由 align-items: center 控制 */ display: flex; align-items: center; justify-content: center; } .checkbox.checked { border-color: #FF5722; background-color: #FF5722; } .check-mark { color: #fff; font-size: 0.6875rem; line-height: 1; /* 确保勾选符号居中 */ } .agree-text { font-size: 0.75rem; color: #999; line-height: 1.5; } .link { color: #666; } /* 底部招募 */ .footer-recruit { margin-top: auto; padding-bottom: 2.5rem; /* 增加底部距离 */ width: 100%; display: flex; justify-content: center; } .recruit-badge { display: flex; align-items: center; padding: 0.625rem 1.5625rem; background-color: #fff; /* 白色背景 */ border: 1px solid #FF5722; /* 橙色边框 */ border-radius: 1.875rem; /* 胶囊圆角 */ color: #FF5722; /* 橙色文字 */ font-size: 0.875rem; font-weight: bold; box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.2); /* 橙色阴影 */ } .flag-icon { margin-right: 0.46875rem; font-size: 0.875rem; color: #FF5722; } /* 弹窗样式 */ .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; align-items: center; justify-content: center; } .modal-content { width: 18.75rem; background-color: #fff; border-radius: 0.625rem; overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .modal-header { padding: 0.9375rem; text-align: center; border-bottom: 1px solid #eee; } .modal-title { font-size: 1rem; font-weight: bold; } .modal-body { padding: 0.9375rem; flex: 1; overflow-y: auto; } .modal-text { font-size: 0.875rem; color: #666; line-height: 1.6; } .modal-footer { padding: 0.625rem 0.9375rem 0.9375rem; } .confirm-btn { background-color: #FF5722; color: #fff; font-size: 0.9375rem; border-radius: 1.25rem; }