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/app.html
+++ b/frontend/app.html
@@ -6120,6 +6120,128 @@
    }
  </style>

-  <script src="app.js?v=20260212006"></script>
+  <style>
+    /* ===== App True Large-Screen Scaling v2 ===== */
+    @media (min-width: 1920px) {
+      body.enterprise-netdisk {
+        font-size: 16px;
+      }
+
+      body.enterprise-netdisk .navbar {
+        min-height: 76px;
+        padding: 12px 26px;
+      }
+
+      body.enterprise-netdisk .main-container {
+        max-width: 1840px;
+      }
+
+      body.enterprise-netdisk .card {
+        padding: 26px;
+      }
+
+      body.enterprise-netdisk .files-view-card {
+        padding: 16px 18px 14px;
+      }
+
+      body.enterprise-netdisk .files-content-head.files-content-head-compact {
+        min-height: 48px;
+      }
+
+      body.enterprise-netdisk .files-content-head.files-content-head-compact .files-content-title {
+        font-size: 15px;
+      }
+
+      body.enterprise-netdisk .files-head-action-btn,
+      body.enterprise-netdisk .files-head-view-toggle .btn {
+        font-size: 14px;
+        padding: 8px 13px;
+      }
+
+      body.enterprise-netdisk .files-head-usage-progress {
+        width: 360px;
+        height: 30px;
+      }
+
+      body.enterprise-netdisk .files-head-usage-progress-text {
+        font-size: 13px;
+      }
+
+      body.enterprise-netdisk .files-container {
+        min-height: 420px;
+      }
+
+      body.enterprise-netdisk .file-grid {
+        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
+        gap: 16px;
+      }
+
+      body.enterprise-netdisk .file-grid-item {
+        min-height: 205px;
+        padding: 16px 10px 12px;
+      }
+
+      body.enterprise-netdisk .file-name {
+        font-size: 14px;
+      }
+    }
+
+    @media (min-width: 2560px) {
+      body.enterprise-netdisk {
+        font-size: 17px;
+      }
+
+      body.enterprise-netdisk .navbar {
+        min-height: 86px;
+        padding: 15px 34px;
+      }
+
+      body.enterprise-netdisk .main-container {
+        max-width: 2200px;
+      }
+
+      body.enterprise-netdisk .card {
+        padding: 32px;
+      }
+
+      body.enterprise-netdisk .files-view-card {
+        padding: 20px 24px 18px;
+      }
+
+      body.enterprise-netdisk .files-content-head.files-content-head-compact .files-content-title {
+        font-size: 17px;
+      }
+
+      body.enterprise-netdisk .files-head-action-btn,
+      body.enterprise-netdisk .files-head-view-toggle .btn {
+        font-size: 15px;
+        padding: 9px 15px;
+      }
+
+      body.enterprise-netdisk .files-head-usage-progress {
+        width: 420px;
+        height: 34px;
+      }
+
+      body.enterprise-netdisk .files-head-usage-progress-text {
+        font-size: 14px;
+      }
+
+      body.enterprise-netdisk .files-container {
+        min-height: 520px;
+      }
+
+      body.enterprise-netdisk .file-grid {
+        grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
+        gap: 18px;
+      }
+
+      body.enterprise-netdisk .file-grid-item {
+        min-height: 228px;
+      }
+    }
+  </style>
+
+  <script src="app.js?v=20260212007"></script>
 </body>
 </html>
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -16,7 +16,7 @@
    })();
  </script>
  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="landing.css?v=20260212007">
+  <link rel="stylesheet" href="landing.css?v=20260212008">
 </head>
 <body>
  <div class="page">
--- 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;
--- a/frontend/product.html
+++ b/frontend/product.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品能力 - 玩玩云</title>
  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="landing.css?v=20260212007">
+  <link rel="stylesheet" href="landing.css?v=20260212008">
 </head>
 <body>
  <div class="page">
--- a/frontend/scenes.html
+++ b/frontend/scenes.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>应用场景 - 玩玩云</title>
  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="landing.css?v=20260212007">
+  <link rel="stylesheet" href="landing.css?v=20260212008">
 </head>
 <body>
  <div class="page">
--- a/frontend/start.html
+++ b/frontend/start.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>快速开始 - 玩玩云</title>
  <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="landing.css?v=20260212007">
+  <link rel="stylesheet" href="landing.css?v=20260212008">
 </head>
 <body>
  <div class="page">