feat(REQ-7129) - 调整登录页

workflow-engine-server/src/main/resources/templates/form.html

@@ -34,35 +34,53 @@
         }
     </script>
 
-    <style type="text/tailwindcss">
-        @layer utilities {
-            .form-input-focus {
-                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
-            }
+    <style type="text/css">
+        /* 自定义表单输入焦点样式 */
+        .form-input-focus:focus {
+            border-color: #165DFF;
+            box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
+            outline: none;
+        }
 
-            .form-transition {
-                @apply transition-all duration-300 ease-in-out;
-            }
+        /* 过渡动画 */
+        .form-transition {
+            transition: all 0.3s ease-in-out;
+        }
 
-            .card-shadow {
-                @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
-            }
+        /* 卡片阴影效果 */
+        .card-shadow {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            transition: box-shadow 0.3s;
+        }
 
-            .form-hidden {
-                @apply hidden opacity-0 h-0;
-            }
+        .card-shadow:hover {
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
 
-            .form-visible {
-                @apply opacity-100 h-auto;
-            }
+        /* 表单隐藏状态 */
+        .form-hidden {
+            display: none;
+            opacity: 0;
+            height: 0;
+            overflow: hidden;
+        }
 
-            .mask-fade {
-                @apply transition-opacity duration-300 ease-in-out;
-            }
+        /* 表单显示状态 */
+        .form-visible {
+            display: block;
+            opacity: 1;
+            height: auto;
+        }
 
-            .tab-active {
-                @apply text-primary border-primary;
-            }
+        /* 遮罩层渐变效果 */
+        .mask-fade {
+            transition: opacity 0.3s ease-in-out;
+        }
+
+        /* 标签页激活状态 */
+        .tab-active {
+            color: #165DFF;
+            border-color: #165DFF;
         }
     </style>
 
@@ -148,8 +166,7 @@
             <!-- 授权验证区域 - 未认证时显示 -->
             <div th:unless="${isAuthenticated}">
                 <!-- 错误提示 Banner -->
-                <div id="authError"
-                     class="mb-4 bg-red-50 border border-red-200 rounded-lg p-4 flex items-center hidden"
+                <div id="authError" class="mb-4 bg-red-50 border border-red-200 rounded-lg p-4 flex items-center"
                      th:if="${authError != null}">
                     <i class="fa fa-exclamation-circle text-danger text-lg mr-3"></i>
                     <div>