缩放显示优化

src/styles/scale-adjustments.scss

@@ -20,7 +20,6 @@ body[data-scale="125"] {
 
   // 调整基础尺寸
   font-size: var(--base-font-size);
-  // line-height: var(--base-line-height);
 
   // 调整容器和间距
   .container {
@@ -38,7 +37,7 @@ body[data-scale="125"] {
 
   // 调整标题尺寸
   .section-title {
-    font-size: calc(32px * var(--inverse-scale));
+    font-size: calc(32px * var(--inverse-scale)) !important;
     margin-bottom: calc(16px * var(--inverse-scale));
   }
 
@@ -46,6 +45,46 @@ body[data-scale="125"] {
     font-size: calc(16px * var(--inverse-scale));
     margin-bottom: calc(48px * var(--inverse-scale));
   }
+
+  // Header导航调整
+  .header-content {
+    height: calc(100px * var(--inverse-scale)) !important;
+  }
+
+  .nav {
+    .nav-list {
+      gap: calc(80px * var(--inverse-scale));
+    }
+
+    .nav-link {
+      font-size: calc(26px * var(--inverse-scale)) !important;
+      height: calc(100px * var(--inverse-scale)) !important;
+      line-height: calc(100px * var(--inverse-scale)) !important;
+    }
+  }
+
+  // Footer调整
+  .contact-section {
+    .contact-item {
+      .contact-text {
+        font-size: calc(18px * var(--inverse-scale));
+      }
+
+      &.phone .contact-text {
+        font-size: calc(32px * var(--inverse-scale));
+      }
+    }
+  }
+
+  .nav-column {
+    .section-title {
+      font-size: calc(28px * var(--inverse-scale)) !important;
+    }
+
+    .nav-link {
+      font-size: calc(18px * var(--inverse-scale));
+    }
+  }
 }
 
 body[data-scale="150"] {
@@ -55,7 +94,6 @@ body[data-scale="150"] {
   --base-line-height: 1.35;
 
   font-size: var(--base-font-size);
-  // line-height: var(--base-line-height);
 
   .container {
     max-width: calc(1600px * var(--inverse-scale));
@@ -70,7 +108,7 @@ body[data-scale="150"] {
   }
 
   .section-title {
-    font-size: calc(32px * var(--inverse-scale));
+    font-size: calc(32px * var(--inverse-scale)) !important;
     margin-bottom: calc(16px * var(--inverse-scale));
   }
 
@@ -78,6 +116,46 @@ body[data-scale="150"] {
     font-size: calc(16px * var(--inverse-scale));
     margin-bottom: calc(48px * var(--inverse-scale));
   }
+
+  // Header导航调整
+  .header-content {
+    height: calc(100px * var(--inverse-scale)) !important;
+  }
+
+  .nav {
+    .nav-list {
+      gap: calc(80px * var(--inverse-scale));
+    }
+
+    .nav-link {
+      font-size: calc(26px * var(--inverse-scale)) !important;
+      height: calc(100px * var(--inverse-scale)) !important;
+      line-height: calc(100px * var(--inverse-scale)) !important;
+    }
+  }
+
+  // Footer调整
+  .contact-section {
+    .contact-item {
+      .contact-text {
+        font-size: calc(18px * var(--inverse-scale));
+      }
+
+      &.phone .contact-text {
+        font-size: calc(32px * var(--inverse-scale));
+      }
+    }
+  }
+
+  .nav-column {
+    .section-title {
+      font-size: calc(28px * var(--inverse-scale)) !important;
+    }
+
+    .nav-link {
+      font-size: calc(18px * var(--inverse-scale));
+    }
+  }
 }
 
 body[data-scale="175"] {
@@ -102,7 +180,7 @@ body[data-scale="175"] {
   }
 
   .section-title {
-    font-size: calc(32px * var(--inverse-scale));
+    font-size: calc(32px * var(--inverse-scale)) !important;
     margin-bottom: calc(16px * var(--inverse-scale));
   }
 
@@ -110,6 +188,329 @@ body[data-scale="175"] {
     font-size: calc(16px * var(--inverse-scale));
     margin-bottom: calc(48px * var(--inverse-scale));
   }
+
+  // Header导航调整
+  .header-content {
+    height: calc(100px * var(--inverse-scale)) !important;
+  }
+
+  .nav {
+    .nav-list {
+      gap: calc(80px * var(--inverse-scale));
+    }
+
+    .nav-link {
+      font-size: calc(26px * var(--inverse-scale)) !important;
+      height: calc(100px * var(--inverse-scale)) !important;
+      line-height: calc(100px * var(--inverse-scale)) !important;
+    }
+  }
+
+  .logo {
+    .logo-img {
+      height: calc(30px * var(--inverse-scale));
+    }
+
+    .logo-text {
+      font-size: calc(20px * var(--inverse-scale));
+    }
+  }
+
+  // Footer调整
+  .footer-main {
+    padding: calc(205px * var(--inverse-scale)) 0 calc(60px * var(--inverse-scale)) 0;
+  }
+
+  .footer-content {
+    gap: calc(300px * var(--inverse-scale));
+  }
+
+  .contact-section {
+    .section-title {
+      font-size: calc(32px * var(--inverse-scale)) !important;
+      margin-bottom: calc(50px * var(--inverse-scale));
+
+      &::after {
+        width: calc(64px * var(--inverse-scale));
+        height: calc(4px * var(--inverse-scale));
+      }
+    }
+
+    .contact-item {
+      font-size: calc(18px * var(--inverse-scale));
+      margin-bottom: calc(20px * var(--inverse-scale));
+
+      .contact-icon {
+        width: calc(20px * var(--inverse-scale));
+        height: calc(20px * var(--inverse-scale));
+        margin-right: calc(10px * var(--inverse-scale));
+      }
+
+      .contact-text {
+        font-size: calc(18px * var(--inverse-scale));
+      }
+
+      &.phone {
+        font-size: calc(32px * var(--inverse-scale));
+        margin-bottom: calc(24px * var(--inverse-scale));
+
+        .contact-text {
+          font-size: calc(32px * var(--inverse-scale));
+        }
+      }
+
+      &.addr {
+        margin-bottom: calc(32px * var(--inverse-scale));
+      }
+    }
+
+    .qrcode-section {
+      margin-top: calc(12px * var(--inverse-scale));
+
+      .qrcode {
+        width: calc(120px * var(--inverse-scale));
+        height: calc(120px * var(--inverse-scale));
+      }
+
+      .qrcode-text {
+        margin-top: calc(12px * var(--inverse-scale));
+        font-size: calc(14px * var(--inverse-scale));
+      }
+    }
+  }
+
+  .nav-sections {
+    gap: calc(60px * var(--inverse-scale));
+  }
+
+  .nav-column {
+    .section-title {
+      font-size: calc(28px * var(--inverse-scale)) !important;
+      margin-bottom: calc(50px * var(--inverse-scale));
+    }
+
+    .nav-list {
+      li {
+        margin-bottom: calc(30px * var(--inverse-scale));
+      }
+
+      .nav-link {
+        font-size: calc(18px * var(--inverse-scale));
+      }
+    }
+  }
+
+  .footer-bottom {
+    padding: calc(20px * var(--inverse-scale)) 0;
+
+    .copyright-text {
+      font-size: calc(14px * var(--inverse-scale));
+    }
+  }
+
+  // 首页特定调整
+  .products-section {
+    padding: calc(80px * var(--inverse-scale)) 0;
+
+    .section-header {
+      margin-bottom: calc(60px * var(--inverse-scale));
+
+      .section-title {
+        font-size: calc(42px * var(--inverse-scale)) !important;
+        margin-bottom: calc(20px * var(--inverse-scale));
+      }
+
+      .section-subtitle {
+        font-size: calc(16px * var(--inverse-scale)) !important;
+        margin-bottom: calc(20px * var(--inverse-scale));
+      }
+
+      .section-description {
+        font-size: calc(18px * var(--inverse-scale)) !important;
+      }
+    }
+
+    .products-content {
+      gap: calc(60px * var(--inverse-scale));
+    }
+
+    .products-nav {
+      flex: 0 0 calc(21.6% / var(--scale-factor)) !important;
+      max-width: calc(21.6% / var(--scale-factor));
+
+      .nav-item {
+        height: calc(100px * var(--inverse-scale)) !important;
+        // line-height: calc(100px * var(--inverse-scale)) !important;
+        line-height: 1.2!important;
+        padding: 0 calc(20px * var(--inverse-scale));
+        font-size: calc(24px * var(--inverse-scale)) !important;
+        margin-bottom: calc(2px * var(--inverse-scale));
+        white-space: normal;
+        word-wrap: break-word;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .product-detail {
+      .product-title {
+        font-size: calc(36px * var(--inverse-scale)) !important;
+        margin-bottom: calc(20px * var(--inverse-scale));
+      }
+
+      .product-description {
+        font-size: calc(24px * var(--inverse-scale)) !important;
+        margin-bottom: calc(35px * var(--inverse-scale));
+      }
+
+      .detail-image {
+        max-height: calc(695px * var(--inverse-scale));
+      }
+    }
+  }
+
+  .about-section {
+    padding: calc(80px * var(--inverse-scale)) 0;
+
+    .section-header {
+      margin-bottom: calc(60px * var(--inverse-scale));
+    }
+
+    .about-content {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    .about-tabs {
+      margin-bottom: calc(95px * var(--inverse-scale));
+      gap: calc(20px * var(--inverse-scale));
+      flex-wrap: nowrap;
+      width: 100%;
+
+      .tab-item {
+        flex: 1 1 auto;
+        min-width: 0;
+        max-width: calc(400px * var(--inverse-scale));
+        height: calc(66px * var(--inverse-scale)) !important;
+        line-height: calc(66px * var(--inverse-scale)) !important;
+        font-size: calc(30px * var(--inverse-scale)) !important;
+        border-radius: calc(5px * var(--inverse-scale));
+        white-space: nowrap;
+      }
+    }
+
+    .about-detail {
+      padding: calc(40px * var(--inverse-scale)) 0;
+      min-height: calc(400px * var(--inverse-scale));
+      width: 100%;
+    }
+
+    .detail-content {
+      gap: calc(110px * var(--inverse-scale));
+      width: 100%;
+
+      .content-left {
+        flex: 0 0 calc(800px * var(--inverse-scale));
+        max-width: calc(800px * var(--inverse-scale));
+      }
+
+      .content-right {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .content-title {
+        font-size: calc(36px * var(--inverse-scale)) !important;
+        margin-bottom: calc(30px * var(--inverse-scale));
+      }
+
+      .content-description {
+        font-size: calc(18px * var(--inverse-scale)) !important;
+        line-height: calc(32px * var(--inverse-scale));
+      }
+
+      .learn-more-btn {
+        padding: calc(12px * var(--inverse-scale)) calc(32px * var(--inverse-scale));
+        font-size: calc(16px * var(--inverse-scale)) !important;
+        border-radius: calc(8px * var(--inverse-scale));
+      }
+    }
+  }
+
+  // 案例区域调整
+  .cases-section {
+    padding: calc(80px * var(--inverse-scale)) 0;
+
+    .section-header {
+      margin-bottom: calc(60px * var(--inverse-scale));
+    }
+
+    .cases-carousel {
+      gap: calc(30px * var(--inverse-scale));
+    }
+
+    .nav-arrow {
+      width: calc(60px * var(--inverse-scale));
+      height: calc(60px * var(--inverse-scale));
+
+      .arrow-icon {
+        width: calc(24px * var(--inverse-scale));
+        height: calc(24px * var(--inverse-scale));
+      }
+    }
+
+    .case-item {
+      padding: 0 calc(15px * var(--inverse-scale));
+
+      .case-image {
+        height: calc(200px * var(--inverse-scale));
+        border-radius: calc(12px * var(--inverse-scale)) calc(12px * var(--inverse-scale)) 0 0;
+      }
+
+      .case-content {
+        padding: calc(25px * var(--inverse-scale));
+        border-radius: 0 0 calc(12px * var(--inverse-scale)) calc(12px * var(--inverse-scale));
+
+        .case-title {
+          font-size: calc(20px * var(--inverse-scale)) !important;
+          margin-bottom: calc(15px * var(--inverse-scale));
+        }
+
+        .case-description {
+          font-size: calc(14px * var(--inverse-scale)) !important;
+          line-height: calc(22px * var(--inverse-scale));
+        }
+      }
+    }
+  }
+
+  // 合作伙伴区域调整
+  .cooperation-section {
+    padding: calc(80px * var(--inverse-scale)) 0;
+
+    .section-header {
+      margin-bottom: calc(60px * var(--inverse-scale));
+    }
+
+    .partners-grid {
+      gap: calc(30px * var(--inverse-scale));
+
+      .partner-item {
+        padding: calc(20px * var(--inverse-scale));
+        border-radius: calc(8px * var(--inverse-scale));
+      }
+    }
+  }
+
+  // 产品中心调整
+  .advantages-section {
+    .advantage-image {
+      img {
+        width: calc(108px * var(--inverse-scale)) !important;
+        height: auto !important;
+      }
+    }
+  }
 }
 
 body[data-scale="200"] {
@@ -119,7 +520,6 @@ body[data-scale="200"] {
   --base-line-height: 1.25;
 
   font-size: var(--base-font-size);
-  // line-height: var(--base-line-height);
 
   .container {
     max-width: calc(1600px * var(--inverse-scale));
@@ -134,7 +534,7 @@ body[data-scale="200"] {
   }
 
   .section-title {
-    font-size: calc(32px * var(--inverse-scale));
+    font-size: calc(32px * var(--inverse-scale)) !important;
     margin-bottom: calc(16px * var(--inverse-scale));
   }
 
@@ -142,6 +542,149 @@ body[data-scale="200"] {
     font-size: calc(16px * var(--inverse-scale));
     margin-bottom: calc(48px * var(--inverse-scale));
   }
+
+  // Header导航调整
+  .header-content {
+    height: calc(100px * var(--inverse-scale)) !important;
+  }
+
+  .nav {
+    .nav-list {
+      gap: calc(80px * var(--inverse-scale));
+    }
+
+    .nav-link {
+      font-size: calc(26px * var(--inverse-scale)) !important;
+      height: calc(100px * var(--inverse-scale)) !important;
+      line-height: calc(100px * var(--inverse-scale)) !important;
+    }
+  }
+
+  .logo {
+    .logo-img {
+      height: calc(30px * var(--inverse-scale));
+    }
+
+    .logo-text {
+      font-size: calc(20px * var(--inverse-scale));
+    }
+  }
+
+  // Footer调整
+  .footer-main {
+    padding: calc(205px * var(--inverse-scale)) 0 calc(60px * var(--inverse-scale)) 0;
+  }
+
+  .footer-content {
+    gap: calc(300px * var(--inverse-scale));
+  }
+
+  .contact-section {
+    .section-title {
+      font-size: calc(32px * var(--inverse-scale)) !important;
+      margin-bottom: calc(50px * var(--inverse-scale));
+
+      &::after {
+        width: calc(64px * var(--inverse-scale));
+        height: calc(4px * var(--inverse-scale));
+      }
+    }
+
+    .contact-item {
+      font-size: calc(18px * var(--inverse-scale));
+      margin-bottom: calc(20px * var(--inverse-scale));
+
+      .contact-icon {
+        width: calc(20px * var(--inverse-scale));
+        height: calc(20px * var(--inverse-scale));
+        margin-right: calc(10px * var(--inverse-scale));
+      }
+
+      .contact-text {
+        font-size: calc(18px * var(--inverse-scale));
+      }
+
+      &.phone {
+        font-size: calc(32px * var(--inverse-scale));
+        margin-bottom: calc(24px * var(--inverse-scale));
+
+        .contact-text {
+          font-size: calc(32px * var(--inverse-scale));
+        }
+      }
+
+      &.addr {
+        margin-bottom: calc(32px * var(--inverse-scale));
+      }
+    }
+
+    .qrcode-section {
+      margin-top: calc(12px * var(--inverse-scale));
+
+      .qrcode {
+        width: calc(120px * var(--inverse-scale));
+        height: calc(120px * var(--inverse-scale));
+      }
+
+      .qrcode-text {
+        margin-top: calc(12px * var(--inverse-scale));
+        font-size: calc(14px * var(--inverse-scale));
+      }
+    }
+  }
+
+  .nav-sections {
+    gap: calc(60px * var(--inverse-scale));
+  }
+
+  .nav-column {
+    .section-title {
+      font-size: calc(28px * var(--inverse-scale)) !important;
+      margin-bottom: calc(50px * var(--inverse-scale));
+    }
+
+    .nav-list {
+      li {
+        margin-bottom: calc(30px * var(--inverse-scale));
+      }
+
+      .nav-link {
+        font-size: calc(18px * var(--inverse-scale));
+      }
+    }
+  }
+
+  .footer-bottom {
+    padding: calc(20px * var(--inverse-scale)) 0;
+
+    .copyright-text {
+      font-size: calc(14px * var(--inverse-scale));
+    }
+  }
+
+  // 首页特定调整
+  .products-section {
+    .products-nav {
+      flex: 0 0 calc(20% * var(--inverse-scale)) !important;
+    }
+  }
+
+  .about-section {
+    .content-left {
+      flex: 0 calc(600px * var(--inverse-scale)) !important;
+      max-width: calc(600px * var(--inverse-scale)) !important;
+    }
+  }
+
+  // 产品中心调整
+  .advantages-section {
+    .advantage-image {
+      img {
+        width: calc(108px * var(--inverse-scale)) !important;
+        height: auto !important;
+      }
+    }
+  }
 }
 
 // 高DPI显示器优化
@@ -157,36 +700,6 @@ body[data-scale="200"] {
     image-rendering: -webkit-optimize-contrast;
     image-rendering: crisp-edges;
   }
-  // 菜单导航
-  .header-content{
-    height: 80px!important;
-  }
-  .nav{
-    .nav-link{
-      font-size: 20px!important;
-      height: 80px!important;
-      line-height: 80px!important;
-    }
-  }
-  // 首页
-  .products-section{
-    .products-nav{
-      flex: 0 0 18%!important;
-    }
-  }
-  .about-section{
-    .content-left{
-      flex: 0 600px!important;
-      max-width: 600px!important;
-    }
-  }
-  //产品中心
-  .advantages-section{
-     .advantage-image {
-      img{width: 108px!important;;height: auto!important;}
-     }
-  }
-  
 }
 
 // 卡片组件的缩放调整