feat: historical-data

industry-monitor-web/src/app/pages/historical-data/historical-data.component.html

@@ -1,4 +1,3 @@
-<!-- historical-data.component.html -->
 <div class="history-container">
   <div class="history-header">
     <div class="header-content">
@@ -11,7 +10,7 @@
     </div>
   </div>
 
-  <div class="filter-row">
+  <div class="filter-column">
     <div class="filter-card">
       <div class="card-header">
         <i class="fas fa-calendar-alt"></i>
@@ -84,7 +83,6 @@
       </div>
       <div class="chart-content">
         <div class="chart-placeholder">
-          <!-- 这里实际应用中会替换为真实的图表库如Chart.js或ECharts -->
           <div class="chart-mockup">
             <div class="y-axis">
               <span>1.5</span>

industry-monitor-web/src/app/pages/historical-data/historical-data.css

@@ -1,4 +1,3 @@
-/* historical-data.component.css */
 :host {
   display: block;
   width: 100%;
@@ -22,8 +21,9 @@
   justify-content: space-between;
   align-items: center;
   padding: 24px 30px;
-  background: linear-gradient(135deg, #3498db, #2c3e50);
-  color: white;
+  background: white;
+  color: #333;
+  border-bottom: 1px solid #eee;
 }
 
 .header-content h2 {
@@ -33,12 +33,13 @@
   display: flex;
   align-items: center;
   gap: 12px;
+  color: #2c3e50;
 }
 
 .header-content .subtitle {
   margin: 6px 0 0;
   font-size: 14px;
-  opacity: 0.9;
+  color: #666;
   font-weight: 400;
 }
 
@@ -52,7 +53,7 @@
   border-radius: 6px;
   border: none;
   background: none;
-  cursor: pointer;
+  cursor: button;
   font-size: 14px;
   font-weight: 500;
   transition: all 0.2s ease;
@@ -66,17 +67,18 @@
   height: 36px;
   border-radius: 50%;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
+  background: rgba(52, 152, 219, 0.1);
+  color: #3498db;
 }
 
 .btn-icon:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(52, 152, 219, 0.2);
 }
 
 .btn-primary {
   background-color: #3498db;
   color: white;
+  white-space: nowrap; /* 防止按钮文字换行 */
 }
 
 .btn-primary:hover {
@@ -98,8 +100,9 @@
   font-size: 12px;
 }
 
-.filter-row {
+.filter-column {
   display: flex;
+  flex-direction: column;
   gap: 20px;
   padding: 20px;
   background: white;
@@ -107,7 +110,7 @@
 }
 
 .filter-card {
-  flex: 1;
+  width: 100%;
   background: white;
   border-radius: 8px;
   padding: 16px;
@@ -133,11 +136,17 @@
   color: #333;
 }
 
+/* 修复时间选择框与按钮重叠问题 */
 .date-controls {
   display: grid;
   grid-template-columns: 1fr 1fr auto;
-  gap: 12px;
+  gap: 16px; /* 增加间距防止重叠 */
   align-items: flex-end;
+  width: 100%;
+}
+
+.date-input {
+  min-width: 0; /* 允许输入框收缩 */
 }
 
 .date-input label {
@@ -150,6 +159,7 @@
 
 .input-with-icon {
   position: relative;
+  width: 100%;
 }
 
 .input-with-icon i {
@@ -168,7 +178,8 @@
   border: 1px solid #ddd;
   font-size: 14px;
   transition: border 0.2s;
-  padding-right: 36px;
+  padding-right: 48px; /* 增加右侧内边距容纳图标 */
+  box-sizing: border-box; /* 确保内边距不会增加总宽度 */
 }
 
 .input-with-icon input:focus {
@@ -733,7 +744,7 @@
   margin-top: 16px;
 }
 
-/* 响应式设计 */
+/* 响应式优化 */
 @media (max-width: 1200px) {
   .metrics-grid {
     grid-template-columns: repeat(2, 1fr);
@@ -741,12 +752,12 @@
 }
 
 @media (max-width: 768px) {
-  .filter-row {
-    flex-direction: column;
+  .date-controls {
+    grid-template-columns: 1fr; /* 小屏幕垂直排列 */
   }
   
-  .date-controls {
-    grid-template-columns: 1fr;
+  .btn-primary {
+    width: 100%; /* 按钮占满宽度 */
   }
   
   .metrics-grid {
@@ -768,4 +779,8 @@
     gap: 12px;
     align-items: flex-start;
   }
+  
+  .report-options {
+    flex-direction: column;
+  }
 }