lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面效果

Browse Source
This commit is contained in:
李琦
2026-07-31 11:36:19 +08:00
parent 3c4347128d
commit 4630035dd1
39 changed files with 859 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
vite-tailwindcss/src/components/PhotoGallery.vue
View File

@@ -7,18 +7,18 @@
<span class="text-[12px] text-[#6b6863] font-light leading-relaxed mx-auto max-w-[280px] tracking-widest block whitespace-pre-wrap">{{ page.desc }}</span>
</div>
<!-- 单图（满幅带留白卡纸） -->
<!-- 单图（默认居中卡幅 / 可配置宽度铺满） -->
<div v-if="page.type === 'single'" v-reveal="{ variant: 'scale', delay: 100 }"
class="w-full max-w-[300px] mx-auto aspect-[4/5] mt-6">
<div :class="frameClass"><img :src="page.img1" /></div>
class="w-full mx-auto mt-6" :class="singleWrapClass" :style="singleWrapStyle">
<div :class="singleFrameClass"><img :src="page.img1" /></div>
</div>
<!-- 错落双图 -->
<div v-else-if="page.type === 'overlap'" class="relative w-full h-[50vh] mt-4">
<div v-reveal="{ variant: 'left', delay: 100 }" class="absolute top-0 right-4 w-[70%] h-[65%] z-10" :class="frameClass">
<!-- 错落双图（高度 clamp 封顶，图片贴容器边缘，任何页高下不溢出） -->
<div v-else-if="page.type === 'overlap'" class="overlap-wrap relative w-full mt-2">
<div v-reveal="{ variant: 'left', delay: 100 }" class="absolute top-0 right-0 w-[68%] h-[72%] z-10" :class="frameClass">
<img :src="page.img1" />
</div>
<div v-reveal="{ variant: 'right', delay: 300 }" class="absolute bottom-4 left-4 w-[60%] h-[60%] z-20" :class="frameClass">
<div v-reveal="{ variant: 'right', delay: 300 }" class="absolute bottom-0 left-0 w-[60%] h-[60%] z-20" :class="frameClass">
<img :src="page.img2" />
</div>
</div>
@@ -89,6 +89,23 @@ const props = defineProps({
// 边框样式：前台按 page.borderStyle 套用全局 gf-* 类
const frameClass = computed(() => borderClass(props.page.borderStyle))
/* ---------- 单图宽度模式 ---------- */
// singleWidth: 'default'(居中卡幅) | 'full'(宽度铺满)；singleKeepRatio: 铺满时是否保持原始宽高比
const singleWrapClass = computed(() =>
props.page.singleWidth === 'full' ? 'max-w-none' : 'max-w-[300px]'
)
const singleWrapStyle = computed(() => {
if (props.page.singleWidth === 'full') {
// 铺满 + 保持原始比例 → 高度由图片自然撑开；铺满 + 不保持 → 固定 4:5 裁切
return props.page.singleKeepRatio ? {} : { aspectRatio: '4 / 5' }
}
return { aspectRatio: '4 / 5' }
})
// 保持原始比例时 img 需要自然高度（gf-natural 覆盖 gf-frame 的 height:100%）
const singleFrameClass = computed(() =>
frameClass.value + (props.page.singleWidth === 'full' && props.page.singleKeepRatio ? ' gf-natural' : '')
)
/* ---------- 轮播状态 ---------- */
const index = ref(0)
const trackRef = ref(null)
@@ -120,6 +137,9 @@ function polaroidTransform(i) {
<style scoped>
.gallery { width: 100%; }
/* 错落双图：高度随视口缩放并封顶，保证标题+图片总高始终落在页高预算内 */
.overlap-wrap { height: clamp(320px, 54vh, 460px); }
/* 瀑布流 */
.g-masonry { column-count: 2; column-gap: 10px; }
.g-masonry-item { break-inside: avoid; margin-bottom: 10px; border-radius: 6px; }