界面再调整了一下，搞定

src/views/lean/cost/fs2.vue

@@ -34,121 +34,124 @@
       </el-form>
     </el-card>
 
-    <!-- 成本性态分析结果展示 -->
-    <el-card v-if="costAnalysisResult || waterElectricityAnalysisResult" class="cost-analysis-card" id="analysisCard">
-      <div slot="header" class="clearfix">
-        <span>成本性态分析结果</span>
-      </div>
-      
-      <div class="analysis-container">
-        <!-- 总成本分析 -->
-        <div class="analysis-column" v-if="costAnalysisResult">
-          <div class="analysis-section">
-            <div class="section-title">总成本模型</div>
-            <div class="metrics-grid">
-              <div class="metric-card primary">
-                <div class="metric-label">固定成本(a)</div>
-                <div class="metric-value">{{ costAnalysisResult.fixedCost.toFixed(2) }} <span class="unit">元</span>
-                  <div v-if="costAnalysisResult.fixedCostNote" class="note">{{ costAnalysisResult.fixedCostNote }}</div>
+    <!-- 成本性态分析结果和趋势图 -->
+    <div class="analysis-and-chart-container">
+      <!-- 成本性态分析结果展示 -->
+      <el-card v-if="costAnalysisResult || waterElectricityAnalysisResult" class="cost-analysis-card" id="analysisCard">
+        <div slot="header" class="clearfix">
+          <span>成本性态分析结果</span>
+        </div>
+        
+        <div class="analysis-container">
+          <!-- 总成本分析 -->
+          <div class="analysis-column" v-if="costAnalysisResult">
+            <div class="analysis-section">
+              <div class="section-title">总成本模型</div>
+              <div class="metrics-grid">
+                <div class="metric-card primary">
+                  <div class="metric-label">固定成本(a)</div>
+                  <div class="metric-value">{{ costAnalysisResult.fixedCost.toFixed(2) }} <span class="unit">元</span>
+                    <div v-if="costAnalysisResult.fixedCostNote" class="note">{{ costAnalysisResult.fixedCostNote }}</div>
+                  </div>
                 </div>
-              </div>
-              <div class="metric-card primary">
-                <div class="metric-label">单位变动成本(b)</div>
-                <div class="metric-value">{{ costAnalysisResult.variableCostPerUnit.toFixed(2) }} <span class="unit">元/米</span></div>
-              </div>
-              <div class="metric-card secondary">
-                <div class="metric-label">相关系数(R)</div>
-                <div class="metric-value">{{ costAnalysisResult.correlationCoefficient.toFixed(4) }}</div>
-              </div>
-              <div class="metric-card secondary">
-                <div class="metric-label">R方(R²)</div>
-                <div class="metric-value">{{ costAnalysisResult.rSquared !== undefined ? costAnalysisResult.rSquared.toFixed(4) : 'N/A' }}</div>
-              </div>
-              <div class="metric-card info">
-                <div class="metric-label">数据点数量</div>
-                <div class="metric-value">{{ costAnalysisResult.dataPoints }} <span class="unit">个</span></div>
-              </div>
-              <div class="metric-card info">
-                <div class="metric-label">F统计量</div>
-                <div class="metric-value">{{ costAnalysisResult.fStatistic !== undefined ? costAnalysisResult.fStatistic.toFixed(2) : 'N/A' }}</div>
-              </div>
-              <div class="metric-card warning">
-                <div class="metric-label">显著性</div>
-                <div class="metric-value">
-                  {{ costAnalysisResult.significance }}
-                  <span class="p-value" v-if="costAnalysisResult.pValue !== undefined && costAnalysisResult.pValue !== null">
-                    (P={{ formatPValue(costAnalysisResult.pValue) }})
-                  </span>
+                <div class="metric-card primary">
+                  <div class="metric-label">变动成本(b)</div>
+                  <div class="metric-value">{{ costAnalysisResult.variableCostPerUnit.toFixed(2) }} <span class="unit">元/米</span></div>
+                </div>
+                <div class="metric-card secondary">
+                  <div class="metric-label">相关系数(R)</div>
+                  <div class="metric-value">{{ costAnalysisResult.correlationCoefficient.toFixed(4) }}</div>
+                </div>
+                <div class="metric-card secondary">
+                  <div class="metric-label">R方(R²)</div>
+                  <div class="metric-value">{{ costAnalysisResult.rSquared !== undefined ? costAnalysisResult.rSquared.toFixed(4) : 'N/A' }}</div>
+                </div>
+                <div class="metric-card info">
+                  <div class="metric-label">数据点数量</div>
+                  <div class="metric-value">{{ costAnalysisResult.dataPoints }} <span class="unit">个</span></div>
+                </div>
+                <div class="metric-card info">
+                  <div class="metric-label">F统计量</div>
+                  <div class="metric-value">{{ costAnalysisResult.fStatistic !== undefined ? costAnalysisResult.fStatistic.toFixed(2) : 'N/A' }}</div>
+                </div>
+                <div class="metric-card warning">
+                  <div class="metric-label">显著性</div>
+                  <div class="metric-value">
+                    {{ costAnalysisResult.significance }}
+                    <span class="p-value" v-if="costAnalysisResult.pValue !== undefined && costAnalysisResult.pValue !== null">
+                      (P={{ formatPValue(costAnalysisResult.pValue) }})
+                    </span>
+                  </div>
+                </div>
+                <div class="metric-card warning">
+                  <div class="metric-label">标准误差</div>
+                  <div class="metric-value">{{ costAnalysisResult.standardError !== undefined ? costAnalysisResult.standardError.toFixed(2) : 'N/A' }}</div>
                 </div>
