From 4e0039d5ad0fbccc7f3091640ab118f7ac280c8c Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Wed, 8 Apr 2026 21:59:38 +0000
Subject: [PATCH] =?UTF-8?q?UI:=20=E7=9F=A5=E8=AF=86=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E6=94=B6=E7=AA=84(380px)=EF=BC=8C=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=96=B9=E5=BC=8F=E6=8C=89=E9=92=AE=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E6=80=81=E6=9B=B4=E9=86=92=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/OilReference.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index ad4d0f2..da6fa30 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -313,8 +313,10 @@
               <div style="display:flex;gap:6px;flex-wrap:wrap">
                 <button
                   v-for="m in methodOptions" :key="m.value"
-                  :style="editCardMethodSet.has(m.value) ? 'background:' + m.bg + ';color:' + m.color + ';border-color:' + m.color : ''"
-                  style="padding:6px 14px;border-radius:16px;font-size:12px;border:1.5px solid var(--border);background:white;cursor:pointer;font-family:inherit;transition:all 0.15s"
+                  :style="editCardMethodSet.has(m.value)
+                    ? 'background:' + m.color + ';color:white;border-color:' + m.color + ';font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,0.15)'
+                    : 'background:white;color:#999;border-color:#ddd'"
+                  style="padding:7px 16px;border-radius:20px;font-size:13px;border:2px solid;cursor:pointer;font-family:inherit;transition:all 0.15s"
                   @click="toggleMethod(m.value)"
                 >{{ m.label }}</button>
               </div>
@@ -1205,8 +1207,8 @@ function saveCardImage(name) { saveModalImage(name + '_精油知识卡') }
 .oil-card-modal {
   background: #fff;
   border-radius: 16px;
-  max-width: 480px;
-  width: 100%;
+  max-width: 380px;
+  width: 92%;
   max-height: 85vh;
   overflow-y: auto;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);