{"id":126,"date":"2026-03-16T14:23:02","date_gmt":"2026-03-16T06:23:02","guid":{"rendered":"http:\/\/10.140.25.199:8998\/?page_id=126"},"modified":"2026-03-19T15:17:24","modified_gmt":"2026-03-19T07:17:24","slug":"tvc","status":"publish","type":"page","link":"https:\/\/shijichuanmei.com\/index.php\/%e5%ae%a2%e6%88%b7%e6%a1%88%e4%be%8b\/tvc\/","title":{"rendered":"\u5e7f\u544aTVC\/\u5ba3\u4f20\u7247"},"content":{"rendered":"\n<style>\n\/* =========================================\n   === \u56fe\u7247\u914d\u7f6e\u533a & \u6838\u5fc3\u53d8\u91cf (\u5546\u4e1a\u9ad8\u5962\u98ce) ===\n========================================= *\/\n:root {\n    \/* \u9996\u5c4f\u5927\u80cc\u666f\u56fe *\/\n    --bg-hero: url('https:\/\/images.unsplash.com\/photo-1601506521937-0121a7fc2a6b?q=80&w=2071&auto=format&fit=crop');\n\n    \/* \u8fd1\u671f\u5546\u4e1a\u7206\u6b3e - 4\u5f20\u6848\u4f8b\u6d77\u62a5\u56fe *\/\n    --bg-gallery-1: url('https:\/\/images.unsplash.com\/photo-1550751827-4bd374c3f58b?q=80&w=800&auto=format&fit=crop'); \n    --bg-gallery-2: url('https:\/\/images.unsplash.com\/photo-1563720223185-11003d516935?q=80&w=800&auto=format&fit=crop'); \n    \/* \u4fee\u590d 404\uff1a\u5feb\u6d88\/\u98df\u54c1\u7c7b\u9ad8\u7ea7\u5546\u4e1a\u5927\u7247 (\u5bfb\u5473\u4e1c\u65b9) *\/\n    --bg-gallery-3: url('https:\/\/images.unsplash.com\/photo-1504674900247-0877df9cc836?q=80&w=800&auto=format&fit=crop'); \n    --bg-gallery-4: url('https:\/\/images.unsplash.com\/photo-1477959858617-67f85cf4f1df?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.4) 0%, rgba(10,10,10,0.95) 100%); z-index: 2; }\n.hero-content { position: relative; z-index: 3; text-align: center; max-width: 900px; 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: 4.5rem; font-weight: 800; line-height: 1.15; 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: 650px; 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: 450px; 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: 60%; background: linear-gradient(to top, rgba(0,0,0,0.95), 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.2rem; } .features-grid { grid-template-columns: repeat(2, 1fr); } .gallery-container { height: 350px; } }\n@media (max-width: 768px) { .floating-back-btn { top: 15px; left: 15px; font-size: 0.85rem; padding: 8px 15px; } .hero-title { font-size: 2.2rem; } .features-grid { grid-template-columns: 1fr; } .gallery-container { flex-direction: column; height: 650px; } .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        \n        <div class=\"hero-content\">\n            <div class=\"tagline cine-anim cine-fade-up\">\u89c6\u8ff9\u4f20\u5a92 \u00b7 \u5546\u4e1a\u5f71\u50cf<\/div>\n            <h1 class=\"hero-title cine-anim cine-fade-up\" style=\"transition-delay: 200ms;\">\u8d4b\u80fd\u54c1\u724c\u4ef7\u503c<br>\u91cd\u5851\u89c6\u89c9\u5f20\u529b<\/h1>\n            <p class=\"hero-desc cine-anim cine-fade-up\" style=\"transition-delay: 400ms;\">\u4e13\u6ce8\u4e8e\u9ad8\u89c4\u683c\u5e7f\u544aTVC\u4e0e\u4f01\u4e1a\u5ba3\u4f20\u7247\u5b9a\u5236\uff0c\u7528\u6781\u5177\u51b2\u51fb\u529b\u7684\u89c6\u542c\u8bed\u8a00\uff0c\u8ba9\u6bcf\u4e00\u6b21\u4f20\u64ad\u90fd\u6210\u4e3a\u54c1\u724c\u7684\u8d85\u7ea7\u7b26\u53f7\u3002<\/p>\n        <\/div>\n\n        <div class=\"scroll-indicator\">\n            <div class=\"mouse\"><div class=\"wheel\"><\/div><\/div>\n        <\/div>\n    <\/section>\n\n    <section class=\"section-container\">\n        <div class=\"section-header cine-anim cine-fade-up\">\n            <h2>\u8d85\u7ef4\u5ea6\u7684\u5546\u4e1a\u89c6\u89c9\u8d4b\u80fd<\/h2>\n            <p>\u4ece\u5e02\u573a\u6d1e\u5bdf\u5230\u6700\u7ec8\u6210\u7247\uff0c\u6211\u4eec\u62d2\u7edd\u5343\u7bc7\u4e00\u5f8b\u7684\u5957\u8def\uff0c\u7528\u7535\u5f71\u7ea7\u5de5\u4e1a\u6c34\u51c6\u4e3a\u60a8\u6253\u9020\u4e0d\u53ef\u590d\u5236\u7684\u54c1\u724c\u540d\u7247\u3002<\/p>\n        <\/div>\n\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\udca1<\/div>\n                <h3>\u54c1\u724c\u7b56\u7565\u4e0e\u521b\u610f\u811a\u672c<\/h3>\n                <p>\u57fa\u4e8e\u7cbe\u51c6\u7684\u5e02\u573a\u6d1e\u5bdf\u63d0\u53d6\u54c1\u724c\u6838\u5fc3DNA\uff0c\u8de8\u754c\u521b\u610f\u56e2\u961f\u4e3a\u60a8\u91cf\u8eab\u5b9a\u5236\u4e13\u5c5e\u811a\u672c\uff0c\u786e\u4fdd\u6bcf\u4e00\u79d2\u90fd\u5728\u8f93\u51fa\u54c1\u724c\u6838\u5fc3\u4ef7\u503c\u3002<\/p>\n            <\/div>\n            \n            <div class=\"feature-card cine-anim cine-fade-up\" style=\"transition-delay: 200ms;\">\n                <div class=\"feature-icon\">\ud83c\udfa5<\/div>\n                <h3>\u5de5\u4e1a\u7ea7\u89c6\u542c\u6444\u5236<\/h3>\n                <p>\u56fd\u9645\u5316\u5236\u4f5c\u6807\u51c6\uff0c\u963f\u83b1\/RED\u9876\u7ea7\u7535\u5f71\u673a\u9635\u5217\u62a4\u822a\u3002\u8d44\u6df1\u5546\u4e1a\u5927\u5bfc\u3001A\u7ea7\u6444\u5f71\u6307\u5bfc\u4e0e\u9876\u7ea7\u7f8e\u672f\u56e2\u961f\u7cbe\u5fc3\u96d5\u7422\u6bcf\u4e00\u4e2a\u955c\u5934\u3002<\/p>\n            <\/div>\n            \n            <div class=\"feature-card cine-anim cine-fade-up\" style=\"transition-delay: 300ms;\">\n                <div class=\"feature-icon\">\ud83d\ude80<\/div>\n                <h3>\u5168\u57df\u8425\u9500\u8bed\u5883\u5206\u53d1<\/h3>\n                <p>\u4e0d\u4ec5\u4ea4\u4ed8\u6781\u81f4\u6210\u7247\uff0c\u66f4\u5339\u914d\u5f53\u4e0b\u77ed\u89c6\u9891\u3001\u68af\u5a92\u7b49\u591a\u7ef4\u4f20\u64ad\u7279\u6027\uff0c\u63d0\u4f9b\u591a\u7248\u672c\u5957\u526a\uff0c\u8ba9\u4f18\u8d28\u5185\u5bb9\u7cbe\u51c6\u89e6\u8fbe\u76ee\u6807\u53d7\u4f17\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>\u6807\u6746\u7ea7\u5546\u4e1a\u6848\u4f8b<\/h2>\n            <p>\u8de8\u8d8a\u79d1\u6280\u3001\u6c7d\u8f66\u3001\u5feb\u6d88\u3001\u6587\u65c5\u7b49\u591a\u91cd\u9886\u57df\uff0c\u6301\u7eed\u5236\u9020\u89c6\u89c9\u60ca\u8273<\/p>\n        <\/div>\n\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\u672a\u6765\u5df2\u6765\u300b<\/h4>\n                    <p>\u79d1\u6280\u54c1\u724c\u5168\u7403\u53d1\u5e03\u4f1aTVC<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"gallery-item gallery-img-2\">\n                <div class=\"gallery-content\">\n                    <h4>\u300a\u6781\u901f\u65e0\u754c\u300b<\/h4>\n                    <p>\u65b0\u80fd\u6e90\u6c7d\u8f66\u65d7\u8230\u5927\u7247<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"gallery-item gallery-img-3\">\n                <div class=\"gallery-content\">\n                    <h4>\u300a\u5bfb\u5473\u4e1c\u65b9\u300b<\/h4>\n                    <p>\u5934\u90e8\u5feb\u6d88\u54c1\u724c\u5f62\u8c61\u5ba3\u4f20\u7247<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"gallery-item gallery-img-4\">\n                <div class=\"gallery-content\">\n                    <h4>\u300a\u57ce\u5e02\u5171\u751f\u300b<\/h4>\n                    <p>\u5730\u6807\u7ea7\u6587\u65c5\u6982\u5ff5\u5ba3\u4f20\u7247<\/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\u8ba9\u60a8\u7684\u54c1\u724c\u60ca\u8273\u53d1\u58f0\u4e86\u5417\uff1f<\/h2>\n        <p style=\"color: var(--text-muted); margin-bottom: 40px; font-size: 1.1rem;\">\u63d0\u4ea4\u60a8\u7684\u8425\u9500\u9700\u6c42\u6216\u521b\u610f\u7b80\u62a5\uff0c\u6211\u4eec\u7684\u5236\u7247\u4e13\u5bb6\u5c06\u5c3d\u5feb\u4e0e\u60a8\u5bf9\u63a5\u6c9f\u901a\u3002<\/p>\n        <a href=\"\/index.php\/content\/\" class=\"btn-primary\">\u83b7 \u53d6 \u5b9a \u5236 \u65b9 \u6848<\/a>\n    <\/section>\n\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 \u5546\u4e1a\u5f71\u50cf \u8d4b\u80fd\u54c1\u724c\u4ef7\u503c\u91cd &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":106,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-126","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/126","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=126"}],"version-history":[{"count":7,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/126\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/126\/revisions\/363"}],"up":[{"embeddable":true,"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/pages\/106"}],"wp:attachment":[{"href":"https:\/\/shijichuanmei.com\/index.php\/wp-json\/wp\/v2\/media?parent=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}