blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2026-06-06 20:18:10 +08:00
Code Issues Projects Releases Wiki Activity

style(login): 优化登录页布局与验证弹窗

Browse Source 
将登录容器调整为可滚动的居中弹性布局，补充桌面与移动端内边距，避免表单在小屏或内容较多时被裁切。

移除登录表单顶部的站点元信息展示，改为居中标题，并整理输入框、图标和提交按钮的对齐、自动填充背景及交互阴影。

统一滑块验证弹窗、图片舞台、滑块手柄和状态提示的视觉表现，减少多余阴影和轨迹填充，使验证码区域更简洁稳定。
This commit is contained in:
邹景立 2026-05-20 22:09:16 +08:00
parent de64a2f4a7
commit 8916e5a653
4 changed files with 248 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
plugin/think-plugs-static/stc/public/static/theme/css/login.css
View File

@ -24,10 +24,17 @@ body,
-webkit-transition: background-image 1s linear; -webkit-transition: background-image 1s linear;
} }
.login-container { .login-container {
height: 100%; height: auto;
overflow: hidden; min-height: 100%;
display: flex;
overflow-x: hidden;
overflow-y: auto;
position: relative; position: relative;
isolation: isolate; isolation: isolate;
padding: 72px 20px 104px;
box-sizing: border-box;
align-items: center;
justify-content: center;
--cursor-x: 78%; --cursor-x: 78%;
--cursor-y: 22%; --cursor-y: 22%;
} }
@ -65,6 +72,7 @@ body,
z-index: 2; z-index: 2;
display: flex; display: flex;
padding: 0 32px; padding: 0 32px;
box-sizing: border-box;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@ -98,16 +106,25 @@ body,
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-decoration: none; text-decoration: none;
} }
.login-container form { .login-container .header > a.pull-right {
top: 50%; top: 0;
left: 50%; right: 0;
z-index: 2; z-index: 1;
line-height: 0;
position: absolute; position: absolute;
width: min(420px, calc(100% - 40px)); }
.login-container .header > a.pull-right img {
display: block;
}
.login-container form {
z-index: 2;
width: min(420px, 100%);
flex: 0 0 auto;
position: relative;
padding: 28px 28px 30px; padding: 28px 28px 30px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -50%); box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 20px; border-radius: 20px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.82) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.82) 100%);
@ -134,37 +151,11 @@ body,
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.login-container form .login-meta {
gap: 8px;
color: #334155;
display: inline-flex;
font-size: 12px;
margin-bottom: 18px;
align-items: center;
padding: 7px 12px 7px 10px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
letter-spacing: 0.08em;
background: rgba(255, 255, 255, 0.62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.login-container form .login-meta .dot {
width: 8px;
height: 8px;
display: block;
border-radius: 50%;
background: linear-gradient(135deg, #14b8a6 0%, #3b82f6 100%);
box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12);
}
.login-container form .login-meta em {
color: #64748b;
font-style: normal;
}
.login-container form h2 { .login-container form h2 {
color: #0f172a; color: #0f172a;
padding: 0 0 18px; padding: 0 0 18px;
font-size: 30px; font-size: 30px;
text-align: left; text-align: center;
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@ -177,20 +168,32 @@ body,
} }
.login-container form ul li i.layui-icon { .login-container form ul li i.layui-icon {
color: #64748b; color: #64748b;
z-index: 2;
top: 0;
left: 16px;
width: 24px;
height: 52px;
display: flex;
font-size: 18px; font-size: 18px;
position: absolute; position: absolute;
top: 50%;
left: 18px;
padding: 0; padding: 0;
transform: translateY(-50%); line-height: 52px;
align-items: center;
pointer-events: none;
justify-content: center;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
.login-container form ul li input { .login-container form ul li input {
color: #1f2937; color: #1f2937;
z-index: 1;
height: 52px; height: 52px;
display: block;
position: relative;
padding: 0 56px 0 52px; padding: 0 56px 0 52px;
font-size: 14px; font-size: 14px;
line-height: 1em; line-height: normal;
box-sizing: border-box;
background-clip: padding-box;
text-indent: 0; text-indent: 0;
border: 1px solid rgba(148, 163, 184, 0.24) !important; border: 1px solid rgba(148, 163, 184, 0.24) !important;
border-radius: 14px; border-radius: 14px;
@ -199,7 +202,7 @@ body,
text-shadow: none; text-shadow: none;
-webkit-text-fill-color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
} }
.login-container form ul li input:hover, .login-container form ul li input:hover,
.login-container form ul li input:focus, .login-container form ul li input:focus,
@ -210,9 +213,8 @@ body,
.login-container form ul li input:-webkit-autofill:active { .login-container form ul li input:-webkit-autofill:active {
border: 1px solid rgba(37, 99, 235, 0.4) !important; border: 1px solid rgba(37, 99, 235, 0.4) !important;
background: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.92);
transform: translateY(-1px);
text-shadow: none; text-shadow: none;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 14px 30px rgba(15, 23, 42, 0.08) !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.92) inset, 0 0 0 4px rgba(59, 130, 246, 0.1), 0 14px 30px rgba(15, 23, 42, 0.08) !important;
-webkit-text-fill-color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important;
-webkit-transition-delay: 9999s !important; -webkit-transition-delay: 9999s !important;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important; -webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important;
@ -225,11 +227,15 @@ body,
color: #dc2626 !important; color: #dc2626 !important;
} }
.login-container form ul li button { .login-container form ul li button {
display: flex !important;
color: #fff !important; color: #fff !important;
height: 52px !important; height: 52px !important;
border: none !important; border: none !important;
line-height: normal !important;
align-items: center;
background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important; background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
border-radius: 14px !important; border-radius: 14px !important;
justify-content: center;
letter-spacing: 0.16em !important; letter-spacing: 0.16em !important;
box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28); box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
@ -252,8 +258,8 @@ body,
.login-container .login-verify-popup .login-verify-mask { .login-container .login-verify-popup .login-verify-mask {
inset: 0; inset: 0;
position: absolute; position: absolute;
background: rgba(8, 15, 28, 0.48); background: rgba(8, 15, 28, 0.38);
backdrop-filter: blur(10px); backdrop-filter: blur(6px);
} }
.login-container .login-verify-popup .login-verify-dialog { .login-container .login-verify-popup .login-verify-dialog {
top: 50%; top: 50%;
@ -265,8 +271,8 @@ body,
transform: translate(-50%, -46%) scale(0.96); transform: translate(-50%, -46%) scale(0.96);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 24px; border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%); background: rgba(248, 250, 252, 0.96);
box-shadow: 0 28px 90px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.52); box-shadow: none;
opacity: 0; opacity: 0;
transition: opacity 0.22s ease, transform 0.22s ease; transition: opacity 0.22s ease, transform 0.22s ease;
} }
@ -280,17 +286,19 @@ body,
line-height: 1.7em; line-height: 1.7em;
margin-bottom: 12px; margin-bottom: 12px;
font-weight: 600; font-weight: 600;
text-align: center;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.login-container .login-verify-popup .slider-panel { .login-container .login-verify-popup .slider-panel {
padding: 12px; padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px; border-radius: 18px;
background: rgba(248, 250, 252, 0.72); background: rgba(248, 250, 252, 0.88);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); box-shadow: none;
} }
.login-container .login-verify-popup .slider-stage { .login-container .login-verify-popup .slider-stage {
height: 164px; height: auto;
aspect-ratio: 2 / 1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border: 1px solid rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.12);
@ -307,30 +315,35 @@ body,
.login-container .login-verify-popup .slider-bg { .login-container .login-verify-popup .slider-bg {
width: 100%; width: 100%;
display: block; display: block;
object-fit: cover; object-fit: fill;
} }
.login-container .login-verify-popup .slider-piece { .login-container .login-verify-popup .slider-piece {
width: 16.6667%; width: 16.6667%;
display: block;
pointer-events: none; pointer-events: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18); filter: none;
box-shadow: none;
} }
.login-container .login-verify-popup .slider-bar { .login-container .login-verify-popup .slider-bar {
height: 48px; height: 48px;
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
box-sizing: border-box;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.86); background: rgba(255, 255, 255, 0.86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: none;
} }
.login-container .login-verify-popup .slider-bar-track { .login-container .login-verify-popup .slider-bar-track {
top: 0; top: 0;
left: 0; left: 0;
width: 54px; width: 0;
height: 48px; height: 100%;
display: none;
position: absolute; position: absolute;
background: linear-gradient(90deg, rgba(20, 184, 166, 0.28) 0%, rgba(59, 130, 246, 0.24) 100%); border-radius: 13px 0 0 13px;
background: transparent;
} }
.login-container .login-verify-popup .slider-bar-text { .login-container .login-verify-popup .slider-bar-text {
top: 0; top: 0;
@ -349,21 +362,22 @@ body,
left: 0; left: 0;
z-index: 2; z-index: 2;
width: 54px; width: 54px;
height: 48px; height: 100%;
color: #0f172a; color: #0f172a;
display: flex; display: flex;
cursor: grab; cursor: grab;
position: absolute; position: absolute;
box-sizing: border-box;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px; border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); box-shadow: none;
} }
.login-container .login-verify-popup .slider-handle.is-active { .login-container .login-verify-popup .slider-handle.is-active {
cursor: grabbing; cursor: grabbing;
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16); box-shadow: none;
} }
.login-container .login-verify-popup .slider-handle i { .login-container .login-verify-popup .slider-handle i {
color: #0f766e; color: #0f766e;
@ -385,13 +399,13 @@ body,
text-decoration: none; text-decoration: none;
} }
.login-container .login-verify-popup .slider-panel.is-success .slider-bar-track { .login-container .login-verify-popup .slider-panel.is-success .slider-bar-track {
background: linear-gradient(90deg, rgba(22, 163, 74, 0.26) 0%, rgba(45, 212, 191, 0.28) 100%); background: transparent;
} }
.login-container .login-verify-popup .slider-panel.is-success .slider-bar-text { .login-container .login-verify-popup .slider-panel.is-success .slider-bar-text {
color: #0f766e; color: #0f766e;
} }
.login-container .login-verify-popup .slider-panel.is-error .slider-bar-track { .login-container .login-verify-popup .slider-panel.is-error .slider-bar-track {
background: linear-gradient(90deg, rgba(239, 68, 68, 0.24) 0%, rgba(251, 113, 133, 0.28) 100%); background: transparent;
} }
.login-container .login-verify-popup .slider-panel.is-error .slider-bar-text { .login-container .login-verify-popup .slider-panel.is-error .slider-bar-text {
color: #dc2626; color: #dc2626;
@ -406,6 +420,7 @@ body,
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
padding: 0 24px 14px; padding: 0 24px 14px;
box-sizing: border-box;
text-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); text-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
@ -417,6 +432,9 @@ body,
color: #fff; color: #fff;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.login-container {
padding: 64px 18px 92px;
}
.login-container:after { .login-container:after {
opacity: 0.14; opacity: 0.14;
} }
@ -436,6 +454,9 @@ body,
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.login-container {
padding: 58px 14px 86px;
}
.login-container .header { .login-container .header {
padding: 0 16px; padding: 0 16px;
} }
@ -447,7 +468,7 @@ body,
font-size: 16px; font-size: 16px;
} }
.login-container form { .login-container form {
width: calc(100% - 28px); width: 100%;
padding: 22px 18px 22px; padding: 22px 18px 22px;
} }
.login-container .login-verify-popup .login-verify-dialog { .login-container .login-verify-popup .login-verify-dialog {
@ -455,6 +476,6 @@ body,
padding: 16px; padding: 16px;
} }
.login-container .login-verify-popup .slider-stage { .login-container .login-verify-popup .slider-stage {
height: 148px; height: auto;
} }
} }

