\u8fd9\u4e2a\u8001\u7530\u00ae \u2013 \u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237<\/title>\n <meta name=\"description\" content=\"\u8fd9\u4e2a\u8001\u7530\u00ae \u2014 \u6c47\u805a\u5168\u7403\u9876\u5c16\u8bbe\u8ba1\u5bb6\u5177,\u63a2\u7d22\u7a7a\u95f4\u7f8e\u5b66\u7684\u65e0\u9650\u53ef\u80fd\u3002\u6db5\u76d6\u624b\u7ed8\u516c\u5171\u7a7a\u95f4\u3001\u706f\u5149\u8bbe\u8ba1\u3001\u5ba4\u5185\u8bbe\u8ba1\u3001\u9152\u5e97\u8bbe\u8ba1\u3001\u5b9c\u5bb6\u54f2\u5b66\u7b49\u591a\u4e2a\u9886\u57df\u3002\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n \/* ===== CSS VARIABLES ===== *\/\n :root {\n --grey-light: #f5f5f3;\n --grey-mid: #e8e6e1;\n --grey-dark: #9a9590;\n --grey-deep: #4a4844;\n --black: #1a1916;\n --white: #fafaf8;\n --accent: #c8a96e;\n --accent-light: #e8d5b0;\n --accent-dark: #a88a58;\n --header-h: 72px;\n --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n \/* ===== RESET ===== *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Montserrat', sans-serif;\n background: var(--white);\n color: var(--black);\n overflow-x: hidden;\n }\n a { text-decoration: none; color: inherit; }\n img { display: block; width: 100%; object-fit: cover; }\n\n \/* ===== HEADER ===== *\/\n header {\n position: fixed;\n top: 0; left: 0; right: 0;\n height: var(--header-h);\n background: linear-gradient(180deg, #e8e6e1 0%, #f0eeea 60%, rgba(240,238,234,0) 100%);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 32px;\n border-bottom: 1px solid rgba(200,169,110,0.2);\n transition: background var(--transition), box-shadow var(--transition);\n }\n header.scrolled {\n background: linear-gradient(180deg, #dedad3 0%, #e8e6e1 100%);\n box-shadow: 0 2px 24px rgba(26,25,22,0.08);\n }\n\n \/* Logo \/ Art Text *\/\n .logo {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(15px, 2.5vw, 22px);\n font-weight: 300;\n letter-spacing: 0.28em;\n color: var(--black);\n text-transform: uppercase;\n cursor: pointer;\n position: relative;\n user-select: none;\n transition: color var(--transition);\n }\n .logo span {\n color: var(--accent);\n font-style: italic;\n }\n .logo:hover { color: var(--accent); }\n .logo::after {\n content: '';\n position: absolute;\n bottom: -4px; left: 0; right: 0;\n height: 1px;\n background: var(--accent);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform var(--transition);\n }\n .logo:hover::after { transform: scaleX(1); }\n\n .header-right {\n display: flex;\n align-items: center;\n gap: 24px;\n }\n\n .search-btn {\n background: none;\n border: none;\n cursor: pointer;\n color: var(--grey-deep);\n padding: 8px;\n display: flex;\n align-items: center;\n transition: color var(--transition);\n }\n .search-btn:hover { color: var(--accent); }\n .search-btn svg { width: 20px; height: 20px; }\n\n \/* ===== MEGA MENU ===== *\/\n .menu-overlay {\n position: fixed;\n inset: 0;\n background: rgba(26,25,22,0.6);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.4s;\n z-index: 900;\n }\n .menu-overlay.open { opacity: 1; pointer-events: all; }\n\n .mega-menu {\n position: fixed;\n top: 0; left: 0;\n width: min(420px, 100vw);\n height: 100vh;\n background: linear-gradient(160deg, #2a2824 0%, #1a1916 100%);\n z-index: 950;\n padding: 80px 48px 48px;\n transform: translateX(-100%);\n transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n display: flex;\n flex-direction: column;\n gap: 0;\n overflow-y: auto;\n }\n .mega-menu.open { transform: translateX(0); }\n\n .menu-close {\n position: absolute;\n top: 24px; right: 28px;\n background: none; border: none;\n color: var(--grey-dark); font-size: 24px;\n cursor: pointer;\n transition: color var(--transition), transform var(--transition);\n line-height: 1;\n }\n .menu-close:hover { color: var(--accent); transform: rotate(90deg); }\n\n .menu-brand {\n font-family: 'Cormorant Garamond', serif;\n font-size: 12px;\n letter-spacing: 0.3em;\n color: var(--accent);\n text-transform: uppercase;\n margin-bottom: 48px;\n }\n\n .menu-nav { list-style: none; margin-bottom: 48px; }\n .menu-nav li {\n border-bottom: 1px solid rgba(255,255,255,0.06);\n }\n .menu-nav li a {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 0;\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(22px, 4vw, 30px);\n font-weight: 300;\n color: #e8e6e0;\n letter-spacing: 0.05em;\n transition: color var(--transition), padding-left var(--transition);\n }\n .menu-nav li a:hover { color: var(--accent); padding-left: 8px; }\n .menu-nav li a .arrow { font-size: 14px; opacity: 0.4; }\n\n .menu-sub {\n font-size: 11px;\n letter-spacing: 0.15em;\n color: var(--grey-dark);\n text-transform: uppercase;\n margin-bottom: 12px;\n }\n .menu-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }\n .menu-links a {\n font-size: 13px;\n color: rgba(200,169,110,0.7);\n letter-spacing: 0.08em;\n transition: color var(--transition);\n }\n .menu-links a:hover { color: var(--accent); }\n\n .menu-footer {\n margin-top: auto;\n border-top: 1px solid rgba(255,255,255,0.06);\n padding-top: 24px;\n font-size: 11px;\n color: rgba(154,149,144,0.5);\n letter-spacing: 0.1em;\n }\n\n \/* ===== SEARCH PANEL ===== *\/\n .search-panel {\n position: fixed;\n top: 0; left: 0; right: 0;\n background: linear-gradient(180deg, #e8e6e1 0%, #f5f5f3 100%);\n padding: 24px 32px;\n z-index: 980;\n transform: translateY(-100%);\n transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n box-shadow: 0 8px 32px rgba(26,25,22,0.1);\n }\n .search-panel.open { transform: translateY(0); }\n .search-inner {\n max-width: 700px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .search-input {\n flex: 1;\n border: none;\n border-bottom: 2px solid var(--accent);\n background: transparent;\n font-family: 'Cormorant Garamond', serif;\n font-size: 22px;\n padding: 12px 0;\n outline: none;\n color: var(--black);\n letter-spacing: 0.05em;\n }\n .search-input::placeholder { color: var(--grey-dark); }\n .search-close {\n background: none; border: none;\n color: var(--grey-deep); font-size: 20px;\n cursor: pointer; padding: 8px;\n transition: color var(--transition);\n }\n .search-close:hover { color: var(--accent); }\n\n \/* ===== HERO \/ SLIDER ===== *\/\n .hero {\n position: relative;\n height: 100vh;\n overflow: hidden;\n margin-top: var(--header-h);\n }\n .slide {\n position: absolute;\n inset: 0;\n opacity: 0;\n transition: opacity 1s ease-in-out;\n }\n .slide.active { opacity: 1; }\n .slide-bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n transition: transform 8s ease-out;\n }\n .slide.active .slide-bg { transform: scale(1.08); }\n .slide-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(26,25,22,0.3) 0%, rgba(26,25,22,0.6) 100%);\n }\n .slide-content {\n position: relative;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n padding: 0 64px;\n max-width: 1400px;\n margin: 0 auto;\n }\n .slide-tag {\n font-size: 11px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--accent-light);\n margin-bottom: 24px;\n opacity: 0;\n transform: translateY(20px);\n animation: slideUp 0.8s ease-out 0.3s forwards;\n }\n .slide-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(42px, 8vw, 96px);\n font-weight: 300;\n line-height: 1.1;\n color: var(--white);\n margin-bottom: 32px;\n opacity: 0;\n transform: translateY(30px);\n animation: slideUp 0.8s ease-out 0.5s forwards;\n }\n .slide-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n background: rgba(200,169,110,0.15);\n border: 1px solid var(--accent);\n color: var(--white);\n font-size: 13px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n backdrop-filter: blur(8px);\n transition: all var(--transition);\n opacity: 0;\n transform: translateY(20px);\n animation: slideUp 0.8s ease-out 0.7s forwards;\n }\n .slide-link:hover {\n background: var(--accent);\n transform: translateX(4px);\n }\n\n @keyframes slideUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n .slider-prev, .slider-next {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(200,169,110,0.15);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(200,169,110,0.3);\n color: var(--white);\n font-size: 28px;\n width: 56px;\n height: 56px;\n cursor: pointer;\n transition: all var(--transition);\n z-index: 10;\n }\n .slider-prev:hover, .slider-next:hover {\n background: var(--accent);\n border-color: var(--accent);\n }\n .slider-prev { left: 32px; }\n .slider-next { right: 32px; }\n\n .slider-dots {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 10;\n }\n .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: rgba(255,255,255,0.3);\n cursor: pointer;\n transition: all var(--transition);\n }\n .dot.active {\n width: 32px;\n border-radius: 6px;\n background: var(--accent);\n }\n\n \/* ===== MARQUEE ===== *\/\n .marquee-wrap {\n background: var(--grey-mid);\n padding: 20px 0;\n overflow: hidden;\n border-top: 1px solid rgba(200,169,110,0.2);\n border-bottom: 1px solid rgba(200,169,110,0.2);\n }\n .marquee-track {\n display: flex;\n animation: marquee 30s linear infinite;\n }\n .marquee-item {\n font-family: 'Cormorant Garamond', serif;\n font-size: 16px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--grey-dark);\n white-space: nowrap;\n padding: 0 48px;\n position: relative;\n }\n .marquee-item::before {\n content: '\u25cf';\n position: absolute;\n left: 0;\n color: var(--accent);\n font-size: 8px;\n }\n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* ===== SECTION ===== *\/\n .section {\n padding: 120px 32px;\n max-width: 1400px;\n margin: 0 auto;\n }\n .section-label {\n font-size: 11px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--accent);\n margin-bottom: 16px;\n }\n .section-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(32px, 6vw, 58px);\n font-weight: 300;\n line-height: 1.2;\n margin-bottom: 64px;\n color: var(--black);\n }\n\n \/* ===== CATEGORY GRID ===== *\/\n .cat-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n margin-bottom: 80px;\n }\n .cat-grid .cat-card:first-child {\n grid-column: span 2;\n }\n .cat-card {\n position: relative;\n height: 420px;\n overflow: hidden;\n cursor: pointer;\n border-radius: 2px;\n }\n .cat-img {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n .cat-card:hover .cat-img {\n transform: scale(1.08);\n }\n .cat-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 40%, rgba(26,25,22,0.7) 100%);\n transition: background var(--transition);\n }\n .cat-card:hover .cat-overlay {\n background: linear-gradient(180deg, transparent 20%, rgba(26,25,22,0.85) 100%);\n }\n .cat-info {\n position: absolute;\n bottom: 32px;\n left: 32px;\n right: 32px;\n z-index: 1;\n }\n .cat-name {\n font-family: 'Cormorant Garamond', serif;\n font-size: 32px;\n font-weight: 300;\n color: var(--white);\n margin-bottom: 8px;\n letter-spacing: 0.05em;\n }\n .cat-count {\n font-size: 13px;\n color: var(--accent-light);\n letter-spacing: 0.1em;\n }\n\n \/* ===== FEATURED BRANDS ===== *\/\n .brands-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 32px;\n margin-bottom: 80px;\n }\n .brand-card {\n aspect-ratio: 1;\n background: var(--grey-light);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Cormorant Garamond', serif;\n font-size: 24px;\n letter-spacing: 0.1em;\n color: var(--grey-deep);\n transition: all var(--transition);\n cursor: pointer;\n border: 1px solid transparent;\n }\n .brand-card:hover {\n background: var(--white);\n border-color: var(--accent);\n color: var(--accent);\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(26,25,22,0.08);\n }\n\n \/* ===== DESIGN SHOWCASE ===== *\/\n .showcase-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 32px;\n }\n .showcase-card {\n position: relative;\n aspect-ratio: 3\/4;\n overflow: hidden;\n cursor: pointer;\n border-radius: 2px;\n }\n .showcase-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n .showcase-card:hover .showcase-img {\n transform: scale(1.08);\n }\n .showcase-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(26,25,22,0.85) 100%);\n opacity: 0;\n transition: opacity var(--transition);\n }\n .showcase-card:hover .showcase-overlay {\n opacity: 1;\n }\n .showcase-info {\n position: absolute;\n bottom: 24px;\n left: 24px;\n right: 24px;\n color: var(--white);\n transform: translateY(20px);\n opacity: 0;\n transition: all var(--transition);\n }\n .showcase-card:hover .showcase-info {\n transform: translateY(0);\n opacity: 1;\n }\n .showcase-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 20px;\n margin-bottom: 8px;\n letter-spacing: 0.05em;\n }\n .showcase-desc {\n font-size: 12px;\n color: var(--accent-light);\n letter-spacing: 0.1em;\n }\n\n \/* ===== STATS ===== *\/\n .stats-row {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n padding: 80px 32px;\n max-width: 1400px;\n margin: 0 auto;\n background: var(--grey-light);\n }\n .stat-box {\n text-align: center;\n padding: 32px 16px;\n }\n .stat-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 48px;\n font-weight: 300;\n color: var(--accent);\n margin-bottom: 12px;\n }\n .stat-label {\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--grey-dark);\n }\n\n \/* ===== ABOUT SECTION ===== *\/\n .about-section {\n background: linear-gradient(180deg, var(--black) 0%, #2a2824 100%);\n color: var(--white);\n padding: 120px 32px;\n }\n .about-container {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n }\n .about-text h2 {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(32px, 5vw, 48px);\n font-weight: 300;\n margin-bottom: 32px;\n color: var(--accent-light);\n }\n .about-text p {\n line-height: 1.8;\n color: rgba(255,255,255,0.8);\n margin-bottom: 24px;\n font-size: 15px;\n }\n .about-cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n background: transparent;\n border: 1px solid var(--accent);\n color: var(--accent);\n font-size: 13px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n transition: all var(--transition);\n margin-top: 16px;\n }\n .about-cta:hover {\n background: var(--accent);\n color: var(--black);\n }\n .about-image {\n aspect-ratio: 4\/5;\n background: var(--grey-dark);\n border-radius: 2px;\n overflow: hidden;\n }\n .about-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n .about-image:hover img {\n transform: scale(1.05);\n }\n\n \/* ===== FOOTER ===== *\/\n footer {\n background: linear-gradient(180deg, #1a1916 0%, #111110 100%);\n padding: 80px 32px 40px;\n color: var(--grey-dark);\n }\n .footer-top {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 60px;\n margin-bottom: 60px;\n max-width: 1400px;\n margin: 0 auto 60px;\n }\n .footer-brand-name {\n font-family: 'Cormorant Garamond', serif;\n font-size: 20px;\n color: var(--white);\n text-transform: uppercase;\n margin-bottom: 16px;\n }\n .footer-col-title {\n font-size: 13px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--accent);\n margin-bottom: 20px;\n }\n .footer-links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n .footer-links a {\n font-size: 13px;\n transition: color var(--transition);\n }\n .footer-links a:hover { color: var(--accent); }\n .footer-bottom {\n border-top: 1px solid rgba(255,255,255,0.06);\n padding-top: 32px;\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n \/* ===== BACK TO TOP ===== *\/\n .back-top {\n position: fixed;\n bottom: 32px; right: 32px;\n width: 44px; height: 44px;\n background: var(--accent);\n color: var(--white);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n opacity: 0;\n transform: translateY(16px);\n transition: all var(--transition);\n z-index: 800;\n border: none;\n font-size: 20px;\n }\n .back-top.visible { opacity: 1; transform: translateY(0); }\n .back-top:hover {\n background: var(--accent-dark);\n transform: translateY(-4px);\n }\n\n \/* ===== ANIMATIONS ===== *\/\n .reveal {\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 0.8s ease, transform 0.8s ease;\n }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 1024px) {\n .footer-top { grid-template-columns: 1fr 1fr; }\n .stats-row { grid-template-columns: repeat(2, 1fr); }\n .about-container { grid-template-columns: 1fr; gap: 48px; }\n .showcase-grid { grid-template-columns: repeat(2, 1fr); }\n .brands-grid { grid-template-columns: repeat(3, 1fr); }\n }\n @media (max-width: 768px) {\n header { padding: 0 20px; }\n .cat-grid { grid-template-columns: 1fr; }\n .cat-grid .cat-card:first-child { grid-column: span 1; }\n .footer-top { grid-template-columns: 1fr; }\n .showcase-grid { grid-template-columns: 1fr; }\n .brands-grid { grid-template-columns: repeat(2, 1fr); }\n .slide-content { padding: 0 32px; }\n .slider-prev, .slider-next { width: 44px; height: 44px; font-size: 20px; }\n .slider-prev { left: 16px; }\n .slider-next { right: 16px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<header id=\"mainHeader\">\n <div class=\"logo\" id=\"logoBtn\">ZHEGELAO<span>TIAN<\/span>\u00ae<\/div>\n <div class=\"header-right\">\n <button class=\"search-btn\" id=\"searchToggle\" aria-label=\"\u641c\u7d22\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.35-4.35\"\/>\n <\/svg>\n <\/button>\n <\/div>\n<\/header>\n\n<div class=\"menu-overlay\" id=\"menuOverlay\"><\/div>\n<div class=\"mega-menu\" id=\"megaMenu\">\n <button class=\"menu-close\" id=\"menuClose\">\u2715<\/button>\n <div class=\"menu-brand\">ZHEGELAOTIAN\u00ae \u2014 \u8bbe\u8ba1\u5bb6\u5177\u95e8\u6237<\/div>\n <ul class=\"menu-nav\">\n <li><a href=\"#hero\">\u9996\u9875 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <li><a href=\"#furniture\">\u5bb6\u5177 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <li><a href=\"#designs\">\u8bbe\u8ba1\u4f5c\u54c1 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <li><a href=\"#about\">\u5173\u4e8e\u8001\u7530 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <\/ul>\n <div class=\"menu-sub\">\u5feb\u901f\u5bfc\u822a<\/div>\n <div class=\"menu-links\">\n <a href=\"#brands\">\u54c1\u724c<\/a>\n <a href=\"#ikea\">\u5b9c\u5bb6\u54f2\u5b66<\/a>\n <a href=\"#lighting\">\u706f\u5149\u8bbe\u8ba1<\/a>\n <a href=\"#interior\">\u5ba4\u5185\u8bbe\u8ba1<\/a>\n <\/div>\n <div class=\"menu-footer\">\u00a9 2026 ZHEGELAOTIAN\u00ae<\/div>\n<\/div>\n\n<div class=\"search-panel\" id=\"searchPanel\">\n <div class=\"search-inner\">\n <input class=\"search-input\" type=\"search\" placeholder=\"\u641c\u7d22\u5bb6\u5177\u3001\u54c1\u724c\u3001\u8bbe\u8ba1\u5e08...\" id=\"searchInput\" \/>\n <button class=\"search-close\" id=\"searchClose\">\u2715<\/button>\n <\/div>\n<\/div>\n\n<section class=\"hero\" id=\"hero\">\n \n <div class=\"slide active\" id=\"slide0\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/zhegelaotian.xin\/wp-content\/uploads\/2026\/03\/5d3a87db73b31135ddb774fa7321c311.jpg'); background-color: #3a3530;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">Hand-painted public spaces<\/div>\n <h1 class=\"slide-title\">\u624b\u7ed8\u516c\u5171\u7a7a\u95f4<br>\u827a\u672f\u7684\u5ef6\u4f38<\/h1>\n <a class=\"slide-link\" href=\"#designs\">\u63a2\u7d22\u66f4\u591a \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide1\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/zhegelaotian.xin\/wp-content\/uploads\/2026\/03\/0a8579940640f14b85ad0f9806ce8ef7.jpg'); background-color: #4a5060;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">Lighting Design<\/div>\n <h1 class=\"slide-title\">\u5149\u4e0e\u5f71\u7684<br>\u8bd7\u610f\u5bf9\u8bdd<\/h1>\n <a class=\"slide-link\" href=\"#lighting\">\u4e86\u89e3\u8be6\u60c5 \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide2\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1615873968403-89e068629265?w=1600'); background-color: #5a5450;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">In-door house design<\/div>\n <h1 class=\"slide-title\">\u5ba4\u5185\u7a7a\u95f4<br>\u751f\u6d3b\u7f8e\u5b66<\/h1>\n <a class=\"slide-link\" href=\"#interior\">\u67e5\u770b\u6848\u4f8b \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide3\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1566073771259-6a8506099945?w=1600'); background-color: #4a4844;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">Hotel Design<\/div>\n <h1 class=\"slide-title\">\u9152\u5e97\u7a7a\u95f4<br>\u4f53\u9a8c\u8bbe\u8ba1<\/h1>\n <a class=\"slide-link\" href=\"#designs\">\u63a2\u7d22\u9879\u76ee \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide4\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1555041469-a586c61ea9bc?w=1600'); background-color: #6a6560;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">IKEA’s design philosophy<\/div>\n <h1 class=\"slide-title\">\u5b9c\u5bb6\u54f2\u5b66<br>\u6c11\u4e3b\u8bbe\u8ba1<\/h1>\n <a class=\"slide-link\" href=\"#ikea\">\u6df1\u5165\u4e86\u89e3 \u2197<\/a>\n <\/div>\n <\/div>\n \n <button class=\"slider-prev\" id=\"sliderPrev\">\u2039<\/button>\n <button class=\"slider-next\" id=\"sliderNext\">\u203a<\/button>\n <div class=\"slider-dots\" id=\"sliderDots\"><\/div>\n<\/section>\n\n<div class=\"marquee-wrap\">\n <div class=\"marquee-track\" id=\"marqueeTrack\"><\/div>\n<\/div>\n\n<section class=\"section reveal\" id=\"furniture\">\n <div class=\"section-label\">\u63a2\u7d22\u5206\u7c7b<\/div>\n <h2 class=\"section-title\">\u4ece\u7ecf\u5178\u5230\u5f53\u4ee3,<br>\u4e00\u7ad9\u5f0f\u5bb6\u5177\u7f8e\u5b66<\/h2>\n <div class=\"cat-grid\">\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u6905\u5b50 & \u6c99\u53d1<\/div>\n <div class=\"cat-count\">328+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u706f\u5177 & \u7167\u660e<\/div>\n <div class=\"cat-count\">196+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1555041469-a586c61ea9bc?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u684c\u5b50 & \u529e\u516c<\/div>\n <div class=\"cat-count\">242+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1595428774223-ef52624120d2?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u50a8\u7269 & \u6536\u7eb3<\/div>\n <div class=\"cat-count\">184+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1616486338812-3dadae4b4ace?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u5e8a & \u5367\u5ba4<\/div>\n <div class=\"cat-count\">156+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1610701596007-11502861dcfa?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u6237\u5916 & \u5ead\u9662<\/div>\n <div class=\"cat-count\">128+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"section reveal\" id=\"brands\">\n <div class=\"section-label\">\u7cbe\u9009\u54c1\u724c<\/div>\n <h2 class=\"section-title\">\u6c47\u805a\u5168\u7403<br>\u8bbe\u8ba1\u5bb6\u5177\u54c1\u724c<\/h2>\n <div class=\"brands-grid\">\n <div class=\"brand-card\">VITRA<\/div>\n <div class=\"brand-card\">Herman Miller<\/div>\n <div class=\"brand-card\">KNOLL<\/div>\n <div class=\"brand-card\">CASSINA<\/div>\n <div class=\"brand-card\">B&B ITALIA<\/div>\n <div class=\"brand-card\">FRITZ HANSEN<\/div>\n <div class=\"brand-card\">HAY<\/div>\n <div class=\"brand-card\">MUUTO<\/div>\n <div class=\"brand-card\">FLOS<\/div>\n <div class=\"brand-card\">ARTEMIDE<\/div>\n <div class=\"brand-card\">LOUIS POULSEN<\/div>\n <div class=\"brand-card\">IKEA<\/div>\n <\/div>\n<\/section>\n\n<section class=\"section reveal\" id=\"designs\">\n <div class=\"section-label\">\u8bbe\u8ba1\u4f5c\u54c1<\/div>\n <h2 class=\"section-title\">\u7ecf\u5178\u8bbe\u8ba1<br>\u6c38\u6052\u4e4b\u7f8e<\/h2>\n <div class=\"showcase-grid\">\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556228720-195a672e8a03?w=600\" alt=\"Eames Lounge Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Eames Lounge Chair<\/div>\n <div class=\"showcase-desc\">Charles & Ray Eames, 1956<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503602642458-232111445657?w=600\" alt=\"Barcelona Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Barcelona Chair<\/div>\n <div class=\"showcase-desc\">Mies van der Rohe, 1929<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?w=600\" alt=\"Egg Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Egg Chair<\/div>\n <div class=\"showcase-desc\">Arne Jacobsen, 1958<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1567538096630-e0c55bd6374c?w=600\" alt=\"Wishbone Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Wishbone Chair<\/div>\n <div class=\"showcase-desc\">Hans Wegner, 1949<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1592078615290-033ee584e267?w=600\" alt=\"PH Lamp\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">PH Lamp<\/div>\n <div class=\"showcase-desc\">Poul Henningsen, 1926<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540574163026-643ea20ade25?w=600\" alt=\"Arco Lamp\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Arco Lamp<\/div>\n <div class=\"showcase-desc\">Achille Castiglioni, 1962<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"stats-row reveal\">\n <div class=\"stat-box\">\n <div class=\"stat-num\">800+<\/div>\n <div class=\"stat-label\">\u7cbe\u9009\u54c1\u724c<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-num\">25K+<\/div>\n <div class=\"stat-label\">\u8bbe\u8ba1\u4f5c\u54c1<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-num\">120+<\/div>\n <div class=\"stat-label\">\u56fd\u5bb6\u8986\u76d6<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-num\">2019<\/div>\n <div class=\"stat-label\">\u521b\u7acb\u5e74\u4efd<\/div>\n <\/div>\n<\/div>\n\n<section class=\"about-section\" id=\"about\">\n <div class=\"about-container\">\n <div class=\"about-text\">\n <h2>\u5173\u4e8e\u8001\u7530<\/h2>\n <p>\u8fd9\u4e2a\u8001\u7530\u00ae\u521b\u7acb\u4e8e2019\u5e74,\u81f4\u529b\u4e8e\u6210\u4e3a\u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237\u7f51\u7ad9\u3002\u6211\u4eec\u76f8\u4fe1,\u597d\u7684\u8bbe\u8ba1\u80fd\u591f\u6539\u53d8\u751f\u6d3b,\u63d0\u5347\u7a7a\u95f4\u54c1\u8d28,\u521b\u9020\u7f8e\u597d\u4f53\u9a8c\u3002<\/p>\n <p>\u4ece\u624b\u7ed8\u516c\u5171\u7a7a\u95f4\u5230\u706f\u5149\u8bbe\u8ba1,\u4ece\u5ba4\u5185\u8bbe\u8ba1\u5230\u9152\u5e97\u7a7a\u95f4,\u6211\u4eec\u6c47\u805a\u4e86\u5168\u7403800+\u9876\u5c16\u5bb6\u5177\u54c1\u724c,25000+\u7ecf\u5178\u8bbe\u8ba1\u4f5c\u54c1,\u8986\u76d6120+\u4e2a\u56fd\u5bb6\u548c\u5730\u533a\u3002<\/p>\n <p>\u6211\u4eec\u6df1\u5165\u7814\u7a76\u5b9c\u5bb6\u7684\u6c11\u4e3b\u8bbe\u8ba1\u54f2\u5b66,\u63a2\u7d22\u5982\u4f55\u8ba9\u4f18\u8d28\u8bbe\u8ba1\u670d\u52a1\u66f4\u591a\u4eba\u3002\u6211\u4eec\u76f8\u4fe1,\u8bbe\u8ba1\u4e0d\u5e94\u8be5\u662f\u5c11\u6570\u4eba\u7684\u7279\u6743,\u800c\u5e94\u8be5\u662f\u6bcf\u4e2a\u4eba\u90fd\u80fd\u4eab\u53d7\u7684\u7f8e\u597d\u3002<\/p>\n <a href=\"#\" class=\"about-cta\">\u4e86\u89e3\u66f4\u591a \u2192<\/a>\n <\/div>\n <div class=\"about-image\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41faaea6?w=800\" alt=\"\u5173\u4e8e\u8001\u7530\" \/>\n <\/div>\n <\/div>\n<\/section>\n\n<footer>\n <div class=\"footer-top\">\n <div>\n <div class=\"footer-brand-name\">ZHEGELAOTIAN\u00ae<\/div>\n <p>\u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237\u7f51\u7ad9\u3002\u63a2\u7d22\u7a7a\u95f4\u7f8e\u5b66\u7684\u65e0\u9650\u53ef\u80fd\u3002<\/p>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u5bfc\u822a<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#hero\">\u9996\u9875<\/a><\/li>\n <li><a href=\"#furniture\">\u5bb6\u5177<\/a><\/li>\n <li><a href=\"#designs\">\u8bbe\u8ba1\u4f5c\u54c1<\/a><\/li>\n <li><a href=\"#about\">\u5173\u4e8e\u8001\u7530<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u5206\u7c7b<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#furniture\">\u6905\u5b50 & \u6c99\u53d1<\/a><\/li>\n <li><a href=\"#furniture\">\u706f\u5177 & \u7167\u660e<\/a><\/li>\n <li><a href=\"#furniture\">\u684c\u5b50 & \u529e\u516c<\/a><\/li>\n <li><a href=\"#furniture\">\u50a8\u7269 & \u6536\u7eb3<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u4e13\u9898<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#hero\">\u624b\u7ed8\u516c\u5171\u7a7a\u95f4<\/a><\/li>\n <li><a href=\"#hero\">\u706f\u5149\u8bbe\u8ba1<\/a><\/li>\n <li><a href=\"#hero\">\u5ba4\u5185\u8bbe\u8ba1<\/a><\/li>\n <li><a href=\"#hero\">\u5b9c\u5bb6\u54f2\u5b66<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <div>\u00a9 2026 ZHEGELAOTIAN\u00ae \u4fdd\u7559\u6240\u6709\u6743\u5229.<\/div>\n <div>\u8bbe\u8ba1\u6539\u53d8\u751f\u6d3b \u00b7 Design Changes Life<\/div>\n <\/div>\n<\/footer>\n\n<button class=\"back-top\" id=\"backTop\">\u2191<\/button>\n\n<script>\n \/\/ Menu logic\n const logoBtn = document.getElementById('logoBtn');\n const megaMenu = document.getElementById('megaMenu');\n const menuOverlay = document.getElementById('menuOverlay');\n const menuClose = document.getElementById('menuClose');\n\n logoBtn.addEventListener('click', () => {\n megaMenu.classList.add('open');\n menuOverlay.classList.add('open');\n });\n\n [menuClose, menuOverlay].forEach(el => el.addEventListener('click', () => {\n megaMenu.classList.remove('open');\n menuOverlay.classList.remove('open');\n }));\n\n \/\/ Close menu when clicking on a menu link\n document.querySelectorAll('.menu-nav a, .menu-links a').forEach(link => {\n link.addEventListener('click', () => {\n megaMenu.classList.remove('open');\n menuOverlay.classList.remove('open');\n });\n });\n\n \/\/ Search panel logic\n const searchToggle = document.getElementById('searchToggle');\n const searchPanel = document.getElementById('searchPanel');\n const searchClose = document.getElementById('searchClose');\n\n searchToggle.addEventListener('click', () => {\n searchPanel.classList.add('open');\n document.getElementById('searchInput').focus();\n });\n\n searchClose.addEventListener('click', () => {\n searchPanel.classList.remove('open');\n });\n\n \/\/ Close search on Escape\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n searchPanel.classList.remove('open');\n megaMenu.classList.remove('open');\n menuOverlay.classList.remove('open');\n }\n });\n\n \/\/ Slider logic\n const slides = document.querySelectorAll('.slide');\n const dotsContainer = document.getElementById('sliderDots');\n let current = 0;\n\n slides.forEach((_, i) => {\n const dot = document.createElement('div');\n dot.className = 'dot' + (i === 0 ? ' active' : '');\n dot.addEventListener('click', () => goTo(i));\n dotsContainer.appendChild(dot);\n });\n\n function goTo(n) {\n slides[current].classList.remove('active');\n dotsContainer.children[current].classList.remove('active');\n current = (n + slides.length) % slides.length;\n slides[current].classList.add('active');\n dotsContainer.children[current].classList.add('active');\n }\n\n document.getElementById('sliderNext').addEventListener('click', () => goTo(current + 1));\n document.getElementById('sliderPrev').addEventListener('click', () => goTo(current - 1));\n\n \/\/ Auto slide\n let autoSlideInterval = setInterval(() => goTo(current + 1), 5000);\n\n \/\/ Pause auto slide on hover\n document.querySelector('.hero').addEventListener('mouseenter', () => {\n clearInterval(autoSlideInterval);\n });\n\n document.querySelector('.hero').addEventListener('mouseleave', () => {\n autoSlideInterval = setInterval(() => goTo(current + 1), 5000);\n });\n\n \/\/ Keyboard navigation for slider\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') goTo(current - 1);\n if (e.key === 'ArrowRight') goTo(current + 1);\n });\n\n \/\/ Marquee logic\n const marqueeItems = [\n '\u624b\u7ed8\u516c\u5171\u7a7a\u95f4',\n 'IKEA Philosophy',\n '\u706f\u5149\u7f8e\u5b66',\n '\u5ba4\u5185\u8bbe\u8ba1',\n '\u5168\u7403\u54c1\u724c',\n '\u6781\u7b80\u4e3b\u4e49',\n '\u7ecf\u5178\u8bbe\u8ba1',\n '\u73b0\u4ee3\u5bb6\u5177',\n '\u5317\u6b27\u98ce\u683c',\n '\u610f\u5927\u5229\u8bbe\u8ba1'\n ];\n const track = document.getElementById('marqueeTrack');\n const content = marqueeItems.map(t => `<span class=\"marquee-item\">${t}<\/span>`).join('');\n track.innerHTML = content + content;\n\n \/\/ Scroll logic\n window.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n document.getElementById('mainHeader').classList.toggle('scrolled', scrollY > 60);\n document.getElementById('backTop').classList.toggle('visible', scrollY > 400);\n });\n\n document.getElementById('backTop').addEventListener('click', () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n \/\/ Reveal on scroll\n const revealEls = document.querySelectorAll('.reveal');\n const observer = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n observer.unobserve(e.target);\n }\n });\n }, { threshold: 0.1 });\n\n revealEls.forEach(el => observer.observe(el));\n\n \/\/ Search functionality\n document.getElementById('searchInput').addEventListener('input', (e) => {\n const searchTerm = e.target.value.toLowerCase();\n \/\/ Add search logic here\n console.log('Searching for:', searchTerm);\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u4e2a\u8001\u7530\u00ae \u2013 \u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237 ZHEGELAOTIAN\u00ae \u2715 ZHEGELAOTIAN\u00ae \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank-slate-template.php","meta":{"footnotes":""},"class_list":["post-462","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages\/462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/comments?post=462"}],"version-history":[{"count":1,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages\/462\/revisions"}],"predecessor-version":[{"id":464,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages\/462\/revisions\/464"}],"wp:attachment":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/media?parent=462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":462,"date":"2026-03-25T18:31:15","date_gmt":"2026-03-25T10:31:15","guid":{"rendered":"https:\/\/zhegelaotian.xin\/?page_id=462"},"modified":"2026-03-25T18:31:15","modified_gmt":"2026-03-25T10:31:15","slug":"%e6%88%91%e7%9a%84%e6%96%b0%e9%a6%96%e9%a1%b5","status":"publish","type":"page","link":"https:\/\/zhegelaotian.xin\/","title":{"rendered":"\u6211\u7684\u65b0\u9996\u9875"},"content":{"rendered":"\n\n\n\n \n \n \u8fd9\u4e2a\u8001\u7530\u00ae \u2013 \u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237<\/title>\n <meta name=\"description\" content=\"\u8fd9\u4e2a\u8001\u7530\u00ae \u2014 \u6c47\u805a\u5168\u7403\u9876\u5c16\u8bbe\u8ba1\u5bb6\u5177,\u63a2\u7d22\u7a7a\u95f4\u7f8e\u5b66\u7684\u65e0\u9650\u53ef\u80fd\u3002\u6db5\u76d6\u624b\u7ed8\u516c\u5171\u7a7a\u95f4\u3001\u706f\u5149\u8bbe\u8ba1\u3001\u5ba4\u5185\u8bbe\u8ba1\u3001\u9152\u5e97\u8bbe\u8ba1\u3001\u5b9c\u5bb6\u54f2\u5b66\u7b49\u591a\u4e2a\u9886\u57df\u3002\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n \/* ===== CSS VARIABLES ===== *\/\n :root {\n --grey-light: #f5f5f3;\n --grey-mid: #e8e6e1;\n --grey-dark: #9a9590;\n --grey-deep: #4a4844;\n --black: #1a1916;\n --white: #fafaf8;\n --accent: #c8a96e;\n --accent-light: #e8d5b0;\n --accent-dark: #a88a58;\n --header-h: 72px;\n --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n \/* ===== RESET ===== *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Montserrat', sans-serif;\n background: var(--white);\n color: var(--black);\n overflow-x: hidden;\n }\n a { text-decoration: none; color: inherit; }\n img { display: block; width: 100%; object-fit: cover; }\n\n \/* ===== HEADER ===== *\/\n header {\n position: fixed;\n top: 0; left: 0; right: 0;\n height: var(--header-h);\n background: linear-gradient(180deg, #e8e6e1 0%, #f0eeea 60%, rgba(240,238,234,0) 100%);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 32px;\n border-bottom: 1px solid rgba(200,169,110,0.2);\n transition: background var(--transition), box-shadow var(--transition);\n }\n header.scrolled {\n background: linear-gradient(180deg, #dedad3 0%, #e8e6e1 100%);\n box-shadow: 0 2px 24px rgba(26,25,22,0.08);\n }\n\n \/* Logo \/ Art Text *\/\n .logo {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(15px, 2.5vw, 22px);\n font-weight: 300;\n letter-spacing: 0.28em;\n color: var(--black);\n text-transform: uppercase;\n cursor: pointer;\n position: relative;\n user-select: none;\n transition: color var(--transition);\n }\n .logo span {\n color: var(--accent);\n font-style: italic;\n }\n .logo:hover { color: var(--accent); }\n .logo::after {\n content: '';\n position: absolute;\n bottom: -4px; left: 0; right: 0;\n height: 1px;\n background: var(--accent);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform var(--transition);\n }\n .logo:hover::after { transform: scaleX(1); }\n\n .header-right {\n display: flex;\n align-items: center;\n gap: 24px;\n }\n\n .search-btn {\n background: none;\n border: none;\n cursor: pointer;\n color: var(--grey-deep);\n padding: 8px;\n display: flex;\n align-items: center;\n transition: color var(--transition);\n }\n .search-btn:hover { color: var(--accent); }\n .search-btn svg { width: 20px; height: 20px; }\n\n \/* ===== MEGA MENU ===== *\/\n .menu-overlay {\n position: fixed;\n inset: 0;\n background: rgba(26,25,22,0.6);\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.4s;\n z-index: 900;\n }\n .menu-overlay.open { opacity: 1; pointer-events: all; }\n\n .mega-menu {\n position: fixed;\n top: 0; left: 0;\n width: min(420px, 100vw);\n height: 100vh;\n background: linear-gradient(160deg, #2a2824 0%, #1a1916 100%);\n z-index: 950;\n padding: 80px 48px 48px;\n transform: translateX(-100%);\n transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);\n display: flex;\n flex-direction: column;\n gap: 0;\n overflow-y: auto;\n }\n .mega-menu.open { transform: translateX(0); }\n\n .menu-close {\n position: absolute;\n top: 24px; right: 28px;\n background: none; border: none;\n color: var(--grey-dark); font-size: 24px;\n cursor: pointer;\n transition: color var(--transition), transform var(--transition);\n line-height: 1;\n }\n .menu-close:hover { color: var(--accent); transform: rotate(90deg); }\n\n .menu-brand {\n font-family: 'Cormorant Garamond', serif;\n font-size: 12px;\n letter-spacing: 0.3em;\n color: var(--accent);\n text-transform: uppercase;\n margin-bottom: 48px;\n }\n\n .menu-nav { list-style: none; margin-bottom: 48px; }\n .menu-nav li {\n border-bottom: 1px solid rgba(255,255,255,0.06);\n }\n .menu-nav li a {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 0;\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(22px, 4vw, 30px);\n font-weight: 300;\n color: #e8e6e0;\n letter-spacing: 0.05em;\n transition: color var(--transition), padding-left var(--transition);\n }\n .menu-nav li a:hover { color: var(--accent); padding-left: 8px; }\n .menu-nav li a .arrow { font-size: 14px; opacity: 0.4; }\n\n .menu-sub {\n font-size: 11px;\n letter-spacing: 0.15em;\n color: var(--grey-dark);\n text-transform: uppercase;\n margin-bottom: 12px;\n }\n .menu-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }\n .menu-links a {\n font-size: 13px;\n color: rgba(200,169,110,0.7);\n letter-spacing: 0.08em;\n transition: color var(--transition);\n }\n .menu-links a:hover { color: var(--accent); }\n\n .menu-footer {\n margin-top: auto;\n border-top: 1px solid rgba(255,255,255,0.06);\n padding-top: 24px;\n font-size: 11px;\n color: rgba(154,149,144,0.5);\n letter-spacing: 0.1em;\n }\n\n \/* ===== SEARCH PANEL ===== *\/\n .search-panel {\n position: fixed;\n top: 0; left: 0; right: 0;\n background: linear-gradient(180deg, #e8e6e1 0%, #f5f5f3 100%);\n padding: 24px 32px;\n z-index: 980;\n transform: translateY(-100%);\n transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n box-shadow: 0 8px 32px rgba(26,25,22,0.1);\n }\n .search-panel.open { transform: translateY(0); }\n .search-inner {\n max-width: 700px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .search-input {\n flex: 1;\n border: none;\n border-bottom: 2px solid var(--accent);\n background: transparent;\n font-family: 'Cormorant Garamond', serif;\n font-size: 22px;\n padding: 12px 0;\n outline: none;\n color: var(--black);\n letter-spacing: 0.05em;\n }\n .search-input::placeholder { color: var(--grey-dark); }\n .search-close {\n background: none; border: none;\n color: var(--grey-deep); font-size: 20px;\n cursor: pointer; padding: 8px;\n transition: color var(--transition);\n }\n .search-close:hover { color: var(--accent); }\n\n \/* ===== HERO \/ SLIDER ===== *\/\n .hero {\n position: relative;\n height: 100vh;\n overflow: hidden;\n margin-top: var(--header-h);\n }\n .slide {\n position: absolute;\n inset: 0;\n opacity: 0;\n transition: opacity 1s ease-in-out;\n }\n .slide.active { opacity: 1; }\n .slide-bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n transition: transform 8s ease-out;\n }\n .slide.active .slide-bg { transform: scale(1.08); }\n .slide-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(26,25,22,0.3) 0%, rgba(26,25,22,0.6) 100%);\n }\n .slide-content {\n position: relative;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n padding: 0 64px;\n max-width: 1400px;\n margin: 0 auto;\n }\n .slide-tag {\n font-size: 11px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--accent-light);\n margin-bottom: 24px;\n opacity: 0;\n transform: translateY(20px);\n animation: slideUp 0.8s ease-out 0.3s forwards;\n }\n .slide-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(42px, 8vw, 96px);\n font-weight: 300;\n line-height: 1.1;\n color: var(--white);\n margin-bottom: 32px;\n opacity: 0;\n transform: translateY(30px);\n animation: slideUp 0.8s ease-out 0.5s forwards;\n }\n .slide-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n background: rgba(200,169,110,0.15);\n border: 1px solid var(--accent);\n color: var(--white);\n font-size: 13px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n backdrop-filter: blur(8px);\n transition: all var(--transition);\n opacity: 0;\n transform: translateY(20px);\n animation: slideUp 0.8s ease-out 0.7s forwards;\n }\n .slide-link:hover {\n background: var(--accent);\n transform: translateX(4px);\n }\n\n @keyframes slideUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n .slider-prev, .slider-next {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(200,169,110,0.15);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(200,169,110,0.3);\n color: var(--white);\n font-size: 28px;\n width: 56px;\n height: 56px;\n cursor: pointer;\n transition: all var(--transition);\n z-index: 10;\n }\n .slider-prev:hover, .slider-next:hover {\n background: var(--accent);\n border-color: var(--accent);\n }\n .slider-prev { left: 32px; }\n .slider-next { right: 32px; }\n\n .slider-dots {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 10;\n }\n .dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: rgba(255,255,255,0.3);\n cursor: pointer;\n transition: all var(--transition);\n }\n .dot.active {\n width: 32px;\n border-radius: 6px;\n background: var(--accent);\n }\n\n \/* ===== MARQUEE ===== *\/\n .marquee-wrap {\n background: var(--grey-mid);\n padding: 20px 0;\n overflow: hidden;\n border-top: 1px solid rgba(200,169,110,0.2);\n border-bottom: 1px solid rgba(200,169,110,0.2);\n }\n .marquee-track {\n display: flex;\n animation: marquee 30s linear infinite;\n }\n .marquee-item {\n font-family: 'Cormorant Garamond', serif;\n font-size: 16px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--grey-dark);\n white-space: nowrap;\n padding: 0 48px;\n position: relative;\n }\n .marquee-item::before {\n content: '\u25cf';\n position: absolute;\n left: 0;\n color: var(--accent);\n font-size: 8px;\n }\n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* ===== SECTION ===== *\/\n .section {\n padding: 120px 32px;\n max-width: 1400px;\n margin: 0 auto;\n }\n .section-label {\n font-size: 11px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--accent);\n margin-bottom: 16px;\n }\n .section-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(32px, 6vw, 58px);\n font-weight: 300;\n line-height: 1.2;\n margin-bottom: 64px;\n color: var(--black);\n }\n\n \/* ===== CATEGORY GRID ===== *\/\n .cat-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 24px;\n margin-bottom: 80px;\n }\n .cat-grid .cat-card:first-child {\n grid-column: span 2;\n }\n .cat-card {\n position: relative;\n height: 420px;\n overflow: hidden;\n cursor: pointer;\n border-radius: 2px;\n }\n .cat-img {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n .cat-card:hover .cat-img {\n transform: scale(1.08);\n }\n .cat-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 40%, rgba(26,25,22,0.7) 100%);\n transition: background var(--transition);\n }\n .cat-card:hover .cat-overlay {\n background: linear-gradient(180deg, transparent 20%, rgba(26,25,22,0.85) 100%);\n }\n .cat-info {\n position: absolute;\n bottom: 32px;\n left: 32px;\n right: 32px;\n z-index: 1;\n }\n .cat-name {\n font-family: 'Cormorant Garamond', serif;\n font-size: 32px;\n font-weight: 300;\n color: var(--white);\n margin-bottom: 8px;\n letter-spacing: 0.05em;\n }\n .cat-count {\n font-size: 13px;\n color: var(--accent-light);\n letter-spacing: 0.1em;\n }\n\n \/* ===== FEATURED BRANDS ===== *\/\n .brands-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 32px;\n margin-bottom: 80px;\n }\n .brand-card {\n aspect-ratio: 1;\n background: var(--grey-light);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Cormorant Garamond', serif;\n font-size: 24px;\n letter-spacing: 0.1em;\n color: var(--grey-deep);\n transition: all var(--transition);\n cursor: pointer;\n border: 1px solid transparent;\n }\n .brand-card:hover {\n background: var(--white);\n border-color: var(--accent);\n color: var(--accent);\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(26,25,22,0.08);\n }\n\n \/* ===== DESIGN SHOWCASE ===== *\/\n .showcase-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 32px;\n }\n .showcase-card {\n position: relative;\n aspect-ratio: 3\/4;\n overflow: hidden;\n cursor: pointer;\n border-radius: 2px;\n }\n .showcase-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n .showcase-card:hover .showcase-img {\n transform: scale(1.08);\n }\n .showcase-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(26,25,22,0.85) 100%);\n opacity: 0;\n transition: opacity var(--transition);\n }\n .showcase-card:hover .showcase-overlay {\n opacity: 1;\n }\n .showcase-info {\n position: absolute;\n bottom: 24px;\n left: 24px;\n right: 24px;\n color: var(--white);\n transform: translateY(20px);\n opacity: 0;\n transition: all var(--transition);\n }\n .showcase-card:hover .showcase-info {\n transform: translateY(0);\n opacity: 1;\n }\n .showcase-title {\n font-family: 'Cormorant Garamond', serif;\n font-size: 20px;\n margin-bottom: 8px;\n letter-spacing: 0.05em;\n }\n .showcase-desc {\n font-size: 12px;\n color: var(--accent-light);\n letter-spacing: 0.1em;\n }\n\n \/* ===== STATS ===== *\/\n .stats-row {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n padding: 80px 32px;\n max-width: 1400px;\n margin: 0 auto;\n background: var(--grey-light);\n }\n .stat-box {\n text-align: center;\n padding: 32px 16px;\n }\n .stat-num {\n font-family: 'Cormorant Garamond', serif;\n font-size: 48px;\n font-weight: 300;\n color: var(--accent);\n margin-bottom: 12px;\n }\n .stat-label {\n font-size: 11px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--grey-dark);\n }\n\n \/* ===== ABOUT SECTION ===== *\/\n .about-section {\n background: linear-gradient(180deg, var(--black) 0%, #2a2824 100%);\n color: var(--white);\n padding: 120px 32px;\n }\n .about-container {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n }\n .about-text h2 {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(32px, 5vw, 48px);\n font-weight: 300;\n margin-bottom: 32px;\n color: var(--accent-light);\n }\n .about-text p {\n line-height: 1.8;\n color: rgba(255,255,255,0.8);\n margin-bottom: 24px;\n font-size: 15px;\n }\n .about-cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n background: transparent;\n border: 1px solid var(--accent);\n color: var(--accent);\n font-size: 13px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n transition: all var(--transition);\n margin-top: 16px;\n }\n .about-cta:hover {\n background: var(--accent);\n color: var(--black);\n }\n .about-image {\n aspect-ratio: 4\/5;\n background: var(--grey-dark);\n border-radius: 2px;\n overflow: hidden;\n }\n .about-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n .about-image:hover img {\n transform: scale(1.05);\n }\n\n \/* ===== FOOTER ===== *\/\n footer {\n background: linear-gradient(180deg, #1a1916 0%, #111110 100%);\n padding: 80px 32px 40px;\n color: var(--grey-dark);\n }\n .footer-top {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 60px;\n margin-bottom: 60px;\n max-width: 1400px;\n margin: 0 auto 60px;\n }\n .footer-brand-name {\n font-family: 'Cormorant Garamond', serif;\n font-size: 20px;\n color: var(--white);\n text-transform: uppercase;\n margin-bottom: 16px;\n }\n .footer-col-title {\n font-size: 13px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--accent);\n margin-bottom: 20px;\n }\n .footer-links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n .footer-links a {\n font-size: 13px;\n transition: color var(--transition);\n }\n .footer-links a:hover { color: var(--accent); }\n .footer-bottom {\n border-top: 1px solid rgba(255,255,255,0.06);\n padding-top: 32px;\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n \/* ===== BACK TO TOP ===== *\/\n .back-top {\n position: fixed;\n bottom: 32px; right: 32px;\n width: 44px; height: 44px;\n background: var(--accent);\n color: var(--white);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n opacity: 0;\n transform: translateY(16px);\n transition: all var(--transition);\n z-index: 800;\n border: none;\n font-size: 20px;\n }\n .back-top.visible { opacity: 1; transform: translateY(0); }\n .back-top:hover {\n background: var(--accent-dark);\n transform: translateY(-4px);\n }\n\n \/* ===== ANIMATIONS ===== *\/\n .reveal {\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 0.8s ease, transform 0.8s ease;\n }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 1024px) {\n .footer-top { grid-template-columns: 1fr 1fr; }\n .stats-row { grid-template-columns: repeat(2, 1fr); }\n .about-container { grid-template-columns: 1fr; gap: 48px; }\n .showcase-grid { grid-template-columns: repeat(2, 1fr); }\n .brands-grid { grid-template-columns: repeat(3, 1fr); }\n }\n @media (max-width: 768px) {\n header { padding: 0 20px; }\n .cat-grid { grid-template-columns: 1fr; }\n .cat-grid .cat-card:first-child { grid-column: span 1; }\n .footer-top { grid-template-columns: 1fr; }\n .showcase-grid { grid-template-columns: 1fr; }\n .brands-grid { grid-template-columns: repeat(2, 1fr); }\n .slide-content { padding: 0 32px; }\n .slider-prev, .slider-next { width: 44px; height: 44px; font-size: 20px; }\n .slider-prev { left: 16px; }\n .slider-next { right: 16px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<header id=\"mainHeader\">\n <div class=\"logo\" id=\"logoBtn\">ZHEGELAO<span>TIAN<\/span>\u00ae<\/div>\n <div class=\"header-right\">\n <button class=\"search-btn\" id=\"searchToggle\" aria-label=\"\u641c\u7d22\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.35-4.35\"\/>\n <\/svg>\n <\/button>\n <\/div>\n<\/header>\n\n<div class=\"menu-overlay\" id=\"menuOverlay\"><\/div>\n<div class=\"mega-menu\" id=\"megaMenu\">\n <button class=\"menu-close\" id=\"menuClose\">\u2715<\/button>\n <div class=\"menu-brand\">ZHEGELAOTIAN\u00ae \u2014 \u8bbe\u8ba1\u5bb6\u5177\u95e8\u6237<\/div>\n <ul class=\"menu-nav\">\n <li><a href=\"#hero\">\u9996\u9875 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <li><a href=\"#furniture\">\u5bb6\u5177 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <li><a href=\"#designs\">\u8bbe\u8ba1\u4f5c\u54c1 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <li><a href=\"#about\">\u5173\u4e8e\u8001\u7530 <span class=\"arrow\">\u2192<\/span><\/a><\/li>\n <\/ul>\n <div class=\"menu-sub\">\u5feb\u901f\u5bfc\u822a<\/div>\n <div class=\"menu-links\">\n <a href=\"#brands\">\u54c1\u724c<\/a>\n <a href=\"#ikea\">\u5b9c\u5bb6\u54f2\u5b66<\/a>\n <a href=\"#lighting\">\u706f\u5149\u8bbe\u8ba1<\/a>\n <a href=\"#interior\">\u5ba4\u5185\u8bbe\u8ba1<\/a>\n <\/div>\n <div class=\"menu-footer\">\u00a9 2026 ZHEGELAOTIAN\u00ae<\/div>\n<\/div>\n\n<div class=\"search-panel\" id=\"searchPanel\">\n <div class=\"search-inner\">\n <input class=\"search-input\" type=\"search\" placeholder=\"\u641c\u7d22\u5bb6\u5177\u3001\u54c1\u724c\u3001\u8bbe\u8ba1\u5e08...\" id=\"searchInput\" \/>\n <button class=\"search-close\" id=\"searchClose\">\u2715<\/button>\n <\/div>\n<\/div>\n\n<section class=\"hero\" id=\"hero\">\n \n <div class=\"slide active\" id=\"slide0\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/zhegelaotian.xin\/wp-content\/uploads\/2026\/03\/5d3a87db73b31135ddb774fa7321c311.jpg'); background-color: #3a3530;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">Hand-painted public spaces<\/div>\n <h1 class=\"slide-title\">\u624b\u7ed8\u516c\u5171\u7a7a\u95f4<br>\u827a\u672f\u7684\u5ef6\u4f38<\/h1>\n <a class=\"slide-link\" href=\"#designs\">\u63a2\u7d22\u66f4\u591a \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide1\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/zhegelaotian.xin\/wp-content\/uploads\/2026\/03\/0a8579940640f14b85ad0f9806ce8ef7.jpg'); background-color: #4a5060;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">Lighting Design<\/div>\n <h1 class=\"slide-title\">\u5149\u4e0e\u5f71\u7684<br>\u8bd7\u610f\u5bf9\u8bdd<\/h1>\n <a class=\"slide-link\" href=\"#lighting\">\u4e86\u89e3\u8be6\u60c5 \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide2\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1615873968403-89e068629265?w=1600'); background-color: #5a5450;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">In-door house design<\/div>\n <h1 class=\"slide-title\">\u5ba4\u5185\u7a7a\u95f4<br>\u751f\u6d3b\u7f8e\u5b66<\/h1>\n <a class=\"slide-link\" href=\"#interior\">\u67e5\u770b\u6848\u4f8b \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide3\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1566073771259-6a8506099945?w=1600'); background-color: #4a4844;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">Hotel Design<\/div>\n <h1 class=\"slide-title\">\u9152\u5e97\u7a7a\u95f4<br>\u4f53\u9a8c\u8bbe\u8ba1<\/h1>\n <a class=\"slide-link\" href=\"#designs\">\u63a2\u7d22\u9879\u76ee \u2197<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"slide\" id=\"slide4\">\n <div class=\"slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1555041469-a586c61ea9bc?w=1600'); background-color: #6a6560;\"><\/div>\n <div class=\"slide-overlay\"><\/div>\n <div class=\"slide-content\">\n <div class=\"slide-tag\">IKEA’s design philosophy<\/div>\n <h1 class=\"slide-title\">\u5b9c\u5bb6\u54f2\u5b66<br>\u6c11\u4e3b\u8bbe\u8ba1<\/h1>\n <a class=\"slide-link\" href=\"#ikea\">\u6df1\u5165\u4e86\u89e3 \u2197<\/a>\n <\/div>\n <\/div>\n \n <button class=\"slider-prev\" id=\"sliderPrev\">\u2039<\/button>\n <button class=\"slider-next\" id=\"sliderNext\">\u203a<\/button>\n <div class=\"slider-dots\" id=\"sliderDots\"><\/div>\n<\/section>\n\n<div class=\"marquee-wrap\">\n <div class=\"marquee-track\" id=\"marqueeTrack\"><\/div>\n<\/div>\n\n<section class=\"section reveal\" id=\"furniture\">\n <div class=\"section-label\">\u63a2\u7d22\u5206\u7c7b<\/div>\n <h2 class=\"section-title\">\u4ece\u7ecf\u5178\u5230\u5f53\u4ee3,<br>\u4e00\u7ad9\u5f0f\u5bb6\u5177\u7f8e\u5b66<\/h2>\n <div class=\"cat-grid\">\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u6905\u5b50 & \u6c99\u53d1<\/div>\n <div class=\"cat-count\">328+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u706f\u5177 & \u7167\u660e<\/div>\n <div class=\"cat-count\">196+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1555041469-a586c61ea9bc?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u684c\u5b50 & \u529e\u516c<\/div>\n <div class=\"cat-count\">242+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1595428774223-ef52624120d2?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u50a8\u7269 & \u6536\u7eb3<\/div>\n <div class=\"cat-count\">184+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1616486338812-3dadae4b4ace?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u5e8a & \u5367\u5ba4<\/div>\n <div class=\"cat-count\">156+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <div class=\"cat-card\">\n <div class=\"cat-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1610701596007-11502861dcfa?w=800');\"><\/div>\n <div class=\"cat-overlay\"><\/div>\n <div class=\"cat-info\">\n <div class=\"cat-name\">\u6237\u5916 & \u5ead\u9662<\/div>\n <div class=\"cat-count\">128+ \u4ef6\u7cbe\u9009<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"section reveal\" id=\"brands\">\n <div class=\"section-label\">\u7cbe\u9009\u54c1\u724c<\/div>\n <h2 class=\"section-title\">\u6c47\u805a\u5168\u7403<br>\u8bbe\u8ba1\u5bb6\u5177\u54c1\u724c<\/h2>\n <div class=\"brands-grid\">\n <div class=\"brand-card\">VITRA<\/div>\n <div class=\"brand-card\">Herman Miller<\/div>\n <div class=\"brand-card\">KNOLL<\/div>\n <div class=\"brand-card\">CASSINA<\/div>\n <div class=\"brand-card\">B&B ITALIA<\/div>\n <div class=\"brand-card\">FRITZ HANSEN<\/div>\n <div class=\"brand-card\">HAY<\/div>\n <div class=\"brand-card\">MUUTO<\/div>\n <div class=\"brand-card\">FLOS<\/div>\n <div class=\"brand-card\">ARTEMIDE<\/div>\n <div class=\"brand-card\">LOUIS POULSEN<\/div>\n <div class=\"brand-card\">IKEA<\/div>\n <\/div>\n<\/section>\n\n<section class=\"section reveal\" id=\"designs\">\n <div class=\"section-label\">\u8bbe\u8ba1\u4f5c\u54c1<\/div>\n <h2 class=\"section-title\">\u7ecf\u5178\u8bbe\u8ba1<br>\u6c38\u6052\u4e4b\u7f8e<\/h2>\n <div class=\"showcase-grid\">\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556228720-195a672e8a03?w=600\" alt=\"Eames Lounge Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Eames Lounge Chair<\/div>\n <div class=\"showcase-desc\">Charles & Ray Eames, 1956<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503602642458-232111445657?w=600\" alt=\"Barcelona Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Barcelona Chair<\/div>\n <div class=\"showcase-desc\">Mies van der Rohe, 1929<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586023492125-27b2c045efd7?w=600\" alt=\"Egg Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Egg Chair<\/div>\n <div class=\"showcase-desc\">Arne Jacobsen, 1958<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1567538096630-e0c55bd6374c?w=600\" alt=\"Wishbone Chair\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Wishbone Chair<\/div>\n <div class=\"showcase-desc\">Hans Wegner, 1949<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1592078615290-033ee584e267?w=600\" alt=\"PH Lamp\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">PH Lamp<\/div>\n <div class=\"showcase-desc\">Poul Henningsen, 1926<\/div>\n <\/div>\n <\/div>\n <div class=\"showcase-card\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540574163026-643ea20ade25?w=600\" alt=\"Arco Lamp\" class=\"showcase-img\" \/>\n <div class=\"showcase-overlay\"><\/div>\n <div class=\"showcase-info\">\n <div class=\"showcase-title\">Arco Lamp<\/div>\n <div class=\"showcase-desc\">Achille Castiglioni, 1962<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"stats-row reveal\">\n <div class=\"stat-box\">\n <div class=\"stat-num\">800+<\/div>\n <div class=\"stat-label\">\u7cbe\u9009\u54c1\u724c<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-num\">25K+<\/div>\n <div class=\"stat-label\">\u8bbe\u8ba1\u4f5c\u54c1<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-num\">120+<\/div>\n <div class=\"stat-label\">\u56fd\u5bb6\u8986\u76d6<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-num\">2019<\/div>\n <div class=\"stat-label\">\u521b\u7acb\u5e74\u4efd<\/div>\n <\/div>\n<\/div>\n\n<section class=\"about-section\" id=\"about\">\n <div class=\"about-container\">\n <div class=\"about-text\">\n <h2>\u5173\u4e8e\u8001\u7530<\/h2>\n <p>\u8fd9\u4e2a\u8001\u7530\u00ae\u521b\u7acb\u4e8e2019\u5e74,\u81f4\u529b\u4e8e\u6210\u4e3a\u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237\u7f51\u7ad9\u3002\u6211\u4eec\u76f8\u4fe1,\u597d\u7684\u8bbe\u8ba1\u80fd\u591f\u6539\u53d8\u751f\u6d3b,\u63d0\u5347\u7a7a\u95f4\u54c1\u8d28,\u521b\u9020\u7f8e\u597d\u4f53\u9a8c\u3002<\/p>\n <p>\u4ece\u624b\u7ed8\u516c\u5171\u7a7a\u95f4\u5230\u706f\u5149\u8bbe\u8ba1,\u4ece\u5ba4\u5185\u8bbe\u8ba1\u5230\u9152\u5e97\u7a7a\u95f4,\u6211\u4eec\u6c47\u805a\u4e86\u5168\u7403800+\u9876\u5c16\u5bb6\u5177\u54c1\u724c,25000+\u7ecf\u5178\u8bbe\u8ba1\u4f5c\u54c1,\u8986\u76d6120+\u4e2a\u56fd\u5bb6\u548c\u5730\u533a\u3002<\/p>\n <p>\u6211\u4eec\u6df1\u5165\u7814\u7a76\u5b9c\u5bb6\u7684\u6c11\u4e3b\u8bbe\u8ba1\u54f2\u5b66,\u63a2\u7d22\u5982\u4f55\u8ba9\u4f18\u8d28\u8bbe\u8ba1\u670d\u52a1\u66f4\u591a\u4eba\u3002\u6211\u4eec\u76f8\u4fe1,\u8bbe\u8ba1\u4e0d\u5e94\u8be5\u662f\u5c11\u6570\u4eba\u7684\u7279\u6743,\u800c\u5e94\u8be5\u662f\u6bcf\u4e2a\u4eba\u90fd\u80fd\u4eab\u53d7\u7684\u7f8e\u597d\u3002<\/p>\n <a href=\"#\" class=\"about-cta\">\u4e86\u89e3\u66f4\u591a \u2192<\/a>\n <\/div>\n <div class=\"about-image\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41faaea6?w=800\" alt=\"\u5173\u4e8e\u8001\u7530\" \/>\n <\/div>\n <\/div>\n<\/section>\n\n<footer>\n <div class=\"footer-top\">\n <div>\n <div class=\"footer-brand-name\">ZHEGELAOTIAN\u00ae<\/div>\n <p>\u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237\u7f51\u7ad9\u3002\u63a2\u7d22\u7a7a\u95f4\u7f8e\u5b66\u7684\u65e0\u9650\u53ef\u80fd\u3002<\/p>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u5bfc\u822a<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#hero\">\u9996\u9875<\/a><\/li>\n <li><a href=\"#furniture\">\u5bb6\u5177<\/a><\/li>\n <li><a href=\"#designs\">\u8bbe\u8ba1\u4f5c\u54c1<\/a><\/li>\n <li><a href=\"#about\">\u5173\u4e8e\u8001\u7530<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u5206\u7c7b<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#furniture\">\u6905\u5b50 & \u6c99\u53d1<\/a><\/li>\n <li><a href=\"#furniture\">\u706f\u5177 & \u7167\u660e<\/a><\/li>\n <li><a href=\"#furniture\">\u684c\u5b50 & \u529e\u516c<\/a><\/li>\n <li><a href=\"#furniture\">\u50a8\u7269 & \u6536\u7eb3<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u4e13\u9898<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#hero\">\u624b\u7ed8\u516c\u5171\u7a7a\u95f4<\/a><\/li>\n <li><a href=\"#hero\">\u706f\u5149\u8bbe\u8ba1<\/a><\/li>\n <li><a href=\"#hero\">\u5ba4\u5185\u8bbe\u8ba1<\/a><\/li>\n <li><a href=\"#hero\">\u5b9c\u5bb6\u54f2\u5b66<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <div>\u00a9 2026 ZHEGELAOTIAN\u00ae \u4fdd\u7559\u6240\u6709\u6743\u5229.<\/div>\n <div>\u8bbe\u8ba1\u6539\u53d8\u751f\u6d3b \u00b7 Design Changes Life<\/div>\n <\/div>\n<\/footer>\n\n<button class=\"back-top\" id=\"backTop\">\u2191<\/button>\n\n<script>\n \/\/ Menu logic\n const logoBtn = document.getElementById('logoBtn');\n const megaMenu = document.getElementById('megaMenu');\n const menuOverlay = document.getElementById('menuOverlay');\n const menuClose = document.getElementById('menuClose');\n\n logoBtn.addEventListener('click', () => {\n megaMenu.classList.add('open');\n menuOverlay.classList.add('open');\n });\n\n [menuClose, menuOverlay].forEach(el => el.addEventListener('click', () => {\n megaMenu.classList.remove('open');\n menuOverlay.classList.remove('open');\n }));\n\n \/\/ Close menu when clicking on a menu link\n document.querySelectorAll('.menu-nav a, .menu-links a').forEach(link => {\n link.addEventListener('click', () => {\n megaMenu.classList.remove('open');\n menuOverlay.classList.remove('open');\n });\n });\n\n \/\/ Search panel logic\n const searchToggle = document.getElementById('searchToggle');\n const searchPanel = document.getElementById('searchPanel');\n const searchClose = document.getElementById('searchClose');\n\n searchToggle.addEventListener('click', () => {\n searchPanel.classList.add('open');\n document.getElementById('searchInput').focus();\n });\n\n searchClose.addEventListener('click', () => {\n searchPanel.classList.remove('open');\n });\n\n \/\/ Close search on Escape\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n searchPanel.classList.remove('open');\n megaMenu.classList.remove('open');\n menuOverlay.classList.remove('open');\n }\n });\n\n \/\/ Slider logic\n const slides = document.querySelectorAll('.slide');\n const dotsContainer = document.getElementById('sliderDots');\n let current = 0;\n\n slides.forEach((_, i) => {\n const dot = document.createElement('div');\n dot.className = 'dot' + (i === 0 ? ' active' : '');\n dot.addEventListener('click', () => goTo(i));\n dotsContainer.appendChild(dot);\n });\n\n function goTo(n) {\n slides[current].classList.remove('active');\n dotsContainer.children[current].classList.remove('active');\n current = (n + slides.length) % slides.length;\n slides[current].classList.add('active');\n dotsContainer.children[current].classList.add('active');\n }\n\n document.getElementById('sliderNext').addEventListener('click', () => goTo(current + 1));\n document.getElementById('sliderPrev').addEventListener('click', () => goTo(current - 1));\n\n \/\/ Auto slide\n let autoSlideInterval = setInterval(() => goTo(current + 1), 5000);\n\n \/\/ Pause auto slide on hover\n document.querySelector('.hero').addEventListener('mouseenter', () => {\n clearInterval(autoSlideInterval);\n });\n\n document.querySelector('.hero').addEventListener('mouseleave', () => {\n autoSlideInterval = setInterval(() => goTo(current + 1), 5000);\n });\n\n \/\/ Keyboard navigation for slider\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') goTo(current - 1);\n if (e.key === 'ArrowRight') goTo(current + 1);\n });\n\n \/\/ Marquee logic\n const marqueeItems = [\n '\u624b\u7ed8\u516c\u5171\u7a7a\u95f4',\n 'IKEA Philosophy',\n '\u706f\u5149\u7f8e\u5b66',\n '\u5ba4\u5185\u8bbe\u8ba1',\n '\u5168\u7403\u54c1\u724c',\n '\u6781\u7b80\u4e3b\u4e49',\n '\u7ecf\u5178\u8bbe\u8ba1',\n '\u73b0\u4ee3\u5bb6\u5177',\n '\u5317\u6b27\u98ce\u683c',\n '\u610f\u5927\u5229\u8bbe\u8ba1'\n ];\n const track = document.getElementById('marqueeTrack');\n const content = marqueeItems.map(t => `<span class=\"marquee-item\">${t}<\/span>`).join('');\n track.innerHTML = content + content;\n\n \/\/ Scroll logic\n window.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n document.getElementById('mainHeader').classList.toggle('scrolled', scrollY > 60);\n document.getElementById('backTop').classList.toggle('visible', scrollY > 400);\n });\n\n document.getElementById('backTop').addEventListener('click', () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n \/\/ Reveal on scroll\n const revealEls = document.querySelectorAll('.reveal');\n const observer = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n observer.unobserve(e.target);\n }\n });\n }, { threshold: 0.1 });\n\n revealEls.forEach(el => observer.observe(el));\n\n \/\/ Search functionality\n document.getElementById('searchInput').addEventListener('input', (e) => {\n const searchTerm = e.target.value.toLowerCase();\n \/\/ Add search logic here\n console.log('Searching for:', searchTerm);\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u4e2a\u8001\u7530\u00ae \u2013 \u5168\u7403\u6700\u5168\u9762\u7684\u8bbe\u8ba1\u5bb6\u5177\u4e00\u7ad9\u5f0f\u95e8\u6237 ZHEGELAOTIAN\u00ae \u2715 ZHEGELAOTIAN\u00ae \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank-slate-template.php","meta":{"footnotes":""},"class_list":["post-462","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages\/462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/comments?post=462"}],"version-history":[{"count":1,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages\/462\/revisions"}],"predecessor-version":[{"id":464,"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/pages\/462\/revisions\/464"}],"wp:attachment":[{"href":"https:\/\/zhegelaotian.xin\/index.php\/wp-json\/wp\/v2\/media?parent=462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}