yangg 1 ヶ月 前
コミット
2c28b24c60

+ 375 - 7
src/views/system/home/index.vue

@@ -1709,6 +1709,140 @@ $homeNavLengh: 8;
 		}
 	}
 
+	// 1024px宽度优化
+	@media screen and (max-width: 1024px) {
+		.lol-data-section {
+			.lol-container {
+				.head {
+					height: 90px;
+					
+					h1 {
+						font-size: 20px;
+						line-height: 75px;
+					}
+					
+					.weather {
+						right: 15px;
+						line-height: 70px;
+						gap: 10px;
+						
+						.fullscreen-btn {
+							font-size: 24px;
+						}
+						
+						.fullscreen-btn svg {
+							width: 24px;
+							height: 24px;
+						}
+					}
+				}
+				
+				.mainbox {
+					height: calc(100vh - 90px);
+					padding: 8px 12px;
+					
+					.boxall {
+						padding: 12px;
+						margin-bottom: 12px;
+						
+						.alltitle {
+							font-size: 14px;
+							padding-left: 10px;
+							margin-bottom: 8px;
+						}
+					}
+					
+					ul.clearfix {
+						gap: 10px;
+						
+						li {
+							width: 32%;
+							min-width: 0; // 允许收缩
+							
+							.boxall {
+								min-height: 300px;
+							}
+						}
+					}
+					
+					// 核心概览指标优化(在1024px下已由内部媒体查询处理)
+					
+					// 排名列表优化
+					.active-users-container,
+					.device-duration-container,
+					.device-count-container {
+						.navboxall {
+							.wraptit {
+								padding: 0 8px;
+								margin-bottom: 8px;
+								
+								span {
+									font-size: 11px;
+									padding: 0 3px;
+									
+									&:nth-child(1) {
+										flex: 0 0 35px;
+									}
+									
+									&:nth-child(4) {
+										flex: 0 0 60px;
+									}
+								}
+							}
+							
+							.active-users-list,
+							.device-duration-list,
+							.device-count-list {
+								ul li {
+									font-size: 12px;
+									line-height: 28px;
+									padding: 4px 0;
+									
+									div {
+										padding: 0 5px;
+										
+										span {
+											font-size: 11px;
+											padding: 0 3px;
+											
+											&:nth-child(1) {
+												flex: 0 0 35px;
+											}
+											
+											&:nth-child(4) {
+												flex: 0 0 60px;
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+					
+					// 借用趋势容器优化
+					.borrow-trend-container {
+						.alltitle {
+							font-size: 14px;
+							margin-bottom: 8px;
+						}
+						
+						.navboxall {
+							#echart3 {
+								margin-top: 8px !important;
+							}
+						}
+					}
+					
+					// 图表容器优化
+					#echart3,
+					#echart5 {
+						min-height: 200px;
+					}
+				}
+			}
+		}
+	}
+
 	@media screen and (max-width: 1200px) {
 		.active-users-container,
 		.device-duration-container,
@@ -2005,21 +2139,25 @@ $homeNavLengh: 8;
 					padding: 0;
 					list-style: none;
 					height: 100%;
+					gap: 10px; // 添加列间距
 
 					li {
 						width: 32%;
 						display: flex;
 						flex-direction: column;
+						min-width: 0; // 允许收缩,防止溢出
 						
 						.boxall {
 							flex: 1;
 							display: flex;
 							flex-direction: column;
+							min-width: 0; // 防止内容溢出
 							
 							.navboxall {
 								flex: 1;
 								display: flex;
 								flex-direction: column;
+								min-width: 0; // 防止内容溢出
 							}
 						}
 				}
@@ -2224,16 +2362,19 @@ $homeNavLengh: 8;
 				.wraptit {
 					display: flex;
 					justify-content: space-between;
-
 					padding: 0 10px;
 					margin-bottom: 10px;
 					color: #fff;
 					font-weight: bold;
-
+					min-width: 0; // 允许收缩
 
 					span {
 						flex: 1;
 						text-align: center;
+						min-width: 0; // 允许收缩
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
 
 						&:first-child {
 							text-align: center;
@@ -2258,14 +2399,18 @@ $homeNavLengh: 8;
 					gap: 15px;
 					padding: 10px;
 					height: 100%;
+					min-height: fit-content; // 确保容器至少适应内容
+					overflow: visible; // 允许内容溢出可见
+					align-content: start; // 网格内容从顶部开始对齐
 
 					.data-card {
 						background: rgba(255, 255, 255, 0.1);
 						border-radius: 8px;
 						position: relative;
-						overflow: hidden;
+						overflow: visible; // 改为 visible 确保内容不被截断
 						transition: all 0.3s ease;
-						height: 120px;
+						min-height: 120px; // 使用 min-height 而不是固定 height
+						height: auto; // 允许高度自适应
 						border: none;
 
 						&:hover {
@@ -2278,29 +2423,45 @@ $homeNavLengh: 8;
 							display: flex;
 							flex-direction: column;
 							align-items: flex-start;
+							justify-content: space-between; // 确保内容分布合理
 							position: relative;
 							z-index: 1;
 							height: 100%;
+							min-height: 100%; // 确保内容区域填满
 							padding: 15px;
+							box-sizing: border-box; // 确保 padding 包含在高度内
 
 							.card-title {
 								font-size: 16px;
 								color: rgba(255, 255, 255, 0.9);
-								margin-bottom: 20px;
+								margin-bottom: 12px; // 减少底部间距
+								flex-shrink: 0; // 防止标题被压缩
+								line-height: 1.2;
 							}
 
 							.card-value {
 								font-size: 48px;
 								font-weight: bold;
 								color: #fff;
-								line-height: 1;
-								margin-bottom: 10px;
+								line-height: 1.1; // 调整行高,确保数字完全显示
+								margin-bottom: 0; // 移除底部间距
+								flex: 1; // 允许数字区域占据剩余空间
+								display: flex;
+								align-items: center; // 垂直居中
+								word-break: break-all; // 防止长数字溢出
+								overflow-wrap: break-word; // 允许换行
+								white-space: normal; // 允许换行
+								overflow: visible; // 确保内容可见
+								min-height: 0; // 允许收缩
+								width: 100%; // 确保宽度填满
+								box-sizing: border-box; // 包含 padding
 							}
 
 							.card-unit {
 								font-size: 16px;
 								color: rgba(255, 255, 255, 0.7);
 								margin-left: 5px;
+								display: inline-block; // 确保单位正确显示
 							}
 
 							.card-subtitle {
@@ -2340,6 +2501,213 @@ $homeNavLengh: 8;
 							background: #8e44ad;
 						}
 					}
+					
+					// 超大屏幕优化(1920px及以上)
+					@media screen and (min-width: 1920px) {
+						gap: 20px;
+						padding: 15px;
+						
+						.data-card {
+							min-height: 140px;
+							height: auto;
+							
+							.card-content {
+								padding: 20px;
+								
+								.card-title {
+									font-size: 18px;
+									margin-bottom: 15px;
+								}
+								
+								.card-value {
+									font-size: 56px;
+									line-height: 1.1;
+								}
+								
+								.card-unit {
+									font-size: 18px;
+								}
+							}
+						}
+					}
+					
+					// 大屏幕优化(1600px-1919px)
+					@media screen and (min-width: 1600px) and (max-width: 1919px) {
+						gap: 15px;
+						padding: 12px;
+						
+						.data-card {
+							min-height: 130px;
+							height: auto;
+							
+							.card-content {
+								padding: 18px;
+								
+								.card-title {
+									font-size: 17px;
+									margin-bottom: 15px;
+								}
+								
+								.card-value {
+									font-size: 52px;
+									line-height: 1.1;
+								}
+								
+								.card-unit {
+									font-size: 17px;
+								}
+							}
+						}
+					}
+					
+					// 中等屏幕优化(1366px-1599px)
+					@media screen and (min-width: 1366px) and (max-width: 1599px) {
+						gap: 12px;
+						padding: 10px;
+						
+						.data-card {
+							min-height: 115px;
+							height: auto;
+							
+							.card-content {
+								padding: 12px;
+								
+								.card-title {
+									font-size: 15px;
+									margin-bottom: 12px;
+								}
+								
+								.card-value {
+									font-size: 42px;
+									line-height: 1.1;
+								}
+								
+								.card-unit {
+									font-size: 15px;
+								}
+							}
+						}
+					}
+					
+					// 小屏幕优化(1024px-1365px)
+					@media screen and (min-width: 1024px) and (max-width: 1365px) {
+						grid-template-columns: repeat(3, 1fr);
+						gap: 10px;
+						padding: 8px;
+						
+						.data-card {
+							min-height: 110px; // 增加最小高度确保数字完整显示
+							height: auto;
+							
+							.card-content {
+								padding: 10px;
+								
+								.card-title {
+									font-size: 13px;
+									margin-bottom: 10px;
+								}
+								
+								.card-value {
+									font-size: 18px;
+									line-height: 1.1;
+								}
+								
+								.card-unit {
+									font-size: 14px;
+								}
+							}
+						}
+					}
+					
+					// 平板横屏优化(768px-1023px)
+					@media screen and (min-width: 768px) and (max-width: 1023px) {
+						grid-template-columns: repeat(2, 1fr);
+						gap: 12px;
+						padding: 10px;
+						
+						.data-card {
+							min-height: 110px;
+							height: auto;
+							
+							.card-content {
+								padding: 12px;
+								
+								.card-title {
+									font-size: 14px;
+									margin-bottom: 12px;
+								}
+								
+								.card-value {
+									font-size: 20px;
+									line-height: 1.1;
+								}
+								
+								.card-unit {
+									font-size: 15px;
+								}
+							}
+						}
+					}
+					
+					// 平板竖屏/手机横屏优化(480px-767px)
+					@media screen and (min-width: 480px) and (max-width: 767px) {
+						grid-template-columns: repeat(2, 1fr);
+						gap: 10px;
+						padding: 8px;
+						
+						.data-card {
+							min-height: 100px;
+							height: auto;
+							
+							.card-content {
+								padding: 10px;
+								
+								.card-title {
+									font-size: 13px;
+									margin-bottom: 10px;
+								}
+								
+								.card-value {
+									font-size: 32px;
+									line-height: 1.1;
+								}
+								
+								.card-unit {
+									font-size: 13px;
+								}
+							}
+						}
+					}
+					
+					// 手机竖屏优化(小于480px)
+					@media screen and (max-width: 479px) {
+						grid-template-columns: 1fr;
+						gap: 10px;
+						padding: 8px;
+						
+						.data-card {
+							min-height: 90px;
+							height: auto;
+							
+							.card-content {
+								padding: 10px;
+								
+								.card-title {
+									font-size: 12px;
+									margin-bottom: 8px;
+								}
+								
+								.card-value {
+									font-size: 18px;
+									line-height: 1.1;
+								}
+								
+								.card-unit {
+									font-size: 12px;
+								}
+							}
+						}
+					}
 				}
 
 				// .zhibiao > div {

+ 72 - 5
src/views/system/screenconsole/component/BorrowRankingList.vue

@@ -42,16 +42,16 @@
     </div>
 
     <el-table v-if="rankingData.length" :data="rankingData" style="width: 100%; margin-top: 20px; height: 350px"
-      max-height="500">
+      max-height="500" class="ranking-table">
       <el-table-column type="index" label="排名" width="60" />
-      <el-table-column prop="device_name" label="设备名" />
+      <el-table-column prop="device_name" label="设备名" min-width="120" />
       <!-- <el-table-column prop="device_name" label="标签名">
         <template #default="scope">
           <el-tag v-for="tag in scope.row.device_tags" :key="tag" :type="tag.type">{{ tag.name }}</el-tag>
         </template>
       </el-table-column> -->
-      <el-table-column prop="device_code" label="设备编号" />
-      <el-table-column prop="borrow_count" label="借用次数" />
+      <el-table-column prop="device_code" label="设备编号" min-width="120" />
+      <el-table-column prop="borrow_count" label="借用次数" min-width="100" />
       <!-- <el-table-column prop="total_quantity" label="累计借用册数" /> -->
     </el-table>
 
@@ -280,7 +280,18 @@ onMounted(() => {
   width: 100%;
   padding: 16px;
   background: #fff;
- border-radius: 20px;
+  border-radius: 20px;
+  box-sizing: border-box;
+  
+  @media (max-width: 768px) {
+    padding: 12px;
+    border-radius: 15px;
+  }
+  
+  @media (max-width: 576px) {
+    padding: 10px;
+    border-radius: 12px;
+  }
 }
 
 .panel-title {
@@ -295,6 +306,14 @@ onMounted(() => {
   font-weight: 600;
   color: #2c3e50;
   position: relative;
+  
+  @media (max-width: 768px) {
+    font-size: 18px;
+  }
+  
+  @media (max-width: 576px) {
+    font-size: 16px;
+  }
 }
 
 .panel-title .more {
@@ -309,6 +328,27 @@ onMounted(() => {
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: 16px;
+  
+  @media (max-width: 768px) {
+    margin-bottom: 12px;
+    
+    :deep(.el-row) {
+      margin: 0 !important;
+    }
+    
+    :deep(.el-col) {
+      margin-bottom: 10px;
+    }
+  }
+  
+  @media (max-width: 576px) {
+    margin-bottom: 10px;
+    
+    :deep(.el-select),
+    :deep(.el-date-picker) {
+      width: 100% !important;
+    }
+  }
 }
 
 .empty-tip {
@@ -385,4 +425,31 @@ onMounted(() => {
   font-size: 14px;
   color: #606266;
 }
+
+/* 表格响应式优化 */
+.ranking-table {
+  @media (max-width: 768px) {
+    :deep(.el-table__body-wrapper) {
+      overflow-x: auto;
+    }
+    
+    :deep(.el-table__header-wrapper) {
+      overflow-x: auto;
+    }
+  }
+  
+  @media (max-width: 576px) {
+    font-size: 14px;
+    
+    :deep(.el-table th),
+    :deep(.el-table td) {
+      padding: 8px 5px;
+      font-size: 12px;
+    }
+    
+    :deep(.el-table-column--index) {
+      width: 50px !important;
+    }
+  }
+}
 </style>

+ 57 - 6
src/views/system/screenconsole/component/BorrowTrendsChart.vue

@@ -16,8 +16,8 @@
         </button>
       </div>
   
-      <div v-if="hasData">
-        <v-chart :option="chartOption" autoresize style="height: 360px;" />
+      <div v-if="hasData" class="chart-wrapper">
+        <v-chart :option="chartOption" autoresize class="chart" />
       </div>
       <div v-else class="empty-tip">暂无数据</div>
     </div>
@@ -276,6 +276,17 @@
     padding: 16px;
     background: #fff;
     border-radius: 20px;
+    box-sizing: border-box;
+    
+    @media (max-width: 768px) {
+      padding: 12px;
+      border-radius: 15px;
+    }
+    
+    @media (max-width: 576px) {
+      padding: 10px;
+      border-radius: 12px;
+    }
   }
 
   .panel-title {
@@ -285,13 +296,27 @@
     margin-bottom: 16px;
   }
   .panel-title .title {
-     font-size: 20px;
-  font-weight: 600;
-  color: #2c3e50;
-  position: relative;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2c3e50;
+    position: relative;
+    
+    @media (max-width: 768px) {
+      font-size: 18px;
+    }
+    
+    @media (max-width: 576px) {
+      font-size: 16px;
+    }
   }
   .filter-bar {
     margin-bottom: 10px;
+    
+    @media (max-width: 576px) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
   }
   .filter-bar button {
     margin-right: 8px;
@@ -299,6 +324,14 @@
     border: none;
     background: #eee;
     cursor: pointer;
+    
+    @media (max-width: 576px) {
+      margin-right: 0;
+      padding: 5px 10px;
+      font-size: 14px;
+      flex: 1;
+      min-width: calc(33.333% - 6px);
+    }
   }
   .filter-bar button.active {
     background: #409eff;
@@ -309,5 +342,23 @@
     color: #999;
     padding: 20px;
   }
+  
+  .chart-wrapper {
+    width: 100%;
+    height: 360px;
+    
+    @media (max-width: 768px) {
+      height: 300px;
+    }
+    
+    @media (max-width: 576px) {
+      height: 250px;
+    }
+  }
+  
+  .chart {
+    width: 100%;
+    height: 100%;
+  }
   </style>
   

+ 60 - 2
src/views/system/screenconsole/component/InfoCards.vue

@@ -141,6 +141,16 @@ function handleClick(item: any) {
   margin-bottom: 18px;
   color: #2c3e50;
   position: relative;
+  
+  @media (max-width: 768px) {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+  
+  @media (max-width: 576px) {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
 }
 
 .info-title::after {
@@ -156,9 +166,22 @@ function handleClick(item: any) {
 
 .info-cards {
   background: #fff;
-  height: 330px;
+  min-height: 330px;
+  height: auto;
   border-radius: 20px;
   padding: 20px;
+  box-sizing: border-box;
+  
+  @media (max-width: 768px) {
+    padding: 15px;
+    min-height: auto;
+    border-radius: 15px;
+  }
+  
+  @media (max-width: 576px) {
+    padding: 12px;
+    border-radius: 12px;
+  }
 }
 
 .card-grid {
@@ -200,8 +223,30 @@ function handleClick(item: any) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 30px;
-  height: 200px;
+  min-height: 200px;
+  height: auto;
   align-content: start;
+  
+  @media (max-width: 1200px) {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 20px;
+  }
+  
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 15px;
+    min-height: auto;
+  }
+  
+  @media (max-width: 576px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
 }
 
 .stat-card {
@@ -291,11 +336,24 @@ function handleClick(item: any) {
   font-weight: 700;
   color: #2c3e50;
   line-height: 1;
+  
+  @media (max-width: 768px) {
+    font-size: 18px;
+  }
+  
+  @media (max-width: 576px) {
+    font-size: 16px;
+  }
 }
 
 .stat-label {
   font-size: 12px;
   color: #7f8c8d;
   margin-top: 5px;
+  
+  @media (max-width: 576px) {
+    font-size: 11px;
+    margin-top: 3px;
+  }
 }
 </style>

+ 55 - 2
src/views/system/screenconsole/component/StatusCards.vue

@@ -124,6 +124,16 @@ function handleClick(item: any) {
   margin-bottom: 18px;
   color: #2c3e50;
   position: relative;
+  
+  @media (max-width: 768px) {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+  
+  @media (max-width: 576px) {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
 }
 
 .info-title::after {
@@ -140,8 +150,21 @@ function handleClick(item: any) {
 .status-cards {
   background: #fff;
   padding: 20px;
-  height: 330px;
+  min-height: 330px;
+  height: auto;
   border-radius: 20px;
+  box-sizing: border-box;
+  
+  @media (max-width: 768px) {
+    padding: 15px;
+    min-height: auto;
+    border-radius: 15px;
+  }
+  
+  @media (max-width: 576px) {
+    padding: 12px;
+    border-radius: 12px;
+  }
 }
 
 .card-grid {
@@ -180,7 +203,25 @@ function handleClick(item: any) {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 30px;
-    height: 200px;
+    min-height: 200px;
+    height: auto;
+    
+    @media (max-width: 768px) {
+      gap: 20px;
+      min-height: 180px;
+    }
+    
+    @media (max-width: 576px) {
+      gap: 15px;
+      min-height: 160px;
+    }
+    
+    @media (max-width: 480px) {
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(4, auto);
+      gap: 12px;
+      min-height: auto;
+    }
 }
 .pending-item {
     display: flex;
@@ -248,6 +289,14 @@ function handleClick(item: any) {
     font-weight: 700;
     color: #2c3e50;
     line-height: 1;
+    
+    @media (max-width: 768px) {
+      font-size: 18px;
+    }
+    
+    @media (max-width: 576px) {
+      font-size: 16px;
+    }
 }
 
 .label {
@@ -257,6 +306,10 @@ function handleClick(item: any) {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    
+    @media (max-width: 576px) {
+      font-size: 11px;
+    }
 }
 
 </style>

+ 141 - 104
src/views/system/screenconsole/index.vue

@@ -2,19 +2,19 @@
 	<div class="home-container">
 		<!-- 第一行 -->
 		<el-row :gutter="15" class="home-row">
-		<el-col :span="6">
+		<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6" style="margin-bottom: 10px;">
 			<StatusCards :statusData="pendingItems" />
 		</el-col>
-		<el-col :span="18">
+		<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="18">
 			<InfoCards  :summaryData="dataSummary" />
 		</el-col>
 		</el-row>
 
 		<el-row :gutter="15" class="home-row">
-		<el-col :span="12">
+		<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="margin-bottom: 10px;">
 			<BorrowRankingList/>
 		</el-col>
-		<el-col :span="12">
+		<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
 			<BorrowTrendsChart />
 		</el-col>
 		</el-row>
@@ -538,116 +538,153 @@ const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 // 	(<any>state.myCharts).push(global.homeCharThree);
 // }
 
+// 以下代码为已注释的图表相关功能,如需使用请取消注释并确保相关依赖存在
 // 批量设置 echarts resize
-const initEchartsResizeFun = () => {
-	nextTick(() => {
-		for (let i = 0; i < state.myCharts.length; i++) {
-			setTimeout(() => {
-				(<any>state.myCharts[i]).resize();
-			}, i * 1000);
-		}
-	});
-}
-// 批量设置 echarts resize
-const initEchartsResize = () => {
-	window.addEventListener('resize', initEchartsResizeFun);
-}
-// 页面加载时
-onMounted(() => {
-	fetchApiData();
-	initEchartsResize();
-});
-// 由于页面缓存原因,keep-alive
-onActivated(() => {
-	initEchartsResizeFun();
-});
-// 监听 vuex 中的 tagsview 开启全屏变化,重新 resize 图表,防止不出现/大小不变等
-watch(
-	() => isTagsViewCurrenFull.value,
-	() => {
-		initEchartsResizeFun();
-	}
-);
-// 监听 vuex 中是否开启深色主题
-watch(
-	() => themeConfig.value.isIsDark,
-	(isIsDark) => {
-		nextTick(() => {
-			state.charts.theme = isIsDark ? 'dark' : '';
-			state.charts.bgColor = isIsDark ? 'transparent' : '';
-			state.charts.color = isIsDark ? '#dadada' : '#303133';
-			setTimeout(() => {
-				initLineChart();
-			}, 500);
-			setTimeout(() => {
-				initPieChart();
-			}, 700);
-			setTimeout(() => {
-				initBarChart();
-			}, 1000);
-		});
-	},
-	{
-		deep: true,
-		immediate: true,
-	}
-);
-// 获取API数据
-const fetchApiData = async () => {
-	/* try {
-		const res = await GetList({});
-		if (res.code === 2000) {
-			state.apiData = res.data;
-			updateHomeData(res.data);
-		}
-	} catch (error) {
-		console.error('获取统计数据失败:', error);
-	} */
-}
-// 更新首页数据
-const updateHomeData = (data: ApiData) => {
-	// 更新顶部卡片数据
-	state.homeOne[0].num1 = data.total_applications.toString();
-	state.homeOne[1].num1 = data.total_positions.toString();
-	state.homeOne[2].num1 = data.total_questions.toString();
-	state.homeOne[3].num1 = data.total_reports.toString();
-	
-	// 更新折线图数据
-	updateLineChart(data.application_trend);
-}
-// 更新折线图数据
-const updateLineChart = (trendData: Array<{date: string; count: number}>) => {
-	if (!global.homeChartOne) return;
-	
-	const option = {
-		xAxis: {
-			data: trendData.map((item: {date: string; count: number}) => item.date.substring(5)), // 只显示月-日
-		},
-		series: [
-			{
-				name: '申请数量',
-				data: trendData.map((item: {date: string; count: number}) => item.count),
-			}
-		]
-	};
-	
-	(<any>global.homeChartOne).setOption(option);
-}
+// const initEchartsResizeFun = () => {
+// 	nextTick(() => {
+// 		for (let i = 0; i < state.myCharts.length; i++) {
+// 			setTimeout(() => {
+// 				(<any>state.myCharts[i]).resize();
+// 			}, i * 1000);
+// 		}
+// 	});
+// }
+// // 批量设置 echarts resize
+// const initEchartsResize = () => {
+// 	window.addEventListener('resize', initEchartsResizeFun);
+// }
+// // 页面加载时
+// onMounted(() => {
+// 	fetchApiData();
+// 	initEchartsResize();
+// });
+// // 由于页面缓存原因,keep-alive
+// onActivated(() => {
+// 	initEchartsResizeFun();
+// });
+// // 监听 vuex 中的 tagsview 开启全屏变化,重新 resize 图表,防止不出现/大小不变等
+// watch(
+// 	() => isTagsViewCurrenFull.value,
+// 	() => {
+// 		initEchartsResizeFun();
+// 	}
+// );
+// // 监听 vuex 中是否开启深色主题
+// watch(
+// 	() => themeConfig.value.isIsDark,
+// 	(isIsDark) => {
+// 		nextTick(() => {
+// 			state.charts.theme = isIsDark ? 'dark' : '';
+// 			state.charts.bgColor = isIsDark ? 'transparent' : '';
+// 			state.charts.color = isIsDark ? '#dadada' : '#303133';
+// 			setTimeout(() => {
+// 				initLineChart();
+// 			}, 500);
+// 			setTimeout(() => {
+// 				initPieChart();
+// 			}, 700);
+// 			setTimeout(() => {
+// 				initBarChart();
+// 			}, 1000);
+// 		});
+// 	},
+// 	{
+// 		deep: true,
+// 		immediate: true,
+// 	}
+// );
+// // 获取API数据
+// const fetchApiData = async () => {
+// 	/* try {
+// 		const res = await GetList({});
+// 		if (res.code === 2000) {
+// 			state.apiData = res.data;
+// 			updateHomeData(res.data);
+// 		}
+// 	} catch (error) {
+// 		console.error('获取统计数据失败:', error);
+// 	} */
+// }
+// // 更新首页数据
+// const updateHomeData = (data: ApiData) => {
+// 	// 更新顶部卡片数据
+// 	state.homeOne[0].num1 = data.total_applications.toString();
+// 	state.homeOne[1].num1 = data.total_positions.toString();
+// 	state.homeOne[2].num1 = data.total_questions.toString();
+// 	state.homeOne[3].num1 = data.total_reports.toString();
+// 	
+// 	// 更新折线图数据
+// 	updateLineChart(data.application_trend);
+// }
+// // 更新折线图数据
+// const updateLineChart = (trendData: Array<{date: string; count: number}>) => {
+// 	if (!global.homeChartOne) return;
+// 	
+// 	const option = {
+// 		xAxis: {
+// 			data: trendData.map((item: {date: string; count: number}) => item.date.substring(5)), // 只显示月-日
+// 		},
+// 		series: [
+// 			{
+// 				name: '申请数量',
+// 				data: trendData.map((item: {date: string; count: number}) => item.count),
+// 			}
+// 		]
+// 	};
+// 	
+// 	(<any>global.homeChartOne).setOption(option);
+// }
 
 </script>
 
 <style scoped lang="scss">
 .home-container {
   padding: 20px;
+  min-height: 100vh;
+  box-sizing: border-box;
 }
+
 .home-row {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
+  
+  // 小屏幕时减少间距
+  @media (max-width: 768px) {
+    margin-bottom: 15px;
+    
+    :deep(.el-col) {
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.home-col-table {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
 }
-.home-col-table{
-	display: flex;
-	flex-wrap: wrap;
-	gap:15px;
-	flex-wrap: wrap;
+
+// 响应式断点
+@media (max-width: 576px) {
+  .home-container {
+    padding: 10px;
+  }
+  
+  .home-row {
+    margin-bottom: 10px;
+  }
+}
+
+@media (min-width: 577px) and (max-width: 768px) {
+  .home-container {
+    padding: 15px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .home-container {
+    max-width: 1920px;
+    margin: 0 auto;
+  }
 }
 
 </style>