From 9f25da6232b9c06f21561d820d36553939d09722 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 15:36:01 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20Logo=E5=B7=A6=E4=B8=8B=E8=A7=92+?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E9=9D=A0=E5=8F=B3=EF=BC=8C=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E5=AD=97=E5=8F=B7=E8=87=AA=E9=80=82=E5=BA=94=EF=BC=8C=E7=B2=BE?=
 =?UTF-8?q?=E6=B2=B9=E5=90=8D=E4=B8=8D=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

配方卡片:
- Logo: 左下角靠左对齐(flex)，opacity:0.5
- 制作日期: 靠右对齐（Logo和日期同一行，space-between）
- 精油名: white-space:nowrap + text-overflow:ellipsis，不换行
- 配方名: max-width留QR空间，不换行
- 手机端(@media max-width:420px): 整体字号缩小，padding缩小

预览图:
- 同样Logo左下+日期靠右布局
- 去掉了底部居中Logo水印

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/RecipeDetailOverlay.vue    | 134 +++++++++++++++---
 frontend/src/views/MyDiary.vue                |  11 +-
 2 files changed, 120 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 90e1a05..461f403 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -51,29 +51,25 @@
         <div v-show="!cardImageUrl" ref="cardRef" class="export-card">
           <!-- 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>
-          <!-- Logo watermark: bottom center -->
-          <img v-if="brand.brand_logo" :src="brand.brand_logo" crossorigin="anonymous" style="position:absolute;bottom:60px;left:50%;transform:translateX(-50%);height:60px;opacity:0.2;pointer-events:none;z-index:1" />
           <!-- 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:2">
+          <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">
             <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>
-          <!-- Card content (z-index above overlays) -->
+          <!-- Card content -->
           <div style="position:relative;z-index:2">
-            <div style="font-size:11px;letter-spacing:3px;color:var(--sage);margin-bottom:8px">
+            <div class="ec-subtitle">
               {{ cardLang === 'en' ? 'doTERRA · Gifts of the Earth' : 'doTERRA · 来自大地的礼物' }}
             </div>
-            <div style="font-size:26px;font-weight:700;color:var(--text-dark);margin-bottom:6px;line-height:1.3">
-              {{ getCardRecipeName() }}
-            </div>
+            <div class="ec-title">{{ getCardRecipeName() }}</div>
             <div style="width:80px;height:2px;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:2px;margin:14px 0"></div>
 
             <ul style="list-style:none;margin-bottom:20px;padding:0">
