fix: Logo左下角+日期靠右,手机字号自适应,精油名不换行
Some checks failed
PR Preview / teardown-preview (pull_request) Has been skipped
Test / unit-test (push) Successful in 4s
Test / build-check (push) Successful in 6s
PR Preview / test (pull_request) Successful in 4s
PR Preview / deploy-preview (pull_request) Successful in 15s
Test / e2e-test (push) Failing after 1m28s

配方卡片:
- 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>
This commit is contained in:
2026-04-09 15:36:01 +00:00
parent d1723797e0
commit 9f25da6232
2 changed files with 120 additions and 25 deletions

View File

@@ -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>