new comment and fix picture

nginx/vue/public/css/styles.css

@@ -361,6 +361,10 @@ tr {
     width: 100%;
 }
 
+.hfill {
+    height: 100%;
+}
+
 .w-10vw {
     width: 10vw;
 }

nginx/vue/src/components/home/Collage.vue

@@ -1,16 +1,18 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
 import { Transition } from "vue";
 
 const images = [
-    "/img/memes/pidgeon.gif",
+    { url: "/img/memes/pidgeon.gif", comment: "鸟" },
-    "/img/memes/no_slip.png",
+    //{ url: "/img/memes/no_slip.png" },
-    "/img/memes/epic.jpeg",
+    //{ url: "/img/memes/epic.jpeg" },
-    "/img/bedroom/img2.png",
+    { url: "/img/bedroom/img2.png", comment: "办公桌" },
-    "/img/bedroom/img1.png",
+    { url: "/img/bedroom/img1.png", comment: "床" },
 ];
 
 const currentIndex = ref(0);
+const currentComment = computed(() => images[currentIndex.value].comment);
+const currentUrl = computed(() => images[currentIndex.value].url);
 
 function nextImage() {
     let newIndex;
@@ -32,21 +34,23 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="image-viewer" @click="nextImage">
     <Transition name="fade" mode="out-in">
-            <img
+        <div
-                :src="images[currentIndex]"
+            class="image-viewer center-text"
+            @click="nextImage"
             :key="currentIndex"
-                alt="Image Viewer"
+        >
-            />
+            <p v-if="currentComment">
-        </Transition>
+                {{ currentComment }}
+            </p>
+            <img :src="currentUrl" alt="Image Viewer" />
         </div>
+    </Transition>
 </template>
 
 <style scoped>
 .image-viewer {
     width: 100%;
-    height: 100%;
     overflow: hidden;
 }