修改价格行情模块

src/components/Home.vue

@@ -536,7 +536,7 @@ export default {
           noDataMessage.value = '请求超时'
         } else {
           console.error('[外部接口] 调用失败:', error)
-          noDataMessage.value = '接口调用失败'
+          noDataMessage.value = '该地区暂无数据'
         }
         isJumpLoading.value = false
         showNoDataToast.value = true

src/components/Price.vue

@@ -114,8 +114,8 @@ export default {
         })
       }
       const data = Array.from(counts.entries()).map(([name, value]) => ({ name, value }))
-      // 与大屏主体色一致的配色（青蓝系）
+      // 指定配色：#FF7A28，#00E9FF，#4E73DF，#0B1424
-      const brandColors = ['#00d4ff', '#29e3ff', '#00b3f9', '#3bd1ff', '#0099ff', '#61eaff']
+      const brandColors = ['#FF7A28', '#00E9FF', '#4E73DF', '#0B1424','#61eaff']
       return {
         color: brandColors,
         title: { text: '品种占比统计', left: 'center', top: 6, textStyle: { color: '#eaf7ff', fontSize: 14 } },
@@ -318,7 +318,7 @@ export default {
     }
 
     const stockBarOption = computed(() => ({
-      title: { text: '存栏统计', left: 'center', textStyle: { color: '#eaf7ff' } },
+      title: { text: '存栏统计(万头)', left: 'center', textStyle: { color: '#eaf7ff' } },
       tooltip: { trigger: 'axis' },
       grid: { left: 40, right: 20, top: 50, bottom: 40 },
       xAxis: { type: 'category', data: stockYears.value, axisLabel: { color: '#cfefff' }, axisLine: { lineStyle: { color: '#2e6ba8' } } },
@@ -331,7 +331,7 @@ export default {
     }))
 
     const slaughterLineOption = computed(() => ({
-      title: { text: '出栏统计', left: 'center', textStyle: { color: '#eaf7ff' } },
+      title: { text: '出栏统计(万头)', left: 'center', textStyle: { color: '#eaf7ff' } },
       tooltip: { trigger: 'axis' },
       grid: { left: 40, right: 20, top: 50, bottom: 40 },
       xAxis: { type: 'category', data: statsYears.value, axisLabel: { color: '#cfefff' }, axisLine: { lineStyle: { color: '#2e6ba8' } } },
@@ -391,13 +391,15 @@ export default {
         </div>
         <div class="region-table">
           <div class="table-header">
+            <div class="th">序号</div>
             <div class="th">时间</div>
             <div class="th">地区</div>
             <div class="th">品类</div>
             <div class="th">价格（{{ unit }}）</div>
           </div>
           <div class="table-body">
-            <div class="table-row" v-for="row in regionRows" :key="row.id" @click="handleRowClick(row)" :class="{ active: selectedRow && selectedRow.id === row.id }">
+            <div class="table-row" v-for="(row, idx) in regionRows" :key="row.id" @click="handleRowClick(row)" :class="{ active: selectedRow && selectedRow.id === row.id }">
+              <div class="td">{{ idx + 1 }}</div>
               <div class="td">{{ row.date }}</div>
               <div class="td">{{ row.region }}</div>
               <div class="td">{{ row.breed }}</div>
@@ -418,7 +420,7 @@ export default {
           </h3>
         </div>
         <div class="detail-content">
-          <div class="today-price-line">
+          <!-- <div class="today-price-line">
             <div class="labels">
               <span class="label">今日批发均价</span>
               <span class="compare">相比昨日 <span :class="yesterdayDelta === 0 ? 'change-zero' : (yesterdayDelta > 0 ? 'change-up' : 'change-down')">{{ trendText }} {{ yesterdayDelta.toFixed(2) }}</span> <span class="symbol">{{ trendSymbol }}</span></span>
@@ -428,9 +430,9 @@ export default {
               <span class="value">{{ avgToday.toFixed(2) }}</span>
               <span class="unit">{{ unit }}</span>
             </div>
-          </div>
+          </div> -->
 
-          <div class="filters">
+          <!-- <div class="filters">
             <div class="weight-group">
               <button :class="['filter-btn', { active: weight === 'normal' }]" @click="setWeight('normal')">通货</button>
               <button :class="['filter-btn', { active: weight === '400' }]" @click="setWeight('400')">400斤</button>
@@ -441,7 +443,7 @@ export default {
               <button :class="['filter-btn', { active: range === 30 }]" @click="setRange(30)">近30天</button>
               <button :class="['filter-btn', { active: range === 60 }]" @click="setRange(60)">近60天</button>
             </div>
-          </div>
+          </div> -->
 
           <v-chart class="trend-chart" :option="chartOption" autoresize />
         </div>
@@ -479,7 +481,7 @@ export default {
 <style scoped>
 .price-page {
   width: 100%;
-  height: calc(100vh - 80px);
+  height: calc(100vh - 100px);
   padding: 16px 24px;
   display: flex;
   flex-direction: column;
@@ -701,7 +703,7 @@ export default {
 
 .table-header, .table-row {
   display: grid;
-  grid-template-columns: 1fr 1.6fr 1.2fr 1fr; /* 移除涨跌列后调整为四列 */
+  grid-template-columns: 0.6fr 1fr 1.6fr 1.2fr 1fr; /* 新增序号列后为五列 */
   gap: 10px;
   align-items: center;
 }
@@ -835,10 +837,13 @@ export default {
   .breed-donut { height: 220px; }
   .trend-chart { height: 180px; }
   .stats-bottom { grid-template-columns: 1fr; }
-  .table-header, .table-row { grid-template-columns: 1fr 1.2fr 1fr 0.9fr; }
+  .table-header, .table-row { grid-template-columns: 0.6fr 0.9fr 1.2fr 1fr 0.9fr; }
   .stats-grid { grid-template-columns: 1fr; }
   .th, .td { font-size: 13px; }
 }
+
+/* 小高度屏幕下同步头部高度为 60px，避免出现整体滚动 */
+@media screen and (max-height: 768px) {
+  .price-page { height: calc(100vh - 60px); }
+}
 </style>
-
-