* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // ==================== 全局滚动条样式优化 ==================== // Webkit 滚动条基础样式 ::-webkit-scrollbar { width: 10px; height: 10px; } // 滚动条轨道 ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.03); border-radius: 8px; margin: 4px; } // 滚动条滑块 - 渐变色设计 ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d9d9d9 0%, #bfbfbf 100%); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); &:hover { background: linear-gradient(180deg, #c0c0c0 0%, #a6a6a6 100%); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } &:active { background: linear-gradient(180deg, #a6a6a6 0%, #8c8c8c 100%); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } } // 滚动条两端按钮 ::-webkit-scrollbar-button { display: none; } // 滚动条角落 ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.03); border-radius: 8px; } // Firefox 滚动条样式 * { scrollbar-width: thin; scrollbar-color: #d4d4d4 rgba(0, 0, 0, 0.03); } #app { min-height: 100vh; } .pages { flex: 1; display: flex; flex-direction: column; background-color: #ffffff; .tool-bar { padding: 12px 16px; background-color: #fff; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; gap: 16px; .left-panel { flex: 1; display: flex; align-items: center; gap: 12px; overflow-x: auto; :deep(.ant-form) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1; } :deep(.ant-form-item) { margin-bottom: 0; } :deep(.ant-form-item-label) { min-width: 70px; } } .right-panel { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } // 按钮组样式 .button-group { display: flex; gap: 8px; } // 搜索输入框样式 :deep(.ant-input), :deep(.ant-select-selector) { border-radius: 4px; } // 按钮样式优化 :deep(.ant-btn) { border-radius: 4px; transition: all 0.3s ease; &:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } &:active { transform: translateY(0); } } // 主按钮特殊样式 :deep(.ant-btn-primary) { background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); border: none; &:hover { background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%); } } // 危险按钮样式 :deep(.ant-btn-dangerous) { &:hover { background: #ff4d4f; border-color: #ff4d4f; color: #fff; } } } }