From ea47bab1008d29b7896eb22f4cbdee922e610213 Mon Sep 17 00:00:00 2001
From: Dai0814 <3490199389@qq.com>
Date: Wed, 4 Nov 2026 14:34:53 +0800
Subject: [PATCH] =?UTF-8?q?style(portal):=20=E6=A0=B8=E5=BF=83=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B=E6=94=B9=E4=B8=BA=E6=B7=B1=E8=89=B2=E5=BC=BA=E8=B0=83?=
 =?UTF-8?q?=E5=8C=BA=E5=9D=97=EF=BC=8C=E5=B9=B6=E5=89=8D=E7=A7=BB=E5=88=B0?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E5=8A=9F=E8=83=BD=E4=B9=8B=E5=89=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈"上方没有核心能力重点突出"。原因是原实现里
核心能力用的是 p-section--alt（浅灰底），而它相邻的产品功能是白底、
项目列表也是浅灰底，三者色阶接近，深色上没有形成视觉断点，
区块在页面里读起来和普通段落没有区别。

改动
- 新增 .p-section--deep 变体：浅色主题下用 #0d1220 近黑底 +
  顶部靛蓝径向光晕 + 一道渐变高光线，卡片改半透明白
- 核心能力改用该变体，并从产品功能之后移到之前：
  项目 → 核心能力（深色）→ 产品功能 → 界面预览
  深色块夹在项目列表与产品功能之间，形成明显的节奏断点
- 产品功能改用 p-section--alt，与前后白底交替
- 暗色主题下强调区不能用"压深"（页面底已是 #0c0f16），
  改用 #161b2c 冷灰蓝 + 更强光晕，靠提亮形成层次

验证
- 构建 13 页，256 条引用 0 失效
- 浏览器实测区块顺序：hero → projects → core → features → preview
  → foundation → howtheyfit → docs → cta
- 浅色 / 暗色两套主题均截图核对，强调区都能跳出来
---
 .gitignore                               |   1 +
 .vitepress/theme/components/HomePage.vue |  43 ++++-----
 .vitepress/theme/styles/portal.css       | 107 +++++++++++++++++++++++
 3 files changed, 130 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2137b15..6315d6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ dist
 .vitepress/dist-build*
 .vitepress/final
 .vitepress/v2
