From d894b30aac6583ae3e10047958fe0354438e9eba Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Thu, 25 Dec 2025 14:17:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=842?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/index.css | 466 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 279 insertions(+), 187 deletions(-)

diff --git a/css/index.css b/css/index.css
index 2a14534..6fa4d83 100644
--- a/css/index.css
+++ b/css/index.css
@@ -59,7 +59,7 @@
   height: 100%;
 }
 
-#index .nav-right > a {
+#index .nav-right>a {
   display: flex;
   align-items: center;
 }
@@ -401,7 +401,7 @@
 }
 
 /* 文字内容容器，实际的左对齐内容 */
-.banner-cont .swiper-slide .section-content > * {
+.banner-cont .swiper-slide .section-content>* {
   max-width: 650px;
 }
 
@@ -422,14 +422,13 @@
   width: auto;
   position: relative;
   background: linear-gradient(120deg,
-    #FFFFFF 0%,
-    #FFFFFF 40%,
-    #E0F2FE 48%,
-    #BFDBFE 50%,
-    #E0F2FE 52%,
-    #FFFFFF 60%,
-    #FFFFFF 100%
-  );
+      #FFFFFF 0%,
+      #FFFFFF 40%,
+      #E0F2FE 48%,
+      #BFDBFE 50%,
+      #E0F2FE 52%,
+      #FFFFFF 60%,
+      #FFFFFF 100%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
@@ -442,6 +441,7 @@
   0% {
     background-position: -200% 0;
   }
+
   100% {
     background-position: 200% 0;
   }
@@ -452,6 +452,7 @@
     opacity: 0;
     transform: translateX(-50px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -613,6 +614,7 @@
   from {
     width: 0;
   }
+
   to {
     width: 100%;
   }
@@ -698,11 +700,9 @@
   left: -50%;
   width: 200%;
   height: 200%;
-  background: radial-gradient(
-    circle at center,
-    rgba(56, 189, 248, 0.15) 0%,
-    transparent 50%
-  );
+  background: radial-gradient(circle at center,
+      rgba(56, 189, 248, 0.15) 0%,
+      transparent 50%);
   opacity: 0;
   transition: opacity 0.5s ease;
   pointer-events: none;
@@ -964,9 +964,12 @@
 }
 
 @keyframes float {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateY(0);
   }
+
   50% {
     transform: translateY(-20px);
   }
@@ -1058,9 +1061,12 @@
 }
 
 @keyframes pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.05);
   }
@@ -1658,6 +1664,7 @@
   from {
     filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.2));
   }
+
   to {
     filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.4));
   }
