mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2026-06-06 20:18:10 +08:00
style(login): 优化登录页布局与验证弹窗
将登录容器调整为可滚动的居中弹性布局，补充桌面与移动端内边距，避免表单在小屏或内容较多时被裁切。 移除登录表单顶部的站点元信息展示，改为居中标题，并整理输入框、图标和提交按钮的对齐、自动填充背景及交互阴影。 统一滑块验证弹窗、图片舞台、滑块手柄和状态提示的视觉表现，减少多余阴影和轨迹填充，使验证码区域更简洁稳定。
This commit is contained in:
邹景立
parent
de64a2f4a7
commit
8916e5a653
@ -24,10 +24,17 @@ body,
|
||||
-webkit-transition: background-image 1s linear;
|
||||
}
|
||||
.login-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding: 72px 20px 104px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--cursor-x: 78%;
|
||||
--cursor-y: 22%;
|
||||
}
|
||||
@ -65,6 +72,7 @@ body,
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -98,16 +106,25 @@ body,
|
||||
letter-spacing: 0.08em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.login-container form {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
.login-container .header > a.pull-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
line-height: 0;
|
||||
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;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 20px;
|
||||
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;
|
||||
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 {
|
||||
color: #0f172a;
|
||||
padding: 0 0 18px;
|
||||
font-size: 30px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@ -177,20 +168,32 @@ body,
|
||||
}
|
||||
.login-container form ul li i.layui-icon {
|
||||
color: #64748b;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
width: 24px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 18px;
|
||||
padding: 0;
|
||||
transform: translateY(-50%);
|
||||
line-height: 52px;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
justify-content: center;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.login-container form ul li input {
|
||||
color: #1f2937;
|
||||
z-index: 1;
|
||||
height: 52px;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0 56px 0 52px;
|
||||
font-size: 14px;
|
||||
line-height: 1em;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
text-indent: 0;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24) !important;
|
||||
border-radius: 14px;
|
||||
@ -199,7 +202,7 @@ body,
|
||||
text-shadow: none;
|
||||
-webkit-text-fill-color: #1f2937 !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:focus,
|
||||
@ -210,9 +213,8 @@ body,
|
||||
.login-container form ul li input:-webkit-autofill:active {
|
||||
border: 1px solid rgba(37, 99, 235, 0.4) !important;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
transform: translateY(-1px);
|
||||
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-transition-delay: 9999s !important;
|
||||
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important;
|
||||
@ -225,11 +227,15 @@ body,
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
.login-container form ul li button {
|
||||
display: flex !important;
|
||||
color: #fff !important;
|
||||
height: 52px !important;
|
||||
border: none !important;
|
||||
line-height: normal !important;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
|
||||
border-radius: 14px !important;
|
||||
justify-content: center;
|
||||
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);
|
||||
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 {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
background: rgba(8, 15, 28, 0.48);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(8, 15, 28, 0.38);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.login-container .login-verify-popup .login-verify-dialog {
|
||||
top: 50%;
|
||||
@ -265,8 +271,8 @@ body,
|
||||
transform: translate(-50%, -46%) scale(0.96);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%);
|
||||
box-shadow: 0 28px 90px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.52);
|
||||
background: rgba(248, 250, 252, 0.96);
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
@ -280,17 +286,19 @@ body,
|
||||
line-height: 1.7em;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-panel {
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
background: rgba(248, 250, 252, 0.72);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||||
background: rgba(248, 250, 252, 0.88);
|
||||
box-shadow: none;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-stage {
|
||||
height: 164px;
|
||||
height: auto;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
@ -307,30 +315,35 @@ body,
|
||||
.login-container .login-verify-popup .slider-bg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
object-fit: fill;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-piece {
|
||||
width: 16.6667%;
|
||||
display: block;
|
||||
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 {
|
||||
height: 48px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 14px;
|
||||
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 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 54px;
|
||||
height: 48px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: none;
|
||||
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 {
|
||||
top: 0;
|
||||
@ -349,21 +362,22 @@ body,
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 54px;
|
||||
height: 48px;
|
||||
height: 100%;
|
||||
color: #0f172a;
|
||||
display: flex;
|
||||
cursor: grab;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 14px;
|
||||
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 {
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16);
|
||||
box-shadow: none;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-handle i {
|
||||
color: #0f766e;
|
||||
@ -385,13 +399,13 @@ body,
|
||||
text-decoration: none;
|
||||
}
|
||||
.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 {
|
||||
color: #0f766e;
|
||||
}
|
||||
.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 {
|
||||
color: #dc2626;
|
||||
@ -406,6 +420,7 @@ body,
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
padding: 0 24px 14px;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@ -417,6 +432,9 @@ body,
|
||||
color: #fff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.login-container {
|
||||
padding: 64px 18px 92px;
|
||||
}
|
||||
.login-container:after {
|
||||
opacity: 0.14;
|
||||
}
|
||||
@ -436,6 +454,9 @@ body,
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
padding: 58px 14px 86px;
|
||||
}
|
||||
.login-container .header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@ -447,7 +468,7 @@ body,
|
||||
font-size: 16px;
|
||||
}
|
||||
.login-container form {
|
||||
width: calc(100% - 28px);
|
||||
width: 100%;
|
||||
padding: 22px 18px 22px;
|
||||
}
|
||||
.login-container .login-verify-popup .login-verify-dialog {
|
||||
@ -455,6 +476,6 @@ body,
|
||||
padding: 16px;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-stage {
|
||||
height: 148px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,10 +27,17 @@ body, .login-container {
|
||||
}
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding: 72px 20px 104px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--cursor-x: 78%;
|
||||
--cursor-y: 22%;
|
||||
|
||||
@ -75,6 +82,7 @@ body, .login-container {
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -111,18 +119,29 @@ body, .login-container {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
> a.pull-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
width: min(420px, calc(100% - 40px));
|
||||
width: min(420px, 100%);
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
padding: 28px 28px 30px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, .18);
|
||||
border-radius: 20px;
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #0f172a;
|
||||
padding: 0 0 18px;
|
||||
font-size: 30px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
@ -202,21 +192,33 @@ body, .login-container {
|
||||
|
||||
i.layui-icon {
|
||||
color: #64748b;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
width: 24px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 18px;
|
||||
padding: 0;
|
||||
transform: translateY(-50%);
|
||||
line-height: 52px;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
justify-content: center;
|
||||
transition: color .2s ease;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #1f2937;
|
||||
z-index: 1;
|
||||
height: 52px;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0 56px 0 52px;
|
||||
font-size: 14px;
|
||||
line-height: 1em;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
text-indent: 0;
|
||||
border: 1px solid rgba(148, 163, 184, .24) !important;
|
||||
border-radius: 14px;
|
||||
@ -225,16 +227,15 @@ body, .login-container {
|
||||
text-shadow: none;
|
||||
-webkit-text-fill-color: #1f2937 !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,
|
||||
&:-webkit-autofill, &:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus, &:-webkit-autofill:active {
|
||||
border: 1px solid rgba(37, 99, 235, .40) !important;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
transform: translateY(-1px);
|
||||
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-transition-delay: 9999s !important;
|
||||
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important;
|
||||
@ -251,11 +252,15 @@ body, .login-container {
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex !important;
|
||||
color: #fff !important;
|
||||
height: 52px !important;
|
||||
border: none !important;
|
||||
line-height: normal !important;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
|
||||
border-radius: 14px !important;
|
||||
justify-content: center;
|
||||
letter-spacing: .16em !important;
|
||||
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;
|
||||
@ -283,8 +288,8 @@ body, .login-container {
|
||||
.login-verify-mask {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
background: rgba(8, 15, 28, .48);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(8, 15, 28, .38);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.login-verify-dialog {
|
||||
@ -297,8 +302,8 @@ body, .login-container {
|
||||
transform: translate(-50%, -46%) scale(.96);
|
||||
border: 1px solid rgba(255, 255, 255, .18);
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(248, 250, 252, .88) 100%);
|
||||
box-shadow: 0 28px 90px rgba(2, 6, 23, .42), inset 0 1px 0 rgba(255, 255, 255, .52);
|
||||
background: rgba(248, 250, 252, .96);
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
transition: opacity .22s ease, transform .22s ease;
|
||||
}
|
||||
@ -314,6 +319,7 @@ body, .login-container {
|
||||
line-height: 1.7em;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
@ -321,12 +327,13 @@ body, .login-container {
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
border-radius: 18px;
|
||||
background: rgba(248, 250, 252, .72);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
|
||||
background: rgba(248, 250, 252, .88);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.slider-stage {
|
||||
height: 164px;
|
||||
height: auto;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid rgba(148, 163, 184, .12);
|
||||
@ -344,13 +351,15 @@ body, .login-container {
|
||||
.slider-bg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.slider-piece {
|
||||
width: 16.6667%;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
|
||||
filter: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.slider-bar {
|
||||
@ -358,19 +367,22 @@ body, .login-container {
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, .86);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.slider-bar-track {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 54px;
|
||||
height: 48px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: none;
|
||||
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 {
|
||||
@ -391,21 +403,22 @@ body, .login-container {
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 54px;
|
||||
height: 48px;
|
||||
height: 100%;
|
||||
color: #0f172a;
|
||||
display: flex;
|
||||
cursor: grab;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(148, 163, 184, .18);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
|
||||
box-shadow: none;
|
||||
|
||||
&.is-active {
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, .16);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
i {
|
||||
@ -433,7 +446,7 @@ body, .login-container {
|
||||
|
||||
.slider-panel.is-success {
|
||||
.slider-bar-track {
|
||||
background: linear-gradient(90deg, rgba(22, 163, 74, .26) 0%, rgba(45, 212, 191, .28) 100%);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.slider-bar-text {
|
||||
@ -443,7 +456,7 @@ body, .login-container {
|
||||
|
||||
.slider-panel.is-error {
|
||||
.slider-bar-track {
|
||||
background: linear-gradient(90deg, rgba(239, 68, 68, .24) 0%, rgba(251, 113, 133, .28) 100%);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.slider-bar-text {
|
||||
@ -462,6 +475,7 @@ body, .login-container {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
padding: 0 24px 14px;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 6px 18px rgba(15, 23, 42, .18);
|
||||
letter-spacing: .04em;
|
||||
|
||||
@ -477,6 +491,8 @@ body, .login-container {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.login-container {
|
||||
padding: 64px 18px 92px;
|
||||
|
||||
&:after {
|
||||
opacity: .14;
|
||||
}
|
||||
@ -503,6 +519,8 @@ body, .login-container {
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
padding: 58px 14px 86px;
|
||||
|
||||
.header {
|
||||
padding: 0 16px;
|
||||
|
||||
@ -517,7 +535,7 @@ body, .login-container {
|
||||
}
|
||||
|
||||
form {
|
||||
width: calc(100% - 28px);
|
||||
width: 100%;
|
||||
padding: 22px 18px 22px;
|
||||
}
|
||||
|
||||
@ -527,7 +545,7 @@ body, .login-container {
|
||||
}
|
||||
|
||||
.login-verify-popup .slider-stage {
|
||||
height: 148px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,11 +17,6 @@
|
||||
{/notempty}
|
||||
</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">
|
||||
<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>
|
||||
<input type="hidden" name="token" value="{$loginToken}">
|
||||
<input type="hidden" name="password_mode" value="plain">
|
||||
|
||||
@ -24,10 +24,17 @@ body,
|
||||
-webkit-transition: background-image 1s linear;
|
||||
}
|
||||
.login-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding: 72px 20px 104px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--cursor-x: 78%;
|
||||
--cursor-y: 22%;
|
||||
}
|
||||
@ -65,6 +72,7 @@ body,
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
padding: 0 32px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -98,16 +106,25 @@ body,
|
||||
letter-spacing: 0.08em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.login-container form {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
.login-container .header > a.pull-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
line-height: 0;
|
||||
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;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 20px;
|
||||
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;
|
||||
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 {
|
||||
color: #0f172a;
|
||||
padding: 0 0 18px;
|
||||
font-size: 30px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@ -177,20 +168,32 @@ body,
|
||||
}
|
||||
.login-container form ul li i.layui-icon {
|
||||
color: #64748b;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
width: 24px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 18px;
|
||||
padding: 0;
|
||||
transform: translateY(-50%);
|
||||
line-height: 52px;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
justify-content: center;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.login-container form ul li input {
|
||||
color: #1f2937;
|
||||
z-index: 1;
|
||||
height: 52px;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0 56px 0 52px;
|
||||
font-size: 14px;
|
||||
line-height: 1em;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
text-indent: 0;
|
||||
border: 1px solid rgba(148, 163, 184, 0.24) !important;
|
||||
border-radius: 14px;
|
||||
@ -199,7 +202,7 @@ body,
|
||||
text-shadow: none;
|
||||
-webkit-text-fill-color: #1f2937 !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:focus,
|
||||
@ -210,9 +213,8 @@ body,
|
||||
.login-container form ul li input:-webkit-autofill:active {
|
||||
border: 1px solid rgba(37, 99, 235, 0.4) !important;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
transform: translateY(-1px);
|
||||
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-transition-delay: 9999s !important;
|
||||
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out !important;
|
||||
@ -225,11 +227,15 @@ body,
|
||||
color: #dc2626 !important;
|
||||
}
|
||||
.login-container form ul li button {
|
||||
display: flex !important;
|
||||
color: #fff !important;
|
||||
height: 52px !important;
|
||||
border: none !important;
|
||||
line-height: normal !important;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
|
||||
border-radius: 14px !important;
|
||||
justify-content: center;
|
||||
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);
|
||||
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 {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
background: rgba(8, 15, 28, 0.48);
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(8, 15, 28, 0.38);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.login-container .login-verify-popup .login-verify-dialog {
|
||||
top: 50%;
|
||||
@ -265,8 +271,8 @@ body,
|
||||
transform: translate(-50%, -46%) scale(0.96);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%);
|
||||
box-shadow: 0 28px 90px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.52);
|
||||
background: rgba(248, 250, 252, 0.96);
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
@ -280,17 +286,19 @@ body,
|
||||
line-height: 1.7em;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-panel {
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 18px;
|
||||
background: rgba(248, 250, 252, 0.72);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||||
background: rgba(248, 250, 252, 0.88);
|
||||
box-shadow: none;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-stage {
|
||||
height: 164px;
|
||||
height: auto;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
@ -307,30 +315,35 @@ body,
|
||||
.login-container .login-verify-popup .slider-bg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
object-fit: fill;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-piece {
|
||||
width: 16.6667%;
|
||||
display: block;
|
||||
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 {
|
||||
height: 48px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 14px;
|
||||
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 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 54px;
|
||||
height: 48px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: none;
|
||||
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 {
|
||||
top: 0;
|
||||
@ -349,21 +362,22 @@ body,
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 54px;
|
||||
height: 48px;
|
||||
height: 100%;
|
||||
color: #0f172a;
|
||||
display: flex;
|
||||
cursor: grab;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 14px;
|
||||
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 {
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16);
|
||||
box-shadow: none;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-handle i {
|
||||
color: #0f766e;
|
||||
@ -385,13 +399,13 @@ body,
|
||||
text-decoration: none;
|
||||
}
|
||||
.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 {
|
||||
color: #0f766e;
|
||||
}
|
||||
.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 {
|
||||
color: #dc2626;
|
||||
@ -406,6 +420,7 @@ body,
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
padding: 0 24px 14px;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@ -417,6 +432,9 @@ body,
|
||||
color: #fff;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.login-container {
|
||||
padding: 64px 18px 92px;
|
||||
}
|
||||
.login-container:after {
|
||||
opacity: 0.14;
|
||||
}
|
||||
@ -436,6 +454,9 @@ body,
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.login-container {
|
||||
padding: 58px 14px 86px;
|
||||
}
|
||||
.login-container .header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
@ -447,7 +468,7 @@ body,
|
||||
font-size: 16px;
|
||||
}
|
||||
.login-container form {
|
||||
width: calc(100% - 28px);
|
||||
width: 100%;
|
||||
padding: 22px 18px 22px;
|
||||
}
|
||||
.login-container .login-verify-popup .login-verify-dialog {
|
||||
@ -455,6 +476,6 @@ body,
|
||||
padding: 16px;
|
||||
}
|
||||
.login-container .login-verify-popup .slider-stage {
|
||||
height: 148px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user