{"id":494,"date":"2026-01-26T14:45:15","date_gmt":"2026-01-26T06:45:15","guid":{"rendered":"https:\/\/ryanren.top\/?page_id=494"},"modified":"2026-04-17T21:22:42","modified_gmt":"2026-04-17T13:22:42","slug":"zpj","status":"publish","type":"page","link":"https:\/\/ryanren.top\/index.php\/zpj\/","title":{"rendered":"\u4f5c\u54c1\u96c6"},"content":{"rendered":"\n
\n
\n\n\n\n \n \n \u4efb\u5fd7\u8fdc\uff5c\u7a7a\u95f4\u8bbe\u8ba1\u00b7\u54c1\u724c\u5347\u7ea7\u00b7\u5a31\u4e50\u7a7a\u95f4\u00b7\u653f\u4f01\u9879\u76ee\u4f5c\u54c1\u96c6<\/title>\n <meta name=\"description\" content=\"\u4efb\u5fd7\u8fdc\u8bbe\u8ba1\u4f5c\u54c1\u96c6\uff0c\u4e13\u6ce8\u52a0\u76df\u5e97\u8bbe\u8ba1\u3001\u54c1\u724c\u5347\u7ea7\u3001\u653f\u4f01\u9879\u76ee\u3001\u7a7a\u95f4\u8bbe\u8ba1\u3001\u5efa\u6a21\u6e32\u67d3\u3001\u5a31\u4e50\u7a7a\u95f4\u3001\u6570\u5b57\u5a92\u4f53\u4e00\u7ad9\u5f0f\u8bbe\u8ba1\u89e3\u51b3\u65b9\u6848\u3002\">\n <meta name=\"keywords\" content=\"\u7a7a\u95f4\u8bbe\u8ba1,\u54c1\u724c\u8bbe\u8ba1,\u5a31\u4e50\u7a7a\u95f4,\u653f\u4f01\u9879\u76ee,\u5efa\u6a21\u6e32\u67d3,\u4f5c\u54c1\u96c6,\u9152\u53f7\u5df4\u58eb\">\n <meta name=\"author\" content=\"\u4efb\u5fd7\u8fdc\">\n <meta property=\"og:title\" content=\"\u4efb\u5fd7\u8fdc\uff5c\u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6\">\n <meta property=\"og:description\" content=\"\u4e13\u6ce8\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c\u7684\u878d\u5408\u8bbe\u8ba1\uff0c\u6db5\u76d6\u5546\u4e1a\u7a7a\u95f4\u3001\u5a31\u4e50\u7a7a\u95f4\u3001\u516c\u5171\u5c55\u9648\u3001\u6570\u5b57\u5a92\u4f53\u3002\">\n <meta property=\"og:image\" content=\"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-1-scaled.jpg\">\n <meta property=\"og:url\" content=\"https:\/\/www.ryanren.top\/portfolio\/\">\n <meta property=\"og:type\" content=\"website\">\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=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Playfair+Display:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css\">\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: #0a0a0a;\n color: #f5f5f5;\n line-height: 1.5;\n scroll-behavior: smooth;\n overflow-x: hidden;\n }\n :root {\n --primary: #0a5c8e;\n --primary-light: #2c9cd4;\n --amber: #e8c46a;\n --amber-light: #f4d48c;\n --bg-dark: #0a0a0a;\n --bg-card: rgba(20, 20, 30, 0.75);\n --border: rgba(255, 255, 255, 0.08);\n --text-muted: #aaa;\n --header-height: 76px;\n }\n .gradient-bg {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: -2;\n background: radial-gradient(circle at 20% 30%, #1a1a2e, #0a0a0a);\n }\n .gradient-overlay {\n position: fixed;\n top: 0; left: 0; width: 100%; height: 100%;\n z-index: -1;\n background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(10,92,142,0.15), transparent 70%);\n transition: background 0.05s;\n pointer-events: none;\n }\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #1a1a1a; }\n ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }\n\n \/* \u2500\u2500\u2500 \u65b0\u7248\u9876\u90e8\u5bfc\u822a\u680f \u00b7 \u7d27\u5bc6\u8d34\u5408 \u00b7 \u6d88\u9664\u7a7a\u9699 \u2500\u2500\u2500 *\/\n .site-header {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1100;\n padding: 16px 60px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n \/* \u66f4\u624e\u5b9e\u7684\u6df1\u8272\u534a\u900f\u660e\u80cc\u666f\uff0c\u786e\u4fdd\u9876\u90e8\u65e0\u7a7a\u9699 *\/\n background: rgba(6, 8, 14, 0.92);\n backdrop-filter: blur(12px) saturate(160%);\n -webkit-backdrop-filter: blur(12px) saturate(160%);\n \/* \u7528\u7ec6\u5fae\u7684\u5185\u9634\u5f71\u4ee3\u66ff\u8fb9\u6846\uff0c\u907f\u514d\u8fb9\u7f18\u900f\u51fa\u80cc\u666f\u8272 *\/\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), \n inset 0 1px 0 rgba(232, 196, 106, 0.12);\n border-bottom: none; \/* \u79fb\u9664\u53ef\u80fd\u5bfc\u81f4\u7a7a\u9699\u7684\u8fb9\u6846 *\/\n }\n .logo {\n font-family: 'Playfair Display', serif;\n font-size: 22px;\n font-weight: 700;\n background: linear-gradient(135deg, var(--primary-light), var(--amber));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n text-decoration: none;\n letter-spacing: 1px;\n line-height: 1.2;\n }\n .logo span {\n font-size: 12px;\n color: #b0b0b0;\n display: block;\n font-weight: 400;\n font-family: 'Inter', sans-serif;\n letter-spacing: 2.5px;\n margin-top: 2px;\n background: none;\n -webkit-background-clip: unset;\n background-clip: unset;\n }\n .nav-links {\n display: flex;\n gap: 44px;\n list-style: none;\n }\n .nav-links a {\n color: #e0e0e0;\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 1.8px;\n text-transform: uppercase;\n padding: 8px 0;\n position: relative;\n transition: color 0.25s, text-shadow 0.25s, transform 0.2s;\n }\n .nav-links a:hover {\n color: var(--amber);\n text-shadow: 0 0 10px rgba(232, 196, 106, 0.4);\n transform: translateY(-1px);\n }\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: 2px;\n left: 0;\n width: 0%;\n height: 2px;\n background: linear-gradient(90deg, var(--primary-light), var(--amber));\n border-radius: 2px;\n box-shadow: 0 0 8px var(--amber-light);\n transition: width 0.3s ease;\n }\n .nav-links a:hover::after { width: 100%; }\n\n \/* \u6c49\u5821\u83dc\u5355\u6309\u94ae *\/\n .menu-toggle {\n display: none;\n background: rgba(255, 255, 255, 0.02);\n border: 1px solid rgba(232, 196, 106, 0.25);\n border-radius: 40px;\n cursor: pointer;\n padding: 10px 12px;\n color: #fff;\n backdrop-filter: blur(5px);\n transition: border-color 0.2s, background 0.2s;\n }\n .menu-toggle:hover {\n border-color: var(--amber);\n background: rgba(232, 196, 106, 0.08);\n }\n .menu-toggle span {\n display: block;\n width: 22px;\n height: 2px;\n background: #f0f0f0;\n margin: 5px 0;\n transition: all 0.3s;\n border-radius: 2px;\n }\n .menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: var(--amber); }\n .menu-toggle.open span:nth-child(2) { opacity: 0; }\n .menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); background: var(--amber); }\n\n \/* \u79fb\u52a8\u7aef\u62bd\u5c49\u5bfc\u822a *\/\n .mobile-nav {\n display: none;\n position: fixed;\n top: 0; right: -100%;\n width: 280px;\n height: 100vh;\n background: rgba(6, 8, 14, 0.96);\n backdrop-filter: blur(28px) saturate(200%);\n -webkit-backdrop-filter: blur(28px) saturate(200%);\n z-index: 1200;\n padding: 80px 32px 32px;\n transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n border-left: 1px solid rgba(232, 196, 106, 0.25);\n box-shadow: -8px 0 30px rgba(0, 0, 0, 0.7);\n }\n .mobile-nav.open { right: 0; }\n .mobile-nav a {\n display: block;\n color: #ddd;\n text-decoration: none;\n font-size: 17px;\n font-weight: 500;\n padding: 16px 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n transition: color 0.25s, padding-left 0.2s;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n }\n .mobile-nav a:hover {\n color: var(--amber);\n padding-left: 8px;\n text-shadow: 0 0 8px rgba(232, 196, 106, 0.3);\n }\n .mobile-nav-close {\n position: absolute;\n top: 20px; right: 20px;\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid rgba(232, 196, 106, 0.25);\n border-radius: 40px;\n color: #fff;\n font-size: 24px;\n cursor: pointer;\n width: 40px; height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n .mobile-nav-close:hover {\n background: rgba(232, 196, 106, 0.1);\n border-color: var(--amber);\n color: var(--amber);\n }\n .mobile-overlay {\n display: none;\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(4px);\n z-index: 1150;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s, visibility 0.3s;\n pointer-events: none;\n }\n .mobile-overlay.open {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n \/* \u951a\u70b9\u504f\u79fb *\/\n section[id] { scroll-margin-top: 78px; }\n\n \/* \u8f6e\u64ad\u533a *\/\n .gallery-carousel {\n position: relative;\n width: 100%;\n height: 100vh;\n overflow: hidden;\n }\n .carousel-slides {\n position: relative;\n width: 100%; height: 100%;\n }\n .carousel-slide {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n opacity: 0;\n transition: opacity 1s ease;\n }\n .carousel-slide.active { opacity: 1; }\n .carousel-slide img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n }\n .carousel-gradient {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background: linear-gradient(\n to bottom,\n rgba(10,10,10,0.35) 0%,\n rgba(10,10,10,0.05) 35%,\n rgba(10,10,10,0.6) 70%,\n rgba(10,10,10,1) 100%\n );\n pointer-events: none;\n z-index: 2;\n }\n .carousel-content {\n position: absolute;\n bottom: 100px; left: 60px;\n z-index: 3;\n }\n .carousel-content h1 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(36px, 5vw, 64px);\n font-weight: 700;\n background: linear-gradient(135deg, #fff, var(--amber));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 16px;\n line-height: 1.1;\n }\n .carousel-content p {\n font-size: clamp(14px, 1.5vw, 18px);\n color: rgba(255, 255, 255, 0.72);\n max-width: 560px;\n line-height: 1.8;\n }\n .carousel-progress {\n position: absolute;\n bottom: 0; left: 0;\n width: 100%; height: 3px;\n background: rgba(255, 255, 255, 0.1);\n z-index: 5;\n }\n .progress-bar {\n height: 100%;\n background: linear-gradient(90deg, var(--primary-light), var(--amber));\n transition: width 0.4s ease;\n }\n .carousel-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 56px; height: 56px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(232, 196, 106, 0.2);\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n z-index: 5;\n }\n .carousel-btn:hover {\n background: rgba(44, 156, 212, 0.2);\n border-color: var(--primary-light);\n color: var(--amber);\n }\n .carousel-btn.prev { left: 30px; }\n .carousel-btn.next { right: 30px; }\n .carousel-counter {\n position: absolute;\n bottom: 20px; right: 30px;\n color: rgba(255, 255, 255, 0.5);\n font-size: 13px;\n letter-spacing: 2px;\n z-index: 5;\n }\n .carousel-thumbnails {\n position: absolute;\n bottom: 30px; left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 8px;\n z-index: 5;\n }\n .carousel-thumbnails button {\n width: 60px; height: 36px;\n border-radius: 6px;\n overflow: hidden;\n border: 1.5px solid rgba(255,255,255,0.2);\n cursor: pointer;\n transition: border-color 0.3s ease, transform 0.2s;\n padding: 0;\n background: none;\n }\n .carousel-thumbnails button.active { border-color: var(--amber); transform: scale(1.05); }\n .carousel-thumbnails img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n }\n\n \/* \u5185\u5bb9\u533a\u57df *\/\n .container { max-width: 1400px; margin: 0 auto; padding: 0 60px; }\n .section-header {\n text-align: center;\n margin: 80px 0 50px;\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.8s ease, transform 0.8s ease;\n }\n .section-header.visible { opacity: 1; transform: translateY(0); }\n .section-header h2 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(28px, 4vw, 42px);\n font-weight: 700;\n margin-bottom: 16px;\n background: linear-gradient(135deg, #fff, var(--amber));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n .section-header p {\n font-size: clamp(13px, 1.3vw, 16px);\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n }\n .section-divider {\n width: 60px; height: 2px;\n background: linear-gradient(90deg, var(--primary-light), var(--amber));\n margin: 20px auto;\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n margin-bottom: 60px;\n }\n .gallery-item {\n background: var(--bg-card);\n backdrop-filter: blur(4px);\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1),\n box-shadow 0.35s ease,\n border-color 0.35s ease,\n background 0.35s ease;\n border: 1px solid var(--border);\n opacity: 0;\n transform: translateY(30px);\n }\n .gallery-item.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .gallery-item:hover {\n transform: translateY(-10px);\n box-shadow: 0 28px 50px -12px rgba(10,92,142,0.35);\n border-color: rgba(44,156,212,0.5);\n background: rgba(30, 30, 45, 0.9);\n }\n .gallery-item img {\n width: 100%;\n aspect-ratio: 16 \/ 10;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease;\n }\n .gallery-item:hover img { transform: scale(1.04); }\n .item-info { padding: 18px; }\n .item-info h3 {\n font-size: 1rem;\n font-weight: 600;\n margin-bottom: 6px;\n color: #fff;\n }\n .item-info p {\n font-size: 0.78rem;\n color: var(--text-muted);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 1.6;\n }\n .item-category {\n display: inline-block;\n background: rgba(44,156,212,0.15);\n padding: 4px 12px;\n border-radius: 40px;\n font-size: 0.7rem;\n color: var(--primary-light);\n margin-bottom: 10px;\n }\n .gallery-counter {\n text-align: center;\n color: var(--text-muted);\n font-size: 13px;\n margin-top: -20px;\n margin-bottom: 40px;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n }\n .gallery-counter.visible { opacity: 1; transform: translateY(0); }\n\n .back-to-top {\n position: fixed;\n bottom: 30px; right: 30px;\n width: 48px; height: 48px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n color: #fff;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transform: translateY(20px);\n transition: all 0.3s ease;\n z-index: 999;\n box-shadow: 0 4px 12px rgba(10,92,142,0.4);\n }\n .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }\n .back-to-top:hover { transform: translateY(-3px); background: linear-gradient(135deg, var(--primary-light), var(--amber)); }\n\n .modal {\n display: none;\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(0,0,0,0.92);\n z-index: 10000;\n align-items: center;\n justify-content: center;\n }\n .modal-content { max-width: 90vw; max-height: 85vh; }\n .modal-img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 8px; }\n .modal-close {\n position: absolute;\n top: 20px; right: 20px;\n width: 44px; height: 44px;\n border-radius: 50%;\n background: rgba(255,255,255,0.1);\n border: 1px solid rgba(255,255,255,0.2);\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.2s;\n }\n .modal-close:hover { background: rgba(255,255,255,0.2); }\n\n .site-footer {\n background: #080808;\n padding: 40px 60px;\n border-top: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n margin-top: 40px;\n }\n .footer-left { color: var(--text-muted); font-size: 13px; }\n .footer-right { display: flex; gap: 24px; }\n .footer-right a { color: var(--text-muted); text-decoration: none; font-size: 13px; transition: color 0.3s; }\n .footer-right a:hover { color: var(--amber); }\n\n @media (max-width: 1024px) {\n .gallery-grid { grid-template-columns: repeat(2, 1fr); }\n .site-header { padding: 14px 32px; }\n section[id] { scroll-margin-top: 72px; }\n }\n @media (max-width: 768px) {\n .site-header { padding: 12px 24px; }\n .nav-links { display: none; }\n .menu-toggle { display: block; }\n .mobile-nav { display: block; }\n .mobile-overlay { display: block; }\n .container { padding: 0 20px; }\n .gallery-grid { grid-template-columns: 1fr; gap: 16px; }\n .carousel-content { left: 20px; bottom: 80px; }\n .carousel-content h1 { font-size: clamp(28px, 8vw, 36px); }\n .carousel-content p { font-size: 13px; }\n .carousel-btn { width: 40px; height: 40px; }\n .carousel-btn.prev { left: 10px; }\n .carousel-btn.next { right: 10px; }\n .carousel-thumbnails { bottom: 16px; gap: 6px; }\n .carousel-thumbnails button { width: 48px; height: 28px; }\n .carousel-counter { bottom: 14px; right: 16px; }\n .site-footer { padding: 24px 20px; flex-direction: column; text-align: center; }\n section[id] { scroll-margin-top: 68px; }\n .back-to-top { z-index: 1300 !important; bottom: 20px; right: 16px; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"gradient-bg\"><\/div>\n<div class=\"gradient-overlay\" id=\"gradientOverlay\"><\/div>\n<div class=\"mobile-overlay\" id=\"mobileOverlay\"><\/div>\n\n<!-- \u9876\u90e8\u5bfc\u822a\u680f (\u65b0\u7248\uff1a\u6d88\u9664\u7a7a\u9699) -->\n<header class=\"site-header\" id=\"siteHeader\">\n <a href=\"https:\/\/ryanren.top\/\" class=\"logo\">RyanRen<span>\u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1<\/span><\/a>\n <nav>\n <ul class=\"nav-links\">\n <li><a href=\"#commercial\">\u5546\u4e1a\u7a7a\u95f4<\/a><\/li>\n <li><a href=\"#entertainment\">\u5a31\u4e50\u7a7a\u95f4<\/a><\/li>\n <li><a href=\"#public\">\u516c\u5171\u5c55\u9648<\/a><\/li>\n <li><a href=\"#digital\">\u6570\u5b57\u5a92\u4f53<\/a><\/li>\n <li><a href=\"https:\/\/ryanren.top\">\u9996\u9875<\/a><\/li>\n <\/ul>\n <\/nav>\n <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"\u6253\u5f00\u83dc\u5355\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n<\/header>\n\n<!-- \u79fb\u52a8\u7aef\u62bd\u5c49 -->\n<nav class=\"mobile-nav\" id=\"mobileNav\">\n <button class=\"mobile-nav-close\" id=\"mobileNavClose\" aria-label=\"\u5173\u95ed\u83dc\u5355\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/>\n <\/svg>\n <\/button>\n <a href=\"#commercial\">\u5546\u4e1a\u7a7a\u95f4<\/a>\n <a href=\"#entertainment\">\u5a31\u4e50\u7a7a\u95f4<\/a>\n <a href=\"#public\">\u516c\u5171\u5c55\u9648<\/a>\n <a href=\"#digital\">\u6570\u5b57\u5a92\u4f53<\/a>\n <a href=\"https:\/\/ryanren.top\/\">\u9996\u9875<\/a>\n<\/nav>\n\n<section class=\"gallery-carousel\" id=\"main-carousel\">\n <div class=\"carousel-slides\" id=\"carouselSlides\"><\/div>\n <div class=\"carousel-gradient\"><\/div>\n <div class=\"carousel-progress\"><div class=\"progress-bar\" id=\"progressBar\"><\/div><\/div>\n <button class=\"carousel-btn prev\" id=\"carouselPrev\" aria-label=\"\u4e0a\u4e00\u5f20\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M15 18l-6-6 6-6\"\/>\n <\/svg>\n <\/button>\n <button class=\"carousel-btn next\" id=\"carouselNext\" aria-label=\"\u4e0b\u4e00\u5f20\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M9 18l6-6-6-6\"\/>\n <\/svg>\n <\/button>\n <div class=\"carousel-counter\">\n <span id=\"carouselCurrent\">1<\/span> \/ <span id=\"carouselTotal\">5<\/span>\n <\/div>\n <div class=\"carousel-thumbnails\" id=\"carouselThumbs\"><\/div>\n<\/section>\n\n<div class=\"container\">\n <section id=\"commercial\">\n <div class=\"section-header\">\n <h2>\u5546\u4e1a\u7a7a\u95f4<\/h2>\n <div class=\"section-divider\"><\/div>\n <p>\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u6c89\u6d78\u5f0f\u6d88\u8d39\u573a\u666f<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"gallery-commercial\"><\/div>\n <div class=\"gallery-counter\" id=\"counter-commercial\"><\/div>\n <\/section>\n <section id=\"entertainment\">\n <div class=\"section-header\">\n <h2>\u5a31\u4e50\u7a7a\u95f4<\/h2>\n <div class=\"section-divider\"><\/div>\n <p>\u7403\u5e55\u5f71\u9662 \u00b7 9D\u4f53\u9a8c \u00b7 \u6d3e\u5bf9\u5f0f\u5a31\u4e50\u5730\u6807<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"gallery-entertainment\"><\/div>\n <div class=\"gallery-counter\" id=\"counter-entertainment\"><\/div>\n <\/section>\n <section id=\"public\">\n <div class=\"section-header\">\n <h2>\u516c\u5171\u5c55\u9648<\/h2>\n <div class=\"section-divider\"><\/div>\n <p>\u653f\u4f01\u9879\u76ee \u00b7 \u57ce\u5e02\u66f4\u65b0 \u00b7 \u5c55\u89c8\u5c55\u4f4d\u8bbe\u8ba1<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"gallery-public\"><\/div>\n <div class=\"gallery-counter\" id=\"counter-public\"><\/div>\n <\/section>\n <section id=\"digital\">\n <div class=\"section-header\">\n <h2>\u6570\u5b57\u5a92\u4f53<\/h2>\n <div class=\"section-divider\"><\/div>\n <p>\u89c6\u9891\u521b\u4f5c \u00b7 3D\u5efa\u6a21 \u00b7 \u89c6\u89c9\u5f71\u7247 \u00b7 \u6c89\u6d78\u5f0f\u5168\u666f\u7a7a\u95f4<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"gallery-digital\"><\/div>\n <div class=\"gallery-counter\" id=\"counter-digital\"><\/div>\n <\/section>\n<\/div>\n\n<footer class=\"site-footer\">\n <div class=\"footer-left\">© 2026 \u4efb\u5fd7\u8fdc \u7248\u6743\u6240\u6709 | \u4e13\u6ce8\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c\u7684\u878d\u5408\u8bbe\u8ba1<\/div>\n <div class=\"footer-right\">\n <a href=\"https:\/\/ryanren.top\/\">\u9996\u9875<\/a>\n <a href=\"https:\/\/ryanren.top\/index.php\/sample-page\/\">\u5173\u4e8e<\/a>\n <a href=\"https:\/\/ryanren.top\/index.php\/lxw\/\">\u8054\u7cfb<\/a>\n <\/div>\n<\/footer>\n\n<div style=\"text-align: center; padding: 10px 0; font-size: 12px; color: #666; line-height: 1.8;\">\n <a href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\" style=\"text-decoration: none; color: #666;\">\n \u9c81ICP\u59072026001577\u53f7-1\n <\/a>\n  | \n <a href=\"https:\/\/beian.mps.gov.cn\/#\/query\/webSearch?code=37172402000457\" rel=\"noreferrer\" target=\"_blank\" style=\"text-decoration: none; color: #666;\">\n <img decoding=\"async\" data-src=\"https:\/\/www.beian.gov.cn\/img\/ghs.png\" style=\"width: 16px; height: 16px; vertical-align: middle; margin-right: 5px;\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/>\n \u9c81\u516c\u7f51\u5b89\u590737172402000457\u53f7\n <\/a>\n<p style=\"margin: 5px 0 0; font-size: 12px;\">\u00a9 2026 RyanRen \u7248\u6743\u6240\u6709<\/p>\n<\/div>\n\n<div class=\"modal\" id=\"imageModal\">\n <button class=\"modal-close\" id=\"modalClose\" aria-label=\"\u5173\u95ed\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/>\n <\/svg>\n <\/button>\n <div class=\"modal-content\"><img decoding=\"async\" class=\"modal-img\" id=\"modalImg\" src=\"\" alt=\"\"><\/div>\n<\/div>\n\n<button class=\"back-to-top\" id=\"backToTop\" aria-label=\"\u8fd4\u56de\u9876\u90e8\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 15l-6-6-6 6\"\/>\n <\/svg>\n<\/button>\n\n<script>\n \/\/ \u9879\u76ee\u6570\u636e\u96c6 (\u4fdd\u6301\u4e0d\u53d8)\n const projects = [\n { group: \"commercial\", category: \"\u5496\u5561\u5e97\", title: \"\u749e\u4e3d\u5496\u5561\u6cc9\u57ce\u516c\u56ed\u5e97\", desc: \"\u5728\u6cc9\u57ce\u516c\u56ed\u7684\u7eff\u610f\u4e2d\uff0c\u4ee5'\u9759\u8c27\u4e2d\u7684\u4e13\u6ce8'\u4e3a\u6982\u5ff5\uff0c\u8425\u9020\u4e0e\u81ea\u7136\u5171\u751f\u7684\u7cbe\u54c1\u5496\u5561\u7a7a\u95f4\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/puli-9.jpg\", link: \"https:\/\/ryanren.top\/index.php\/plkf\/\" },\n { group: \"commercial\", category: \"\u5546\u7528\u8f66\u9879\u76ee\", title: \"\u5947\u745e\u5546\u7528\u8f66\", desc: \"\u4ee5\u5de5\u4e1a\u529b\u91cf\u4e3a\u6838\u5fc3\uff0c\u901a\u8fc7\u89c6\u89c9\u4e0e\u7a7a\u95f4\u8bed\u8a00\u8be0\u91ca\u5546\u7528\u8f66\u54c1\u724c\u7684\u4e13\u4e1a\u6027\u4e0e\u53ef\u9760\u6027\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/LMfm-7-e1773302513844.jpg\", link: \"https:\/\/ryanren.top\/index.php\/lmsi\/\" },\n { group: \"commercial\", category: \"\u6c7d\u8f66\u6d17\u7f8e\u5e97\", title: \"\u8f66\u9c81\u73ed\u6c7d\u8f66\u7f8e\u5bb9\u4e2d\u5fc3\", desc: \"\u6807\u51c6\u5316\u670d\u52a1\u6d41\u7a0b\u4e3a\u9aa8\u67b6\uff0c\u901a\u900f\u5e03\u5c40\u4e0e\u5de5\u4e1a\u611f\u6750\u8d28\u4f20\u9012\u4e13\u4e1a\u53ef\u4fe1\u8d56\u7684\u54c1\u724c\u6c14\u8d28\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-1-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/qc\/\" },\n { group: \"commercial\", category: \"\u6c7d\u8f66\u6d17\u7f8e\u5e97\", title: \"\u5361\u670d\u5361\u6c7d\u8f66\u670d\u52a1\u4e2d\u5fc3\", desc: \"\u56f4\u7ed5'\u6280\u672f\u53ef\u89c6\u5316'\u91cd\u6784\u7a7a\u95f4\uff0c\u8ba9\u517b\u62a4\u6d41\u7a0b\u6210\u4e3a\u4f53\u9a8c\u4eae\u70b9\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/kfk1-scaled-e1773301047600.jpg\", link: \"https:\/\/ryanren.top\/index.php\/kfk\/\" },\n { group: \"commercial\", category: \"\u9910\u996e\u5e97\", title: \"\u5fb7\u5c14\u5821\u5c0f\u9152\u9986\", desc: \"\u5c06\u5fb7\u5f0f\u5e02\u96c6\u6c1b\u56f4\u5f15\u5165\u5ba4\u5185\uff0c\u901a\u8fc7\u6750\u8d28\u6df7\u642d\u4e0e\u706f\u5149\u5c42\u6b21\uff0c\u521b\u9020\u8f7b\u677e\u81ea\u5728\u7684\u793e\u4ea4\u636e\u70b9\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/gyqs-2-scaled-e1773303405486.jpg\", link: \"https:\/\/ryanren.top\/index.php\/deerbao\/\" },\n { group: \"commercial\", category: \"\u9152\u9986\", title: \"\u9152\u53f7\u5df4\u58eb\", desc: \"\u590d\u53e4\u5df4\u58eb\u4e3b\u9898\u9152\u9986\uff0c\u878d\u5408\u7cbe\u917f\u6587\u5316\u4e0e\u793e\u4ea4\u7a7a\u95f4\uff0c\u6253\u9020\u57ce\u5e02\u5fae\u91ba\u65b0\u5730\u6807\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/IMG_0168-e1775876585720.jpg\", link: \"https:\/\/ryanren.top\/index.php\/juhaobus\/\" },\n { group: \"commercial\", category: \"\u79c1\u4eba\u5f71\u9662\", title: \"\u805a\u5f71\u5496\u79c1\u4eba\u5f71\u9662\", desc: \"\u9488\u5bf9\u5c0f\u578b\u7a7a\u95f4\u7684\u529f\u80fd\u4e0e\u6c1b\u56f4\u6574\u5408\u8bbe\u8ba1\uff0c\u6253\u9020\u4e13\u5c5e\u89c2\u5f71\u79c1\u5bc6\u611f\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-6.jpg\", link: \"https:\/\/ryanren.top\/index.php\/qt\/\" },\n { group: \"entertainment\", category: \"\u7403\u5e55\u5f71\u9662\", title: \"\u6cf0\u56fd9D\u7403\u5e55\u5f71\u9662\", desc: \"\u5c06\u6cf0\u56fd\u6587\u5316\u5143\u7d20\u8f6c\u8bd1\u4e3a\u89c6\u89c9\u7b26\u53f7\uff0c\u878d\u54089D\u4e92\u52a8\u6280\u672f\uff0c\u6253\u9020\u8de8\u56fd\u754c\u7684\u6c89\u6d78\u5f0f\u5947\u5e7b\u4f53\u9a8c\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/TG-2-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/thfxyy\/\" },\n { group: \"entertainment\", category: \"VR\u5a31\u4e50\", title: \"9D\u7403\u5e55\u98de\u884c\u5f71\u9662\", desc: \"\u7ed3\u5408\u7403\u5e55\u4e0e\u52a8\u6001\u5ea7\u6905\uff0c\u4ee5'\u51cc\u7a7a\u7ff1\u7fd4'\u4e3a\u53d9\u4e8b\u4e3b\u7ebf\uff0c\u6784\u5efa\u5b8c\u6574\u7684\u611f\u5b98\u6c89\u6d78\u6d41\u7a0b\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-2-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/qmyy\/\" },\n { group: \"entertainment\", category: \"\u56fd\u5916\u9879\u76ee\", title: \"\u897f\u65b9\u9f99\u9020\u578b\u7403\u5e55\u5f71\u9662\", desc: \"\u4ee5\u897f\u65b9\u9f99\u4e3aIP\u539f\u578b\uff0c\u901a\u8fc7\u5f02\u5f62\u7ed3\u6784\u4e0e\u6570\u5b57\u5a92\u4f53\u878d\u5408\uff0c\u5851\u9020\u5177\u6709\u8bc6\u522b\u5ea6\u7684\u5947\u5e7b\u5730\u6807\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/HSKST-3-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/hsksy\/\" },\n { group: \"digital\", category: \"\u5168\u666f\u4f5c\u54c1\", title: \"\u6c89\u6d78\u5f0f\u5168\u666f\u7a7a\u95f4\", desc: \"360\u00b0\u5168\u666f\u5f71\u50cf\u4e0e\u865a\u62df\u73b0\u5b9e\u7ed3\u5408\uff0c\u4e3a\u6587\u65c5\u4e0e\u5c55\u9648\u63d0\u4f9b\u53ef\u4ea4\u4e92\u7684'\u6570\u5b57\u5b6a\u751f'\u4f53\u9a8c\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/qjt12-e1772594640677.png\", link: \"https:\/\/ryanren.top\/index.php\/535-2\/\" },\n { group: \"public\", category: \"\u653f\u4f01\u9879\u76ee\", title: \"\u829c\u6e56\u9e20\u5179\u591c\u5e02\", desc: \"\u4ee5'\u591c\u7ecf\u6d4e\u6fc0\u6d3b\u5668'\u4e3a\u5b9a\u4f4d\uff0c\u901a\u8fc7\u52a8\u7ebf\u91cd\u7ec4\u4e0e\u706f\u5149\u7b56\u7565\uff0c\u91cd\u5851\u57ce\u5e02\u70df\u706b\u6c14\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-4-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/jzys\/\" },\n { group: \"public\", category: \"\u653f\u4f01\u9879\u76ee\", title: \"\u4f1f\u661f\u83dc\u5e02\u573a\u6539\u9020\", desc: \"\u4ece'\u793e\u533a\u8282\u70b9'\u51fa\u53d1\uff0c\u7528\u6a21\u5757\u5316\u8bbe\u8ba1\u4e0e\u89c6\u89c9\u7cfb\u7edf\u5347\u7ea7\uff0c\u8ba9\u4f20\u7edf\u83dc\u573a\u6210\u4e3a\u90bb\u91cc\u793e\u4ea4\u65b0\u573a\u6240\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/wxcsc-1-e1773306333433.jpg\", link: \"https:\/\/ryanren.top\/index.php\/wxcsc\/\" },\n { group: \"public\", category: \"\u653f\u4f01\u9879\u76ee\", title: \"\u829c\u6e56\u5b98\u9661\u00b7\u516c\u4ea4\u7ad9\u4e0e\u5730\u94c1\u7ad9\", desc: \"\u4e00\u4f53\u5316\u5bfc\u89c6\u4e0e\u7a7a\u95f4\u6574\u5408\uff0c\u63d0\u5347\u901a\u52e4\u6548\u7387\u7684\u540c\u65f6\uff0c\u4e3a\u57ce\u5e02\u516c\u5171\u7a7a\u95f4\u6ce8\u5165\u79e9\u5e8f\u4e0e\u6e29\u5ea6\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/gdgj-1-e1773300430816.jpg\", link: \"https:\/\/ryanren.top\/index.php\/zqxm\/\" },\n { group: \"public\", category: \"\u5c55\u89c8\u5c55\u4f4d\", title: \"\u5927\u6210\u662d\u548c\u00b7\u7119\u70e4\u5c55\u4f4d\", desc: \"70\u33a1\u6d41\u52a8\u5bb4\u5e2d\u7a7a\u95f4\uff0c\u4ee5'\u9ea6\u9999\u6d41\u8f6c'\u4e3a\u6982\u5ff5\uff0c\u73af\u5f62\u52a8\u7ebf\u4e32\u8054\u9ea6\u6e90\u3001\u9762\u56e2\u5267\u573a\u3001\u660e\u6863\u70e4\u7089\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/dsf-2.jpg\", link: \"https:\/\/ryanren.top\/index.php\/exhibition-dsf\/\" },\n { group: \"digital\", category: \"\u89c6\u9891\u4f5c\u54c1\", title: \"\u521b\u610f\u89c6\u89c9\u5f71\u7247\", desc: \"\u54c1\u724c\u5f62\u8c61\u7247\u3001\u4ea7\u54c1\u89c6\u9891\u3001\u52a8\u753b\u77ed\u7247\uff0c\u7528\u5f71\u50cf\u4f20\u9012\u6838\u5fc3\u4ef7\u503c\uff0c\u5f3a\u5316\u54c1\u724c\u53d9\u4e8b\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/GYF.png\", link: \"https:\/\/ryanren.top\/index.php\/video\/\" },\n { group: \"digital\", category: \"\u5efa\u6a21\u4f5c\u54c1\", title: \"\u5efa\u6a21\u4f5c\u54c1\u96c6\", desc: \"\u9910\u8f66\u00b7\u821e\u53f0\u00b7IP\u624b\u529e\u00b7\u5c0f\u63a8\u8f66\uff0c\u5168\u54c1\u7c7b3D\u5efa\u6a21\u670d\u52a1\uff0c\u4e13\u6ce8\u5546\u4e1a\u6a21\u578b\u4e0e\u827a\u672f\u7684\u7cbe\u51c6\u8868\u8fbe\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/icecar1.jpg\", link: \"https:\/\/ryanren.top\/index.php\/modle\/\" },\n { group: \"digital\", category: \"\u76f8\u518c\", title: \"\u5168\u90e8\u56fe\u7247\", desc: \"\u5168\u54c1\u7c7b\u5efa\u6a21\u4f5c\u54c1\u56fe\u518c\uff0c\u6db5\u76d6\u9910\u8f66\u3001\u821e\u53f0\u3001IP\u624b\u529e\u3001\u4ea7\u54c1\u6e32\u67d3\u7b49\u6301\u7eed\u66f4\u65b0\u76843D\u5efa\u6a21\u5408\u96c6\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/FM-7.jpg\", link: \"https:\/\/ryanren.top\/index.php\/gd\/\" }\n ];\n\n const groups = {\n commercial: { container: 'gallery-commercial', counter: 'counter-commercial', projects: [] },\n entertainment: { container: 'gallery-entertainment', counter: 'counter-entertainment', projects: [] },\n public: { container: 'gallery-public', counter: 'counter-public', projects: [] },\n digital: { container: 'gallery-digital', counter: 'counter-digital', projects: [] }\n };\n projects.forEach(p => { if (groups[p.group]) groups[p.group].projects.push(p); });\n\n \/\/ \u8f6e\u64ad\u56fe\u914d\u7f6e\n const carouselItems = [\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/GD01.jpg\", alt: '\u5546\u4e1a\u7a7a\u95f4\u8bbe\u8ba1', caption: '\u5546\u4e1a\u7a7a\u95f4 \u00b7 \u54c1\u724c\u5347\u7ea7' },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/CLBFM1-scaled.jpg\", alt: '\u5a31\u4e50\u7a7a\u95f4\u8bbe\u8ba1', caption: '\u5a31\u4e50\u7a7a\u95f4 \u00b7 \u6c89\u6d78\u4f53\u9a8c' },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/DEBFM1-scaled.jpg\", alt: '\u516c\u5171\u5c55\u9648\u8bbe\u8ba1', caption: '\u516c\u5171\u5c55\u9648 \u00b7 \u653f\u4f01\u9879\u76ee' },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/JZYSFM1.jpg\", alt: '\u6570\u5b57\u5a92\u4f53\u8bbe\u8ba1', caption: '\u6570\u5b57\u5a92\u4f53 \u00b7 \u89c6\u89c9\u521b\u65b0' },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/wxcsc-1-e1773306333433.jpg\", alt: '\u516c\u5171\u5c55\u9648\u00b7\u4f1f\u661f\u83dc\u573a', caption: '\u57ce\u5e02\u66f4\u65b0 \u00b7 \u793e\u533a\u8425\u9020' }\n ];\n\n \/\/ \u5e73\u6ed1\u6eda\u52a8\n document.querySelectorAll('.nav-links a[href^=\"#\"], .mobile-nav a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n const hash = this.getAttribute('href');\n if (hash && hash !== '#') {\n e.preventDefault();\n closeMobileNav();\n const targetId = hash.substring(1);\n const targetElement = document.getElementById(targetId);\n if (targetElement) targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n\n if (window.location.hash) {\n setTimeout(() => {\n const targetId = window.location.hash.substring(1);\n const targetElement = document.getElementById(targetId);\n if (targetElement) targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 300);\n }\n\n \/\/ \u79fb\u52a8\u7aef\u5bfc\u822a\n const menuToggle = document.getElementById('menuToggle');\n const mobileNav = document.getElementById('mobileNav');\n const mobileOverlay = document.getElementById('mobileOverlay');\n const mobileNavClose = document.getElementById('mobileNavClose');\n\n function openMobileNav() {\n mobileNav.classList.add('open');\n mobileOverlay.classList.add('open');\n menuToggle.classList.add('open');\n document.body.style.overflow = 'hidden';\n }\n function closeMobileNav() {\n mobileNav.classList.remove('open');\n mobileOverlay.classList.remove('open');\n menuToggle.classList.remove('open');\n document.body.style.overflow = '';\n }\n menuToggle.addEventListener('click', openMobileNav);\n mobileNavClose.addEventListener('click', closeMobileNav);\n mobileOverlay.addEventListener('click', closeMobileNav);\n\n \/\/ \u8f6e\u64ad\u903b\u8f91\n const slidesContainer = document.getElementById('carouselSlides');\n const thumbsContainer = document.getElementById('carouselThumbs');\n const progressBar = document.getElementById('progressBar');\n const carouselCurrentSpan = document.getElementById('carouselCurrent');\n const carouselTotalSpan = document.getElementById('carouselTotal');\n let currentSlide = 0, autoTimer = null;\n\n function buildCarousel() {\n slidesContainer.innerHTML = '';\n thumbsContainer.innerHTML = '';\n carouselItems.forEach((item, idx) => {\n const slide = document.createElement('div');\n slide.className = 'carousel-slide' + (idx === 0 ? ' active' : '');\n const img = document.createElement('img');\n img.src = item.src;\n img.alt = item.alt;\n img.loading = idx === 0 ? 'eager' : 'lazy';\n slide.appendChild(img);\n if (idx === 0) {\n const content = document.createElement('div');\n content.className = 'carousel-content';\n content.innerHTML = `<h1>\u4efb\u5fd7\u8fdc<br>\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/h1><p>\u4e13\u6ce8\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u653f\u4f01\u9879\u76ee \u00b7 \u5efa\u6a21\u6e32\u67d3 \u00b7 \u5a31\u4e50\u7a7a\u95f4 \u00b7 \u6570\u5b57\u5a92\u4f53<\/p>`;\n slide.appendChild(content);\n }\n slidesContainer.appendChild(slide);\n\n const thumbBtn = document.createElement('button');\n thumbBtn.setAttribute('data-index', idx);\n thumbBtn.setAttribute('aria-label', item.alt);\n if (idx === 0) thumbBtn.classList.add('active');\n const thumbImg = document.createElement('img');\n thumbImg.src = item.src;\n thumbImg.alt = item.alt;\n thumbBtn.appendChild(thumbImg);\n thumbBtn.addEventListener('click', () => { goToSlide(idx); resetAutoplay(); });\n thumbsContainer.appendChild(thumbBtn);\n });\n carouselTotalSpan.textContent = carouselItems.length;\n progressBar.style.width = (1 \/ carouselItems.length * 100) + '%';\n }\n\n function goToSlide(index) {\n const slides = document.querySelectorAll('.carousel-slide');\n const thumbs = thumbsContainer.querySelectorAll('button');\n slides[currentSlide].classList.remove('active');\n thumbs[currentSlide].classList.remove('active');\n currentSlide = (index + slides.length) % slides.length;\n slides[currentSlide].classList.add('active');\n thumbs[currentSlide].classList.add('active');\n carouselCurrentSpan.textContent = currentSlide + 1;\n progressBar.style.width = ((currentSlide + 1) \/ slides.length * 100) + '%';\n }\n function nextSlide() { goToSlide(currentSlide + 1); }\n function prevSlide() { goToSlide(currentSlide - 1); }\n function startAutoplay() { if (autoTimer) clearInterval(autoTimer); autoTimer = setInterval(nextSlide, 5000); }\n function resetAutoplay() { clearInterval(autoTimer); startAutoplay(); }\n\n document.getElementById('carouselPrev').addEventListener('click', () => { prevSlide(); resetAutoplay(); });\n document.getElementById('carouselNext').addEventListener('click', () => { nextSlide(); resetAutoplay(); });\n\n const carouselContainer = document.getElementById('main-carousel');\n carouselContainer.addEventListener('mouseenter', () => clearInterval(autoTimer));\n carouselContainer.addEventListener('mouseleave', startAutoplay);\n\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowRight') { nextSlide(); resetAutoplay(); }\n if (e.key === 'ArrowLeft') { prevSlide(); resetAutoplay(); }\n if (e.key === 'Escape') closeModal();\n });\n\n \/\/ \u6e32\u67d3\u4f5c\u54c1\u5361\u7247\n function renderGallery(groupKey) {\n const group = groups[groupKey];\n const container = document.getElementById(group.container);\n if (!container) return;\n container.innerHTML = '';\n group.projects.forEach(proj => {\n const item = document.createElement('div');\n item.className = 'gallery-item';\n item.innerHTML = `<img decoding=\"async\" src=\"${proj.img}\" alt=\"${proj.title}\" loading=\"lazy\"><div class=\"item-info\"><span class=\"item-category\">${proj.category}<\/span><h3>${proj.title}<\/h3><p>${proj.desc.substring(0, 72)}${proj.desc.length > 72 ? '\u2026' : ''}<\/p><\/div>`;\n item.addEventListener('click', () => window.open(proj.link, '_blank', 'noopener noreferrer'));\n container.appendChild(item);\n });\n const counterSpan = document.getElementById(group.counter);\n if (counterSpan) counterSpan.textContent = `\u5171 ${group.projects.length} \u4e2a\u9879\u76ee \u00b7 \u70b9\u51fb\u5361\u7247\u67e5\u770b\u8be6\u60c5`;\n }\n for (let key in groups) renderGallery(key);\n\n \/\/ \u6eda\u52a8\u52a8\u753b\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: \"0px 0px -40px 0px\" });\n document.querySelectorAll('.section-header, .gallery-counter').forEach(el => observer.observe(el));\n\n const cardObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n setTimeout(() => { entry.target.classList.add('visible'); }, i * 80);\n cardObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.05, rootMargin: \"0px 0px 30px 0px\" });\n document.querySelectorAll('.gallery-item').forEach(el => cardObserver.observe(el));\n\n \/\/ \u6e10\u53d8\u80cc\u666f\u8ddf\u968f\u9f20\u6807\n const overlayBg = document.getElementById('gradientOverlay');\n document.addEventListener('mousemove', (e) => {\n overlayBg.style.setProperty('--x', `${(e.clientX \/ window.innerWidth) * 100}%`);\n overlayBg.style.setProperty('--y', `${(e.clientY \/ window.innerHeight) * 100}%`);\n });\n\n \/\/ \u8fd4\u56de\u9876\u90e8\n const backToTop = document.getElementById('backToTop');\n window.addEventListener('scroll', () => {\n backToTop.classList.toggle('visible', window.scrollY > 400);\n });\n backToTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n \/\/ \u5f39\u7a97\n const modal = document.getElementById('imageModal');\n const modalCloseBtn = document.getElementById('modalClose');\n const modalImg = document.getElementById('modalImg');\n function closeModal() { modal.style.display = 'none'; document.body.style.overflow = ''; }\n modalCloseBtn.addEventListener('click', closeModal);\n modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });\n\n \/\/ \u521d\u59cb\u5316\n buildCarousel();\n startAutoplay();\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n\n\n\n<style>\n.site-hint-bubble {\n position: fixed;\n bottom: 24px;\n left: 24px;\n z-index: 9999;\n background: rgba(15, 15, 25, 0.92);\n backdrop-filter: blur(14px);\n -webkit-backdrop-filter: blur(14px);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 16px;\n padding: 14px 18px;\n width: 280px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(44,156,212,0.08);\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n transition: opacity 0.3s ease, transform 0.3s ease;\n animation: bubbleIn 0.5s ease forwards;\n}\n.site-hint-bubble.hidden {\n opacity: 0 !important;\n transform: translateY(20px) scale(0.9) !important;\n pointer-events: none;\n}\n@keyframes bubbleIn {\n from { opacity: 0; transform: translateY(24px) scale(0.85); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n}\n.site-hint-bubble:hover {\n border-color: rgba(44,156,212,0.35);\n box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(44,156,212,0.15);\n}\n.site-hint-bubble .hint-avatar {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n background: linear-gradient(135deg, #2c9cd4, #e8c46a);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 15px;\n box-shadow: 0 0 0 3px rgba(44,156,212,0.2);\n}\n.site-hint-bubble .hint-body { flex: 1; }\n.site-hint-bubble .hint-label {\n font-size: 10px;\n color: #2c9cd4;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n margin-bottom: 5px;\n font-weight: 600;\n}\n.site-hint-bubble .hint-text {\n font-size: 13px;\n color: rgba(255,255,255,0.88);\n line-height: 1.65;\n min-height: 40px;\n transition: opacity 0.25s ease;\n}\n.site-hint-bubble .hint-text.fade { opacity: 0; }\n.site-hint-bubble .hint-close {\n font-size: 16px;\n color: rgba(255,255,255,0.3);\n margin-top: -2px;\n transition: color 0.2s;\n flex-shrink: 0;\n}\n.site-hint-bubble:hover .hint-close { color: rgba(255,255,255,0.6); }\n<\/style>\n\n<div class=\"site-hint-bubble\" id=\"siteHintBubble\" title=\"\u70b9\u51fb\u5173\u95ed\">\n <div class=\"hint-avatar\">\u26a1<\/div>\n <div class=\"hint-body\">\n <div class=\"hint-label\">RyanRen<\/div>\n <div class=\"hint-text\" id=\"hintText\"><\/div>\n <\/div>\n <div class=\"hint-close\">\u2715<\/div>\n<\/div>\n\n<script>\n(function(){\n var hints = [\n \/\/ \ud83c\udfa8 \u5173\u4e8e\u5de5\u4f5c\/\u4e13\u4e1a\n \"\u4e13\u6ce8\u7a7a\u95f4\u8bbe\u8ba1\uff0c\u5546\u4e1a\u7a7a\u95f4\u00b7\u5a31\u4e50\u7a7a\u95f4\u00b7\u5efa\u6a21\u6e32\u67d3\uff0c\u627e\u6211\u51c6\u6ca1\u9519 \ud83e\udee1\",\n \"\u4eceCAD\u5230UE\uff0c\u5168\u94fe\u8def\u8bbe\u8ba1\u670d\u52a1\uff0c\u6709\u60f3\u6cd5\u5c3d\u7ba1\u804a \ud83d\udcac\",\n \"\ud83d\ude0e \u5f80\u4e0b\u7ffb\u6709\u60ca\u559c\",\n \"3D\u5efa\u6a21\u6e32\u67d3 \u00b7 \u6548\u679c\u56fe \u00b7 \u5168\u666f\u89c6\u9891\uff0c\u6709\u9700\u6c42\u6233\u6211 \ud83d\udce9\",\n \"\u54c1\u724c\u7a7a\u95f4\u8bbe\u8ba1\uff0c\u8ba9\u4f60\u7684\u7a7a\u95f4\u4f1a\u8bf4\u8bdd \u2728\",\n \"\u5546\u4e1a\u7a7a\u95f4 \u00b7 \u516c\u5171\u5c55\u9648 \u00b7 \u5efa\u6a21\u6e32\u67d3\uff0c\u4e00\u6761\u9f99\u670d\u52a1 \ud83d\udd27\",\n \"\u6bcf\u4e2a\u9879\u76ee\u90fd\u662f\u827a\u672f\u54c1\uff0c\u6bcf\u5f20\u56fe\u90fd\u662f\u5fc3\u8840 \ud83c\udfa8\",\n \"\u6548\u679c\u56fe\u6e32\u67d3\u627e\u6211\uff0c\u753b\u9762\u7cbe\u81f4\u4ea4\u4ed8\u51c6\u65f6 \u23f0\",\n\n \/\/ \ud83d\ude04 \u5e7d\u9ed8\u5410\u69fd\n \"\u7532\u65b9\u8bf4'\u518d\u6539\u6539'\uff0c\u6211\u5185\u5fc3\u5df2\u7ecf\u6539\u5230\u5b87\u5b99\u5c3d\u5934\u4e86 \ud83d\udc80\",\n \"\u8bbe\u8ba1\u5e08\u7684\u5496\u5561\u7eed\u547d\uff0c\u6e32\u67d3\u7684\u7535\u8111\u7eed\u6e29 \ud83d\ude05\",\n \"\u5934\u53d1\u8fd8\u5728\uff0c\u8bbe\u8ba1\u8fd8\u5728 \ud83d\ude0e \u653e\u5fc3\u4ea4\u7ed9\u6211\",\n \"\u6e32\u67d3\u5230\u5d29\u6e83\uff0c\u4e00\u952e\u63d0\u4ea4\u7b11\u5230\u9192 \ud83d\ude0c\",\n\n \/\/ \u23f3 \u7b49\u5f85\u63d0\u793a\n \"\u9996\u6b21\u8bbf\u95ee\u56fe\u7247\u591a\uff0c\u8bf7\u7a0d\u7b49\u7247\u523b\uff0c\u7cbe\u5f69\u9a6c\u4e0a\u5230 \ud83d\ude80\",\n \"\u670d\u52a1\u5668\u5e26\u5bbd\u5c0f\uff0c\u5185\u5bb9\u6b63\u5728\u52aa\u529b\u8d76\u6765\uff0c\u8bf7\u8010\u5fc3\u7b49\u5f85 \ud83d\ude4f\",\n \"\u9ad8\u6e05\u6e32\u67d3\u56fe\u52a0\u8f7d\u4e2d\uff0c\u522b\u8d70\u5f00\u9a6c\u4e0a\u597d \u23f3\",\n \"\u6b63\u5728\u89e3\u538b\u89c6\u89c9\u76db\u5bb4\uff0c\u8bf7\u7a0d\u5019... \ud83c\udfac\",\n \"\u5730\u7403\u5230\u670d\u52a1\u5668\u6709\u70b9\u8fdc\uff0c\u518d\u7b49\u51e0\u79d2\u5c31\u597d \ud83c\udf0d\",\n\n ];\n\n var idx = Math.floor(Math.random() * hints.length);\n var textEl = document.getElementById('hintText');\n var bubble = document.getElementById('siteHintBubble');\n\n bubble.querySelector('.hint-close').addEventListener('click', function(e){\n e.stopPropagation();\n bubble.classList.add('hidden');\n });\n bubble.addEventListener('click', function(){\n bubble.classList.add('hidden');\n });\n\n textEl.textContent = hints[idx];\n\n setInterval(function(){\n var next;\n do { next = Math.floor(Math.random() * hints.length); }\n while (next === idx && hints.length > 1);\n idx = next;\n textEl.classList.add('fade');\n setTimeout(function(){\n textEl.textContent = hints[idx];\n textEl.classList.remove('fade');\n }, 280);\n }, 5000);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u4efb\u5fd7\u8fdc\uff5c\u7a7a\u95f4\u8bbe\u8ba1\u00b7\u54c1\u724c\u5347\u7ea7\u00b7\u5a31\u4e50\u7a7a\u95f4\u00b7\u653f\u4f01\u9879\u76ee\u4f5c\u54c1\u96c6 RyanRen\u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1 \u5546\u4e1a\u7a7a\u95f4 \u5a31\u4e50\u7a7a\u95f4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-494","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":69,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":1118,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions\/1118"}],"wp:attachment":[{"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/media?parent=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}