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

23
src/views/Gallery.vue
View File

@ -1,7 +1,8 @@
<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"
placeholder="请输入关键字">
<template #suffix> <template #suffix>
<n-icon size="large"> <n-icon size="large">
<icon-search /> <icon-search />
@ -14,19 +15,19 @@
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 <div
class="card rounded-md overflow-hidden group shadow-md transition-transform duration-300 box-border hover:-translate-y-1.5"> class="card rounded-md overflow-hidden group transition-transform duration-300 box-border hover:-translate-y-1.5">
<!-- <div class="image-wrapper"> --> <!-- <div class="image-wrapper"> -->
<LazyImg class="rounded-md overflow-hidden" :url="item.filepath" /> <LazyImg class="rounded-md shadow overflow-hidden" :url="item.filepath" />
<!-- </div> --> <!-- </div> -->
<div <div
class="hidden truncate group-hover:block absolute rounded-md z-10 truncate top-0 text-center w-full bg-[#00000070] text-white"> class="hidden truncate group-hover:block absolute rounded-md z-10 truncate top-0 text-center w-full bg-[#00000070] text-white">
{{ item.filename }} {{ item.filename }}
</div> </div>
<!-- <div <div
class="absolute hidden rounded-md flex z-10 truncate bottom-0 w-full bg-[#00000070] text-white justify-between items-center"> 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> <div>由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 分享</div>
<icon-download class="cursor-pointer w-4 h-4" @click="downloadFile(item.filepath)" /> <icon-download class="cursor-pointer w-4 h-4" @click="downloadFile(item.filepath)" />
</div> --> </div>
</div> </div>
</template> </template>
</Waterfall> </Waterfall>
@ -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>