#root { width: 100%; height: 100vh; margin: 0; padding: 0; } /* 应用容器 */ .app-container { display: flex; flex-direction: column; height: 100vh; background-color: #f5f5f5; } /* 头部样式 */ .app-header { background: #fff; padding: 0 20px; border-bottom: 1px solid #e8e8e8; display: flex; align-items: center; justify-content: space-between; height: 60px; } .app-header h1 { margin: 0; color: #333; font-size: 20px; } /* 内容区域 */ .app-content { display: flex; flex: 1; overflow: hidden; } /* 左侧控制面板 */ .control-panel { width: 300px; background: #fff; border-right: 1px solid #e8e8e8; padding: 20px; overflow-y: auto; } /* 控制卡片 */ .control-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 16px; margin-bottom: 16px; } .control-card h3 { margin: 0 0 16px 0; color: #333; font-size: 16px; } /* 表单组 */ .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; } .form-select { width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; background: #fff; } .form-select:focus { outline: none; border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); } /* 按钮组 */ .button-group { display: flex; gap: 8px; margin-bottom: 16px; } /* 按钮样式 */ .btn { padding: 8px 16px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.3s; background: #fff; color: #333; } .btn:hover:not(:disabled) { border-color: #1890ff; color: #1890ff; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: #1890ff; border-color: #1890ff; color: #fff; flex: 1; } .btn-primary:hover:not(:disabled) { background: #40a9ff; border-color: #40a9ff; color: #fff; } .btn-danger { background: #ff4d4f; border-color: #ff4d4f; color: #fff; flex: 1; } .btn-danger:hover:not(:disabled) { background: #ff7875; border-color: #ff7875; color: #fff; } .btn-success { background: #52c41a; border-color: #52c41a; color: #fff; } .btn-success:hover:not(:disabled) { background: #73d13d; border-color: #73d13d; color: #fff; } .btn-secondary { background: #f5f5f5; border-color: #d9d9d9; color: #333; } .btn-secondary:hover:not(:disabled) { background: #e6e6e6; border-color: #bfbfbf; color: #333; } /* 状态信息 */ .status-info p { margin: 8px 0; color: #666; font-size: 14px; } /* 右侧内容区域 */ .content-area { flex: 1; padding: 20px; overflow-y: auto; position: relative; } /* 数据卡片 */ .data-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 20px; } .data-card h3 { margin: 0 0 16px 0; color: #333; font-size: 18px; } .data-card p { margin: 10px 0; color: #666; font-size: 14px; } /* 表格容器 */ .table-container { overflow-x: auto; } /* 数据表格 */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th, .data-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid #e8e8e8; } .data-table th { background: #fafafa; font-weight: 600; color: #333; } .data-table tr:hover { background: #f5f5f5; } /* 空状态 */ .empty-state { text-align: center; padding: 40px; color: #999; } .empty-state p { margin: 0; font-size: 16px; } /* 加载遮罩 */ .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; } .loading-spinner { padding: 20px; background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; color: #666; } .ant-btn[icon-type='setting'], .ant-btn-setting, .ant-btn-setting:active, .ant-btn-setting:focus { background: #fff !important; border-color: #d9d9d9 !important; color: #333 !important; } .ant-btn[icon-type='setting']:hover, .ant-btn-setting:hover { background: #e6e6e6 !important; border-color: #bfbfbf !important; color: #333 !important; } /* 强制Antd按钮为普通圆角矩形风格 */ /*.ant-btn, .ant-btn-default {*/ /* border-radius: 6px !important;*/ /* border-style: solid !important;*/ /* border-width: 1px !important;*/ /* box-shadow: none !important;*/ /* background: #fff !important;*/ /* color: #333 !important;*/ /* border-color: #d9d9d9 !important;*/ /*}*/ /*.ant-btn:hover, .ant-btn-default:hover {*/ /* background: #e6e6e6 !important;*/ /* color: #333 !important;*/ /* border-color: #bfbfbf !important;*/ /*}*/ /*.ant-btn .anticon {*/ /* color: #333 !important;*/ /*}*/