-              </div>
-              <div class="metric-card warning">
-                <div class="metric-label">标准误差</div>
-                <div class="metric-value">{{ costAnalysisResult.standardError !== undefined ? costAnalysisResult.standardError.toFixed(2) : 'N/A' }}</div>
               </div>
             </div>
           </div>
-        </div>
-        
-        <!-- 分隔线 -->
-        <div class="divider"></div>
-        
-        <!-- 水电分析 -->
-        <div class="analysis-column" v-if="waterElectricityAnalysisResult">
-          <div class="analysis-section">
-            <div class="section-title">水电费成本模型</div>
-            <div class="metrics-grid">
-              <div class="metric-card primary">
-                <div class="metric-label">固定成本(a)</div>
-                <div class="metric-value">{{ waterElectricityAnalysisResult.fixedCost.toFixed(2) }} <span class="unit">元</span>
-                  <div v-if="waterElectricityAnalysisResult.fixedCostNote" class="note">{{ waterElectricityAnalysisResult.fixedCostNote }}</div>
+          
+          <!-- 分隔线 -->
+          <div class="divider"></div>
+          
+          <!-- 水电分析 -->
+          <div class="analysis-column" v-if="waterElectricityAnalysisResult">
+            <div class="analysis-section">
+              <div class="section-title">水电费成本模型</div>
+              <div class="metrics-grid">
+                <div class="metric-card primary">
+                  <div class="metric-label">固定成本(a)</div>
+                  <div class="metric-value">{{ waterElectricityAnalysisResult.fixedCost.toFixed(2) }} <span class="unit">元</span>
+                    <div v-if="waterElectricityAnalysisResult.fixedCostNote" class="note">{{ waterElectricityAnalysisResult.fixedCostNote }}</div>
+                  </div>
                 </div>
-              </div>
-              <div class="metric-card primary">
-                <div class="metric-label">单位变动成本(b)</div>
-                <div class="metric-value">{{ waterElectricityAnalysisResult.variableCostPerUnit.toFixed(2) }} <span class="unit">元/米</span></div>
-              </div>
-              <div class="metric-card secondary">
-                <div class="metric-label">相关系数(R)</div>
-                <div class="metric-value">{{ waterElectricityAnalysisResult.correlationCoefficient.toFixed(4) }}</div>
-              </div>
-              <div class="metric-card secondary">
-                <div class="metric-label">R方(R²)</div>
-                <div class="metric-value">{{ waterElectricityAnalysisResult.rSquared !== undefined ? waterElectricityAnalysisResult.rSquared.toFixed(4) : 'N/A' }}</div>
-              </div>
-              <div class="metric-card info">
-                <div class="metric-label">数据点数量</div>
-                <div class="metric-value">{{ waterElectricityAnalysisResult.dataPoints }} <span class="unit">个</span></div>
-              </div>
-              <div class="metric-card info">
-                <div class="metric-label">F统计量</div>
-                <div class="metric-value">{{ waterElectricityAnalysisResult.fStatistic !== undefined ? waterElectricityAnalysisResult.fStatistic.toFixed(2) : 'N/A' }}</div>
-              </div>
-              <div class="metric-card warning">
-                <div class="metric-label">显著性</div>
-                <div class="metric-value">
-                  {{ waterElectricityAnalysisResult.significance }}
-                  <span class="p-value" v-if="waterElectricityAnalysisResult.pValue !== undefined && waterElectricityAnalysisResult.pValue !== null">
-                    (P={{ formatPValue(waterElectricityAnalysisResult.pValue) }})
-                  </span>
+                <div class="metric-card primary">
+                  <div class="metric-label">变动成本(b)</div>
+                  <div class="metric-value">{{ waterElectricityAnalysisResult.variableCostPerUnit.toFixed(2) }} <span class="unit">元/米</span></div>
+                </div>
+                <div class="metric-card secondary">
+                  <div class="metric-label">相关系数(R)</div>
+                  <div class="metric-value">{{ waterElectricityAnalysisResult.correlationCoefficient.toFixed(4) }}</div>
+                </div>
+                <div class="metric-card secondary">
+                  <div class="metric-label">R方(R²)</div>
+                  <div class="metric-value">{{ waterElectricityAnalysisResult.rSquared !== undefined ? waterElectricityAnalysisResult.rSquared.toFixed(4) : 'N/A' }}</div>
+                </div>
+                <div class="metric-card info">
+                  <div class="metric-label">数据点数量</div>
+                  <div class="metric-value">{{ waterElectricityAnalysisResult.dataPoints }} <span class="unit">个</span></div>
+                </div>
+                <div class="metric-card info">
+                  <div class="metric-label">F统计量</div>
+                  <div class="metric-value">{{ waterElectricityAnalysisResult.fStatistic !== undefined ? waterElectricityAnalysisResult.fStatistic.toFixed(2) : 'N/A' }}</div>
+                </div>
+                <div class="metric-card warning">
+                  <div class="metric-label">显著性</div>
+                  <div class="metric-value">
+                    {{ waterElectricityAnalysisResult.significance }}
+                    <span class="p-value" v-if="waterElectricityAnalysisResult.pValue !== undefined && waterElectricityAnalysisResult.pValue !== null">
+                      (P={{ formatPValue(waterElectricityAnalysisResult.pValue) }})
+                    </span>
+                  </div>
+                </div>
+                <div class="metric-card warning">
+                  <div class="metric-label">标准误差</div>
+                  <div class="metric-value">{{ waterElectricityAnalysisResult.standardError !== undefined ? waterElectricityAnalysisResult.standardError.toFixed(2) : 'N/A' }}</div>
                 </div>
