盛雨杰盈百货店/title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <link href="https://fonts.loli.net/css?family=Source+Han+Serif+CN&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css"> </head> <body class="bg-gray-50">  <nav class="navbar fixed top-0 w-full bg-white/95 backdrop-blur-sm shadow-sm z-50 transition-transform duration-300"> <div class="container mx-auto px-6 py-4"> <div class="flex justify-between items-center"> <a href="index.html" class="text-2xl font-light text-gray-800 tracking-wide">盛雨杰盈百货店</a> <div class="hidden md:flex space-x-8"> <a href="index.html" class="text-gray-600 hover:text-gray-900 transition-colors duration-300">首页</a> <a href="narrative.html" class="text-gray-900 font-medium">风尚叙事</a> <a href="material.html" class="text-gray-600 hover:text-gray-900 transition-colors duration-300">材质诗篇</a> <a href="mood.html" class="text-gray-600 hover:text-gray-900 transition-colors duration-300">穿着意境</a> </div> <button id="mobileMenuBtn" class="md:hidden text-gray-600"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div>  <div id="mobileMenu" class="hidden md:hidden bg-white border-t"> <div class="px-6 py-4 space-y-3"> <a href="index.html" class="block text-gray-600 hover:text-gray-900">首页</a> <a href="narrative.html" class="block text-gray-900 font-medium">风尚叙事</a> <a href="material.html" class="block text-gray-600 hover:text-gray-900">材质诗篇</a> <a href="mood.html" class="block text-gray-600 hover:text-gray-900">穿着意境</a> </div> </div> </nav>  <main class="pt-20 pb-16"> <div class="container mx-auto px-6">  <h1 class="page-title mb-12 opacity-0">风尚叙事</h1>  <div class="image-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">  <div class="image-card opacity-0"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_11/1757388150798-4388.jpg" alt="都市漫行者1" loading="lazy"> <div class="image-caption"> <p class="text-gray-700">雨后都市的坚定步伐</p> </div> </div> <div class="image-card opacity-0"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_14/1757356894268-7647.jpg" alt="都市漫行者2" loading="lazy"> <div class="image-caption"> <p class="text-gray-700">咖啡馆窗边的温暖时光</p> </div> </div> <div class="image-card opacity-0"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_18/1757619086889-1034.jpg" alt="都市漫行者3" loading="lazy"> <div class="image-caption"> <p class="text-gray-700">深夜书房的静谧思考</p> </div> </div>  <div class="image-card opacity-0"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/mobilewallpapers/cHJpdmF0ZS9sci91748499151507-9492NjZfMi5qcGc.jpg" alt="山野呼吸1" loading="lazy"> <div class="image-caption"> <p class="text-gray-700">山巅远眺的坚毅身影</p> </div> </div> <div class="image-card opacity-0"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/anime/ai-generated-8313922_1280.png" alt="山野呼吸2" loading="lazy"> <div class="image-caption"> <p class="text-gray-700">篝火旁的温暖守护</p> </div> </div> <div class="image-card opacity-0"> <img src="https://hpi-hub.tos-cn-beijing.volces.com/static/batch_25/1757677147105-5126.png" alt="山野呼吸3" loading="lazy"> <div class="image-caption"> <p class="text-gray-700">溪流边的自然足迹</p> </div> </div> </div>  <div class="max-w-3xl mx-auto mt-16 text-center opacity-0"> <p class="text-gray-600 text-lg leading-relaxed"> 每一件服饰都承载着生活的片段，<br> 在不同的场景中演绎着独特的角色。<br> 这里记录的是服装与生活的对话。 </p> </div> </div> </main>  <footer class="py-6 text-center text-gray-500 text-sm border-t border-gray-100"> @2025 </footer> <script src="js/main.js"></script> <script> // 移动端菜单切换 document.getElementById('mobileMenuBtn').addEventListener('click', () => { const menu = document.getElementById('mobileMenu'); menu.classList.toggle('hidden'); }); // 页面加载动画 document.addEventListener('DOMContentLoaded', () => { gsap.timeline() .to('.page-title', { opacity: 1, y: 0, duration: 1, ease: 'power3.out' }) .to('.image-card', { opacity: 1, y: 0, duration: 0.8, stagger: 0.15, ease: 'power3.out' }, '-=0.5') .to('.mt-16', { opacity: 1, y: 0, duration: 1, ease: 'power3.out' }, '-=0.3'); }); </script> </body> </html>