diff --git a/deploy/landing/hero-full.jpg b/deploy/landing/hero-full.jpg
new file mode 100644
index 0000000..e0595d6
Binary files /dev/null and b/deploy/landing/hero-full.jpg differ
diff --git a/deploy/landing/hero.jpg b/deploy/landing/hero.jpg
deleted file mode 100644
index 9d4d364..0000000
Binary files a/deploy/landing/hero.jpg and /dev/null differ
diff --git a/deploy/landing/index.html b/deploy/landing/index.html
index df81273..3b79094 100644
--- a/deploy/landing/index.html
+++ b/deploy/landing/index.html
@@ -50,12 +50,21 @@ a { color: inherit; text-decoration: none; }
/* ===== 整体：上 / 中 / 下 三块，中块自适应 ===== */
.layout { display: flex; flex-direction: column; height: 100vh; }
-/* ===== 背景：白底 + 右上角极淡的品牌蓝光晕（保持明亮，不搞暗色）===== */
+/* ===== 背景：一张全屏产品主视觉图（cover 填满，永不变形）=====
+ 图是专门为这个布局生成的：柜子在画面右侧约四成，左侧是纯净负空间。
+ ::after 再叠一层从左到右渐淡的白色轻纱，保证左侧文字对比度。 */
.bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
- background:
- radial-gradient(900px 620px at 82% 18%, rgba(3,102,230,0.055), transparent 68%),
- radial-gradient(700px 480px at 96% 88%, rgba(3,102,230,0.035), transparent 70%);
+ background: url("hero-full.jpg") no-repeat center center;
+ background-size: cover;
+}
+.bg::after {
+ content: ''; position: absolute; inset: 0;
+ background: linear-gradient(to right,
+ rgba(255,255,255,0.62) 0%,
+ rgba(255,255,255,0.34) 38%,
+ rgba(255,255,255,0.06) 58%,
+ transparent 72%);
}
/* ===== TOP: 顶部导航 ===== */
@@ -78,20 +87,30 @@ a { color: inherit; text-decoration: none; }
.top-link--cta { background: var(--ink); color: #fff; }
.top-link--cta:hover { background: #23272F; color: #fff; }
-/* ===== MID: 左文右图 分栏 ===== */
+/* ===== MID: 全屏图上叠一块毛玻璃文案面板 ===== */
.mid {
position: relative; z-index: 1;
flex: 1; min-height: 0;
display: flex; align-items: center;
- gap: 40px;
- padding: 0 64px;
+ padding: 0 56px;
}
-/* ---- 左：文案 ---- */
+/* ---- 毛玻璃面板 ----
+ 半透明白底 + 背景模糊：背后的柜子与渐变会隐约透出来，
+ 边界从"贴图的硬边"变成"玻璃的质感"——这是消除突兀感的关键。 */
.copy {
- flex: 1 1 52%;
- max-width: 620px;
+ width: min(720px, 46vw);
+ padding: 40px 44px;
display: flex; flex-direction: column; gap: 20px;
+ background: rgba(255,255,255,0.58);
+ -webkit-backdrop-filter: blur(26px) saturate(1.5);
+ backdrop-filter: blur(26px) saturate(1.5);
+ border: 1px solid rgba(255,255,255,0.72);
+ border-radius: 22px;
+ box-shadow:
+ 0 24px 60px rgba(15,20,25,0.10),
+ 0 2px 8px rgba(15,20,25,0.04),
+ inset 0 1px 0 rgba(255,255,255,0.85);
}
/* 小标签：品牌蓝 + 呼吸圆点 */
@@ -181,35 +200,6 @@ h1 .accent { color: var(--brand); }
.stat-num .unit { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.stat-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 5px; }
-/* ---- 右：产品图 ---- */
-.hero {
- position: relative;
- flex: 1 1 48%;
- height: 100%;
- display: flex; align-items: center; justify-content: center;
-}
-/* 柜子背后的柔光 + 地面投影，给纯白背景加点纵深（仍是浅色）*/
-.hero::before {
- content: ''; position: absolute; z-index: 0;
- width: 78%; aspect-ratio: 1;
- border-radius: 50%;
- background: radial-gradient(circle, rgba(3,102,230,0.10), transparent 62%);
-}
-.hero img {
- position: relative; z-index: 1;
- /* ⛔ 绝不用 background-size:100% 100%（那会把 1.78 的图横向拉爆）；
- contain = 保持原始宽高比，永不变形 */
- max-width: 100%; max-height: 100%;
- width: auto; height: auto;
- object-fit: contain;
- /* 把图片的硬边框**融进页面白底**：径向遮罩让中心（柜体）保持不透明、四缘渐变透明。
- 否则 4:3 的图贴在白底上会有一道明显的"贴图"竖直硬边。
- 椭圆半径按柜体在画面里的占比取（柜体约占宽 50%、高 84%）⇒ 柜体完全在实心区内，
- 只有背景在边缘化开。图片自带地面投影，故移除 CSS 投影（否则影子会被遮罩切断）。 */
- -webkit-mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
- mask-image: radial-gradient(ellipse 72% 86% at 50% 50%, #000 58%, transparent 92%);
-}
-
/* ===== BOT: 底部备案 ===== */
.bot {
position: relative; z-index: 2;
@@ -222,14 +212,18 @@ h1 .accent { color: var(--brand); }
/* ===== 自适应：窄屏时收紧，保证仍然单屏不滚动 ===== */
@media (max-width: 1180px) {
- .mid { padding: 0 40px; gap: 28px; }
- .stats { gap: 28px; }
+ .mid { padding: 0 32px; }
+ .copy { width: min(640px, 62vw); padding: 32px 34px; }
+ .stats { gap: 26px; }
.stat-num { font-size: 26px; }
}
-/* 到更窄/更矮时让图片让位给文字，避免文字被挤出屏幕 */
-@media (max-width: 900px), (max-height: 620px) {
- .hero { display: none; }
- .copy { flex-basis: 100%; max-width: 720px; }
+/* 更窄/更矮时：面板进一步收紧，并减弱背后的白纱让图更多露出来 */
+@media (max-width: 820px), (max-height: 600px) {
+ .copy { width: 100%; padding: 26px 26px; }
+ .bg::after {
+ background: linear-gradient(to right,
+ rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.42) 55%, transparent 85%);
+ }
}
@@ -289,11 +283,6 @@ h1 .accent { color: var(--brand); }
-
-
-
-
-