cas/CasService
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改登录页样式
build / build-push (push) Successful in 1m18s
Details

Browse Source
This commit is contained in:
chenxing
2026-09-01 18:29:05 +08:00
parent 49af5d7f28
commit 316223d096
2 changed files with 150 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/casLoginView.html
+150 -88
View File
@@ -7,8 +7,8 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Expires" content="0" />
<title>登录</title> <title>云海教育 · 统一身份认证平台</title>
<!-- 覆盖 CAS 原生 casLoginView.html：视觉采用 front/CasSsoFront（完整版企业登录页）， <!-- 覆盖 CAS 原生 casLoginView.html：视觉采用 front/CasSsoFront（方案三 · 薄荷浅绿主题），
逻辑由 native-login.js 接管（含 check-sso 免密预检 + RSA 登录）。 逻辑由 native-login.js 接管（含 check-sso 免密预检 + RSA 登录）。
URL 是 /cas/login，所有资源必须绝对路径（相对路径会解析到 /cas/libs/）。 --> URL 是 /cas/login，所有资源必须绝对路径（相对路径会解析到 /cas/libs/）。 -->
<script src="/cas/front/libs/jquery.min.js?v=2.1"></script> <script src="/cas/front/libs/jquery.min.js?v=2.1"></script>
@@ -17,6 +17,38 @@
<script src="/cas/front/js/bschlogin.js?v=2.1"></script> <script src="/cas/front/js/bschlogin.js?v=2.1"></script>
<script src="/cas/front/js/native-login.js?v=3.0"></script> <script src="/cas/front/js/native-login.js?v=3.0"></script>
<style> <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; margin: 0;
padding: 0; padding: 0;
@@ -29,15 +61,17 @@
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system,
Arial, "PingFang SC", "Microsoft YaHei", sans-serif; BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #eef2f7; -webkit-font-smoothing: antialiased;
color: #1f2d4d; background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%);
color: var(--text-strong);
} }
.login-wrap { .login-wrap {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%);
} }
/* 左侧品牌区 */ /* 左侧品牌区 */
@@ -47,101 +81,104 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 0 7%; padding: 24px 7% 140px;
color: #fff;
overflow: hidden; overflow: hidden;
background: linear-gradient(155deg, #1e3a8a 0%, #2563eb 52%, #3b82f6 100%);
}
.login-banner::before {
content: "";
position: absolute;
top: -140px;
left: -100px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
}
.login-banner::after {
content: "";
position: absolute;
right: -120px;
bottom: -120px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
} }
.banner-inner { .banner-inner {
position: relative; position: relative;
z-index: 1; z-index: 1;
max-width: 420px; max-width: 480px;
} }
.brand { .brand {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
margin-bottom: 52px; margin-bottom: 88px;
} }
.brand-logo { .brand-logo {
height: 44px; width: 54px;
width: auto; height: 54px;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); object-fit: contain;
} }
.brand-name { .brand-name {
font-size: 22px; font-size: 30px;
font-weight: 700; font-weight: 700;
letter-spacing: 1px; letter-spacing: 1px;
color: var(--text-strong);
}
.brand-slogan {
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: var(--brand-green);
} }
.banner-title { .banner-title {
font-size: 34px; font-size: 46px;
font-weight: 700; font-weight: 700;
line-height: 1.35; line-height: 1.25;
margin-bottom: 16px; letter-spacing: 2px;
color: var(--text-strong);
margin-bottom: 20px;
} }
.banner-desc { .banner-desc {
font-size: 16px; font-size: 19px;
line-height: 1.7; line-height: 1.7;
opacity: 0.9; color: var(--text-muted);
margin-bottom: 38px; margin-bottom: 48px;
} }
.banner-points { .banner-points {
list-style: none; list-style: none;
display: flex;
flex-direction: column;
gap: 28px;
} }
.banner-points li { .banner-points li {
position: relative; display: flex;
padding-left: 22px; align-items: center;
font-size: 15px; gap: 14px;
line-height: 2.3; font-size: 22px;
opacity: 0.92; color: var(--text-muted);
} }
.banner-points li::before { .feature__check {
content: ""; 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; position: absolute;
left: 0; left: 0;
top: 16px; bottom: 24px;
width: 7px; width: 100%;
height: 7px; height: 180px;
border-radius: 50%; pointer-events: none;
background: rgba(255, 255, 255, 0.85);
} }
.banner-footer { .banner-footer {
position: absolute; position: absolute;
left: 7%; left: 7%;
right: 7%; right: 7%;
bottom: 26px; bottom: 12px;
z-index: 1; z-index: 1;
font-size: 12px; font-size: 12px;
color: var(--text-muted);
opacity: 0.7; opacity: 0.7;
} }
@@ -155,41 +192,48 @@
} }
.login-card { .login-card {
width: 380px; width: var(--card-width);
max-width: 100%; max-width: 100%;
background: #fff; background: var(--card-bg);
border-radius: 14px; border-radius: var(--radius-card);
box-shadow: 0 14px 44px rgba(31, 45, 80, 0.12); box-shadow: var(--card-shadow);
padding: 42px 36px 34px; padding: 46px 40px 40px;
} }
.login-title { .login-title {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
color: var(--text-strong);
margin-bottom: 30px; margin-bottom: 30px;
} }
.form-item { .form-item {
margin-bottom: 18px; margin-bottom: 24px;
} }
.form-item input { .form-item input {
width: 100%; width: 100%;
padding: 13px 14px; height: 54px;
border: 1px solid #dfe3ea; padding: 0 20px;
border-radius: 8px; border: 1px solid var(--border);
font-size: 14px; border-radius: var(--radius-input);
color: #1f2d4d; font-size: 17px;
background: #fbfcfe; font-family: inherit;
color: var(--input-text);
background: var(--input-bg);
outline: none; outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.form-item input::placeholder {
color: var(--placeholder);
} }
.form-item input:focus { .form-item input:focus {
border-color: #2563eb; border-color: var(--accent);
background: #fff; background: #fff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); box-shadow: 0 0 0 3px rgba(47, 163, 106, 0.12);
} }
.captcha-row { .captcha-row {
@@ -205,26 +249,30 @@
.captcha-row img { .captcha-row img {
height: 46px; height: 46px;
cursor: pointer; cursor: pointer;
border-radius: 8px; border-radius: var(--radius-input);
border: 1px solid #dfe3ea; border: 1px solid var(--border);
} }
.btn-submit { .btn-submit {
width: 100%; width: 100%;
padding: 13px; height: 56px;
margin-top: 8px;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-input);
font-size: 16px; font-size: 20px;
font-weight: 600; font-weight: 700;
font-family: inherit;
letter-spacing: 4px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
background: linear-gradient(135deg, #2563eb, #3b82f6); background: var(--accent);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); box-shadow: 0 6px 16px rgba(47, 163, 106, 0.28);
transition: transform 0.1s, box-shadow 0.2s, opacity 0.2s; transition: background 0.18s, box-shadow 0.2s, transform 0.1s;
} }
.btn-submit:hover { .btn-submit:hover {
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.38); background: var(--accent-hover);
box-shadow: 0 8px 22px rgba(47, 163, 106, 0.38);
} }
.btn-submit:active { .btn-submit:active {
@@ -316,11 +364,17 @@
} }
.login-wrap { .login-wrap {
background: linear-gradient(155deg, #1e3a8a, #3b82f6); background: linear-gradient(160deg, var(--bg-from), var(--bg-to));
} }
.login-card { .login-card {
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.18); box-shadow: 0 14px 32px rgba(15, 45, 35, 0.18);
}
}
@media (max-width: 480px) {
.login-card {
padding: 32px 24px 30px;
} }
} }
</style> </style>
@@ -331,20 +385,28 @@
<aside class="login-banner"> <aside class="login-banner">
<div class="banner-inner"> <div class="banner-inner">
<div class="brand"> <div class="brand">
<img class="brand-logo" src="/cas/front/image/logo.png" alt="logo" /> <img class="brand-logo" src="/cas/front/image/logo-final-wave-matched.png" alt="logo" />
<span class="brand-name">云海星通</span> <span class="brand-name">云海教育</span>
<span class="brand-slogan">云海星通</span>
</div> </div>
<h1 class="banner-title">统一身份认证平台</h1> <h1 class="banner-title">统一身份认证平台</h1>
<p class="banner-desc">一次登录，畅享所有校园应用<br />安全、便捷的单点登录服务</p> <p class="banner-desc">云海星通 · 统一身份认证平台为您提供安全、便捷的登录体验</p>
<ul class="banner-points"> <ul class="banner-points">
<li>统一账号体系，免去多套密码</li> <li><span class="feature__check">&#10003;</span>统一身份认证管理</li>
<li>单点登录，应用间无缝切换</li> <li><span class="feature__check">&#10003;</span>多应用单点登录</li>
<li>全程加密传输，保障数据安全</li> <li><span class="feature__check">&#10003;</span>安全可靠，集中管控</li>
</ul> </ul>
</div> </div>
<div class="banner-footer"> <div class="banner-footer">
©2021 bestsch.com inc All Rights reserved ©2021 bestsch.com inc All Rights reserved
</div> </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> </aside>
<main class="login-main"> <main class="login-main">
@@ -369,7 +431,7 @@
<img id="captchaImg" title="点击刷新" /> <img id="captchaImg" title="点击刷新" />
</div> </div>
</div> </div>
<button class="btn-submit" type="button" id="loginBtn" onclick="doLogin()">登录</button> <button class="btn-submit" type="button" id="loginBtn" onclick="doLogin()">登&nbsp;&nbsp;录</button>
<div class="warning" id="warningLabel"></div> <div class="warning" id="warningLabel"></div>
</form> </form>
</div> </div>
src/main/webapp/front/image/logo-final-wave-matched.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB