{"id":124,"date":"2026-03-16T14:21:12","date_gmt":"2026-03-16T06:21:12","guid":{"rendered":"http:\/\/10.140.25.199:8998\/?page_id=124"},"modified":"2026-03-19T15:09:13","modified_gmt":"2026-03-19T07:09:13","slug":"vision","status":"publish","type":"page","link":"https:\/\/shijichuanmei.com\/index.php\/scope\/vision\/","title":{"rendered":"\u5f71\u89c6\u5236\u4f5c"},"content":{"rendered":"\n<style>\n\/* =========================================\n   === \u56fe\u7247\u914d\u7f6e\u533a & \u6838\u5fc3\u53d8\u91cf ===\n========================================= *\/\n:root {\n    --bg-hero: url('https:\/\/images.unsplash.com\/photo-1485846234645-a62644f84728?q=80&w=2059&auto=format&fit=crop');\n    \/* \u4fee\u590d 404: \u66ff\u6362\u4e3a\u53e4\u88c5\/\u4f20\u7edf\u5efa\u7b51\u98ce\u683c\u7684\u7a33\u5b9a\u914d\u56fe *\/\n    --bg-gallery-1: url('https:\/\/images.unsplash.com\/photo-1599059021750-82716ae2b661?q=80&w=800&auto=format&fit=crop');\n    --bg-gallery-2: url('https:\/\/images.unsplash.com\/photo-1626814026160-2237a95fc5a0?q=80&w=800&auto=format&fit=crop');\n    --bg-gallery-3: url('https:\/\/images.unsplash.com\/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop');\n    --bg-gallery-4: url('https:\/\/images.unsplash.com\/photo-1518134346374-184f9d21cea2?q=80&w=800&auto=format&fit=crop');\n\n    --primary-color: #ff3366;\n    --primary-gradient: linear-gradient(135deg, #ff3366 0%, #ff758c 100%);\n    --bg-dark: #0a0a0a;\n    --bg-card: #141414;\n    --text-main: #ffffff;\n    --text-muted: #a0a0a0;\n    --bezier-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n.hero-bg-img { background-image: var(--bg-hero); }\n.gallery-img-1 { background-image: var(--bg-gallery-1); }\n.gallery-img-2 { background-image: var(--bg-gallery-2); }\n.gallery-img-3 { background-image: var(--bg-gallery-3); }\n.gallery-img-4 { background-image: var(--bg-gallery-4); }\n\n\/* =========================================\n   === \u7ec8\u6781\u66b4\u529b\u6e05\u96f6 & \u9ed1\u573a\u6e10\u663e ===\n========================================= *\/\nhtml, body { margin: 0 !important; padding: 0 !important; background-color: #000000 !important; overflow-x: hidden !important; width: 100vw !important; min-height: 100vh !important; visibility: hidden !important; }\n@keyframes masterFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }\n#cine-root, #cine-root *, #wpadminbar, #wpadminbar * { visibility: visible !important; }\n#cine-root { opacity: 0; animation: masterFadeIn 1s ease-out 0.1s forwards; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; line-height: 1.6; color: var(--text-main); background-color: var(--bg-dark); -webkit-font-smoothing: antialiased; width: 100vw !important; min-height: 100vh; position: relative; z-index: 999999; overflow-x: hidden; }\n#cine-root * { box-sizing: border-box; }\n\n\/* \u60ac\u6d6e\u6309\u94ae *\/\n.floating-back-btn { position: fixed; top: 30px; left: 30px; z-index: 9999999; display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 30px; background: rgba(10, 10, 10, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; font-size: 0.95rem; letter-spacing: 1px; transition: all 0.3s ease; }\n.floating-back-btn:hover { background: rgba(255, 51, 102, 0.2); border-color: rgba(255, 51, 102, 0.5); transform: translateX(-5px); }\n\n\/* \u6838\u5fc3\u52a8\u753b *\/\n.cine-anim { opacity: 0; will-change: transform, opacity, filter; transition: all 1s var(--bezier-smooth); filter: blur(5px); }\n.cine-fade-up { transform: translateY(50px); }\n.cine-fade-in { transform: scale(0.95); }\n.cine-anim.is-visible { opacity: 1 !important; transform: translate(0, 0) scale(1) !important; filter: blur(0) !important; }\n\n\/* Hero \u9996\u5c4f *\/\n.hero-section { position: relative; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background-size: cover; background-position: center; z-index: 1; transform: translateY(var(--parallax-y, 0)); will-change: transform; }\n.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.95) 100%); z-index: 2; }\n.hero-content { position: relative; z-index: 3; text-align: center; max-width: 800px; padding: 0 20px; }\n.tagline { display: inline-block; padding: 6px 16px; border-radius: 30px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; letter-spacing: 2px; margin-bottom: 20px; text-transform: uppercase; }\n.hero-title { font-size: 5rem; font-weight: 800; line-height: 1.1; margin: 0 0 20px 0; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n.hero-desc { font-size: 1.2rem; color: #d0d0d0; margin-bottom: 40px; }\n.scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; opacity: 0.6; animation: bounce 2s infinite; }\n.scroll-indicator .mouse { width: 24px; height: 36px; border: 2px solid #fff; border-radius: 12px; position: relative; }\n.scroll-indicator .wheel { width: 4px; height: 8px; background: #fff; border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scrollWheel 2s infinite; }\n@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } }\n@keyframes scrollWheel { 0% { top: 6px; opacity: 1; } 100% { top: 18px; opacity: 0; } }\n\n\/* \u5e03\u5c40 & \u5361\u7247 *\/\n.section-container { max-width: 1200px; margin: 0 auto; padding: 120px 20px; }\n.section-header { text-align: center; margin-bottom: 80px; }\n.section-header h2 { font-size: 2.5rem; margin: 0 0 15px 0; }\n.section-header p { color: var(--text-muted); max-width: 600px; margin: 0 auto; }\n.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }\n.feature-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 40px 30px; transition: all 0.4s var(--bezier-smooth); position: relative; overflow: hidden; cursor: pointer; }\n.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255,51,102,0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }\n.feature-card:hover { transform: translateY(-10px); border-color: rgba(255, 51, 102, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }\n.feature-card:hover::before { opacity: 1; }\n.feature-icon { font-size: 2.5rem; margin-bottom: 20px; display: inline-block; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n.feature-card h3 { font-size: 1.4rem; margin: 0 0 15px 0; }\n.feature-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }\n\n\/* \u6d77\u62a5\u753b\u5eca *\/\n.showcase-section { background: #000; padding: 100px 0; width: 100%; }\n.gallery-container { display: flex; height: 400px; max-width: 1200px; margin: 0 auto; gap: 10px; padding: 0 20px; }\n.gallery-item { flex: 1; border-radius: 12px; background-size: cover; background-position: center; position: relative; overflow: hidden; transition: flex 0.6s var(--bezier-smooth); cursor: pointer; }\n.gallery-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); }\n.gallery-item:hover { flex: 3; }\n.gallery-content { position: absolute; bottom: -20px; left: 20px; z-index: 2; opacity: 0; transition: all 0.4s var(--bezier-smooth); }\n.gallery-item:hover .gallery-content { bottom: 20px; opacity: 1; transition-delay: 0.2s; }\n.gallery-content h4 { font-size: 1.5rem; margin: 0 0 5px 0; }\n.gallery-content p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }\n\n\/* CTA *\/\n.cta-section { text-align: center; padding: 120px 20px; background: radial-gradient(circle at bottom, rgba(255,51,102,0.15) 0%, var(--bg-dark) 60%); width: 100%; }\n.btn-primary { display: inline-block; padding: 15px 40px; font-size: 1.1rem; font-weight: bold; color: #fff; background: var(--primary-gradient); border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(255,51,102,0.3); }\n.btn-primary:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(255,51,102,0.5); }\n\n\/* \u54cd\u5e94\u5f0f *\/\n@media (max-width: 992px) { .hero-title { font-size: 3.5rem; } .features-grid { grid-template-columns: repeat(2, 1fr); } .gallery-container { height: 300px; } }\n@media (max-width: 768px) { .floating-back-btn { top: 15px; left: 15px; font-size: 0.85rem; padding: 8px 15px; } .hero-title { font-size: 2.5rem; } .features-grid { grid-template-columns: 1fr; } .gallery-container { flex-direction: column; height: 600px; } .gallery-item:hover { flex: 2; } }\n<\/style>\n\n<div id=\"cine-root\">\n    <a href=\"javascript:history.back()\" class=\"floating-back-btn cine-anim cine-fade-in\" style=\"transition-delay: 500ms;\">\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        <span>\u8fd4\u56de\u4e0a\u4e00\u9875<\/span>\n    <\/a>\n\n    <section class=\"hero-section\">\n        <div class=\"hero-bg hero-bg-img\" id=\"parallax-bg\"><\/div>\n        <div class=\"hero-overlay\"><\/div>\n        <div class=\"hero-content\">\n            <div class=\"tagline cine-anim cine-fade-up\">\u89c6\u8ff9\u4f20\u5a92 \u00b7 \u6838\u5fc3\u4e1a\u52a1<\/div>\n            <h1 class=\"hero-title cine-anim cine-fade-up\" style=\"transition-delay: 200ms;\">\u6355\u6349\u65f6\u4ee3\u5fc3\u8df3<br>\u7f14\u9020\u7206\u6b3e\u5f71\u50cf<\/h1>\n            <p class=\"hero-desc cine-anim cine-fade-up\" style=\"transition-delay: 400ms;\">\u4e13\u6ce8\u9ad8\u54c1\u8d28\u7f51\u7edc\u77ed\u5267\u4e0e\u7cbe\u54c1\u5f71\u89c6\u7814\u53d1\uff0c\u7528\u7535\u5f71\u7ea7\u7684\u955c\u5934\u8bed\u8a00\uff0c\u8bb2\u900f\u6bcf\u4e00\u4e2a\u76f4\u51fb\u7075\u9b42\u7684\u6545\u4e8b\u3002<\/p>\n        <\/div>\n        <div class=\"scroll-indicator\"><div class=\"mouse\"><div class=\"wheel\"><\/div><\/div><\/div>\n    <\/section>\n\n    <section class=\"section-container\">\n        <div class=\"section-header cine-anim cine-fade-up\">\n            <h2>\u5168\u94fe\u8def\u5f71\u89c6\u5236\u4f5c\u751f\u6001<\/h2>\n            <p>\u4ece\u4e00\u4e2a\u7edd\u5999\u7684\u7075\u611f\u5230\u5343\u4e07\u7ea7\u64ad\u653e\u7684\u7206\u6b3e\uff0c\u6211\u4eec\u63d0\u4f9b\u884c\u4e1a\u9876\u5c16\u7684\u5168\u6d41\u7a0b\u62a4\u822a\u3002<\/p>\n        <\/div>\n        <div class=\"features-grid\">\n            <div class=\"feature-card cine-anim cine-fade-up\" style=\"transition-delay: 100ms;\">\n                <div class=\"feature-icon\">\ud83d\udcdd<\/div>\n                <h3>IP\u5b75\u5316\u4e0e\u5267\u672c\u7814\u53d1<\/h3>\n                <p>\u767e\u4eba\u4e13\u4e1a\u7f16\u5267\u56e2\u961f\uff0c\u7cbe\u51c6\u6d1e\u5bdf\u4e0b\u6c89\u4e0e\u5708\u5c42\u5e02\u573a\u60c5\u7eea\uff0c\u62e5\u6709\u4e30\u5bcc\u7684\u7206\u6b3e\u7f51\u6587\/\u77ed\u5267IP\u50a8\u5907\u4e0e\u6539\u7f16\u7ecf\u9a8c\u3002<\/p>\n            <\/div>\n            <div class=\"feature-card cine-anim cine-fade-up\" style=\"transition-delay: 200ms;\">\n                <div class=\"feature-icon\">\ud83c\udfac<\/div>\n                <h3>S\u7ea7\u6444\u5236\u4e3b\u521b\u56e2\u961f<\/h3>\n                <p>\u9662\u7ebf\u7ea7\u5bfc\u6f14\u53ca\u6444\u5f71\u6307\u5bfc\u5750\u9547\uff0c\u914d\u5907\u597d\u83b1\u575e\u7ea7RED\/ARRI\u6444\u5f71\u673a\u4e0e\u9876\u7ea7\u706f\u5149\u9635\u5217\uff0c\u786e\u4fdd\u753b\u9762\u8d28\u611f\u3002<\/p>\n            <\/div>\n            <div class=\"feature-card cine-anim cine-fade-up\" style=\"transition-delay: 300ms;\">\n                <div class=\"feature-icon\">\ud83c\udf9e\ufe0f<\/div>\n                <h3>\u7535\u5f71\u7ea7\u540e\u671f\u89c6\u6548<\/h3>\n                <p>\u9ad8\u6548\u7684\u5de5\u4e1a\u5316\u540e\u671f\u6d41\u6c34\u7ebf\uff0c\u6db5\u76d6\u526a\u8f91\u3001\u8fbe\u82ac\u5947\u8c03\u8272\u3001\u7279\u6548CGI\u53ca\u675c\u6bd4\u97f3\u6548\u5408\u6210\uff0c\u6bcf\u4e00\u5e27\u7686\u662f\u58c1\u7eb8\u3002<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section class=\"showcase-section\">\n        <div class=\"section-header cine-anim cine-fade-up\">\n            <h2>\u8fd1\u671f\u7206\u6b3e\u5de8\u732e<\/h2>\n            <p>\u6e38\u5203\u4e8e\u591a\u79cd\u9898\u6750\u4e4b\u95f4\uff0c\u4e0d\u65ad\u5237\u65b0\u64ad\u653e\u8bb0\u5f55<\/p>\n        <\/div>\n        <div class=\"gallery-container cine-anim cine-fade-in\" style=\"transition-delay: 200ms;\">\n            <div class=\"gallery-item gallery-img-1\">\n                <div class=\"gallery-content\">\n                    <h4>\u300a\u591c\u9611\u542c\u98ce\u300b<\/h4><p>\u53e4\u88c5 \/ \u6743\u8c0b \/ S+\u7ea7\u77ed\u5267<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"gallery-item gallery-img-2\">\n                <div class=\"gallery-content\">\n                    <h4>\u300a\u90fd\u5e02\u6f5c\u884c\u8005\u300b<\/h4><p>\u73b0\u4ee3 \/ \u60ac\u7591 \/ \u73b0\u8c61\u7ea7\u70ed\u64ad<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"gallery-item gallery-img-3\">\n                <div class=\"gallery-content\">\n                    <h4>\u300a\u7834\u8327\u91cd\u751f\u300b<\/h4><p>\u5927\u5973\u4e3b \/ \u804c\u573a \/ \u7206\u6b3e\u4f73\u4f5c<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"gallery-item gallery-img-4\">\n                <div class=\"gallery-content\">\n                    <h4>\u300a\u661f\u73af\u4e4b\u5916\u300b<\/h4><p>\u79d1\u5e7b \/ \u8ff7\u4f60\u5267 \/ \u89c6\u89c9\u76db\u5bb4<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section class=\"cta-section cine-anim cine-fade-up\">\n        <h2 style=\"font-size: 2.5rem; margin-bottom: 20px;\">\u51c6\u5907\u597d\u6253\u9020\u4e0b\u4e00\u4e2a\u7206\u6b3e\u4e86\u5417\uff1f<\/h2>\n        <p style=\"color: var(--text-muted); margin-bottom: 40px; font-size: 1.1rem;\">\u63d0\u4ea4\u60a8\u7684\u5408\u4f5c\u610f\u5411\uff0c\u6211\u4eec\u7684\u5236\u7247\u4eba\u5c06\u572824\u5c0f\u65f6\u5185\u4e0e\u60a8\u8054\u7cfb\u3002<\/p>\n        <a href=\"\/index.php\/content\/\" class=\"btn-primary\">\u7acb \u5373 \u8054 \u7cfb<\/a>\n    <\/section>\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('cine-root');\n    if (container && container.parentElement !== document.body) {\n        document.body.prepend(container);\n    }\n\n    \/\/ 2. \u5f3a\u529b\u6e05\u573a\uff1a\u6740\u6389 WordPress \u6240\u6709\u539f\u751f\u5916\u58f3\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    \/\/ 3. \u521d\u59cb\u5316\u4e92\u52a8\u7279\u6548\n    function initInteractions() {\n        const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };\n        const observer = new IntersectionObserver((entries, obs) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('is-visible');\n                    obs.unobserve(entry.target); \n                }\n            });\n        }, observerOptions);\n\n        document.querySelectorAll('.cine-anim').forEach(el => observer.observe(el));\n\n        const heroBg = document.getElementById('parallax-bg');\n        if (heroBg) {\n            window.addEventListener('scroll', () => {\n                const scrolled = window.scrollY;\n                if (scrolled < window.innerHeight) {\n                    heroBg.style.setProperty('--parallax-y', `${scrolled * 0.4}px`);\n                }\n            }, { passive: true });\n        }\n    }\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initInteractions);\n    } else {\n        initInteractions();\n    }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u8fd4\u56de\u4e0a\u4e00\u9875 \u89c6\u8ff9\u4f20\u5a92 \u00b7 \u6838\u5fc3\u4e1a\u52a1 \u6355\u6349\u65f6\u4ee3\u5fc3\u8df3\u7f14 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":158,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-124","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":31,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/124\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/124\/revisions\/361"}],"up":[{"embeddable":true,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/158"}],"wp:attachment":[{"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/media?parent=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}