| | |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | /* 高相似度标签 */ |
| | | /* 相似度标签 */ |
| | | .similarity-tag { |
| | | background-color: #fff3cd; |
| | | color: #856404; |
| | | font-size: 0.75rem; |
| | | padding: 2px 8px; |
| | | border-radius: 12px; |
| | | font-weight: 600; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | gap: 4px; |
| | | padding: 4px 12px; |
| | | border-radius: 12px; |
| | | font-size: 12px; |
| | | font-weight: 500; |
| | | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | /* 相似度等级样式 */ |
| | | .similarity-tag.extreme-similarity { |
| | | background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); |
| | | color: white; |
| | | box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3); |
| | | } |
| | | |
| | | .similarity-tag.high-similarity { |
| | | background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%); |
| | | color: white; |
| | | box-shadow: 0 2px 4px rgba(255, 165, 0, 0.3); |
| | | } |
| | | |
| | | .similarity-tag.normal-similarity { |
| | | background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%); |
| | | color: white; |
| | | box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3); |
| | | } |
| | | |
| | | /* 案例元信息和标签容器 */ |
| | |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | /* 空状态样式 */ |
| | | .empty-state { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 60px 20px; |
| | | text-align: center; |
| | | color: var(--gray-color); |
| | | min-height: 200px; |
| | | } |
| | | |
| | | .empty-icon { |
| | | font-size: 3rem; |
| | | margin-bottom: 20px; |
| | | color: #c1c1c1; |
| | | } |
| | | |
| | | .empty-text { |
| | | font-size: 1.1rem; |
| | | margin: 0; |
| | | color: var(--gray-color); |
| | | } |
| | | |
| | | /* 滚动条样式 */ |
| | | .cases-list::-webkit-scrollbar, |
| | | .laws-list::-webkit-scrollbar, |
| | |
| | | padding: 12px 15px; |
| | | } |
| | | } |
| | | |
| | | /* 加载更多容器 */ |
| | | .load-more-container { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | padding: 30px 0; |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | /* 加载更多按钮 */ |
| | | .load-more-btn { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | padding: 10px 24px; |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | color: white; |
| | | border: none; |
| | | border-radius: 20px; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | cursor: pointer; |
| | | box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .load-more-btn:hover { |
| | | transform: translateY(-2px); |
| | | box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); |
| | | } |
| | | |
| | | .load-more-btn:active { |
| | | transform: translateY(0); |
| | | box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); |
| | | } |
| | | |
| | | .load-more-btn i { |
| | | font-size: 16px; |
| | | transition: transform 0.3s ease; |
| | | } |
| | | |
| | | .load-more-btn:hover i { |
| | | transform: translateY(2px); |
| | | } |
| | | |
| | | /* 没有更多数据提示 */ |
| | | .no-more-data { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | padding: 10px 24px; |
| | | background: #f5f5f5; |
| | | color: #999; |
| | | border-radius: 20px; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .no-more-data i { |
| | | font-size: 16px; |
| | | color: #52c41a; |
| | | } |