@@ -2159,7 +2166,7 @@
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
-              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .animate-on-scroll.animated {
@@ -2225,6 +2232,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -2280,6 +2288,7 @@ html {
 
 /* 禁用不必要的动画以提升性能 */
 @media (prefers-reduced-motion: reduce) {
+
   *,
   *::before,
   *::after {
@@ -2338,7 +2347,7 @@ html {
   }
 
   /* 小屏幕下保持左对齐布局 */
-  .banner-cont .swiper-slide .section-content > * {
+  .banner-cont .swiper-slide .section-content>* {
     max-width: 500px;
   }
 
@@ -2400,7 +2409,7 @@ html {
     text-align: center;
   }
 
-  .banner-cont .swiper-slide .section-content > * {
+  .banner-cont .swiper-slide .section-content>* {
     max-width: 90%;
     margin-left: auto;
     margin-right: auto;
@@ -2481,6 +2490,7 @@ html {
 
 /* 手机 576px - 767px */
 @media (max-width: 767px) {
+
   /* ===== 导航栏 - 极简设计 ===== */
   #index .nav-header {
     padding: 0 8px;
@@ -2498,15 +2508,21 @@ html {
 
   #index .nav-header .nav-right {
     display: flex !important;
-    align-items: stretch !important;
+    align-items: center !important;
     height: 100% !important;
     flex-wrap: nowrap !important;
     flex-shrink: 0;
     min-height: 50px;
   }
 
+  /* 默认隐藏所有的桌面端导航链接 */
+  #index .nav-right .nav-desktop-link {
+    display: none !important;
+  }
+
   #index .nav-menu {
-    display: none; /* 移动端隐藏主导航 */
+    display: none;
+    /* 移动端隐藏主导航 */
   }
 
   #index .nav-header .nav-left .nav-icon {
@@ -2614,22 +2630,23 @@ html {
 
   /* ===== Banner 区域 - 大幅缩小 ===== */
   .banner-cont .swiper-slide {
-    height: 100vh !important;
-    min-height: 350px;
+    height: auto !important;
+    min-height: 420px;
+    padding-bottom: 40px;
   }
 
   .banner-cont .swiper-slide h1 {
-    font-size: 24px !important;
+    font-size: 28px !important;
     line-height: 1.3;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .banner-cont .banner-desc {
-    font-size: 12px !important;
+    font-size: 14px !important;
     margin-top: 10px !important;
-    margin-bottom: 20px !important;
-    line-height: 1.5;
-    max-height: 60px;
+    margin-bottom: 24px !important;
+    line-height: 1.6;
+    max-height: 80px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -2637,33 +2654,36 @@ html {
   }
 
   .banner-tag-pill {
-    padding: 3px 10px;
-    font-size: 10px;
+    padding: 4px 12px;
+    font-size: 12px;
   }
 
   .banner-cont .btn2 {
-    padding: 8px 20px !important;
-    font-size: 12px !important;
+    padding: 10px 24px !important;
+    font-size: 14px !important;
   }
 
   /* 调整进度条位置到底部 */
   .banner-cont .swiper-pagination {
-    bottom: 12px !important;
+    bottom: 15px !important;
   }
 
   .banner-cont .swiper-pagination-bullet {
-    width: 45px !important;
+    width: 30px !important;
+    height: 3px !important;
   }
 
   /* ===== Banner 快速入口 - 四宫格布局（2列×2行） ===== */
   .banner .banner-s {
-    margin-top: 12px;
-    padding: 10px 6px;
+    margin-top: -20px;
+    padding: 10px 10px;
     background: transparent;
+    position: relative;
+    z-index: 10;
   }
 
   .banner .banner-s .banner-list {
-    gap: 6px !important;
+    gap: 10px !important;
     display: grid !important;
     grid-template-columns: repeat(2, 1fr) !important;
     width: 100% !important;
@@ -2671,29 +2691,30 @@ html {
   }
 
   .banner-s .banner-list .banner-item {
-    padding: 10px 10px !important;
-    gap: 8px !important;
+    padding: 16px 14px !important;
+    gap: 10px !important;
     flex: none !important;
     display: flex !important;
-    flex-direction: row !important;
-    align-items: center !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
     text-align: left !important;
-    min-height: 85px !important;
+    min-height: auto !important;
     max-height: none !important;
     justify-content: flex-start !important;
-    border-radius: 0 !important;
+    border-radius: 12px !important;
     width: auto !important;
     min-width: auto !important;
     max-width: none !important;
-    background: rgba(15, 23, 42, 0.6) !important;
+    background: rgba(15, 23, 42, 0.8) !important;
     border: 1px solid rgba(148, 163, 184, 0.15) !important;
+    backdrop-filter: blur(12px);
   }
 
   .banner-s .banner-list .banner-item .banner-item-icon {
-    width: 30px;
-    height: 30px;
-    margin-bottom: 0;
-    margin-right: 8px;
+    width: 32px;
+    height: 32px;
+    margin-bottom: 4px;
+    margin-right: 0;
     flex-shrink: 0;
   }
 
@@ -2701,49 +2722,63 @@ html {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 3px;
+    gap: 4px;
     flex: 1;
     min-width: 0;
+    width: 100%;
   }
 
   .banner-s .banner-list .banner-item h5 {
-    font-size: 11px !important;
+    font-size: 14px !important;
     margin-bottom: 0 !important;
     line-height: 1.3;
     color: #E5E7EB;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .banner-s .banner-list .banner-item .title-desc {
-    font-size: 9px !important;
+    font-size: 11px !important;
     line-height: 1.3;
     margin: 0 !important;
-    color: rgba(203, 213, 225, 0.8);
+    color: rgba(203, 213, 225, 0.6);
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  /* ===== 热销产品 - 精简卡片 ===== */
+  /* ===== 热销产品 - 移动端横向滚动表格优化 ===== */
   .hot-products {
-    margin-top: -50px;
-    padding: 20px 0 30px !important;
+    margin-top: -20px;
+    padding: 30px 0 40px !important;
   }
 
   .hot-products-title {
-    margin-bottom: 20px;
+    margin-bottom: 24px;
   }
 
   .hot-products-title h3 {
-    font-size: 20px;
-    margin-bottom: 6px;
+    font-size: 24px;
+    margin-bottom: 8px;
   }
 
   .hot-products-title .subtitle {
-    font-size: 11px;
+    font-size: 13px;
+    padding: 0 20px;
   }
 
   .products-table-wrapper {
-    padding: 0 12px;
+    padding: 0 20px;
+    /* 恢复横向滚动 */
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
   }
 
-  /* 表格转卡片 */
+  /* 保持表格布局但优化样式 */
   .products-table,
   .products-table thead,
   .products-table tbody,
@@ -2752,54 +2787,101 @@ html {
     display: block;
   }
 
+  /* 在超小屏幕下使用卡片式，稍微大一点的还是表格 */
+  .products-table {
+    min-width: 100%;
+  }
+
   .products-table thead {
     display: none;
   }
 
   .products-table tbody tr {
-    margin-bottom: 12px;
-    padding: 14px;
-    border-radius: 8px;
-  }
-
-  .products-table tbody tr:hover {
-    transform: none;
+    margin-bottom: 16px;
+    padding: 20px;
+    border-radius: 12px;
+    background: rgba(30, 41, 59, 0.6);
+    border: 1px solid rgba(148, 163, 184, 0.1);
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 12px;
   }
 
+  /* 重构卡片布局 */
   .products-table tbody td {
-    padding: 8px 0 8px 90px;
-    font-size: 12px;
+    padding: 0;
+    border: none;
+    display: block;
+    width: auto;
   }
 
+  /* 隐藏伪元素标签，改为直观布局 */
   .products-table tbody td::before {
-    left: 14px;
-    font-size: 11px;
+    display: none;
   }
 
-  .products-table tbody td:nth-child(1)::before {
-    content: "产品";
+  /* 产品名称：占满一行 */
+  .products-table tbody td:nth-child(1) {
+    grid-column: 1 / -1;
+    margin-bottom: 8px;
+  }
+
+  /* 参数配置：栅格布局 */
+  .products-table tbody td:nth-child(2),
+  /* CPU */
+  .products-table tbody td:nth-child(3),
+  /* 内存 */
+  .products-table tbody td:nth-child(4),
+  /* 带宽 */
+  .products-table tbody td:nth-child(5)
+
+  /* 系统盘 */
+    {
+    grid-column: auto;
+    font-size: 13px;
+    color: rgba(226, 232, 240, 0.7);
+    background: rgba(15, 23, 42, 0.3);
+    padding: 4px 10px;
+    border-radius: 4px;
+    text-align: center;
+    display: inline-block;
+    width: fit-content;
+  }
+
+  /* 价格：左下角 */
+  .products-table tbody td:nth-child(6) {
+    grid-column: 1 / 2;
+    align-self: end;
+    margin-top: 8px;
+  }
+
+  /* 按钮：右下角 */
+  .products-table tbody td:nth-child(7) {
+    grid-column: 2 / 3;
+    align-self: end;
+    text-align: right;
+    margin-top: 8px;
   }
 
   .products-table .product-name {
-    font-size: 13px;
-  }
-
-  .products-table .product-tag {
-    font-size: 10px;
-    padding: 1px 6px;
-  }
-
-  .products-table .product-price {
     font-size: 16px;
   }
 
-  .products-table .product-price .unit {
+  .products-table .product-tag {
     font-size: 11px;
+    padding: 2px 8px;
+  }
+
+  .products-table .product-price {
+    font-size: 20px;
   }
 
   .products-table .btn-buy {
-    padding: 6px 16px;
-    font-size: 11px;
+    padding: 8px 20px;
+    font-size: 13px;
+    width: 100%;
+    text-align: center;
   }
 
   /* ===== Section 通用 - 紧凑间距 ===== */
@@ -2898,7 +2980,8 @@ html {
   }
 
   .solution-desc p:nth-child(n+2) {
-    display: none; /* 小屏只显示第1段 */
+    display: none;
+    /* 小屏只显示第1段 */
   }
 
   .solution-link {
@@ -2912,7 +2995,8 @@ html {
     height: 120px;
     object-fit: cover;
     border-radius: 4px;
-    order: -1; /* 图片移到上方 */
+    order: -1;
+    /* 图片移到上方 */
   }
 
   /* ===== 基础设施 - 简化显示 ===== */
@@ -2975,7 +3059,8 @@ html {
   }
 
   .honor-item {
-    width: calc(50% - 6px); /* 改为2列布局 */
+    width: calc(50% - 6px);
+    /* 改为2列布局 */
     padding: 20px 16px;
   }
 
@@ -3050,6 +3135,7 @@ html {
 
 /* 小手机 最大575px */
 @media (max-width: 575px) {
+
   /* ===== 导航栏 - 超紧凑 ===== */
   #index .nav-header {
     padding: 0 10px;
@@ -3333,7 +3419,8 @@ html {
 
   .solution-desc p {
     font-size: 10px;
-    -webkit-line-clamp: 1; /* 小屏只显示1行 */
+    -webkit-line-clamp: 1;
+    /* 小屏只显示1行 */
   }
 
   .solution-link {
@@ -3451,6 +3538,7 @@ html {
 
 /* 小屏手机优化（480px） */
 @media (max-width: 480px) and (min-width: 361px) {
+
   /* ===== 导航栏 ===== */
   #index .nav-header {
     height: 46px !important;
@@ -3558,6 +3646,7 @@ html {
 
 /* 超小屏适配（320px） */
 @media (max-width: 360px) {
+
   /* ===== 导航栏 - 极限压缩 ===== */
   #index .nav-header {
     padding: 0 8px;
@@ -4012,6 +4101,7 @@ html {
 
 /* 性能优化提示 */
 @media (max-width: 768px) {
+
   /* 在移动设备上禁用一些复杂动画以提升性能 */
   .banner-cont .swiper-slide::before,
   .banner-cont .swiper-slide::after,
@@ -4141,7 +4231,8 @@ html {
 }
 
 #index .section.service {
-  padding-top: 120px; /* 为 banner-s 留出空间 */
+  padding-top: 120px;
+  /* 为 banner-s 留出空间 */
 }
 
 /* 优化各section之间的过渡 */
@@ -4526,121 +4617,122 @@ html {
   background: rgba(56, 189, 248, 0.3);
   box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
 }
+
 /* Mobile Overrides for Index Page */
 
 @media (max-width: 768px) {
 
-    /* Banner Adjustment */
-    .banner-cont .swiper-slide {
-        height: auto !important;
-        min-height: 400px;
-        padding-bottom: 60px;
-        /* Space for pagination */
-    }
+  /* Banner Adjustment */
+  .banner-cont .swiper-slide {
+    height: auto !important;
+    min-height: 400px;
+    padding-bottom: 60px;
+    /* Space for pagination */
+  }
 
-    .banner-cont .swiper-slide .section-content {
-        position: relative;
-        top: auto;
-        left: auto;
-        transform: none;
-        padding: 80px 20px 40px;
-        text-align: center;
-    }
+  .banner-cont .swiper-slide .section-content {
+    position: relative;
+    top: auto;
+    left: auto;
+    transform: none;
+    padding: 80px 20px 40px;
+    text-align: center;
+  }
 
-    .banner-cont .swiper-slide .section-content .title-wrapper {
-        max-width: 100%;
-        margin-bottom: 20px;
-    }
+  .banner-cont .swiper-slide .section-content .title-wrapper {
+    max-width: 100%;
+    margin-bottom: 20px;
+  }
 
-    .banner-cont .swiper-slide h1 {
-        font-size: 32px;
-        line-height: 1.3;
-    }
+  .banner-cont .swiper-slide h1 {
+    font-size: 32px;
+    line-height: 1.3;
+  }
 
-    .banner-tags {
-        justify-content: center;
-        margin-bottom: 12px;
-    }
+  .banner-tags {
+    justify-content: center;
+    margin-bottom: 12px;
+  }
 
-    .banner-cont .banner-desc {
-        font-size: 15px;
-        margin: 0 auto 30px;
-        line-height: 1.6;
-    }
+  .banner-cont .banner-desc {
+    font-size: 15px;
+    margin: 0 auto 30px;
+    line-height: 1.6;
+  }
 
-    /* Feature Cards (Banner-S) */
-    .banner .banner-s {
-        margin-top: 0;
-        padding-top: 0;
-        padding-bottom: 40px;
-    }
+  /* Feature Cards (Banner-S) */
+  .banner .banner-s {
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 40px;
+  }
 
-    .banner .banner-s .banner-list {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 15px;
-        padding: 0 15px;
-    }
+  .banner .banner-s .banner-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 15px;
+    padding: 0 15px;
+  }
 
-    .banner-s .banner-list .banner-item {
-        max-width: 100%;
-        min-width: 0;
-        flex: auto;
-    }
+  .banner-s .banner-list .banner-item {
+    max-width: 100%;
+    min-width: 0;
+    flex: auto;
+  }
 
-    /* Hot Products - Card View */
-    .products-table thead {
-        display: none;
-    }
+  /* Hot Products - Card View */
+  .products-table thead {
+    display: none;
+  }
 
-    .products-table,
-    .products-table tbody,
-    .products-table tr,
-    .products-table td {
-        display: block;
-        width: 100%;
-    }
+  .products-table,
+  .products-table tbody,
+  .products-table tr,
+  .products-table td {
+    display: block;
+    width: 100%;
+  }
 
-    .products-table tr {
-        margin-bottom: 15px;
-        background: rgba(30, 41, 59, 0.4);
-        border: 1px solid rgba(148, 163, 184, 0.1);
-        border-radius: 12px;
-        padding: 15px;
-    }
+  .products-table tr {
+    margin-bottom: 15px;
+    background: rgba(30, 41, 59, 0.4);
+    border: 1px solid rgba(148, 163, 184, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+  }
 
-    .products-table td {
-        text-align: right;
-        padding: 8px 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid rgba(148, 163, 184, 0.05);
-    }
+  .products-table td {
+    text-align: right;
+    padding: 8px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
+  }
 
-    .products-table td:last-child {
-        border-bottom: none;
-    }
+  .products-table td:last-child {
+    border-bottom: none;
+  }
 
-    .products-table td::before {
-        content: attr(data-label);
-        float: left;
-        font-weight: 600;
-        color: rgba(148, 163, 184, 0.8);
-    }
+  .products-table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: 600;
+    color: rgba(148, 163, 184, 0.8);
+  }
 
-    /* Solution Wrapper - Stacked */
-    .solution-wrapper {
-        display: flex;
-        flex-direction: column;
-    }
+  /* Solution Wrapper - Stacked */
+  .solution-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
 
-    .solution-tabs {
-        display: none;
-        /* Hide desktop tabs */
-    }
+  .solution-tabs {
+    display: none;
+    /* Hide desktop tabs */
+  }
 
-    /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
+  /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider
      For now, let's assume we stack them or show a simple list. 
      Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification.
      Let's style the active one well first, or maybe show all?