.u-section-1 { background-position: 50% 50%; background-repeat: no-repeat; /* 移除默认背景图片 */ /* background-image: url("../images/web-15.png"); */ background-size: cover; } .u-section-1 .u-sheet-1 { min-height: 100vh; } .u-section-1 .u-image-1 { width: 312px; height: 110px; margin: 47px auto 0; } .u-section-1 .u-group-1 { min-height: 460px; height: auto; width: 989px; background-position: 50% 50%; background-repeat: no-repeat; background-image: linear-gradient(to bottom, #fcc75a, #ee6622); background-size: cover; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); --top-left-radius: 50px; --top-right-radius: 50px; margin: 101px auto 0; } .u-section-1 .u-container-layout-1 { padding: 0 30px; } .u-section-1 .u-form-1 { height: 396px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); margin: 32px 0 0 419px; } .u-section-1 .u-input-1 { background-image: none; height: 63px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); --radius: 50px; border-style: solid; } .u-section-1 .u-input-2 { background-image: none; height: 63px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); --radius: 50px; border-style: solid; } .u-section-1 .u-form-group-3 { margin-left: 0; } .u-section-1 .u-input-3 { background-image: none; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); --radius: 50px; border-style: solid; } .u-section-1 .u-btn-1 { background-image: linear-gradient(#fcc75a, #ee6622); --radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); font-weight: 500; padding: 20px 107px 20px 106px; } .u-section-1 .u-group-2 { width: 385px; min-height: 362px; height: auto; margin: -362px auto 0 0; } .u-section-1 .u-container-layout-2 { padding: 0 0 23px; } .u-section-1 .u-text-1 { font-weight: 700; width: 260px; margin: 1px auto 0; } .u-section-1 .u-text-2 { font-size: 1.125rem; margin: 30px 14px 0; } .u-section-1 .u-btn-2 { background-image: none; padding: 0; } .u-section-1 .u-btn-3 { font-weight: 700; font-size: 0.875rem; letter-spacing: 0px; text-transform: uppercase; margin: -38px 227px 0 auto; padding: 0; } .u-section-1 .u-list-1 { width: 989px; margin: 7px auto 60px; } .u-section-1 .u-repeater-1 { grid-auto-columns: calc(50% - 3.5px); grid-template-columns: repeat(2, calc(50% - 3.5px)); min-height: 80px; grid-gap: 7px; } .u-section-1 .u-list-item-1 { background-repeat: no-repeat; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); background-image: linear-gradient(to bottom, #fcc75a, #ee6622); background-position: 50% 50%; --bottom-left-radius: 50px; } .u-section-1 .u-container-layout-3 { padding-left: 15px; padding-right: 15px; padding-bottom: 0; } .u-section-1 .u-group-3 { min-height: 60px; height: auto; width: 164px; margin: 10px auto 0 16px; } .u-section-1 .u-container-layout-4 { padding-bottom: 0; } .u-section-1 .u-text-3 { margin: 16px auto 0; } .u-section-1 .u-group-4 { min-height: 60px; height: auto; width: 127px; margin: -60px 143px 0 auto; } .u-section-1 .u-container-layout-5 { padding-top: 0; padding-bottom: 0; } .u-section-1 .u-text-4 { margin: 0 auto; } .u-section-1 .u-group-5 { min-height: 60px; height: auto; width: 127px; margin: -60px 12px 0 auto; } .u-section-1 .u-container-layout-6 { padding-top: 0; padding-bottom: 0; } .u-section-1 .u-text-5 { margin: 0 auto; } .u-section-1 .u-list-item-2 { background-repeat: no-repeat; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); background-image: linear-gradient(to bottom, #fcc75a, #ee6622); background-position: 50% 50%; --bottom-right-radius: 50px; } .u-section-1 .u-container-layout-7 { padding-left: 15px; padding-right: 15px; padding-bottom: 0; } .u-section-1 .u-group-6 { min-height: 60px; height: auto; width: 164px; margin: 10px auto 0 16px; } .u-section-1 .u-container-layout-8 { padding-bottom: 0; } .u-section-1 .u-text-6 { margin: 16px auto 0; } .u-section-1 .u-group-7 { min-height: 60px; height: auto; width: 127px; margin: -60px 143px 0 auto; } .u-section-1 .u-container-layout-9 { padding-top: 0; padding-bottom: 0; } .u-section-1 .u-text-7 { margin: 0 auto; } .u-section-1 .u-group-8 { min-height: 60px; height: auto; width: 127px; margin: -60px 12px 0 auto; } .u-section-1 .u-container-layout-10 { padding-top: 0; padding-bottom: 0; } .u-section-1 .u-text-8 { margin: 0 auto; } @media (max-width: 1199px) { .u-section-1 .u-group-1 { --radius: 50px; width: 940px; height: auto; } .u-section-1 .u-form-1 { margin-left: 370px; } .u-section-1 .u-input-3 { height: 63px; } .u-section-1 .u-group-2 { --radius: 23px; height: auto; } .u-section-1 .u-list-1 { width: 940px; min-height: 79px; } .u-section-1 .u-repeater-1 { min-height: 76px; } .u-section-1 .u-list-item-1 { background-size: cover; --radius: 50px; } .u-section-1 .u-container-layout-3 { padding-top: 0; } .u-section-1 .u-group-3 { height: auto; } .u-section-1 .u-group-4 { height: auto; } .u-section-1 .u-group-5 { height: auto; } .u-section-1 .u-list-item-2 { background-size: cover; --radius: 50px; } .u-section-1 .u-container-layout-7 { padding-top: 0; } .u-section-1 .u-group-6 { height: auto; } .u-section-1 .u-group-7 { height: auto; } .u-section-1 .u-group-8 { height: auto; } } @media (max-width: 991px) { .u-section-1 .u-group-1 { min-height: 674px; margin-top: 98px; margin-right: initial; margin-left: initial; width: auto; } .u-section-1 .u-form-1 { width: 510px; margin-top: 245px; margin-left: auto; margin-right: auto; } .u-section-1 .u-group-2 { width: 618px; margin-top: -623px; margin-left: auto; } .u-section-1 .u-container-layout-2 { padding-bottom: 0; } .u-section-1 .u-btn-3 { margin-top: 227px; margin-right: auto; } .u-section-1 .u-list-1 { margin-right: initial; margin-left: initial; width: auto; } .u-section-1 .u-repeater-1 { grid-auto-columns: calc(100% + 0px); grid-template-columns: 100%; min-height: 147px; } .u-section-1 .u-group-3 { margin-top: 5px; } .u-section-1 .u-group-4 { margin-right: 144px; } .u-section-1 .u-group-6 { margin-top: 5px; } .u-section-1 .u-group-7 { margin-right: 144px; } } @media (max-width: 767px) { .u-section-1 .u-container-layout-1 { padding-left: 10px; padding-right: 10px; } .u-section-1 .u-group-2 { margin-top: -616px; margin-right: initial; margin-left: initial; width: auto; } .u-section-1 .u-text-2 { font-size: 1rem; } .u-section-1 .u-btn-3 { margin-top: 363px; } .u-section-1 .u-repeater-1 { grid-auto-columns: 100%; } .u-section-1 .u-container-layout-3 { padding-left: 10px; padding-right: 10px; } .u-section-1 .u-container-layout-7 { padding-left: 10px; padding-right: 10px; } } @media (max-width: 575px) { .u-section-1 .u-container-layout-1 { padding-top: 9px; padding-bottom: 9px; } .u-section-1 .u-form-1 { width: 320px; margin-top: 246px; } .u-section-1 .u-btn-1 { padding: 19px 57px 21px; } .u-section-1 .u-text-2 { margin-left: 0; margin-right: 0; } .u-section-1 .u-btn-3 { margin-top: 357px; } .u-section-1 .u-container-layout-3 { padding-top: 9px; padding-bottom: 9px; } .u-section-1 .u-container-layout-7 { padding-top: 9px; padding-bottom: 9px; } } /* 密码输入框容器样式 */ .password-container { position: relative; display: block; } /* 密码切换按钮样式 */ .password-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; pointer-events: auto; } /* 调整SVG图标大小 */ .password-toggle svg { width: 20px; height: 20px; opacity: 0.6; stroke: #666; } .password-toggle:hover svg { opacity: 1; } /* 确保密码输入框右侧有足够空间放置图标 */ .password-container input { padding-right: 50px; text-align: center; } /* Toast 容器 */ #toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 999999 !important; display: flex; flex-direction: column; align-items: center; pointer-events: none; /* 允许点击穿透 */ } /* 单个 Toast */ .toast { min-width: 250px; max-width: 350px; z-index: 999999 !important; padding: 15px 20px; border-radius: 50px; color: #fff; font-family: Arial, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; /* 居中文本 */ text-align: center; /* 居中文本 */ pointer-events: auto; /* 允许 Toast 接收事件 */ } /* 成功 Toast */ .toast.success { box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); background-image: linear-gradient(#00ff00, #009245); } /* 错误 Toast */ .toast.error { background-image: linear-gradient(#ff6474, #e01c4c); box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } /* 信息 Toast */ .toast.info { background-image: linear-gradient(#31cdee, #0962a4); box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); } /* 淡出效果 */ .toast.fade-out { opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } /* 按钮点击效果 */ .u-btn-submit:active { transform: scale(0.98); box-shadow: 3px 3px 15px 0 rgba(0,0,0,0.3); transition: transform 0.1s, box-shadow 0.1s; } /* 按钮加载状态 */ .u-btn-submit.btn-loading { opacity: 0.8; position: relative; color: transparent !important; } .u-btn-submit.btn-loading::after { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin: -10px 0 0 -10px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: btn-spinner 1s ease-in-out infinite; } @keyframes btn-spinner { to { transform: rotate(360deg); } } /* 禁用状态 */ .u-btn-submit[disabled] { cursor: not-allowed; } /* 注册表单输入框占位符居中 */ .u-dialog-section-6 input::placeholder, .u-dialog-section-6 select { text-align: center; } /* 确保选择框中的文本也居中 */ .u-dialog-section-6 .u-form-select-wrapper select { text-align-last: center; text-align: center; } /* 修复在某些浏览器中的显示问题 */ .u-dialog-section-6 input:-moz-placeholder, .u-dialog-section-6 input::-moz-placeholder { text-align: center; } .u-dialog-section-6 input:-ms-input-placeholder { text-align: center; } /* 确保输入框中的文本也居中 */ .u-dialog-section-6 input { text-align: center; } /* 登录表单输入框占位符居中 */ .u-section-1 input::placeholder, .u-section-1 select { text-align: center; } /* 确保选择框中的文本也居中 */ .u-section-1 .u-form-select-wrapper select { text-align-last: center; text-align: center; } /* 修复在某些浏览器中的显示问题 */ .u-section-1 input:-moz-placeholder, .u-section-1 input::-moz-placeholder { text-align: center; } .u-section-1 input:-ms-input-placeholder { text-align: center; } /* 确保输入框中的文本也居中 */ .u-section-1 input { text-align: center; } /* 重新设计密码输入框的居中方案 */ #email-b064 { text-align: center !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } /* 添加一个伪元素在左侧平衡视觉效果 */ .password-container::before { content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; z-index: 5; pointer-events: none; } /* 优化学校候选列表样式 */ .school-list-container { position: absolute; width: 320px; /* 设置固定宽度 */ left: 50%; transform: translateX(-50%); /* 水平居中 */ max-height: 200px; overflow-y: auto; background-color: white; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; margin-top: 5px; } .school-list { list-style: none; padding: 0; margin: 0; } .school-item { padding: 12px 15px; cursor: pointer; transition: all 0.2s ease; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #333; } .school-item:last-child { border-bottom: none; } .school-item:hover { background-color: #f5f9ff; color: #0962a4; } /* 添加滚动条样式 */ .school-list-container::-webkit-scrollbar { width: 8px; } .school-list-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .school-list-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } .school-list-container::-webkit-scrollbar-thumb:hover { background: #aaa; } /* 确保在移动设备上也能正确显示 */ @media (max-width: 375px) { .school-list-container { width: 280px; } } /* 注册表单密码框样式 */ .u-dialog-section-6 .password-container { position: relative; display: block; width: 100%; } .u-dialog-section-6 .password-container input { text-align: center !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } .u-dialog-section-6 .password-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 5; color: #666; transition: color 0.3s; } .u-dialog-section-6 .password-toggle:hover { color: #333; } /* 添加一个伪元素在左侧平衡视觉效果 */ .u-dialog-section-6 .password-container::before { content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; z-index: 5; pointer-events: none; } /* 确保密码框中的文本居中显示 */ #text-b46f { text-align: center !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } /* 自定义下拉菜单样式 */ .custom-select-container { position: relative; width: 100%; margin-bottom: 20px; } .u-form-select-wrapper .custom-select-container { margin-bottom: 0; /* 在表单中不需要额外的底部边距 */ } .custom-select-selected { width: 100%; padding: 15px 20px; background-color: white; border-radius: 50px; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4); cursor: pointer; text-align: center; font-weight: 600; position: relative; } .custom-select-selected::after { content: ''; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #666; } /* 隐藏原生下拉箭头 */ .u-form-select-wrapper .u-caret { display: none !important; } .custom-select-options { position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px; background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; max-height: 200px; overflow-y: auto; } .custom-select-option { padding: 12px 15px; cursor: pointer; transition: all 0.2s ease; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #333; } .custom-select-option:last-child { border-bottom: none; } .custom-select-option:hover:not(.disabled) { background-color: #f5f9ff; color: #0962a4; } .custom-select-option.disabled { color: #999; cursor: not-allowed; background-color: #f5f5f5; } /* 添加滚动条样式 */ .custom-select-options::-webkit-scrollbar { width: 8px; } .custom-select-options::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .custom-select-options::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } .custom-select-options::-webkit-scrollbar-thumb:hover { background: #aaa; } /* 修复注册模态框中编码类型下拉框的圆角样式 */ .u-dialog-section-6 .u-form-select-wrapper select { border-radius: 50px !important; --radius: 50px !important; } /* 确保下拉框的容器也有圆角 */ .u-dialog-section-6 .u-form-select-wrapper { border-radius: 50px !important; overflow: hidden; } /* 确保下拉箭头位置正确 */ .u-dialog-section-6 .u-form-select-wrapper .u-caret { right: 20px; } /* 确保所有输入框在注册模态框中有一致的样式 */ .u-dialog-section-6 input, .u-dialog-section-6 select { border-radius: 50px !important; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4) !important; font-weight: 600 !important; background-color: white !important; padding-right: 40px !important; /* 为箭头留出空间 */ padding-left: 40px !important; /* 左侧也留出相同空间,保持对称 */ text-align: center !important; /* 文本居中 */ box-sizing: border-box !important; } /* 确保下拉框的文本也居中 */ .u-dialog-section-6 .u-form-select-wrapper select { text-align-last: center !important; /* 下拉框选中项文本居中 */ text-align: center !important; /* 兼容性处理 */ } /* 确保下拉框的容器有正确的样式 */ .u-dialog-section-6 .u-form-select-wrapper { border-radius: 50px !important; overflow: hidden; position: relative; /* 确保箭头定位正确 */ text-align: center !important; /* 容器内文本居中 */ } /* 调整下拉箭头位置,确保不会遮挡文本 */ .u-dialog-section-6 .u-form-select-wrapper .u-caret { display: block !important; right: 20px !important; pointer-events: none !important; /* 确保箭头不会阻止点击 */ } /* 修改原来的CSS规则,只针对登录页面的平台选择下拉菜单 */ .u-section-1 .u-form-select-wrapper .u-caret { display: none !important; } /* 恢复注册模态框中下拉菜单的箭头 */ .u-dialog-section-6 .u-form-select-wrapper .u-caret { display: block !important; /* 显示下拉箭头 */ right: 20px; /* 保持箭头位置正确 */ } /* 确保下拉箭头在视觉上与其他元素协调 */ .u-dialog-section-6 .u-form-select-wrapper .u-caret svg { width: 16px; height: 16px; fill: #666; } /* 确保下拉框的容器有正确的样式 */ .u-dialog-section-6 .u-form-select-wrapper { border-radius: 50px !important; overflow: hidden; position: relative; /* 确保箭头定位正确 */ } /* 确保所有输入框在注册模态框中有一致的样式 */ .u-dialog-section-6 input, .u-dialog-section-6 select { border-radius: 50px !important; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4) !important; font-weight: 600 !important; background-color: white !important; padding-right: 40px !important; /* 为箭头留出空间 */ } /* 按钮加载状态 */ .u-btn-step.btn-loading { opacity: 0.8; cursor: not-allowed; background-image: linear-gradient(#31cdee, #0962a4) !important; color: white !important; } /* 禁用状态 */ .u-btn-step:disabled { opacity: 0.7; cursor: not-allowed; } /* 平台选择引导提示框 */ .platform-guide-tooltip { position: fixed; /* 改为固定定位 */ background-image: linear-gradient(135deg, #3c99dc, #235bc2); color: white; border-radius: 15px; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.1) inset; font-size: 14px; max-width: 320px; z-index: 9999; text-align: center; animation: float 3s ease-in-out infinite; line-height: 1.6; pointer-events: auto; /* 确保可点击 */ backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; } @keyframes float { 0% { transform: translateY(0px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); } 50% { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); } 100% { transform: translateY(0px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); } } .platform-guide-tooltip p { margin: 8px 0; transition: all 0.3s ease; } .platform-guide-tooltip p strong { font-weight: 600; color: #ffffff; display: inline-block; position: relative; } .platform-guide-tooltip p:first-of-type { font-size: 16px; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .platform-guide-tooltip p:first-of-type:after { content: ''; position: absolute; bottom: 0; left: 30%; width: 40%; height: 2px; background: rgba(255, 255, 255, 0.4); border-radius: 2px; } /* 提示框箭头 - 默认指向右侧 */ .platform-guide-tooltip:after { content: ''; position: absolute; top: 50%; /* 垂直居中 */ right: -10px; /* 放在右侧 */ margin-top: -10px; /* 垂直居中调整 */ width: 20px; height: 20px; background: linear-gradient(135deg, #3c99dc, #235bc2); transform: rotate(45deg); border: 1px solid rgba(255, 255, 255, 0.2); border-width: 0 1px 1px 0; } /* 小屏幕上提示框箭头指向上方 */ .platform-guide-tooltip.position-bottom:after { top: -10px; /* 放在顶部 */ right: auto; /* 清除右侧定位 */ left: 50%; /* 水平居中 */ margin-top: 0; /* 清除垂直居中调整 */ margin-left: -10px; /* 水平居中调整 */ border-width: 1px 0 0 1px; } /* 提示框关闭按钮 */ .platform-guide-close { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: white; cursor: pointer; font-size: 16px; transition: all 0.2s ease; z-index: 2; } .platform-guide-close:hover { background: rgba(255, 255, 255, 0.4); transform: rotate(90deg); } /* 高亮显示下拉菜单 */ .highlight-select, .custom-select-selected.highlight-select { border: 2px solid #3c99dc !important; animation: glow 1.5s infinite alternate; box-shadow: 0 0 15px rgba(60, 153, 220, 0.7) !important; transition: all 0.3s ease; } @keyframes glow { from { box-shadow: 0 0 10px rgba(60, 153, 220, 0.4); border-color: #3c99dc !important; } to { box-shadow: 0 0 20px rgba(60, 153, 220, 0.8); border-color: #235bc2 !important; } } /* 禁用状态 */ .u-btn-submit[disabled] { cursor: not-allowed; }