From 1ba47ff6f45fe4fc27fc8f97e5e95d361a6e85a4 Mon Sep 17 00:00:00 2001 From: chenxing Date: Tue, 1 Sep 2026 23:17:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E7=99=BB=E5=BD=95=E9=A1=B5?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/templates/casLoginView.html | 392 +----------------- src/main/webapp/front/css/login.css | 296 +++++++++++++ src/main/webapp/front/js/native-login.js | 44 +- 3 files changed, 302 insertions(+), 430 deletions(-) create mode 100644 src/main/webapp/front/css/login.css diff --git a/src/main/resources/templates/casLoginView.html b/src/main/resources/templates/casLoginView.html index b93a07f..2fcedff 100644 --- a/src/main/resources/templates/casLoginView.html +++ b/src/main/resources/templates/casLoginView.html @@ -8,376 +8,12 @@ 云海教育 · 统一身份认证平台 - + - - + @@ -400,7 +36,6 @@ -
-
- - - -
-
登录成功
-
- - - - - \ No newline at end of file + diff --git a/src/main/webapp/front/css/login.css b/src/main/webapp/front/css/login.css new file mode 100644 index 0000000..4c7a110 --- /dev/null +++ b/src/main/webapp/front/css/login.css @@ -0,0 +1,296 @@ +/* 云海教育 · 登录页 —— 方案三（薄荷浅绿）主题 */ +:root { + /* 背景渐变 */ + --bg-from: #EFF9F2; + --bg-to: #D3EDDF; + + /* 文字 */ + --text-strong: #163A2A; + --text-muted: #416C55; + --text-link: #8A95A5; + --text-weak: #B0B8C4; + + /* 强调色 */ + --accent: #2FA36A; + --accent-hover: #279057; + --brand-green: #6DBE45; + --wave: #2FA36A; + + /* 卡片与表单 */ + --card-bg: #FFFFFF; + --card-shadow: 0 12px 32px rgba(15, 45, 35, .12); + --input-bg: #F4F6FA; + --input-text: #1E2A3A; + --border: #E3E8F0; + --placeholder: #A8B2C0; + + /* 尺寸 */ + --card-width: 380px; + --radius-card: 18px; + --radius-input: 8px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + height: 100%; +} + +body { + font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + -webkit-font-smoothing: antialiased; + background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%); + color: var(--text-strong); +} + +.login-wrap { + display: flex; + min-height: 100vh; + background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%); +} + +/* 左侧品牌区 */ +.login-banner { + flex: 0 0 46%; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + padding: 24px 7% 140px; + overflow: hidden; +} + +.banner-inner { + position: relative; + z-index: 1; + max-width: 480px; +} + +.brand { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 88px; +} + +.brand-logo { + width: 54px; + height: 54px; + object-fit: contain; +} + +.brand-name { + font-size: 30px; + font-weight: 700; + letter-spacing: 1px; + color: var(--text-strong); +} + +.brand-slogan { + font-size: 30px; + font-weight: 700; + letter-spacing: 1px; + color: var(--brand-green); +} + +.banner-title { + font-size: 46px; + font-weight: 700; + line-height: 1.25; + letter-spacing: 2px; + color: var(--text-strong); + margin-bottom: 20px; +} + +.banner-desc { + font-size: 19px; + line-height: 1.7; + color: var(--text-muted); + margin-bottom: 48px; +} + +.banner-points { + list-style: none; + display: flex; + flex-direction: column; + gap: 28px; +} + +.banner-points li { + display: flex; + align-items: center; + gap: 14px; + font-size: 22px; + color: var(--text-muted); +} + +.feature__check { + flex: 0 0 26px; + width: 26px; + height: 26px; + border-radius: 50%; + background: var(--accent); + color: #fff; + font-size: 14px; + line-height: 26px; + text-align: center; +} + +/* 底部波浪装饰（呼应 logo 波浪元素） */ +.banner-wave { + position: absolute; + left: 0; + bottom: 24px; + width: 100%; + height: 180px; + pointer-events: none; +} + +.banner-footer { + position: absolute; + left: 7%; + right: 7%; + bottom: 12px; + z-index: 1; + font-size: 12px; + color: var(--text-muted); + opacity: 0.7; +} + +/* 右侧登录区 */ +.login-main { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 40px 24px; +} + +.login-card { + width: var(--card-width); + max-width: 100%; + background: var(--card-bg); + border-radius: var(--radius-card); + box-shadow: var(--card-shadow); + padding: 46px 40px 40px; +} + +.login-title { + font-size: 22px; + font-weight: 700; + text-align: center; + color: var(--text-strong); + margin-bottom: 30px; +} + +.form-item { + margin-bottom: 24px; +} + +.form-item input { + width: 100%; + height: 54px; + padding: 0 20px; + border: 1px solid var(--border); + border-radius: var(--radius-input); + font-size: 17px; + font-family: inherit; + color: var(--input-text); + background: var(--input-bg); + outline: none; + transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; +} + +.form-item input::placeholder { + color: var(--placeholder); +} + +.form-item input:focus { + border-color: var(--accent); + background: #fff; + box-shadow: 0 0 0 3px rgba(47, 163, 106, 0.12); +} + +.captcha-row { + display: flex; + gap: 10px; + align-items: center; +} + +.captcha-row input { + flex: 1; +} + +.captcha-row img { + height: 46px; + cursor: pointer; + border-radius: var(--radius-input); + border: 1px solid var(--border); +} + +.btn-submit { + width: 100%; + height: 56px; + margin-top: 8px; + border: none; + border-radius: var(--radius-input); + font-size: 20px; + font-weight: 700; + font-family: inherit; + letter-spacing: 4px; + color: #fff; + cursor: pointer; + background: var(--accent); + box-shadow: 0 6px 16px rgba(47, 163, 106, 0.28); + transition: background 0.18s, box-shadow 0.2s, transform 0.1s; +} + +.btn-submit:hover { + background: var(--accent-hover); + box-shadow: 0 8px 22px rgba(47, 163, 106, 0.38); +} + +.btn-submit:active { + transform: translateY(1px); +} + +.btn-submit:disabled { + opacity: 0.7; + cursor: not-allowed; + box-shadow: none; +} + +.warning { + color: #f56c6c; + font-size: 13px; + margin-top: 14px; + text-align: center; + min-height: 20px; +} + +/* 移动端：隐藏品牌区，卡片居中 */ +@media (max-width: 860px) { + .login-banner { + display: none; + } + + .login-wrap { + background: linear-gradient(160deg, var(--bg-from), var(--bg-to)); + } + + .login-card { + box-shadow: 0 14px 32px rgba(15, 45, 35, 0.18); + } +} + +@media (max-width: 480px) { + .login-card { + padding: 32px 24px 30px; + } +} diff --git a/src/main/webapp/front/js/native-login.js b/src/main/webapp/front/js/native-login.js index 550cd27..b81a00a 100644 --- a/src/main/webapp/front/js/native-login.js +++ b/src/main/webapp/front/js/native-login.js @@ -7,8 +7,8 @@ * - 已有有效 TGT 无 service → 跳默认落点（/cas/front/index.html）； * - 未登录/接口异常 → 继续初始化登录表单（fail 降级保证灰度期旧后端也能用）。 * 2. 初始化：公钥加载、验证码显隐、error= 查询串回显历史错误。 - * 3. 提交：走 bschlogin.login()（RSA+POST /cas/api/login），成功触发"记住密码"iframe 后 - * JS 手动跳 data.url；失败展示 msg，且 needCaptcha=true 时自动展开验证码面板。 + * 3. 提交：走 bschlogin.login()（RSA+POST /cas/api/login），成功后 JS 直接跳 data.url； + * 失败展示 msg，且 needCaptcha=true 时自动展开验证码面板。 * * 资源与接口全部使用 conf.js 的 window.ssoServerHost（"/cas/"），同源相对，避免跨域。 */ @@ -73,21 +73,6 @@ ).fail(done); } - function triggerPasswordSave(username, pwd, encUser, encPwd, captcha) { - try { - document.getElementById("pm_user").value = username; - document.getElementById("pm_pwd").value = pwd; - document.getElementById("pm_loginname").value = encUser; - document.getElementById("pm_pwd_enc").value = encPwd; - document.getElementById("pm_captcha").value = captcha; - document.getElementById("pm_service").value = - document.getElementById("service_hidden").value; - document.getElementById("pwdMgrForm").submit(); - } catch (e) { - /* 记住密码属最佳努力，失败不影响主流程 */ - } - } - function doLogin() { var username = document.getElementById("user_input").value.trim(); var pwd = document.getElementById("password_input").value; @@ -111,18 +96,6 @@ return; } - // 隐藏 iframe 的"记住密码"提交要求 loginname/pwd 为 RSA 密文（后端必填），这里预生成 - var encUser = null, - encPwd = null; - try { - var jsenc = new JSEncrypt(); - jsenc.setPublicKey(bschLogin.publicKey); - encUser = jsenc.encrypt(username); - encPwd = jsenc.encrypt(pwd); - } catch (e) { - /* 最佳努力：失败仅影响记住密码，不影响主流程 */ - } - var btn = document.getElementById("loginBtn"); btn.disabled = true; btn.textContent = "登录中..."; @@ -133,18 +106,7 @@ pwd, captcha, function (url) { - // 成功：最佳努力让浏览器记住密码（隐藏 iframe 真实提交），再手动跳转 - triggerPasswordSave(username, pwd, encUser, encPwd, captcha); - // 页面存在 #loginSuccess 遮罩（完整版视觉）则展示；否则退回文字提示 - var sc = document.getElementById("loginSuccess"); - if (sc) { - sc.style.display = "flex"; - } else { - setWarning("登录成功，正在跳转…"); - } - setTimeout(function () { - window.location.href = url; - }, 450); + window.location.href = url; }, function (msg, nc) { btn.disabled = false;