diff --git a/tech-selection/index.html b/tech-selection/index.html index 16aca63..0da68de 100644 --- a/tech-selection/index.html +++ b/tech-selection/index.html @@ -9,16 +9,16 @@ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap'); :root { - --ink: #102d43; - --muted: #587083; - --paper: #f7f3ea; - --paper-deep: #ebe4d4; - --line: #cfd8d4; - --orange: #ee7041; - --teal: #007d78; - --lime: #b9d551; - --blue: #377fc7; - --shadow: 0 22px 55px rgba(17, 39, 56, .15); + --ink: #1b1b1b; + --muted: #5f6368; + --paper: #f7f7f8; + --paper-deep: #e6e6e9; + --line: #d4d4d8; + --orange: #e20074; + --teal: #1f1f1f; + --lime: #e20074; + --blue: #4b4b50; + --shadow: 0 22px 55px rgba(27, 27, 27, .16); } * { box-sizing: border-box; } @@ -78,8 +78,8 @@ .page.lime { border-color: var(--lime); } @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .eyebrow { margin: 0 0 11px; color: var(--teal); font-family: "DM Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } - .orange .eyebrow { color: #bc4d25; } - .blue .eyebrow { color: #2769aa; } + .orange .eyebrow { color: #a00052; } + .blue .eyebrow { color: #4b4b50; } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 920px; margin-bottom: 18px; font-size: clamp(34px, 5vw, 62px); line-height: 1.12; letter-spacing: 0; } h2 { max-width: 760px; margin-bottom: 26px; font-size: clamp(28px, 4vw, 46px); line-height: 1.18; letter-spacing: 0; } @@ -92,7 +92,7 @@ .decision strong { display: block; margin: 26px 0 12px; font-size: clamp(32px, 4.4vw, 55px); line-height: 1; } .decision p { max-width: 500px; margin-bottom: 0; color: #d6e2e8; line-height: 1.7; } .facts { display: grid; gap: 1px; background: var(--line); } - .fact { padding: 17px 20px; background: #f1f4ec; } + .fact { padding: 17px 20px; background: #ffffff; } .fact span { display: block; color: var(--muted); font-size: 12px; } .fact b { display: block; margin-top: 5px; font-family: "DM Mono", monospace; font-size: 20px; } .architecture { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } @@ -110,16 +110,16 @@ .callout { margin-top: 24px; padding: 18px 21px; border-left: 4px solid var(--orange); color: #3d5263; background: #fff0e8; line-height: 1.7; } .bridge { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .bridge-way { padding: 21px; border: 1px solid var(--line); } - .bridge-way.good { border-color: var(--teal); background: #eef8f4; } - .bridge-way.risk { border-color: #edb49f; background: #fff5ef; } + .bridge-way.good { border-color: var(--teal); background: #f3f3f4; } + .bridge-way.risk { border-color: #e20074; background: #fff0f7; } .bridge-way h3 { display: flex; align-items: center; gap: 8px; } .tag { display: inline-block; padding: 2px 6px; color: white; background: var(--teal); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 400; } .risk .tag { background: var(--orange); } .bridge-way p { margin-bottom: 0; color: #425b6c; font-size: 14px; line-height: 1.7; } .capabilities { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } - .capability { min-height: 84px; padding: 14px; border-top: 3px solid var(--blue); background: #eef4fb; font-size: 14px; font-weight: 700; } - .capability:nth-child(2n) { border-color: var(--orange); background: #fff0e8; } - .capability:nth-child(3n) { border-color: var(--teal); background: #eaf6f1; } + .capability { min-height: 84px; padding: 14px; border-top: 3px solid var(--blue); background: #f1f1f3; font-size: 14px; font-weight: 700; } + .capability:nth-child(2n) { border-color: var(--orange); background: #fff0f7; } + .capability:nth-child(3n) { border-color: var(--teal); background: #eeeeef; } .numbers { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 1px; background: var(--line); } .number { min-height: 175px; padding: 24px; background: #fffdf8; } .number b { display: block; color: var(--teal); font-family: "DM Mono", monospace; font-size: clamp(34px, 5vw, 61px); line-height: 1; } @@ -133,6 +133,22 @@ .case-copy small { color: var(--teal); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .06em; } .case-copy h3 { margin: 9px 0 7px; } .case-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } + .page-note { max-width: 820px; margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.75; } + .signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } + .signal { min-height: 150px; padding: 20px; border-top: 4px solid var(--ink); background: #f1f1f3; } + .signal.emphasis { color: white; border-color: var(--orange); background: var(--ink); } + .signal small { display: block; margin-bottom: 16px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .06em; } + .signal.emphasis small { color: #ffb5d9; } + .signal b { display: block; margin-bottom: 8px; font-size: 18px; } + .signal p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } + .signal.emphasis p { color: #f3d8e6; } + .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); } + .timeline div { min-height: 145px; padding: 18px; background: #fff; } + .timeline b { display: block; margin-bottom: 12px; color: var(--orange); font-family: "DM Mono", monospace; font-size: 14px; } + .timeline p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } + .decision-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } + .decision-item { padding: 18px; border-left: 4px solid var(--orange); background: #fff0f7; line-height: 1.65; } + .decision-item b { display: block; margin-bottom: 5px; } .pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; } .pipeline-step { position: relative; min-height: 155px; padding: 20px; border: 1px solid var(--line); } .pipeline-step b { display: block; margin-bottom: 12px; font-family: "DM Mono", monospace; font-size: 12px; } @@ -170,11 +186,11 @@ .meta { display: none; } .shell { width: min(100% - 28px, 680px); margin-top: 14px; } .page { min-height: 0; padding: 30px 20px; } - .key-decision, .bridge, .split-note, .finale, .case-studies { grid-template-columns: 1fr; } + .key-decision, .bridge, .split-note, .finale, .case-studies, .signal-grid, .decision-list { grid-template-columns: 1fr; } .case-study { grid-template-columns: 128px 1fr; } .architecture { grid-template-columns: repeat(2, 1fr); } .capabilities { grid-template-columns: repeat(2, 1fr); } - .numbers { grid-template-columns: 1fr; } + .numbers, .timeline { grid-template-columns: 1fr; } .pipeline { grid-template-columns: repeat(2, 1fr); } .cost-row { grid-template-columns: 92px 1fr; } .cost-impact { grid-column: 2; } @@ -192,77 +208,31 @@
- - - - - - +
-
-

Chapter 01 / Executive Summary

-

面向五年周期的
独立 App 技术路线选择。

-

Continental Retail APP 将整合并关停六套小程序。首版只面向 Android 与 iOS;在十一种候选技术栈中,核心挑战仍是系统级能力、第三方网页集成与长期工程可控性。

-
-
-
ASSESSMENT DECISION推荐 Flutter

首版投入与 uni-app x 基本持平;真正的差异将出现在未来五年新增系统能力、自动化交付和底层问题的处置能力上。

- -
-
- - - - - - - - - - +

0.1 / Executive Summary

面向五年周期的
独立 App 技术路线选择。

Continental Retail APP 将整合并关停六套小程序。首版只面向 Android 与 iOS;评估重点不在“画页面快不快”,而在系统能力、第三方网页集成与长期工程主动权。

ASSESSMENT DECISION推荐 Flutter

首版投入与 uni-app x 基本持平。真正拉开差距的是后续系统级需求、自动化交付和运行时问题的处置空间。

+ + + + + + + + + + + + + + + + + + + +