diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..0b48bef
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/layout/logo/index.vue b/src/layout/logo/index.vue
index 2b3a2d4..4864565 100644
--- a/src/layout/logo/index.vue
+++ b/src/layout/logo/index.vue
@@ -2,14 +2,19 @@
  * @Author: AaronWu 2463371514@qq.com
  * @Date: 2025-03-31 15:12:17
  * @LastEditors: AaronWu 2463371514@qq.com
- * @LastEditTime: 2025-03-31 15:34:13
+ * @LastEditTime: 2025-04-01 09:27:31
  * @FilePath: /IssueSupportManage/src/layout/logo/index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="logo">
-    <!-- <img src="~@/assets/images/logo.png" alt="" /> -->
-    <h2 v-show="!collapsed" class="title">问题工单管理后台</h2>
+    <div class="logo-content">
+      <!-- <img src="~@/assets/images/logo.png" alt="" class="logo-img" /> -->
+      <h2 v-show="!collapsed" class="title">
+        <span class="title-text">问题工单管理后台</span>
+        <div class="title-line"></div>
+      </h2>
+    </div>
   </div>
 </template>
 
@@ -24,19 +29,49 @@
 <style lang="less" scoped>
   .logo {
     @apply flex overflow-hidden whitespace-nowrap items-center;
-
     height: 64px;
-    padding-left: 24px;
-    line-height: 64px;
+    padding: 0 24px;
+    // background: #fff;
+    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
 
-    img {
-      height: 32px;
-      margin-right: 8px;
-    }
+    .logo-content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .logo-img {
+        height: 32px;
+        width: 32px;
+        margin-right: 12px;
+        transition: all 0.3s;
+        object-fit: contain;
+      }
+
+      .title {
+        @apply mb-0;
+        position: relative;
+        
+        .title-text {
+          font-size: 18px;
+          font-weight: 600;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          letter-spacing: 1px;
+        }
+
+        .title-line {
+          height: 2px;
+          width: 24px;
+          margin-top: 4px;
+          background: linear-gradient(90deg, #667eea, #764ba2);
+          transition: width 0.3s ease;
+        }
 
-    .title {
-      @apply mb-0 text-xl;
-      color: @primary-color;
+        &:hover .title-line {
+          width: 100%;
+        }
+      }
     }
   }
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index cf835c1..e12c2cb 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,54 +1,79 @@
 <template>
-  <div class="login-box">
-    <!-- w:w="100vw"
-    w:h="100vh"
-    w:p="t-240px"
-    w:flex="md:~ col"
-    w:align="items-center"
-    w:bg="login contain" -->
-    <div class="login-logo">
-      <h1 class="mb-0 ml-2 text-3xl font-bold">问题工单管理系统</h1>
+  <div class="login-container">
+    <div class="login-box">
+      <div class="login-content">
+        <div class="login-header">
+          <div class="logo-wrapper">
+            <img src="@/assets/logo.png" alt="logo" class="logo-img" />
+          </div>
+          <h1 class="login-title">问题工单管理系统</h1>
+          <div class="title-divider">
+            <span class="line"></span>
+            <span class="dot"></span>
+            <span class="line"></span>
+          </div>
+          <p class="login-subtitle">欢迎使用工单管理系统</p>
+        </div>
+        
+        <a-form layout="vertical" :model="state.formInline" @submit.prevent="handleSubmit">
+          <a-form-item>
+            <a-input 
+              v-model:value="state.formInline.username" 
+              size="large" 
+              placeholder="请输入用户名"
+              class="custom-input"
+            >
+              <template #prefix><user-outlined /></template>
+            </a-input>
+          </a-form-item>
+          
+          <a-form-item>
+            <a-input
+              v-model:value="state.formInline.password"
+              size="large"
+              type="password"
+              placeholder="请输入密码"
+              autocomplete="new-password"
+              class="custom-input"
+            >
+              <template #prefix><lock-outlined /></template>
+            </a-input>
+          </a-form-item>
+          
+          <a-form-item>
+            <a-input
+              v-model:value="state.formInline.verifyCode"
+              placeholder="请输入验证码"
+              :maxlength="4"
+              size="large"
+              class="custom-input"
+            >
+              <template #prefix><SafetyOutlined /></template>
+              <template #suffix>
+                <img
+                  :src="state.captcha"
+                  class="captcha-img"
+                  @click="setCaptcha"
+                />
+              </template>
+            </a-input>
+          </a-form-item>
+          
+          <a-form-item>
+            <a-button 
+              type="primary" 
+              html-type="submit" 
+              size="large" 
+              :loading="state.loading" 
+              class="login-button"
+              block
+            >
+              登录
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </div>
     </div>
-    <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
-      <a-form-item>
-        <a-input v-model:value="state.formInline.username" size="large" placeholder="rootadmin">
-          <template #prefix><user-outlined type="user" /></template>
-        </a-input>
-      </a-form-item>
-      <a-form-item>
-        <a-input
-          v-model:value="state.formInline.password"
-          size="large"
-          type="password"
-          placeholder="123456"
-          autocomplete="new-password"
-        >
-          <template #prefix><lock-outlined type="user" /></template>
-        </a-input>
-      </a-form-item>
-      <a-form-item>
-        <a-input
-          v-model:value="state.formInline.verifyCode"
-          placeholder="验证码"
-          :maxlength="4"
-          size="large"
-        >
-          <template #prefix><SafetyOutlined /></template>
-          <template #suffix>
-            <img
-              :src="state.captcha"
-              class="absolute right-0 h-full cursor-pointer"
-              @click="setCaptcha"
-            />
-          </template>
-        </a-input>
-      </a-form-item>
-      <a-form-item>
-        <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
-          登录
-        </a-button>
-      </a-form-item>
-    </a-form>
   </div>
 </template>
 
@@ -120,36 +145,153 @@
 </script>
 
 <style lang="less" scoped>
-  .login-box {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
-    padding-top: 240px;
-    background: url('@/assets/login.svg');
-    background-size: 100%;
-    flex-direction: column;
-    align-items: center;
+.login-container {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  align-items: center;
+  justify-content: center;
+}
 
-    .login-logo {
+.login-box {
+  width: 460px;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  animation: fadeIn 0.5s ease-out;
+}
+
+.login-content {
+  .login-header {
+    text-align: center;
+    margin-bottom: 40px;
+    
+    .logo-wrapper {
+      margin-bottom: 16px;
+      
+      .logo-img {
+        width: 64px;
+        height: 64px;
+        object-fit: contain;
+      }
+    }
+    
+    .login-title {
+      font-size: 32px;
+      font-weight: 700;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 16px;
+      letter-spacing: 2px;
+    }
+    
+    .title-divider {
       display: flex;
-      margin-bottom: 30px;
       align-items: center;
-
-      .svg-icon {
-        font-size: 48px;
+      justify-content: center;
+      margin: 20px 0;
+      
+      .line {
+        width: 40px;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, #667eea);
+        
+        &:last-child {
+          background: linear-gradient(90deg, #764ba2, transparent);
+        }
+      }
+      
+      .dot {
+        width: 6px;
+        height: 6px;
+        background: #667eea;
+        border-radius: 50%;
+        margin: 0 8px;
       }
     }
-
-    :deep(.ant-form) {
-      width: 400px;
-
-      .ant-col {
+    
+    .login-subtitle {
+      font-size: 16px;
+      color: #666;
+      margin: 0;
+      font-weight: 500;
+      position: relative;
+      display: inline-block;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -4px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 2px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        transition: width 0.3s ease;
+      }
+      
+      &:hover::after {
         width: 100%;
       }
+    }
+  }
+}
 
-      .ant-form-item-label {
-        padding-right: 6px;
-      }
+.custom-input {
+  border-radius: 8px;
+  
+  :deep(.ant-input) {
+    padding: 12px 16px;
+    font-size: 14px;
+    
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
     }
   }
+  
+  :deep(.ant-input-prefix) {
+    color: #666;
+    margin-right: 10px;
+  }
+}
+
+.captcha-img {
+  height: 100%;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.login-button {
+  height: 46px;
+  font-size: 16px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  transition: all 0.3s;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>