更改登录页样式
build / build-push (push) Successful in 2m45s

This commit is contained in:
2026-09-01 23:17:35 +08:00
parent aa8391392c
commit 1ba47ff6f4
3 changed files with 302 additions and 430 deletions
+3 -389
View File
@@ -8,376 +8,12 @@
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>云海教育 · 统一身份认证平台</title>
<!-- 覆盖 CAS 原生 casLoginView.html:视觉采用 front/CasSsoFront(方案三 · 薄荷浅绿主题),
逻辑由 native-login.js 接管(含 check-sso 免密预检 + RSA 登录)。
URL 是 /cas/login,所有资源必须绝对路径(相对路径会解析到 /cas/libs/)。 -->
<link rel="stylesheet" href="/cas/front/css/login.css?v=1.0" />
<script src="/cas/front/libs/jquery.min.js?v=2.1"></script>
<script src="/cas/front/js/jsencrypt.min.js?v=2.1"></script>
<script src="/cas/front/js/conf.js?v=2.3"></script>
<script src="/cas/front/js/bschlogin.js?v=2.1"></script>
<script src="/cas/front/js/native-login.js?v=3.0"></script>
<style>
/* 云海教育 · 登录页 —— 方案三(薄荷浅绿)主题 */
: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;
}
/* 登录成功遮罩 */
.login-success {
position: fixed;
inset: 0;
z-index: 99;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(255, 255, 255, 0.97);
}
.login-success .check-circle {
width: 84px;
height: 84px;
border-radius: 50%;
background: #e8f5ee;
display: flex;
align-items: center;
justify-content: center;
animation: lc-pop 0.35s ease;
}
.login-success .check-circle svg {
width: 44px;
height: 44px;
}
.check-path {
stroke: #22c55e;
stroke-width: 5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: lc-draw 0.4s 0.15s forwards ease;
}
.login-success .success-text {
margin-top: 18px;
font-size: 16px;
font-weight: 600;
color: #22c55e;
}
@keyframes lc-pop {
0% {
transform: scale(0.6);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes lc-draw {
to {
stroke-dashoffset: 0;
}
}
/* 移动端:隐藏品牌区,卡片居中 */
@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;
}
}
</style>
<script src="/cas/front/js/native-login.js?v=3.1"></script>
</head>
<body>
@@ -400,7 +36,6 @@
<div class="banner-footer">
©2021 bestsch.com inc All Rights reserved
</div>
<!-- 底部波浪装饰,呼应 logo 波浪元素 -->
<svg class="banner-wave" viewBox="0 0 620 180" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 60 C 78 24, 156 96, 234 60 C 312 24, 390 96, 468 60 C 546 24, 596 78, 620 66"
fill="none" stroke="var(--wave)" stroke-width="7" stroke-linecap="round" opacity="0.16" />
@@ -437,27 +72,6 @@
</div>
</main>
</div>
<!-- 登录成功遮罩:由 native-login.js 在登录成功后显示 -->
<div class="login-success" id="loginSuccess">
<div class="check-circle">
<svg viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
<path class="check-path" d="M15 28 L23 36 L40 18" />
</svg>
</div>
<div class="success-text">登录成功</div>
</div>
<!-- 记住密码最佳努力:真实表单提交到隐藏 iframe(不跳转页面);主流程用 AJAX 拿 data.url 手动跳转,互不干扰 -->
<iframe name="pwdMgrFrame" style="display:none"></iframe>
<form id="pwdMgrForm" method="post" action="/cas/api/login" target="pwdMgrFrame" style="display:none">
<input type="text" name="username" id="pm_user" />
<input type="password" name="password" id="pm_pwd" />
<input type="hidden" name="loginname" id="pm_loginname" />
<input type="hidden" name="pwd" id="pm_pwd_enc" />
<input type="hidden" name="captcha" id="pm_captcha" />
<input type="hidden" name="service" id="pm_service" />
</form>
</body>
</html>
</html>
+296
View File
@@ -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;
}
}
+3 -41
View File
@@ -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;