From 64b377b84dee85854f53b8857740ff7dfbc0c154 Mon Sep 17 00:00:00 2001
From: youzi <2410633923@qq.com>
Date: Sun, 28 Dec 2025 21:12:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96Gallery=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E7=80=91=E5=B8=83=E6=B5=81=E9=97=B4=E8=B7=9D=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87=E9=98=B4=E5=BD=B1=E5=92=8C?=
 =?UTF-8?q?=E5=9C=86=E8=A7=92=EF=BC=8C=E6=98=BE=E7=A4=BA=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=92=8C=E5=88=86=E4=BA=AB=E8=80=85=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Gallery.vue | 69 ++++++++++++++++++++++++-------------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/views/Gallery.vue b/src/views/Gallery.vue
index e0aa59f..c81e509 100644
--- a/src/views/Gallery.vue
+++ b/src/views/Gallery.vue
@@ -1,37 +1,38 @@
 <template>
   <!-- <PerfectScrollbar ref="scrollbar" @ps-scroll-y="handleScroll"> -->
-    <div ref="myCon" class="py-5 px-[10%]">
-      <n-input class="my-4 !w-[90%] ml-[5%]" round size="large" v-model:value="kw" @keyup.enter="onSearch" placeholder="请输入关键字">
-        <template #suffix>
-          <n-icon size="large">
-            <icon-search />
-          </n-icon>
-        </template>
-      </n-input>
+  <div ref="myCon" class="py-5 px-[10%]">
+    <n-input class="my-4 !w-[90%] ml-[5%]" round size="large" v-model:value="kw" @keyup.enter="onSearch"
+      placeholder="请输入关键字">
+      <template #suffix>
+        <n-icon size="large">
+          <icon-search />
+        </n-icon>
+      </template>
+    </n-input>
 
-      <!-- <div v-infinite-scroll="loadMore"> -->
-      <Waterfall ref="waterfall" :list="fileList"  :gutter="gutter" :columns="column" img-selector="url"
-        animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300" backgroundColor="transparent"> >
-        <template #item="{ item }">
+    <!-- <div v-infinite-scroll="loadMore"> -->
+    <Waterfall ref="waterfall" :list="fileList" :gutter="gutter" :columns="column" img-selector="url"
+      animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300" backgroundColor="transparent"> >
+      <template #item="{ item }">
+        <div
+          class="card rounded-md overflow-hidden group transition-transform duration-300 box-border hover:-translate-y-1.5">
+          <!-- <div class="image-wrapper"> -->
+          <LazyImg class="rounded-md shadow overflow-hidden" :url="item.filepath" />
+          <!-- </div> -->
           <div
-            class="card rounded-md overflow-hidden group shadow-md transition-transform duration-300 box-border hover:-translate-y-1.5">
-            <!-- <div class="image-wrapper"> -->
-            <LazyImg class="rounded-md overflow-hidden" :url="item.filepath" />
-            <!-- </div> -->
-            <div
-              class="hidden truncate group-hover:block absolute rounded-md z-10 truncate top-0 text-center w-full bg-[#00000070] text-white">
-              {{ item.filename }}
-            </div>
-            <!-- <div
-              class="absolute hidden rounded-md flex z-10 truncate bottom-0  w-full bg-[#00000070] text-white justify-between items-center">
-              <div>由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 分享</div>
-              <icon-download class="cursor-pointer w-4 h-4" @click="downloadFile(item.filepath)" />
-            </div> -->
+            class="hidden truncate group-hover:block absolute rounded-md z-10 truncate top-0 text-center w-full bg-[#00000070] text-white">
+            {{ item.filename }}
           </div>
-        </template>
-      </Waterfall>
-    </div>
-    <!-- </div> -->
+          <div
+            class="absolute rounded-md flex z-10 truncate bottom-2  w-full bg-[#00000070] text-white justify-between items-center">
+            <div>由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 分享</div>
+            <icon-download class="cursor-pointer w-4 h-4" @click="downloadFile(item.filepath)" />
+          </div>
+        </div>
+      </template>
+    </Waterfall>
+  </div>
+  <!-- </div> -->
   <!-- </PerfectScrollbar> -->
 
 </template>
@@ -60,7 +61,7 @@ const loading = ref(false);
 const kw = ref<string>('');
 const cwidth = ref<number>(240);
 const column = ref<number>(5);
-const gutter = ref<number>(20);
+const gutter = ref<number>(18);
 
 // 计算列数
 function calculateColumns() {
@@ -160,5 +161,11 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="less">
-
+:deep(.n-image img) {
+  --un-shadow: var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),
+    var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+    var(--un-shadow);
+    border-radius: 0.375rem !important;
+}
 </style>
\ No newline at end of file