From 0dd2cc00d31eb64a28b7fdd529fd1d2555adaa69 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 15:50:31 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20QR=E7=A7=BB=E5=88=B0=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92(top:20=20right:16)=EF=BC=8C=E6=80=BB=E6=88=90?=
 =?UTF-8?q?=E6=9C=AC=E7=BC=A9=E5=B0=8F=E4=B8=80=E8=A1=8C=EF=BC=8C=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E4=B8=8Elogo=E5=B1=85=E4=B8=AD=E5=AF=B9=E9=BD=90?=
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/components/RecipeDetailOverlay.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 461f403..04ab123 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -52,7 +52,7 @@
           <!-- Background image overlay -->
           <div v-if="brand.brand_bg" style="position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.12;pointer-events:none;z-index:0" :style="{ backgroundImage: `url('${brand.brand_bg}')` }"></div>
           <!-- QR: top-right -->
-          <div v-if="brand.qr_code" style="position:absolute;top:36px;right:24px;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:3">
+          <div v-if="brand.qr_code" style="position:absolute;top:20px;right:16px;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:3">
             <img :src="brand.qr_code" crossorigin="anonymous" style="width:54px;height:54px;object-fit:cover;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1)" />
             <div v-if="brand.brand_name" :style="{ textAlign: brand.brand_align || 'center' }" style="font-size:7px;color:var(--text-light);line-height:1.3;max-width:68px;white-space:pre-line">{{ brand.brand_name }}</div>
           </div>
@@ -78,8 +78,8 @@
             <div v-if="displayRecipe.note" style="font-size:12px;color:var(--brown-light);margin-bottom:12px;font-style:italic">📝 {{ displayRecipe.note }}</div>
 
             <div class="ec-total-bar">
-              <span style="color:rgba(255,255,255,0.85);font-size:13px;letter-spacing:1px">{{ cardLang === 'en' ? 'Total Cost' : '配方总成本' }}</span>
-              <span style="color:white;font-size:20px;font-weight:700">{{ priceInfo.cost }}<span v-if="priceInfo.hasRetail" style="text-decoration:line-through;opacity:0.6;font-size:13px;margin-left:6px">{{ priceInfo.retail }}</span></span>
+              <span style="color:rgba(255,255,255,0.85);font-size:12px;letter-spacing:1px">{{ cardLang === 'en' ? 'Total Cost' : '配方总成本' }}</span>
+              <span style="color:white;font-size:17px;font-weight:700">{{ priceInfo.cost }}<span v-if="priceInfo.hasRetail" style="text-decoration:line-through;opacity:0.6;font-size:11px;margin-left:4px">{{ priceInfo.retail }}</span></span>
             </div>
 
             <!-- Logo left + Date right -->
@@ -1150,16 +1150,17 @@ async function saveRecipe() {
 .ec-total-bar {
   background: linear-gradient(135deg, var(--sage), #5a7d5e);
   border-radius: 12px;
-  padding: 14px 20px;
+  padding: 10px 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  white-space: nowrap;
 }
 .ec-bottom {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
-  margin-top: 16px;
+  align-items: center;
+  margin-top: 12px;
 }
 .ec-logo {
   height: 36px;