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

更新页面效果

Browse Source
This commit is contained in:
李琦
2026-08-01 09:15:40 +08:00
parent 4dcffcd500
commit 832be572cf
7 changed files with 95 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,8 +2,8 @@
<div class="gallery">
<!-- 标题区 -->
<div v-reveal="'up'" class="text-center mb-5 px-4">
<span class="gallery-title text-xl text-[#a88c6b] tracking-[0.3em] font-light block mb-2">{{ page.title }}</span>
<span class="gallery-subtitle text-[9px] text-[#8A8680] uppercase tracking-[0.4em] block mb-4">{{ page.subtitle }}</span>
<span class="gallery-title calligraphy text-xl text-[#a88c6b] tracking-[0.3em] font-bold block mb-2">{{ page.title }}</span>
<span class="gallery-subtitle text-[9px] text-[#8A8680] first-letter:uppercase lowercase tracking-[0.4em] block mb-4">{{ page.subtitle }}</span>
<span class="gallery-desc text-[12px] text-[#6b6863] font-light leading-relaxed mx-auto max-w-[280px] tracking-widest block whitespace-pre-wrap">{{ page.desc }}</span>
</div>
@@ -37,14 +37,9 @@
</div>
<!-- 九宫格 -->
<div v-else-if="page.type === 'nine-grid'" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
<div v-else-if="page.type === 'nine-grid'" v-reveal="{ variant: 'up', delay: 80 }" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
<div v-for="(img, imgIdx) in page.images" :key="imgIdx"
data-aos="nine-grid-zoom"
:data-aos-delay="imgIdx * 200"
data-aos-duration="500"
data-aos-easing="ease-out-cubic"
data-aos-once="true"
class="nine-grid-reveal aspect-square relative" :class="frameClass">
class="aspect-square relative" :class="frameClass">
<img :src="img" loading="lazy" decoding="async" class="nine-grid-img" />
</div>
</div>
@@ -145,24 +140,13 @@ function polaroidTransform(i) {
<style scoped>
.gallery { width: 100%; font-family: var(--font-sans); }
.gallery-title { font-family: var(--font-serif); }
.gallery-subtitle { font-family: var(--font-display); }
.gallery-title {
font-family: var(--font-calligraphy);
font-weight: 700;
}
/*.gallery-subtitle { font-family: var(--font-display); }*/
.gallery-desc { font-family: var(--font-kai); }
.nine-grid-reveal {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-aos='nine-grid-zoom'] {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.94);
transition-property: opacity, transform;
will-change: opacity, transform;
}
[data-aos='nine-grid-zoom'].aos-animate {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.nine-grid-img {
width: 100%;
height: 100%;