From d1723797e0449919806ea5c3fd4ed97d3e576e31 Mon Sep 17 00:00:00 2001 From: Hera Zhao Date: Thu, 9 Apr 2026 12:53:13 +0000 Subject: [PATCH] =?UTF-8?q?rewrite:=20=E9=85=8D=E6=96=B9=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E5=92=8C=E9=A2=84=E8=A7=88=E5=9B=BE=E5=AE=8C=E5=85=A8=E9=87=8D?= =?UTF-8?q?=E5=86=99=EF=BC=8C=E5=8C=B9=E9=85=8Dinitial=20commit=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 完全删除之前的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) --- .../src/components/RecipeDetailOverlay.vue | 85 ++++--------- frontend/src/views/MyDiary.vue | 119 ++++-------------- 2 files changed, 52 insertions(+), 152 deletions(-) diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue index 0f0d420..90e1a05 100644 --- a/frontend/src/components/RecipeDetailOverlay.vue +++ b/frontend/src/components/RecipeDetailOverlay.vue @@ -49,76 +49,45 @@
- -
- -
- -
{{ brand.brand_name }}
+ +
+ + + +
+ +
{{ brand.brand_name }}
-
-
+ +
+
{{ cardLang === 'en' ? 'doTERRA · Gifts of the Earth' : 'doTERRA · 来自大地的礼物' }}
-
+
{{ getCardRecipeName() }}
-
+
- -
    -
  • - - {{ getCardOilName(ing.oil) }} - - - {{ ing.drops }} {{ cardLang === 'en' ? 'drops' : '滴' }} - - - {{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }} - - {{ oilsStore.fmtPrice(retailPerDrop(ing.oil) * ing.drops) }} +
      +
    • + {{ getCardOilName(ing.oil) }} + {{ ing.drops }} {{ cardLang === 'en' ? 'drops' : '滴' }} + {{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }} + {{ oilsStore.fmtPrice(retailPerDrop(ing.oil) * ing.drops) }}
    - -
    {{ dilutionDesc }}
    +
    {{ dilutionDesc }}
    - -
    - {{ '📝 ' + displayRecipe.note }} +
    📝 {{ displayRecipe.note }}
    + +
    + {{ cardLang === 'en' ? 'Total Cost' : '配方总成本' }} + {{ priceInfo.cost }}{{ priceInfo.retail }}
    - -
    -
    - {{ cardLang === 'en' ? 'Total Cost' : '配方总成本' }} -
    -
    - {{ priceInfo.cost }} - {{ priceInfo.retail }} -
    -
    - - -
    - -
    -
    - {{ cardLang === 'en' ? 'Date: ' : '制作日期：' }}{{ todayStr }} -
    +
    + {{ cardLang === 'en' ? 'Date: ' : '制作日期：' }}{{ todayStr }}
    diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue index 197002d..6b9040b 100644 --- a/frontend/src/views/MyDiary.vue +++ b/frontend/src/views/MyDiary.vue @@ -169,28 +169,30 @@
    -
    - -
    - -
    {{ brandName }}
    + +
    + + + +
    + +
    {{ brandName }}
    - -
    -
    doTERRA · 来自大地的礼物
    -
    配方名称
    -
    薰衣草 · 乳香 · 茶树
    -
    - -
    - 配方总成本 - ¥12.50 -
    - -
    - - - 制作日期：{{ new Date().toLocaleDateString('zh-CN') }} + +
    +
    doTERRA · 来自大地的礼物
    +
    配方名称
    +
    +
    薰衣草 · 乳香 · 茶树
    + +
    + 配方总成本 + ¥12.50 +
    + +
    + 制作日期：{{ new Date().toLocaleDateString('zh-CN') }} +
    @@ -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;