| | |
| | | <style scoped> |
| | | /* 基础样式 */ |
| | | .container { |
| | | padding: 10px; |
| | | padding: 20px; |
| | | padding-bottom: 120px; /* 为固定按钮留出更多空间,避免遮盖检验项目 */ |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | } |
| | |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | margin: 25px 0; |
| | | } |
| | | |
| | | |
| | | .inspection-table table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | } |
| | | |
| | | |
| | | .inspection-table th { |
| | | background-color: #f8f9fa; |
| | | color: #34495e; |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | color: white; |
| | | padding: 12px 15px; |
| | | font-weight: bold; |
| | | text-align: left; |
| | | border: 1px solid #ddd; |
| | | text-align: center; |
| | | border: none; |
| | | } |
| | | |
| | | |
| | | .inspection-table td { |
| | | padding: 12px 15px; |
| | | text-align: left; |
| | | border: 1px solid #ddd; |
| | | border: none; |
| | | } |
| | | |
| | | |
| | | .inspection-table tr:nth-child(even) { |
| | | background-color: #f9f9f9; |
| | | } |
| | | |
| | | |
| | | .inspection-table tr:hover { |
| | | background-color: #f1f5f9; |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | /* 水印样式 */ |
| | | .watermark { |
| | | position: absolute; |
| | | font-size: 40px; |
| | | font-size: 32px; |
| | | font-weight: bold; |
| | | opacity: 1; |
| | | opacity: 0.3; |
| | | z-index: 1; |
| | | pointer-events: none; |
| | | transform: rotate(-15deg); |
| | |
| | | left: 50%; |
| | | transform: translate(-50%, -50%) rotate(-15deg); |
| | | } |
| | | |
| | | |
| | | .watermark.approved { |
| | | color: #2ecc71; |
| | | } |
| | | |
| | | |
| | | .watermark.rejected { |
| | | color: #e74c3c; |
| | | } |
| | | |
| | | |
| | | .watermark.pending { |
| | | color: #f39c12; |
| | | } |
| | |
| | | |
| | | /* 操作按钮 */ |
| | | .action-buttons { |
| | | position: fixed; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | background-color: white; |
| | | border-top: 1px solid #e9ecef; |
| | | padding: 12px; |
| | | box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); |
| | | z-index: 1000; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | margin-bottom: 20px; |
| | | flex-wrap: wrap; |
| | | gap: 8px; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | |
| | | .action-btn { |
| | | padding: 12px 20px; |
| | | background-color: #ecf0f1; |
| | | color: #34495e; |
| | | padding: 12px 15px; |
| | | border: none; |
| | | border-radius: 6px; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | cursor: pointer; |
| | | transition: all 0.2s; |
| | | font-size: 12px; |
| | | font-weight: 500; |
| | | transition: all 0.3s ease; |
| | | text-align: center; |
| | | min-height: 44px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | |
| | | .action-btn:hover { |
| | | background-color: #d5dbdb; |
| | | transform: translateY(-1px); |
| | | } |
| | | |
| | | .action-btn.primary { |
| | | background-color: #3498db; |
| | | color: white; |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | .action-btn.primary:hover { |
| | | background-color: #2980b9; |
| | | } |
| | | |
| | | .action-btn.secondary { |
| | | background-color: #95a5a6; |
| | | color: white; |
| | | background-color: #ecf0f1; |
| | | color: #34495e; |
| | | } |
| | | |
| | | |
| | | .action-btn.secondary:hover { |
| | | background-color: #d5dbdb; |
| | | } |
| | | |
| | | .action-btn.danger { |
| | | background-color: #e74c3c; |
| | | color: white; |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | .action-btn.danger:hover { |
| | | background-color: #c0392b; |
| | | } |
| | | |
| | | .action-btn.warning { |
| | | background-color: #f39c12; |
| | | color: white; |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | .action-btn.warning:hover { |
| | | background-color: #e67e22; |
| | | } |
| | | |
| | | .action-btn.success { |
| | | background-color: #2ecc71; |
| | | color: white; |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | .action-btn.success:hover { |
| | | background-color: #27ae60; |
| | | } |
| | | |
| | | .action-btn.info { |
| | | background-color: #17a2b8; |
| | | color: white; |
| | | color: #fff; |
| | | } |
| | | |
| | | .action-btn.info:hover { |
| | | background-color: #138496; |
| | | } |
| | | |
| | | .action-btn.small { |
| | | padding: 6px 12px; |
| | | padding: 10px 12px; |
| | | font-size: 12px; |
| | | min-height: 44px; |
| | | white-space: nowrap; |
| | | flex-shrink: 0; |
| | | min-width: 80px; |
| | | max-width: 120px; |
| | | } |
| | | |
| | | /* 弹出框样式 */ |
| | |
| | | |
| | | /* 响应式设计 */ |
| | | @media (max-width: 768px) { |
| | | .container { |
| | | padding-bottom: 120px; /* 为固定按钮留出空间,避免遮盖检验项目 */ |
| | | } |
| | | |
| | | .info-grid { |
| | | grid-template-columns: 1fr; |
| | | } |
| | | |
| | | .action-buttons { |
| | | flex-direction: column; |
| | | flex-direction: row; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 8px; |
| | | gap: 6px; |
| | | } |
| | | |
| | | .action-btn { |
| | | min-width: 70px; |
| | | max-width: 100px; |
| | | padding: 8px 10px; |
| | | font-size: 11px; |
| | | min-height: 40px; |
| | | } |
| | | |
| | | .action-btn.small { |
| | | min-width: 70px; |
| | | max-width: 100px; |
| | | padding: 8px 10px; |
| | | font-size: 11px; |
| | | min-height: 40px; |
| | | } |
| | | |
| | | /* 附件弹窗响应式 */ |
| | |
| | | .attachment-icon { |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 480px) { |
| | | |
| | | .attachment-popup-content { |
| | | padding: 16px; |
| | | } |