空库位数

src/views/modules/dashboard/warehouse-3d-board.vue

@@ -119,6 +119,16 @@
                   </div>
                 </div>
               </div>
+              <!-- 空库位数（突出显示） -->
+              <div class="empty-total-section">
+                <div class="pallet-total-item">
+                  <div class="total-icon">📦</div>
+                  <div class="total-info">
+                    <div class="total-label">空库位数</div>
+                    <div class="total-value">{{ availableSlots - emptyPalletTotal }}</div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1838,6 +1848,53 @@ export default {
       }
     }
 
+    /* 空托盘总数区域 */
+    .empty-total-section {
+      .pallet-total-item {
+        padding: 1px 16px;
+        background: linear-gradient(135deg, rgba(192, 244, 181, 0.15) 0%, rgba(198, 230, 177, 0.15) 100%);
+        border: 2px solid rgb(197, 217, 237);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25);
+          border-color: rgb(197, 217, 237);
+        }
+
+        .total-icon {
+          font-size: 20px;
+          opacity: 0.95;
+        }
+
+        .total-info {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .total-label {
+            font-size: 13px;
+            font-weight: 600;
+            color: #c5d9ed;
+            letter-spacing: 1px;
+          }
+
+          .total-value {
+            font-size: 20px;
+            font-weight: bold;
+            color: #c5d9ed;
+            text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
+          }
+        }
+      }
+    }
+
     /* 分类明细区域 */
     .pallet-detail-section {
       margin-left: 5px;