From 8916e5a653cffa7b69ec7b60d12a736e1798d252 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E6=99=AF=E7=AB=8B?= <zoujingli@qq.com>
Date: Wed, 20 May 2026 22:09:16 +0800
Subject: [PATCH] =?UTF-8?q?style(login):=20=E4=BC=98=E5=8C=96=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E5=B8=83=E5=B1=80=E4=B8=8E=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

统一滑块验证弹窗、图片舞台、滑块手柄和状态提示的视觉表现，减少多余阴影和轨迹填充，使验证码区域更简洁稳定。
---
 .../stc/public/static/theme/css/login.css     | 145 +++++++++--------
 .../stc/public/static/theme/css/login.less    | 146 ++++++++++--------
 .../src/view/login/index.html                 |   5 -
 public/static/theme/css/login.css             | 145 +++++++++--------
 4 files changed, 248 insertions(+), 193 deletions(-)

diff --git a/plugin/think-plugs-static/stc/public/static/theme/css/login.css b/plugin/think-plugs-static/stc/public/static/theme/css/login.css
index bbd02bdca..54d6635a3 100644
--- a/plugin/think-plugs-static/stc/public/static/theme/css/login.css
+++ b/plugin/think-plugs-static/stc/public/static/theme/css/login.css
@@ -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;
   }
 }
diff --git a/plugin/think-plugs-static/stc/public/static/theme/css/login.less b/plugin/think-plugs-static/stc/public/static/theme/css/login.less
index e6ee2f12b..b596b8c2d 100644
--- a/plugin/think-plugs-static/stc/public/static/theme/css/login.less
+++ b/plugin/think-plugs-static/stc/public/static/theme/css/login.less
@@ -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;
     }
   }
 }
diff --git a/plugin/think-plugs-system/src/view/login/index.html b/plugin/think-plugs-system/src/view/login/index.html
index 8436e7bfc..ef084b20a 100644
--- a/plugin/think-plugs-system/src/view/login/index.html
+++ b/plugin/think-plugs-system/src/view/login/index.html
@@ -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">
diff --git a/public/static/theme/css/login.css b/public/static/theme/css/login.css
index bbd02bdca..54d6635a3 100644
--- a/public/static/theme/css/login.css
+++ b/public/static/theme/css/login.css
@@ -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;
   }
 }