/* 订单页面样式 */ .order-card { margin-bottom: 20px; border: 1px solid #dee2e6; border-radius: 8px; transition: box-shadow 0.3s ease; } .order-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .order-header { background-color: #f8f9fa; padding: 15px; border-bottom: 1px solid #dee2e6; border-radius: 8px 8px 0 0; } .order-item { padding: 15px; border-bottom: 1px solid #f0f0f0; } .order-item:last-child { border-bottom: none; } .order-footer { background-color: #f8f9fa; padding: 15px; border-top: 1px solid #dee2e6; border-radius: 0 0 8px 8px; } .status-badge { font-size: 0.85em; padding: 4px 8px; } .order-amount { color: #e74c3c; font-weight: bold; font-size: 1.1em; } /* 强制限制商品图片尺寸 - 多重选择器确保优先级 */ .product-image, img.product-image, .order-item .product-image, .order-item img.product-image { width: 80px !important; height: 80px !important; object-fit: cover !important; border-radius: 4px !important; display: block !important; max-width: 80px !important; max-height: 80px !important; min-width: 80px !important; min-height: 80px !important; } /* 防止任何外部样式影响 */ .col-md-2 .product-image, .order-item .col-md-2 img { width: 80px !important; height: 80px !important; object-fit: cover !important; border-radius: 4px !important; } /* 导航标签样式 */ .nav-pills .nav-link { border-radius: 20px; padding: 0.5rem 1rem; margin-right: 0.5rem; transition: all 0.3s ease; } .nav-pills .nav-link:hover { background-color: #e9ecef; color: #495057; } .nav-pills .nav-link.active { background-color: #007bff; color: white; } /* 空状态样式 */ .empty-state { padding: 3rem 0; } .empty-state i { opacity: 0.5; } /* 分页样式 */ .pagination { margin-top: 2rem; } .page-link { color: #007bff; border-color: #dee2e6; } .page-link:hover { color: #0056b3; background-color: #e9ecef; border-color: #dee2e6; } .page-item.active .page-link { background-color: #007bff; border-color: #007bff; } /* 按钮组样式 */ .btn-group .btn { margin-right: 0.5rem; } .btn-group .btn:last-child { margin-right: 0; } /* 响应式设计 */ @media (max-width: 768px) { .order-header .row, .order-footer .row { flex-direction: column; } .order-header .col-md-3, .order-footer .col-md-6 { margin-bottom: 0.5rem; text-align: left !important; } .order-item .row { flex-direction: column; text-align: center; } .order-item .col-md-2, .order-item .col-md-6 { margin-bottom: 1rem; } .nav-pills { flex-wrap: wrap; } .nav-pills .nav-link { margin-bottom: 0.5rem; font-size: 0.9rem; } }