frontend/src/components/RecipeCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="recipe-card" @click="$emit('click', index)">
-    <div class="recipe-card-name" :style="{ fontSize: nameSize }">{{ recipe.name }}</div>
+    <div class="recipe-card-name">{{ recipe.name }}</div>
     <div v-if="visibleTags.length" class="recipe-card-tags">
       <span v-for="tag in visibleTags" :key="tag" class="tag" :class="{ 'tag-reviewed': tag === '已审核' }">{{ tag }}</span>
     </div>
@@ -47,15 +47,6 @@ const oilNames = computed(() =>
 )
 const priceInfo = computed(() => oilsStore.fmtCostWithRetail(props.recipe.ingredients))
 const isFav = computed(() => recipesStore.isFavorite(props.recipe))
-const nameSize = computed(() => {
-  const len = props.recipe.name.length
-  if (len <= 6) return '16px'
-  if (len <= 8) return '15px'
-  if (len <= 10) return '14px'
-  if (len <= 14) return '12px'
-  if (len <= 20) return '10px'
-  return '9px'
-})
 </script>
 
 <style scoped>
@@ -81,7 +72,6 @@ const nameSize = computed(() => {
   font-weight: 600;
   color: #2c2416;
   margin-bottom: 8px;
-  word-break: break-all;
 }
 
 .recipe-card-tags {

frontend/src/components/RecipeDetailOverlay.vue

@@ -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:20px;right:16px;display:flex;flex-direction:column;gap:3px;z-index:3" :style="{ alignItems: (brand.brand_align === 'left' ? 'flex-start' : brand.brand_align === 'right' ? 'flex-end' : 'center') }">
+          <div v-if="brand.qr_code" style="position:absolute;top:20px;right:0;display:flex;flex-direction:column;gap:3px;z-index:3" :style="{ alignItems: (brand.brand_align === 'left' ? 'flex-start' : brand.brand_align === 'right' ? 'flex-end' : 'center') }">
             <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>
@@ -61,7 +61,7 @@
             <div class="ec-subtitle">
               {{ cardLang === 'en' ? 'doTERRA · Gifts of the Earth' : 'doTERRA · 来自大地的礼物' }}
             </div>
-            <div class="ec-title">{{ getCardRecipeName() }}</div>
+            <div class="ec-title" :style="{ fontSize: cardTitleSize }">{{ getCardRecipeName() }}</div>
             <div style="width:80px;height:2px;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:2px;margin:14px 0"></div>
 
             <ul style="list-style:none;margin-bottom:20px;padding:0">
@@ -588,6 +588,15 @@ function getCardRecipeName() {
   return displayRecipe.value.name
 }
 
+const cardTitleSize = computed(() => {
+  const name = getCardRecipeName()
+  const len = name.length
+  if (len <= 6) return '26px'
+  if (len <= 10) return '22px'
+  if (len <= 15) return '18px'
+  return '16px'
+})
+
 // ---- Favorite ----
 async function handleToggleFavorite() {
   if (!authStore.isLoggedIn) {
@@ -1136,19 +1145,18 @@ async function saveRecipe() {
   font-size: 11px;
   letter-spacing: 3px;
   color: var(--sage);
-  margin-bottom: 8px;
+  margin-bottom: 6px;
+  margin-top: -4px;
   white-space: nowrap;
 }
 .ec-title {
-  font-size: 26px;
   font-weight: 700;
   color: var(--text-dark);
   margin-bottom: 6px;
-  line-height: 1.3;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - 80px); /* leave room for QR */
+  line-height: 1.35;
+  max-width: calc(100% - 70px);
+  overflow-wrap: break-word;
+  text-wrap: balance;
 }
 .ec-ing {
   display: flex;
@@ -1221,7 +1229,7 @@ async function saveRecipe() {
 @media (max-width: 420px) {
   .export-card { padding: 24px; }
   .ec-subtitle { font-size: 9px; letter-spacing: 2px; }
-  .ec-title { font-size: 20px; max-width: calc(100% - 65px); }
+  .ec-title { max-width: calc(100% - 60px); }
   .ec-ing { font-size: 12px; padding: 7px 0; }
   .ec-drops { width: 42px; font-size: 11px; }
   .ec-cost { width: 50px; font-size: 10px; }