From 6ec462895fd1babb7a20e5243307ee6bbd01c1a5 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Thu, 27 Aug 2026 22:00:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=86=E7=A0=81=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PasswordRecovery/PasswordRecovery.css     | 95 ++++++++++++++-----
 1 file changed, 70 insertions(+), 25 deletions(-)

diff --git a/fe/src/views/PasswordRecovery/PasswordRecovery.css b/fe/src/views/PasswordRecovery/PasswordRecovery.css
index 4285c32..a2ea6de 100644
--- a/fe/src/views/PasswordRecovery/PasswordRecovery.css
+++ b/fe/src/views/PasswordRecovery/PasswordRecovery.css
@@ -16,8 +16,10 @@
   max-width: 100%;
   padding-bottom: 4px;
   color: var(--pm-text-primary);
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 600;
   line-height: 1.35;
+  letter-spacing: 0.01em;
   white-space: normal;
   overflow-wrap: anywhere;
 }
@@ -42,37 +44,53 @@
 }
 
 .method-switcher {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   min-width: 0;
-  margin: 2px 0 10px;
-  padding: 10px 14px;
+  margin: 8px 0 18px;
+  padding: 16px 18px;
   box-sizing: border-box;
-  background: rgba(247, 250, 255, 0.88);
-  border: 1px solid var(--pm-border-color);
-  border-radius: 12px;
-  box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
+  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(248, 251, 255, 0.94));
+  border: 1px solid rgba(37, 99, 235, 0.16);
+  border-radius: 16px;
+  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.06);
 }
 
 .method-copy {
+  position: relative;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 6px;
+  padding-left: 12px;
+}
+
+.method-copy::before {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0;
+  width: 4px;
+  border-radius: 999px;
+  background: var(--pm-primary-color);
+  content: '';
 }
 
 .method-label {
   color: var(--pm-text-secondary);
-  font-size: 13px;
+  font-size: 12px;
+  font-weight: 600;
   line-height: 1.35;
+  letter-spacing: 0.04em;
 }
 
 .method-copy strong {
   color: var(--pm-text-primary);
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 700;
   line-height: 1.35;
   overflow-wrap: anywhere;
 }
@@ -85,27 +103,41 @@
 
 .verification-panel {
   min-width: 0;
-  margin-bottom: 10px;
-  padding: 12px 14px;
+  margin-bottom: 18px;
+  padding: 18px 20px 20px;
   box-sizing: border-box;
-  background: rgba(247, 250, 255, 0.88);
+  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(245, 249, 255, 0.94));
   border: 1px solid var(--pm-border-color);
-  border-radius: 12px;
-  box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
+  border-radius: 16px;
+  box-shadow: 0 8px 22px rgba(31, 41, 55, 0.06);
 }
 
 .verification-panel h2 {
-  margin: 0 0 6px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 8px;
   color: var(--pm-text-primary);
-  font-size: 17px;
+  font-size: 20px;
+  font-weight: 700;
   line-height: 1.35;
+  letter-spacing: -0.01em;
   overflow-wrap: anywhere;
 }
 
+.verification-panel h2::before {
+  width: 5px;
+  height: 22px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--pm-primary-color);
+  content: '';
+}
+
 .verification-panel p {
-  margin: 0 0 8px;
+  margin: 0 0 16px;
   color: var(--pm-text-secondary);
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.6;
   overflow-wrap: anywhere;
 }
@@ -146,7 +178,7 @@
   min-width: 0;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  gap: 16px;
 }
 
 .password-grid :deep(.el-form-item) {
@@ -159,7 +191,7 @@
   justify-content: space-between;
   gap: 16px;
   min-width: 0;
-  padding-top: 16px;
+  padding-top: 22px;
 }
 
 .actions {
@@ -234,6 +266,7 @@
 @media (max-width: 560px) {
   .method-switcher {
     gap: 8px;
+    padding: 14px;
   }
 
   .switch-button {
@@ -241,6 +274,18 @@
     font-size: 13px;
   }
 
+  .verification-panel {
+    padding: 16px 14px 18px;
+  }
+
+  .verification-panel h2 {
+    font-size: 18px;
+  }
+
+  .verification-panel p {
+    font-size: 13px;
+  }
+
   .verification-code-row {
     grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
   }
@@ -291,7 +336,7 @@
 
   .method-switcher,
   .verification-panel {
-    padding: 9px 10px;
+    padding: 12px 10px;
   }
 
   .method-switcher {
@@ -313,11 +358,11 @@
   }
 
   .method-copy strong {
-    font-size: 13px;
+    font-size: 15px;
   }
 
   .verification-panel h2 {
-    font-size: 14px;
+    font-size: 16px;
   }
 
   .verification-panel p,