水文预案页面修改

src/components/HydrologyPlanPanel.vue

@@ -6,7 +6,7 @@
           <h3 class="card-title">计算方案</h3>
         </div>
         <div class="card-body">
-          <div class="section-title">预报方案</div>
+          <div class="section-title">调度方案</div>
           <div class="plan-checkbox-list">
             <div 
               v-for="(plan, index) in planList" 
@@ -19,6 +19,18 @@
               <div class="plan-name">{{ plan }}</div>
             </div>
           </div>
+          
+          <div class="section-divider"></div>
+          
+          <div class="section-title">调度方案对比</div>
+          <div id="planComparisonChart" class="comparison-chart"></div>
+          
+          <div class="section-divider"></div>
+          
+          <div class="optimal-plan-section">
+            <div class="optimal-plan-title">最优方案推荐</div>
+            <div class="optimal-plan-text">{{ optimalPlanText }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -145,18 +157,7 @@
       </div>
     </div>
 
-    <div class="bottom-chart">
-      <div class="chart-header">
-        <h4 class="chart-title">调度综合过程图</h4>
-      </div>
-      <div class="chart-content">
-        <div class="chart-time-info">
-          <span>作业预报时间：2022-06-25 10:00</span>
-          <span>预报调度时间：06-24 00:00-06-29 23:00</span>
-        </div>
-        <div id="planProcessChart" class="process-chart"></div>
-      </div>
-    </div>
+
   </div>
 </template>
 
@@ -165,21 +166,36 @@ import * as echarts from 'echarts'
 
 export default {
   name: 'HydrologyPlanPanel',
+  props: {
+    selectedScenario: {
+      type: String,
+      default: 'light'
+    },
+    riskLevel: {
+      type: String,
+      default: '正常'
+    },
+    scenarioLabel: {
+      type: String,
+      default: '小雨情景（24h）'
+    }
+  },
   data() {
     return {
-      processChart: null,
-      selectedPlans: ['小塔山水库预报方案'],
-      planList: ['小塔山水库预报方案', '黑林水文站预报方案'],
+      comparisonChart: null,
+      selectedPlans: ['现状调度'],
+      planList: ['现状调度', '提前泄洪', '控制泄洪'],
       planColors: ['#ff6b6b', '#a855f7', '#ec4899', '#f59e0b', '#10b981'],
+      timeLabels: ['0h', '6h', '12h', '18h', '24h', '30h', '36h', '42h', '48h', '54h', '60h', '66h', '72h'],
       planData: {
-        '小塔山水库预报方案': {
-          name: '小塔山水库预报方案',
+        '现状调度': {
+          name: '现状调度',
           workTime: '2022-06-25 15:00',
           endTime: '2022-06-27 15:00',
           forecaster: 'admin',
           operateTime: '2024-06-02 14:59',
           fact: {
-            latestLevel: '31.29',
+            latestLevel: '18.29',
             latestLevelTime: '06-27 15:00',
             todayRain: '—'
           },
@@ -190,57 +206,143 @@ export default {
             maxOutflow: '10.0',
             maxOutflowTime: '06-25 16:00',
             outflowVolume: '171.00',
-            highestLevel: '31.37',
-            endLevel: '31.37',
-            forecastLevelData: [null, null, 36.8, 37.2, 37.5, 37.8, 38.2, 38.5, 38.3, 37.8, 37.2, 36.8]
+            highestLevel: '18.87',
+            endLevel: '18.57'
           }
         },
-        '黑林水文站预报方案': {
-          name: '黑林水文站预报方案',
+        '提前泄洪': {
+          name: '提前泄洪',
           workTime: '2022-06-25 16:00',
           endTime: '2022-06-27 16:00',
           forecaster: 'admin',
           operateTime: '2024-06-02 15:00',
           fact: {
-            latestLevel: '28.50',
+            latestLevel: '18.29',
             latestLevelTime: '06-27 15:30',
             todayRain: '12.5'
           },
           forecast: {
-            maxInflow: '320',
+            maxInflow: '438',
             maxInflowTime: '06-27 11:00',
-            inflowVolume: '1250.00',
-            maxOutflow: '8.5',
+            inflowVolume: '1893.34',
+            maxOutflow: '25.0',
             maxOutflowTime: '06-25 17:00',
-            outflowVolume: '120.00',
-            highestLevel: '29.20',
-            endLevel: '28.80',
-            forecastLevelData: [null, null, 35.5, 36.0, 36.3, 36.8, 37.5, 37.2, 36.8, 36.3, 35.8, 35.5]
+            outflowVolume: '350.00',
+            highestLevel: '18.57',
+            endLevel: '18.17'
+          }
+        },
+        '控制泄洪': {
+          name: '控制泄洪',
+          workTime: '2022-06-25 17:00',
+          endTime: '2022-06-27 17:00',
+          forecaster: 'admin',
+          operateTime: '2024-06-02 16:00',
+          fact: {
+            latestLevel: '18.29',
+            latestLevelTime: '06-27 16:00',
+            todayRain: '12.5'
+          },
+          forecast: {
+            maxInflow: '438',
+            maxInflowTime: '06-27 11:00',
+            inflowVolume: '1893.34',
+            maxOutflow: '5.0',
+            maxOutflowTime: '06-25 18:00',
+            outflowVolume: '85.00',
+            highestLevel: '19.27',
+            endLevel: '18.97'
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    optimalPlan() {
+      const floodLimitLevel = 20.0
+      
+      const planResults = this.planList.map(planName => {
+        const data = this.planData[planName]
+        const highestLevel = parseFloat(data?.forecast?.highestLevel || 0)
+        const maxOutflow = parseFloat(data?.forecast?.maxOutflow || 0)
+        const belowFloodLimit = highestLevel < floodLimitLevel
+        
+        return {
+          name: planName,
+          highestLevel,
+          maxOutflow,
+          belowFloodLimit
+        }
+      })
+      
+      let optimal = planResults[0]
+      for (const plan of planResults) {
+        if (plan.belowFloodLimit && !optimal.belowFloodLimit) {
+          optimal = plan
+        } else if (plan.belowFloodLimit && optimal.belowFloodLimit) {
+          if (plan.highestLevel < optimal.highestLevel) {
+            optimal = plan
+          }
+        } else if (!plan.belowFloodLimit && !optimal.belowFloodLimit) {
+          if (plan.highestLevel < optimal.highestLevel) {
+            optimal = plan
           }
         }
       }
+      
+      return optimal
+    },
+    optimalPlanText() {
+      const plan = this.optimalPlan
+      const hasNoFloodRisk = plan.belowFloodLimit
+      
+      let planDescription = plan.name
+      if (plan.name === '提前泄洪') {
+        planDescription = '提前泄洪（加大出库）'
+      } else if (plan.name === '控制泄洪') {
+        planDescription = '控制泄洪（减少出库）'
+      }
+      
+      return `当前${this.scenarioLabel}，风险等级「${this.riskLevel}」，图表显示${plan.name}方案最高水位最低（${plan.highestLevel.toFixed(1)}m）、${hasNoFloodRisk ? '无超汛风险' : '超汛风险相对较小'}，推荐最优方案：${planDescription}，配套执行${this.riskLevel}等级对应预案。`
+    },
+    optimalPlanIndex() {
+      return this.planList.indexOf(this.optimalPlan.name)
     }
   },
   watch: {
-    selectedPlans: {
+    selectedScenario: {
+      handler() {
+        this.$nextTick(() => {
+          this.initComparisonChart()
+        })
+      }
+    },
+    riskLevel: {
       handler() {
         this.$nextTick(() => {
-          this.initProcessChart()
+          this.initComparisonChart()
         })
-      },
-      deep: true
+      }
+    },
+    scenarioLabel: {
+      handler() {
+        this.$nextTick(() => {
+          this.initComparisonChart()
+        })
+      }
     }
   },
   mounted() {
     setTimeout(() => {
-      this.initProcessChart()
+      this.initComparisonChart()
     }, 100)
   },
   beforeUnmount() {
-    if (this.processChart) {
-      this.processChart.dispose()
+    if (this.comparisonChart) {
+      this.comparisonChart.dispose()
     }
   },
+
   methods: {
     togglePlan(plan) {
       const index = this.selectedPlans.indexOf(plan)
@@ -250,136 +352,78 @@ export default {
         this.selectedPlans.push(plan)
       }
     },
-    initProcessChart() {
-      if (document.getElementById('planProcessChart')) {
-        if (this.processChart) {
-          this.processChart.dispose()
+    initComparisonChart() {
+      if (document.getElementById('planComparisonChart')) {
+        if (this.comparisonChart) {
+          this.comparisonChart.dispose()
         }
-        this.processChart = echarts.init(document.getElementById('planProcessChart'))
+        this.comparisonChart = echarts.init(document.getElementById('planComparisonChart'))
         
-        const legendData = ['水位', '入库流量', '泄洪流量', '汛限水位', '警戒水位', '保证水位']
-        this.selectedPlans.forEach((planName, index) => {
-          legendData.push(planName)
-        })
+        const optimalIndex = this.optimalPlanIndex
         
-        const series = [
+        const seriesData = [
           {
-            name: '水位',
-            type: 'line',
-            yAxisIndex: 0,
-            data: [36.2, 36.5, 36.8, 37.2, 37.5, 37.8, 38.0, 37.8, 37.5, 37.2, 36.8, 36.5],
-            lineStyle: {
-              color: '#ffd93d',
-              width: 2
-            },
-            itemStyle: {
-              color: '#ffd93d'
-            }
-          },
-          {
-            name: '入库流量',
-            type: 'line',
-            yAxisIndex: 1,
-            data: [45, 52, 60, 75, 85, 78, 65, 58, 52, 48, 45, 42],
-            lineStyle: {
-              color: '#62f6fb',
-              width: 2
-            },
-            itemStyle: {
-              color: '#62f6fb'
-            }
+            name: '最高水位',
+            type: 'bar',
+            data: [
+              { value: 18.87, itemStyle: { color: '#1E88E5', borderColor: optimalIndex === 0 ? '#22c55e' : 'transparent', borderWidth: optimalIndex === 0 ? 3 : 0 } },
+              { value: 18.57, itemStyle: { color: '#1E88E5', borderColor: optimalIndex === 1 ? '#22c55e' : 'transparent', borderWidth: optimalIndex === 1 ? 3 : 0 } },
+              { value: 19.27, itemStyle: { color: '#1E88E5', borderColor: optimalIndex === 2 ? '#22c55e' : 'transparent', borderWidth: optimalIndex === 2 ? 3 : 0 } }
+            ],
+            barWidth: '30%'
           },
           {
-            name: '泄洪流量',
+            name: '最大出库',
             type: 'bar',
             yAxisIndex: 1,
-            data: [0, 0, 0, 20, 30, 25, 15, 10, 5, 0, 0, 0],
-            itemStyle: {
-              color: '#f97316'
-            }
+            data: [
+              { value: 10.0, itemStyle: { color: '#FFD93D', borderColor: optimalIndex === 0 ? '#22c55e' : 'transparent', borderWidth: optimalIndex === 0 ? 3 : 0 } },
+              { value: 25.0, itemStyle: { color: '#FFD93D', borderColor: optimalIndex === 1 ? '#22c55e' : 'transparent', borderWidth: optimalIndex === 1 ? 3 : 0 } },
+              { value: 5.0, itemStyle: { color: '#FFD93D', borderColor: optimalIndex === 2 ? '#22c55e' : 'transparent', borderWidth: optimalIndex === 2 ? 3 : 0 } }
+            ],
+            barWidth: '30%'
           },
           {
             name: '汛限水位',
             type: 'line',
-            yAxisIndex: 0,
-            data: [36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
+            data: [20.0, 20.0, 20.0],
             lineStyle: {
-              color: '#3b82f6',
-              width: 1,
-              type: 'dashed'
-            },
-            symbol: 'none'
-          },
-          {
-            name: '警戒水位',
-            type: 'line',
-            yAxisIndex: 0,
-            data: [38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38],
-            lineStyle: {
-              color: '#ffd93d',
-              width: 1,
-              type: 'dashed'
-            },
-            symbol: 'none'
-          },
-          {
-            name: '保证水位',
-            type: 'line',
-            yAxisIndex: 0,
-            data: [39.5, 39.5, 39.5, 39.5, 39.5, 39.5, 39.5, 39.5, 39.5, 39.5, 39.5, 39.5],
-            lineStyle: {
-              color: '#ff6b6b',
-              width: 1,
+              color: '#ef4444',
+              width: 2,
               type: 'dashed'
             },
             symbol: 'none'
           }
         ]
         
-        this.selectedPlans.forEach((planName, index) => {
-          const plan = this.planData[planName]
-          if (plan && plan.forecast && plan.forecast.forecastLevelData) {
-            series.push({
-              name: planName,
-              type: 'line',
-              yAxisIndex: 0,
-              data: plan.forecast.forecastLevelData,
-              lineStyle: {
-                color: this.planColors[index % this.planColors.length],
-                width: 2,
-                type: 'dashed'
-              },
-              itemStyle: {
-                color: this.planColors[index % this.planColors.length]
-              }
-            })
-          }
-        })
-        
         const option = {
-          animation: false,
+          animation: true,
           tooltip: {
-            trigger: 'axis'
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
           },
           legend: {
-            data: legendData,
+            data: ['最高水位', '最大出库', '汛限水位'],
             textStyle: {
               color: '#7bbef6',
               fontSize: 10
             },
-            top: 10
+            itemWidth: 10,
+            itemHeight: 10,
+            bottom: 0
           },
           grid: {
             left: '3%',
             right: '4%',
-            bottom: '10%',
-            top: '60px',
+            bottom: '50px',
+            top: '30px',
             containLabel: true
           },
           xAxis: {
             type: 'category',
-            boundaryGap: false,
-            data: ['06-24 00:00', '06-24 12:00', '06-25 00:00', '06-25 12:00', '06-26 00:00', '06-26 12:00', '06-27 00:00', '06-27 12:00', '06-28 00:00', '06-28 12:00', '06-29 00:00', '06-29 12:00'],
+            data: ['现状调度', '提前泄洪', '控制泄洪'],
             axisLine: {
               lineStyle: {
                 color: '#7bbef6'
@@ -387,19 +431,19 @@ export default {
             },
             axisLabel: {
               color: '#7bbef6',
-              fontSize: 9
+              fontSize: 11
             }
           },
           yAxis: [
             {
               type: 'value',
-              name: '水位(m)',
+              name: '最高水位(m)',
               nameTextStyle: {
                 color: '#ffd93d',
                 fontSize: 10
               },
-              min: 32,
-              max: 42,
+              min: 17,
+              max: 21,
               axisLine: {
                 lineStyle: {
                   color: '#ffd93d'
@@ -417,13 +461,13 @@ export default {
             },
             {
               type: 'value',
-              name: '流量(m³/s)',
+              name: '最大出库(m³/s)',
               nameTextStyle: {
                 color: '#62f6fb',
                 fontSize: 10
               },
               min: 0,
-              max: 120,
+              max: 50,
               position: 'right',
               axisLine: {
                 lineStyle: {
@@ -439,9 +483,9 @@ export default {
               }
             }
           ],
-          series: series
+          series: seriesData
         }
-        this.processChart.setOption(option)
+        this.comparisonChart.setOption(option)
       }
     }
   }
@@ -470,52 +514,7 @@ export default {
   z-index: 5;
 }
 
-.bottom-chart {
-  position: absolute;
-  left: 390px;
-  right: 390px;
-  bottom: 80px;
-  height: 280px;
-  z-index: 5;
-}
 
-.chart-header {
-  text-align: center;
-  margin-bottom: 5px;
-}
-
-.chart-title {
-  font-size: 14px;
-  color: #e0fcff;
-  margin: 0;
-  font-weight: bold;
-}
-
-.chart-content {
-  width: 100%;
-  height: 240px;
-  background: rgba(0, 20, 40, 0.7);
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  border-radius: 4px;
-  padding: 10px;
-}
-
-.chart-time-info {
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 5px;
-  font-size: 11px;
-  color: #7bbef6;
-}
-
-.process-chart {
-  width: 100%;
-  height: 190px;
-}
-
-.mt-20 {
-  margin-top: 15px;
-}
 
 .data-card {
   width: 100%;
@@ -820,4 +819,48 @@ export default {
   color: #7bbef6;
   font-size: 11px;
 }
+
+.comparison-chart {
+  width: 100%;
+  height: 280px;
+  margin-top: 10px;
+}
+
+.optimal-plan-section {
+  margin-top: 5px;
+  padding: 12px;
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.5);
+  border-radius: 4px;
+}
+
+.optimal-plan-title {
+  font-size: 14px;
+  color: #22c55e;
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.optimal-plan-title::before {
+  content: '✓';
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background: #22c55e;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.optimal-plan-text {
+  font-size: 12px;
+  color: #e0fcff;
+  line-height: 1.8;
+}
 </style>

src/components/HydrologySimulationPanel.vue

@@ -118,7 +118,7 @@ export default {
       default: () => ({})
     }
   },
-  emits: ['updateSimulationTime', 'updateSimulationData'],
+  emits: ['updateSimulationTime', 'updateSimulationData', 'updateScenarioAndRisk'],
   data() {
     return {
       heilinChart: null,
@@ -220,6 +220,7 @@ export default {
       this.initReservoirChart()
       this.initComparisonChart()
       this.updateMapData()
+      this.emitScenarioAndRisk()
     }, 100)
   },
   beforeUnmount() {
@@ -237,9 +238,16 @@ export default {
   methods: {
     selectScenario(value) {
       this.selectedScenario = value
+      this.emitScenarioAndRisk()
     },
     selectScheme(value) {
       this.selectedScheme = value
+      this.emitScenarioAndRisk()
+    },
+    emitScenarioAndRisk() {
+      const scenario = this.scenarioList.find(s => s.value === this.selectedScenario)?.label || '小雨情景（24h）'
+      const riskLevel = this.riskLevelText
+      this.$emit('updateScenarioAndRisk', { scenario, riskLevel, selectedScenario: this.selectedScenario })
     },
     startSimulation() {
       this.currentTimeIndex = 0

src/views/HomeView.vue

@@ -70,8 +70,6 @@
     <!-- 水资源调配视图 -->
     <WaterResourceAllocationView 
       v-if="activeTab === '水资源调配'" 
-      :activeSecondaryTab="activeSecondaryTab"
-      @selectSecondaryTab="selectSecondaryTab"
     />
   </div>
 </template>
@@ -116,8 +114,6 @@ export default {
       this.activeTab = tab
       if (tab === '水文四预') {
         this.activeSecondaryTab = '水文预报'
-      } else if (tab === '水资源调配') {
-        this.activeSecondaryTab = '调配基础数据'
       }
     },
     selectSecondaryTab(tab) {

src/views/HydrologyForecastView.vue

@@ -39,8 +39,14 @@
       :simulationData="simulationData"
       @updateSimulationTime="$emit('updateSimulationTime', $event)"
       @updateSimulationData="$emit('updateSimulationData', $event)"
+      @updateScenarioAndRisk="handleUpdateScenarioAndRisk"
+    />
+    <HydrologyPlanPanel 
+      v-if="activeSecondaryTab === '水文预案'" 
+      :selectedScenario="selectedScenario"
+      :riskLevel="riskLevel"
+      :scenarioLabel="scenarioLabel"
     />
-    <HydrologyPlanPanel v-if="activeSecondaryTab === '水文预案'" />
   </div>
 </template>
 
@@ -72,10 +78,22 @@ export default {
       default: () => ({})
     }
   },
+  data() {
+    return {
+      selectedScenario: 'light',
+      scenarioLabel: '小雨情景（24h）',
+      riskLevel: '正常'
+    }
+  },
   emits: ['selectSecondaryTab', 'updateSimulationTime', 'updateSimulationData'],
   methods: {
     selectSecondaryTab(tab) {
       this.$emit('selectSecondaryTab', tab)
+    },
+    handleUpdateScenarioAndRisk({ scenario, riskLevel, selectedScenario }) {
+      this.selectedScenario = selectedScenario
+      this.scenarioLabel = scenario
+      this.riskLevel = riskLevel
     }
   }
 }

src/views/WaterResourceAllocationView.vue

@@ -1,35 +1,5 @@
 <template>
   <div class="water-allocation-container">
-    <div class="secondary-title-container">
-      <div 
-        class="secondary-title" 
-        :class="{ active: activeSecondaryTab === '调配基础数据' }"
-        @click="selectSecondaryTab('调配基础数据')"
-      >
-        <span>调配基础数据</span>
-      </div>
-      <div 
-        class="secondary-title" 
-        :class="{ active: activeSecondaryTab === '供水关系分析' }"
-        @click="selectSecondaryTab('供水关系分析')"
-      >
-        <span>供水关系分析</span>
-      </div>
-      <div 
-        class="secondary-title" 
-        :class="{ active: activeSecondaryTab === '需水优化建议' }"
-        @click="selectSecondaryTab('需水优化建议')"
-      >
-        <span>需水优化建议</span>
-      </div>
-      <div 
-        class="secondary-title" 
-        :class="{ active: activeSecondaryTab === '调配效果预演' }"
-        @click="selectSecondaryTab('调配效果预演')"
-      >
-        <span>调配效果预演</span>
-      </div>
-    </div>
 
     <div class="left-sidebar">
       <div class="data-card">
@@ -176,13 +146,7 @@ export default {
   components: {
     DataCard
   },
-  props: {
-    activeSecondaryTab: {
-      type: String,
-      default: '调配基础数据'
-    }
-  },
-  emits: ['selectSecondaryTab'],
+
   data() {
     return {
       basicDataExpanded: true,
@@ -198,14 +162,12 @@ export default {
         { name: '陡沟水库', level: 8.5, capacity: 10.0 }
       ],
       demands: [
-        { name: '农业灌溉', value: 45.8, percent: 54 },
-        { name: '工业用水', value: 22.5, percent: 26 },
-        { name: '居民生活', value: 12.3, percent: 14 },
-        { name: '生态环境', value: 4.6, percent: 5 }
+        { name: '农业灌溉', value: 45.8, percent: 68 },
+        { name: '居民生活', value: 12.3, percent: 18 },
+        { name: '生态环境', value: 9.1, percent: 14 }
       ],
       suggestions: [
         { icon: '💧', text: '建议灌区采用滴灌技术' },
-        { icon: '⚡', text: '优化工业用水循环利用率' },
         { icon: '🌱', text: '加强生态补水调度' }
       ]
     }
@@ -219,9 +181,6 @@ export default {
     this.destroyCharts()
   },
   methods: {
-    selectSecondaryTab(tab) {
-      this.$emit('selectSecondaryTab', tab)
-    },
     toggleBasicData() {
       this.basicDataExpanded = !this.basicDataExpanded
     },
@@ -300,9 +259,8 @@ export default {
               },
               data: [
                 { value: 45.8, name: '农业灌溉', itemStyle: { color: '#62f6fb' } },
-                { value: 22.5, name: '工业用水', itemStyle: { color: '#00d4ff' } },
                 { value: 12.3, name: '居民生活', itemStyle: { color: '#38bdf8' } },
-                { value: 4.6, name: '生态环境', itemStyle: { color: 'rgba(123, 190, 246, 0.5)' } }
+                { value: 9.1, name: '生态环境', itemStyle: { color: 'rgba(123, 190, 246, 0.5)' } }
               ]
             }
           ]
@@ -321,53 +279,6 @@ export default {
   position: relative;
 }
 
-.secondary-title-container {
-  position: absolute;
-  bottom: 46px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 20px;
-  z-index: 4;
-}
-
-.secondary-title {
-  width: 159px;
-  height: 31px;
-  background-image: url('/src/assets/images/未选中底部标题.png');
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.secondary-title span {
-  background: linear-gradient(to bottom, #e2e8ff, #7bbef6);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
-}
-
-.secondary-title:hover,
-.secondary-title.active {
-  background-image: url('/src/assets/images/选中底部标题.png');
-}
-
-.secondary-title:hover span,
-.secondary-title.active span {
-  background: linear-gradient(to bottom, #e2e8ff, #62f6fb);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
 .left-sidebar {
   position: absolute;
   left: 20px;