Skip to content

Commit 1007941

Browse files
KYLN24KYLN24
committed
feat: 更新2026周年庆页面，合并游戏与问卷功能，优化样式和布局
1 parent af383ab commit 1007941

1 file changed

Lines changed: 79 additions & 147 deletions

File tree

‎src/views/Anniversary2026View.vue‎

Lines changed: 79 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<script setup lang="ts">
2-
import { ref, onMounted } from 'vue'
2+
import { onMounted, ref } from 'vue'
33
44
// --- Tab state ---
55
const activeTab = ref('game')
66
const tabs = [
7-
{ key: 'game', label: '游戏' },
7+
{ key: 'game', label: '首页' },
88
{ key: 'letter', label: '信' },
99
{ key: 'gallery', label: '文创' },
10-
{ key: 'survey', label: '问卷' },
1110
]
1211
1312
// --- Game ---
@@ -152,22 +151,23 @@ onMounted(() => {
152151

153152
<!-- Tab content -->
154153
<main class="tab-content">
155-
<!-- ====== GAME ====== -->
156-
<section v-if="activeTab === 'game'" class="panel panel-game">
157-
<div class="game-hero" @click="playGame">
158-
<img
159-
src="/assets/game-2026-desktop.png"
160-
alt="合成大猫猫"
161-
class="game-hero-img"
162-
/>
163-
<div class="game-hero-overlay">
164-
<span class="game-hero-badge">合成大猫猫</span>
165-
<p class="game-hero-cta">点击开始游玩</p>
154+
<!-- ====== GAME + SURVEY ====== -->
155+
<section v-if="activeTab === 'game'" class="panel panel-home">
156+
<p class="home-greeting">感谢每一位茶友的陪伴，猫猫五岁啦！</p>
157+
<div class="home-cards">
158+
<div class="home-card" @click="playGame">
159+
<span class="home-card-icon">&#127918;</span>
160+
<h3 class="home-card-title">合成大猫猫</h3>
161+
<p class="home-card-desc">五周年特别小游戏<br/>合成你的专属猫猫皇帝！</p>
162+
<span class="home-card-link">开始游戏 &rarr;</span>
163+
</div>
164+
<div class="home-card" @click="openSurvey">
165+
<span class="home-card-icon">&#128203;</span>
166+
<h3 class="home-card-title">五周年问卷</h3>
167+
<p class="home-card-desc">你的反馈是旦挞进步的动力<br/>问卷很短，只需几分钟～</p>
168+
<span class="home-card-link">填写问卷 &rarr;</span>
166169
</div>
167170
</div>
168-
<p class="game-caption">
169-
五周年特别小游戏——合成你的专属猫猫皇帝！
170-
</p>
171171
</section>
172172

173173
<!-- ====== LETTER ====== -->
@@ -221,21 +221,8 @@ onMounted(() => {
221221
<span class="gallery-cell-name">{{ item.name }}</span>
222222
</div>
223223
</div>
224-
<p class="gallery-credit">美工制作：蔡欣岚 · 伍芷萱 · 张文惠 · 幺一一</p>
225224
</section>
226225

227-
<!-- ====== SURVEY ====== -->
228-
<section v-if="activeTab === 'survey'" class="panel panel-survey">
229-
<div class="survey-card">
230-
<div class="survey-icon">&#128203;</div>
231-
<h2 class="survey-title">帮猫猫做个小调研吧</h2>
232-
<p class="survey-desc">你的反馈是旦挞不断进步的动力～<br/>问卷很短，只需要几分钟！</p>
233-
<button class="survey-btn" @click="openSurvey">
234-
打开问卷
235-
<span class="survey-btn-arrow">&rarr;</span>
236-
</button>
237-
</div>
238-
</section>
239226
</main>
240227

241228
<!-- Lightbox -->
@@ -316,12 +303,14 @@ onMounted(() => {
316303
}
317304
318305
.header-title {
319-
font-family: 'ZCOOL XiaoWei', serif;
306+
font-family: 'Noto Serif SC', 'Songti SC', serif;
320307
font-size: clamp(2.2rem, 6vw, 3.6rem);
321-
font-weight: 400;
308+
font-weight: 600;
322309
color: var(--c-blossom-deep);
323310
letter-spacing: 0.15em;
311+
line-height: 1.6;
324312
margin: 0;
313+
overflow: visible;
325314
text-shadow: 0 2px 12px rgba(200, 107, 132, 0.18);
326315
}
327316
@@ -400,71 +389,75 @@ onMounted(() => {
400389
}
401390
}
402391
403-
/* ===== GAME PANEL ===== */
404-
.game-hero {
405-
position: relative;
406-
border-radius: 1.25rem;
407-
overflow: hidden;
408-
cursor: pointer;
409-
max-width: 340px;
392+
/* ===== HOME PANEL ===== */
393+
.home-greeting {
394+
text-align: center;
395+
font-family: 'ZCOOL XiaoWei', serif;
396+
font-size: 1.05rem;
397+
color: var(--c-blossom-deep);
398+
letter-spacing: 0.08em;
399+
margin-bottom: 1.5rem;
400+
opacity: 0.85;
401+
}
402+
403+
.home-cards {
404+
display: grid;
405+
grid-template-columns: 1fr 1fr;
406+
gap: 1rem;
407+
max-width: 480px;
410408
margin: 0 auto;
411-
box-shadow:
412-
0 8px 32px rgba(196, 107, 132, 0.18),
413-
0 2px 8px rgba(0, 0, 0, 0.04);
414-
transition: transform 0.35s ease, box-shadow 0.35s ease;
415409
}
416410
417-
.game-hero:hover {
418-
transform: translateY(-6px) scale(1.01);
419-
box-shadow:
420-
0 16px 48px rgba(196, 107, 132, 0.28),
421-
0 4px 12px rgba(0, 0, 0, 0.06);
411+
.home-card {
412+
background: white;
413+
border-radius: 1rem;
414+
padding: 1.75rem 1.25rem;
415+
text-align: center;
416+
cursor: pointer;
417+
border: 1px solid rgba(232, 160, 180, 0.15);
418+
box-shadow: 0 4px 20px rgba(196, 107, 132, 0.08);
419+
transition: all 0.3s ease;
422420
}
423421
424-
.game-hero-img {
425-
width: 100%;
426-
display: block;
422+
.home-card:hover {
423+
transform: translateY(-4px);
424+
box-shadow: 0 8px 32px rgba(196, 107, 132, 0.18);
425+
border-color: rgba(232, 160, 180, 0.3);
427426
}
428427
429-
.game-hero-overlay {
430-
position: absolute;
431-
inset: 0;
432-
display: flex;
433-
flex-direction: column;
434-
align-items: center;
435-
justify-content: flex-end;
436-
padding-bottom: 2rem;
437-
background: linear-gradient(
438-
to bottom,
439-
transparent 40%,
440-
rgba(60, 30, 40, 0.5)
441-
);
428+
.home-card-icon {
429+
font-size: 2rem;
430+
display: block;
431+
margin-bottom: 0.75rem;
442432
}
443433
444-
.game-hero-badge {
445-
background: rgba(255, 255, 255, 0.88);
446-
color: var(--c-blossom-deep);
447-
padding: 0.4rem 1.4rem;
448-
border-radius: 999px;
434+
.home-card-title {
449435
font-family: 'ZCOOL XiaoWei', serif;
450436
font-size: 1.05rem;
451-
letter-spacing: 0.1em;
452-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
437+
color: var(--c-blossom-deep);
438+
margin: 0 0 0.5rem;
439+
font-weight: 400;
440+
letter-spacing: 0.08em;
441+
}
442+
443+
.home-card-desc {
444+
font-size: 0.82rem;
445+
color: var(--c-ink-light);
446+
line-height: 1.7;
447+
margin: 0 0 1rem;
453448
}
454449
455-
.game-hero-cta {
456-
color: rgba(255, 255, 255, 0.9);
450+
.home-card-link {
451+
display: inline-block;
452+
font-family: 'ZCOOL XiaoWei', serif;
457453
font-size: 0.85rem;
458-
margin-top: 0.6rem;
459-
letter-spacing: 0.15em;
454+
color: var(--c-blossom-deep);
455+
letter-spacing: 0.06em;
456+
transition: letter-spacing 0.25s ease;
460457
}
461458
462-
.game-caption {
463-
text-align: center;
464-
color: var(--c-ink-light);
465-
font-size: 0.9rem;
466-
margin-top: 1.2rem;
467-
opacity: 0.75;
459+
.home-card:hover .home-card-link {
460+
letter-spacing: 0.15em;
468461
}
469462
470463
/* ===== LETTER PANEL ===== */
@@ -604,68 +597,6 @@ onMounted(() => {
604597
opacity: 0.6;
605598
}
606599
607-
/* ===== SURVEY PANEL ===== */
608-
.survey-card {
609-
text-align: center;
610-
background: white;
611-
border-radius: 1.25rem;
612-
padding: 3rem 2rem;
613-
box-shadow: 0 8px 32px rgba(196, 107, 132, 0.08);
614-
border: 1px solid rgba(232, 160, 180, 0.15);
615-
}
616-
617-
.survey-icon {
618-
font-size: 3rem;
619-
margin-bottom: 0.75rem;
620-
}
621-
622-
.survey-title {
623-
font-family: 'ZCOOL XiaoWei', serif;
624-
font-size: 1.4rem;
625-
color: var(--c-blossom-deep);
626-
margin: 0 0 0.75rem;
627-
font-weight: 400;
628-
letter-spacing: 0.08em;
629-
}
630-
631-
.survey-desc {
632-
font-size: 0.92rem;
633-
color: var(--c-ink-light);
634-
line-height: 1.7;
635-
margin-bottom: 1.75rem;
636-
}
637-
638-
.survey-btn {
639-
display: inline-flex;
640-
align-items: center;
641-
gap: 0.5rem;
642-
padding: 0.75rem 2rem;
643-
background: var(--c-blossom-deep);
644-
color: white;
645-
border: none;
646-
border-radius: 999px;
647-
font-family: 'ZCOOL XiaoWei', serif;
648-
font-size: 1rem;
649-
cursor: pointer;
650-
letter-spacing: 0.1em;
651-
transition: all 0.3s ease;
652-
box-shadow: 0 4px 16px rgba(196, 107, 132, 0.25);
653-
}
654-
655-
.survey-btn:hover {
656-
background: #b5495b;
657-
transform: translateY(-2px);
658-
box-shadow: 0 8px 24px rgba(196, 107, 132, 0.35);
659-
}
660-
661-
.survey-btn-arrow {
662-
transition: transform 0.25s ease;
663-
}
664-
665-
.survey-btn:hover .survey-btn-arrow {
666-
transform: translateX(4px);
667-
}
668-
669600
/* ===== LIGHTBOX ===== */
670601
.lightbox {
671602
position: fixed;
@@ -755,12 +686,13 @@ onMounted(() => {
755686
gap: 0.75rem;
756687
}
757688
758-
.survey-card {
759-
padding: 2rem 1.25rem;
689+
.home-cards {
690+
grid-template-columns: 1fr;
691+
max-width: 320px;
760692
}
761693
762-
.game-hero {
763-
max-width: 280px;
694+
.home-card {
695+
padding: 1.25rem 1rem;
764696
}
765697
}
766698
</style>

0 commit comments

Comments
 (0)