.container { padding: 30rpx; background-color: #f8f8f8; min-height: 100vh; } .header { margin-bottom: 30rpx; } .title-container { display: flex; flex-direction: column; } .title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 10rpx; } .subtitle { font-size: 28rpx; color: #666; } /* 日期选择器样式 */ .date-picker-bar { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 24rpx 20rpx 0 20rpx; margin-bottom: 10rpx; border-radius: 12rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); } .date-left { display: flex; align-items: baseline; cursor: pointer; } .date-day { font-size: 64rpx; font-weight: bold; color: #222; margin-right: 16rpx; } .date-info { display: flex; flex-direction: column; font-size: 28rpx; color: #666; } .date-arrow { font-size: 24rpx; color: #bbb; margin-left: 8rpx; } .date-total { font-size: 28rpx; color: #007AFF; font-weight: bold; } /* 批量操作栏样式 */ .batch-action-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 16rpx 20rpx; margin-bottom: 20rpx; border-radius: 12rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); } .batch-btn { padding: 8rpx 20rpx; background-color: #007AFF; color: #fff; border-radius: 6rpx; font-size: 24rpx; } .action-btns { display: flex; align-items: center; } .action-btn { padding: 8rpx 20rpx; margin-right: 10rpx; background-color: #f56c6c; color: #fff; border-radius: 6rpx; font-size: 24rpx; } .action-btn:last-child { margin-right: 0; } .action-btn.disabled { background-color: #ccc; color: #fff; pointer-events: none; } .select-all-btn { padding: 8rpx 20rpx; background-color: #4CAF50; color: #fff; border-radius: 6rpx; font-size: 24rpx; } .selected-count { font-size: 24rpx; color: #666; } /* 选择框样式 */ .select-box { width: 40rpx; height: 40rpx; margin-right: 10rpx; display: flex; align-items: center; justify-content: center; position: absolute; top: 10rpx; left: 10rpx; z-index: 2; } .select-circle { width: 36rpx; height: 36rpx; border-radius: 50%; border: 2rpx solid #ccc; background-color: #fff; display: flex; align-items: center; justify-content: center; } .select-circle.selected { border-color: #007AFF; background-color: #007AFF; } .check-mark { width: 20rpx; height: 10rpx; border-left: 2rpx solid #fff; border-bottom: 2rpx solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .search-box { display: flex; margin-bottom: 30rpx; background: #fff; border-radius: 12rpx; padding: 20rpx; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05); } .search-input-wrap { flex: 1; display: flex; align-items: center; background-color: #f5f5f5; border-radius: 8rpx; padding: 0 20rpx; margin-right: 20rpx; } .search-input { flex: 1; height: 70rpx; font-size: 28rpx; padding-left: 20rpx; } .search-btn { width: 120rpx; height: 70rpx; line-height: 70rpx; font-size: 28rpx; text-align: center; background-color: #007AFF; color: #fff; border-radius: 8rpx; padding: 0; } /* 加载状态样式 */ .loading-state { text-align: center; padding: 40rpx 0; color: #999; } /* 图片网格样式 */ .image-grid { display: flex; flex-wrap: wrap; padding: 12rpx; } .image-item { width: 100%; margin-bottom: 12rpx; background: #fff; border-radius: 8rpx; overflow: hidden; box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.08); display: flex; position: relative; /* 添加相对定位 */ padding-left: 10rpx; /* 为选择框留出空间 */ } .image-item:nth-child(2n) { margin-right: 0; } .book-image { width: 180rpx; height: 180rpx; object-fit: cover; flex-shrink: 0; /* 防止图片被压缩 */ } .image-info { padding: 10rpx 12rpx; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; /* 确保flex子元素可以正确缩小 */ overflow: hidden; /* 防止内容溢出 */ } .book-name { font-size: 24rpx; color: #333; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; margin-bottom: 4rpx; width: 100%; /* 确保宽度占满父容器 */ } .book-details { display: flex; justify-content: space-between; margin-top: 3rpx; } .book-isbn, .book-price, .book-condition, .upload-time, .book-artno { font-size: 20rpx; color: #666; } .book-price { color: #ff6b00; font-weight: bold; } .book-condition { color: #007AFF; } .upload-time { color: #999; } .book-artno, .book-item-number { color: #999; font-size: 20rpx; } .book-stock { color: #4CAF50; font-size: 20rpx; font-weight: bold; } /* 空状态样式 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60rpx 0; } .empty-image { width: 200rpx; height: 200rpx; margin-bottom: 20rpx; } .empty-text { font-size: 28rpx; color: #999; } .status-value.published { color: #007aff; font-size: 24rpx; } .status-value.unpublished { color: #ff4d4f; font-size: 24rpx; } /* 添加新样式 */ .loading-more, .no-more { text-align: center; padding: 20rpx 0; color: #999; font-size: 24rpx; } .no-more { color: #666; } /* 货区选择弹窗样式 */ .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 999; } .modal-content { width: 80%; background-color: #fff; border-radius: 12rpx; overflow: hidden; max-height: 80vh; display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #eee; } .modal-title { font-size: 32rpx; font-weight: bold; color: #333; } .modal-close { font-size: 40rpx; color: #999; padding: 0 10rpx; } .modal-body { padding: 30rpx; max-height: 60vh; overflow-y: auto; } .modal-footer { display: flex; border-top: 1rpx solid #eee; } .modal-btn { flex: 1; height: 90rpx; line-height: 90rpx; text-align: center; font-size: 32rpx; } .cancel-btn { background-color: #f5f5f5; color: #333; } .confirm-btn { background-color: #007AFF; color: #fff; } /* 货区选择样式 */ .location-select-item { margin-bottom: 30rpx; } .location-label { display: block; font-size: 28rpx; color: #333; margin-bottom: 10rpx; } .location-picker-wrap { position: relative; border: 1rpx solid #ddd; border-radius: 8rpx; height: 80rpx; display: flex; align-items: center; } .picker-text { width: 100%; height: 100%; padding: 0 20rpx; display: flex; align-items: center; justify-content: space-between; font-size: 28rpx; color: #333; } .picker-text.disabled { color: #999; } .picker-arrow { font-size: 24rpx; color: #999; } .loading-indicator { position: absolute; right: 20rpx; font-size: 24rpx; color: #999; }