/* ======================================== 固全建设OA系统 - 美观增强样式 版本: v1.0 日期: 2026-07-23 说明: 将此文件内容追加到 main.css 末尾， 或在 index.html 中引入此文件 ======================================== */ /* ===== 全局背景 ===== */ .fullscreent, .contract-container { background: #f0f5ff !important; } /* ===== 侧边栏 - 深色渐变 ===== */ .ant-layout-sider { background: linear-gradient(180deg, #1a2744 0%, #1e3a5f 100%) !important; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15); } .ant-layout-sider .ant-menu { background: transparent !important; border-right: none !important; } .ant-layout-sider .ant-menu-item, .ant-layout-sider .ant-menu-submenu-title { color: rgba(255, 255, 255, 0.65) !important; transition: all 0.25s ease !important; border-left: 3px solid transparent !important; margin-left: 0 !important; } .ant-layout-sider .ant-menu-item:hover, .ant-layout-sider .ant-menu-submenu-title:hover { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; } .ant-layout-sider .ant-menu-item-selected { color: #fff !important; background: linear-gradient(90deg, rgba(22, 119, 255, 0.25), transparent) !important; border-left-color: #4096ff !important; } .ant-layout-sider .ant-menu-item-selected::after { display: none !important; } .ant-layout-sider .ant-menu-sub { background: rgba(0, 0, 0, 0.15) !important; } /* 侧边栏子菜单背景 */ /* ===== 内容区域 ===== */ .ant-layout-content { padding: 20px !important; } /* ===== 卡片样式增强 ===== */ .main-card { background: #fff !important; border-radius: 12px !important; box-shadow: 0 2px 12px rgba(22, 119, 255, 0.06) !important; overflow: hidden; } .card-title { color: #1a1a2e !important; font-weight: 700 !important; font-size: 15px !important; display: flex !important; align-items: center !important; gap: 8px; } .card-title::before { content: ''; width: 4px; height: 16px; background: linear-gradient(180deg, #1677ff, #4096ff); border-radius: 2px; flex-shrink: 0; } /* ===== 按钮增强 ===== */ .ant-btn-primary { background: linear-gradient(135deg, #1677ff, #4096ff) !important; border: none !important; box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25) !important; transition: all 0.25s ease !important; } .ant-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(22, 119, 255, 0.35) !important; } .ant-btn-primary:active { transform: translateY(0) !important; } /* ===== 表格美化 ===== */ /* 表头渐变 */ .ant-table-thead > tr > th { background: linear-gradient(180deg, #f8faff, #f0f5ff) !important; font-weight: 600 !important; color: #1a1a2e !important; border-bottom: 2px solid #e8eef7 !important; padding: 12px 14px !important; } /* 表格行 */ .ant-table-tbody > tr > td { padding: 11px 14px !important; border-bottom: 1px solid #f5f5f5 !important; color: #4a4a4a !important; transition: all 0.2s ease !important; } .ant-table-tbody > tr { transition: all 0.2s ease !important; } /* hover效果 - 浅蓝高亮 */ .ant-table-tbody > tr:hover > td, .ant-table-tbody > tr.ant-table-row-hovered > td { background: #f0f7ff !important; } /* 表格容器圆角 */ .ant-table-wrapper { border-radius: 10px; overflow: hidden; } .ant-table { border-radius: 10px !important; overflow: hidden; } /* ===== 高亮行颜色柔化 ===== */ /* 红色高亮 - 从刺眼纯红改为柔和珊瑚红 */ .red1-highlight { background-color: rgba(255, 77, 79, 0.06) !important; } .red1-highlight:hover { background-color: rgba(255, 77, 79, 0.1) !important; } .ant-table-fixed-left .red1-highlight, .ant-table-fixed-right .red1-highlight { background-color: rgba(255, 77, 79, 0.06) !important; } .ant-table-fixed-left .red1-highlight:hover, .ant-table-fixed-right .red1-highlight:hover { background-color: rgba(255, 77, 79, 0.1) !important; } .red2-highlight { background-color: rgba(250, 140, 22, 0.08) !important; } .red2-highlight:hover { background-color: rgba(250, 140, 22, 0.12) !important; } .ant-table-fixed-left .red2-highlight, .ant-table-fixed-right .red2-highlight { background-color: rgba(250, 140, 22, 0.08) !important; } .ant-table-fixed-left .red2-highlight:hover, .ant-table-fixed-right .red2-highlight:hover { background-color: rgba(250, 140, 22, 0.12) !important; } .red3-highlight { background-color: rgba(179, 34, 34, 0.06) !important; } .red3-highlight:hover { background-color: rgba(179, 34, 34, 0.1) !important; } .ant-table-fixed-left .red3-highlight, .ant-table-fixed-right .red3-highlight { background-color: rgba(179, 34, 34, 0.06) !important; } .ant-table-fixed-left .red3-highlight:hover, .ant-table-fixed-right .red3-highlight:hover { background-color: rgba(179, 34, 34, 0.1) !important; } /* 绿色高亮 - 从荧光绿改为柔和翠绿 */ .green1-highlight { background-color: rgba(82, 196, 26, 0.06) !important; } .green1-highlight:hover { background-color: rgba(82, 196, 26, 0.1) !important; } .ant-table-fixed-left .green1-highlight, .ant-table-fixed-right .green1-highlight { background-color: rgba(82, 196, 26, 0.06) !important; } .ant-table-fixed-left .green1-highlight:hover, .ant-table-fixed-right .green1-highlight:hover { background-color: rgba(82, 196, 26, 0.1) !important; } .green2-highlight { background-color: rgba(115, 209, 61, 0.08) !important; } .green2-highlight:hover { background-color: rgba(115, 209, 61, 0.12) !important; } .ant-table-fixed-left .green2-highlight, .ant-table-fixed-right .green2-highlight { background-color: rgba(115, 209, 61, 0.08) !important; } .ant-table-fixed-left .green2-highlight:hover, .ant-table-fixed-right .green2-highlight:hover { background-color: rgba(115, 209, 61, 0.12) !important; } .green3-highlight { background-color: rgba(0, 128, 0, 0.06) !important; } .green3-highlight:hover { background-color: rgba(0, 128, 0, 0.1) !important; } .ant-table-fixed-left .green3-highlight, .ant-table-fixed-right .green3-highlight { background-color: rgba(0, 128, 0, 0.06) !important; } .ant-table-fixed-left .green3-highlight:hover, .ant-table-fixed-right .green3-highlight:hover { background-color: rgba(0, 128, 0, 0.1) !important; } /* 蓝色高亮柔化 */ .blue1-highlight { background-color: rgba(22, 119, 255, 0.06) !important; } .blue1-highlight:hover { background-color: rgba(22, 119, 255, 0.1) !important; } .ant-table-fixed-left .blue1-highlight, .ant-table-fixed-right .blue1-highlight { background-color: rgba(22, 119, 255, 0.06) !important; } .ant-table-fixed-left .blue1-highlight:hover, .ant-table-fixed-right .blue1-highlight:hover { background-color: rgba(22, 119, 255, 0.1) !important; } .blue2-highlight { background-color: rgba(135, 206, 235, 0.1) !important; } .blue2-highlight:hover { background-color: rgba(135, 206, 235, 0.15) !important; } .ant-table-fixed-left .blue2-highlight, .ant-table-fixed-right .blue2-highlight { background-color: rgba(135, 206, 235, 0.1) !important; } .ant-table-fixed-left .blue2-highlight:hover, .ant-table-fixed-right .blue2-highlight:hover { background-color: rgba(135, 206, 235, 0.15) !important; } .blue3-highlight { background-color: rgba(0, 21, 188, 0.05) !important; } .blue3-highlight:hover { background-color: rgba(0, 21, 188, 0.08) !important; } .ant-table-fixed-left .blue3-highlight, .ant-table-fixed-right .blue3-highlight { background-color: rgba(0, 21, 188, 0.05) !important; } .ant-table-fixed-left .blue3-highlight:hover, .ant-table-fixed-right .blue3-highlight:hover { background-color: rgba(0, 21, 188, 0.08) !important; } /* 黄色高亮柔化 */ .yellow1-highlight { background-color: rgba(250, 204, 21, 0.08) !important; } .yellow1-highlight:hover { background-color: rgba(250, 204, 21, 0.12) !important; } .ant-table-fixed-left .yellow1-highlight, .ant-table-fixed-right .yellow1-highlight { background-color: rgba(250, 204, 21, 0.08) !important; } .ant-table-fixed-left .yellow1-highlight:hover, .ant-table-fixed-right .yellow1-highlight:hover { background-color: rgba(250, 204, 21, 0.12) !important; } .yellow2-highlight { background-color: rgba(250, 173, 20, 0.1) !important; } .yellow2-highlight:hover { background-color: rgba(250, 173, 20, 0.15) !important; } .ant-table-fixed-left .yellow2-highlight, .ant-table-fixed-right .yellow2-highlight { background-color: rgba(250, 173, 20, 0.1) !important; } .ant-table-fixed-left .yellow2-highlight:hover, .ant-table-fixed-right .yellow2-highlight:hover { background-color: rgba(250, 173, 20, 0.15) !important; } .yellow3-highlight { background-color: rgba(255, 215, 0, 0.08) !important; } .yellow3-highlight:hover { background-color: rgba(255, 215, 0, 0.12) !important; } .ant-table-fixed-left .yellow3-highlight, .ant-table-fixed-right .yellow3-highlight { background-color: rgba(255, 215, 0, 0.08) !important; } .ant-table-fixed-left .yellow3-highlight:hover, .ant-table-fixed-right .yellow3-highlight:hover { background-color: rgba(255, 215, 0, 0.12) !important; } /* 紫色高亮柔化 */ .usage-highlight { background-color: rgba(114, 46, 209, 0.05) !important; } .usage-highlight:hover { background-color: rgba(114, 46, 209, 0.08) !important; } .ant-table-fixed-left .usage-highlight, .ant-table-fixed-right .usage-highlight { background-color: rgba(114, 46, 209, 0.05) !important; } .ant-table-fixed-left .usage-highlight:hover, .ant-table-fixed-right .usage-highlight:hover { background-color: rgba(114, 46, 209, 0.08) !important; } /* highlight通用类柔化 */ .highlight { background-color: rgba(255, 77, 79, 0.06) !important; } /* ===== beautiful-table 增强 ===== */ .beautiful-table { border-radius: 10px !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important; } .beautiful-table thead th { background: linear-gradient(180deg, #f8faff, #f0f5ff) !important; color: #1a1a2e !important; font-weight: 600 !important; border-bottom: 2px solid #e8eef7 !important; padding: 12px 16px !important; } .beautiful-table tbody td { border-bottom: 1px solid #f5f5f5 !important; color: #4a4a4a !important; padding: 11px 16px !important; transition: all 0.2s ease !important; } .beautiful-table tbody tr { transition: all 0.2s ease !important; } .beautiful-table tbody tr:hover { background-color: #f0f7ff !important; } .beautiful-table tbody tr:nth-child(2n) { background-color: #fcfcff !important; } /* ===== 标签样式增强 ===== */ .ant-tag { border-radius: 6px !important; font-weight: 500 !important; padding: 2px 10px !important; border: none !important; } .ant-tag-blue { background: rgba(22, 119, 255, 0.1) !important; color: #1677ff !important; } .ant-tag-green { background: rgba(82, 196, 26, 0.1) !important; color: #52c41a !important; } .ant-tag-red { background: rgba(255, 77, 79, 0.1) !important; color: #ff4d4f !important; } .ant-tag-orange { background: rgba(250, 140, 22, 0.1) !important; color: #fa8c16 !important; } .ant-tag-gold { background: rgba(250, 173, 20, 0.1) !important; color: #d48806 !important; } .ant-tag-purple { background: rgba(114, 46, 209, 0.1) !important; color: #722ed1 !important; } .ant-tag-cyan { background: rgba(19, 194, 194, 0.1) !important; color: #13c2c2 !important; } /* ===== 分页器美化 ===== */ .ant-pagination .ant-pagination-item { border-radius: 6px !important; border: 1px solid #e8eef7 !important; transition: all 0.2s ease !important; min-width: 32px !important; height: 32px !important; line-height: 30px !important; } .ant-pagination .ant-pagination-item:hover { border-color: #4096ff !important; } .ant-pagination .ant-pagination-item a { color: #4a4a4a !important; } .ant-pagination .ant-pagination-item:hover a { color: #1677ff !important; } .ant-pagination .ant-pagination-item-active { background: linear-gradient(135deg, #1677ff, #4096ff) !important; border-color: transparent !important; } .ant-pagination .ant-pagination-item-active a { color: #fff !important; } .ant-pagination .ant-pagination-prev .ant-pagination-item-link, .ant-pagination .ant-pagination-next .ant-pagination-item-link { border-radius: 6px !important; border: 1px solid #e8eef7 !important; transition: all 0.2s ease !important; } .ant-pagination .ant-pagination-prev:hover .ant-pagination-item-link, .ant-pagination .ant-pagination-next:hover .ant-pagination-item-link { border-color: #4096ff !important; color: #1677ff !important; } /* ===== 详情页网格增强 ===== */ .detail-item span { background: #fafcff !important; border: 1px solid #eef2f7 !important; border-radius: 6px !important; transition: all 0.2s ease !important; } .detail-item span:hover { background: #f0f7ff !important; border-color: #4096ff !important; box-shadow: 0 2px 8px rgba(22, 119, 255, 0.08) !important; } .detail-item label { color: #8c8c8c !important; font-weight: 500 !important; } .text-amount { color: #ff4d4f !important; font-weight: 700 !important; } .text-highlight { color: #1677ff !important; font-weight: 600 !important; } /* 备注区域 */ .remark-section { background-color: #f8faff !important; border-left: 4px solid #1677ff !important; border-radius: 8px !important; } .section-title { color: #1a1a2e !important; font-weight: 700 !important; border-bottom: 2px solid #e8eef7 !important; } /* ===== 弹窗美化 ===== */ .ant-modal-content { border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; } .ant-modal-header { border-bottom: 1px solid #f0f0f0 !important; padding: 16px 24px !important; } .ant-modal-title { font-weight: 700 !important; color: #1a1a2e !important; } /* ===== 表单增强 ===== */ .form-item-bordered { border: 1px solid #e8eef7 !important; border-radius: 8px !important; transition: all 0.2s ease !important; } .form-item-bordered:hover { border-color: #4096ff !important; box-shadow: 0 2px 8px rgba(22, 119, 255, 0.06) !important; } /* ===== 输入框增强 ===== */ .ant-input, .ant-input-affix-wrapper { border-radius: 8px !important; border-color: #e8eef7 !important; transition: all 0.2s ease !important; } .ant-input:hover, .ant-input-affix-wrapper:hover { border-color: #4096ff !important; } .ant-input:focus, .ant-input-affix-wrapper-focused { border-color: #1677ff !important; box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1) !important; } /* ===== 滚动条美化 ===== */ .ant-table-body::-webkit-scrollbar { width: 6px; height: 6px; } .ant-table-body::-webkit-scrollbar-track { background: transparent; } .ant-table-body::-webkit-scrollbar-thumb { background: #c7c7c7; border-radius: 3px; } .ant-table-body::-webkit-scrollbar-thumb:hover { background: #4096ff; } /* 全局滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f0f0f0; } ::-webkit-scrollbar-thumb { background: #c7c7c7; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #4096ff; } /* ===== 布局框架增强 ===== */ .full-height-layout { background: #f0f5ff !important; padding: 10px 8px !important; } .full-height-layout .layout-header { padding: 10px 12px !important; } .full-height-layout .layout-footer { border-top: 1px solid #e8eef7 !important; } /* ===== 响应式网格增强 ===== */ .responsive-grid-header { color: #1a1a2e !important; font-weight: 700 !important; } /* ===== 加载状态美化 ===== */ .ant-spin-dot-item { background-color: #1677ff !important; } /* ===== Message提示美化 ===== */ .ant-message-notice-content { border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; } /* ===== 移动端适配 ===== */ @media (max-width: 768px) { .ant-layout-content { padding: 12px !important; } .main-card { border-radius: 8px !important; } .ant-table-thead > tr > th { padding: 10px 8px !important; font-size: 12px !important; } .ant-table-tbody > tr > td { padding: 8px !important; font-size: 12px !important; } }