\u4efb\u5fd7\u8fdc|\u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/title>\n<meta name=\"description\" content=\"\u4efb\u5fd7\u8fdc\u8bbe\u8ba1\u4f5c\u54c1\u96c6,\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|\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\/01\/FM-1-scaled.jpg\">\n<meta property=\"og:url\" content=\"https:\/\/www.ryanren.top\/portfolio\/\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n --text-primary: #1d1d1f;\n --text-secondary: #86868b;\n --bg-white: #fff;\n --bg-gray: #f5f5f7;\n --border: rgba(0, 0, 0, 0.08);\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;\n background: var(--bg-white);\n color: var(--text-primary);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n scroll-behavior: smooth;\n overflow-x: hidden;\n}\n\n\/* \u2500\u2500\u2500 \u8f6e\u64ad\u56fe Hero \u2500\u2500\u2500 *\/\n.hero {\n position: relative;\n width: 100%;\n height: 100vh;\n min-height: 600px;\n background: #000;\n overflow: hidden;\n}\n\n.hero-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1.2s ease;\n}\n\n.hero-slide.active {\n opacity: 1;\n}\n\n.hero-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.hero-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom,\n rgba(0,0,0,0.1) 0%,\n rgba(0,0,0,0) 40%,\n rgba(0,0,0,0.4) 80%,\n rgba(0,0,0,0.9) 100%\n );\n}\n\n.hero-content {\n position: absolute;\n bottom: 12vh;\n left: 5%;\n text-align: left;\n color: #fff;\n max-width: 600px;\n}\n\n.hero-content h1 {\n font-size: clamp(48px, 8vw, 80px);\n font-weight: 700;\n letter-spacing: -0.03em;\n line-height: 1.05;\n margin-bottom: 16px;\n}\n\n.hero-content p {\n font-size: clamp(18px, 2.5vw, 24px);\n font-weight: 400;\n opacity: 0.9;\n letter-spacing: -0.01em;\n}\n\n\/* \u8f6e\u64ad\u63a7\u5236 *\/\n.hero-nav {\n position: absolute;\n bottom: 4vh;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 10;\n}\n\n.hero-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: rgba(255,255,255,0.3);\n border: none;\n cursor: pointer;\n transition: all 0.4s ease;\n padding: 0;\n}\n\n.hero-dot.active {\n background: #fff;\n width: 24px;\n border-radius: 4px;\n}\n\n\/* \u5de6\u53f3\u7bad\u5934 *\/\n.hero-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: rgba(255,255,255,0.1);\n backdrop-filter: blur(10px);\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: all 0.3s ease;\n z-index: 10;\n opacity: 0;\n}\n\n.hero:hover .hero-arrow {\n opacity: 1;\n}\n\n.hero-arrow:hover {\n background: rgba(255,255,255,0.2);\n}\n\n.hero-arrow.prev { left: 32px; }\n.hero-arrow.next { right: 32px; }\n\n\/* \u2500\u2500\u2500 \u5185\u5bb9\u533a \u2500\u2500\u2500 *\/\n.section {\n padding: 120px 0;\n}\n\n.section-header {\n text-align: center;\n margin-bottom: 80px;\n padding: 0 24px;\n}\n\n.section-header h2 {\n font-size: clamp(40px, 6vw, 64px);\n font-weight: 700;\n letter-spacing: -0.03em;\n color: var(--text-primary);\n margin-bottom: 12px;\n}\n\n.section-header p {\n font-size: clamp(18px, 2vw, 21px);\n color: var(--text-secondary);\n font-weight: 400;\n letter-spacing: -0.01em;\n}\n\n\/* \u2500\u2500\u2500 \u4f5c\u54c1\u7f51\u683c \u2500\u2500\u2500 *\/\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 24px;\n padding: 0 5%;\n max-width: 1600px;\n margin: 0 auto;\n}\n\n.card {\n position: relative;\n background: var(--bg-white);\n border-radius: 20px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n box-shadow 0.5s ease;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n opacity: 0;\n transform: translateY(40px);\n}\n\n.card.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);\n}\n\n.card-image {\n width: 100%;\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n background: #f5f5f7;\n}\n\n.card-image 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\n.card:hover .card-image img {\n transform: scale(1.05);\n}\n\n.card-content {\n padding: 24px;\n}\n\n.card-category {\n font-size: 12px;\n font-weight: 600;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 8px;\n}\n\n.card-title {\n font-size: 20px;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 8px;\n letter-spacing: -0.01em;\n}\n\n.card-desc {\n font-size: 15px;\n color: var(--text-secondary);\n line-height: 1.6;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n\/* \u2500\u2500\u2500 \u9876\u90e8\u5bfc\u822a\u680f \u00b7 \u749e\u4e3d\u5496\u5561\u98ce\u683c \u2500\u2500\u2500 *\/\n.nav {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: saturate(180%) blur(20px);\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);\n height: 48px;\n display: flex;\n align-items: center;\n}\n\n.nav-inner {\n width: 100%;\n max-width: 1024px;\n margin: 0 auto;\n padding: 0 22px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.nav-logo {\n font-size: 21px;\n font-weight: 600;\n color: var(--text-primary);\n letter-spacing: -0.01em;\n display: flex;\n align-items: center;\n gap: 10px;\n text-decoration: none;\n transition: opacity 0.2s;\n}\n\n.nav-logo:hover { opacity: 0.7; text-decoration: none; }\n\n.nav-logo img {\n width: 28px;\n height: 28px;\n object-fit: contain;\n}\n\n.nav-links {\n display: flex;\n gap: 32px;\n list-style: none;\n}\n\n.nav-links a {\n font-size: 12px;\n color: var(--text-secondary);\n font-weight: 400;\n letter-spacing: -0.01em;\n transition: color 0.2s;\n text-decoration: none;\n}\n\n.nav-links a:hover {\n color: var(--text-primary);\n}\n\n\/* \u6c49\u5821\u83dc\u5355 *\/\n.menu-toggle {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n color: var(--text-primary);\n}\n\n.menu-toggle svg { width: 24px; height: 24px; }\n\n\/* \u79fb\u52a8\u7aef\u62bd\u5c49 *\/\n.mobile-nav {\n display: none;\n position: fixed;\n top: 0;\n right: -100%;\n width: 300px;\n height: 100vh;\n background: #fff;\n z-index: 1100;\n padding: 90px 36px 36px;\n transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);\n}\n\n.mobile-nav.open { right: 0; }\n\n.mobile-nav a {\n display: block;\n color: var(--text-primary);\n text-decoration: none;\n font-size: 18px;\n font-weight: 400;\n padding: 16px 0;\n border-bottom: 1px solid var(--border);\n transition: opacity 0.2s;\n}\n\n.mobile-nav a:hover { opacity: 0.6; }\n\n.mobile-close {\n position: absolute;\n top: 20px;\n right: 20px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n color: var(--text-primary);\n}\n\n.mobile-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1050;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n}\n\n.mobile-overlay.open {\n opacity: 1;\n visibility: visible;\n}\n\n\/* \u9876\u90e8\u7559\u767d(\u5185\u5bb9\u4e0d\u88ab\u56fa\u5b9a\u5bfc\u822a\u680f\u906e\u6321) *\/\n.hero { margin-top: 48px; }\n\n\/* \u2500\u2500\u2500 \u5e95\u90e8\u680f(\u542b\u5907\u6848)\u00b7 \u749e\u4e3d\u5496\u5561\u98ce\u683c \u2500\u2500\u2500 *\/\n.site-footer {\n background: var(--bg-gray);\n padding: 40px 22px;\n display: flex;\n flex-direction: column;\n align-items: center;\n border-top: 0.5px solid var(--border);\n}\n\n.footer-content {\n display: flex;\n align-items: center;\n gap: 32px;\n width: 100%;\n max-width: 1024px;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.footer-left {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--text-secondary);\n font-size: 12px;\n}\n\n.footer-left img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.footer-right {\n display: flex;\n gap: 28px;\n}\n\n.footer-right a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 12px;\n transition: color 0.2s;\n}\n\n.footer-right a:hover { color: var(--text-primary); }\n\n\/* \u5907\u6848\u4fe1\u606f *\/\n.beian-section {\n width: 100%;\n max-width: 1024px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding-top: 20px;\n border-top: 0.5px solid var(--border);\n font-size: 11px;\n color: var(--text-secondary);\n}\n\n.beian-section a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 11px;\n transition: color 0.2s;\n}\n\n.beian-section a:hover { color: var(--text-primary); }\n\n.beian-section img {\n width: 12px;\n height: 12px;\n vertical-align: middle;\n opacity: 0.5;\n margin-right: 2px;\n}\n\n\/* \u79fb\u9664\u65e7\u6837\u5f0f\u5360\u4f4d *\/\n.footer { display: none; }\n\n\/* \u2500\u2500\u2500 \u8fd4\u56de\u9876\u90e8 \u2500\u2500\u2500 *\/\n.back-top {\n position: fixed;\n bottom: 32px;\n right: 32px;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgba(29, 29, 31, 0.9);\n backdrop-filter: blur(10px);\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: scale(0.8);\n transition: all 0.4s ease;\n z-index: 1000;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.back-top.visible {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n}\n\n.back-top:hover {\n background: #000;\n transform: scale(1.08);\n}\n\n\/* \u2500\u2500\u2500 \u54cd\u5e94\u5f0f \u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n .nav {\n padding: 0 22px;\n }\n\n .nav-inner {\n padding: 0;\n }\n\n .nav-links { display: none; }\n .menu-toggle { display: block; }\n .mobile-nav { display: block; }\n .mobile-overlay { display: block; }\n\n .section {\n padding: 80px 0;\n }\n\n .section-header {\n margin-bottom: 48px;\n }\n\n .gallery-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n padding: 0 16px;\n }\n\n .card-content {\n padding: 20px;\n }\n\n .hero-arrow {\n display: none;\n }\n\n .hero-content {\n left: 24px;\n right: 24px;\n bottom: 16vh;\n max-width: none;\n }\n\n .hero-content h1 {\n font-size: 36px;\n line-height: 1.1;\n }\n\n .hero-content p {\n font-size: 16px;\n }\n\n .back-top {\n bottom: 24px;\n right: 24px;\n width: 44px;\n height: 44px;\n }\n\n .site-footer {\n padding: 32px 22px 24px;\n }\n\n .footer-content {\n flex-direction: column;\n gap: 12px;\n text-align: center;\n margin-bottom: 24px;\n }\n\n .footer-left {\n justify-content: center;\n }\n\n .beian-section {\n flex-direction: column;\n gap: 8px;\n padding-top: 20px;\n }\n}\n\n@media (max-width: 480px) {\n .nav {\n padding: 0 16px;\n }\n\n .nav-logo span {\n font-size: 18px;\n }\n\n .site-footer {\n padding: 28px 16px;\n }\n}\n\n\/* \u2500\u2500\u2500 \u52a8\u753b \u2500\u2500\u2500 *\/\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.hero-content {\n animation: fadeInUp 1s ease 0.3s both;\n}\n<\/style>\n<\/head>\n<body>\n\n\n<header class=\"nav\" id=\"mainNav\">\n <div class=\"nav-inner\">\n <a href=\"https:\/\/ryanren.top\/\" 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 <\/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=\"\u83dc\u5355\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6h16M4 12h16M4 18h16\"\/>\n <\/svg>\n <\/button>\n <\/div>\n<\/header>\n\n\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\"\/>\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\n<section class=\"hero\" id=\"hero\">\n <div id=\"heroSlides\"><\/div>\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-content\">\n <h1>\u4efb\u5fd7\u8fdc<br>\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/h1>\n <p>\u4e13\u6ce8\u7a7a\u95f4\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u5efa\u6a21\u6e32\u67d3 \u00b7 \u5a31\u4e50\u7a7a\u95f4<\/p>\n <\/div>\n <button class=\"hero-arrow prev\" aria-label=\"\u4e0a\u4e00\u5f20\">\n <svg width=\"24\" height=\"24\" 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=\"hero-arrow next\" aria-label=\"\u4e0b\u4e00\u5f20\">\n <svg width=\"24\" height=\"24\" 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=\"hero-nav\" id=\"heroNav\"><\/div>\n<\/section>\n\n\n<div id=\"content\"><\/div>\n\n\n<footer class=\"site-footer\">\n <div class=\"footer-content\">\n <div class=\"footer-left\">\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>\u00a9 2026 \u4efb\u5fd7\u8fdc \u7248\u6743\u6240\u6709 | \u4e13\u6ce8\u7a7a\u95f4\u8bbe\u8ba1<\/span>\n <\/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 <\/div>\n <div class=\"beian-section\">\n <a href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\">\u9c81ICP\u59072026001577\u53f7-1<\/a>\n <span>|<\/span>\n <a href=\"https:\/\/beian.mps.gov.cn\/#\/query\/webSearch?code=37172402000457\" target=\"_blank\" rel=\"noreferrer\">\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\n<button class=\"back-top\" id=\"backTop\" 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\/\/ \u6570\u636e\nconst slides = [\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/GD01.jpg\", alt: \"\u5546\u4e1a\u7a7a\u95f4\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/CLBFM1-scaled.jpg\", alt: \"\u5a31\u4e50\u7a7a\u95f4\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/DEBFM1-scaled.jpg\", alt: \"\u516c\u5171\u5c55\u9648\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/JZYSFM1.jpg\", alt: \"\u6570\u5b57\u5a92\u4f53\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/wxcsc-1-e1773306333433.jpg\", alt: \"\u57ce\u5e02\u66f4\u65b0\" }\n];\n\n\/\/ \u4f5c\u54c1\u6570\u636e \u2014\u2014 \u5df2\u6309\u9700\u6c42\u65b0\u589e\u201c\u5c0f\u5403\u6863\u53e3\u5408\u96c6\u201d\u81f3\u5546\u4e1a\u7a7a\u95f4\nconst projects = [\n { group: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u749e\u4e3d\u5496\u5561\u6cc9\u57ce\u516c\u56ed\u5e97\", desc: \"\u5728\u6cc9\u57ce\u516c\u56ed\u7684\u7eff\u610f\u4e2d,\u4ee5'\u9759\u8c27\u4e2d\u7684\u4e13\u6ce8'\u4e3a\u6982\u5ff5,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u5947\u745e\u5546\u7528\u8f66\", desc: \"\u4ee5\u5de5\u4e1a\u529b\u91cf\u4e3a\u6838\u5fc3,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u8f66\u9c81\u73ed\u6c7d\u8f66\u7f8e\u5bb9\u4e2d\u5fc3\", desc: \"\u6807\u51c6\u5316\u670d\u52a1\u6d41\u7a0b\u4e3a\u9aa8\u67b6,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u5361\u670d\u5361\u6c7d\u8f66\u670d\u52a1\u4e2d\u5fc3\", desc: \"\u56f4\u7ed5'\u6280\u672f\u53ef\u89c6\u5316'\u91cd\u6784\u7a7a\u95f4,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u5fb7\u5c14\u5821\u5c0f\u9152\u9986\", desc: \"\u5c06\u5fb7\u5f0f\u5e02\u96c6\u6c1b\u56f4\u5f15\u5165\u5ba4\u5185,\u901a\u8fc7\u6750\u8d28\u6df7\u642d\u4e0e\u706f\u5149\u5c42\u6b21,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u9152\u53f7\u5df4\u58eb\", desc: \"\u590d\u53e4\u5df4\u58eb\u4e3b\u9898\u9152\u9986,\u878d\u5408\u7cbe\u917f\u6587\u5316\u4e0e\u793e\u4ea4\u7a7a\u95f4,\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: \"\u5546\u4e1a\u7a7a\u95f4\", 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,\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 \/\/ \u65b0\u589e\uff1a\u5c0f\u5403\u6863\u53e3\u5408\u96c6\uff08\u7b26\u5408\u5546\u4e1a\u7a7a\u95f4\u9700\u6c42\uff0c\u8df3\u8f6c\u94fe\u63a5\u53ca\u5c01\u9762\u56fe\u6309\u9700\u6c42\u8bbe\u5b9a\uff09\n { group: \"\u5546\u4e1a\u7a7a\u95f4\", 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 { group: \"\u5a31\u4e50\u7a7a\u95f4\", title: \"\u6cf0\u56fd9D\u7403\u5e55\u5f71\u9662\", desc: \"\u5c06\u6cf0\u56fd\u6587\u5316\u5143\u7d20\u8f6c\u8bd1\u4e3a\u89c6\u89c9\u7b26\u53f7,\u878d\u54089D\u4e92\u52a8\u6280\u672f,\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: \"\u5a31\u4e50\u7a7a\u95f4\", title: \"9D\u7403\u5e55\u98de\u884c\u5f71\u9662\", desc: \"\u7ed3\u5408\u7403\u5e55\u4e0e\u52a8\u6001\u5ea7\u6905,\u4ee5'\u51cc\u7a7a\u7ff1\u7fd4'\u4e3a\u53d9\u4e8b\u4e3b\u7ebf,\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: \"\u5a31\u4e50\u7a7a\u95f4\", title: \"\u897f\u65b9\u9f99\u9020\u578b\u7403\u5e55\u5f71\u9662\", desc: \"\u4ee5\u897f\u65b9\u9f99\u4e3aIP\u539f\u578b,\u901a\u8fc7\u5f02\u5f62\u7ed3\u6784\u4e0e\u6570\u5b57\u5a92\u4f53\u878d\u5408,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u829c\u6e56\u9e20\u5179\u591c\u5e02\", desc: \"\u4ee5'\u591c\u7ecf\u6d4e\u6fc0\u6d3b\u5668'\u4e3a\u5b9a\u4f4d,\u901a\u8fc7\u52a8\u7ebf\u91cd\u7ec4\u4e0e\u706f\u5149\u7b56\u7565,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u4f1f\u661f\u83dc\u5e02\u573a\u6539\u9020\", desc: \"\u4ece'\u793e\u533a\u8282\u70b9'\u51fa\u53d1,\u7528\u6a21\u5757\u5316\u8bbe\u8ba1\u4e0e\u89c6\u89c9\u7cfb\u7edf\u5347\u7ea7,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u829c\u6e56\u5b98\u9661\u516c\u4ea4\u7ad9\u4e0e\u5730\u94c1\u7ad9\", desc: \"\u4e00\u4f53\u5316\u5bfc\u89c6\u4e0e\u7a7a\u95f4\u6574\u5408,\u63d0\u5347\u901a\u52e4\u6548\u7387\u7684\u540c\u65f6,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u5927\u6210\u662d\u548c\u7119\u70e4\u5c55\u4f4d\", desc: \"70m2\u6d41\u52a8\u5bb4\u5e2d\u7a7a\u95f4,\u4ee5'\u9ea6\u9999\u6d41\u8f6c'\u4e3a\u6982\u5ff5,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u6c89\u6d78\u5f0f\u5168\u666f\u7a7a\u95f4\", desc: \"360\u00b0\u5168\u666f\u5f71\u50cf\u4e0e\u865a\u62df\u73b0\u5b9e\u7ed3\u5408,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u521b\u610f\u89c6\u89c9\u5f71\u7247\", desc: \"\u54c1\u724c\u5f62\u8c61\u7247\u3001\u4ea7\u54c1\u89c6\u9891\u3001\u52a8\u753b\u77ed\u7247,\u7528\u5f71\u50cf\u4f20\u9012\u6838\u5fc3\u4ef7\u503c,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u5efa\u6a21\u4f5c\u54c1\u96c6\", desc: \"\u9910\u8f66\u00b7\u821e\u53f0\u00b7IP\u624b\u529e\u00b7\u5c0f\u63a8\u8f66,\u5168\u54c1\u7c7b3D\u5efa\u6a21\u670d\u52a1,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u5168\u90e8\u56fe\u7247\", desc: \"\u5168\u54c1\u7c7b\u5efa\u6a21\u4f5c\u54c1\u56fe\u518c,\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\/\/ \u79fb\u52a8\u7aef\u5bfc\u822a\nconst menuToggle = document.getElementById('menuToggle');\nconst mobileNav = document.getElementById('mobileNav');\nconst mobileOverlay = document.getElementById('mobileOverlay');\nconst mobileClose = document.getElementById('mobileClose');\n\nfunction openNav() {\n mobileNav.classList.add('open');\n mobileOverlay.classList.add('open');\n document.body.style.overflow = 'hidden';\n}\n\nfunction closeNav() {\n mobileNav.classList.remove('open');\n mobileOverlay.classList.remove('open');\n document.body.style.overflow = '';\n}\n\nmenuToggle.onclick = openNav;\nmobileClose.onclick = closeNav;\nmobileOverlay.onclick = closeNav;\n\n\/\/ \u5e73\u6ed1\u6eda\u52a8\ndocument.querySelectorAll('.nav-links a, .mobile-nav a').forEach(anchor => {\n anchor.addEventListener('click', e => {\n const href = anchor.getAttribute('href');\n if (href && href.startsWith('#')) {\n e.preventDefault();\n closeNav();\n const id = href.substring(1);\n const target = document.getElementById(id);\n if (target) {\n const offset = 80;\n const top = target.getBoundingClientRect().top + window.pageYOffset - offset;\n window.scrollTo({ top, behavior: 'smooth' });\n }\n }\n });\n});\n\n\/\/ \u6e32\u67d3\u8f6e\u64ad\nconst heroSlides = document.getElementById('heroSlides');\nconst heroNav = document.getElementById('heroNav');\nlet current = 0, timer = null;\n\nslides.forEach((s, i) => {\n const div = document.createElement('div');\n div.className = 'hero-slide' + (i === 0 ? ' active' : '');\n div.innerHTML = `<img decoding=\"async\" src=\"${s.src}\" alt=\"${s.alt}\" loading=\"${i === 0 ? 'eager' : 'lazy'}\">`;\n heroSlides.appendChild(div);\n\n const btn = document.createElement('button');\n btn.className = 'hero-dot' + (i === 0 ? ' active' : '');\n btn.setAttribute('aria-label', s.alt);\n btn.onclick = () => { goTo(i); resetTimer(); };\n heroNav.appendChild(btn);\n});\n\nfunction goTo(i) {\n const all = heroSlides.querySelectorAll('.hero-slide');\n const dots = heroNav.querySelectorAll('.hero-dot');\n all[current].classList.remove('active');\n dots[current].classList.remove('active');\n current = (i + all.length) % all.length;\n all[current].classList.add('active');\n dots[current].classList.add('active');\n}\n\nfunction next() { goTo(current + 1); }\nfunction prev() { goTo(current - 1); }\nfunction startTimer() { timer = setInterval(next, 5000); }\nfunction resetTimer() { clearInterval(timer); startTimer(); }\n\ndocument.querySelector('.hero-arrow.prev').onclick = () => { prev(); resetTimer(); };\ndocument.querySelector('.hero-arrow.next').onclick = () => { next(); resetTimer(); };\ndocument.querySelector('.hero').onmouseenter = () => clearInterval(timer);\ndocument.querySelector('.hero').onmouseleave = startTimer;\ndocument.onkeydown = e => {\n if (e.key === 'ArrowRight') { next(); resetTimer(); }\n if (e.key === 'ArrowLeft') { prev(); resetTimer(); }\n};\n\nstartTimer();\n\n\/\/ \u6e32\u67d3\u4f5c\u54c1\nconst content = document.getElementById('content');\nconst groups = [...new Set(projects.map(p => p.group))];\n\ngroups.forEach(group => {\n const items = projects.filter(p => p.group === group);\n\n const section = document.createElement('section');\n section.className = 'section';\n section.id = group === '\u5546\u4e1a\u7a7a\u95f4' ? 'commercial' : group === '\u5a31\u4e50\u7a7a\u95f4' ? 'entertainment' : group === '\u516c\u5171\u5c55\u9648' ? 'public' : 'digital';\n\n section.innerHTML = `\n <div class=\"section-header\">\n <h2>${group}<\/h2>\n <p>${group === '\u5546\u4e1a\u7a7a\u95f4' ? '\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u6863\u53e3\u96c6\u5408' : group === '\u5a31\u4e50\u7a7a\u95f4' ? '\u7403\u5e55\u5f71\u9662 \u00b7 \u6c89\u6d78\u4f53\u9a8c' : group === '\u516c\u5171\u5c55\u9648' ? '\u653f\u4f01\u9879\u76ee \u00b7 \u57ce\u5e02\u66f4\u65b0' : '\u5efa\u6a21\u6e32\u67d3 \u00b7 \u89c6\u89c9\u5f71\u7247'}<\/p>\n <\/div>\n <div class=\"gallery-grid\">\n ${items.map(p => `\n <div class=\"card\" onclick=\"window.open('${p.link}', '_blank')\">\n <div class=\"card-image\">\n <img decoding=\"async\" src=\"${p.img}\" alt=\"${p.title}\" loading=\"lazy\">\n <\/div>\n <div class=\"card-content\">\n <div class=\"card-category\">${p.group}<\/div>\n <h3 class=\"card-title\">${p.title}<\/h3>\n <p class=\"card-desc\">${p.desc}<\/p>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n `;\n\n content.appendChild(section);\n});\n\n\/\/ \u6eda\u52a8\u52a8\u753b\nconst observer = new IntersectionObserver(entries => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n setTimeout(() => entry.target.classList.add('visible'), i * 80);\n observer.unobserve(entry.target);\n }\n });\n}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n\ndocument.querySelectorAll('.card').forEach(el => observer.observe(el));\n\n\/\/ \u8fd4\u56de\u9876\u90e8\nconst backTop = document.getElementById('backTop');\nwindow.onscroll = () => backTop.classList.toggle('visible', scrollY > 400);\nbackTop.onclick = () => scrollTo({ top: 0, behavior: 'smooth' });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u4efb\u5fd7\u8fdc|\u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6 RyanRen \u5546\u4e1a\u7a7a\u95f4 \u5a31\u4e50\u7a7a\u95f4 \u516c\u5171\u5c55\u9648 \u6570\u5b57\u5a92\u4f53 \u9996\u9875 \u5546\u4e1a\u7a7a\u95f4 \u5a31\u4e50\u7a7a\u95f4 \u516c\u5171 […]<\/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":96,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":1252,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions\/1252"}],"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}]}}

