Skip to content

Commit da85774

Browse files
KYLN24KYLN24
committed
feat: 添加画廊数据接口和更新画廊视图以支持动态内容
1 parent 21df788 commit da85774

3 files changed

Lines changed: 258 additions & 151 deletions

File tree

‎src/views/Anniversary2026View.vue‎

Lines changed: 1 addition & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import { onMounted, ref } from 'vue'
3+
import { galleryItems } from './anniversary2026GalleryData'
34
45
// --- Tab state ---
56
const activeTab = ref('game')
@@ -56,68 +57,6 @@ function spawnPetals() {
5657
5758
// --- Gallery state ---
5859
const galleryCategory = ref('badges')
59-
const galleryItems: Record<string, { label: string; items: { src: string; name: string }[] }> = {
60-
badges: {
61-
label: '徽章',
62-
items: [
63-
{ src: '/assets/gallery-2026/徽章-郁金香.webp', name: '郁金香' },
64-
{ src: '/assets/gallery-2026/徽章-玉兰.webp', name: '玉兰' },
65-
{ src: '/assets/gallery-2026/徽章-樱花.webp', name: '樱花' },
66-
{ src: '/assets/gallery-2026/徽章-山茶.webp', name: '山茶' },
67-
{ src: '/assets/gallery-2026/徽章-杜鹃.webp', name: '杜鹃' },
68-
],
69-
},
70-
cards: {
71-
label: '透卡',
72-
items: [
73-
{ src: '/assets/gallery-2026/透卡-玉兰.webp', name: '玉兰' },
74-
{ src: '/assets/gallery-2026/透卡-樱花.webp', name: '樱花' },
75-
],
76-
},
77-
charms: {
78-
label: '挂件',
79-
items: [
80-
{ src: '/assets/gallery-2026/挂件-围观.webp', name: '围观' },
81-
{ src: '/assets/gallery-2026/挂件-点赞.webp', name: '点赞' },
82-
{ src: '/assets/gallery-2026/挂件-干饭.webp', name: '干饭' },
83-
{ src: '/assets/gallery-2026/挂件-皇帝驾到.webp', name: '皇帝驾到' },
84-
{ src: '/assets/gallery-2026/挂件-敲木鱼.webp', name: '敲木鱼' },
85-
],
86-
},
87-
puzzle: {
88-
label: '拼图',
89-
items: [
90-
{ src: '/assets/gallery-2026/拼图-主图.webp', name: '拼图主图' },
91-
{ src: '/assets/gallery-2026/拼图-1.webp', name: '拼图分图 1' },
92-
{ src: '/assets/gallery-2026/拼图-2.webp', name: '拼图分图 2' },
93-
],
94-
},
95-
postcards: {
96-
label: '明信片',
97-
items: [
98-
{ src: '/assets/gallery-2026/明信片-1.webp', name: '明信片 1' },
99-
{ src: '/assets/gallery-2026/明信片-2.webp', name: '明信片 2' },
100-
{ src: '/assets/gallery-2026/明信片-3.webp', name: '明信片 3' },
101-
{ src: '/assets/gallery-2026/明信片-4.webp', name: '明信片 4' },
102-
{ src: '/assets/gallery-2026/明信片-5.webp', name: '明信片 5' },
103-
{ src: '/assets/gallery-2026/明信片-6.webp', name: '明信片 6' },
104-
{ src: '/assets/gallery-2026/明信片-7.webp', name: '明信片 7' },
105-
{ src: '/assets/gallery-2026/明信片-8.webp', name: '明信片 8' },
106-
{ src: '/assets/gallery-2026/明信片-9.webp', name: '明信片 9' },
107-
{ src: '/assets/gallery-2026/明信片-10.webp', name: '明信片 10' },
108-
{ src: '/assets/gallery-2026/明信片-11.webp', name: '明信片 11' },
109-
{ src: '/assets/gallery-2026/明信片-12.webp', name: '明信片 12' },
110-
{ src: '/assets/gallery-2026/明信片-款式7正面+基础背面.webp', name: '明信片款式 7 正背面' },
111-
],
112-
},
113-
others: {
114-
label: '其他',
115-
items: [
116-
{ src: '/assets/gallery-2026/礼品袋.webp', name: '礼品袋' },
117-
{ src: '/assets/gallery-2026/海报.webp', name: '海报' },
118-
],
119-
},
120-
}
12160
12261
// --- Lightbox ---
12362
const lightboxSrc = ref('')

‎src/views/GalleryView2026.vue‎

Lines changed: 185 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,191 @@
1-
<script setup>
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
import { galleryItems } from './anniversary2026GalleryData'
4+
25
function goBack() {
3-
window.location.href = "/anniversary/2026"
6+
window.location.href = '/anniversary/2026'
7+
}
8+
9+
const galleryCategory = ref('badges')
10+
const lightboxSrc = ref('')
11+
12+
function openLightbox(src: string) {
13+
lightboxSrc.value = src
14+
}
15+
16+
function closeLightbox() {
17+
lightboxSrc.value = ''
418
}
519
</script>
620

721
<template>
8-
<section class="md:w-2/3 m-auto w-full pl-10 pr-10 mt-2 flex flex-col gap-3">
9-
<el-page-header @back="goBack">
10-
<template #content>
11-
<span class="text-large font-600 mr-3"> 赛博美术馆 </span>
12-
</template>
13-
<template #title>
14-
<span class="text-large font-600 mr-3"> 返回 </span>
15-
</template>
16-
</el-page-header>
17-
<h1 class="text-2xl font-bold">旦挞五周年文创·赛博美术馆</h1>
18-
19-
<section class="w-full rounded-3xl border-2 border-pink-200 p-5">
20-
<h2 class="text-xl font-semibold">五周年徽章·五款</h2>
21-
<div class="flex gap-1">
22-
<img src="/assets/gallery-2026/徽章-郁金香.webp" alt="郁金香" class="w-1/5">
23-
<img src="/assets/gallery-2026/徽章-玉兰.webp" alt="玉兰" class="w-1/5">
24-
<img src="/assets/gallery-2026/徽章-樱花.webp" alt="樱花" class="w-1/5">
25-
<img src="/assets/gallery-2026/徽章-山茶.webp" alt="山茶" class="w-1/5">
26-
<img src="/assets/gallery-2026/徽章-杜鹃.webp" alt="杜鹃" class="w-1/5">
27-
</div>
28-
</section>
29-
30-
<section class="w-full rounded-3xl border-2 border-pink-200 p-5">
31-
<h2 class="text-xl font-semibold">五周年透卡·两款</h2>
32-
<div class="flex gap-1 justify-center">
33-
<img src="/assets/gallery-2026/透卡-玉兰.webp" alt="透卡-玉兰" class="w-1/3">
34-
<img src="/assets/gallery-2026/透卡-樱花.webp" alt="透卡-樱花" class="w-1/3">
35-
</div>
36-
</section>
37-
38-
<section class="w-full rounded-3xl border-2 border-pink-200 p-5">
39-
<h2 class="text-xl font-semibold">猫猫亚克力挂件·五款</h2>
40-
<div class="flex gap-1">
41-
<img src="/assets/gallery-2026/挂件-围观.webp" alt="围观" class="w-1/5">
42-
<img src="/assets/gallery-2026/挂件-点赞.webp" alt="点赞" class="w-1/5">
43-
<img src="/assets/gallery-2026/挂件-干饭.webp" alt="干饭" class="w-1/5">
44-
<img src="/assets/gallery-2026/挂件-皇帝驾到.webp" alt="皇帝驾到" class="w-1/5">
45-
<img src="/assets/gallery-2026/挂件-敲木鱼.webp" alt="敲木鱼" class="w-1/5">
46-
</div>
47-
</section>
48-
49-
<section class="w-full rounded-3xl border-2 border-pink-200 p-5">
50-
<h2 class="text-xl font-semibold">五周年礼品袋</h2>
51-
<div class="flex gap-1 justify-center">
52-
<img src="/assets/gallery-2026/礼品袋.webp" alt="礼品袋" class="w-1/2">
53-
</div>
54-
</section>
55-
56-
<section class="w-full rounded-3xl border-2 border-pink-200 p-5">
57-
<h2 class="text-xl font-semibold">五周年海报</h2>
58-
<div class="flex gap-1 justify-center">
59-
<img src="/assets/gallery-2026/海报.webp" alt="海报" class="w-1/2">
60-
</div>
61-
</section>
62-
63-
<section class="w-full rounded-3xl border-2 border-pink-200 p-5">
64-
<h2 class="text-xl font-semibold">拼图</h2>
65-
<div class="flex gap-1 justify-center">
66-
<img src="/assets/gallery-2026/拼图-主图.webp" alt="拼图主图" class="w-1/2">
67-
<img src="/assets/gallery-2026/拼图-1.webp" alt="拼图分图1" class="w-1/4">
68-
<img src="/assets/gallery-2026/拼图-2.webp" alt="拼图分图2" class="w-1/4">
69-
</div>
70-
</section>
71-
72-
<section class="w-full rounded-3xl border-2 border-pink-200 p-5">
73-
<h2 class="text-xl font-semibold">明信片</h2>
74-
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
75-
<img src="/assets/gallery-2026/明信片-1.webp" alt="明信片1">
76-
<img src="/assets/gallery-2026/明信片-2.webp" alt="明信片2">
77-
<img src="/assets/gallery-2026/明信片-3.webp" alt="明信片3">
78-
<img src="/assets/gallery-2026/明信片-4.webp" alt="明信片4">
79-
<img src="/assets/gallery-2026/明信片-5.webp" alt="明信片5">
80-
<img src="/assets/gallery-2026/明信片-6.webp" alt="明信片6">
81-
<img src="/assets/gallery-2026/明信片-7.webp" alt="明信片7">
82-
<img src="/assets/gallery-2026/明信片-8.webp" alt="明信片8">
83-
<img src="/assets/gallery-2026/明信片-9.webp" alt="明信片9">
84-
<img src="/assets/gallery-2026/明信片-10.webp" alt="明信片10">
85-
<img src="/assets/gallery-2026/明信片-11.webp" alt="明信片11">
86-
<img src="/assets/gallery-2026/明信片-12.webp" alt="明信片12">
87-
</div>
88-
<div class="flex gap-1 justify-center mt-2">
89-
<img src="/assets/gallery-2026/明信片-款式7正面+基础背面.webp" alt="明信片款式7正背面" class="w-full md:w-1/2">
90-
</div>
91-
</section>
92-
93-
<p class="text-gray-500 text-sm font-thin mb-2">旦挞五周年文创美工制作：@蔡欣岚 @伍芷萱 @张文惠 @幺一一</p>
94-
</section>
22+
<section class="md:w-2/3 m-auto w-full pl-10 pr-10 mt-2 flex flex-col gap-3">
23+
<el-page-header @back="goBack">
24+
<template #content>
25+
<span class="text-large font-600 mr-3"> 赛博美术馆 </span>
26+
</template>
27+
<template #title>
28+
<span class="text-large font-600 mr-3"> 返回 </span>
29+
</template>
30+
</el-page-header>
31+
<h1 class="text-2xl font-bold">旦挞五周年文创·赛博美术馆</h1>
32+
33+
<div class="gallery-cats">
34+
<button
35+
v-for="(cat, key) in galleryItems"
36+
:key="key"
37+
class="gallery-cat-btn"
38+
:class="{ active: galleryCategory === key }"
39+
@click="galleryCategory = key as string"
40+
>
41+
{{ cat.label }}
42+
</button>
43+
</div>
44+
45+
<div class="gallery-grid">
46+
<div
47+
v-for="item in galleryItems[galleryCategory].items"
48+
:key="item.src"
49+
class="gallery-cell"
50+
@click="openLightbox(item.src)"
51+
>
52+
<img :src="item.src" :alt="item.name" loading="lazy" />
53+
<span class="gallery-cell-name">{{ item.name }}</span>
54+
</div>
55+
</div>
56+
57+
<p class="text-gray-500 text-sm font-thin mb-2">旦挞五周年文创美工制作：@蔡欣岚 @伍芷萱 @张文惠 @幺一一</p>
58+
</section>
59+
60+
<Teleport to="body">
61+
<div v-if="lightboxSrc" class="lightbox" @click="closeLightbox">
62+
<img :src="lightboxSrc" class="lightbox-img" @click.stop />
63+
<button class="lightbox-close" @click="closeLightbox">&times;</button>
64+
</div>
65+
</Teleport>
9566
</template>
67+
68+
<style scoped>
69+
.gallery-cats {
70+
display: flex;
71+
justify-content: center;
72+
gap: 0.5rem;
73+
margin-bottom: 1rem;
74+
flex-wrap: wrap;
75+
}
76+
77+
.gallery-cat-btn {
78+
padding: 0.4rem 1.2rem;
79+
border: 1px solid #e8a0b4;
80+
background: transparent;
81+
color: #c46b84;
82+
border-radius: 999px;
83+
font-size: 0.9rem;
84+
cursor: pointer;
85+
transition: all 0.25s ease;
86+
letter-spacing: 0.06em;
87+
}
88+
89+
.gallery-cat-btn:hover {
90+
background: #fbe8ee;
91+
}
92+
93+
.gallery-cat-btn.active {
94+
background: #c46b84;
95+
color: white;
96+
border-color: #c46b84;
97+
}
98+
99+
.gallery-grid {
100+
display: grid;
101+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
102+
gap: 1rem;
103+
}
104+
105+
.gallery-cell {
106+
display: flex;
107+
flex-direction: column;
108+
align-items: center;
109+
cursor: pointer;
110+
transition: transform 0.25s ease;
111+
}
112+
113+
.gallery-cell:hover {
114+
transform: scale(1.04);
115+
}
116+
117+
.gallery-cell img {
118+
width: 100%;
119+
border-radius: 0.75rem;
120+
background: white;
121+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
122+
border: 1px solid rgba(232, 160, 180, 0.12);
123+
}
124+
125+
.gallery-cell-name {
126+
font-size: 0.8rem;
127+
color: #6b5a5a;
128+
margin-top: 0.4rem;
129+
letter-spacing: 0.04em;
130+
}
131+
132+
.lightbox {
133+
position: fixed;
134+
inset: 0;
135+
z-index: 9999;
136+
background: rgba(0, 0, 0, 0.7);
137+
backdrop-filter: blur(4px);
138+
display: flex;
139+
align-items: center;
140+
justify-content: center;
141+
animation: lb-in 0.2s ease;
142+
cursor: pointer;
143+
}
144+
145+
@keyframes lb-in {
146+
from {
147+
opacity: 0;
148+
}
149+
to {
150+
opacity: 1;
151+
}
152+
}
153+
154+
.lightbox-img {
155+
max-width: 90vw;
156+
max-height: 85vh;
157+
border-radius: 0.75rem;
158+
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
159+
cursor: default;
160+
}
161+
162+
.lightbox-close {
163+
position: absolute;
164+
top: 1.5rem;
165+
right: 1.5rem;
166+
width: 2.5rem;
167+
height: 2.5rem;
168+
border: none;
169+
background: rgba(255, 255, 255, 0.15);
170+
color: white;
171+
font-size: 1.5rem;
172+
border-radius: 50%;
173+
cursor: pointer;
174+
display: flex;
175+
align-items: center;
176+
justify-content: center;
177+
backdrop-filter: blur(8px);
178+
transition: background 0.2s;
179+
}
180+
181+
.lightbox-close:hover {
182+
background: rgba(255, 255, 255, 0.3);
183+
}
184+
185+
@media (max-width: 640px) {
186+
.gallery-grid {
187+
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
188+
gap: 0.75rem;
189+
}
190+
}
191+
</style>

0 commit comments

Comments
 (0)