diff --git a/frontend/src/views/Projects.vue b/frontend/src/views/Projects.vue index 7717620..f9f862a 100644 --- a/frontend/src/views/Projects.vue +++ b/frontend/src/views/Projects.vue @@ -105,17 +105,22 @@ -
- 配方总成本 - {{ oils.fmtPrice(materialCost) }} -
+ + + + + + + + +
配方总成本{{ oils.fmtPrice(materialCost) }}

🧪 消耗分析

- +
- + @@ -123,6 +128,7 @@ +
精油单次用量瓶装容量可做次数
精油单次用量瓶装容量可做次数
{{ c.drops }}滴 {{ c.bottleDrops }}滴 {{ c.sessions }}次
@@ -133,76 +139,56 @@
- -
-

💰 价格计算

-
- 原料成本 - {{ oils.fmtPrice(materialCost) }} -
- -
- 包装费用 -
- ¥ - + +
+
+

💰 价格计算

+
+ 原料成本 + {{ oils.fmtPrice(materialCost) }} +
+
+ 包装费用 +
¥
+
+
+ 人工费用 +
¥
+
+
+ 其他成本 +
¥
+
+
+ 总成本 + {{ oils.fmtPrice(totalCost) }} +
+
+ 售价 +
¥
+
+
+ 批量数量 +
- -
- 人工费用 -
- ¥ - +
+

📊 利润分析

+
+ 单件利润 + {{ oils.fmtPrice(unitProfit) }}
-
- -
- 其他成本 -
- ¥ - +
+ 利润率 + {{ profitMargin.toFixed(1) }}%
-
- -
- 总成本 - {{ oils.fmtPrice(totalCost) }} -
- -
- 售价 -
- ¥ - +
+ 批量总利润 + {{ oils.fmtPrice(batchProfit) }}
-
- -
- 批量数量 - -
-
- - -
-

📊 利润分析

-
-
-
单件利润
-
{{ oils.fmtPrice(unitProfit) }}
-
-
-
利润率
-
{{ profitMargin.toFixed(1) }}%
-
-
-
批量总利润
-
{{ oils.fmtPrice(batchProfit) }}
-
-
-
批量总收入
-
{{ oils.fmtPrice(batchRevenue) }}
+
+ 批量总收入 + {{ oils.fmtPrice(batchRevenue) }}
@@ -681,12 +667,10 @@ function formatDate(d) { .remove-btn { border: none; background: none; color: #ccc; cursor: pointer; font-size: 14px; padding: 2px; } .remove-btn:hover { color: #c0392b; } -.total-row { - background: #e8f5e9; border-radius: 12px; padding: 14px 18px; - display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; -} -.total-label { font-size: 14px; color: #3e3a44; font-weight: 500; } -.total-price { font-size: 20px; font-weight: 700; color: #2e7d5a; } +.total-table { background: #e8f5e9; border-radius: 10px; margin-bottom: 0; } +.total-table td { border: none; padding: 10px 8px; } +.total-label-cell { font-size: 14px; color: #3e3a44; font-weight: 600; } +.total-price-cell { font-size: 18px; font-weight: 700; color: #2e7d5a; text-align: center; } .pricing-inline { margin-top: 12px; } .price-field { display: flex; align-items: center; gap: 8px; } @@ -769,35 +753,21 @@ function formatDate(d) { border-color: #7ec6a4; } -.profit-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; +.price-profit-row { + display: flex; gap: 16px; margin-bottom: 20px; } - -.profit-card { - padding: 12px; - background: #fff; - border-radius: 10px; - text-align: center; - border: 1.5px solid #e5e4e7; +.pricing-col, .profit-col { + flex: 1; padding: 14px; background: #f8f7f5; border-radius: 12px; border: 1.5px solid #e5e4e7; } - -.profit-label { - font-size: 12px; - color: #6b6375; - margin-bottom: 4px; -} - -.profit-value { - font-size: 18px; - font-weight: 700; - color: #4a9d7e; -} - -.profit-value.negative { - color: #ef5350; +.pricing-col h4, .profit-col h4 { margin: 0 0 10px; font-size: 14px; color: #3e3a44; } +.profit-item { + display: flex; justify-content: space-between; align-items: center; + padding: 8px 0; border-bottom: 1px solid #eae8e5; font-size: 14px; } +.profit-item:last-child { border-bottom: none; } +.profit-label { color: #6b6375; font-size: 13px; } +.profit-value { font-size: 16px; font-weight: 700; color: #4a9d7e; } +.profit-value.negative { color: #ef5350; } .notes-textarea { width: 100%;