fix(ui): apply true large-screen scaling and mobile overflow safeguards

2026-02-12 20:33:36 +08:00
parent 8193101566
commit a3932747e3
6 changed files with 353 additions and 5 deletions
--- a/frontend/landing.css
+++ b/frontend/landing.css
@@ -781,6 +781,232 @@ body.theme-dark .cta-panel {
  }
 }

+
+/* ===== True Large-Screen Proportional Scaling ===== */
+@media (min-width: 1920px) {
+  :root {
+    --max-width: 1800px;
+  }
+
+  body {
+    font-size: 17px;
+  }
+
+  .container {
+    width: min(var(--max-width), calc(100% - 72px));
+  }
+
+  .site-header-inner {
+    min-height: 82px;
+  }
+
+  .brand {
+    font-size: 28px;
+  }
+
+  .top-nav {
+    font-size: 16px;
+    gap: 22px;
+  }
+
+  .btn {
+    font-size: 16px;
+    padding: 11px 18px;
+  }
+
+  .main {
+    padding: 42px 0 58px;
+  }
+
+  .hero {
+    min-height: 62vh;
+    padding: 38px;
+    gap: 34px;
+    align-items: stretch;
+  }
+
+  .hero-title {
+    font-size: clamp(50px, 3.6vw, 72px);
+    margin-bottom: 18px;
+  }
+
+  .hero-desc {
+    font-size: 18px;
+    max-width: 760px;
+    margin-bottom: 22px;
+  }
+
+  .hero-points {
+    font-size: 15px;
+    gap: 10px;
+  }
+
+  .carousel {
+    min-height: clamp(520px, 58vh, 820px);
+  }
+
+  .carousel-slide {
+    padding: 26px;
+  }
+
+  .slide-title {
+    font-size: 24px;
+  }
+
+  .slide-row {
+    font-size: 15px;
+  }
+
+  .section,
+  .page-banner {
+    padding: 28px;
+  }
+
+  .section-title {
+    font-size: 24px;
+    margin-bottom: 16px;
+  }
+
+  .feature-card,
+  .scene,
+  .matrix-card,
+  .step-item,
+  .kpi-card {
+    padding: 18px;
+  }
+
+  .feature-name,
+  .scene h3,
+  .matrix-card h3,
+  .step-content h3 {
+    font-size: 18px;
+  }
+
+  .feature-desc,
+  .scene p,
+  .matrix-card p,
+  .step-content p {
+    font-size: 15px;
+  }
+
+  .kpi-value {
+    font-size: 26px;
+  }
+
+  .footer {
+    font-size: 13px;
+    padding: 18px 0;
+  }
+}
+
+@media (min-width: 2560px) {
+  :root {
+    --max-width: 2200px;
+  }
+
+  body {
+    font-size: 19px;
+  }
+
+  .container {
+    width: min(var(--max-width), calc(100% - 96px));
+  }
+
+  .site-header-inner {
+    min-height: 94px;
+  }
+
+  .brand {
+    font-size: 32px;
+  }
+
+  .top-nav {
+    font-size: 18px;
+    gap: 26px;
+  }
+
+  .btn {
+    font-size: 18px;
+    padding: 12px 22px;
+  }
+
+  .main {
+    padding: 52px 0 72px;
+  }
+
+  .hero {
+    min-height: 66vh;
+    padding: 46px;
+    gap: 42px;
+  }
+
+  .hero-title {
+    font-size: clamp(64px, 3.6vw, 92px);
+  }
+
+  .hero-desc {
+    font-size: 21px;
+    max-width: 920px;
+  }
+
+  .hero-points {
+    font-size: 17px;
+    gap: 12px;
+  }
+
+  .carousel {
+    min-height: clamp(640px, 60vh, 960px);
+  }
+
+  .carousel-slide {
+    padding: 30px;
+  }
+
+  .slide-title {
+    font-size: 30px;
+  }
+
+  .slide-tag {
+    font-size: 14px;
+  }
+
+  .slide-row {
+    font-size: 18px;
+  }
+
+  .section,
+  .page-banner {
+    padding: 34px;
+  }
+
+  .section-title {
+    font-size: 30px;
+  }
+
+  .feature-name,
+  .scene h3,
+  .matrix-card h3,
+  .step-content h3 {
+    font-size: 22px;
+  }
+
+  .feature-desc,
+  .scene p,
+  .matrix-card p,
+  .step-content p {
+    font-size: 17px;
+  }
+
+  .kpi-value {
+    font-size: 34px;
+  }
+
+  .footer {
+    font-size: 15px;
+    padding: 22px 0;
+  }
+}
+
@media (max-width: 480px) {
  .brand {
    font-size: 19px;