From 9e21bc268bf4f1938b47700a58d4ef3168099340 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 17 Dec 2025 18:36:34 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=E9=80=89=E9=A1=B9=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/lay-setting/index.vue | 23 ++++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/layout/components/lay-setting/index.vue b/src/layout/components/lay-setting/index.vue
index 0ae2b2a2b..b764c02de 100644
--- a/src/layout/components/lay-setting/index.vue
+++ b/src/layout/components/lay-setting/index.vue
@@ -345,8 +345,8 @@ onUnmounted(() => removeMatchMedia);
           @click="setLayoutThemeColor(item.themeColor)"
         >
           <el-icon
-            style="margin: 0.1em 0.1em 0 0"
-            :size="17"
+            class="mt-px"
+            :size="20"
             :color="getThemeColor(item.themeColor)"
           >
             <IconifyIconOffline :icon="Check" />
@@ -538,17 +538,24 @@ onUnmounted(() => removeMatchMedia);
 }
 
 .theme-color {
-  height: 20px;
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
 
   li {
-    float: left;
-    height: 20px;
-    margin-right: 8px;
+    position: relative;
+    width: 21px;
+    height: 21px;
     cursor: pointer;
     border-radius: 4px;
+    box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+    transition: all 0.2s ease;
 
-    &:nth-child(1) {
-      border: 1px solid #ddd;
+    &:hover {
+      box-shadow:
+        rgb(0 0 0 / 25%) 0 0 0 1px inset,
+        0 2px 4px rgb(0 0 0 / 15%);
+      transform: scale(1.1);
     }
   }
 }