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

rewrite: 配方卡片和预览图完全重写，匹配initial commit样式
Some checks failed
PR Preview / teardown-preview (pull_request) Has been skipped
Details
Test / unit-test (push) Successful in 4s
Details
Test / build-check (push) Successful in 3s
Details
PR Preview / test (pull_request) Successful in 4s
Details
PR Preview / deploy-preview (pull_request) Successful in 14s
Details
Test / e2e-test (push) Failing after 1m43s
Details

Browse Source 
完全删除之前的CSS class方案，改用inline style匹配原版HTML:

配方卡片 (RecipeDetailOverlay):
- 背景图: absolute全覆盖, opacity:0.12
- Logo: absolute底部居中水印, bottom:60px, opacity:0.2
- QR: absolute右上角 top:36px right:24px, 品牌名在下方
- 内容区: position:relative z-index:2 (在overlay之上)
- 制作日期: text-align:center (居中，匹配原版)
- 所有样式用inline style，跟原版_buildBrandHtml()一致

预览图 (MyDiary):
- 等比缩小版配方卡片，同样布局
- QR右上，Logo底部居中，日期居中

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hera Zhao
2026-04-09 12:53:13 +00:00
parent e459a52b5b
commit d1723797e0
2 changed files with 52 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/views/MyDiary.vue
View File

@@ -169,28 +169,30 @@
<div style="margin-bottom:16px">
<label class="form-label">📋 配方卡片预览</label>
<div class="card-preview-mini">
<div v-if="brandBg" class="card-preview-bg" :style="{ backgroundImage: 'url(' + brandBg + ')' }"></div>
<!-- QR + brand name: top-right -->
<div v-if="brandQrImage" class="card-preview-qr-area">
<img :src="brandQrImage" class="card-preview-qr" />
<div v-if="brandName" class="card-preview-qr-text" :style="{ textAlign: brandAlign }">{{ brandName }}</div>
<!-- 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" />
<!-- 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)" />
<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>
<!-- Content: left side -->
<div class="card-preview-content">
<div style="font-size:8px;letter-spacing:2px;color:var(--sage);margin-bottom:4px">doTERRA · 来自大地的礼物</div>
<div style="font-size:14px;font-weight:700;color:var(--text-dark)">配方名称</div>
<div style="font-size:10px;color:var(--text-light);margin-top:2px">薰衣草 · 乳香 · 茶树</div>
</div>
<!-- Total cost bar -->
<div class="card-preview-cost">
<span>配方总成本</span>
<span>¥12.50</span>
</div>
<!-- Logo left + date right -->
<div class="card-preview-bottom">
<img v-if="brandLogo" :src="brandLogo" class="card-preview-logo" />
<span v-else></span>
<span class="card-preview-date">制作日期：{{ new Date().toLocaleDateString('zh-CN') }}</span>
<!-- Content -->
<div style="position:relative;z-index:1">
<div style="font-size:7px;letter-spacing:1.5px;color:var(--sage);margin-bottom:3px">doTERRA · 来自大地的礼物</div>
<div style="font-size:13px;font-weight:700;color:var(--text-dark);margin-bottom:3px;line-height:1.3">配方名称</div>
<div style="width:30px;height:1px;background:linear-gradient(90deg,var(--sage),var(--gold));margin:6px 0"></div>
<div style="font-size:9px;color:var(--text-light);margin-bottom:6px">薰衣草 · 乳香 · 茶树</div>
<!-- Total cost bar -->
<div style="background:linear-gradient(135deg,var(--sage),#5a7d5e);border-radius:6px;padding:6px 10px;display:flex;justify-content:space-between;align-items:center">
<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') }}
</div>
</div>
</div>
</div>
@@ -1047,7 +1049,7 @@ async function applyBusiness() {
color: var(--sage-dark);
}
/* Card preview mini — matches actual card layout */
/* Card preview mini */
.card-preview-mini {
position: relative;
width: 280px;
@@ -1056,79 +1058,8 @@ async function applyBusiness() {
border: 1px solid #e0ccaa;
overflow: hidden;
font-family: 'Noto Serif SC', serif;
padding: 16px;
padding: 18px;
}
.card-preview-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.15;
}
.card-preview-content {
position: relative;
z-index: 1;
padding-right: 60px; /* leave room for QR area */
}
.card-preview-qr-area {
position: absolute;
top: 16px;
right: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
z-index: 2;
max-width: 50px;
}
.card-preview-qr {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 4px;
}
.card-preview-qr-text {
font-size: 6px;
color: var(--text-light);
line-height: 1.2;
white-space: pre-line;
max-width: 50px;
text-align: center;
}
.card-preview-cost {
position: relative;
z-index: 1;
margin-top: 12px;
height: 22px;
background: linear-gradient(135deg, var(--sage), #5a7d5e);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
color: white;
font-size: 9px;
}
.card-preview-bottom {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 8px;
}
.card-preview-logo {
height: 16px;
width: auto;
object-fit: contain;
opacity: 0.6;
}
.card-preview-date {
font-size: 8px;
color: var(--text-light);
letter-spacing: 0.5px;
}
/* brand name now inside .card-preview-qr-text */
.hint-text {
font-size: 13px;