Add: 点击动态中的图片可以放大显示

src/views/MeetPandaFirstPageView.vue

@@ -60,7 +60,8 @@
                   :key="index" 
                   :src="image" 
                   :alt="`图片 ${index + 1}`" 
-                  class="dynamic-image" 
+                  class="dynamic-image"
+                  @click="openImagePreview(image)"
                 />
               </div>
             </div>
@@ -78,6 +79,11 @@
         </div>
       </div>
     </div>
+    
+    <div v-if="previewImage" class="image-preview-overlay" @click="closeImagePreview">
+      <img :src="previewImage" class="preview-image" @click.stop />
+      <button class="close-preview-btn" @click="closeImagePreview">✕</button>
+    </div>
   </div>
 </template>
 
@@ -229,6 +235,16 @@ const likeDynamic = (dynamic) => {
 const showComments = (dynamic) => {
   console.log('查看评论：', dynamic.userName)
 }
+
+const previewImage = ref(null)
+
+const openImagePreview = (image) => {
+  previewImage.value = image
+}
+
+const closeImagePreview = () => {
+  previewImage.value = null
+}
 </script>
 
 <style scoped>
@@ -581,4 +597,48 @@ const showComments = (dynamic) => {
   font-size: 14px;
   font-weight: 600;
 }
+
+.image-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  cursor: pointer;
+}
+
+.preview-image {
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+  border-radius: 8px;
+  cursor: default;
+}
+
+.close-preview-btn {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.close-preview-btn:hover {
+  background-color: white;
+  transform: scale(1.1);
+}
 </style>