-              </div>
-              <div class="metric-card warning">
-                <div class="metric-label">标准误差</div>
-                <div class="metric-value">{{ waterElectricityAnalysisResult.standardError !== undefined ? waterElectricityAnalysisResult.standardError.toFixed(2) : 'N/A' }}</div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </el-card>
+      </el-card>
 
-    <!-- 固定成本和单位变动成本趋势图 -->
-    <el-card class="chart-card" v-if="rollingCostData.length > 0">
-      <div slot="header" class="clearfix">
-        <span>成本趋势分析（12个月滚动计算）</span>
-      </div>
-      <div ref="costTrendChart" class="chart-container"></div>
-    </el-card>
+      <!-- 固定成本和单位变动成本趋势图 -->
+      <el-card class="chart-card" v-if="rollingCostData.length > 0">
+        <div slot="header" class="clearfix">
+          <span>成本趋势分析（12个月滚动计算）</span>
+        </div>
+        <div ref="costTrendChart" class="chart-container"></div>
+      </el-card>
+    </div>
 
     <el-card class="table-card">
       <div slot="header" class="clearfix">
@@ -1003,15 +1006,15 @@ onUnmounted(() => {
 
 <style scoped>
 .query-card {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 
 .cost-analysis-card {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 
 .chart-card {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 
 .table-card {
@@ -1020,24 +1023,27 @@ onUnmounted(() => {
 
 .clearfix {
   font-weight: bold;
-  font-size: 16px;
+  font-size: 14px;
   color: #333;
+  padding: 8px 0;
 }
 
 .analysis-container {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .analysis-column {
   flex: 1;
   padding: 0 10px;
+  min-width: 300px;
 }
 
 .divider {
   width: 1px;
   background-color: #ebeef5;
-  margin: 0 20px;
+  margin: 0 10px;
 }
 
 .analysis-section {
@@ -1057,14 +1063,14 @@ onUnmounted(() => {
 .metrics-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
-  margin-top: 6px;
+  gap: 10px;
+  margin-top: 10px;
 }
 
 .metric-card {
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-radius: 6px;
-  padding: 5px 4px;
+  padding: 8px 4px;
   text-align: center;
   transition: all 0.3s ease;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
@@ -1072,7 +1078,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 45px;
+  min-height: 65px;
 }
 
 .metric-card:hover {
@@ -1106,21 +1112,20 @@ onUnmounted(() => {
   color: #495057;
   margin-bottom: 2px;
   font-weight: 500;
+  white-space: nowrap;
 }
 
 .metric-value {
   font-size: 13px;
   font-weight: bold;
   color: #212529;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   line-height: 1.2;
 }
 
 .unit {
   font-size: 12px;
   color: #6c757d;
+  white-space: nowrap;
 }
 
 .p-value {
@@ -1185,10 +1190,23 @@ onUnmounted(() => {
   height: 240px;
 }
 
-@media (max-width: 1200px) {
-  .metrics-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.analysis-and-chart-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.analysis-and-chart-container > .cost-analysis-card {
+  flex: 1;
+  min-width: 300px;
+  margin-bottom: 0;
+}
+
+.analysis-and-chart-container > .chart-card {
+  flex: 1;
+  min-width: 300px;
+  margin-bottom: 0;
 }
 
 @media (max-width: 768px) {
@@ -1205,5 +1223,26 @@ onUnmounted(() => {
   .metrics-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+  
+  .analysis-column {
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 1200px) {
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .analysis-and-chart-container {
+    flex-direction: column;
+  }
+  
+  .analysis-and-chart-container > .cost-analysis-card,
+  .analysis-and-chart-container > .chart-card {
+    min-width: 100%;
+  }
 }
 </style>