console
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 修改:完善viewport,禁止手动缩放,提升移动端布局稳定性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>小花仙代肝接单|周年/庙会/花精灵/花精灵王</title>
<style>
:root {
--primary: #c86ed8;
--primary-dark: #b04fc4;
--secondary: #f8c8ee;
--bg-light: #fdf4fc;
--gray-100: #f3e6f7;
--gray-200: #e9d4ef;
--gray-500: #785485;
--gray-800: #4b2b57;
--white: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", PingFang SC, sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--bg-light);
color: var(--gray-800);
line-height: 1.6;
background-image: radial-gradient(#f2d8f7 6%, transparent 7%);
background-size: 30px 30px;
}
/* 导航栏 */
nav {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(200,110,216,0.15);
position: sticky;
top: 0;
z-index: 99;
}
.nav-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.3rem;
font-weight: bold;
color: var(--primary);
}
.nav-links a {
text-decoration: none;
color: var(--gray-800);
margin-left: 24px;
font-size: 0.95rem;
}
.nav-links a:hover {
color: var(--primary);
}
/* 容器通用 */
.container {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 60px 0;
}
.section-title {
text-align: center;
font-size: 1.8rem;
margin-bottom: 8px;
color: var(--primary-dark);
}
.section-desc {
text-align: center;
color: var(--gray-500);
margin-bottom: 40px;
}
/* 首屏Hero */
.hero {
background: linear-gradient(135deg, #d886e6, #b85fc9);
color: white;
padding: 80px 20px;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.hero h1 {
font-size: 2.4rem;
margin-bottom:16px;
}
.hero p {
font-size:1.1rem;
opacity:0.95;
max-width:600px;
margin:0 auto 30px;
}
.btn {
display: inline-block;
padding:12px 28px;
border-radius:999px;
text-decoration: none;
font-weight:500;
transition: 0.2s;
border:none;
cursor:pointer;
}
.btn-primary {
background: white;
color: var(--primary);
}
.btn-primary:hover {
background: #fcf0fa;
}
.btn-outline {
border: 2px solid var(--primary);
color: var(--primary);
background: transparent;
}
.btn-outline:hover {
background: var(--primary);
color:white;
}
/* ========== 大类标签(一级标签) ========== */
.main-tabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-bottom: 24px;
}
.main-tab {
padding: 10px 18px;
border-radius: 999px;
border: 2px solid var(--primary);
background: #fff;
color: var(--primary);
cursor: pointer;
font-weight: 500;
transition: 0.2s;
}
.main-tab:hover {
background: var(--primary);
color: #fff;
}
.main-tab.active {
background: var(--primary);
color: #fff;
}
/* 大类内容容器 */
.main-content-wrap {
display: none;
background: #fff;
padding: 30px;
border-radius: 20px;
box-shadow: 0 4px 14px rgba(200,110,216,0.12);
}
.main-content-wrap.active {
display: block;
}
/* ====== 周年内部二级小标签 ====== */
.sub-tabs {
display: flex;
flex-wrap: wrap;
gap:10px;
justify-content:center;
margin:20px 0 24px;
}
.sub-tab {
padding:8px 16px;
border-radius:999px;
border:1px solid var(--primary);
background:#fff;
color:var(--primary);
cursor:pointer;
font-size:0.9rem;
}
.sub-tab:hover,.sub-tab.active {
background:var(--primary);
color:#fff;
}
.sub-content {
display:none;
}
.sub-content.active {
display:block;
}
/* 图鉴衣服网格 */
.clothes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.clothes-item {
background: var(--secondary);
border-radius: 14px;
padding: 12px;
text-align: center;
}
.clothes-item img {
width: 100%;
border-radius: 10px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.clothes-item .clothes-name {
margin-top: 10px;
font-size: 14px;
color: var(--gray-800);
}
.desc-text {
color:#444;
margin-bottom:16px;
}
.center-btn {
text-align:center;
margin-top:24px;
}
/* 价格卡片区域 */
.price-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:24px;
}
.price-card {
background: var(--white);
border-radius:20px;
padding:32px 24px;
box-shadow:0 4px 14px rgba(200,110,216,0.12);
position:relative;
}
.price-card.recommend {
border: 2px solid var(--primary);
transform: scale(1.03);
}
.recommend-tag {
position:absolute;
top:-12px;
left:50%;
transform: translateX(-50%);
background: var(--primary);
color:white;
font-size:0.8rem;
padding:4px 14px;
border-radius:20px;
}
.price-card h3 {
text-align:center;
font-size:1.3rem;
margin-bottom:8px;
color:var(--primary-dark);
}
.price-num {
text-align:center;
font-size:2rem;
font-weight:bold;
color:var(--primary);
margin-bottom:20px;
}
.price-card ul {
list-style:none;
margin-bottom:28px;
}
.price-card li {
padding:8px 0;
border-bottom:1px solid var(--gray-200);
}
.price-card li:last-child {
border-bottom:none;
}
.price-card .btn {
width:100%;
text-align:center;
}
/* FAQ模块 折叠面板 */
.faq-wrap {
max-width:720px;
margin:0 auto;
}
.faq-item {
background: var(--white);
border-radius:14px;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 2px 8px rgba(200,110,216,0.08);
}
.faq-question {
padding:18px 22px;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:500;
color:var(--gray-800);
}
.faq-answer {
padding:0 22px;
max-height:0;
overflow:hidden;
transition: max-height 0.3s ease;
color:var(--gray-500);
}
.faq-answer-inner {
padding-bottom:18px;
}
.faq-item.open .faq-answer {
max-height:300px;
}
/* 联系模块 */
.contact-wrap {
background: var(--white);
border-radius:20px;
padding:40px;
display:grid;
grid-template-columns: 1fr 1fr;
gap:30px;
box-shadow:0 4px 14px rgba(200,110,216,0.12);
}
.contact-info p {
margin:14px 0;
font-size:1.05rem;
}
.contact-info strong {
color:var(--primary);
}
.contact-form input,.contact-form textarea {
width:100%;
padding:12px 14px;
border:1px solid var(--gray-200);
border-radius:10px;
margin-bottom:14px;
font-size:1rem;
background:#fef9fe;
}
.contact-form textarea {
min-height:110px;
resize:vertical;
}
/* 底部悬浮咨询按钮(手机常驻) */
.float-cta {
position:fixed;
bottom:24px;
right:24px;
z-index:98;
}
.float-cta a {
background:var(--primary);
color:white;
padding:14px 24px;
border-radius:50px;
text-decoration:none;
box-shadow:0 4px 16px rgba(200,110,216,0.35);
font-weight:500;
}
/* 页脚 */
footer {
background:#5c346b;
color:#f1d8f7;
text-align:center;
padding:30px;
font-size:0.9rem;
}
/* ================= 新增:中秋话剧专属样式 ================= */
/* 年份横向滚动栏 */
.year-scroll-wrap {
overflow-x: auto;
margin:12px 0;
padding-bottom:4px;
/* 新增:移动端惯性滚动,提升滑动手感 */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.year-scroll-wrap::-webkit-scrollbar {
display: none;
}
.year-tab-row {
display:flex;
gap:10px;
width:max-content;
}
/* 多选筛选标签行 */
.filter-check-row {
display:flex;
flex-wrap:wrap;
gap:14px;
justify-content:center;
margin-bottom:20px;
}
.filter-check-item {
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
}
.filter-check-item input {
width:16px;
height:16px;
accent-color: var(--primary);
}
/* 中秋套装卡片:男女套并排 */
.mid-set-grid {
display:grid;
grid-template-columns: repeat(3,1fr);
gap:18px;
}
.mid-set-card {
background: var(--secondary);
border-radius:14px;
padding:12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mid-set-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(200,110,216,0.18);
}
.mid-img-row {
display:flex;
gap:8px;
}
.mid-img-row img {
width: calc(50% - 4px);
border-radius:10px;
aspect-ratio: 3/4;
object-fit:cover;
cursor:zoom-in;
}
.mid-set-name {
text-align:center;
margin-top:10px;
font-size:14px;
font-weight:500;
}
.mid-set-desc {
text-align:center;
font-size:12px;
color:var(--gray-500);
margin-top:4px;
}
/* 大图弹窗 */
.img-modal {
position:fixed;
inset:0;
background:rgba(0,0,0,0.82);
z-index:1000;
display:none;
align-items:center;
justify-content:center;
padding:20px;
}
.img-modal.show {
display:flex;
}
.img-modal img {
max-width:90vw;
max-height:90vh;
border-radius:12px;
}
.modal-close-btn {
position:absolute;
top:20px;
right:26px;
color:#fff;
font-size:36px;
cursor:pointer;
}
/* 响应式适配 */
@media (max-width: 900px) {
.clothes-grid {
grid-template-columns: repeat(3, 1fr);
}
.mid-set-grid {
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width:768px) {
.nav-links {
display:none;
}
.price-grid {
grid-template-columns: 1fr;
}
.price-card.recommend {
transform: scale(1);
}
.contact-wrap {
grid-template-columns:1fr;
padding:24px;
}
.hero h1 {
font-size:1.8rem;
}
/* 新增:移动端区块内边距优化 */
section {
padding: 40px 0;
}
.hero {
padding: 60px 20px;
}
.main-content-wrap {
padding: 20px;
}
.section-title {
font-size: 1.5rem;
}
/* 新增:悬浮按钮移动端适配,避免遮挡 */
.float-cta {
bottom: 16px;
right: 16px;
}
.float-cta a {
padding: 12px 20px;
font-size: 0.9rem;
}
}
@media (max-width: 600px) {
.clothes-grid {
grid-template-columns: repeat(2, 1fr);
}
.mid-set-grid {
grid-template-columns: 1fr;
}
.main-tabs,.sub-tabs {
gap:8px;
}
.main-tab,.sub-tab {
font-size:0.85rem;
padding:7px 12px;
}
}
</style>
</head>
<body>
<!-- 导航 -->
<nav>
<div class="nav-wrap">
<div class="logo">🌸小花仙代肝接单</div>
<div class="nav-links">
<a href="#service">服务介绍</a>
<a href="#gallery">图鉴预览</a>
<a href="#price">价格套餐</a>
<a href="#faq">常见问题</a>
<a href="#contact">联系我</a>
</div>
</div>
</nav>
<!-- 首屏 -->
<div class="hero">
<h1>🌸小花仙代肝接单</h1>
<p>周年套装|新年庙会|花精灵|花精灵王|花神之灵|地心历险记|恶德花园|月灵之森|导师计划</p>
<a href="#contact" class="btn btn-primary">立即咨询下单</a>
</div>
<!-- 服务介绍 -->
<section id="service">
<div class="container">
<h2 class="section-title">服务范围</h2>
<p class="section-desc">长期稳定代肝,图鉴、套装、收集类活动都可接,诚信交易</p>
<div class="price-card">
<ul>
<li>✅ 周年套装(二/五/六/七/八/九周年、周年全包)</li>
<li>✅ 新年庙会、花精灵、花精灵王、花神之灵收集</li>
<li>✅ 地心历险记、恶德花园、月灵之森、导师计划</li>
<li>✅ 下单前看图确认,可补缺件,无隐形消费</li>
</ul>
</div>
</div>
</section>
<!-- ========== 图鉴预览区域(核心:一级大类标签) ========== -->
<section id="gallery">
<div class="container">
<h2 class="section-title">代肝项目</h2>
<p class="section-desc">点击上方大类切换;周年套装内还有细分小分类</p>
<!-- 一级大类标签(新增中秋话剧) -->
<div class="main-tabs">
<div class="main-tab active" data-target="cat-anni">周年套装</div>
<div class="main-tab" data-target="cat-newyear">新年庙会</div>
<div class="main-tab" data-target="cat-fairy">花精灵</div>
<div class="main-tab" data-target="cat-fairyking">花精灵王/花神之灵</div>
<div class="main-tab" data-target="cat-di">地心历险记</div>
<div class="main-tab" data-target="cat-ede">恶德花园</div>
<div class="main-tab" data-target="cat-moon">月灵之森</div>
<div class="main-tab" data-target="cat-tutor">导师计划</div>
<div class="main-tab" data-target="cat-midautumn">中秋话剧(2011–2026)</div>
</div>
<!-- 1. 周年套装大类(带二级子标签) -->
<div class="main-content-wrap active" id="cat-anni">
<p class="desc-text">周年系列套装合集,点击下方小标签切换不同周年</p>
<!-- 修改:添加id,修复类名冲突导致的JS报错 -->
<div class="sub-tabs" id="anni-sub-tabs">
<div class="sub-tab active" data-sub="anni-2">二周年</div>
<div class="sub-tab" data-sub="anni-5">五周年</div>
<div class="sub-tab" data-sub="anni-6">六周年</div>
<div class="sub-tab" data-sub="anni-7">七周年</div>
<div class="sub-tab" data-sub="anni-8">八周年</div>
<div class="sub-tab" data-sub="anni-9">九周年</div>
<div class="sub-tab" data-sub="anni-all">周年全包</div>
</div>
<!-- 子内容:二周年 -->
<div class="sub-content active" id="anni-2">
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/anni2-1.jpg" alt="二周年发型">
<div class="clothes-name">二周年发型</div>
</div>
<div class="clothes-item">
<img src="images/anni2-2.jpg" alt="二周年头饰">
<div class="clothes-name">二周年头饰</div>
</div>
<div class="clothes-item">
<img src="images/anni2-3.jpg" alt="二周年礼裙">
<div class="clothes-name">二周年礼裙</div>
</div>
<div class="clothes-item">
<img src="images/anni2-4.jpg" alt="二周年鞋子">
<div class="clothes-name">二周年鞋子</div>
</div>
</div>
</div>
<!-- 子内容:五周年 -->
<div class="sub-content" id="anni-5">
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/anni5-1.jpg" alt="五周年发型">
<div class="clothes-name">五周年发型</div>
</div>
<div class="clothes-item">
<img src="images/anni5-2.jpg" alt="五周年头饰">
<div class="clothes-name">五周年头饰</div>
</div>
<div class="clothes-item">
<img src="images/anni5-3.jpg" alt="五周年礼裙">
<div class="clothes-name">五周年礼裙</div>
</div>
<div class="clothes-item">
<img src="images/anni5-4.jpg" alt="五周年鞋子">
<div class="clothes-name">五周年鞋子</div>
</div>
</div>
</div>
<!-- 子内容:六周年 -->
<div class="sub-content" id="anni-6">
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/anni6-1.jpg" alt="六周年发型">
<div class="clothes-name">六周年发型</div>
</div>
<div class="clothes-item">
<img src="images/anni6-2.jpg" alt="六周年头饰">
<div class="clothes-name">六周年头饰</div>
</div>
<div class="clothes-item">
<img src="images/anni6-3.jpg" alt="六周年礼裙">
<div class="clothes-name">六周年礼裙</div>
</div>
<div class="clothes-item">
<img src="images/anni6-4.jpg" alt="六周年鞋子">
<div class="clothes-name">六周年鞋子</div>
</div>
</div>
</div>
<!-- 子内容:七周年 -->
<div class="sub-content" id="anni-7">
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/anni7-1.jpg" alt="七周年发型">
<div class="clothes-name">七周年发型</div>
</div>
<div class="clothes-item">
<img src="images/anni7-2.jpg" alt="七周年头饰">
<div class="clothes-name">七周年头饰</div>
</div>
<div class="clothes-item">
<img src="images/anni7-3.jpg" alt="七周年礼裙">
<div class="clothes-name">七周年礼裙</div>
</div>
<div class="clothes-item">
<img src="images/anni7-4.jpg" alt="七周年鞋子">
<div class="clothes-name">七周年鞋子</div>
</div>
</div>
</div>
<!-- 子内容:八周年 -->
<div class="sub-content" id="anni-8">
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/anni8-1.jpg" alt="八周年发型">
<div class="clothes-name">八周年发型</div>
</div>
<div class="clothes-item">
<img src="images/anni8-2.jpg" alt="八周年头饰">
<div class="clothes-name">八周年头饰</div>
</div>
<div class="clothes-item">
<img src="images/anni8-3.jpg" alt="八周年礼裙">
<div class="clothes-name">八周年礼裙</div>
</div>
<div class="clothes-item">
<img src="images/anni8-4.jpg" alt="八周年鞋子">
<div class="clothes-name">八周年鞋子</div>
</div>
</div>
</div>
<!-- 子内容:九周年 -->
<div class="sub-content" id="anni-9">
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/image9-5.jpg" alt="套装1">
<div class="clothes-name">樱桃之梦套装</div>
</div>
<div class="clothes-item">
<img src="images/anni9-2.jpg" alt="九周年头饰">
<div class="clothes-name">九周年头饰</div>
</div>
<div class="clothes-item">
<img src="images/anni9-3.jpg" alt="九周年礼裙">
<div class="clothes-name">九周年礼裙</div>
</div>
<div class="clothes-item">
<img src="images/anni9-4.jpg" alt="九周年鞋子">
<div class="clothes-name">九周年鞋子</div>
</div>
</div>
</div>
<!-- 子内容:全包 -->
<div class="sub-content" id="anni-all">
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/all-1.jpg" alt="二周年全套">
<div class="clothes-name">二周年全套</div>
</div>
<div class="clothes-item">
<img src="images/all-2.jpg" alt="五周年全套">
<div class="clothes-name">五周年全套</div>
</div>
<div class="clothes-item">
<img src="images/all-3.jpg" alt="六周年全套">
<div class="clothes-name">六周年全套</div>
</div>
<div class="clothes-item">
<img src="images/all-4.jpg" alt="七周年全套">
<div class="clothes-name">七周年全套</div>
</div>
<div class="clothes-item">
<img src="images/all-5.jpg" alt="八周年全套">
<div class="clothes-name">八周年全套</div>
</div>
<div class="clothes-item">
<img src="images/all-6.jpg" alt="九周年全套">
<div class="clothes-name">九周年全套</div>
</div>
</div>
</div>
</div>
<!-- 2.新年庙会 -->
<div class="main-content-wrap" id="cat-newyear">
<p class="desc-text">新年庙会套装、活动部件收集代肝</p>
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/newyear-1.jpg" alt="庙会套装1">
<div class="clothes-name">新年庙会套装一</div>
</div>
<div class="clothes-item">
<img src="images/newyear-2.jpg" alt="庙会套装2">
<div class="clothes-name">新年庙会套装二</div>
</div>
<div class="clothes-item">
<img src="images/newyear-3.jpg" alt="庙会部件">
<div class="clothes-name">庙会手持</div>
</div>
<div class="clothes-item">
<img src="images/newyear-4.jpg" alt="庙会背景">
<div class="clothes-name">庙会背景</div>
</div>
</div>
</div>
<!-- 3.花精灵 -->
<div class="main-content-wrap" id="cat-fairy">
<p class="desc-text">可获得的花精灵图鉴收集代肝</p>
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/fairy-1.jpg" alt="花精灵A">
<div class="clothes-name">花精灵A</div>
</div>
<div class="clothes-item">
<img src="images/fairy-2.jpg" alt="花精灵B">
<div class="clothes-name">花精灵B</div>
</div>
<div class="clothes-item">
<img src="images/fairy-3.jpg" alt="花精灵C">
<div class="clothes-name">花精灵C</div>
</div>
<div class="clothes-item">
<img src="images/fairy-4.jpg" alt="花精灵D">
<div class="clothes-name">花精灵D</div>
</div>
<div class="clothes-item">
<img src="images/fairy-4.jpg" alt="花精灵E">
<div class="clothes-name">花精灵E</div>
</div>
</div>
</div>
</div>
<!-- 4.花精灵王 -->
<div class="main-content-wrap" id="cat-fairyking">
<p class="desc-text">花精灵王图鉴、进化、套装代肝</p>
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/fk-1.jpg" alt="花精灵王1">
<div class="clothes-name">花精灵王1</div>
</div>
<div class="clothes-item">
<img src="images/fk-2.jpg" alt="花精灵王2">
<div class="clothes-name">花精灵王2</div>
</div>
<div class="clothes-item">
<img src="images/fk-3.jpg" alt="花精灵王3">
<div class="clothes-name">花精灵王3</div>
</div>
<div class="clothes-item">
<img src="images/fk-4.jpg" alt="花精灵王4">
<div class="clothes-name">花精灵王4</div>
</div>
<div class="clothes-item">
<img src="images/fk-3.jpg" alt="花精灵王3">
<div class="clothes-name">花精灵王3</div>
</div>
</div>
</div>
</div>
<!-- 6.地心历险记 -->
<div class="main-content-wrap" id="cat-di">
<p class="desc-text">地心历险记活动套装、道具收集</p>
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/di-1.jpg" alt="地心套装1">
<div class="clothes-name">地心套装1</div>
</div>
<div class="clothes-item">
<img src="images/di-2.jpg" alt="地心套装2">
<div class="clothes-name">地心套装2</div>
</div>
<div class="clothes-item">
<img src="images/di-3.jpg" alt="地心手持">
<div class="clothes-name">地心手持</div>
</div>
<div class="clothes-item">
<img src="images/di-4.jpg" alt="地心背景">
<div class="clothes-name">地心背景</div>
</div>
</div>
</div>
<!-- 7.恶德花园 -->
<div class="main-content-wrap" id="cat-ede">
<p class="desc-text">恶德花园套装、角色部件收集</p>
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/ede-1.jpg" alt="恶德套装1">
<div class="clothes-name">恶德套装1</div>
</div>
<div class="clothes-item">
<img src="images/ede-2.jpg" alt="恶德套装2">
<div class="clothes-name">恶德套装2</div>
</div>
<div class="clothes-item">
<img src="images/ede-3.jpg" alt="恶德头饰">
<div class="clothes-name">恶德头饰</div>
</div>
<div class="clothes-item">
<img src="images/ede-4.jpg" alt="恶德礼服">
<div class="clothes-name">恶德礼服</div>
</div>
</div>
</div>
<!-- 8.月灵之森 -->
<div class="main-content-wrap" id="cat-moon">
<p class="desc-text">月灵之森套装、月灵收集代肝</p>
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/moon-1.jpg" alt="月灵套装1">
<div class="clothes-name">月灵套装1</div>
</div>
<div class="clothes-item">
<img src="images/moon-2.jpg" alt="月灵套装2">
<div class="clothes-name">月灵套装2</div>
</div>
<div class="clothes-item">
<img src="images/moon-3.jpg" alt="月灵发型">
<div class="clothes-name">月灵发型</div>
</div>
<div class="clothes-item">
<img src="images/moon-4.jpg" alt="月灵裙子">
<div class="clothes-name">月灵裙子</div>
</div>
</div>
</div>
<!-- 9.导师计划 -->
<div class="main-content-wrap" id="cat-tutor">
<p class="desc-text">导师计划套装、奖励收集代肝</p>
<div class="clothes-grid">
<div class="clothes-item">
<img src="images/tutor-1.jpg" alt="导师套装1">
<div class="clothes-name">导师套装1</div>
</div>
<div class="clothes-item">
<img src="images/tutor-2.jpg" alt="导师套装2">
<div class="clothes-name">导师套装2</div>
</div>
<div class="clothes-item">
<img src="images/tutor-3.jpg" alt="导师头饰">
<div class="clothes-name">导师头饰</div>
</div>
<div class="clothes-item">
<img src="images/tutor-4.jpg" alt="导师礼服">
<div class="clothes-name">导师礼服</div>
</div>
</div>
</div>
<!-- ========== 新增:中秋话剧(2011–2026) ========== -->
<div class="main-content-wrap" id="cat-midautumn">
<p class="desc-text">中秋话剧历年奖励,含种花套装/抽奖/观看话剧</p>
<!-- 年份横向滚动标签 -->
<div class="year-scroll-wrap">
<div class="year-tab-row" id="yearTabRow"></div>
</div>
<!-- 多选筛选框 -->
<div class="filter-check-row">
<label class="filter-check-item">
<input type="checkbox" value="flower"> 需要种花兑换
</label>
<label class="filter-check-item">
<input type="checkbox" value="lottery"> 需要抽奖
</label>
<label class="filter-check-item">
<input type="checkbox" value="watch"> 看话剧可得
</label>
</div>
<!-- 套装渲染容器 -->
<div class="mid-set-grid" id="midSetGrid"></div>
/div>
</div>
</section>
<!-- FAQ 可折叠问答 -->
<section id="faq">
<div class="container">
<h2 class="section-title">常见问题 FAQ</h2>
<p class="section-desc">下单前可以先看,减少疑问</p>
<div class="faq-wrap">
<div class="faq-item">
<div class="faq-question">多久可以肝完?<span>+</span></div>
<div class="faq-answer">
<div class="faq-answer-inner"> 开工后,大量合集看排单,下单前说好工期,加急可以沟通。</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">交易方式是怎样的?<span>+</span></div>
<div class="faq-answer">
<div class="faq-answer-inner">支持定金+尾款,定金开工,完工截图确认后结清尾款,小额全款,走你放心的渠道。</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">会盗号乱花资源吗?<span>+</span></div>
<div class="faq-answer">
<div class="faq-answer-inner">只做约定好的收集内容,不动珍稀花朵、神叶、灵豆,长期接单信誉稳定。</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">可以中途看进度吗?<span>+</span></div>
<div class="faq-answer">
<div class="faq-answer-inner">可以!打完同步进度,上号下号都会发信息。</div>
</div>
</div>
<div class="faq-item">
<div class="faq-question">可以退款吗?<span>+</span></div>
<div class="faq-answer">
<div class="faq-answer-inner">未开工可全额退;已经开始代肝,按已完成进度协商退款,恶意跑单不退。</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系模块 -->
<section id="contact">
<div class="container">
<h2 class="section-title">联系我下单</h2>
<p class="section-desc">下单记得说明想要哪个图鉴、套装</p>
<div class="contact-wrap">
<div class="contact-info">
<h3>联系方式</h3>
<p>💬 <strong>微信:</strong>wwww123456_p</p>
<p>🌸 <strong>游戏:</strong>小花仙</p>
<p>⏰ <strong>接单时间:</strong>早10:00 — 晚23:00</p>
<p>📌 <strong>备注:</strong>咨询时说明:需要打什么项目、是否加急</p>
</div>
<form class="contact-form">
<input type="text" placeholder="你的昵称" required>
<input type="text" placeholder="想要的图鉴:周年/花精灵王等" required>
<textarea placeholder="补充说明:是否加急、缺什么部件等"></textarea>
<a href="#contact" class="btn btn-primary" style="width:100%;text-align:center;">提交咨询</a>
</form>
</div>
</div>
</section>
<!-- 大图弹窗 -->
<div class="img-modal" id="imgModal">
<span class="modal-close-btn" id="modalClose">×</span>
<img id="modalImg" src="" alt="放大图">
</div>
<!-- 悬浮咨询按钮 -->
<div class="float-cta">
<a href="#contact">💬 咨询下单</a>
</div>
<footer>
© 2026 池厌小花仙代肝|诚信接单,安全可靠
</footer>
<script>
// ========== 一级大类切换 ==========
const mainTabs = document.querySelectorAll('.main-tab');
const mainContents = document.querySelectorAll('.main-content-wrap');
mainTabs.forEach(tab=>{
tab.onclick = ()=>{
mainTabs.forEach(t=>t.classList.remove('active'));
mainContents.forEach(c=>c.classList.remove('active'));
tab.classList.add('active');
const targetId = tab.dataset.target;
document.getElementById(targetId).classList.add('active');
}
})
// ========== 周年内部二级子标签切换 ==========
// 修改:限定选择器范围,修复与中秋年份按钮类名冲突的bug
const subTabs = document.querySelectorAll('#anni-sub-tabs .sub-tab');
const subContents = document.querySelectorAll('.sub-content');
subTabs.forEach(tab=>{
tab.onclick = ()=>{
subTabs.forEach(t=>t.classList.remove('active'));
subContents.forEach(c=>c.classList.remove('active'));
tab.classList.add('active');
const subId = tab.dataset.sub;
document.getElementById(subId).classList.add('active');
}
})
// ========== FAQ折叠 ==========
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item=>{
const q = item.querySelector('.faq-question');
q.onclick = ()=>{
item.classList.toggle('open');
const sign = q.querySelector('span');
sign.textContent = item.classList.contains('open') ? '-' : '+';
}
})
// ====================== 中秋话剧JS逻辑 ======================
// 年份列表
const yearList = Array.from({length:16},(_,i)=>2011+i);
// 中秋话剧套装数据,在这里新增套装
// 中秋话剧套装数据,在这里新增套装
const midAutumnSetData = [
// ========== 2011年 6套 ==========
{year:2011, tags:["watch"], setName:"2011中秋·月桂套装", femaleImg:"images/mid2011-1-f.jpg", maleImg:"images/mid2011-1-m.jpg", desc:"看话剧可得"},
{year:2011, tags:["flower"], setName:"2011中秋·桂影套装", femaleImg:"images/mid2011-2-f.jpg", maleImg:"images/mid2011-2-m.jpg", desc:"种花兑换"},
{year:2011, tags:["lottery"], setName:"2011中秋·月华套装", femaleImg:"images/mid2011-3-f.jpg", maleImg:"images/mid2011-3-m.jpg", desc:"抽奖获取"},
{year:2011, tags:["watch","flower"], setName:"2011中秋·霜兔套装", femaleImg:"images/mid2011-4-f.jpg", maleImg:"images/mid2011-4-m.jpg", desc:"种花+话剧"},
{year:2011, tags:["lottery"], setName:"2011中秋·银辉套装", femaleImg:"images/mid2011-5-f.jpg", maleImg:"images/mid2011-5-m.jpg", desc:"抽奖获取"},
{year:2011, tags:["watch"], setName:"2011中秋·桂香套装", femaleImg:"images/mid2011-6-f.jpg", maleImg:"images/mid2011-6-m.jpg", desc:"看话剧可得"},
// ========== 2012年 6套 ==========
{year:2012, tags:["watch"], setName:"2012中秋·婵娟套装", femaleImg:"images/mid2012-1-f.jpg", maleImg:"images/mid2012-1-m.jpg", desc:"看话剧可得"},
{year:2012, tags:["flower"], setName:"2012中秋·荷露套装", femaleImg:"images/mid2012-2-f.jpg", maleImg:"images/mid2012-2-m.jpg", desc:"种花兑换"},
{year:2012, tags:["lottery"], setName:"2012中秋·云锦套装", femaleImg:"images/mid2012-3-f.jpg", maleImg:"images/mid2012-3-m.jpg", desc:"抽奖获取"},
{year:2012, tags:["watch","lottery"], setName:"2012中秋·秋夕套装", femaleImg:"images/mid2012-4-f.jpg", maleImg:"images/mid2012-4-m.jpg", desc:"抽奖+话剧"},
{year:2012, tags:["flower"], setName:"2012中秋·月露套装", femaleImg:"images/mid2012-5-f.jpg", maleImg:"images/mid2012-5-m.jpg", desc:"种花兑换"},
{year:2012, tags:["watch"], setName:"2012中秋·清辉套装", femaleImg:"images/mid2012-6-f.jpg", maleImg:"images/mid2012-6-m.jpg", desc:"看话剧可得"},
// ========== 2013年 6套 ==========
{year:2013, tags:["watch"], setName:"2013中秋·瑶月套装", femaleImg:"images/mid2013-1-f.jpg", maleImg:"images/mid2013-1-m.jpg", desc:"看话剧可得"},
{year:2013, tags:["flower"], setName:"2013中秋·菊蕊套装", femaleImg:"images/mid2013-2-f.jpg", maleImg:"images/mid2013-2-m.jpg", desc:"种花兑换"},
{year:2013, tags:["lottery"], setName:"2013中秋·星河套装", femaleImg:"images/mid2013-3-f.jpg", maleImg:"images/mid2013-3-m.jpg", desc:"抽奖获取"},
{year:2013, tags:["flower","watch"], setName:"2013中秋·桂月套装", femaleImg:"images/mid2013-4-f.jpg", maleImg:"images/mid2013-4-m.jpg", desc:"种花+话剧"},
{year:2013, tags:["lottery"], setName:"2013中秋·寒宫套装", femaleImg:"images/mid2013-5-f.jpg", maleImg:"images/mid2013-5-m.jpg", desc:"抽奖获取"},
{year:2013, tags:["watch"], setName:"2013中秋·秋韵套装", femaleImg:"images/mid2013-6-f.jpg", maleImg:"images/mid2013-6-m.jpg", desc:"看话剧可得"},
// ========== 2014年 6套 ==========
{year:2014, tags:["watch"], setName:"2014中秋·曦月套装", femaleImg:"images/mid2014-1-f.jpg", maleImg:"images/mid2014-1-m.jpg", desc:"看话剧可得"},
{year:2014, tags:["flower"], setName:"2014中秋·芙蓉套装", femaleImg:"images/mid2014-2-f.jpg", maleImg:"images/mid2014-2-m.jpg", desc:"种花兑换"},
{year:2014, tags:["lottery"], setName:"2014中秋·琉璃套装", femaleImg:"images/mid2014-3-f.jpg", maleImg:"images/mid2014-3-m.jpg", desc:"抽奖获取"},
{year:2014, tags:["watch","lottery"], setName:"2014中秋·月影套装", femaleImg:"images/mid2014-4-f.jpg", maleImg:"images/mid2014-4-m.jpg", desc:"抽奖+话剧"},
{year:2014, tags:["flower"], setName:"2014中秋·银桂套装", femaleImg:"images/mid2014-5-f.jpg", maleImg:"images/mid2014-5-m.jpg", desc:"种花兑换"},
{year:2014, tags:["watch"], setName:"2014中秋·清秋套装", femaleImg:"images/mid2014-6-f.jpg", maleImg:"images/mid2014-6-m.jpg", desc:"看话剧可得"},
// ========== 2015年 6套 ==========
{year:2015, tags:["watch"], setName:"2015中秋·皓月套装", femaleImg:"images/mid2015-1-f.jpg", maleImg:"images/mid2015-1-m.jpg", desc:"看话剧可得"},
{year:2015, tags:["flower"], setName:"2015中秋·月见套装", femaleImg:"images/mid2015-2-f.jpg", maleImg:"images/mid2015-2-m.jpg", desc:"种花兑换"},
{year:2015, tags:["lottery"], setName:"2015中秋·星屑套装", femaleImg:"images/mid2015-3-f.jpg", maleImg:"images/mid2015-3-m.jpg", desc:"抽奖获取"},
{year:2015, tags:["flower","watch"], setName:"2015中秋·桂露套装", femaleImg:"images/mid2015-4-f.jpg", maleImg:"images/mid2015-4-m.jpg", desc:"种花+话剧"},
{year:2015, tags:["lottery"], setName:"2015中秋·广寒套装", femaleImg:"images/mid2015-5-f.jpg", maleImg:"images/mid2015-5-m.jpg", desc:"抽奖获取"},
{year:2015, tags:["watch"], setName:"2015中秋·霜月套装", femaleImg:"images/mid2015-6-f.jpg", maleImg:"images/mid2015-6-m.jpg", desc:"看话剧可得"},
// ========== 2016年 6套 ==========
{year:2016, tags:["watch"], setName:"2016中秋·璧月套装", femaleImg:"images/mid2016-1-f.jpg", maleImg:"images/mid2016-1-m.jpg", desc:"看话剧可得"},
{year:2016, tags:["flower"], setName:"2016中秋·金桂套装", femaleImg:"images/mid2016-2-f.jpg", maleImg:"images/mid2016-2-m.jpg", desc:"种花兑换"},
{year:2016, tags:["lottery"], setName:"2016中秋·云霓套装", femaleImg:"images/mid2016-3-f.jpg", maleImg:"images/mid2016-3-m.jpg", desc:"抽奖获取"},
{year:2016, tags:["watch","lottery"], setName:"2016中秋·月轮套装", femaleImg:"images/mid2016-4-f.jpg", maleImg:"images/mid2016-4-m.jpg", desc:"抽奖+话剧"},
{year:2016, tags:["flower"], setName:"2016中秋·秋兰套装", femaleImg:"images/mid2016-5-f.jpg", maleImg:"images/mid2016-5-m.jpg", desc:"种花兑换"},
{year:2016, tags:["watch"], setName:"2016中秋·素月套装", femaleImg:"images/mid2016-6-f.jpg", maleImg:"images/mid2016-6-m.jpg", desc:"看话剧可得"},
// ========== 2017年 6套 ==========
{year:2017, tags:["watch"], setName:"2017中秋·望月套装", femaleImg:"images/mid2017-1-f.jpg", maleImg:"images/mid2017-1-m.jpg", desc:"看话剧可得"},
{year:2017, tags:["flower"], setName:"2017中秋·丹桂套装", femaleImg:"images/mid2017-2-f.jpg", maleImg:"images/mid2017-2-m.jpg", desc:"种花兑换"},
{year:2017, tags:["lottery"], setName:"2017中秋·银河套装", femaleImg:"images/mid2017-3-f.jpg", maleImg:"images/mid2017-3-m.jpg", desc:"抽奖获取"},
{year:2017, tags:["flower","watch"], setName:"2017中秋·月汐套装", femaleImg:"images/mid2017-4-f.jpg", maleImg:"images/mid2017-4-m.jpg", desc:"种花+话剧"},
{year:2017, tags:["lottery"], setName:"2017中秋·灵兔套装", femaleImg:"images/mid2017-5-f.jpg", maleImg:"images/mid2017-5-m.jpg", desc:"抽奖获取"},
{year:2017, tags:["watch"], setName:"2017中秋·金波套装", femaleImg:"images/mid2017-6-f.jpg", maleImg:"images/mid2017-6-m.jpg", desc:"看话剧可得"},
// ========== 2018年 6套 ==========
{year:2018, tags:["watch"], setName:"2018中秋·朗月套装", femaleImg:"images/mid2018-1-f.jpg", maleImg:"images/mid2018-1-m.jpg", desc:"看话剧可得"},
{year:2018, tags:["flower"], setName:"2018中秋·月桂套装", femaleImg:"images/mid2018-2-f.jpg", maleImg:"images/mid2018-2-m.jpg", desc:"种花兑换"},
{year:2018, tags:["lottery"], setName:"2018中秋·星芒套装", femaleImg:"images/mid2018-3-f.jpg", maleImg:"images/mid2018-3-m.jpg", desc:"抽奖获取"},
{year:2018, tags:["watch","lottery"], setName:"2018中秋·霜华套装", femaleImg:"images/mid2018-4-f.jpg", maleImg:"images/mid2018-4-m.jpg", desc:"抽奖+话剧"},
{year:2018, tags:["flower"], setName:"2018中秋·银粟套装", femaleImg:"images/mid2018-5-f.jpg", maleImg:"images/mid2018-5-m.jpg", desc:"种花兑换"},
{year:2018, tags:["watch"], setName:"2018中秋·秋宵套装", femaleImg:"images/mid2018-6-f.jpg", maleImg:"images/mid2018-6-m.jpg", desc:"看话剧可得"},
// ========== 2019年 6套 ==========
{year:2019, tags:["watch"], setName:"2019中秋·满月套装", femaleImg:"images/mid2019-1-f.jpg", maleImg:"images/mid2019-1-m.jpg", desc:"看话剧可得"},
{year:2019, tags:["flower"], setName:"2019中秋·桂华套装", femaleImg:"images/mid2019-2-f.jpg", maleImg:"images/mid2019-2-m.jpg", desc:"种花兑换"},
{year:2019, tags:["lottery"], setName:"2019中秋·云影套装", femaleImg:"images/mid2019-3-f.jpg", maleImg:"images/mid2019-3-m.jpg", desc:"抽奖获取"},
{year:2019, tags:["flower","watch"], setName:"2019中秋·月魄套装", femaleImg:"images/mid2019-4-f.jpg", maleImg:"images/mid2019-4-m.jpg", desc:"种花+话剧"},
{year:2019, tags:["lottery"], setName:"2019中秋·玉兔套装", femaleImg:"images/mid2019-5-f.jpg", maleImg:"images/mid2019-5-m.jpg", desc:"抽奖获取"},
{year:2019, tags:["watch"], setName:"2019中秋·清秋月套装", femaleImg:"images/mid2019-6-f.jpg", maleImg:"images/mid2019-6-m.jpg", desc:"看话剧可得"},
// ========== 2020年 6套 ==========
{year:2020, tags:["watch"], setName:"2020中秋·玄月套装", femaleImg:"images/mid2020-1-f.jpg", maleImg:"images/mid2020-1-m.jpg", desc:"看话剧可得"},
{year:2020, tags:["flower"], setName:"2020中秋·金粟套装", femaleImg:"images/mid2020-2-f.jpg", maleImg:"images/mid2020-2-m.jpg", desc:"种花兑换"},
{year:2020, tags:["lottery"], setName:"2020中秋·星轨套装", femaleImg:"images/mid2020-3-f.jpg", maleImg:"images/mid2020-3-m.jpg", desc:"抽奖获取"},
{year:2020, tags:["watch","lottery"], setName:"2020中秋·月镜套装", femaleImg:"images/mid2020-4-f.jpg", maleImg:"images/mid2020-4-m.jpg", desc:"抽奖+话剧"},
{year:2020, tags:["flower"], setName:"2020中秋·露华套装", femaleImg:"images/mid2020-5-f.jpg", maleImg:"images/mid2020-5-m.jpg", desc:"种花兑换"},
{year:2020, tags:["watch"], setName:"2020中秋·凉秋套装", femaleImg:"images/mid2020-6-f.jpg", maleImg:"images/mid2020-6-m.jpg", desc:"看话剧可得"},
// ========== 2021年 6套 ==========
{year:2021, tags:["watch"], setName:"2021中秋·沧月套装", femaleImg:"images/mid2021-1-f.jpg", maleImg:"images/mid2021-1-m.jpg", desc:"看话剧可得"},
{year:2021, tags:["flower"], setName:"2021中秋·月桂语套装", femaleImg:"images/mid2021-2-f.jpg", maleImg:"images/mid2021-2-m.jpg", desc:"种花兑换"},
{year:2021, tags:["lottery"], setName:"2021中秋·星落套装", femaleImg:"images/mid2021-3-f.jpg", maleImg:"images/mid2021-3-m.jpg", desc:"抽奖获取"},
{year:2021, tags:["flower","watch"], setName:"2021中秋·桂雨套装", femaleImg:"images/mid2021-4-f.jpg", maleImg:"images/mid2021-4-m.jpg", desc:"种花+话剧"},
{year:2021, tags:["lottery"], setName:"2021中秋·银汉套装", femaleImg:"images/mid2021-5-f.jpg", maleImg:"images/mid2021-5-m.jpg", desc:"抽奖获取"},
{year:2021, tags:["watch"], setName:"2021中秋·月夕套装", femaleImg:"images/mid2021-6-f.jpg", maleImg:"images/mid2021-6-m.jpg", desc:"看话剧可得"},
// ========== 2022年 6套 ==========
{year:2022, tags:["watch"], setName:"2022中秋·星河套装", femaleImg:"images/mid2022-1-f.jpg", maleImg:"images/mid2022-1-m.jpg", desc:"看话剧可得"},
{year:2022, tags:["flower"], setName:"2022中秋·桂序套装", femaleImg:"images/mid2022-2-f.jpg", maleImg:"images/mid2022-2-m.jpg", desc:"种花兑换"},
{year:2022, tags:["lottery"], setName:"2022中秋·月冕套装", femaleImg:"images/mid2022-3-f.jpg", maleImg:"images/mid2022-3-m.jpg", desc:"抽奖获取"},
{year:2022, tags:["lottery","watch"], setName:"2022中秋·云月套装", femaleImg:"images/mid2022-4-f.jpg", maleImg:"images/mid2022-4-m.jpg", desc:"抽奖+话剧"},
{year:2022, tags:["flower"], setName:"2022中秋·秋萤套装", femaleImg:"images/mid2022-5-f.jpg", maleImg:"images/mid2022-5-m.jpg", desc:"种花兑换"},
{year:2022, tags:["watch"], setName:"2022中秋·银阙套装", femaleImg:"images/mid2022-6-f.jpg", maleImg:"images/mid2022-6-m.jpg", desc:"看话剧可得"},
// ========== 2023年 6套 ==========
{year:2023, tags:["watch"], setName:"2023中秋·盈月套装", femaleImg:"images/mid2023-1-f.jpg", maleImg:"images/mid2023-1-m.jpg", desc:"看话剧可得"},
{year:2023, tags:["flower"], setName:"2023中秋·金桂谣套装", femaleImg:"images/mid2023-2-f.jpg", maleImg:"images/mid2023-2-m.jpg", desc:"种花兑换"},
{year:2023, tags:["lottery"], setName:"2023中秋·星纱套装", femaleImg:"images/mid2023-3-f.jpg", maleImg:"images/mid2023-3-m.jpg", desc:"抽奖获取"},
{year:2023, tags:["flower","watch"], setName:"2023中秋·月檀套装", femaleImg:"images/mid2023-4-f.jpg", maleImg:"images/mid2023-4-m.jpg", desc:"种花+话剧"},
{year:2023, tags:["lottery"], setName:"2023中秋·雾月套装", femaleImg:"images/mid2023-5-f.jpg", maleImg:"images/mid2023-5-m.jpg", desc:"抽奖获取"},
{year:2023, tags:["watch"], setName:"2023中秋·清秋宴套装", femaleImg:"images/mid2023-6-f.jpg", maleImg:"images/mid2023-6-m.jpg", desc:"看话剧可得"},
// ========== 2024年 6套 ==========
{year:2024, tags:["watch"], setName:"2024中秋·昭月套装", femaleImg:"images/mid2024-1-f.jpg", maleImg:"images/mid2024-1-m.jpg", desc:"看话剧可得"},
{year:2024, tags:["flower"], setName:"2024中秋·月桂诗套装", femaleImg:"images/mid2024-2-f.jpg", maleImg:"images/mid2024-2-m.jpg", desc:"种花兑换"},
{year:2024, tags:["lottery"], setName:"2024中秋·星垂套装", femaleImg:"images/mid2024-3-f.jpg", maleImg:"images/mid2024-3-m.jpg", desc:"抽奖获取"},
{year:2024, tags:["watch","lottery"], setName:"2024中秋·桂月吟套装", femaleImg:"images/mid2024-4-f.jpg", maleImg:"images/mid2024-4-m.jpg", desc:"抽奖+话剧"},
{year:2024, tags:["flower"], setName:"2024中秋·露桂套装", femaleImg:"images/mid2024-5-f.jpg", maleImg:"images/mid2024-5-m.jpg", desc:"种花兑换"},
{year:2024, tags:["watch"], setName:"2024中秋·月阑套装", femaleImg:"images/mid2024-6-f.jpg", maleImg:"images/mid2024-6-m.jpg", desc:"看话剧可得"},
// ========== 2025年 6套 ==========
{year:2025, tags:["watch"], setName:"2025中秋·凝月套装", femaleImg:"images/mid2025-1-f.jpg", maleImg:"images/mid2025-1-m.jpg", desc:"看话剧可得"},
{year:2025, tags:["flower"], setName:"2025中秋·桂霜套装", femaleImg:"images/mid2025-2-f.jpg", maleImg:"images/mid2025-2-m.jpg", desc:"种花兑换"},
{year:2025, tags:["lottery"], setName:"2025中秋·星屿套装", femaleImg:"images/mid2025-3-f.jpg", maleImg:"images/mid2025-3-m.jpg", desc:"抽奖获取"},
{year:2025, tags:["flower","watch"], setName:"2025中秋·月檐套装", femaleImg:"images/mid2025-4-f.jpg", maleImg:"images/mid2025-4-m.jpg", desc:"种花+话剧"},
{year:2025, tags:["lottery"], setName:"2025中秋·银波套装", femaleImg:"images/mid2025-5-f.jpg", maleImg:"images/mid2025-5-m.jpg", desc:"抽奖获取"},
{year:2025, tags:["watch"], setName:"2025中秋·桂夕套装", femaleImg:"images/mid2025-6-f.jpg", maleImg:"images/mid2025-6-m.jpg", desc:"看话剧可得"},
// ========== 2026年 6套 ==========
{year:2026, tags:["watch"], setName:"2026中秋·溯月套装", femaleImg:"images/mid2026-1-f.jpg", maleImg:"images/mid2026-1-m.jpg", desc:"看话剧可得"},
{year:2026, tags:["flower"], setName:"2026中秋·金桂令套装", femaleImg:"images/mid2026-2-f.jpg", maleImg:"images/mid2026-2-m.jpg", desc:"种花兑换"},
{year:2026, tags:["lottery"], setName:"2026中秋·星穹套装", femaleImg:"images/mid2026-3-f.jpg", maleImg:"images/mid2026-3-m.jpg", desc:"抽奖获取"},
{year:2026, tags:["flower","lottery"], setName:"2026中秋·月庭套装", femaleImg:"images/mid2026-4-f.jpg", maleImg:"images/mid2026-4-m.jpg", desc:"种花+抽奖"},
{year:2026, tags:["lottery"], setName:"2026中秋·云桂套装", femaleImg:"images/mid2026-5-f.jpg", maleImg:"images/mid2026-5-m.jpg", desc:"抽奖获取"},
{year:2026, tags:["watch"], setName:"2026中秋·月宴套装", femaleImg:"images/mid2026-6-f.jpg", maleImg:"images/mid2026-6-m.jpg", desc:"看话剧可得"}
];
// 状态
let midState = {
activeYear: null,
filterTags: new Set()
};
const yearTabRow = document.getElementById("yearTabRow");
const midSetGrid = document.getElementById("midSetGrid");
const checkBoxList = document.querySelectorAll(".filter-check-item input");
const imgModal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImg");
const modalClose = document.getElementById("modalClose");
// 渲染年份标签
function renderYearTabs(){
yearTabRow.innerHTML = "";
yearList.forEach(y=>{
const btn = document.createElement("button");
btn.className = "sub-tab";
btn.innerText = y;
if(midState.activeYear === y) btn.classList.add("active");
btn.onclick = ()=>{
document.querySelectorAll("#yearTabRow .sub-tab").forEach(b=>b.classList.remove("active"));
btn.classList.add("active");
midState.activeYear = y;
renderMidSet();
}
yearTabRow.appendChild(btn);
})
}
// 多选框监听
checkBoxList.forEach(cb=>{
cb.onchange = ()=>{
if(cb.checked) midState.filterTags.add(cb.value);
else midState.filterTags.delete(cb.value);
renderMidSet();
}
})
// 渲染中秋套装
function renderMidSet(){
midSetGrid.innerHTML = "";
let arr = [...midAutumnSetData];
if(midState.activeYear){
arr = arr.filter(item=>item.year === midState.activeYear);
}
// 多选筛选:命中任意标签就显示
if(midState.filterTags.size > 0){
arr = arr.filter(item=> item.tags.some(t=>midState.filterTags.has(t)) )
}
arr.forEach(item=>{
const card = document.createElement("div");
card.className = "mid-set-card";
card.innerHTML = `
<div class="mid-img-row">
<img src="${item.femaleImg}" alt="${item.setName}女套">
<img src="${item.maleImg}" alt="${item.setName}男套">
</div>
<div class="mid-set-name">${item.setName}</div>
<div class="mid-set-desc">${item.desc}</div>
`;
midSetGrid.appendChild(card);
})
// 绑定图片放大弹窗
midSetGrid.querySelectorAll("img").forEach(img=>{
img.onclick = ()=>{
modalImg.src = img.src;
imgModal.classList.add("show");
}
})
}
// 关闭弹窗
modalClose.onclick = ()=> imgModal.classList.remove("show");
imgModal.onclick = (e)=>{ if(e.target === imgModal) imgModal.classList.remove("show"); }
document.addEventListener("keydown",e=>{
if(e.key === "Escape") imgModal.classList.remove("show");
})
// 初始化中秋话剧
renderYearTabs();
renderMidSet();
// ========== 新增:移动端滚动定位控制 ==========
// 关闭浏览器默认滚动位置记忆,防止刷新后跳回上次位置
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// 页面完全加载后,移动端强制停在图鉴预览顶部
window.addEventListener('load', function () {
const isMobile = window.innerWidth <= 768;
const galleryTarget = document.getElementById('gallery');
if (isMobile && galleryTarget) {
// 延迟100ms,等待所有动态内容、图片渲染完成,高度稳定后再定位
setTimeout(function () {
// 双重定位保证兼容,瞬间跳转无动画
galleryTarget.scrollIntoView({ behavior: 'auto', block: 'start' });
window.scrollTo(0, galleryTarget.offsetTop);
}, 100);
}
});
</script>
</body>
</html>