椤圭洰鎶€鏈瘖鏂蹇樺綍路 TA 浣撶郴鍖栨彁閫熷缓璁?/title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles-v2.css"> <style>.v2-hero { padding: 72px 0 46px; } .v2-hero h1 { max-width: 1060px; margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(48px, 6vw, 86px); line-height: 1.02; font-weight: 400; letter-spacing: 0; } .v2-hero h1 em { color: var(--signal); font-style: italic; } .v2-hero p { max-width: 900px; margin: 26px 0 0; color: var(--ink-500); font-size: 20px; line-height: 1.65; } .v2-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 38px; overflow: hidden; border: 1px solid var(--ink-100); border-radius: 8px; background: var(--ink-100); } .v2-bar div { min-height: 118px; padding: 22px; background: var(--white); } .v2-bar span, .v2-service span, .v2-step span, .v2-proof span { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-400); text-transform: uppercase; } .v2-bar strong { display: block; color: var(--ink-900); font-size: 19px; line-height: 1.35; font-weight: 600; } .v2-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } .v2-service { min-height: 250px; border: 1px solid var(--ink-100); border-radius: 8px; background: var(--white); padding: 26px; box-shadow: var(--shadow-soft); } .v2-service h2 { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.12; font-weight: 400; } .v2-service p { margin: 16px 0 0; color: var(--ink-500); } .v2-deliverables { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; margin-top: 34px; } .v2-image-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .v2-image-card { position: relative; overflow: hidden; min-height: 320px; border: 1px solid var(--ink-100); border-radius: 8px; background: var(--ink-900); } .v2-image-card img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; opacity: .9; } .v2-image-card figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; border-radius: 8px; background: rgba(8,14,20,.82); color: var(--white); padding: 18px; backdrop-filter: blur(12px); } .v2-image-card h3 { margin: 0; font-size: 22px; line-height: 1.25; } .v2-image-card p { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 14px; } .v2-image-card.wide { grid-column: 1 / -1; min-height: 420px; } .v2-image-card.wide img { min-height: 420px; } .v2-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .v2-list li { display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--ink-100); padding: 13px 0; color: var(--ink-600); } .v2-list li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--signal); flex: 0 0 auto; } .v2-dark { border-radius: 8px; background: var(--ink-900); color: var(--white); padding: 34px; } .v2-dark h2 { margin: 0; font-family: var(--font-display); font-size: 38px; line-height: 1.1; font-weight: 400; } .v2-dark p { margin: 18px 0 0; color: rgba(255,255,255,.68); } .v2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } .v2-step { border-left: 2px solid var(--signal); padding: 8px 22px 6px; } .v2-step h3 { margin: 0; font-size: 22px; line-height: 1.25; } .v2-step p { margin: 12px 0 0; color: var(--ink-500); } .v2-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; } .v2-proof { border: 1px solid var(--ink-100); border-radius: 8px; background: var(--white); padding: 22px; } .v2-proof strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1.1; } .v2-proof p { margin: 12px 0 0; color: var(--ink-500); font-size: 14px; } .v2-cta { margin-top: 36px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .v2-cta h2 { margin: 0; font-size: 28px; line-height: 1.2; } .v2-cta p { margin: 8px 0 0; color: var(--ink-500); } .v2-pill { flex: 0 0 auto; border-radius: 999px; background: var(--ink-900); color: var(--white); padding: 12px 18px; font-size: 13px; font-weight: 600; } @media (max-width: 980px) { .topbar-inner { padding: 14px 24px; } .topbar-meta { display: none; } .shell { padding: 0 24px; } .v2-hero { padding: 48px 0 34px; } .v2-hero h1 { font-size: clamp(40px, 13vw, 58px); } .v2-hero p { font-size: 18px; } .v2-bar, .v2-service-grid, .v2-deliverables, .v2-image-grid, .v2-steps, .v2-proof-grid { grid-template-columns: 1fr; } .v2-image-card.wide { grid-column: auto; } .v2-image-card, .v2-image-card.wide { min-height: 0; background: var(--white); } .v2-image-card img, .v2-image-card.wide img { height: auto; min-height: 0; object-fit: contain; opacity: 1; } .v2-image-card figcaption { position: static; border-radius: 0; background: var(--ink-900); } .v2-cta { align-items: flex-start; flex-direction: column; } }</style> <style>.memo-edit-toolbar { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: flex; gap: 8px; padding: 8px; border: 1px solid rgba(11,15,20,.12); border-radius: 8px; background: rgba(250,251,252,.92); box-shadow: 0 10px 30px rgba(11,15,20,.14); backdrop-filter: blur(12px); } .memo-edit-toolbar button { border: 1px solid rgba(11,15,20,.16); border-radius: 6px; background: var(--white); color: var(--ink-800); padding: 7px 10px; font: 12px/1 var(--font-sans); } .memo-edit-toolbar button.active { background: var(--ink-900); color: var(--white); } .memo-edit-toolbar .memo-status { align-self: center; max-width: 260px; color: var(--ink-600); font: 12px/1.35 var(--font-sans); } .memo-editing [contenteditable="true"] { outline: 1px dashed rgba(184,149,106,.7); outline-offset: 3px; cursor: text; } .memo-layout-editing .memo-draggable-block { cursor: grab; outline: 1px dashed rgba(30,58,95,.55); outline-offset: 4px; touch-action: none; user-select: none; } .memo-layout-editing .memo-draggable-block.memo-dragging { cursor: grabbing; z-index: 50; } .memo-drag-handle { position: absolute; top: 10px; left: 10px; z-index: 4; display: none; border: 1px solid rgba(255,255,255,.8); border-radius: 6px; background: rgba(11,15,20,.78); color: #fff; padding: 6px 8px; font: 12px/1 var(--font-sans); letter-spacing: 0; cursor: grab; } .memo-editing .memo-drag-handle { display: block; } .memo-layout-editing .memo-drag-handle { display: block; }</style> <link rel="stylesheet" href="./coolper-shell.css"/> </head> <body class="coolper-case-page"> <video class="site-bg-video" autoplay muted loop playsinline preload="auto" aria-hidden="true"> <source src="./assets/20260517-195933.mp4" type="video/mp4"> </video> <canvas class="ripple-canvas" aria-hidden="true"></canvas> <div class="ripple-lens" aria-hidden="true"></div> <div class="site-bg-scrim" aria-hidden="true"></div> <header class="coolper-global-nav"> <a class="coolper-global-brand" href="./index-design.html" aria-label="返回 Coolper 首页"> <img src="./assets/coolper-logo.png" alt="Coolper"> </a> <nav aria-label="Coolper 页面导航"> <a href="./index-design.html#services">服务</a> <a href="./index-design.html#scenarios">场景</a> <a href="./index-design.html#work">案例</a> <a href="./index-design.html#method">流程</a> <a href="./index-design.html#contact">咨询</a> </nav> <a class="coolper-nav-pill" href="./index-design.html#contact">联系项目顾问</a> </header>  <header class="topbar"> <div class="topbar-inner"> <div class="brand"> <span class="brand-mark"></span> <span>TECHNICAL ART 路 ADVISORY</span> </div> <div class="topbar-meta"> <div>鏂囨。<strong>椤圭洰鍚堜綔鎻愭</strong> </div> <div>鏃ユ湡<strong>2026.05.06</strong> </div> <div>瀵嗙骇<strong>鏍稿績鍐崇瓥灞備笓闃?/strong> </div> </div> </div> </header> <main>  <section class="hero shell"> <h1 class="hero-headline"></h1> 椤圭洰鍚堜綔妗堜緥-<br>TA寮€鍙戜笟鍔?br>  <section class="section shell" id="observation" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">****</span> <h3 style="margin-top:12px;">鍚堜綔鐩爣</h3> </div> <div> <h1>鐢婚潰琛ㄧ幇澧炲己+瀹炴満杩愯鏁堢巼= 寮哄寲浜у搧绔炰簤鍔?/h1> </div> </div>  <figure class="case-banner"> <img src="img/20260506-133306.jpg" loading=""> <figcaption> <span class="case-banner-lab"><h2>寮傜幆娓告垙鐢婚潰</h2></span> </figcaption> </figure>  <figure class="heatmap-figure" aria-label="鍚屽睆闈㈡暟鐑姏鍒嗗竷绀烘剰" style="position: relative;"> <div class="heatmap-head"> <div> <div class="heatmap-title"> <h1>绔炲搧瀵规瘮</h1> </div> <div class="heatmap-eyebrow">灏嗕細鍜屼竴涓粈涔堟牱鐨勬父鎴忕珵浜?/div> </div> </div> <div class="heatmap-body" style="position: relative;"> <img src="img/HTGame_3VUT7eMNb7.jpg" loading="lazy"> <div class="heatmap-side" style="position: relative;"> <div class="heatmap-stat" style="position: relative;"> <span class="heatmap-stat-lab">Core Tech</span> <span class="heatmap-stat-val">UE5寮曟搸</span> <span class="heatmap-stat-sub">寮€鏀句笘鐣岀敓浜ч摼璺紑绠卞畬鎴愬害锛?85% Ready</span> <div class="heatmap-bar"> <span style="width:85%;"></span> </div> <span class="heatmap-stat-val">Lumen/ Nanite/ PPG </span> <span class="heatmap-stat-val">涓栫晫鍒嗗尯绛?/span> <span class="heatmap-stat-val benchmark">鐜版垚鐨勬矙鐩掑ぇ涓栫晫鏂规</span> <span class="heatmap-stat-sub">椤圭洰缁勫彲浠ユ嬁鏉ュ嵆鐢紝鏃犻渶鎶曞叆澶ч噺浜哄姏</span> <span class="heatmap-stat-sub">鍥㈤槦涓昏鎶曞叆鍦ㄥ唴瀹硅鏍笺€佹€ц兘璋冧紭鍜岄」鐩伐绋嬪寲锛岃€岄潪浠庨浂琛ラ綈搴曞眰寮€鏀句笘鐣屾鏋躲€?/span> </div> <div class="heatmap-stat" style="position: relative;"> <span class="heatmap-stat-lab">寮曟搸鐢熸€佸畬鎴愬害浣?/span> <span class="heatmap-stat-val benchmark">UNITY3D鐭澘</span> <span class="heatmap-stat-sub">寮€鏀句笘鐣岀敓浜ч摼璺紑绠卞畬鎴愬害 :40~50%</span> <div class="heatmap-bar"> <span style="width:45%;background:var(--ink-700);"></span> </div> <span class="heatmap-stat-val benchmark">鏃犲紑绠卞嵆鐢ㄥぇ涓栫晫鏂规</span> <span class="heatmap-stat-sub">绾?5%闇€瑕佸紑鍙戠粍鑷爺鏉ヨˉ榻?/span> </div> <div class="heatmap-stat" style="position: relative;"> <span class="heatmap-stat-lab">绔炲搧鍥㈤槦鐘舵€?/span> <span class="heatmap-stat-val">绾?00浜?/span> <span class="heatmap-stat-sub">澶氭暟鎴愬憳鏉ヨ嚜骞诲 缁ф壙浠ュ線寮€鏀句笘鐣岀粡楠?/span> </div> </div> </div> </figure> </section> <section class="section shell" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside memo-draggable-block" style="position: relative;" data-memo-drag="1"> <span class="section-num">01</span> <h3 style="margin-top:12px;" class="">鎺ㄥ姩鐨勫唴瀹?nbsp;</h3> </div> <div> <h2 class="section-title"><br></h2> </div> </div> <div class="v2-service-grid"> <article class="v2-service"> <span>Service 01</span> <h2>1.绔炲搧鎶€鏈媶瑙?/h2> <p>鎷嗚В銆婂紓鐜€嬬瓑鐩爣绔炲搧鐨勮鑹层€佸満鏅€佸厜鐓с€佸紑鏀句笘鐣屻€佹€ц兘绛栫暐锛岀粰鍑洪」鐩樊璺濆拰杩借刀璺緞銆?/p> </article> <article class="v2-service"> <span>Service 02</span> <h2>2.鐢婚潰绔炰簤鍔涙彁鍗?/h2> <p>瀵瑰綋鍓嶇増鏈仛鎴浘鏍囨敞銆佸疄鏈鸿瀵熷拰闂鍒嗙骇锛屾槑纭摢浜涢棶棰樺奖鍝嶉珮绾ф劅锛屽摢浜涢棶棰樺奖鍝嶄笂绾跨ǔ瀹氭€с€?/p> </article> <article class="v2-service"> <span>Service 03</span> <h2>3.娓叉煋鏂规</h2> <p>瑙掕壊 NPR銆丳BR 鍦烘櫙銆丩umen/鐑樼剻銆佸ぉ绌轰簯闆俱€佹按浣撱€佸悗澶勭悊銆佸钩鍙板垎妗ｏ紝褰㈡垚鍙墽琛屾柟妗堛€?/p> </article> <article class="v2-service"> <span>Service 04</span> <h2>4.寮€鏀句笘鐣屼紭鍖?/h2> <p>澶у湴鍥炬祦閫併€丠LOD/LOD銆佽繙鏅粍缁囥€佹琚疄渚嬪寲銆佸煄甯傚瘑搴︺€佹按浣撳拰閬撹矾璧勪骇棰勭畻銆?/p> </article> <article class="v2-service"> <span>Service 05 宸ュ叿閾剧浉鍏?/span> <h2>5.鐮斿彂鏁堢巼鎻愬崌 </h2> <p>DCC 瀵煎嚭銆佽祫婧愭鏌ャ€佸懡鍚嶈鑼冦€佽创鍥鹃€氶亾銆丩OD銆佹潗璐ㄥ鏉傚害鍜屾瀯寤哄墠鎵弿宸ュ叿銆?/p> </article> <article class="v2-service"> <span>Service 06</span> <h2>6.鍥㈤槦闄窇涓庡煿璁?/h2> <p>鐜板満鍗忓姪涓庢矡閫氾紝鍦ㄧ湡瀹炵増鏈噷闄洟闃熸妸鏍囧噯璺戦€氾紝鍩瑰吇椤圭洰鑷繁 TA鐨?鍒ゆ柇鍔?/p> </article> </div> </section> <h1 style="margin-top:12px;">鍚堜綔鐨勪笁涓樁娈?/h1> <div class="roadmap" id="roadmap-grid" style="position: relative;"> <article class="phase" data-phase="1" style="display:flex;flex-direction:column;"> <span class="phase-week">绗?1鈥? 鍛?/span> <h4>蹇€熺籂閿?<br>寤虹珛鏍囧噯鍖?/h4> <div class="verify"> <span class="verify-label"><span style="letter-spacing: 1.68px;">鍙獙璇佹敹鐩?/span></span>鏍囧噯鍖哄煙瀹炵幇绋冲畾杩愯锛涚編鏈嬁鍒版槑纭爣鍑嗭紱鍥㈤槦鐪嬪埌"鏁堟灉鑳芥彁鍗囥€佸抚鐜囪兘闄嶄笅鏉?鐨勬竻鏅拌矾寰勩€? </div> </article> <article class="phase" data-phase="2" style="display:flex;flex-direction:column;"> <span class="phase-week">绗?2鈥? 涓湀</span> <h4>TA宀?浣撶郴寤鸿+<br>鐢婚潰鍝佽川鍗囩骇</h4> <div class="verify"> <span class="verify-label">鍙獙璇佹敹鐩?/span>鍥㈤槦鏈変簡鍙墽琛岀殑鐢熶骇鏍囧噯锛屼篃鏈変簡鍙拷姹傜殑鍝佽川鐩爣锛涜祫浜ф彁浜ゅ疄鐜拌嚜鍔ㄦ鏌ャ€? </div> </article> <article class="phase active" data-phase="3" style="display:flex;flex-direction:column;"> <span class="phase-week">绗?4鈥? 涓湀</span> <h4>椤圭洰浼樺娍鎸栨帢<br>鎻愰珮绔炰簤涓婇檺</h4> <div class="verify"> <span class="verify-label"><span style="letter-spacing: 1.68px;">鍙獙璇佹敹鐩?/span></span>鍥㈤槦绮惧姏浠庡崗璋冨唴鑰?杞悜鍒涙剰鍜岄珮鍝佽川鐢熶骇锛涗笌绔炲搧妯悜瀵规瘮鏄庣‘浼樺娍锛屼负涓婄嚎寤虹珛鎵庡疄鐨勬祦绋嬪熀纭€銆? </div> </article> </div> <div class="root-cause" style="position: relative;"> <span class="badge"> <h1>鍥㈤槦褰撳墠涓昏鐭澘鎬荤粨 </h1></span> <p class="text"> 鎴愬憳鏈粡鍘嗚繃鈥滃ぇ鍨嬪紑鏀句笘鐣屾矙鐩掓父鎴忊€濈殑鎶€鏈?amp;缇庢湳涓婂眰瑙勫垝 </p> </div>  <section class="section shell" id="observation" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">鍚堜綔鐩爣 1</span> <h3 style="margin-top:12px;">绗?涓湀<br></h3> <span class="section-num">step 1</span> </div> <div> <h1>1. 鍥㈤槦寤鸿锛氬府鍔╅」鐩缓绔嬭捣绗竴姊槦TA瑙嗚</h1> <p class="section-lede"> 灏藉揩璧朵笂绗竴姊槦鎰忚瘑淇濅笅闄愶細绋冲畾鐨勬€ц兘琛ㄧ幇锛?鎻愪笂闄愶細鐢婚潰鏁堟灉鐨勭珵浜夊姏涓婇檺銆?</p> </div> </div>  <figure class="case-banner"> <img src="img/20260505-225207.jpg" loading=""> <figcaption> <span class="case-banner-lab"><h1>鏄庣‘TA鍜岀編鏈湪涓嶅悓灞傞潰搴旇鎬庢牱鍚堜綔</h1></span> </figcaption> </figure>  <div class="directions" style="position: relative;">  <article class="direction-card"> <h2>銆愮編鏈眰鎺ㄥ姩銆戯細鍏抽敭鍩硅<br>绋嬪簭 <=> 缇庢湳缁熶竴璇涓嬬殑娌熼€氫綋绯?/h2> <p>椤圭洰褰撳墠鐨勫唴瀹逛赴瀵屽害寰堥珮锛屼絾鍚屽睆闈㈡暟鏉ュ埌 2,000鈥?,000 涓囩殑鑼冨洿銆?br>宸窛鍦ㄤ簬浠庤祫浜у埗浣?鍒板満鏅憜鏀剧殑閾捐矾涓紝缂哄皯涓€濂楀彲鏍囧噯鍖栫殑"棰勭畻绠＄悊鏈哄埗"</p> <div class="compare"> <div class="compare-cell"> <div class="lab">褰撳墠-Current</div> <div class="val">2,000鈥?,000<span style="font-size:14px;color:var(--ink-400);">涓?/span> </div> <div class="sub">鍚屽睆闈㈡暟路褰撳墠鍖洪棿</div> </div> <div class="compare-arrow">鈫?/div> <div class="compare-cell bench"> <div class="lab">鏍囧噯-Benchmark</div> <div class="val">锛?500<span style="font-size:14px;opacity:.6;">涓?/span> </div> <div class="sub">琛屼笟鍩哄噯路宸蹭笂绾垮悓绫讳骇鍝佸凡鍋氬垎鏋?/div> </div> </div> <p style="margin-top:18px;">绋嬪簭绔湪鍋氭€ц兘鎵垮帇锛岀編鏈缂哄皯鍙噺鍖栫殑鍒朵綔鍙傜収鈥斺€?br>涓や釜宸ョ閮藉湪鍚勮嚜缁村害涓婂叏鍔涙帹杩涳紝涓棿缂哄皯涓€濂楀叡鍚岀殑搴﹂噺琛℃潵瀵归綈鑺傚銆?/p> <div class="quoted">寤虹珛棰勭畻浣撶郴锛屽抚鐜囬棶棰樹粠鏍规簮鏀舵暃锛岀編鏈篃浼氬洜涓烘湁浜嗘槑纭爣鍑嗚€屽噺灏戣繑宸ャ€傚鍙屾柟閮芥槸濂戒簨銆?/div> </article>  <article class="direction-card"> <p>姊崇悊鍑鸿壇鎬х殑鍥㈤槦鍚堜綔鏈哄埗鈥斺€?img src="img/53c04.png" loading=""></p> <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 8px;"> <div style="border:1px solid var(--ink-100);border-radius:6px;padding:14px 16px;"> <div style="font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-400);text-transform:uppercase;">鑳借惤鍦扮殑鏀剁泭</div> <div style="font-family:var(--font-display);font-size:18px;margin-top:4px;color:var(--ink-900);">缇庢湳浠€涔堜簨鎯呰兘鍋氫粈涔堜笉鑳藉仛</div> <div style="font-size:12px;color:var(--ink-500);margin-top:4px;line-height:1.4;">寤虹珛鏍囧噯锛屽噺灏戣繑宸?/div> </div> <div style="border:1px solid var(--ink-100);border-radius:6px;padding:14px 16px;"> <div style="font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-400);text-transform:uppercase;">鑳借惤鍦扮殑鏀剁泭</div> <div style="font-family:var(--font-display);font-size:18px;margin-top:4px;color:var(--ink-900);">TA鎼ソ鍥㈤槦閰嶅悎鐨勬ˉ姊?/div> <div style="font-size:12px;color:var(--ink-500);margin-top:4px;line-height:1.4;">鍏抽敭浜哄憳鐨勮亴璐ｆ槑纭?/div> </div> </div> </article> </div> <section class="section shell" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">02.5</span> <h3 style="margin-top:12px;">璺ㄥ洟闃熷悎浣滅矘鍚?/h3> </div> <div> <h2 class="section-title">鎵撻€氶棶棰?鐭ラ亾闂鍦ㄥ摢,浣嗕笉鐭ラ亾鎬庝箞鍋?br>Know "What", But not know“How"<br></h2> </div> </div> <figure class="v2-image-card wide"> <img src="img/20260506-203918.png" loading="lazy" alt="宸ヤ笟鍖栦环鍊肩ず鎰?> </figure> <div class="root-cause memo-draggable-block" style="position: relative;" data-memo-drag="1"> <span class="badge"> 寤虹珛鍥㈤槦鎬ц兘鎰忚瘑 </span> <p class="text"> 椤圭洰閫氬父鏃跺€欐槸”鏃㈣鍙堣鐨?ldquo;锛屾棦瑕侀┈鍎胯窇鐨勫揩锛屽張寰楅┈鍎夸笉鍚冭崏(瑙嗚娆洪獥)<br><strong>鏍稿績鍏抽敭鎴愬憳</strong> 閮藉簲璇ュ<strong>鎬ц兘鏍囧噯 </strong>姒傚康娓呮櫚锛?br>鎬ц兘鏄骇鍝佺殑鐢熷懡绾匡紝涓嶈兘鍙涪缁欑▼搴忓氨涓嶇浜?</p> </div>   <div class="root-cause" style="position: relative;"> <span class="badge">TA 鍏抽敭宀椾綅</span> <p class="text"> 鏍稿績缁勭粐寤鸿 鈥斺€?strong>TA 浣撶郴鐨勭郴缁熷寲寤鸿</strong>锛歍A鏄墦閫氱摱棰堢殑鍏抽敭鎵€鍦?<br><br>TA: 鍒跺畾鏍囧噯锛岀洃鎺ф爣鍑嗭紝澶嶇洏鏍囧噯锛屼慨缁冮殰鐪兼硶</p> </div> <section class="section shell" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">02.5</span> <h3 style="margin-top:12px;">绗?~3鏈?/h3> </div> <div> <h2 class="section-title">鎺ㄨ繘瀹炵幇鈥滃洟闃熶綔鎴樻爣鍑嗗寲鈥?/h2> <p class="section-lede">涓昏鐩爣锛歍A&鑳借嚜涓诲悎鐞嗙殑鎺ㄨ繘浠ヤ笅浠诲姟椤?/p> </div> </div> <figure class="v2-image-card wide"> <img src="img/20260506-192107.png" loading="lazy" alt="宸ヤ笟鍖栦环鍊肩ず鎰?> <figcaption> <h3>鏄庣‘璧勪骇楠屾敹鏍囧噯 </h3> <p> 鏉愯川銆佹ā鍨嬨€丩OOKDEV</p> </figcaption> </figure> <div class="v2-image-grid"> <figure class="v2-image-card"> <img src="assets/videoframe_5063.png" loading="lazy" alt="鎬ц兘璇婃柇绀烘剰"> <figcaption> <h3>椤圭洰搴曞骇锛氭€ц兘鍜屾爣鍑嗘墦绋?/h3> <p>绋嬪簭涓嶇敤鍐嶅弽澶嶈锛屽叧閿矖浣嶄汉鍛樺凡娓呮櫚鐨勭煡閬撲粈涔堜笢瑗挎€庝箞鍋?/p> </figcaption> </figure> <figure class="v2-image-card"> <img src="img/20260427-145624.jpg" loading="lazy" alt="宸ュ叿閾剧ず鎰?> <figcaption> <h3>鏁堟灉鏍囨潌锛氭帹鍔ㄧ敾闈㈠惛寮曞姏鈥滃仛楂樼骇鈥?/h3> <p>鐢ㄦ爣鏉嗘牱渚嬫帹鍔ㄨ鑹层€佸満鏅€佸厜鐓с€佸悗澶勭悊鐨勭粺涓€瀹＄編鍜屾妧鏈爣鍑?/p> </figcaption> </figure> <figure class="v2-image-card"> <img src="img/20260427-160901.png" loading="lazy" alt="娴佺▼鍗忎綔绀烘剰"> <figcaption> <h3>鎬ц兘鐩戞帶鏈哄埗锛氭妸闂鍓嶇疆鍒扮敓浜х幆鑺?</h3> <p>鍚屽睆闈㈡暟銆丏rawCall銆侀€忔槑 overdraw銆佹潗璐ㄥ鏉傚害閮借鍙樻垚鍙鏌ヨ鍒?/p> </figcaption> </figure> <figure class="v2-image-card"> <img src="img/20260427-152859.png" loading="lazy" alt="闀挎湡宸ヤ笟鍖栦环鍊肩ず鎰?> <figcaption> <h3>闀挎湡浠峰€硷細鎶婄粡楠屾矇娣€鎴愰」鐩祫浜?/h3> <p>鐧界毊涔︺€佸伐鍏烽摼銆佸煿璁拰澶嶇洏鏈哄埗锛屾渶缁堢暀涓嬬殑鏄洟闃熻嚜宸辩殑闀挎湡鑳藉姏銆?/p> </figcaption> </figure> <figure class="v2-image-card wide"> <img src="img/4_41.png" loading="lazy" alt="宸ヤ笟鍖栦环鍊肩ず鎰?> <figcaption> <h3>闃舵鏀剁泭锛氭寲鎺樺洟闃熶腑鐨凾A灏忚兘鎵?</h3> <p> 浠庡悇缁村害鎵惧埌涓撶簿浜哄憳</p> </figcaption> </figure> </div> </section>  <section class="section shell" id="roadmap" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">绗笁閮ㄥ垎</span> <h3 style="margin-top:12px;">绗?~6鏈?/h3> <p style="font-size:13px;color:var(--ink-500);margin-top:10px;line-height:1.55;"></p> </div> <div> <h2 class="section-title"><em>鎻愬崌鏁堢巼锛屾墦纾ㄦ晥鏋?/em></h2> <p class="section-lede"> PPG鐢熸垚宸ュ叿閾惧畬鍠勶紝瀵规爣绔炲搧锛屾寲鎺樻晥鏋滄綔鍔?/p> </div> </div>  <figure class="heatmap-figure" aria-label="鍚屽睆闈㈡暟鐑姏鍒嗗竷绀烘剰" style="position: relative;"> <div class="heatmap-head"> <div> <div class="heatmap-title"> 鍦ㄦ牳蹇冨尯鍩熷仛鍑烘爣鏉嗘晥鏋?/div> <div class="heatmap-eyebrow"></div> </div> <div class="heatmap-legend"> <span class="heatmap-legend-label">瑙掕壊 NPR + PBR 鍦烘櫙铻嶅悎</span> </div> </div> <div class="heatmap-body" style="position: relative;"> <img src="img/HTGame_tctCQAwLJ7.jpg" loading="lazy"> <div class="heatmap-side" style="position: relative;"> <div class="heatmap-stat" style="position: relative;"> <span class="heatmap-stat-lab">4~6Month</span> <span class="heatmap-stat-val">涓昏鎶€鏈寚鏍?/span> <span class="heatmap-stat-sub">CORE TECH</span> <span class="heatmap-stat-val benchmark">瀹ゅ唴 GI / 闂存帴鍏夊眰娆?/span> <span class="heatmap-stat-sub">瀹ゅ唴鐑樼剻鍏夌収銆丩ight Probe 涓?Lumen 绫诲姩鎬?GI 淇濇寔绌洪棿灞傛銆?/span> <div class="heatmap-bar"> <span style="width:92%;">閲嶈</span> </div> </div> <div class="heatmap-stat" style="position: relative;"> <span class="heatmap-stat-lab">BENCHMARK</span> <span class="heatmap-stat-val benchmark">鍦伴潰鍙嶅皠 / SSR + Reflection Probe</span> <span class="heatmap-stat-sub">鍦伴潰鏈夋竻鏅版箍娑﹀弽灏勪笌楂樺厜鎷変几锛屼娇鐢ㄧ矖绯欏害鎺у埗鐨?PBR 鍙嶅皠锛涜繎鏅緷璧?SSR锛岀己澶卞尯鍩熺敱 Reflection Probe 琛ラ綈</span> <div class="heatmap-bar"> <span style="width:67%;background:var(--ink-700);"></span> </div> </div> <div class="heatmap-stat" style="position: relative;"> <span class="heatmap-stat-lab">SHADOW</span> <span class="heatmap-stat-val">鍔ㄦ€侀槾褰?/ 鎺ヨЕ闃村奖</span> <span class="heatmap-stat-sub">瑙掕壊涓庣幆澧冮棿鎺ヨЕ闃村奖锛屽寮鸿创鍦版劅锛涜繎鏅娇鐢ㄥ疄鏃堕槾褰辨垨 Contact Shadow锛岃繙澶勯潤鎬佺墿浠朵娇鐢ㄧ儤鐒欓槾褰便€?/span> </div> </div> </div> </figure> </section>  <section class="section shell" id="roi" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">绗洓閮ㄥ垎</span> <h3 style="margin-top:12px;">鍏跺畠<br>娼滃湪浠峰€?br>鎬荤粨</h3> </div> <div> <h2 class="section-title">棰勫垽鏃╂湡闂锛岃閬夸笉闈犺氨鏂规</h2> <p class="section-lede"> 鍑忓皯杩斿伐涓庢氮璐癸紝鍔犻€熼」鐩紑鍙戝懆鏈?/p> </div> </div> <div class="roi" style="position: relative;"> <div class="roi-figure"> <div style="display:flex;justify-content:space-between;align-items:baseline;"> <span class="axis">鏈堝害缇庢湳鎴愭湰</span> <span class="axis" style="color:rgba(255,255,255,.7);">鍗曚綅锛氱浉瀵瑰€?/span> </div> <div class="roi-stack"> <div class="roi-row"> <span class="lab">棰勪及鍑忓皯娴佺▼鎹熻€?/span> <div class="bar"> <span style="width:25%;"></span> </div> <span class="num">20鈥?0%</span> </div> </div> <div style="margin-top:32px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.18);"> <span class="axis">鎹熻€楁潵婧?/span> <div class="loss-viz" style="margin-top:12px;"> <span style="height:30%;"></span> <span style="height:0%;" class="loss"></span> <span style="height:0%;" class="loss"></span> <span style="height:42%;"></span> <span style="height:0%;" class="loss"></span> <span style="height:0%;"></span> <span style="height:0%;" class="loss"></span> <span style="height:50%;" class="loss"></span> <span style="height:0%;"></span> <span style="height:0%;" class="loss"></span> <span style="height:0%;" class="loss"></span> <span style="height:30%;"></span> </div> <div style="display:flex;justify-content:space-between;margin-top:10px;font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.1em;"> <span>杩斿伐</span> <span>鍗忎綔鎽╂摝</span> <span>鏂瑰悜鍙嶅</span> <span>鏍囧噯缂哄け</span> </div> </div> <div class="total"> <div> <div class="total-lab">鏈堝害鎹熻€?路鍑忓皯</div> <div style="font-size:13px;color:rgba(255,255,255,.55);margin-top:4px;">鏈夊疄鎴樻暟鎹彲渚?/div> </div> <div class="total-val">鍑忓皯鏁扮櫨涓囩骇鎴愭湰</div> </div> </div> <div class="roi-prose"> <h3>鎶婇殣鎬т骇鑳芥氮璐硅拷鍥?/h3> <p>杩戝嚑骞村湪澶氫釜椤圭洰涓紝鍙備笌浜嗗ぇ閲忕殑<br>闄嶆湰澧炴晥绫诲伐浣?/p> <p>鎸佺画鍗婂勾鐨勪紭鍖栵紝瀵规垚鏈疮璁℃槸涓€涓浉褰撳彲瑙傜殑鏁板瓧銆?/p> <p>鎻愬崌澹皵鍜屼俊蹇冿細<br>澧炲姞鏁堢巼鍜岀Н鏋佹€?/p> <div class="pull"> 绯荤粺鎬х殑浣撶郴寤鸿锛屾湰璐ㄤ笂鏄湪鎶婅繖閮ㄥ垎闅愭€ф崯鑰楄浆鍖栦负鏄炬€х殑鐢熶骇鍔涖€?strong style="font-style:normal;">鏂规璐圭敤杩滀綆浜庢綔鍦ㄧ殑鑺傜渷绌洪棿銆?/strong> </div> </div> </div> </section> <section class="section shell" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">02</span> <h3 style="margin-top:12px;">浜や粯浠€涔?/h3> </div> <div> <h2 class="section-title">鍙惤涓嬫潵鐨?nbsp;<em>椤圭洰鏍囧噯棰勪及</em></h2> </div> </div> <div class="v2-deliverables"> <div class="v2-dark"> <h2>鎶娾€滄劅瑙変笉瀵光€濆彉鎴愭爣鍑嗐€佸伐鍏峰拰妫€鏌ラ」銆?/h2> <p> 鍚堜綔鐨勫叧閿笉鏄姒傚康锛岃€屾槸璁╁埗浣滀汉鑳介獙鏀讹紝璁╃編鏈兘鐓х潃鍋氾紝璁╃▼搴忚兘鎺ュ叆锛岃鐗堟湰鑳芥寔缁拷韪€?</p> </div> <ul class="v2-list"> <li>銆婄珵鍝?TA 鎶€鏈媶瑙ｆ姤鍛娿€嬶細鏄庣‘绔炲搧涓轰粈涔堝己銆佹垜浠樊鍦ㄥ摢閲屻€?/li> <li>銆婇」鐩敾闈㈣瘖鏂€嬶細鎴浘鏍囨敞銆侀棶棰樺垎绾с€佷紭鍖栦紭鍏堢骇銆?/li> <li>銆奣A 鐧界毊涔︺€嬶細璧勪骇銆佹潗璐ㄣ€佺伅鍏夈€佺壒鏁堛€佹€ц兘銆佸钩鍙板垎妗ｆ爣鍑嗐€?/li> <li>銆婃€ц兘棰勭畻琛ㄣ€嬶細闈㈡暟銆丏rawCall銆佹潗璐ㄥ鏉傚害銆佽创鍥俱€佸唴瀛樸€佸寘浣撱€?/li> <li>宸ュ叿鑴氭湰涓庢鏌ヨ鍒欙細鎶婅鑼冨彉鎴愯嚜鍔ㄥ寲娴佺▼銆?/li> <li>鐗堟湰澶嶇洏鏉愭枡锛氭瘡涓ゅ懆瀵归綈涓€娆℃敼鍔ㄣ€侀闄╁拰涓嬩竴姝ャ€?/li> </ul> </div> </section>  <section class="section shell" id="cooperation" style="position: relative;"> <div class="two-col" style="position: relative;"> <div class="col-aside" style="position: relative;"> <span class="section-num">绗簲閮ㄥ垎</span> <h3 style="margin-top:12px;">璧风偣涓庝繚璇?/h3> <p style="font-size:13px;color:var(--ink-500);margin-top:10px;line-height:1.55;">浠庝粯璐规妧鏈瘖鏂紑濮嬶紱濡傛灉娌′环鍊硷紝鍏ㄩ閫€杩樸€?/p> </div> <div> <h1>浠樿垂鏂规锛?br><em>鏈捣鍒版敼鍠勪綔鐢ㄥ叏棰濋€€杩樿垂鐢?/em></h1> <p class="section-lede">浠ユ寮忕殑浠樿垂鎶€鏈瘖鏂负璧风偣锛岃窡杩涜惤鍦?/p> </div> </div> <div class="coop" style="position: relative;"> <div class="coop-cell"> <div class="lab">鏈嶅姟鏂瑰紡</div> <h2>鐜板満 + 杩滅▼</h2> <p>鍏抽敭鑺傜偣鐜板満鐩惤鍦帮紝闈㈠闈㈡姄鎵ц涓庤В绛旓紝鍒朵綔鏍囨潌鑼冧緥</p> </div> <div class="coop-cell"> <div class="lab">鎴戠殑鏀寔鍥㈤槦</div> <h2>澶栧寘鎸変汉澶?-<br>璧勬繁 TA + 绋嬪簭</h2> <p>澶栧寘TA浜哄姏</p> </div> <div class="coop-cell"> <div class="lab">璧风偣</div> <h2>浠樿垂鎶€鏈瘖鏂?/h2> <p>浠ヨ瘖鏂负姝ｅ紡鍚堜綔鐨勭涓€姝モ€斺€旂敤鏁版嵁寤虹珛鍏辫瘑銆?/p> </div> <div class="coop-cell"> <div class="lab">鑺傚</div> <h2>鍙屽懆鑺傜偣澶嶇洏</h2> <p>姣忎袱鍛ㄥ榻愪竴娆′氦浠樹笌澶嶇洏锛岃繃绋嬮€忔槑鍙銆?/p> </div> </div> </section>  <footer class="foot"> <div class="shell foot-inner"> <div>漏 2026 路 Technical Art Advisory 路 Confidential Memo</div> </div> </footer> </section> </section> </section> </main> <script> // Heatmap generation: 28 cols 脳 12 rows (function buildHeatmap() { const grid = document.getElementById('heatmap-grid'); if (!grid) return; const COLS = 28, ROWS = 12; // Hot zones (city-density clusters) 鈥?cx,cy,intensity,radius const zones = [ {cx: 6, cy: 4, i: 1.0, r: 5}, {cx: 14, cy: 7, i: 0.95, r: 6}, {cx: 22, cy: 5, i: 0.85, r: 4}, {cx: 19, cy: 10, i: 0.7, r: 3}, {cx: 3, cy: 9, i: 0.6, r: 3}, {cx: 25, cy: 9, i: 0.55, r: 3} ]; const palette = ['#EEF1F5', '#DDE4EC', '#C5D0DD', '#A6B5C8', '#7E8FA8', '#5A6B85', '#3E4E66', '#B89067', '#8C5A23']; const frag = document.createDocumentFragment(); for (let y = 0; y < ROWS; y++) { for (let x = 0; x < COLS; x++) { let v = 0; for (const z of zones) { const d = Math.sqrt((x - z.cx) ** 2 + (y - z.cy) ** 2); const contrib = Math.max(0, z.i * (1 - d / z.r)); v = Math.max(v, contrib); } // tiny noise for organic feel v += (Math.sin(x * 1.3 + y * 0.7) * 0.5 + 0.5) * 0.08; v = Math.min(1, v); const idx = Math.min(palette.length - 1, Math.floor(v * palette.length)); const cell = document.createElement('i'); cell.style.background = palette[idx]; frag.appendChild(cell); } } grid.appendChild(frag); })(); // Phase tabs interactivity const phases = document.querySelectorAll('.phase'); const segs = [document.getElementById('seg-1'), document.getElementById('seg-2'), document.getElementById('seg-3')]; phases.forEach(p => { p.addEventListener('click', () => { phases.forEach(x => x.classList.remove('active')); p.classList.add('active'); const idx = parseInt(p.dataset.phase, 10) - 1; segs.forEach((s, i) => s.classList.toggle('active', i === idx)); }); }); (function setupMemoEditor() { const main = document.querySelector('main'); if (!main) return; const toolbar = document.createElement('div'); toolbar.className = 'memo-edit-toolbar'; toolbar.innerHTML = ` <button type="button" data-edit-toggle>缂栬緫鏂囧瓧</button> <button type="button" data-layout-toggle>鎷栨嫿甯冨眬</button> <button type="button" data-save>淇濆瓨鍒版枃浠?/button> <button type="button" data-download>瀵煎嚭 HTML</button> <button type="button" data-reset>杩樺師甯冨眬</button> <span class="memo-status" data-status>鏈繚瀛?/span> `; document.body.appendChild(toolbar); const editButton = toolbar.querySelector('[data-edit-toggle]'); const layoutButton = toolbar.querySelector('[data-layout-toggle]'); const saveButton = toolbar.querySelector('[data-save]'); const downloadButton = toolbar.querySelector('[data-download]'); const resetButton = toolbar.querySelector('[data-reset]'); const status = toolbar.querySelector('[data-status]'); const editableSelector = 'h1,h2,h3,h4,h5,h6,p,li,span,strong,em,div.lab,div.val,div.sub,div.quoted,div.kpi-value,div.kpi-sub,div.kpi-foot,figcaption'; const noEditSelector = '.memo-edit-toolbar,.memo-edit-toolbar *,script,style,img,figure,.heatmap-scale,.heatmap-scale *,.brand-mark,.brand-mark *'; const draggableSelector = '.section,.two-col,.col-aside,.case-banner,.heatmap-figure,.heatmap-body,.heatmap-side,.heatmap-stat,.root-cause,.directions,.direction,.cases,.case-card,.roadmap,.coop,.roi,.value-list,.guarantee,figure'; let dirty = false; function cleanEditorChrome(root) { root.querySelectorAll('.memo-drag-handle').forEach(el => el.remove()); root.querySelectorAll('[contenteditable]').forEach(el => el.removeAttribute('contenteditable')); root.classList.remove('memo-editing'); root.classList.remove('memo-layout-editing'); root.querySelectorAll('.memo-draggable-block').forEach(el => { el.classList.remove('memo-draggable-block', 'memo-dragging'); el.removeAttribute('data-memo-drag'); }); } function getCleanMainHtml() { const clone = main.cloneNode(true); cleanEditorChrome(clone); return clone.innerHTML.trim(); } function setStatus(message, isError = false) { status.textContent = message; status.style.color = isError ? '#b42318' : ''; } function markDirty() { dirty = true; setStatus('鏈夋湭淇濆瓨淇敼'); } function setEditMode(enabled) { document.body.classList.toggle('memo-editing', enabled); editButton.classList.toggle('active', enabled); editButton.textContent = enabled ? '閫€鍑虹紪杈? : '缂栬緫鏂囧瓧'; main.querySelectorAll(editableSelector).forEach(el => { if (el.closest(noEditSelector)) return; el.setAttribute('contenteditable', enabled ? 'true' : 'false'); }); } function setLayoutMode(enabled) { document.body.classList.toggle('memo-layout-editing', enabled); layoutButton.classList.toggle('active', enabled); layoutButton.textContent = enabled ? '閫€鍑烘嫋鎷? : '鎷栨嫿甯冨眬'; } function bindPhaseTabs() { const currentPhases = main.querySelectorAll('.phase'); const currentSegs = [document.getElementById('seg-1'), document.getElementById('seg-2'), document.getElementById('seg-3')]; currentPhases.forEach(p => { p.addEventListener('click', () => { currentPhases.forEach(x => x.classList.remove('active')); p.classList.add('active'); const idx = parseInt(p.dataset.phase, 10) - 1; currentSegs.forEach((s, i) => { if (s) s.classList.toggle('active', i === idx); }); }); }); } function makeBlocksDraggable() { const blocks = [...main.querySelectorAll(draggableSelector)] .filter(el => !el.closest('.memo-edit-toolbar') && el !== main); blocks.forEach((el, index) => { if (el.dataset.memoDrag === '1') return; el.dataset.memoDrag = '1'; el.classList.add('memo-draggable-block'); if (getComputedStyle(el).position === 'static') el.style.position = 'relative'; const handle = document.createElement('div'); handle.className = 'memo-drag-handle'; handle.textContent = index < 12 ? '鎷栧姩妯″潡' : '鎷栧姩'; el.appendChild(handle); let startX = 0, startY = 0, baseX = 0, baseY = 0; handle.addEventListener('pointerdown', event => { if (!document.body.classList.contains('memo-layout-editing')) return; event.preventDefault(); event.stopPropagation(); el.classList.add('memo-dragging'); handle.setPointerCapture(event.pointerId); startX = event.clientX; startY = event.clientY; baseX = Number(el.dataset.dragX || 0); baseY = Number(el.dataset.dragY || 0); }); handle.addEventListener('pointermove', event => { if (!el.classList.contains('memo-dragging')) return; const next = { x: baseX + event.clientX - startX, y: baseY + event.clientY - startY }; el.dataset.dragX = String(next.x); el.dataset.dragY = String(next.y); el.style.transform = `translate(${next.x}px, ${next.y}px)`; markDirty(); }); handle.addEventListener('pointerup', event => { if (!el.classList.contains('memo-dragging')) return; el.classList.remove('memo-dragging'); handle.releasePointerCapture(event.pointerId); markDirty(); }); }); } async function saveToFile() { const html = getCleanMainHtml(); setStatus('姝ｅ湪淇濆瓨...'); try { const response = await fetch('/save-memo', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ mainHtml: html }) }); const result = await response.json().catch(() => ({})); if (!response.ok) throw new Error(result.error || '淇濆瓨鏈嶅姟涓嶅彲鐢?); dirty = false; setStatus('宸插啓鍥?HTML 鏂囦欢'); } catch (err) { setStatus('鏈繛鎺ヤ繚瀛樻湇鍔★紝宸叉敼涓轰笅杞?HTML', true); downloadHtml(); } } function downloadHtml() { const clone = document.documentElement.cloneNode(true); const cloneMain = clone.querySelector('main'); if (cloneMain) cloneMain.innerHTML = getCleanMainHtml(); cleanEditorChrome(clone); const html = '<!DOCTYPE html>\n' + clone.outerHTML; const blob = new Blob([html], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'TA 璇婃柇澶囧繕褰?edited.html'; a.click(); URL.revokeObjectURL(url); } function resetLayout() { main.querySelectorAll('[data-drag-x],[data-drag-y]').forEach(el => { el.style.transform = ''; el.removeAttribute('data-drag-x'); el.removeAttribute('data-drag-y'); }); markDirty(); } makeBlocksDraggable(); bindPhaseTabs(); setEditMode(false); setLayoutMode(false); main.addEventListener('input', event => { if (event.target.closest('[contenteditable="true"]')) markDirty(); }); editButton.addEventListener('click', () => { setEditMode(!document.body.classList.contains('memo-editing')); }); layoutButton.addEventListener('click', () => { setLayoutMode(!document.body.classList.contains('memo-layout-editing')); }); saveButton.addEventListener('click', saveToFile); downloadButton.addEventListener('click', downloadHtml); resetButton.addEventListener('click', resetLayout); window.addEventListener('beforeunload', event => { if (!dirty) return; event.preventDefault(); event.returnValue = ''; }); })(); </script> <footer class="coolper-global-footer"> <div class="coolper-footer-grid"> <div class="coolper-footer-brand"> <a class="coolper-global-brand" href="./index-design.html" aria-label="返回 Coolper 首页"> <img src="./assets/coolper-logo.png" alt="Coolper"> </a> <p>AI 应用、业务系统、游戏工具链与三维数字化平台定制开发团队。</p> </div> <div class="coolper-footer-group"> <h4>服务</h4> <a href="./index-design.html#services">AI 应用开发</a> <a href="./index-design.html#services">业务系统定制</a> <a href="./index-design.html#services">三维数字化</a> </div> <div class="coolper-footer-group"> <h4>方案</h4> <a href="./index-design.html#scenarios">企业经营</a> <a href="./index-design.html#scenarios">游戏研发</a> <a href="./index-design.html#scenarios">工程空间</a> </div> <div class="coolper-footer-group"> </div> <div class="coolper-footer-group"> <h4>联系</h4> <a href="mailto:business@coolper.cc">business@coolper.cc</a> <div class="coolper-footer-qr"> <img src="./assets/wechat-qr.png" alt="Coolper 微信二维码"> <span>扫码添加 WeChat</span> </div> <a href="./index-design.html#contact">预约项目判断</a> <a href="./index-design.html">返回首页</a> </div> </div> <div class="coolper-footer-bottom"> <span>© 2026 Coolper.cc.</span> <span>Design, software, AI workflow and spatial systems.</span> </div> </footer> <script src="./ripple-bg.js" defer></script> </body> </html>