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
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user