.questionAnswerList { width: 100%; height: 100%; background: #FFFFFF; border-radius: @border-radius-base; padding: 16px 20px; } .applicationList { width: 100%; min-height: 600px; //padding-top: 10px; } .card{ padding: 16px; border: 1px solid @border-color; border-radius: @border-radius-large; min-height: 200px; overflow: auto; } .card:hover{ box-shadow: 0 0 8px rgba(0,0,0,.1); border: 1px solid @primary-color ; } .desc { height: 56px; overflow: hidden; font-weight: 300; /* 细体字 */ line-height: 20px; transition: all 0.3s; //margin-bottom: 16px; } .info-head { width: 100%; height: 35%; } .ant-select-selector { border-radius: 4px !important; background: #fff !important; height: 32px !important; //.ant-select-selection-item { // //margin-right: 8px !important; //} } .ant-select-dropdown { .ant-select-item-option-selected { background-color: @primary-color !important; color: #fff !important; } .ant-select-item-option-active { background-color: rgba(0, 123, 255, 0.1); } } // 按钮式选择器样式 .app-type-dropdown { .ant-dropdown-menu { border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 8px 0; .ant-dropdown-menu-item { padding: 8px 16px; font-size: 14px; transition: all 0.3s ease; &:hover { background-color: #f5f5f5; } &.selected { color: #1890ff; background-color: #f0f8ff; font-weight: 500; } } } } // 按钮样式优化 .app-type-button { border-radius: 16px !important; height: 32px !important; padding: 0 16px !important; font-size: 14px !important; font-weight: 400 !important; border: 1px solid #d9d9d9 !important; background-color: #fff !important; display: flex !important; align-items: center !important; gap: 8px !important; min-width: 140px !important; justify-content: space-between !important; transition: all 0.3s ease !important; &:hover { border-color: #40a9ff !important; color: #40a9ff !important; } &:focus { border-color: #1890ff !important; box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.2) !important; } } // 按钮组筛选样式 .filter-button-group { display: flex; gap: 8px; flex-wrap: wrap; .ant-btn { border-radius: 16px; height: 32px; padding: 0 16px; font-size: 14px; font-weight: 400; border: 1px solid #d9d9d9; background-color: #fff; color: #000; transition: all 0.3s ease; display: flex; align-items: center; &:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2); border-color: #40a9ff; color: #40a9ff; } // 所有选中状态的按钮都使用统一的蓝色主题 &.ant-btn-primary { background-color: #1890ff !important; border-color: #1890ff !important; color: #fff !important; font-weight: 500 !important; &:hover { background-color: #40a9ff !important; border-color: #40a9ff !important; color: #fff !important; } } // 全部按钮特殊样式 - 未选中时 &:first-child:not(.ant-btn-primary) { background-color: #f5f5f5; border-color: #d9d9d9; color: #666; &:hover { background-color: #e6f7ff; border-color: #40a9ff; color: #40a9ff; } } // 图标样式优化 .anticon { font-size: 14px; margin-right: 4px; transition: color 0.3s ease; color: #666; // 默认颜色 } // 悬停时图标颜色变化 &:hover .anticon { color: #40a9ff !important; } // 选中状态时图标颜色 &.ant-btn-primary .anticon { color: #fff !important; } // 选中状态悬停时图标颜色 &.ant-btn-primary:hover .anticon { color: #fff !important; } // 全部按钮未选中时图标颜色 &:first-child:not(.ant-btn-primary) .anticon { color: #666; } // 全部按钮悬停时图标颜色 &:first-child:not(.ant-btn-primary):hover .anticon { color: #40a9ff; } } } // 响应式处理 @media (max-width: 768px) { .filter-button-group { gap: 6px; .ant-btn { font-size: 12px; padding: 0 12px; height: 28px; } } } @media (max-width: 480px) { .filter-button-group { gap: 4px; .ant-btn { font-size: 11px; padding: 0 8px; height: 24px; border-radius: 12px; } } } // 圆形按钮样式优化 .ant-btn-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; &:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2); } .anticon { font-size: 14px; } }