22

static/css/guestbook.css

@@ -1274,12 +1274,36 @@
     margin-bottom: 0;
     position: relative;
     overflow: hidden;
-    border-radius: 0;
+    border-radius: 8px;
     cursor: pointer;
     transition: transform 0.3s ease;
     box-shadow: none;
-    background-color: transparent;
+    background: rgba(255, 255, 255, 0.15);
-    min-height: 0;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    min-height: 200px;
+}
+
+/* 照片加载动画 */
+.photo-loading-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-top-color: rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    animation: photo-spin 0.8s linear infinite;
+    z-index: 1;
+}
+
+@keyframes photo-spin {
+    to {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
 }
 
 .photo-album-item:hover {

static/js/photo_album.js

@@ -101,7 +101,8 @@
                 const globalIndex = startIndex + index;
                 html += `
                     <div class="photo-album-item" onclick="window.openPhotoLightbox(${globalIndex})">
-                        <img src="${photo.src}" alt="照片 ${photo.id}" loading="lazy" onload="this.style.opacity=1">
+                        <div class="photo-loading-spinner"></div>
+                        <img src="${photo.src}" alt="照片 ${photo.id}" loading="lazy" onload="this.style.opacity=1; this.previousElementSibling.style.display='none'">
                     </div>
                 `;
             });