hera/oil-formula-calculator
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: QR移到右上角(top:20 right:16)，总成本缩小一行，日期与logo居中对齐
Some checks failed
PR Preview / teardown-preview (pull_request) Has been skipped
Details
Test / unit-test (push) Successful in 5s
Details
Test / build-check (push) Successful in 4s
Details
PR Preview / test (pull_request) Successful in 4s
Details
PR Preview / deploy-preview (pull_request) Successful in 15s
Details
Test / e2e-test (push) Failing after 1m24s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hera Zhao
2026-04-09 15:50:31 +00:00
parent 9f25da6232
commit 0dd2cc00d3
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/RecipeDetailOverlay.vue
View File

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