From 7166d5049f000547a41ab8c1a69e0380a12108ab Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Thu, 27 Nov 2025 20:45:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feed/RecipeCompareDialog.vue | 24 +++++++++++++--------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/feed/RecipeCompareDialog.vue b/src/components/feed/RecipeCompareDialog.vue
index 30e97108..de9a693e 100644
--- a/src/components/feed/RecipeCompareDialog.vue
+++ b/src/components/feed/RecipeCompareDialog.vue
@@ -56,19 +56,21 @@
           @close="compareError = null"
       />
     </div>
-    <div v-else-if="compareResult.length > 0">
+    <div v-else-if="compareResult.length > 0" class="table-wrapper">
       <el-table :data="compareResult" style="width: 100%" border>
-        <el-table-column prop="nutrientName" label="营养素" width="150" fixed />
-        <el-table-column :label="currentRecipe.name" width="150">
+        <el-table-column prop="nutrientName" label="营养素" fixed />
+        <el-table-column :label="currentRecipe.name">
           <template #default="scope">
-            {{ scope.row.currentRecipeValue !== undefined ? scope.row.currentRecipeValue.toFixed(2) : '-' }}
+            <span :style="{ color: scope.row.currentRecipeValue > scope.row.compareRecipeValue ? 'green' : (scope.row.currentRecipeValue < scope.row.compareRecipeValue ? 'red' : 'inherit') }">
+              {{ scope.row.currentRecipeValue !== undefined ? scope.row.currentRecipeValue.toFixed(2) : '-' }}
+            </span>
           </template>
         </el-table-column>
 
         <template v-if="compareType === 'recipe'">
-          <el-table-column :label="compareRecipeName" width="150">
+          <el-table-column :label="compareRecipeName">
             <template #default="scope">
-              <span :style="{ color: scope.row.compareRecipeValue > scope.row.currentRecipeValue ? 'green' : 'inherit' }">
+              <span :style="{ color: scope.row.compareRecipeValue > scope.row.currentRecipeValue ? 'green' : (scope.row.compareRecipeValue < scope.row.currentRecipeValue ? 'red' : 'inherit') }">
                 {{ scope.row.compareRecipeValue !== undefined ? scope.row.compareRecipeValue.toFixed(2) : '-' }}
               </span>
             </template>
@@ -76,17 +78,17 @@
         </template>
 
         <template v-else-if="compareType === 'pigType'">
-          <el-table-column :label="pigTypeName + ' (下限)'" width="150">
+          <el-table-column :label="pigTypeName + ' (下限)'">
             <template #default="scope">
               {{ scope.row.minRequirement !== undefined ? scope.row.minRequirement.toFixed(2) : '-' }}
             </template>
           </el-table-column>
-          <el-table-column :label="pigTypeName + ' (上限)'" width="150">
+          <el-table-column :label="pigTypeName + ' (上限)'">
             <template #default="scope">
               {{ scope.row.maxRequirement !== undefined ? scope.row.maxRequirement.toFixed(2) : '-' }}
             </template>
           </el-table-column>
-          <el-table-column label="是否达标" width="100" align="center">
+          <el-table-column label="是否达标" align="center">
             <template #default="scope">
               <el-icon v-if="scope.row.isMet" color="green"><Check /></el-icon>
               <el-icon v-else color="red"><Close /></el-icon>
@@ -328,4 +330,8 @@ export default {
 .dialog-footer {
   text-align: right;
 }
+.table-wrapper {
+  margin: 0 auto; /* 水平居中 */
+  max-width: 100%; /* 确保不超过父容器宽度 */
+}
 </style>
\ No newline at end of file