-              <li v-for="(ing, i) in cardIngredients" :key="i" style="display:flex;align-items:center;padding:9px 0;border-bottom:1px solid rgba(180,150,100,0.15);font-size:14px">
-                <span style="flex:1;color:var(--text-dark);font-weight:500">{{ getCardOilName(ing.oil) }}</span>
-                <span style="width:50px;text-align:right;color:var(--sage-dark);font-size:13px">{{ ing.drops }} {{ cardLang === 'en' ? 'drops' : '滴' }}</span>
-                <span style="width:60px;text-align:right;color:var(--text-light);font-size:12px">{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</span>
-                <span v-if="hasRetailForOil(ing.oil) && retailPerDrop(ing.oil) > oilsStore.pricePerDrop(ing.oil)" style="width:55px;text-align:right;color:var(--text-light);font-size:10px;text-decoration:line-through">{{ oilsStore.fmtPrice(retailPerDrop(ing.oil) * ing.drops) }}</span>
+              <li v-for="(ing, i) in cardIngredients" :key="i" class="ec-ing">
+                <span class="ec-oil-name">{{ getCardOilName(ing.oil) }}</span>
+                <span class="ec-drops">{{ ing.drops }} {{ cardLang === 'en' ? 'drops' : '滴' }}</span>
+                <span class="ec-cost">{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</span>
+                <span v-if="hasRetailForOil(ing.oil) && retailPerDrop(ing.oil) > oilsStore.pricePerDrop(ing.oil)" class="ec-retail">{{ oilsStore.fmtPrice(retailPerDrop(ing.oil) * ing.drops) }}</span>
               </li>
             </ul>
 
@@ -81,13 +77,16 @@
 
             <div v-if="displayRecipe.note" style="font-size:12px;color:var(--brown-light);margin-bottom:12px;font-style:italic">📝 {{ displayRecipe.note }}</div>
 
-            <div style="background:linear-gradient(135deg,var(--sage),#5a7d5e);border-radius:12px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center">
+            <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>
             </div>
 
-            <div style="margin-top:16px;text-align:center;font-size:11px;color:var(--text-light);letter-spacing:1px">
-              {{ cardLang === 'en' ? 'Date: ' : '制作日期：' }}{{ todayStr }}
+            <!-- Logo left + Date right -->
+            <div class="ec-bottom">
+              <img v-if="brand.brand_logo" :src="brand.brand_logo" crossorigin="anonymous" class="ec-logo" />
+              <span v-else></span>
+              <span class="ec-date">{{ cardLang === 'en' ? 'Date: ' : '制作日期：' }}{{ todayStr }}</span>
             </div>
           </div>
         </div>
@@ -1088,10 +1087,105 @@ async function saveRecipe() {
   border-radius: 50%;
 }
 
-.card-content {
-  position: relative;
-  z-index: 2;
-  padding-right: 80px; /* leave room for QR (54px) + gap */
+/* ===== Export Card Content (responsive) ===== */
+.ec-subtitle {
+  font-size: 11px;
+  letter-spacing: 3px;
+  color: var(--sage);
+  margin-bottom: 8px;
+  white-space: nowrap;
+}
+.ec-title {
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--text-dark);
+  margin-bottom: 6px;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 80px); /* leave room for QR */
+}
+.ec-ing {
+  display: flex;
+  align-items: center;
+  padding: 9px 0;
+  border-bottom: 1px solid rgba(180,150,100,0.15);
+  font-size: 14px;
+}
+.ec-oil-name {
+  flex: 1;
+  color: var(--text-dark);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.ec-drops {
+  width: 50px;
+  text-align: right;
+  color: var(--sage-dark);
+  font-size: 13px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ec-cost {
+  width: 60px;
+  text-align: right;
+  color: var(--text-light);
+  font-size: 12px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ec-retail {
+  width: 55px;
+  text-align: right;
+  color: var(--text-light);
+  font-size: 10px;
+  text-decoration: line-through;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ec-total-bar {
+  background: linear-gradient(135deg, var(--sage), #5a7d5e);
+  border-radius: 12px;
+  padding: 14px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ec-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-top: 16px;
+}
+.ec-logo {
+  height: 36px;
+  object-fit: contain;
+  opacity: 0.5;
+}
+.ec-date {
+  font-size: 11px;
+  color: var(--text-light);
+  letter-spacing: 1px;
+}
+
+/* Mobile: smaller card text */
+@media (max-width: 420px) {
+  .export-card { padding: 24px; }
+  .ec-subtitle { font-size: 9px; letter-spacing: 2px; }
+  .ec-title { font-size: 20px; max-width: calc(100% - 65px); }
+  .ec-ing { font-size: 12px; padding: 7px 0; }
+  .ec-drops { width: 42px; font-size: 11px; }
+  .ec-cost { width: 50px; font-size: 10px; }
+  .ec-retail { width: 45px; font-size: 9px; }
+  .ec-total-bar { padding: 10px 14px; }
+  .ec-total-bar span:first-child { font-size: 11px; }
+  .ec-total-bar span:last-child { font-size: 16px; }
+  .ec-date { font-size: 9px; }
+  .ec-logo { height: 28px; }
 }
 
 /* Brand overlays */
diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue
index 6b9040b..98495dd 100644
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -171,8 +171,7 @@
           <div class="card-preview-mini">
             <!-- Background overlay -->
             <div v-if="brandBg" style="position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.12;pointer-events:none" :style="{ backgroundImage: 'url(' + brandBg + ')' }"></div>
-            <!-- Logo watermark: bottom center -->
-            <img v-if="brandLogo" :src="brandLogo" style="position:absolute;bottom:34px;left:50%;transform:translateX(-50%);height:30px;opacity:0.2;pointer-events:none;z-index:1" />
+            <!-- Logo: shown in bottom row, not as watermark -->
             <!-- QR: top-right -->
             <div v-if="brandQrImage" style="position:absolute;top:16px;right:12px;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2">
               <img :src="brandQrImage" style="width:36px;height:36px;object-fit:cover;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.1)" />
@@ -189,9 +188,11 @@
                 <span style="color:rgba(255,255,255,0.85);font-size:8px;letter-spacing:0.5px">配方总成本</span>
                 <span style="color:white;font-size:12px;font-weight:700">¥12.50</span>
               </div>
-              <!-- Date: centered -->
-              <div style="margin-top:8px;text-align:center;font-size:7px;color:var(--text-light);letter-spacing:0.5px">
-                制作日期：{{ new Date().toLocaleDateString('zh-CN') }}
+              <!-- Logo left + Date right -->
+              <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px">
+                <img v-if="brandLogo" :src="brandLogo" style="height:18px;object-fit:contain;opacity:0.5" />
+                <span v-else></span>
+                <span style="font-size:7px;color:var(--text-light);letter-spacing:0.5px">制作日期：{{ new Date().toLocaleDateString('zh-CN') }}</span>
               </div>
             </div>
           </div>