From 1c2d429b11e58458ab723f2742a9929b382e1a91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E6=A2=A6?= <limeng@apemoon.com>
Date: Wed, 6 May 2026 10:33:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/global.scss       | 83 ++++++++++++++++++++++++++++++++++++
 src/views/settings/index.vue | 83 ++++++++++--------------------------
 2 files changed, 105 insertions(+), 61 deletions(-)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index 728b6e4..925b4a9 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -41,3 +41,86 @@ body {
   border-radius: 12px;
   padding: 32px;
 }
+
+.lx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.lx-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.lx-btn--xl {
+  --lx-btn-short-width: 192px;
+
+  height: 72px;
+  padding: 0 40px;
+  font-size: 30px;
+}
+
+.lx-btn--lg {
+  --lx-btn-short-width: 168px;
+
+  height: 66px;
+  padding: 0 32px;
+  font-size: 28px;
+}
+
+.lx-btn--md {
+  --lx-btn-short-width: 144px;
+
+  height: 60px;
+  padding: 0 24px;
+  font-size: 24px;
+}
+
+.lx-btn--sm {
+  --lx-btn-short-width: 104px;
+
+  height: 52px;
+  padding: 0 20px;
+  font-size: 20px;
+}
+
+.lx-btn--short {
+  width: var(--lx-btn-short-width);
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.lx-btn--primary {
+  border-color: #2f80ed;
+  background: #2f80ed;
+  color: #fff;
+}
+
+.lx-btn--secondary {
+  border-color: #eef4ff;
+  background: #eef4ff;
+  color: #5f8fd2;
+}
+
+.lx-btn--default {
+  border-color: #d9dde5;
+  background: #fff;
+  color: #2d3138;
+}
+
+.lx-btn--outline-primary {
+  border-color: #8eb7df;
+  background: #fff;
+  color: #5f8fd2;
+}
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 6501983..41b4a6d 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -42,7 +42,11 @@
               <h2>账号</h2>
               <div class="account-line">
                 <span>账号：123453147358</span>
-                <button class="change-password" type="button" @click="showPasswordDialog = true">
+                <button
+                  class="change-password lx-btn lx-btn--md lx-btn--default"
+                  type="button"
+                  @click="showPasswordDialog = true"
+                >
                   <svg viewBox="0 0 24 24" fill="none">
                     <path
                       d="M4.8 16.7 16.6 4.9a2 2 0 0 1 2.8 0l.2.2a2 2 0 0 1 0 2.8L7.8 19.7l-3.7.7.7-3.7Z"
@@ -83,7 +87,7 @@
               </div>
             </section>
 
-            <button class="logout-btn" type="button">
+            <button class="logout-btn lx-btn lx-btn--xl lx-btn--default" type="button">
               <svg viewBox="0 0 24 24" fill="none">
                 <path
                   d="M10 6H6.8A1.8 1.8 0 0 0 5 7.8v8.4A1.8 1.8 0 0 0 6.8 18H10"
@@ -109,8 +113,8 @@
               <button
                 v-for="speed in speeds"
                 :key="speed"
-                class="speed-btn"
-                :class="{ active: selectedSpeed === speed }"
+                class="speed-btn lx-btn lx-btn--sm lx-btn--short"
+                :class="selectedSpeed === speed ? 'lx-btn--primary active' : 'lx-btn--secondary'"
                 type="button"
                 @click="selectedSpeed = speed"
               >
@@ -165,8 +169,20 @@
         </label>
 
         <div class="dialog-actions">
-          <button class="cancel-btn" type="button" @click="showPasswordDialog = false">取消</button>
-          <button class="confirm-btn" type="button" @click="showPasswordDialog = false">确认</button>
+          <button
+            class="cancel-btn lx-btn lx-btn--sm lx-btn--short lx-btn--default"
+            type="button"
+            @click="showPasswordDialog = false"
+          >
+            取消
+          </button>
+          <button
+            class="confirm-btn lx-btn lx-btn--sm lx-btn--short lx-btn--primary"
+            type="button"
+            @click="showPasswordDialog = false"
+          >
+            确认
+          </button>
         </div>
       </section>
     </div>
@@ -370,17 +386,7 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
 }
 
 .change-password {
-  display: inline-flex;
-  align-items: center;
   gap: 5px;
-  height: 60px;
-  border: 1px solid #e0e4ec;
-  border-radius: 999px;
-  background: #fff;
-  color: #15171c;
-  cursor: pointer;
-  font-size: 24px;
-  padding: 12px 24px;
 }
 
 .change-password svg {
@@ -434,17 +440,7 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
   position: absolute;
   left: 50%;
   bottom: 18px;
-  display: inline-flex;
-  align-items: center;
   gap: 6px;
-  padding: 12px 40px;
-  justify-content: center;
-  border: 1px solid #d9dde5;
-  border-radius: 999px;
-  background: #fff;
-  color: #2d3138;
-  cursor: pointer;
-  font-size: 32px;
   transform: translateX(-50%);
 }
 
@@ -465,22 +461,8 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
   margin-top: 16px;
 }
 
-.speed-btn {
-  min-width: 76px;
-  height: 34px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  background: #f4f7fb;
-  color: #404854;
-  cursor: pointer;
-  font-size: 16px;
-}
-
 .speed-btn.active {
-  border-color: #a9c7e8;
-  background: #edf4ff;
   box-shadow: inset 0 0 0 1px rgba(47, 128, 237, 0.14);
-  color: #2a689b;
 }
 
 .avatar-face {
@@ -653,25 +635,4 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
   margin-top: 30px;
 }
 
-.cancel-btn,
-.confirm-btn {
-  width: 104px;
-  height: 42px;
-  border-radius: 999px;
-  cursor: pointer;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.cancel-btn {
-  border: 1px solid #e1e4ec;
-  background: #fff;
-  color: #2f3137;
-}
-
-.confirm-btn {
-  border: none;
-  background: #347af0;
-  color: #fff;
-}
 </style>