{"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-05-08T13:37:25","modified_gmt":"2026-05-08T05:37:25","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\u4efb\u5fd7\u8fdc|\u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/title>\n<meta name=\"description\" content=\"\u4efb\u5fd7\u8fdc\u8bbe\u8ba1\u4f5c\u54c1\u96c6,\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|\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\/01\/FM-1-scaled.jpg\">\n<meta property=\"og:url\" content=\"https:\/\/www.ryanren.top\/portfolio\/\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n --text-primary: #1d1d1f;\n --text-secondary: #86868b;\n --bg-white: #fff;\n --bg-gray: #f5f5f7;\n --border: rgba(0, 0, 0, 0.08);\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;\n background: var(--bg-white);\n color: var(--text-primary);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n scroll-behavior: smooth;\n overflow-x: hidden;\n}\n\n\/* \u2500\u2500\u2500 \u8f6e\u64ad\u56fe Hero \u2500\u2500\u2500 *\/\n.hero {\n position: relative;\n width: 100%;\n height: 100vh;\n min-height: 600px;\n background: #000;\n overflow: hidden;\n}\n\n.hero-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1.2s ease;\n}\n\n.hero-slide.active {\n opacity: 1;\n}\n\n.hero-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.hero-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(to bottom,\n rgba(0,0,0,0.1) 0%,\n rgba(0,0,0,0) 40%,\n rgba(0,0,0,0.4) 80%,\n rgba(0,0,0,0.9) 100%\n );\n}\n\n.hero-content {\n position: absolute;\n bottom: 12vh;\n left: 5%;\n text-align: left;\n color: #fff;\n max-width: 600px;\n}\n\n.hero-content h1 {\n font-size: clamp(48px, 8vw, 80px);\n font-weight: 700;\n letter-spacing: -0.03em;\n line-height: 1.05;\n margin-bottom: 16px;\n}\n\n.hero-content p {\n font-size: clamp(18px, 2.5vw, 24px);\n font-weight: 400;\n opacity: 0.9;\n letter-spacing: -0.01em;\n}\n\n\/* \u8f6e\u64ad\u63a7\u5236 *\/\n.hero-nav {\n position: absolute;\n bottom: 4vh;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 10;\n}\n\n.hero-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: rgba(255,255,255,0.3);\n border: none;\n cursor: pointer;\n transition: all 0.4s ease;\n padding: 0;\n}\n\n.hero-dot.active {\n background: #fff;\n width: 24px;\n border-radius: 4px;\n}\n\n\/* \u5de6\u53f3\u7bad\u5934 *\/\n.hero-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: rgba(255,255,255,0.1);\n backdrop-filter: blur(10px);\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: all 0.3s ease;\n z-index: 10;\n opacity: 0;\n}\n\n.hero:hover .hero-arrow {\n opacity: 1;\n}\n\n.hero-arrow:hover {\n background: rgba(255,255,255,0.2);\n}\n\n.hero-arrow.prev { left: 32px; }\n.hero-arrow.next { right: 32px; }\n\n\/* \u2500\u2500\u2500 \u5185\u5bb9\u533a \u2500\u2500\u2500 *\/\n.section {\n padding: 120px 0;\n}\n\n.section-header {\n text-align: center;\n margin-bottom: 80px;\n padding: 0 24px;\n}\n\n.section-header h2 {\n font-size: clamp(40px, 6vw, 64px);\n font-weight: 700;\n letter-spacing: -0.03em;\n color: var(--text-primary);\n margin-bottom: 12px;\n}\n\n.section-header p {\n font-size: clamp(18px, 2vw, 21px);\n color: var(--text-secondary);\n font-weight: 400;\n letter-spacing: -0.01em;\n}\n\n\/* \u2500\u2500\u2500 \u4f5c\u54c1\u7f51\u683c \u2500\u2500\u2500 *\/\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 24px;\n padding: 0 5%;\n max-width: 1600px;\n margin: 0 auto;\n}\n\n.card {\n position: relative;\n background: var(--bg-white);\n border-radius: 20px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n box-shadow 0.5s ease;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n opacity: 0;\n transform: translateY(40px);\n}\n\n.card.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);\n}\n\n.card-image {\n width: 100%;\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n background: #f5f5f7;\n}\n\n.card-image 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\n.card:hover .card-image img {\n transform: scale(1.05);\n}\n\n.card-content {\n padding: 24px;\n}\n\n.card-category {\n font-size: 12px;\n font-weight: 600;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 8px;\n}\n\n.card-title {\n font-size: 20px;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 8px;\n letter-spacing: -0.01em;\n}\n\n.card-desc {\n font-size: 15px;\n color: var(--text-secondary);\n line-height: 1.6;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n\/* \u2500\u2500\u2500 \u9876\u90e8\u5bfc\u822a\u680f \u00b7 \u749e\u4e3d\u5496\u5561\u98ce\u683c \u2500\u2500\u2500 *\/\n.nav {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: saturate(180%) blur(20px);\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);\n height: 48px;\n display: flex;\n align-items: center;\n}\n\n.nav-inner {\n width: 100%;\n max-width: 1024px;\n margin: 0 auto;\n padding: 0 22px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.nav-logo {\n font-size: 21px;\n font-weight: 600;\n color: var(--text-primary);\n letter-spacing: -0.01em;\n display: flex;\n align-items: center;\n gap: 10px;\n text-decoration: none;\n transition: opacity 0.2s;\n}\n\n.nav-logo:hover { opacity: 0.7; text-decoration: none; }\n\n.nav-logo img {\n width: 28px;\n height: 28px;\n object-fit: contain;\n}\n\n.nav-links {\n display: flex;\n gap: 32px;\n list-style: none;\n}\n\n.nav-links a {\n font-size: 12px;\n color: var(--text-secondary);\n font-weight: 400;\n letter-spacing: -0.01em;\n transition: color 0.2s;\n text-decoration: none;\n}\n\n.nav-links a:hover {\n color: var(--text-primary);\n}\n\n\/* \u6c49\u5821\u83dc\u5355 *\/\n.menu-toggle {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n color: var(--text-primary);\n}\n\n.menu-toggle svg { width: 24px; height: 24px; }\n\n\/* \u79fb\u52a8\u7aef\u62bd\u5c49 *\/\n.mobile-nav {\n display: none;\n position: fixed;\n top: 0;\n right: -100%;\n width: 300px;\n height: 100vh;\n background: #fff;\n z-index: 1100;\n padding: 90px 36px 36px;\n transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);\n}\n\n.mobile-nav.open { right: 0; }\n\n.mobile-nav a {\n display: block;\n color: var(--text-primary);\n text-decoration: none;\n font-size: 18px;\n font-weight: 400;\n padding: 16px 0;\n border-bottom: 1px solid var(--border);\n transition: opacity 0.2s;\n}\n\n.mobile-nav a:hover { opacity: 0.6; }\n\n.mobile-close {\n position: absolute;\n top: 20px;\n right: 20px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n color: var(--text-primary);\n}\n\n.mobile-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.4);\n z-index: 1050;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n}\n\n.mobile-overlay.open {\n opacity: 1;\n visibility: visible;\n}\n\n\/* \u9876\u90e8\u7559\u767d(\u5185\u5bb9\u4e0d\u88ab\u56fa\u5b9a\u5bfc\u822a\u680f\u906e\u6321) *\/\n.hero { margin-top: 48px; }\n\n\/* \u2500\u2500\u2500 \u5e95\u90e8\u680f(\u542b\u5907\u6848)\u00b7 \u749e\u4e3d\u5496\u5561\u98ce\u683c \u2500\u2500\u2500 *\/\n.site-footer {\n background: var(--bg-gray);\n padding: 40px 22px;\n display: flex;\n flex-direction: column;\n align-items: center;\n border-top: 0.5px solid var(--border);\n}\n\n.footer-content {\n display: flex;\n align-items: center;\n gap: 32px;\n width: 100%;\n max-width: 1024px;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.footer-left {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--text-secondary);\n font-size: 12px;\n}\n\n.footer-left img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.footer-right {\n display: flex;\n gap: 28px;\n}\n\n.footer-right a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 12px;\n transition: color 0.2s;\n}\n\n.footer-right a:hover { color: var(--text-primary); }\n\n\/* \u5907\u6848\u4fe1\u606f *\/\n.beian-section {\n width: 100%;\n max-width: 1024px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding-top: 20px;\n border-top: 0.5px solid var(--border);\n font-size: 11px;\n color: var(--text-secondary);\n}\n\n.beian-section a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 11px;\n transition: color 0.2s;\n}\n\n.beian-section a:hover { color: var(--text-primary); }\n\n.beian-section img {\n width: 12px;\n height: 12px;\n vertical-align: middle;\n opacity: 0.5;\n margin-right: 2px;\n}\n\n\/* \u79fb\u9664\u65e7\u6837\u5f0f\u5360\u4f4d *\/\n.footer { display: none; }\n\n\/* \u2500\u2500\u2500 \u8fd4\u56de\u9876\u90e8 \u2500\u2500\u2500 *\/\n.back-top {\n position: fixed;\n bottom: 32px;\n right: 32px;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgba(29, 29, 31, 0.9);\n backdrop-filter: blur(10px);\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: scale(0.8);\n transition: all 0.4s ease;\n z-index: 1000;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.back-top.visible {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n}\n\n.back-top:hover {\n background: #000;\n transform: scale(1.08);\n}\n\n\/* \u2500\u2500\u2500 \u54cd\u5e94\u5f0f \u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n .nav {\n padding: 0 22px;\n }\n\n .nav-inner {\n padding: 0;\n }\n\n .nav-links { display: none; }\n .menu-toggle { display: block; }\n .mobile-nav { display: block; }\n .mobile-overlay { display: block; }\n\n .section {\n padding: 80px 0;\n }\n\n .section-header {\n margin-bottom: 48px;\n }\n\n .gallery-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n padding: 0 16px;\n }\n\n .card-content {\n padding: 20px;\n }\n\n .hero-arrow {\n display: none;\n }\n\n .hero-content {\n left: 24px;\n right: 24px;\n bottom: 16vh;\n max-width: none;\n }\n\n .hero-content h1 {\n font-size: 36px;\n line-height: 1.1;\n }\n\n .hero-content p {\n font-size: 16px;\n }\n\n .back-top {\n bottom: 24px;\n right: 24px;\n width: 44px;\n height: 44px;\n }\n\n .site-footer {\n padding: 32px 22px 24px;\n }\n\n .footer-content {\n flex-direction: column;\n gap: 12px;\n text-align: center;\n margin-bottom: 24px;\n }\n\n .footer-left {\n justify-content: center;\n }\n\n .beian-section {\n flex-direction: column;\n gap: 8px;\n padding-top: 20px;\n }\n}\n\n@media (max-width: 480px) {\n .nav {\n padding: 0 16px;\n }\n\n .nav-logo span {\n font-size: 18px;\n }\n\n .site-footer {\n padding: 28px 16px;\n }\n}\n\n\/* \u2500\u2500\u2500 \u52a8\u753b \u2500\u2500\u2500 *\/\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(40px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.hero-content {\n animation: fadeInUp 1s ease 0.3s both;\n}\n<\/style>\n<\/head>\n<body>\n\n\n<header class=\"nav\" id=\"mainNav\">\n <div class=\"nav-inner\">\n <a href=\"https:\/\/ryanren.top\/\" 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 <\/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=\"\u83dc\u5355\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6h16M4 12h16M4 18h16\"\/>\n <\/svg>\n <\/button>\n <\/div>\n<\/header>\n\n\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\"\/>\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\n<section class=\"hero\" id=\"hero\">\n <div id=\"heroSlides\"><\/div>\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-content\">\n <h1>\u4efb\u5fd7\u8fdc<br>\u8bbe\u8ba1\u4f5c\u54c1\u96c6<\/h1>\n <p>\u4e13\u6ce8\u7a7a\u95f4\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u5efa\u6a21\u6e32\u67d3 \u00b7 \u5a31\u4e50\u7a7a\u95f4<\/p>\n <\/div>\n <button class=\"hero-arrow prev\" aria-label=\"\u4e0a\u4e00\u5f20\">\n <svg width=\"24\" height=\"24\" 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=\"hero-arrow next\" aria-label=\"\u4e0b\u4e00\u5f20\">\n <svg width=\"24\" height=\"24\" 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=\"hero-nav\" id=\"heroNav\"><\/div>\n<\/section>\n\n\n<div id=\"content\"><\/div>\n\n\n<footer class=\"site-footer\">\n <div class=\"footer-content\">\n <div class=\"footer-left\">\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>\u00a9 2026 \u4efb\u5fd7\u8fdc \u7248\u6743\u6240\u6709 | \u4e13\u6ce8\u7a7a\u95f4\u8bbe\u8ba1<\/span>\n <\/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 <\/div>\n <div class=\"beian-section\">\n <a href=\"https:\/\/beian.miit.gov.cn\/\" target=\"_blank\">\u9c81ICP\u59072026001577\u53f7-1<\/a>\n <span>|<\/span>\n <a href=\"https:\/\/beian.mps.gov.cn\/#\/query\/webSearch?code=37172402000457\" target=\"_blank\" rel=\"noreferrer\">\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\n<button class=\"back-top\" id=\"backTop\" 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\/\/ \u6570\u636e\nconst slides = [\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/GD01.jpg\", alt: \"\u5546\u4e1a\u7a7a\u95f4\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/CLBFM1-scaled.jpg\", alt: \"\u5a31\u4e50\u7a7a\u95f4\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/DEBFM1-scaled.jpg\", alt: \"\u516c\u5171\u5c55\u9648\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/04\/JZYSFM1.jpg\", alt: \"\u6570\u5b57\u5a92\u4f53\" },\n { src: \"https:\/\/ryanren.top\/wp-content\/uploads\/2026\/03\/wxcsc-1-e1773306333433.jpg\", alt: \"\u57ce\u5e02\u66f4\u65b0\" }\n];\n\n\/\/ \u4f5c\u54c1\u6570\u636e \u2014\u2014 \u5df2\u6309\u9700\u6c42\u65b0\u589e\u201c\u5c0f\u5403\u6863\u53e3\u5408\u96c6\u201d\u81f3\u5546\u4e1a\u7a7a\u95f4\nconst projects = [\n { group: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u749e\u4e3d\u5496\u5561\u6cc9\u57ce\u516c\u56ed\u5e97\", desc: \"\u5728\u6cc9\u57ce\u516c\u56ed\u7684\u7eff\u610f\u4e2d,\u4ee5'\u9759\u8c27\u4e2d\u7684\u4e13\u6ce8'\u4e3a\u6982\u5ff5,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u5947\u745e\u5546\u7528\u8f66\", desc: \"\u4ee5\u5de5\u4e1a\u529b\u91cf\u4e3a\u6838\u5fc3,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u8f66\u9c81\u73ed\u6c7d\u8f66\u7f8e\u5bb9\u4e2d\u5fc3\", desc: \"\u6807\u51c6\u5316\u670d\u52a1\u6d41\u7a0b\u4e3a\u9aa8\u67b6,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u5361\u670d\u5361\u6c7d\u8f66\u670d\u52a1\u4e2d\u5fc3\", desc: \"\u56f4\u7ed5'\u6280\u672f\u53ef\u89c6\u5316'\u91cd\u6784\u7a7a\u95f4,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u5fb7\u5c14\u5821\u5c0f\u9152\u9986\", desc: \"\u5c06\u5fb7\u5f0f\u5e02\u96c6\u6c1b\u56f4\u5f15\u5165\u5ba4\u5185,\u901a\u8fc7\u6750\u8d28\u6df7\u642d\u4e0e\u706f\u5149\u5c42\u6b21,\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: \"\u5546\u4e1a\u7a7a\u95f4\", title: \"\u9152\u53f7\u5df4\u58eb\", desc: \"\u590d\u53e4\u5df4\u58eb\u4e3b\u9898\u9152\u9986,\u878d\u5408\u7cbe\u917f\u6587\u5316\u4e0e\u793e\u4ea4\u7a7a\u95f4,\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: \"\u5546\u4e1a\u7a7a\u95f4\", 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,\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 \/\/ \u65b0\u589e\uff1a\u5c0f\u5403\u6863\u53e3\u5408\u96c6\uff08\u7b26\u5408\u5546\u4e1a\u7a7a\u95f4\u9700\u6c42\uff0c\u8df3\u8f6c\u94fe\u63a5\u53ca\u5c01\u9762\u56fe\u6309\u9700\u6c42\u8bbe\u5b9a\uff09\n { group: \"\u5546\u4e1a\u7a7a\u95f4\", 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 { group: \"\u5a31\u4e50\u7a7a\u95f4\", title: \"\u6cf0\u56fd9D\u7403\u5e55\u5f71\u9662\", desc: \"\u5c06\u6cf0\u56fd\u6587\u5316\u5143\u7d20\u8f6c\u8bd1\u4e3a\u89c6\u89c9\u7b26\u53f7,\u878d\u54089D\u4e92\u52a8\u6280\u672f,\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: \"\u5a31\u4e50\u7a7a\u95f4\", title: \"9D\u7403\u5e55\u98de\u884c\u5f71\u9662\", desc: \"\u7ed3\u5408\u7403\u5e55\u4e0e\u52a8\u6001\u5ea7\u6905,\u4ee5'\u51cc\u7a7a\u7ff1\u7fd4'\u4e3a\u53d9\u4e8b\u4e3b\u7ebf,\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: \"\u5a31\u4e50\u7a7a\u95f4\", title: \"\u897f\u65b9\u9f99\u9020\u578b\u7403\u5e55\u5f71\u9662\", desc: \"\u4ee5\u897f\u65b9\u9f99\u4e3aIP\u539f\u578b,\u901a\u8fc7\u5f02\u5f62\u7ed3\u6784\u4e0e\u6570\u5b57\u5a92\u4f53\u878d\u5408,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u829c\u6e56\u9e20\u5179\u591c\u5e02\", desc: \"\u4ee5'\u591c\u7ecf\u6d4e\u6fc0\u6d3b\u5668'\u4e3a\u5b9a\u4f4d,\u901a\u8fc7\u52a8\u7ebf\u91cd\u7ec4\u4e0e\u706f\u5149\u7b56\u7565,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u4f1f\u661f\u83dc\u5e02\u573a\u6539\u9020\", desc: \"\u4ece'\u793e\u533a\u8282\u70b9'\u51fa\u53d1,\u7528\u6a21\u5757\u5316\u8bbe\u8ba1\u4e0e\u89c6\u89c9\u7cfb\u7edf\u5347\u7ea7,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u829c\u6e56\u5b98\u9661\u516c\u4ea4\u7ad9\u4e0e\u5730\u94c1\u7ad9\", desc: \"\u4e00\u4f53\u5316\u5bfc\u89c6\u4e0e\u7a7a\u95f4\u6574\u5408,\u63d0\u5347\u901a\u52e4\u6548\u7387\u7684\u540c\u65f6,\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: \"\u516c\u5171\u5c55\u9648\", title: \"\u5927\u6210\u662d\u548c\u7119\u70e4\u5c55\u4f4d\", desc: \"70m2\u6d41\u52a8\u5bb4\u5e2d\u7a7a\u95f4,\u4ee5'\u9ea6\u9999\u6d41\u8f6c'\u4e3a\u6982\u5ff5,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u6c89\u6d78\u5f0f\u5168\u666f\u7a7a\u95f4\", desc: \"360\u00b0\u5168\u666f\u5f71\u50cf\u4e0e\u865a\u62df\u73b0\u5b9e\u7ed3\u5408,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u521b\u610f\u89c6\u89c9\u5f71\u7247\", desc: \"\u54c1\u724c\u5f62\u8c61\u7247\u3001\u4ea7\u54c1\u89c6\u9891\u3001\u52a8\u753b\u77ed\u7247,\u7528\u5f71\u50cf\u4f20\u9012\u6838\u5fc3\u4ef7\u503c,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u5efa\u6a21\u4f5c\u54c1\u96c6\", desc: \"\u9910\u8f66\u00b7\u821e\u53f0\u00b7IP\u624b\u529e\u00b7\u5c0f\u63a8\u8f66,\u5168\u54c1\u7c7b3D\u5efa\u6a21\u670d\u52a1,\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: \"\u6570\u5b57\u5a92\u4f53\", title: \"\u5168\u90e8\u56fe\u7247\", desc: \"\u5168\u54c1\u7c7b\u5efa\u6a21\u4f5c\u54c1\u56fe\u518c,\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\/\/ \u79fb\u52a8\u7aef\u5bfc\u822a\nconst menuToggle = document.getElementById('menuToggle');\nconst mobileNav = document.getElementById('mobileNav');\nconst mobileOverlay = document.getElementById('mobileOverlay');\nconst mobileClose = document.getElementById('mobileClose');\n\nfunction openNav() {\n mobileNav.classList.add('open');\n mobileOverlay.classList.add('open');\n document.body.style.overflow = 'hidden';\n}\n\nfunction closeNav() {\n mobileNav.classList.remove('open');\n mobileOverlay.classList.remove('open');\n document.body.style.overflow = '';\n}\n\nmenuToggle.onclick = openNav;\nmobileClose.onclick = closeNav;\nmobileOverlay.onclick = closeNav;\n\n\/\/ \u5e73\u6ed1\u6eda\u52a8\ndocument.querySelectorAll('.nav-links a, .mobile-nav a').forEach(anchor => {\n anchor.addEventListener('click', e => {\n const href = anchor.getAttribute('href');\n if (href && href.startsWith('#')) {\n e.preventDefault();\n closeNav();\n const id = href.substring(1);\n const target = document.getElementById(id);\n if (target) {\n const offset = 80;\n const top = target.getBoundingClientRect().top + window.pageYOffset - offset;\n window.scrollTo({ top, behavior: 'smooth' });\n }\n }\n });\n});\n\n\/\/ \u6e32\u67d3\u8f6e\u64ad\nconst heroSlides = document.getElementById('heroSlides');\nconst heroNav = document.getElementById('heroNav');\nlet current = 0, timer = null;\n\nslides.forEach((s, i) => {\n const div = document.createElement('div');\n div.className = 'hero-slide' + (i === 0 ? ' active' : '');\n div.innerHTML = `<img decoding=\"async\" src=\"${s.src}\" alt=\"${s.alt}\" loading=\"${i === 0 ? 'eager' : 'lazy'}\">`;\n heroSlides.appendChild(div);\n\n const btn = document.createElement('button');\n btn.className = 'hero-dot' + (i === 0 ? ' active' : '');\n btn.setAttribute('aria-label', s.alt);\n btn.onclick = () => { goTo(i); resetTimer(); };\n heroNav.appendChild(btn);\n});\n\nfunction goTo(i) {\n const all = heroSlides.querySelectorAll('.hero-slide');\n const dots = heroNav.querySelectorAll('.hero-dot');\n all[current].classList.remove('active');\n dots[current].classList.remove('active');\n current = (i + all.length) % all.length;\n all[current].classList.add('active');\n dots[current].classList.add('active');\n}\n\nfunction next() { goTo(current + 1); }\nfunction prev() { goTo(current - 1); }\nfunction startTimer() { timer = setInterval(next, 5000); }\nfunction resetTimer() { clearInterval(timer); startTimer(); }\n\ndocument.querySelector('.hero-arrow.prev').onclick = () => { prev(); resetTimer(); };\ndocument.querySelector('.hero-arrow.next').onclick = () => { next(); resetTimer(); };\ndocument.querySelector('.hero').onmouseenter = () => clearInterval(timer);\ndocument.querySelector('.hero').onmouseleave = startTimer;\ndocument.onkeydown = e => {\n if (e.key === 'ArrowRight') { next(); resetTimer(); }\n if (e.key === 'ArrowLeft') { prev(); resetTimer(); }\n};\n\nstartTimer();\n\n\/\/ \u6e32\u67d3\u4f5c\u54c1\nconst content = document.getElementById('content');\nconst groups = [...new Set(projects.map(p => p.group))];\n\ngroups.forEach(group => {\n const items = projects.filter(p => p.group === group);\n\n const section = document.createElement('section');\n section.className = 'section';\n section.id = group === '\u5546\u4e1a\u7a7a\u95f4' ? 'commercial' : group === '\u5a31\u4e50\u7a7a\u95f4' ? 'entertainment' : group === '\u516c\u5171\u5c55\u9648' ? 'public' : 'digital';\n\n section.innerHTML = `\n <div class=\"section-header\">\n <h2>${group}<\/h2>\n <p>${group === '\u5546\u4e1a\u7a7a\u95f4' ? '\u52a0\u76df\u5e97\u8bbe\u8ba1 \u00b7 \u54c1\u724c\u5347\u7ea7 \u00b7 \u6863\u53e3\u96c6\u5408' : group === '\u5a31\u4e50\u7a7a\u95f4' ? '\u7403\u5e55\u5f71\u9662 \u00b7 \u6c89\u6d78\u4f53\u9a8c' : group === '\u516c\u5171\u5c55\u9648' ? '\u653f\u4f01\u9879\u76ee \u00b7 \u57ce\u5e02\u66f4\u65b0' : '\u5efa\u6a21\u6e32\u67d3 \u00b7 \u89c6\u89c9\u5f71\u7247'}<\/p>\n <\/div>\n <div class=\"gallery-grid\">\n ${items.map(p => `\n <div class=\"card\" onclick=\"window.open('${p.link}', '_blank')\">\n <div class=\"card-image\">\n <img decoding=\"async\" src=\"${p.img}\" alt=\"${p.title}\" loading=\"lazy\">\n <\/div>\n <div class=\"card-content\">\n <div class=\"card-category\">${p.group}<\/div>\n <h3 class=\"card-title\">${p.title}<\/h3>\n <p class=\"card-desc\">${p.desc}<\/p>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n `;\n\n content.appendChild(section);\n});\n\n\/\/ \u6eda\u52a8\u52a8\u753b\nconst observer = new IntersectionObserver(entries => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n setTimeout(() => entry.target.classList.add('visible'), i * 80);\n observer.unobserve(entry.target);\n }\n });\n}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n\ndocument.querySelectorAll('.card').forEach(el => observer.observe(el));\n\n\/\/ \u8fd4\u56de\u9876\u90e8\nconst backTop = document.getElementById('backTop');\nwindow.onscroll = () => backTop.classList.toggle('visible', scrollY > 400);\nbackTop.onclick = () => scrollTo({ top: 0, behavior: 'smooth' });\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u4efb\u5fd7\u8fdc|\u7a7a\u95f4\u8bbe\u8ba1\u4f5c\u54c1\u96c6 RyanRen \u5546\u4e1a\u7a7a\u95f4 \u5a31\u4e50\u7a7a\u95f4 \u516c\u5171\u5c55\u9648 \u6570\u5b57\u5a92\u4f53 \u9996\u9875 \u5546\u4e1a\u7a7a\u95f4 \u5a31\u4e50\u7a7a\u95f4 \u516c\u5171 […]<\/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":96,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":1252,"href":"https:\/\/ryanren.top\/index.php\/wp-json\/wp\/v2\/pages\/494\/revisions\/1252"}],"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}]}}