463 lines
14 KiB
HTML
463 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<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/）。 -->
|
|
<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>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="login-wrap">
|
|
<aside class="login-banner">
|
|
<div class="banner-inner">
|
|
<div class="brand">
|
|
<img class="brand-logo" src="/cas/front/image/logo.png" alt="logo" />
|
|
<span class="brand-name">云海教育</span>
|
|
<span class="brand-slogan">云海星通</span>
|
|
</div>
|
|
<h1 class="banner-title">统一身份认证平台</h1>
|
|
<p class="banner-desc">云海星通 · 统一身份认证平台为您提供安全、便捷的登录体验</p>
|
|
<ul class="banner-points">
|
|
<li><span class="feature__check">✓</span>统一身份认证管理</li>
|
|
<li><span class="feature__check">✓</span>多应用单点登录</li>
|
|
<li><span class="feature__check">✓</span>安全可靠，集中管控</li>
|
|
</ul>
|
|
</div>
|
|
<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" />
|
|
<path d="M0 92 C 104 56, 208 128, 312 92 C 416 56, 520 128, 620 98"
|
|
fill="none" stroke="var(--wave)" stroke-width="6" stroke-linecap="round" opacity="0.09" />
|
|
</svg>
|
|
</aside>
|
|
|
|
<main class="login-main">
|
|
<div class="login-card">
|
|
<h2 class="login-title">账号登录</h2>
|
|
<form id="loginForm" onsubmit="return false;">
|
|
<div class="form-item">
|
|
<input type="text" id="user_input" name="username"
|
|
placeholder="用户名/手机号/身份证号" autocomplete="username" />
|
|
</div>
|
|
<div class="form-item">
|
|
<input type="password" id="password_input" name="password"
|
|
placeholder="请输入密码" autocomplete="current-password" />
|
|
</div>
|
|
<input type="hidden" id="loginname_input" name="loginname" />
|
|
<input type="hidden" id="pwd_input" name="pwd" />
|
|
<input type="hidden" id="captcha_hidden" name="captcha" />
|
|
<input type="hidden" id="service_hidden" name="service" />
|
|
<div class="form-item" id="captchaPanel" style="display:none">
|
|
<div class="captcha-row">
|
|
<input type="text" id="captcha_input" placeholder="输入验证码" autocomplete="off" />
|
|
<img id="captchaImg" title="点击刷新" />
|
|
</div>
|
|
</div>
|
|
<button class="btn-submit" type="button" id="loginBtn" onclick="doLogin()">登 录</button>
|
|
<div class="warning" id="warningLabel"></div>
|
|
</form>
|
|
</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> |