+.vitepress/v3
diff --git a/.vitepress/theme/components/HomePage.vue b/.vitepress/theme/components/HomePage.vue
index 22099f7..3bbd436 100644
--- a/.vitepress/theme/components/HomePage.vue
+++ b/.vitepress/theme/components/HomePage.vue
@@ -70,8 +70,29 @@ import {
       </div>
     </section>
 
+    <!-- 核心能力 -->
+    <section class="p-section p-section--deep" id="core">
+      <div class="p-wrap">
+        <header class="p-head">
+          <span class="p-eyebrow">CORE CAPABILITIES</span>
+          <h2 class="p-title">工程层面的硬指标</h2>
+          <p class="p-desc">
+            功能列表谁都能写。这些是真正决定能不能上线、好不好维护的部分。
+          </p>
+        </header>
+
+        <div class="p-grid p-grid--4">
+          <div v-for="a in coreAbilities" :key="a.title" class="p-card ca-card">
+            <span class="ca-tag">{{ a.tag }}</span>
+            <h3 class="p-card-title">{{ a.title }}</h3>
+            <p class="p-card-text">{{ a.text }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- 产品功能 -->
-    <section class="p-section" id="features">
+    <section class="p-section p-section--alt" id="features">
       <div class="p-wrap">
         <header class="p-head">
           <span class="p-eyebrow">PRODUCT FEATURES</span>
@@ -94,26 +115,6 @@ import {
       </div>
     </section>
 
-    <!-- 核心能力 -->
-    <section class="p-section p-section--alt" id="core">
-      <div class="p-wrap">
-        <header class="p-head">
-          <span class="p-eyebrow">CORE CAPABILITIES</span>
-          <h2 class="p-title">工程层面的硬指标</h2>
-          <p class="p-desc">
-            功能列表谁都能写。这些是真正决定能不能上线、好不好维护的部分。
-          </p>
-        </header>
-
-        <div class="p-grid p-grid--4">
-          <div v-for="a in coreAbilities" :key="a.title" class="p-card ca-card">
-            <span class="ca-tag">{{ a.tag }}</span>
-            <h3 class="p-card-title">{{ a.title }}</h3>
-            <p class="p-card-text">{{ a.text }}</p>
-          </div>
-        </div>
-      </div>
-    </section>
 
     <!-- 界面预览 -->
     <section class="p-section" id="preview">
diff --git a/.vitepress/theme/styles/portal.css b/.vitepress/theme/styles/portal.css
index e2b4afc..b628980 100644
--- a/.vitepress/theme/styles/portal.css
+++ b/.vitepress/theme/styles/portal.css
@@ -919,3 +919,110 @@ html.dark .doc-project {
     display: none;
   }
 }
+
+/* ============================================================
+   强调区块 —— 深色底，用于需要跳出视觉节奏的区块
+   浅色主题下用近黑底，暗色主题下用略亮于页面底的深灰，
+   两种主题下都能形成明显层次，而不是和相邻区块同一色阶。
+   ============================================================ */
+.p-section--deep {
+  position: relative;
+  border-top: none;
+  background: #0d1220;
+  color: #e8edf7;
+  overflow: hidden;
+}
+
+.p-section--deep::before {
+  content: '';
+  position: absolute;
+  inset: -30% -10% auto;
+  height: 460px;
+  background: radial-gradient(46% 60% at 50% 0%, rgba(99, 102, 241, 0.28) 0%, transparent 72%);
+  pointer-events: none;
+}
+
+.p-section--deep > .p-wrap {
+  position: relative;
+}
+
+/* 强调区内的标题与正文反白 */
+.p-section--deep .p-eyebrow {
+  color: #a9b4ff;
+  background: rgba(129, 140, 248, 0.14);
+  border-color: rgba(129, 140, 248, 0.35);
+}
+
+.p-section--deep .p-title {
+  color: #f4f7fd;
+}
+
+.p-section--deep .p-desc {
+  color: #a8b4c9;
+}
+
+/* 强调区内的卡片：半透明白，压在深底上 */
+.p-section--deep .p-card {
+  background: rgba(255, 255, 255, 0.055);
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: none;
+}
+
+.p-section--deep .p-card:hover {
+  background: rgba(255, 255, 255, 0.075);
+  border-color: rgba(129, 140, 248, 0.5);
+  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
+}
+
+.p-section--deep .p-card-title {
+  color: #f0f4fb;
+}
+
+.p-section--deep .p-card-text {
+  color: #b0bccf;
+}
+
+.p-section--deep .ca-tag {
+  color: #b9c2ff;
+  background: rgba(129, 140, 248, 0.16);
+}
+
+/* 强调区顶部/底部加一道极细的高光线，强化分隔 */
+.p-section--deep::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.55), transparent);
+}
+
+/* 暗色主题下：页面底是 #0c0f16，强调区改用略亮的冷色并加强光晕，
+   靠"提亮"而不是"压深"来形成层次 */
+html.dark .p-section--deep {
+  background: #161b2c;
+}
+
+html.dark .p-section--deep::before {
+  height: 520px;
+  background: radial-gradient(52% 64% at 50% 0%, rgba(99, 102, 241, 0.34) 0%, transparent 70%);
+}
+
+html.dark .p-section--deep .p-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.11);
+}
+
+html.dark .p-section--deep .p-card:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(165, 174, 255, 0.55);
+}
+
+html.dark .p-section--deep .p-title {
+  color: #ffffff;
+}
+
+html.dark .p-section--deep .p-card-text {
+  color: #c2cbdb;
+}