146
plugin/think-plugs-static/stc/public/static/theme/css/login.less
View File

@ -27,10 +27,17 @@ body, .login-container {
} }
.login-container { .login-container {
height: 100%; height: auto;
overflow: hidden; min-height: 100%;
display: flex;
overflow-x: hidden;
overflow-y: auto;
position: relative; position: relative;
isolation: isolate; isolation: isolate;
padding: 72px 20px 104px;
box-sizing: border-box;
align-items: center;
justify-content: center;
--cursor-x: 78%; --cursor-x: 78%;
--cursor-y: 22%; --cursor-y: 22%;
@ -75,6 +82,7 @@ body, .login-container {
z-index: 2; z-index: 2;
display: flex; display: flex;
padding: 0 32px; padding: 0 32px;
box-sizing: border-box;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -111,18 +119,29 @@ body, .login-container {
text-decoration: none; text-decoration: none;
} }
} }
> a.pull-right {
top: 0;
right: 0;
z-index: 1;
line-height: 0;
position: absolute;
img {
display: block;
}
}
} }
form { form {
top: 50%;
left: 50%;
z-index: 2; z-index: 2;
position: absolute; width: min(420px, 100%);
width: min(420px, calc(100% - 40px)); flex: 0 0 auto;
position: relative;
padding: 28px 28px 30px; padding: 28px 28px 30px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -50%); box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18);
border-radius: 20px; border-radius: 20px;
background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(248, 250, 252, .82) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(248, 250, 252, .82) 100%);
@ -154,40 +173,11 @@ body, .login-container {
position: relative; position: relative;
} }
.login-meta {
gap: 8px;
color: #334155;
display: inline-flex;
font-size: 12px;
margin-bottom: 18px;
align-items: center;
padding: 7px 12px 7px 10px;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 999px;
letter-spacing: .08em;
background: rgba(255, 255, 255, .62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
.dot {
width: 8px;
height: 8px;
display: block;
border-radius: 50%;
background: linear-gradient(135deg, #14b8a6 0%, #3b82f6 100%);
box-shadow: 0 0 0 4px rgba(45, 212, 191, .12);
}
em {
color: #64748b;
font-style: normal;
}
}
h2 { h2 {
color: #0f172a; color: #0f172a;
padding: 0 0 18px; padding: 0 0 18px;
font-size: 30px; font-size: 30px;
text-align: left; text-align: center;
font-weight: 700; font-weight: 700;
letter-spacing: .02em; letter-spacing: .02em;
} }
@ -202,21 +192,33 @@ body, .login-container {
i.layui-icon { i.layui-icon {
color: #64748b; color: #64748b;
z-index: 2;
top: 0;
left: 16px;
width: 24px;
height: 52px;
display: flex;
font-size: 18px; font-size: 18px;
position: absolute; position: absolute;
top: 50%;
left: 18px;
padding: 0; padding: 0;
transform: translateY(-50%); line-height: 52px;
align-items: center;
pointer-events: none;
justify-content: center;
transition: color .2s ease; transition: color .2s ease;
} }
input { input {
color: #1f2937; color: #1f2937;
z-index: 1;
height: 52px; height: 52px;
display: block;
position: relative;
padding: 0 56px 0 52px; padding: 0 56px 0 52px;
font-size: 14px; font-size: 14px;
line-height: 1em; line-height: normal;
box-sizing: border-box;
background-clip: padding-box;
text-indent: 0; text-indent: 0;
border: 1px solid rgba(148, 163, 184, .24) !important; border: 1px solid rgba(148, 163, 184, .24) !important;
border-radius: 14px; border-radius: 14px;
@ -225,16 +227,15 @@ body, .login-container {
text-shadow: none; text-shadow: none;
-webkit-text-fill-color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48) !important;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
&:hover, &:focus, &:active, &:hover, &:focus, &:active,
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill, &:-webkit-autofill:hover,
&:-webkit-autofill:focus, &:-webkit-autofill:active { &:-webkit-autofill:focus, &:-webkit-autofill:active {
border: 1px solid rgba(37, 99, 235, .40) !important; border: 1px solid rgba(37, 99, 235, .40) !important;
background: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .92);
transform: translateY(-1px);
text-shadow: none; text-shadow: none;
box-shadow: 0 0 0 4px rgba(59, 130, 246, .10), 0 14px 30px rgba(15, 23, 42, .08) !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, .92) inset, 0 0 0 4px rgba(59, 130, 246, .10), 0 14px 30px rgba(15, 23, 42, .08) !important;
-webkit-text-fill-color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important;
-webkit-transition-delay: 9999s !important; -webkit-transition-delay: 9999s !important;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important; -webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important;
@ -251,11 +252,15 @@ body, .login-container {
} }
button { button {
display: flex !important;
color: #fff !important; color: #fff !important;
height: 52px !important; height: 52px !important;
border: none !important; border: none !important;
line-height: normal !important;
align-items: center;
background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important; background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
border-radius: 14px !important; border-radius: 14px !important;
justify-content: center;
letter-spacing: .16em !important; letter-spacing: .16em !important;
box-shadow: 0 16px 36px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255, 255, 255, .28); box-shadow: 0 16px 36px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
@ -283,8 +288,8 @@ body, .login-container {
.login-verify-mask { .login-verify-mask {
inset: 0; inset: 0;
position: absolute; position: absolute;
background: rgba(8, 15, 28, .48); background: rgba(8, 15, 28, .38);
backdrop-filter: blur(10px); backdrop-filter: blur(6px);
} }
.login-verify-dialog { .login-verify-dialog {
@ -297,8 +302,8 @@ body, .login-container {
transform: translate(-50%, -46%) scale(.96); transform: translate(-50%, -46%) scale(.96);
border: 1px solid rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18);
border-radius: 24px; border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(248, 250, 252, .88) 100%); background: rgba(248, 250, 252, .96);
box-shadow: 0 28px 90px rgba(2, 6, 23, .42), inset 0 1px 0 rgba(255, 255, 255, .52); box-shadow: none;
opacity: 0; opacity: 0;
transition: opacity .22s ease, transform .22s ease; transition: opacity .22s ease, transform .22s ease;
} }
@ -314,6 +319,7 @@ body, .login-container {
line-height: 1.7em; line-height: 1.7em;
margin-bottom: 12px; margin-bottom: 12px;
font-weight: 600; font-weight: 600;
text-align: center;
letter-spacing: .02em; letter-spacing: .02em;
} }
@ -321,12 +327,13 @@ body, .login-container {
padding: 12px; padding: 12px;
border: 1px solid rgba(148, 163, 184, .18); border: 1px solid rgba(148, 163, 184, .18);
border-radius: 18px; border-radius: 18px;
background: rgba(248, 250, 252, .72); background: rgba(248, 250, 252, .88);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); box-shadow: none;
} }
.slider-stage { .slider-stage {
height: 164px; height: auto;
aspect-ratio: 2 / 1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border: 1px solid rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .12);
@ -344,13 +351,15 @@ body, .login-container {
.slider-bg { .slider-bg {
width: 100%; width: 100%;
display: block; display: block;
object-fit: cover; object-fit: fill;
} }
.slider-piece { .slider-piece {
width: 16.6667%; width: 16.6667%;
display: block;
pointer-events: none; pointer-events: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, .18); filter: none;
box-shadow: none;
} }
.slider-bar { .slider-bar {
@ -358,19 +367,22 @@ body, .login-container {
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
box-sizing: border-box;
border: 1px solid rgba(148, 163, 184, .18); border: 1px solid rgba(148, 163, 184, .18);
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); box-shadow: none;
} }
.slider-bar-track { .slider-bar-track {
top: 0; top: 0;
left: 0; left: 0;
width: 54px; width: 0;
height: 48px; height: 100%;
display: none;
position: absolute; position: absolute;
background: linear-gradient(90deg, rgba(20, 184, 166, .28) 0%, rgba(59, 130, 246, .24) 100%); border-radius: 13px 0 0 13px;
background: transparent;
} }
.slider-bar-text { .slider-bar-text {
@ -391,21 +403,22 @@ body, .login-container {
left: 0; left: 0;
z-index: 2; z-index: 2;
width: 54px; width: 54px;
height: 48px; height: 100%;
color: #0f172a; color: #0f172a;
display: flex; display: flex;
cursor: grab; cursor: grab;
position: absolute; position: absolute;
box-sizing: border-box;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid rgba(148, 163, 184, .18); border: 1px solid rgba(148, 163, 184, .18);
border-radius: 14px; border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 10px 24px rgba(15, 23, 42, .12); box-shadow: none;
&.is-active { &.is-active {
cursor: grabbing; cursor: grabbing;
box-shadow: 0 12px 28px rgba(37, 99, 235, .16); box-shadow: none;
} }
i { i {
@ -433,7 +446,7 @@ body, .login-container {
.slider-panel.is-success { .slider-panel.is-success {
.slider-bar-track { .slider-bar-track {
background: linear-gradient(90deg, rgba(22, 163, 74, .26) 0%, rgba(45, 212, 191, .28) 100%); background: transparent;
} }
.slider-bar-text { .slider-bar-text {
@ -443,7 +456,7 @@ body, .login-container {
.slider-panel.is-error { .slider-panel.is-error {
.slider-bar-track { .slider-bar-track {
background: linear-gradient(90deg, rgba(239, 68, 68, .24) 0%, rgba(251, 113, 133, .28) 100%); background: transparent;
} }
.slider-bar-text { .slider-bar-text {
@ -462,6 +475,7 @@ body, .login-container {
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
padding: 0 24px 14px; padding: 0 24px 14px;
box-sizing: border-box;
text-shadow: 0 6px 18px rgba(15, 23, 42, .18); text-shadow: 0 6px 18px rgba(15, 23, 42, .18);
letter-spacing: .04em; letter-spacing: .04em;
@ -477,6 +491,8 @@ body, .login-container {
@media (max-width: 768px) { @media (max-width: 768px) {
.login-container { .login-container {
padding: 64px 18px 92px;
&:after { &:after {
opacity: .14; opacity: .14;
} }
@ -503,6 +519,8 @@ body, .login-container {
@media (max-width: 480px) { @media (max-width: 480px) {
.login-container { .login-container {
padding: 58px 14px 86px;
.header { .header {
padding: 0 16px; padding: 0 16px;
@ -517,7 +535,7 @@ body, .login-container {
} }
form { form {
width: calc(100% - 28px); width: 100%;
padding: 22px 18px 22px; padding: 22px 18px 22px;
} }
@ -527,7 +545,7 @@ body, .login-container {
} }
.login-verify-popup .slider-stage { .login-verify-popup .slider-stage {
height: 148px; height: auto;
} }
} }
} }

5
plugin/think-plugs-system/src/view/login/index.html
View File

@ -17,11 +17,6 @@
{/notempty} {/notempty}
</div> </div>
<form data-login-form data-login-token="{$loginToken}" data-login-password-key="{$loginPasswordKey}" data-login-slider="{$loginSliderUrl|default=''}" data-login-check="{$loginCheckUrl|default=''}" onsubmit="return false" method="post" class="layui-anim layui-anim-upbit" autocomplete="off"> <form data-login-form data-login-token="{$loginToken}" data-login-password-key="{$loginPasswordKey}" data-login-slider="{$loginSliderUrl|default=''}" data-login-check="{$loginCheckUrl|default=''}" onsubmit="return false" method="post" class="layui-anim layui-anim-upbit" autocomplete="off">
<div class="login-meta notselect">
<span class="dot"></span>
<span>{if !empty($websiteName)}{$websiteName|default=''}{else/}{$applicationName|default='ThinkAdmin'}{/if}</span>
{if !empty($applicationVersion)}<em>{$applicationVersion|default=''}</em>{/if}
</div>
<h2 class="notselect">{:isset($loginTitle) && is_scalar($loginTitle) && $loginTitle !== '' ? $loginTitle : lang('系统管理')}</h2> <h2 class="notselect">{:isset($loginTitle) && is_scalar($loginTitle) && $loginTitle !== '' ? $loginTitle : lang('系统管理')}</h2>
<input type="hidden" name="token" value="{$loginToken}"> <input type="hidden" name="token" value="{$loginToken}">
<input type="hidden" name="password_mode" value="plain"> <input type="hidden" name="password_mode" value="plain">

145
public/static/theme/css/login.css
View File

@ -24,10 +24,17 @@ body,
-webkit-transition: background-image 1s linear; -webkit-transition: background-image 1s linear;
} }
.login-container { .login-container {
height: 100%; height: auto;
overflow: hidden; min-height: 100%;
display: flex;
overflow-x: hidden;
overflow-y: auto;
position: relative; position: relative;
isolation: isolate; isolation: isolate;
padding: 72px 20px 104px;
box-sizing: border-box;
align-items: center;
justify-content: center;
--cursor-x: 78%; --cursor-x: 78%;
--cursor-y: 22%; --cursor-y: 22%;
} }
@ -65,6 +72,7 @@ body,
z-index: 2; z-index: 2;
display: flex; display: flex;
padding: 0 32px; padding: 0 32px;
box-sizing: border-box;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@ -98,16 +106,25 @@ body,
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-decoration: none; text-decoration: none;
} }
.login-container form { .login-container .header > a.pull-right {
top: 50%; top: 0;
left: 50%; right: 0;
z-index: 2; z-index: 1;
line-height: 0;
position: absolute; position: absolute;
width: min(420px, calc(100% - 40px)); }
.login-container .header > a.pull-right img {
display: block;
}
.login-container form {
z-index: 2;
width: min(420px, 100%);
flex: 0 0 auto;
position: relative;
padding: 28px 28px 30px; padding: 28px 28px 30px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
transform: translate(-50%, -50%); box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 20px; border-radius: 20px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.82) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.82) 100%);
@ -134,37 +151,11 @@ body,
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.login-container form .login-meta {
gap: 8px;
color: #334155;
display: inline-flex;
font-size: 12px;
margin-bottom: 18px;
align-items: center;
padding: 7px 12px 7px 10px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
letter-spacing: 0.08em;
background: rgba(255, 255, 255, 0.62);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.login-container form .login-meta .dot {
width: 8px;
height: 8px;
display: block;
border-radius: 50%;
background: linear-gradient(135deg, #14b8a6 0%, #3b82f6 100%);
box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12);
}
.login-container form .login-meta em {
color: #64748b;
font-style: normal;
}
.login-container form h2 { .login-container form h2 {
color: #0f172a; color: #0f172a;
padding: 0 0 18px; padding: 0 0 18px;
font-size: 30px; font-size: 30px;
text-align: left; text-align: center;
font-weight: 700; font-weight: 700;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@ -177,20 +168,32 @@ body,
} }
.login-container form ul li i.layui-icon { .login-container form ul li i.layui-icon {
color: #64748b; color: #64748b;
z-index: 2;
top: 0;
left: 16px;
width: 24px;
height: 52px;
display: flex;
font-size: 18px; font-size: 18px;
position: absolute; position: absolute;
top: 50%;
left: 18px;
padding: 0; padding: 0;
transform: translateY(-50%); line-height: 52px;
align-items: center;
pointer-events: none;
justify-content: center;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
.login-container form ul li input { .login-container form ul li input {
color: #1f2937; color: #1f2937;
z-index: 1;
height: 52px; height: 52px;
display: block;
position: relative;
padding: 0 56px 0 52px; padding: 0 56px 0 52px;
font-size: 14px; font-size: 14px;
line-height: 1em; line-height: normal;
box-sizing: border-box;
background-clip: padding-box;
text-indent: 0; text-indent: 0;
border: 1px solid rgba(148, 163, 184, 0.24) !important; border: 1px solid rgba(148, 163, 184, 0.24) !important;
border-radius: 14px; border-radius: 14px;
@ -199,7 +202,7 @@ body,
text-shadow: none; text-shadow: none;
-webkit-text-fill-color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
} }
.login-container form ul li input:hover, .login-container form ul li input:hover,
.login-container form ul li input:focus, .login-container form ul li input:focus,
@ -210,9 +213,8 @@ body,
.login-container form ul li input:-webkit-autofill:active { .login-container form ul li input:-webkit-autofill:active {
border: 1px solid rgba(37, 99, 235, 0.4) !important; border: 1px solid rgba(37, 99, 235, 0.4) !important;
background: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.92);
transform: translateY(-1px);
text-shadow: none; text-shadow: none;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 14px 30px rgba(15, 23, 42, 0.08) !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.92) inset, 0 0 0 4px rgba(59, 130, 246, 0.1), 0 14px 30px rgba(15, 23, 42, 0.08) !important;
-webkit-text-fill-color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important;
-webkit-transition-delay: 9999s !important; -webkit-transition-delay: 9999s !important;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important; -webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important;
@ -225,11 +227,15 @@ body,
color: #dc2626 !important; color: #dc2626 !important;
} }
.login-container form ul li button { .login-container form ul li button {
display: flex !important;
color: #fff !important; color: #fff !important;
height: 52px !important; height: 52px !important;
border: none !important; border: none !important;
line-height: normal !important;
align-items: center;
background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important; background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
border-radius: 14px !important; border-radius: 14px !important;
justify-content: center;
letter-spacing: 0.16em !important; letter-spacing: 0.16em !important;
box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28); box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
@ -252,8 +258,8 @@ body,
.login-container .login-verify-popup .login-verify-mask { .login-container .login-verify-popup .login-verify-mask {
inset: 0; inset: 0;
position: absolute; position: absolute;
background: rgba(8, 15, 28, 0.48); background: rgba(8, 15, 28, 0.38);
backdrop-filter: blur(10px); backdrop-filter: blur(6px);
} }
.login-container .login-verify-popup .login-verify-dialog { .login-container .login-verify-popup .login-verify-dialog {
top: 50%; top: 50%;
@ -265,8 +271,8 @@ body,
transform: translate(-50%, -46%) scale(0.96); transform: translate(-50%, -46%) scale(0.96);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 24px; border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%); background: rgba(248, 250, 252, 0.96);
box-shadow: 0 28px 90px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.52); box-shadow: none;
opacity: 0; opacity: 0;
transition: opacity 0.22s ease, transform 0.22s ease; transition: opacity 0.22s ease, transform 0.22s ease;
} }
@ -280,17 +286,19 @@ body,
line-height: 1.7em; line-height: 1.7em;
margin-bottom: 12px; margin-bottom: 12px;
font-weight: 600; font-weight: 600;
text-align: center;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.login-container .login-verify-popup .slider-panel { .login-container .login-verify-popup .slider-panel {
padding: 12px; padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px; border-radius: 18px;
background: rgba(248, 250, 252, 0.72); background: rgba(248, 250, 252, 0.88);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); box-shadow: none;
} }
.login-container .login-verify-popup .slider-stage { .login-container .login-verify-popup .slider-stage {
height: 164px; height: auto;
aspect-ratio: 2 / 1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border: 1px solid rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.12);
@ -307,30 +315,35 @@ body,
.login-container .login-verify-popup .slider-bg { .login-container .login-verify-popup .slider-bg {
width: 100%; width: 100%;
display: block; display: block;
object-fit: cover; object-fit: fill;
} }
.login-container .login-verify-popup .slider-piece { .login-container .login-verify-popup .slider-piece {
width: 16.6667%; width: 16.6667%;
display: block;
pointer-events: none; pointer-events: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18); filter: none;
box-shadow: none;
} }
.login-container .login-verify-popup .slider-bar { .login-container .login-verify-popup .slider-bar {
height: 48px; height: 48px;
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
box-sizing: border-box;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.86); background: rgba(255, 255, 255, 0.86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: none;
} }
.login-container .login-verify-popup .slider-bar-track { .login-container .login-verify-popup .slider-bar-track {
top: 0; top: 0;
left: 0; left: 0;
width: 54px; width: 0;
height: 48px; height: 100%;
display: none;
position: absolute; position: absolute;
background: linear-gradient(90deg, rgba(20, 184, 166, 0.28) 0%, rgba(59, 130, 246, 0.24) 100%); border-radius: 13px 0 0 13px;
background: transparent;
} }
.login-container .login-verify-popup .slider-bar-text { .login-container .login-verify-popup .slider-bar-text {
top: 0; top: 0;
@ -349,21 +362,22 @@ body,
left: 0; left: 0;
z-index: 2; z-index: 2;
width: 54px; width: 54px;
height: 48px; height: 100%;
color: #0f172a; color: #0f172a;
display: flex; display: flex;
cursor: grab; cursor: grab;
position: absolute; position: absolute;
box-sizing: border-box;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px; border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); box-shadow: none;
} }
.login-container .login-verify-popup .slider-handle.is-active { .login-container .login-verify-popup .slider-handle.is-active {
cursor: grabbing; cursor: grabbing;
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16); box-shadow: none;
} }
.login-container .login-verify-popup .slider-handle i { .login-container .login-verify-popup .slider-handle i {
color: #0f766e; color: #0f766e;
@ -385,13 +399,13 @@ body,
text-decoration: none; text-decoration: none;
} }
.login-container .login-verify-popup .slider-panel.is-success .slider-bar-track { .login-container .login-verify-popup .slider-panel.is-success .slider-bar-track {
background: linear-gradient(90deg, rgba(22, 163, 74, 0.26) 0%, rgba(45, 212, 191, 0.28) 100%); background: transparent;
} }
.login-container .login-verify-popup .slider-panel.is-success .slider-bar-text { .login-container .login-verify-popup .slider-panel.is-success .slider-bar-text {
color: #0f766e; color: #0f766e;
} }
.login-container .login-verify-popup .slider-panel.is-error .slider-bar-track { .login-container .login-verify-popup .slider-panel.is-error .slider-bar-track {
background: linear-gradient(90deg, rgba(239, 68, 68, 0.24) 0%, rgba(251, 113, 133, 0.28) 100%); background: transparent;
} }
.login-container .login-verify-popup .slider-panel.is-error .slider-bar-text { .login-container .login-verify-popup .slider-panel.is-error .slider-bar-text {
color: #dc2626; color: #dc2626;
@ -406,6 +420,7 @@ body,
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
padding: 0 24px 14px; padding: 0 24px 14px;
box-sizing: border-box;
text-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); text-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
@ -417,6 +432,9 @@ body,
color: #fff; color: #fff;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.login-container {
padding: 64px 18px 92px;
}
.login-container:after { .login-container:after {
opacity: 0.14; opacity: 0.14;
} }
@ -436,6 +454,9 @@ body,
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.login-container {
padding: 58px 14px 86px;
}
.login-container .header { .login-container .header {
padding: 0 16px; padding: 0 16px;
} }
@ -447,7 +468,7 @@ body,
font-size: 16px; font-size: 16px;
} }
.login-container form { .login-container form {
width: calc(100% - 28px); width: 100%;
padding: 22px 18px 22px; padding: 22px 18px 22px;
} }
.login-container .login-verify-popup .login-verify-dialog { .login-container .login-verify-popup .login-verify-dialog {
@ -455,6 +476,6 @@ body,
padding: 16px; padding: 16px;
} }
.login-container .login-verify-popup .slider-stage { .login-container .login-verify-popup .slider-stage {
height: 148px; height: auto;
} }
} }