吉俊昌百货店/title> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet"> <script> tailwind.config = { important: true, theme: { extend: { colors: { 'primary': '#000000', 'secondary': '#4a3828', 'bg-primary': '#f8f8f8', 'bg-secondary': '#f5f5f0', 'accent-light': '#e4d5c7', 'accent-blue': '#d4e4ed', 'accent-sand': '#e8dfd3' }, fontFamily: { 'serif': ['Noto Serif SC', 'serif'], 'sans': ['Noto Sans SC', 'sans-serif'] } } } } </script> <style> .fade-in { animation: fadeIn 0.8s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: #4a3828; transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .navbar-scrolled { background-color: rgba(245, 245, 240, 0.95); backdrop-filter: blur(10px); } .series-section { scroll-margin-top: 80px; } </style> </head> <body class="bg-bg-primary font-sans text-primary">  <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"> <div class="container mx-auto px-6 py-6"> <div class="flex justify-between items-center"> <a href="index.html" class="font-serif text-2xl tracking-wider">吉俊昌百货店</a> <div class="hidden md:flex space-x-8"> <a href="index.html" class="nav-link relative text-sm hover:text-secondary transition-colors">首页</a> <a href="collections.html" class="nav-link relative text-sm hover:text-secondary transition-colors active">系列陈列</a> <a href="gallery.html" class="nav-link relative text-sm hover:text-secondary transition-colors">单品鉴赏</a> <a href="stories.html" class="nav-link relative text-sm hover:text-secondary transition-colors">穿搭故事</a> <a href="about.html" class="nav-link relative text-sm hover:text-secondary transition-colors">关于我们</a> </div>  <button id="mobile-menu-btn" class="md:hidden"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </div>  <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> <a href="index.html" class="block py-2 text-sm hover:text-secondary transition-colors">首页</a> <a href="collections.html" class="block py-2 text-sm hover:text-secondary transition-colors">系列陈列</a> <a href="gallery.html" class="block py-2 text-sm hover:text-secondary transition-colors">单品鉴赏</a> <a href="stories.html" class="block py-2 text-sm hover:text-secondary transition-colors">穿搭故事</a> <a href="about.html" class="block py-2 text-sm hover:text-secondary transition-colors">关于我们</a> </div> </div> </nav>  <main class="min-h-screen pt-24 pb-16">  <div class="container mx-auto px-6 mb-12 fade-in"> <h1 class="font-serif text-4xl md:text-5xl text-center mb-4">系列陈列</h1> <p class="text-center text-gray-600">每一系列，都是对一种风格语言的深度探索。</p> </div>  <div class="container mx-auto px-6"> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">  <div class="series-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300"> <div class="image-hover h-80"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_14/1757418653564-2424.jpg" alt="暖意·织间" class="w-full h-full object-cover"> <div class="image-overlay"> <div class="view-icon">查看</div> </div> </div> <div class="p-6"> <h2 class="font-serif text-2xl mb-2">暖意·织间</h2> <p class="text-gray-600 mb-4">多件针织单品堆叠在原木长凳上，营造温暖舒适的氛围。</p> <a href="#warm-series" class="text-secondary hover:underline inline-flex items-center"> 探索系列 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </a> </div> </div>  <div class="series-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300"> <div class="image-hover h-80"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_10/1757410560346-8734.jpg" alt="廓形·之间" class="w-full h-full object-cover"> <div class="image-overlay"> <div class="view-icon">查看</div> </div> </div> <div class="p-6"> <h2 class="font-serif text-2xl mb-2">廓形·之间</h2> <p class="text-gray-600 mb-4">剪裁利落的西装和阔腿裤，突出服装的轮廓美感。</p> <a href="#silhouette-series" class="text-secondary hover:underline inline-flex items-center"> 探索系列 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </a> </div> </div>  <div class="series-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300"> <div class="image-hover h-80"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_14/1757453202350-6864.jpg" alt="漫游·时光" class="w-full h-full object-cover"> <div class="image-overlay"> <div class="view-icon">查看</div> </div> </div> <div class="p-6"> <h2 class="font-serif text-2xl mb-2">漫游·时光</h2> <p class="text-gray-600 mb-4">轻薄的亚麻衬衫和连衣裙，在微风中随风轻扬。</p> <a href="#wander-series" class="text-secondary hover:underline inline-flex items-center"> 探索系列 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </a> </div> </div> </div>  <div class="space-y-24">  <section id="warm-series" class="series-section"> <div class="mb-8"> <h2 class="font-serif text-3xl mb-2">暖意·织间</h2> <div class="w-24 h-0.5 bg-accent-light"></div> </div> <div class="grid md:grid-cols-2 gap-8"> <div> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_14/1757418653564-2424.jpg" alt="暖意·织间单品1" class="w-full rounded-lg shadow-sm"> </div> <div class="flex flex-col justify-center"> <h3 class="font-serif text-xl mb-4">针织的温度</h3> <p class="text-gray-600 mb-4"> 在寒冷的季节里，针织单品以其独特的温暖质感成为衣橱中的主角。本系列精选多种材质与纹理的针织品，从柔软的羊绒到富有层次感的绞花毛衣，每一件都承载着手工的温度与情感。 </p> <p class="text-gray-600"> 无论是慵懒的周末午后，还是忙碌的工作日清晨，这些针织单品都能为您提供恰到好处的舒适与优雅。 </p> </div> </div> </section>  <section id="silhouette-series" class="series-section"> <div class="mb-8"> <h2 class="font-serif text-3xl mb-2">廓形·之间</h2> <div class="w-24 h-0.5 bg-accent-light"></div> </div> <div class="grid md:grid-cols-2 gap-8"> <div class="md:order-2"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_10/1757410560346-8734.jpg" alt="廓形·之间单品1" class="w-full rounded-lg shadow-sm"> </div> <div class="flex flex-col justify-center"> <h3 class="font-serif text-xl mb-4">线条的力量</h3> <p class="text-gray-600 mb-4"> 服装的廓形是设计师表达理念的重要语言。本系列聚焦于剪裁的精准与线条的流畅，通过利落的西装外套、挺括的阔腿裤和修身的连衣裙，展现现代女性的自信与力量。 </p> <p class="text-gray-600"> 每一道剪裁都经过精心考量，每一处线条都蕴含着对美的追求，让您在任何场合都能展现出独特的魅力。 </p> </div> </div> </section>  <section id="wander-series" class="series-section"> <div class="mb-8"> <h2 class="font-serif text-3xl mb-2">漫游·时光</h2> <div class="w-24 h-0.5 bg-accent-light"></div> </div> <div class="grid md:grid-cols-2 gap-8"> <div> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_14/1757453202350-6864.jpg" alt="漫游·时光单品1" class="w-full rounded-lg shadow-sm"> </div> <div class="flex flex-col justify-center"> <h3 class="font-serif text-xl mb-4">自由的呼吸</h3> <p class="text-gray-600 mb-4"> 轻盈的亚麻与棉质面料，如同清晨的第一缕微风，带来无拘无束的穿着体验。本系列注重面料的天然质感与舒适性，让每一件单品都能随着身体的律动而自由舒展。 </p> <p class="text-gray-600"> 无论是在海边漫步，还是在城市街头穿行，这些单品都能让您感受到与自然的亲密连接，享受漫游时光的美好。 </p> </div> </div> </section> </div> </div> </main>  <footer class="border-t border-accent-light bg-bg-secondary mt-16"> <div class="container mx-auto px-6 py-8"> <p class="text-center text-sm text-gray-600"><p>All Rights Reserved.</p> <p>麻城市吉俊昌百货店</p> <p>©2025丨<a href="https://beian.miit.gov.cn/">鄂ICP备2025153677号</a> </li> <li class="f_a"> <b>联系方式</b> <p class="f_a3">电子邮箱：wet183188@163.com</p></p></p> </div> </footer> <script> // 导航栏滚动效果 window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('navbar-scrolled'); } else { navbar.classList.remove('navbar-scrolled'); } }); // 移动端菜单切换 const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); }); // 平滑滚动到系列详情 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' }); } }); }); // 图片悬停效果 document.querySelectorAll('.image-hover').forEach(container => { container.addEventListener('mouseenter', function() { this.querySelector('img').style.transform = 'scale(1.02)'; }); container.addEventListener('mouseleave', function() { this.querySelector('img').style.transform = 'scale(1)'; }); }); </script> </body> </html>