/* 仪表盘容器 */ .dashboard_container { padding: 20px; background: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } /* 仪表盘标题 */ .dashboard_title { font-size: 24px; font-weight: 600; color: #333; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; } /* 仪表盘区块 */ .dashboard_section { margin-bottom: 30px; background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* 区块标题 */ .section_title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 20px; display: flex; align-items: center; } /* 图表容器 */ .chart_container { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } /* 图表包装器 */ .chart_wrapper { flex: 1; min-width: 300px; height: 300px; background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } /* 卡片网格布局 */ .card_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } /* 仪表盘卡片 */ .dashboard_card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; } .dashboard_card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } /* 卡片头部 */ .card_header { padding: 15px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; } /* 卡片标题 */ .card_title { font-size: 16px; font-weight: 600; color: #333; margin: 0; } /* 卡片内容 */ .card_content { padding: 15px; } /* 进度条容器 */ .progress_container { height: 24px; background: #e9ecef; border-radius: 12px; margin-bottom: 15px; overflow: hidden; } /* 进度条 */ .progress_bar { height: 100%; background: linear-gradient(90deg, #0061f2 0%, #00a3ff 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: width 0.5s ease; min-width: 30px; } /* 进度条文本 */ .progress_text { color: white; font-weight: 600; font-size: 14px; } /* 统计详情 */ .stats_details { display: flex; justify-content: space-between; } /* 统计项 */ .stats_item { display: flex; flex-direction: column; align-items: center; } /* 统计标签 */ .stats_label { font-size: 12px; color: #6c757d; margin-bottom: 5px; } /* 统计值 */ .stats_value { font-size: 16px; font-weight: 600; color: #333; } /* 表格容器 */ .table_container { overflow-x: auto; margin-top: 10px; } /* 仪表盘表格 */ .dashboard_table { width: 100%; border-collapse: collapse; } .dashboard_table th, .dashboard_table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e9ecef; } .dashboard_table th { background: #f8f9fa; font-weight: 600; color: #495057; } .dashboard_table tr:hover { background: #f8f9fa; } /* 支局单元格 */ .branch_cell { font-weight: 600; background: #f8f9fa; } /* 状态标签 */ .status_badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; } .status_badge.good { background: #d4edda; color: #155724; } .status_badge.normal { background: #fff3cd; color: #856404; } .status_badge.bad { background: #f8d7da; color: #721c24; } /* 手风琴容器 */ .accordion_container { margin-top: 10px; } /* 手风琴项 */ .accordion_item { margin-bottom: 10px; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; } /* 手风琴头部 */ .accordion_header { padding: 15px; background: #f8f9fa; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.2s; } .accordion_header:hover { background: #e9ecef; } /* 手风琴标题 */ .accordion_title { font-size: 16px; font-weight: 600; color: #333; } /* 手风琴摘要 */ .accordion_summary { display: flex; align-items: center; gap: 15px; } /* 手风琴图标 */ .accordion_icon { font-size: 12px; color: #6c757d; transition: transform 0.2s; } /* 手风琴内容 */ .accordion_content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } /* 详情表格 */ .detail_table { width: 100%; border-collapse: collapse; } .detail_table th, .detail_table td { padding: 10px 15px; text-align: left; border-bottom: 1px solid #e9ecef; } .detail_table th { background: #f8f9fa; font-weight: 600; color: #495057; } .detail_table tr:hover { background: #f8f9fa; } /* 响应式调整 */ @media (max-width: 768px) { .card_grid { grid-template-columns: 1fr; } .dashboard_table { min-width: 600px; } .accordion_summary { flex-direction: column; align-items: flex-start; gap: 5px; } .chart_wrapper { min-width: 100%; height: 250px; } .chart_container { flex-direction: column; } }