youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化Gallery页面布局和样式，调整瀑布流间距，修复图片阴影和圆角，显示下载按钮和分享者信息

Browse Source
This commit is contained in:
youzi
2025-12-28 21:12:45 +08:00
parent 589696c0ad
commit 64b377b84d
1 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/Gallery.vue
View File

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