{"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-08-27T15:46:39","modified_gmt":"2026-08-27T07:46:39","slug":"zpj","status":"publish","type":"page","link":"https:\/\/ryanren.top\/index.php\/zpj\/","title":{"rendered":"\u4f5c\u54c1\u96c6"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/title>\n <meta name=\"description\" content=\"\u4efb\u5fd7\u8fdc\u8bbe\u8ba1\u4f5c\u54c1\u96c6\uff0c\u4e13\u6ce8\u7a7a\u95f4\u8bbe\u8ba1\u3001\u54c1\u724c\u5347\u7ea7\u3001\u5efa\u6a21\u6e32\u67d3\u3002\">\n <meta property=\"og:title\" content=\"\u4efb\u5fd7\u8fdc \u00b7 \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\u3002\">\n <meta property=\"og:image\" content=\"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/GD01.jpg\">\n\n <style>\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --black: #080808;\n --white: #fff;\n --warm: #e8c87a;\n --warm-dim: rgba(232,200,122,0.12);\n --text-dim: rgba(255,255,255,0.45);\n --text-faint: rgba(255,255,255,0.25);\n }\n\n html {\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n font-size: 16px;\n -webkit-font-smoothing: antialiased;\n background: var(--black);\n color: var(--white);\n scroll-behavior: smooth;\n overflow-x: hidden;\n }\n\n body { background: var(--black); overflow-x: hidden; }\n\n a { color: inherit; text-decoration: none; }\n img { display: block; max-width: 100%; }\n\n .nav { animation: navFadeIn 0.8s ease-out forwards; }\n @keyframes navFadeIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* ===== \u5bfc\u822a ===== *\/\n .nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n padding: 24px 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(8,8,8,0.55);\n backdrop-filter: blur(24px) saturate(180%);\n -webkit-backdrop-filter: blur(24px) saturate(180%);\n border-bottom: 1px solid rgba(255,255,255,0.06);\n transition: padding 0.4s, background 0.4s;\n }\n .nav.scrolled {\n padding: 16px 40px;\n background: rgba(8,8,8,0.85);\n }\n .nav-logo {\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n gap: 10px;\n opacity: 0.8;\n transition: opacity 0.3s;\n }\n .nav-logo:hover { opacity: 1; }\n .nav-logo img {\n height: 28px;\n width: auto;\n max-width: 80px;\n object-fit: contain;\n display: block;\n }\n .nav-links { display: flex; gap: 36px; }\n .nav-links a {\n font-size: 11px;\n font-weight: 400;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.4);\n transition: color 0.25s, letter-spacing 0.3s;\n position: relative;\n padding-bottom: 2px;\n }\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: -2px; left: 0;\n width: 0; height: 1px;\n background: var(--white);\n transition: width 0.35s cubic-bezier(0.4,0,0.2,1);\n }\n .nav-links a:hover { color: rgba(255,255,255,0.9); letter-spacing: 0.14em; }\n .nav-links a:hover::after { width: 100%; }\n\n \/* \u79fb\u52a8\u7aef\u83dc\u5355 *\/\n .menu-toggle {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n color: rgba(255,255,255,0.6);\n transition: color 0.3s;\n }\n .menu-toggle:hover { color: var(--white); }\n .menu-toggle svg { width: 24px; height: 24px; }\n\n .mobile-nav {\n display: none;\n position: fixed;\n top: 0; right: -100%;\n width: 300px;\n height: 100vh;\n background: var(--black);\n z-index: 1100;\n padding: 90px 36px 36px;\n transition: right 0.4s cubic-bezier(0.23,1,0.32,1);\n border-left: 1px solid rgba(255,255,255,0.06);\n }\n .mobile-nav.open { right: 0; }\n .mobile-nav a {\n display: block;\n color: rgba(255,255,255,0.6);\n text-decoration: none;\n font-size: 16px;\n font-weight: 400;\n padding: 16px 0;\n border-bottom: 1px solid rgba(255,255,255,0.06);\n transition: color 0.3s;\n }\n .mobile-nav a:hover { color: var(--white); }\n .mobile-close {\n position: absolute;\n top: 20px; right: 20px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n color: rgba(255,255,255,0.6);\n transition: color 0.3s;\n }\n .mobile-close:hover { color: var(--white); }\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 z-index: 1050;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n }\n .mobile-overlay.open { opacity: 1; visibility: visible; }\n\n \/* ===== \u5168\u5c4f\u82f1\u96c4 ===== *\/\n .screen {\n width: 100vw;\n height: 100vh;\n position: relative;\n overflow: hidden;\n background: var(--black);\n margin-top: 0;\n }\n .screen-img {\n position: absolute;\n inset: 0;\n width: 100%; height: 100%;\n object-fit: cover;\n opacity: 0;\n transition: opacity 1.6s cubic-bezier(0.4,0,0.2,1);\n }\n .screen-img.active { opacity: 1; }\n\n .screen-vignette {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at center, transparent 30%, rgba(8,8,8,0.7) 100%),\n linear-gradient(to bottom, rgba(8,8,8,0.15) 0%, transparent 30%, transparent 60%, rgba(8,8,8,0.85) 100%);\n pointer-events: none;\n }\n\n .screen-content {\n position: absolute;\n bottom: 72px; left: 56px;\n max-width: 680px;\n z-index: 2;\n }\n .screen-tag {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: var(--warm);\n margin-bottom: 20px;\n }\n .screen-title {\n font-size: clamp(48px, 8vw, 96px);\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 0.92;\n margin-bottom: 24px;\n color: var(--white);\n }\n .screen-body {\n font-size: 15px;\n color: var(--text-dim);\n line-height: 1.7;\n max-width: 420px;\n letter-spacing: 0.01em;\n }\n .screen-arrow {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n color: rgba(255,255,255,0.3);\n font-size: 9px;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n animation: bounceDown 2.2s ease-in-out infinite;\n }\n .screen-arrow::before {\n content: '';\n display: block;\n width: 1px;\n height: 36px;\n background: rgba(255,255,255,0.25);\n }\n @keyframes bounceDown {\n 0%, 100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(8px); }\n }\n\n .screen-side {\n position: absolute;\n right: 48px;\n bottom: 72px;\n writing-mode: vertical-rl;\n font-size: 10px;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: rgba(255,255,255,0.2);\n z-index: 2;\n }\n\n .screen-dots {\n position: absolute;\n bottom: 44px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 8px;\n z-index: 3;\n }\n .dot {\n width: 4px; height: 4px;\n border-radius: 50%;\n background: rgba(255,255,255,0.25);\n cursor: pointer;\n border: none;\n transition: all 0.35s;\n padding: 0;\n }\n .dot.on { background: var(--white); transform: scale(1.5); }\n\n \/* ===== \u7ae0\u8282 ===== *\/\n .section {\n padding: 100px 56px 60px;\n }\n .section-header {\n margin-bottom: 40px;\n }\n .section-index {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--warm);\n opacity: 0.7;\n margin-bottom: 10px;\n }\n .section-title {\n font-size: clamp(32px, 4.5vw, 56px);\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 1.0;\n margin-bottom: 10px;\n }\n .section-sub {\n font-size: 14px;\n color: var(--text-dim);\n max-width: 420px;\n line-height: 1.7;\n }\n\n \/* ===== \u4f5c\u54c1\u7f51\u683c ===== *\/\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2px;\n }\n .card {\n position: relative;\n overflow: hidden;\n cursor: pointer;\n background: rgba(255,255,255,0.02);\n transition: background 0.4s ease;\n }\n .card:hover {\n background: rgba(255,255,255,0.06);\n }\n .card-image {\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n pointer-events: none;\n }\n .card-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.9s cubic-bezier(0.4,0,0.2,1), filter 0.5s;\n }\n .card:hover .card-image img {\n transform: scale(1.04);\n filter: brightness(0.8);\n }\n .card-content {\n padding: 16px 20px 20px;\n }\n .card-category {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--text-faint);\n margin-bottom: 6px;\n }\n .card-title {\n font-size: 17px;\n font-weight: 600;\n letter-spacing: -0.01em;\n margin-bottom: 4px;\n color: var(--white);\n }\n .card-desc {\n font-size: 13px;\n color: var(--text-dim);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n \/* ===== \u6570\u5b57\u533a ===== *\/\n .numbers {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2px;\n padding: 0;\n }\n .num-cell {\n background: var(--black);\n padding: 56px 32px;\n text-align: center;\n border-top: 1px solid rgba(255,255,255,0.05);\n }\n .num-val {\n font-size: clamp(44px, 5.5vw, 72px);\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 1.0;\n margin-bottom: 10px;\n background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .num-label {\n font-size: 11px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--text-dim);\n }\n\n \/* ===== CTA ===== *\/\n .cta-section {\n padding: 120px 56px;\n text-align: left;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 40px;\n border-top: 1px solid rgba(255,255,255,0.05);\n }\n .cta-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.22em;\n text-transform: uppercase;\n color: var(--warm);\n opacity: 0.7;\n margin-bottom: 16px;\n }\n .cta-title {\n font-size: clamp(36px, 5.5vw, 72px);\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 0.95;\n }\n .cta-link {\n display: inline-flex;\n align-items: center;\n gap: 14px;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--black);\n background: var(--white);\n padding: 16px 32px;\n border-radius: 100px;\n white-space: nowrap;\n transition: transform 0.25s, box-shadow 0.25s;\n flex-shrink: 0;\n align-self: flex-end;\n }\n .cta-link:hover {\n transform: translateY(-3px);\n box-shadow: 0 20px 50px rgba(255,255,255,0.12);\n text-decoration: none;\n }\n\n \/* ===== FOOTER ===== *\/\n .footer {\n padding: 32px 56px 24px;\n border-top: 1px solid rgba(255,255,255,0.04);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n }\n .footer-main {\n width: 100%;\n max-width: 1200px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n }\n .footer-left {\n font-size: 11px;\n color: rgba(255,255,255,0.18);\n }\n .footer-right {\n display: flex;\n gap: 24px;\n }\n .footer-right a {\n font-size: 11px;\n color: rgba(255,255,255,0.25);\n transition: color 0.2s;\n }\n .footer-right a:hover { color: rgba(255,255,255,0.7); }\n\n .footer-beian {\n width: 100%;\n max-width: 1200px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding-top: 16px;\n border-top: 1px solid rgba(255,255,255,0.06);\n font-size: 11px;\n color: rgba(255,255,255,0.2);\n flex-wrap: wrap;\n }\n .footer-beian a {\n color: rgba(255,255,255,0.2);\n transition: color 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n }\n .footer-beian a:hover { color: rgba(255,255,255,0.5); }\n .footer-beian img {\n width: 16px;\n height: 16px;\n display: inline-block;\n vertical-align: middle;\n }\n .footer-beian .sep {\n color: rgba(255,255,255,0.08);\n }\n\n \/* ===== MODAL ===== *\/\n .modal {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(4,4,4,0.97);\n z-index: 1000;\n align-items: center;\n justify-content: center;\n }\n .modal.open { display: flex; }\n .modal img { max-width: 94vw; max-height: 90vh; object-fit: contain; }\n .modal-close {\n position: absolute;\n top: 24px; right: 24px;\n width: 44px; height: 44px;\n border-radius: 50%;\n background: rgba(255,255,255,0.08);\n border: none;\n color: #fff;\n cursor: pointer;\n font-size: 18px;\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.18); }\n\n \/* ===== BACK TOP ===== *\/\n .back-top {\n position: fixed;\n bottom: 28px; right: 28px;\n width: 42px; height: 42px;\n border-radius: 50%;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.1);\n color: rgba(255,255,255,0.4);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n opacity: 0;\n transform: translateY(12px);\n transition: opacity 0.3s, transform 0.3s;\n z-index: 50;\n }\n .back-top.visible { opacity: 1; transform: translateY(0); }\n .back-top:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); }\n\n \/* ===== \u54cd\u5e94\u5f0f ===== *\/\n @media (max-width: 900px) {\n .nav { padding: 22px 24px; }\n .menu-toggle { display: block; }\n .nav-links { display: none; }\n .mobile-nav { display: block; }\n .mobile-overlay { display: block; }\n .screen-content { bottom: 56px; left: 28px; right: 28px; }\n .screen-side { display: none; }\n .section { padding: 72px 24px 48px; }\n .gallery-grid { grid-template-columns: repeat(2, 1fr); }\n .numbers { grid-template-columns: repeat(2, 1fr); }\n .num-cell { padding: 36px 20px; }\n .cta-section { padding: 72px 24px; flex-direction: column; }\n .footer { padding: 28px 24px 20px; }\n .footer-main { flex-direction: column; text-align: center; }\n .footer-right { justify-content: center; }\n }\n @media (max-width: 600px) {\n .gallery-grid { grid-template-columns: 1fr; }\n .card-image { aspect-ratio: 16\/10; }\n .footer-beian { gap: 8px; font-size: 10px; }\n .card-content { padding: 14px 16px 16px; }\n .card-title { font-size: 16px; }\n }\n <\/style>\n\n\n\n<!-- \u5bfc\u822a -->\n<nav class=\"nav\" id=\"mainNav\">\n <div class=\"nav-logo\">\n <img decoding=\"async\" data-src=\"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/og-image.jpg\" alt=\"RyanRen\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/2560;\">\n <span>RyanRen<\/span>\n <\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#commercial\">\u5546\u4e1a<\/a><\/li>\n <li><a href=\"#entertainment\">\u5a31\u4e50<\/a><\/li>\n <li><a href=\"#public\">\u516c\u5171<\/a><\/li>\n <li><a href=\"#digital\">\u6570\u5b57<\/a><\/li>\n <li><a href=\"https:\/\/ryanren.top\">\u9996\u9875<\/a><\/li>\n <\/ul>\n <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"\u83dc\u5355\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6h16M4 12h16M4 18h16\"><\/path>\n <\/svg>\n <\/button>\n<\/nav>\n\n<!-- \u79fb\u52a8\u7aef -->\n<div class=\"mobile-overlay\" id=\"mobileOverlay\"><\/div>\n<nav class=\"mobile-nav\" id=\"mobileNav\">\n <button class=\"mobile-close\" id=\"mobileClose\" aria-label=\"\u5173\u95ed\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 6L6 18M6 6l12 12\"><\/path>\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<!-- \u5168\u5c4f\u82f1\u96c4 -->\n<section class=\"screen\" id=\"hero\">\n <div class=\"screen-slides\" id=\"screenSlides\"><\/div>\n <div class=\"screen-vignette\"><\/div>\n <div class=\"screen-content\">\n <div class=\"screen-tag\" id=\"screenTag\">\u4f5c\u54c1\u96c6 \u00b7 2026<\/div>\n <h1 class=\"screen-title\" id=\"screenTitle\">\u4efb\u5fd7\u8fdc<br>\u8bbe\u8ba1\u4f5c\u54c1<\/h1>\n <p class=\"screen-body\" id=\"screenBody\">\u7a7a\u95f4\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u5efa\u6a21\u6e32\u67d3<br>\u4e13\u6ce8\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c\u7684\u878d\u5408<\/p>\n <\/div>\n <div class=\"screen-side\">RyanRen<\/div>\n <div class=\"screen-arrow\">Scroll<\/div>\n <div class=\"screen-dots\" id=\"screenDots\"><\/div>\n<\/section>\n\n<!-- \u4f5c\u54c1\u7f51\u683c\uff1a\u5546\u4e1a\u7a7a\u95f4 -->\n<section class=\"section\" id=\"commercial\">\n <div class=\"section-header\">\n <div class=\"section-index\">Category 01<\/div>\n <h2 class=\"section-title\">\u5546\u4e1a\u7a7a\u95f4<\/h2>\n <p class=\"section-sub\">\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u6863\u53e3\u96c6\u5408<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"grid-commercial\"><\/div>\n<\/section>\n\n<!-- \u4f5c\u54c1\u7f51\u683c\uff1a\u5a31\u4e50\u7a7a\u95f4 -->\n<section class=\"section\" id=\"entertainment\">\n <div class=\"section-header\">\n <div class=\"section-index\">Category 02<\/div>\n <h2 class=\"section-title\">\u5a31\u4e50\u7a7a\u95f4<\/h2>\n <p class=\"section-sub\">\u7403\u5e55\u5f71\u9662 \u00b7 \u6c89\u6d78\u4f53\u9a8c \u00b7 VR\u5143\u5b87\u5b99<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"grid-entertainment\"><\/div>\n<\/section>\n\n<!-- \u4f5c\u54c1\u7f51\u683c\uff1a\u516c\u5171\u5c55\u9648 -->\n<section class=\"section\" id=\"public\">\n <div class=\"section-header\">\n <div class=\"section-index\">Category 03<\/div>\n <h2 class=\"section-title\">\u516c\u5171\u5c55\u9648<\/h2>\n <p class=\"section-sub\">\u653f\u4f01\u9879\u76ee \u00b7 \u57ce\u5e02\u66f4\u65b0 \u00b7 \u6587\u5316\u7a7a\u95f4<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"grid-public\"><\/div>\n<\/section>\n\n<!-- \u4f5c\u54c1\u7f51\u683c\uff1a\u6570\u5b57\u5a92\u4f53 -->\n<section class=\"section\" id=\"digital\">\n <div class=\"section-header\">\n <div class=\"section-index\">Category 04<\/div>\n <h2 class=\"section-title\">\u6570\u5b57\u5a92\u4f53<\/h2>\n <p class=\"section-sub\">\u5efa\u6a21\u6e32\u67d3 \u00b7 \u89c6\u89c9\u5f71\u7247 \u00b7 \u5168\u666f\u6c89\u6d78<\/p>\n <\/div>\n <div class=\"gallery-grid\" id=\"grid-digital\"><\/div>\n<\/section>\n\n<!-- \u6570\u5b57\u533a -->\n<section class=\"numbers\">\n <div class=\"num-cell\">\n <div class=\"num-val\">1200+<\/div>\n <div class=\"num-label\">\u8bbe\u8ba1\u7a7a\u95f4<\/div>\n <\/div>\n <div class=\"num-cell\">\n <div class=\"num-val\">4<\/div>\n <div class=\"num-label\">\u670d\u52a1\u677f\u5757<\/div>\n <\/div>\n <div class=\"num-cell\">\n <div class=\"num-val\">2020<\/div>\n <div class=\"num-label\">\u8bbe\u8ba1\u8d77\u70b9<\/div>\n <\/div>\n <div class=\"num-cell\">\n <div class=\"num-val\">\u4e13\u6ce8<\/div>\n <div class=\"num-label\">\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c<\/div>\n <\/div>\n<\/section>\n\n<!-- CTA -->\n<section>\n <div class=\"cta-section\">\n <div class=\"cta-text\">\n <div class=\"cta-label\">About Design<\/div>\n <h2 class=\"cta-title\">\u804a\u804a\u4f60\u7684<br>\u9879\u76ee\u6784\u60f3<\/h2>\n <\/div>\n <a href=\"https:\/\/www.ryanren.top\/index.php\/lxw\/\" class=\"cta-link\">\u8054\u7cfb\u5408\u4f5c \u2192<\/a>\n <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer class=\"footer\">\n <div class=\"footer-main\">\n <div class=\"footer-left\">\u00a9 2026 \u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/div>\n <div class=\"footer-right\">\n <a href=\"https:\/\/ryanren.top\">\u9996\u9875<\/a>\n <a href=\"https:\/\/www.ryanren.top\/index.php\/lxw\/\">\u8054\u7cfb<\/a>\n <\/div>\n <\/div>\n <div class=\"footer-beian\">\n <a href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\">\u9c81ICP\u59072026001577\u53f7-1<\/a>\n <span class=\"sep\">|<\/span>\n <a href=\"https:\/\/beian.mps.gov.cn\/#\/query\/webSearch?code=37172402000457\" target=\"_blank\">\n <img decoding=\"async\" data-src=\"https:\/\/www.beian.gov.cn\/img\/ghs.png\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n \u9c81\u516c\u7f51\u5b89\u590737172402000457\u53f7\n <\/a>\n <\/div>\n<\/footer>\n\n<!-- MODAL -->\n<div class=\"modal\" id=\"modal\">\n <button class=\"modal-close\" id=\"modalClose\">\u2715<\/button>\n <img decoding=\"async\" id=\"modalImg\" src=\"\" alt=\"\">\n<\/div>\n\n<!-- BACK TOP -->\n<button class=\"back-top\" id=\"backTop\">\u2191<\/button>\n\n<script>\n(function() {\n 'use strict';\n\n \/\/ ===== \u8f6e\u64ad\u6570\u636e =====\n const SLIDES = [\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/GD01.jpg\", alt: \"\u5546\u4e1a\u7a7a\u95f4\", tag: \"\u4f5c\u54c1\u96c6 \u00b7 2026\", title: \"\u4efb\u5fd7\u8fdc\", sub: \"\u8bbe\u8ba1\u4f5c\u54c1\", body: \"\u7a7a\u95f4\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u5efa\u6a21\u6e32\u67d3\\n\u4e13\u6ce8\u521b\u610f\u4e0e\u5546\u4e1a\u4ef7\u503c\u7684\u878d\u5408\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/CLBFM1-scaled.jpg\", alt: \"\u5a31\u4e50\u7a7a\u95f4\", tag: \"Category 01\", title: \"\u5546\u4e1a\", sub: \"\u7a7a\u95f4\", body: \"\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7\\n\u8ba9\u6bcf\u4e00\u4e2a\u7a7a\u95f4\u90fd\u6210\u4e3a\u54c1\u724c\u89e6\u70b9\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/DEBFM1-scaled.jpg\", alt: \"\u516c\u5171\u5c55\u9648\", tag: \"Category 02\", title: \"\u5a31\u4e50\", sub: \"\u7a7a\u95f4\", body: \"\u7403\u5e55\u5f71\u9662 \u00b7 \u6c89\u6d78\u4f53\u9a8c\\n\u521b\u9020\u8d85\u8d8a\u73b0\u5b9e\u7684\u611f\u5b98\u4e4b\u65c5\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/JZYSFM1.jpg\", alt: \"\u6570\u5b57\u5a92\u4f53\", tag: \"Category 03\", title: \"\u516c\u5171\", sub: \"\u5c55\u9648\", body: \"\u653f\u4f01\u9879\u76ee \u00b7 \u57ce\u5e02\u66f4\u65b0\\n\u4ee5\u8bbe\u8ba1\u56de\u5e94\u57ce\u5e02\u516c\u5171\u9700\u6c42\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/wxcsc-1-e1773306333433.jpg\", alt: \"\u57ce\u5e02\u66f4\u65b0\", tag: \"Category 04\", title: \"\u6570\u5b57\", sub: \"\u5a92\u4f53\", body: \"\u5efa\u6a21\u6e32\u67d3 \u00b7 \u89c6\u89c9\u5f71\u7247\\n\u4ece\u6982\u5ff5\u5230\u6210\u54c1\u7684\u5168\u94fe\u8def\u670d\u52a1\" }\n ];\n\n \/\/ ===== \u4f5c\u54c1\u6570\u636e =====\n const PROJECTS = {\n commercial: [\n { 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 { title: \"\u5947\u745e\u5546\u7528\u8f66 \u00b7 \u96f6\u7c73\u8f7b\u5361\", 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 { 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 { 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 { 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 { title: \"\u9152\u53f7\u5df4\u58eb\u7cbe\u917f\u9152\u9986\", 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 { 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 { title: \"\u5c0f\u5403\u6863\u53e3\u5408\u96c6\", desc: \"\u7279\u8272\u5c0f\u5403\u6863\u53e3\u89c6\u89c9\u4e0e\u7a7a\u95f4\u4e00\u4f53\u5316\u5347\u7ea7\uff0c\u6253\u9020\u9ad8\u576a\u6548\u3001\u5f3a\u590d\u8d2d\u7684\u6f6e\u6d41\u7f8e\u98df\u96c6\u5408\u7ad9\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/05\/CYDZ5.jpg\", link: \"https:\/\/ryanren.top\/index.php\/ysbrand\/\" },\n { title: \"\u6b23\u5bb6\u95e8\u7a97\", desc: \"\u73b0\u4ee3\u5de5\u4e1a\u7f8e\u5b66\u4e0e\u54c1\u724c\u4f53\u9a8c\u7684\u878d\u5408\uff0c\u7ea68000m\u00b2\u5de5\u4e1a\u603b\u90e8\u7a7a\u95f4\u8bbe\u8ba1\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/08\/XINHOME.webp\", link: \"https:\/\/ryanren.top\/index.php\/1420-2\/\" }\n ],\n entertainment: [\n { 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 { 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\/08\/%E5%B9%BF%E4%B8%9C%E4%BD%9B%E5%B1%B1%E4%B9%90%E4%BA%BA%E7%A0%81%E5%A4%B424.09-1.webp\", link: \"https:\/\/ryanren.top\/index.php\/qmyy\/\" },\n { 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 { title: \"\u5a01DY 9D\u7403\u5e55\u98de\u884c\u5f71\u9662\", desc: \"\u9ed1\u7070\u4e3b\u8c03\u642d\u914d\u84dd\u7d2b\u9713\u8679\uff0c\u79d1\u5e7b\u53d9\u4e8b\u4e0e\u591a\u8bed\u8a00\u6807\u8bc6\u8986\u76d6\uff0c\u6253\u9020\u56fd\u9645\u5316\u7684\u6c89\u6d78\u5a31\u4e50\u7a7a\u95f4\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/01\/WY-1-scaled.jpg\", link: \"https:\/\/ryanren.top\/index.php\/wdy9d\/\" },\n { title: \"\u6b22\u4e50\u7801\u5934 VR\u5143\u5b87\u5b99\", desc: \"\u8d5b\u535a\u7f8e\u5b66\u4e0eVR\u6280\u672f\u878d\u5408\uff0c\u52a8\u611f\u5e73\u53f0\u4e0e\u5168\u611f\u6c89\u6d78\u4f53\u9a8c\uff0c\u6253\u9020\u672a\u6765\u611f\u79d1\u6280\u5a31\u4e50\u65b0\u5730\u6807\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/08\/%E9%99%95%E8%A5%BF%E8%A5%BF%E5%AE%89%E4%B9%90%E4%BA%BA%E7%A0%81%E5%A4%B424.12-3.webp\", link: \"https:\/\/ryanren.top\/index.php\/vr\/\" }\n ],\n public: [\n { 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 { 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 { title: \"\u829c\u6e56\u5b98\u9661\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 { title: \"\u5927\u6210\u662d\u548c\u7119\u70e4\u5c55\u4f4d\", desc: \"70m\u00b2\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 { title: \"GOMROS \u7cfb\u7edf\u5c55\u5385\", desc: \"\u7ea61200m\u00b2\uff0c\u4ee5\u6781\u7b80\u51e0\u4f55\u4e0e\u5168\u666f\u79e9\u5e8f\u6784\u5efa\u7cfb\u7edf\u4f53\u9a8c\u573a\u57df\uff0c\u94dd\u578b\u6750\u4e0e\u73bb\u7483\u6784\u6210\u7684\u6a21\u5757\u5316\u5c55\u9648\u7cfb\u7edf\u3002\", img: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/08\/GOMISO-7.webp\", link: \"https:\/\/ryanren.top\/index.php\/gomros\/\" }\n ],\n digital: [\n { 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 { 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 { 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 { 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\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 mobileClose = document.getElementById('mobileClose');\n\n function openNav() {\n mobileNav.classList.add('open');\n mobileOverlay.classList.add('open');\n document.body.style.overflow = 'hidden';\n }\n function closeNav() {\n mobileNav.classList.remove('open');\n mobileOverlay.classList.remove('open');\n document.body.style.overflow = '';\n }\n menuToggle.addEventListener('click', openNav);\n mobileClose.addEventListener('click', closeNav);\n mobileOverlay.addEventListener('click', closeNav);\n\n \/\/ ===== \u8f6e\u64ad =====\n let cur = 0;\n let timer = null;\n const slidesEl = document.getElementById('screenSlides');\n const dotsEl = document.getElementById('screenDots');\n const tagEl = document.getElementById('screenTag');\n const titleEl = document.getElementById('screenTitle');\n const bodyEl = document.getElementById('screenBody');\n\n function buildSlides() {\n slidesEl.innerHTML = '';\n dotsEl.innerHTML = '';\n SLIDES.forEach((s, i) => {\n const div = document.createElement('div');\n div.style.cssText = 'position:absolute;inset:0;opacity:0;transition:opacity 1.6s';\n const img = document.createElement('img');\n img.src = s.src;\n img.alt = s.alt;\n img.style.cssText = 'width:100%;height:100%;object-fit:cover;';\n img.loading = i === 0 ? 'eager' : 'lazy';\n div.appendChild(img);\n slidesEl.appendChild(div);\n\n const dot = document.createElement('button');\n dot.className = 'dot' + (i === 0 ? ' on' : '');\n dot.addEventListener('click', () => go(i));\n dotsEl.appendChild(dot);\n });\n showSlide(0);\n }\n\n function showSlide(idx) {\n const imgs = slidesEl.querySelectorAll('div > img');\n imgs.forEach((img, i) => {\n img.parentElement.style.opacity = i === idx ? '1' : '0';\n });\n dotsEl.querySelectorAll('.dot').forEach((d, i) => {\n d.classList.toggle('on', i === idx);\n });\n const s = SLIDES[idx];\n tagEl.textContent = s.tag;\n titleEl.innerHTML = (s.title + '<br>' + s.sub);\n bodyEl.innerHTML = s.body.replace(\/\\n\/g, '<br>');\n }\n\n function go(idx) {\n clearTimeout(timer);\n showSlide(idx);\n cur = idx;\n timer = setTimeout(() => go((cur + 1) % SLIDES.length), 4500);\n }\n\n function next() { go((cur + 1) % SLIDES.length); }\n function prev() { go((cur - 1 + SLIDES.length) % SLIDES.length); }\n\n \/\/ ===== \u6784\u5efa\u4f5c\u54c1\u7f51\u683c =====\n function buildGrid(containerId, items) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n items.forEach(item => {\n const card = document.createElement('div');\n card.className = 'card';\n card.innerHTML = `\n <div class=\"card-image\"><img decoding=\"async\" src=\"${item.img}\" alt=\"${item.title}\" loading=\"lazy\" onerror=\"this.src='https:\/\/placehold.co\/600x400\/111\/555?text=Image'\"><\/div>\n <div class=\"card-content\">\n <div class=\"card-category\">${containerId.replace('grid-', '')}<\/div>\n <div class=\"card-title\">${item.title}<\/div>\n <div class=\"card-desc\">${item.desc}<\/div>\n <\/div>\n `;\n card.addEventListener('click', () => {\n if (item.link) window.open(item.link, '_blank');\n });\n container.appendChild(card);\n });\n }\n\n \/\/ ===== \u6784\u5efa\u6240\u6709\u7f51\u683c =====\n buildGrid('grid-commercial', PROJECTS.commercial);\n buildGrid('grid-entertainment', PROJECTS.entertainment);\n buildGrid('grid-public', PROJECTS.public);\n buildGrid('grid-digital', PROJECTS.digital);\n\n \/\/ ===== \u542f\u52a8\u8f6e\u64ad =====\n buildSlides();\n timer = setTimeout(() => go(1), 4500);\n\n \/\/ ===== \u9f20\u6807\u60ac\u505c\u6682\u505c\u8f6e\u64ad =====\n const hero = document.getElementById('hero');\n hero.addEventListener('mouseenter', () => clearTimeout(timer));\n hero.addEventListener('mouseleave', () => {\n timer = setTimeout(() => go((cur + 1) % SLIDES.length), 4500);\n });\n hero.addEventListener('click', (e) => {\n if (!e.target.closest('.dot')) { clearTimeout(timer); next(); }\n });\n\n \/\/ ===== \u952e\u76d8\u63a7\u5236 =====\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowRight') { clearTimeout(timer); next(); }\n if (e.key === 'ArrowLeft') { clearTimeout(timer); prev(); }\n });\n\n \/\/ ===== \u5bfc\u822a\u6eda\u52a8\u6548\u679c =====\n const nav = document.querySelector('.nav');\n window.addEventListener('scroll', () => {\n nav.classList.toggle('scrolled', window.scrollY > 60);\n }, { passive: true });\n\n \/\/ ===== \u5165\u573a\u52a8\u753b =====\n const revealEls = document.querySelectorAll('.section,.numbers,.cta-section');\n const revealObs = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.transition = 'opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1)';\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n revealObs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.08 });\n revealEls.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(32px)';\n revealObs.observe(el);\n });\n\n \/\/ ===== Back Top =====\n const bt = document.getElementById('backTop');\n window.addEventListener('scroll', () => {\n bt.classList.toggle('visible', window.scrollY > 600);\n }, { passive: true });\n bt.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n \/\/ ===== \u951a\u70b9\u5e73\u6ed1 =====\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n a.addEventListener('click', e => {\n e.preventDefault();\n const t = document.querySelector(a.getAttribute('href'));\n if (t) {\n closeNav();\n t.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n });\n\n \/\/ ===== Modal\uff08\u4ec5\u7528\u4e8e\u8f6e\u64ad\u56fe\u653e\u5927\uff09 =====\n const modal = document.getElementById('modal');\n const modalImg = document.getElementById('modalImg');\n const modalClose = document.getElementById('modalClose');\n\n function openModal(src) {\n modalImg.src = src;\n modal.classList.add('open');\n document.body.style.overflow = 'hidden';\n }\n function closeModal() {\n modal.classList.remove('open');\n document.body.style.overflow = '';\n }\n modalClose.addEventListener('click', closeModal);\n modal.addEventListener('click', e => { if (e.target === modal) closeModal(); });\n document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });\n\n \/\/ \u8f6e\u64ad\u56fe\u652f\u6301\u70b9\u51fb\u653e\u5927\n document.querySelectorAll('.screen-slides img').forEach(img => {\n img.addEventListener('click', (e) => {\n e.stopPropagation();\n openModal(img.src);\n });\n });\n\n \/\/ ===== \u66b4\u9732\u7ed9\u5168\u5c40 =====\n window.openModal = openModal;\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u4efb\u5fd7\u8fdc \u00b7 \u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6 RyanRen \u5546\u4e1a \u5a31\u4e50 \u516c\u5171 \u6570\u5b57 \u9996\u9875 \u5546\u4e1a\u7a7a\u95f4 \u5a31\u4e50\u7a7a\u95f4 \u516c\u5171\u5c55\u9648 \u6570\u5b57\u5a92 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1063,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-494","page","type-page","status-publish","has-post-thumbnail","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":106,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":1572,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions\/1572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/media\/1063"}],"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}]}}