From 2da0130c4cc5f2bb0d9e56105000400fc2530fc2 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Fri, 10 Apr 2026 17:45:42 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=93=81=E7=89=8C=E6=A0=87=E8=AF=AD?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=E7=BB=9F=E4=B8=80=E6=A0=BC=E5=BC=8F=20+=20?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E5=9C=A8=E5=8D=A1=E7=89=87=E5=92=8C=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 标签改为"✍ 品牌名称或标语"+"显示在二维码下方"（与其他说明格式一致）
- 靠左/居中/靠右在预览和配方卡片中都生效
- 修复align-items:center覆盖textAlign的问题

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

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index f83ed52..27dc07d 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:20px;right:16px;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;gap:3px;z-index:3" :style="{ alignItems: (brand.brand_align === 'left' ? 'flex-start' : brand.brand_align === 'right' ? 'flex-end' : 'center') }">
             <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>
diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue
index b26a2c0..eab7235 100644
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -156,7 +156,8 @@
 
         <!-- Brand name -->
         <div class="form-group">
-          <label class="form-label">品牌名称或标语（显示在卡片右上角二维码下方）</label>
+          <label class="form-label">✍ 品牌名称或标语</label>
+          <p style="font-size:11px;color:var(--text-light);margin-bottom:6px">显示在二维码下方</p>
           <textarea v-model="brandName" class="form-control" rows="2" placeholder="扫码申请成为优惠顾客&#10;我的精油小屋" style="max-width:350px;font-size:13px" @blur="saveBrandSettings"></textarea>
           <div style="display:flex;gap:6px;margin-top:6px">
             <button class="btn-align" :class="{ active: brandAlign === 'left' }" @click="brandAlign='left'; saveBrandSettings()">靠左</button>
@@ -173,7 +174,7 @@
             <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: 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">
+            <div v-if="brandQrImage" style="position:absolute;top:16px;right:12px;display:flex;flex-direction:column;gap:2px;z-index:2" :style="{ alignItems: brandAlign === 'left' ? 'flex-start' : brandAlign === 'right' ? 'flex-end' : 'center' }">
               <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)" />
               <div v-if="brandName" :style="{ textAlign: brandAlign }" style="font-size:5px;color:var(--text-light);line-height:1.2;max-width:42px;white-space:pre-line">{{ brandName }}</div>
             </div>