{"id":178,"date":"2026-03-17T10:13:01","date_gmt":"2026-03-17T02:13:01","guid":{"rendered":"http:\/\/10.140.25.199:8998\/?page_id=178"},"modified":"2026-03-24T09:24:13","modified_gmt":"2026-03-24T01:24:13","slug":"content","status":"publish","type":"page","link":"https:\/\/yystudio.com.cn\/index.php\/content\/","title":{"rendered":"\u8054\u7cfb\u6211\u4eec"},"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\u5185\u5bb9\uff0c\u53ea\u9700\u8981\u6539\u8fd9\u91cc\uff01 ===\n   =================================================================== *\/\nconst CONTACT_DATA = {\n    \/\/ 1. \u9875\u9762\u5934\u90e8\u4fe1\u606f\n    header: {\n        title: \"\u4e0e\u6211\u4eec\u5efa\u8054\",\n        subtitle: \"\u65e0\u8bba\u662f\u6821\u56ed\u5b98\u65b9\u5ba3\u4f20\u7247\u3001\u91cd\u5927\u6d3b\u52a8\u7eaa\u5b9e\uff0c\u8fd8\u662f\u5fae\u7535\u5f71\u521b\u4f5c\uff0c\u5e94\u5141\u5de5\u4f5c\u5ba4\u968f\u65f6\u51c6\u5907\u4e3a\u60a8\u6253\u9020\u4f18\u8d28\u7684\u5f71\u50cf\u4f5c\u54c1\u3002\"\n    },\n\n    \/\/ 2. \u8054\u7cfb\u5361\u7247\u914d\u7f6e\n    cards: [\n        {\n            icon: \"\ud83d\udcde\",\n            title: \"\u4e1a\u52a1\u62cd\u6444\u5bf9\u63a5\",\n            desc: \"\u53d1\u9001\u60a8\u7684\u62cd\u6444\u9700\u6c42\u6216\u5408\u4f5c\u610f\u5411\uff0c\u5de5\u4f5c\u5ba4\u8d1f\u8d23\u4eba\u5c06\u4e3a\u60a8\u7edf\u7b79\u89c4\u5212\u3002\",\n            linkText: \"\u5e94\u5141 (\u8d1f\u8d23\u4eba) : 13634262611\",\n            linkHref: \"tel:13634262611\" \/\/ tel: \u5f00\u5934\u8868\u793a\u70b9\u51fb\u76f4\u63a5\u62e8\u6253\u7535\u8bdd\n        },\n        {\n            icon: \"\ud83d\udccd\",\n            title: \"\u5de5\u4f5c\u5ba4\u5730\u5740\",\n            desc: \"\u6b22\u8fce\u5168\u6821\u5e08\u751f\u524d\u6765\u63a2\u8ba8\u521b\u610f\u4e0e\u5408\u4f5c\uff0c\u6211\u4eec\u5728\u5de5\u4f5c\u5ba4\u7b49\u5019\u60a8\u7684\u5230\u6765\u3002\",\n            linkText: \"\u6e29\u804c\u4e13 \u00b7 \u4e00\u804cMore 203\", \/\/ <--- \u5730\u5740\u5df2\u8be6\u7ec6\u5230 \u4e00\u804cMore 203\n            linkHref: \"javascript:void(0);\"\n        },\n        {\n            icon: \"\ud83e\udd1d\",\n            title: \"\u62db\u65b0\u4e0e\u54a8\u8be2\",\n            desc: \"\u4f01\u5212\u3001\u5f71\u89c6\u3001\u540e\u671f\u3001\u540e\u52e4\u56db\u5927\u90e8\u95e8\u6301\u7eed\u5438\u7eb3\u7cbe\u82f1\uff0c\u7528\u955c\u5934\u8bb0\u5f55\u9752\u6625\uff01\",\n            linkText: \"\u91d1\u8fe6\u6d69 (\u526f\u8d1f\u8d23\u4eba) : 17857702107\",\n            linkHref: \"tel:17857702107\"\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: #050505 !important; \n    overflow-x: hidden !important;\n    width: 100vw !important;\n    min-height: 100vh !important; \n    visibility: hidden !important; \/* \u5168\u5c40\u9690\u85cf\u9632\u95ea\u70c1 *\/\n}\n\n@keyframes masterFadeIn {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n}\n\n#shiji-contact-root, #shiji-contact-root *,\n#wpadminbar, #wpadminbar * {\n    visibility: visible !important;\n}\n\n\/* \u6838\u5fc3\u5bb9\u5668\uff1a\u8131\u79bb\u4e00\u5207\u4e3b\u9898\u675f\u7f1a\uff0c\u52a0\u5165\u6e10\u663e\u5f15\u64ce *\/\n#shiji-contact-root {\n    opacity: 0;\n    animation: masterFadeIn 1s ease-out 0.1s forwards;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    line-height: 1.6;\n    color: #ffffff;\n    background-color: #050505;\n    background-image: \n        radial-gradient(circle at 100% 0%, rgba(17, 123, 255, 0.1) 0%, transparent 40%),\n        radial-gradient(circle at 0% 100%, rgba(0, 225, 255, 0.08) 0%, transparent 40%);\n    width: 100vw !important;\n    min-height: 100vh;\n    position: relative;\n    z-index: 999999; \n    overflow-x: hidden;\n    padding: 120px 5vw 120px 5vw;\n    display: flex;\n    align-items: center; \/* \u8ba9\u6574\u4f53\u5185\u5bb9\u5782\u76f4\u5c45\u4e2d *\/\n}\n\n#shiji-contact-root * {\n    box-sizing: border-box;\n}\n\n\/* \u5185\u90e8\u5185\u5bb9\u9650\u5bbd\u5c45\u4e2d *\/\n.contact-content-wrapper {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n}\n\n#shiji-contact-root h1, \n#shiji-contact-root h2, \n#shiji-contact-root h3,\n#shiji-contact-root h4 {\n    margin-top: 0;\n    font-weight: 700;\n}\n\n\/* === \u52a8\u753b\u5f15\u64ce === *\/\n.io-anim {\n    opacity: 0;\n    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n    will-change: opacity, transform;\n}\n.io-fade-up { transform: translateY(40px); }\n.io-fade-right { transform: translateX(-40px); }\n.io-fade-left { transform: translateX(40px); }\n.io-anim.is-visible {\n    opacity: 1 !important;\n    transform: translate(0, 0) !important;\n}\n\n\/* =========================================\n   === \u60ac\u6d6e\u8fd4\u56de\u6309\u94ae ===\n========================================= *\/\n.shiji-back-btn {\n    position: fixed;\n    top: 30px;\n    left: 30px;\n    z-index: 9999999;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 30px;\n    background: rgba(255, 255, 255, 0.05);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    color: #fff;\n    text-decoration: none;\n    font-size: 0.95rem;\n    letter-spacing: 1px;\n    transition: all 0.3s ease;\n}\n\n.shiji-back-btn:hover {\n    background: rgba(255, 255, 255, 0.15);\n    transform: translateX(-5px);\n    color: #00e1ff;\n    border-color: rgba(0, 225, 255, 0.3);\n}\n\n\/* =========================================\n   === \u9875\u9762\u5934\u90e8 ===\n========================================= *\/\n.contact-header { text-align: center; margin-bottom: 80px; }\n.contact-title { font-size: 46px; color: #ffffff; position: relative; display: inline-block; margin-bottom: 24px; letter-spacing: 2px;}\n.contact-title::after { \n    content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); \n    width: 80px; height: 3px; background: linear-gradient(90deg, #00e1ff 0%, #117bff 100%); \n    border-radius: 2px; box-shadow: 0 0 15px rgba(0, 225, 255, 0.5);\n}\n.contact-subtitle { font-size: 18px; color: #a0a0a0; max-width: 700px; margin: 0 auto; line-height: 1.8; }\n\n\/* =========================================\n   === \u6838\u5fc3\u5e03\u5c40\uff1a\u4e09\u5217\u8054\u7edc\u5361\u7247 ===\n========================================= *\/\n.contact-cards-container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 40px;\n}\n\n.info-card {\n    background: rgba(255, 255, 255, 0.02); \n    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);\n    border: 1px solid rgba(255, 255, 255, 0.08); \n    border-radius: 16px;\n    padding: 50px 30px;\n    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.info-card:hover {\n    background: rgba(255, 255, 255, 0.05);\n    border-color: rgba(0, 225, 255, 0.3);\n    box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(0, 225, 255, 0.05);\n    transform: translateY(-10px);\n}\n\n.info-icon {\n    width: 64px; height: 64px;\n    background: rgba(0, 225, 255, 0.1);\n    border-radius: 50%;\n    display: flex; justify-content: center; align-items: center;\n    color: #00e1ff; font-size: 28px;\n    margin-bottom: 24px;\n    box-shadow: 0 0 20px rgba(0, 225, 255, 0.2);\n    transition: all 0.3s ease;\n}\n\n.info-card:hover .info-icon {\n    background: #00e1ff;\n    color: #000;\n    box-shadow: 0 0 30px rgba(0, 225, 255, 0.6);\n    transform: scale(1.1);\n}\n\n.info-content h4 { font-size: 22px; margin-bottom: 15px; color: #fff; letter-spacing: 1px;}\n.info-content p { font-size: 15px; color: #a0a0a0; margin: 0 0 15px 0; line-height: 1.7;}\n.info-content a { \n    display: inline-block;\n    color: #00e1ff; \n    text-decoration: none; \n    font-size: 16px;\n    font-weight: 600;\n    transition: color 0.3s; \n}\n.info-content a:hover { color: #ffffff; }\n\n\/* --- \u54cd\u5e94\u5f0f --- *\/\n@media (max-width: 992px) {\n    .contact-cards-container { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }\n}\n@media (max-width: 768px) {\n    #shiji-contact-root { padding-top: 80px; padding-bottom: 80px; }\n    .contact-title { font-size: 36px; }\n    .contact-subtitle { font-size: 16px; }\n    .shiji-back-btn { top: 15px; left: 15px; font-size: 0.85rem; padding: 8px 15px; }\n}\n<\/style>\n\n<div id=\"shiji-contact-root\">\n\n    <a href=\"javascript:history.back()\" class=\"shiji-back-btn io-anim io-fade-right\" style=\"transition-delay: 100ms;\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n            <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n        <\/svg>\n        \u8fd4\u56de\u4e0a\u4e00\u9875\n    <\/a>\n\n    <div class=\"contact-content-wrapper\">\n\n        <div class=\"contact-header\">\n            <h1 class=\"contact-title io-anim io-fade-up\" id=\"render-title\"><\/h1>\n            <p class=\"contact-subtitle io-anim io-fade-up\" id=\"render-subtitle\" style=\"transition-delay: 100ms;\"><\/p>\n        <\/div>\n\n        <div class=\"contact-cards-container\" id=\"render-cards\">\n            <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    \/\/ 1. \u540c\u6b65\u8282\u70b9\u593a\u6743\uff1a\u575a\u51b3\u79fb\u51fa WordPress \u539f\u751f\u5bb9\u5668\n    const container = document.getElementById('shiji-contact-root');\n    if (container && container.parentElement !== document.body) {\n        document.body.prepend(container);\n    }\n\n    \/\/ 2. \u5f3a\u529b\u6e05\u573a\uff1a\u4e00\u5200\u5207\u5e72\u6389\u6240\u6709\u591a\u4f59\u5916\u58f3\n    const killStyle = document.createElement('style');\n    killStyle.innerHTML = `\n        body > *:not(#shiji-contact-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    \/\/ 3. \u6e32\u67d3\u5f15\u64ce\uff1a\u8bfb\u53d6\u9876\u90e8 CONTACT_DATA \u751f\u6210\u7f51\u9875\n    function renderApp() {\n        document.getElementById('render-title').innerText = CONTACT_DATA.header.title;\n        document.getElementById('render-subtitle').innerText = CONTACT_DATA.header.subtitle;\n\n        const cardsHTML = CONTACT_DATA.cards.map((card, index) => {\n            \/\/ \u5ef6\u8fdf\u8ba1\u7b97\uff1a\u6bcf\u5f20\u5361\u7247\u6bd4\u4e0a\u4e00\u5f20\u665a 100ms \u6d6e\u73b0\n            const delay = 200 + (index * 100); \n            return `\n            <div class=\"info-card io-anim io-fade-up\" style=\"transition-delay: ${delay}ms;\">\n                <div class=\"info-icon\">${card.icon}<\/div>\n                <div class=\"info-content\">\n                    <h4>${card.title}<\/h4>\n                    <p>${card.desc}<\/p>\n                    <a href=\"${card.linkHref}\">${card.linkText}<\/a>\n                <\/div>\n            <\/div>`;\n        }).join('');\n        \n        document.getElementById('render-cards').innerHTML = cardsHTML;\n    }\n\n    \/\/ 4. \u7ed1\u5b9a\u52a8\u753b\u76d1\u542c\uff0c\u786e\u4fdd\u6d41\u7545\u5ea6\n    function initContactScripts() {\n        renderApp(); \/\/ \u5148\u6e32\u67d3 HTML\n\n        const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 };\n        const observer = new IntersectionObserver(function(entries, obs) {\n            entries.forEach(function(entry) {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('is-visible');\n                    obs.unobserve(entry.target); \n                }\n            });\n        }, observerOptions);\n\n        const animElements = document.querySelectorAll('.io-anim');\n        animElements.forEach(function(el) { observer.observe(el); });\n    }\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initContactScripts);\n    } else {\n        initContactScripts();\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-178","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/178","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=178"}],"version-history":[{"count":8,"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/178\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/pages\/178\/revisions\/454"}],"wp:attachment":[{"href":"https:\/\/yystudio.com.cn\/index.php\/wp-json\/wp\/v2\/media?parent=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}