frontend/src/views/Projects.vue

@@ -110,6 +110,26 @@
           <span class="total-price">{{ oils.fmtPrice(materialCost) }}</span>
         </div>
 
+        <!-- Consumption Analysis -->
+        <div v-if="consumptionData.length" class="consumption-section" style="margin-top:12px">
+          <h4>🧪 消耗分析</h4>
+          <table class="consumption-table">
+            <thead>
+              <tr><th>精油</th><th>单次用量</th><th>瓶装容量</th><th>可做次数</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="c in consumptionData" :key="c.oil" :class="{ 'limit-oil': c.isLimit }">
+                <td>{{ c.oil }}</td>
+                <td>{{ c.drops }}滴</td>
+                <td>{{ c.bottleDrops }}滴</td>
+                <td>{{ c.sessions }}次</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="consumption-summary">
+            <span>⚠️ <strong>{{ limitingOil }}</strong> 最先消耗完，最多可做 <strong>{{ maxSessions }}</strong> 次</span>
+          </div>
+        </div>
       </div>
 
       <!-- Pricing Section -->
@@ -186,27 +206,6 @@
         </div>
       </div>
 
-      <!-- Consumption Analysis -->
-      <div v-if="consumptionData.length" class="consumption-section">
-        <h4>🧪 消耗分析</h4>
-        <table class="consumption-table">
-          <thead>
-            <tr><th>精油</th><th>单次用量</th><th>瓶装容量</th><th>可做次数</th></tr>
-          </thead>
-          <tbody>
-            <tr v-for="c in consumptionData" :key="c.oil" :class="{ 'limit-oil': c.isLimit }">
-              <td>{{ c.oil }}</td>
-              <td>{{ c.drops }}滴</td>
-              <td>{{ c.bottleDrops }}滴</td>
-              <td>{{ c.sessions }}次</td>
-            </tr>
-          </tbody>
-        </table>
-        <div class="consumption-summary">
-          <span>⚠️ <strong>{{ limitingOil }}</strong> 最先消耗完，最多可做 <strong>{{ maxSessions }}</strong> 次</span>
-        </div>
-      </div>
-
       <!-- Notes -->
       <div class="notes-section">
         <h4>📝 备注</h4>