{"id":398,"date":"2026-03-23T14:01:31","date_gmt":"2026-03-23T06:01:31","guid":{"rendered":"http:\/\/192.168.1.199:8999\/?page_id=398"},"modified":"2026-03-24T09:32:53","modified_gmt":"2026-03-24T01:32:53","slug":"work","status":"publish","type":"page","link":"https:\/\/yystudio.com.cn\/index.php\/work\/","title":{"rendered":"\u4e1a\u52a1\u8303\u56f4"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/images.unsplash.com\" crossorigin>\n\n<script>\n\/* ===================================================================\n   === \ud83d\udd27 \u6838\u5fc3\u6570\u636e\u914d\u7f6e\u533a\uff1a\u60f3\u4fee\u6539\u6216\u589e\u52a0\u4e1a\u52a1\u5185\u5bb9\uff0c\u53ea\u9700\u6539\u8fd9\u91cc\uff01 ===\n   =================================================================== *\/\nconst SCOPE_DATA = {\n    \/\/ 1. \u9875\u9762\u5934\u90e8\u4fe1\u606f\n    header: {\n        title: \"\u4e1a\u52a1\u8303\u56f4\",\n        subtitle: \"\u5e94\u5141\u5de5\u4f5c\u5ba4\u805a\u7126\u516b\u5927\u6838\u5fc3\u4e1a\u52a1\u9886\u57df\u3002\u4ee5\u6280\u672f\u8d4b\u80fd\u521b\u610f\uff0c\u4e3a\u6821\u56ed\u4e0e\u54c1\u724c\u63d0\u4f9b\u5168\u94fe\u8def\u7684\u5f71\u50cf\u4e0e\u6570\u5b57\u751f\u6001\u89e3\u51b3\u65b9\u6848\u3002\"\n    },\n\n    \/\/ 2. \u6838\u5fc3\u4e1a\u52a1\u5361\u7247\u5217\u8868 (\u51718\u4e2a)\n    items: [\n        {\n            title: \"\u6d3b\u52a8\u62cd\u6444\",\n            desc: \"\u7cbe\u51c6\u6355\u6349\u4f1a\u8bae\u3001\u5178\u793c\u3001\u8d5b\u4e8b\u7b49\u6821\u56ed\u4e0e\u793e\u4f1a\u7684\u6bcf\u4e00\u4e2a\u9ad8\u5149\u65f6\u523b\uff0c\u5b9a\u683c\u7f8e\u597d\u77ac\u95f4\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1516035069371-29a1b244cc32?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/event\/\"\n        },\n        {\n            title: \"\u5f71\u89c6\u5236\u4f5c\",\n            desc: \"\u4ece\u5b98\u65b9\u5ba3\u4f20\u7247\u5230\u6821\u56ed\u5fae\u7535\u5f71\uff0c\u7528\u4e13\u4e1a\u955c\u5934\u8bed\u8a00\u8bb2\u8ff0\u52a8\u4eba\u6545\u4e8b\uff0c\u6253\u9020\u6781\u81f4\u89c6\u542c\u4f53\u9a8c\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1536440136628-849c177e76a1?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/vision\/\"\n        },\n        {\n            title: \"\u821e\u53f0\u76f4\u64ad\",\n            desc: \"\u591a\u673a\u4f4d\u9ad8\u6e05\u8f6c\u64ad\uff0c\u4e13\u4e1a\u5bfc\u64ad\u63a8\u6d41\u4e0e\u6beb\u79d2\u7ea7\u4f20\u8f93\uff0c\u8ba9\u7cbe\u5f69\u6f14\u51fa\u6253\u7834\u7a7a\u95f4\u9650\u5236\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1540039155732-6114f4181f70?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/live\/\"\n        },\n        {\n            title: \"\u7a0b\u5e8f\u5f00\u53d1\",\n            desc: \"\u63d0\u4f9b\u5b9a\u5236\u5316\u8f6f\u4ef6\u4e0eWeb\u7aef\u5e94\u7528\u5f00\u53d1\uff0c\u4ee5\u524d\u6cbf\u4ee3\u7801\u67b6\u6784\u8d4b\u80fd\u591a\u6837\u5316\u4e1a\u52a1\u9700\u6c42\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/programmer\/\"\n        },\n        {\n            title: \"\u827a\u672f\u8bbe\u8ba1\",\n            desc: \"\u878d\u5408\u521b\u65b0\u601d\u7ef4\u4e0e\u89c6\u89c9\u7f8e\u5b66\uff0c\u6db5\u76d6\u5e73\u9762\u6d77\u62a5\u3001UI\/UX\u3001\u4ee5\u53ca\u5168\u6848\u54c1\u724c\u5305\u88c5\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1561070791-2526d30994b5?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/design\/\"\n        },\n        {\n            title: \"3D\u5efa\u6a21\",\n            desc: \"\u4ece\u6982\u5ff5\u539f\u753b\u5230\u4e09\u7ef4\u6210\u578b\uff0c\u6784\u5efa\u9ad8\u7cbe\u5ea6\u7684\u865a\u62df\u573a\u666f\u3001\u4eba\u7269\u5efa\u6a21\u4e0e\u6570\u5b57\u8d44\u4ea7\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1617791160536-598cf32026fb?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/3d\/\"\n        },\n        {\n            title: \"\u540e\u671f\u5305\u88c5\",\n            desc: \"\u8fbe\u82ac\u5947\u4e13\u4e1a\u8c03\u8272\u3001\u52a8\u6548\u5305\u88c5\u4e0e\u97f3\u9891\u5904\u7406\uff0c\u8d4b\u4e88\u4f5c\u54c1\u5b8c\u7f8e\u7684\u6700\u7ec8\u5448\u73b0\u8d28\u611f\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/product\/\"\n        },\n        {\n            title: \"AI\u5927\u6570\u636e\",\n            desc: \"\u63a2\u7d22\u4eba\u5de5\u667a\u80fd\u751f\u6210\u3001\u6570\u636e\u91c7\u96c6\u5206\u6790\u53ca\u5927\u6a21\u578b\u672c\u5730\u90e8\u7f72\uff0c\u4ee5\u667a\u80fd\u9a71\u52a8\u521b\u65b0\u53d1\u5c55\u3002\",\n            img: \"https:\/\/images.unsplash.com\/photo-1677442136019-21780ecad995?q=80&w=800&auto=format&fit=crop\",\n            link: \"\/index.php\/work\/ai\/\"\n        }\n    ]\n};\n<\/script>\n\n<style>\n\/* =========================================\n   === \u7ec8\u6781\u66b4\u529b\u6e05\u96f6 & \u9ed1\u573a\u6e10\u663e\u4e13\u5c5e\u7248 ===\n========================================= *\/\nhtml, body {\n    margin: 0 !important;\n    padding: 0 !important;\n    background-color: #000000 !important; \n    overflow-x: hidden !important;\n    width: 100vw !important;\n    min-height: 100vh !important; \n    visibility: hidden !important; \n}\n\n@keyframes masterFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }\n\n#cine-root, #cine-root *, #wpadminbar, #wpadminbar * { visibility: visible !important; }\n\n#cine-root {\n    opacity: 0;\n    animation: masterFadeIn 1s ease-out 0.1s forwards;\n    position: relative; \n    z-index: 999999; \n    background-color: #050505; \n    background-image: radial-gradient(circle at 50% 0%, rgba(255, 154, 158, 0.05) 0%, transparent 50%);\n    width: 100vw; \n    min-height: 100vh; \n    overflow-x: hidden; \n    color: #fff;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n}\n\n#cine-root * { box-sizing: border-box; }\n\n\/* =========================================\n   === \u9876\u90e8\u8fd4\u56de\u6309\u94ae\u4e0e\u9875\u9762\u5934\u90e8 ===\n========================================= *\/\n.top-back-btn { \n    position: absolute; top: 30px; left: 40px; display: flex; align-items: center; gap: 6px; \n    color: #888; text-decoration: none; font-size: 15px; font-weight: 500; transition: all 0.3s ease; \n    padding: 8px 16px; border-radius: 20px; background: rgba(255,255,255,0.05); z-index: 10; \n}\n.top-back-btn:hover { color: #ff9a9e; background: rgba(255,154,158,0.15); transform: translateX(-3px); }\n\n.scope-container { \n    width: 100%; max-width: 1400px; margin: 0 auto; padding: 100px 20px 100px 20px; \n}\n\n.scope-header { text-align: center; margin-bottom: 60px; }\n.scope-header h1 { font-size: 46px; font-weight: 800; color: #ffffff; margin: 0 0 20px 0; letter-spacing: 2px; }\n.scope-header .title-line { width: 80px; height: 4px; background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%); border-radius: 2px; margin: 0 auto 24px auto; box-shadow: 0 0 15px rgba(255, 154, 158, 0.3); }\n.scope-header p { font-size: 16px; color: #a0a0a0; max-width: 700px; margin: 0 auto; line-height: 1.8; letter-spacing: 1px; }\n\n\/* =========================================\n   === \u6838\u5fc3\u52a8\u753b\u5f15\u64ce ===\n========================================= *\/\n@keyframes nativeFadeUp {\n    from { opacity: 0; transform: translateY(40px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n\/* =========================================\n   === \u4e1a\u52a1\u5361\u7247\u77e9\u9635 (\u5168\u666f\u6bdb\u73bb\u7483\u62df\u6001) ===\n========================================= *\/\n.scope-grid { \n    display: grid; \n    grid-template-columns: repeat(4, 1fr); \n    gap: 25px; \n}\n\n.scope-card { \n    position: relative; \n    border-radius: 16px; \n    overflow: hidden; \n    background: #111; \n    text-decoration: none; \n    display: block; \n    height: 400px; \/* \u56fa\u5b9a\u9ad8\u5ea6\uff0c\u786e\u4fdd\u7f51\u683c\u6574\u9f50 *\/\n    transform: translateZ(0); \/* \u5f00\u542fGPU\u52a0\u901f *\/\n    box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n    animation: nativeFadeUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) backwards; \n}\n\n.scope-bg {\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background-size: cover;\n    background-position: center;\n    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n    filter: brightness(0.6) grayscale(20%);\n    z-index: 1;\n}\n\n.scope-card:hover .scope-bg {\n    transform: scale(1.1);\n    filter: brightness(0.9) grayscale(0%);\n}\n\n\/* \u6e10\u53d8\u906e\u7f69 *\/\n.scope-overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.4) 50%, transparent 100%);\n    z-index: 2;\n    transition: opacity 0.5s ease;\n}\n\n\/* \u6bdb\u73bb\u7483\u5185\u5bb9\u9762\u677f *\/\n.scope-content {\n    position: absolute;\n    bottom: -60px; \/* \u9ed8\u8ba4\u5411\u4e0b\u9690\u85cf\u4e00\u70b9\uff0c\u60ac\u6d6e\u65f6\u5347\u8d77 *\/\n    left: 0;\n    width: 100%;\n    padding: 30px 25px;\n    z-index: 3;\n    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    height: 100%;\n}\n\n.scope-card:hover .scope-content {\n    bottom: 0;\n    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n}\n\n.scope-content h3 {\n    font-size: 24px;\n    font-weight: 800;\n    color: #ffffff;\n    margin: 0 0 10px 0;\n    transition: transform 0.4s ease;\n}\n\n.scope-card:hover .scope-content h3 {\n    transform: translateY(-5px);\n    color: #ff9a9e;\n}\n\n.scope-content p {\n    font-size: 14px;\n    color: #b0b0b0;\n    line-height: 1.6;\n    margin: 0;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: all 0.4s ease;\n    transition-delay: 0.1s;\n    display: -webkit-box; \n    -webkit-line-clamp: 3; \n    -webkit-box-orient: vertical; \n    overflow: hidden;\n}\n\n.scope-card:hover .scope-content p {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* \u4e86\u89e3\u66f4\u591a \u6309\u94ae\u6761 *\/\n.scope-action {\n    margin-top: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #ffffff;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: all 0.4s ease;\n    transition-delay: 0.2s;\n}\n\n.scope-action svg {\n    width: 16px; height: 16px;\n    transition: transform 0.3s ease;\n}\n\n.scope-card:hover .scope-action {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.scope-card:hover .scope-action svg {\n    transform: translateX(5px);\n    color: #ff9a9e;\n}\n\n\/* =========================================\n   === \u54cd\u5e94\u5f0f\u9002\u914d ===\n========================================= *\/\n@media (max-width: 1200px) {\n    .scope-grid { grid-template-columns: repeat(3, 1fr); }\n}\n@media (max-width: 992px) {\n    .scope-grid { grid-template-columns: repeat(2, 1fr); }\n    .scope-card { height: 350px; }\n}\n@media (max-width: 768px) {\n    .top-back-btn { top: 15px; left: 15px; padding: 6px 12px; font-size: 13px; }\n    .scope-container { padding: 80px 15px 40px 15px; }\n    .scope-header h1 { font-size: 32px; }\n    .scope-header p { font-size: 14px; }\n    .scope-grid { grid-template-columns: 1fr; gap: 20px; }\n    .scope-card { height: 280px; }\n    \n    \/* \u624b\u673a\u7aef\u7531\u4e8e\u6ca1\u6709 hover\uff0c\u9ed8\u8ba4\u5c55\u793a\u6587\u5b57 *\/\n    .scope-content { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); }\n    .scope-content p, .scope-action { opacity: 1; transform: translateY(0); transition-delay: 0s;}\n    .scope-content h3 { color: #ff9a9e; }\n}\n<\/style>\n\n\n<div id=\"cine-root\">\n    \n    <a href=\"javascript:history.back()\" class=\"top-back-btn\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>\n        \u8fd4\u56de\u4e0a\u4e00\u9875\n    <\/a>\n\n    <div class=\"scope-container\">\n        \n        <div class=\"scope-header\">\n            <h1 id=\"render-title\"><\/h1>\n            <div class=\"title-line\"><\/div>\n            <p id=\"render-subtitle\"><\/p>\n        <\/div>\n\n        <div class=\"scope-grid\" id=\"render-grid\"><\/div>\n\n    <\/div>\n<\/div>\n\n\n<script>\n(function() {\n    \/\/ 1. \u8d8a\u72f1\u673a\u5236\uff1a\u5c4f\u853d WordPress \u4e3b\u9898\u5916\u58f3\n    const container = document.getElementById('cine-root');\n    if (container && container.parentElement !== document.body) {\n        document.body.prepend(container);\n    }\n\n    const killStyle = document.createElement('style');\n    killStyle.innerHTML = `\n        body > *:not(#cine-root):not(#wpadminbar):not(script):not(style):not(link):not(noscript) {\n            display: none !important;\n            opacity: 0 !important;\n            height: 0 !important;\n            overflow: hidden !important;\n        }\n    `;\n    document.head.appendChild(killStyle);\n\n    \/\/ 2. \u6e32\u67d3\u5f15\u64ce\uff1a\u8bfb\u53d6\u9876\u90e8 SCOPE_DATA \u751f\u6210\u7f51\u9875\n    function renderApp() {\n        document.getElementById('render-title').innerHTML = SCOPE_DATA.header.title;\n        document.getElementById('render-subtitle').innerHTML = SCOPE_DATA.header.subtitle;\n\n        \/\/ \u6e32\u67d3 8 \u5927\u4e1a\u52a1\u5361\u7247\n        const gridHTML = SCOPE_DATA.items.map((item, index) => `\n            <a href=\"${item.link}\" class=\"scope-card\" style=\"animation-delay: ${index * 0.1}s;\">\n                <div class=\"scope-bg\" style=\"background-image: url('${item.img}');\"><\/div>\n                <div class=\"scope-overlay\"><\/div>\n                <div class=\"scope-content\">\n                    <h3>${item.title}<\/h3>\n                    <p>${item.desc}<\/p>\n                    <div class=\"scope-action\">\n                        \u63a2\u7d22\u4e1a\u52a1 \n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line>\n                            <polyline points=\"12 5 19 12 12 19\"><\/polyline>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n            <\/a>\n        `).join('');\n        \n        document.getElementById('render-grid').innerHTML = gridHTML;\n    }\n\n    \/\/ 3. \u542f\u52a8\u5668\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', renderApp);\n    } else {\n        renderApp();\n    }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u8fd4\u56de\u4e0a\u4e00\u9875<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-398","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/comments?post=398"}],"version-history":[{"count":3,"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/398\/revisions"}],"predecessor-version":[{"id":458,"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/398\/revisions\/458"}],"wp:attachment":[{"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/media?parent=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}