style: About 页面改左右布局，去掉 ABOUT US badge

- 左侧: 标题 + 三段文案
- 右侧: 联系信息卡片（地址/邮箱/电话）
- 去掉 badge，去掉居中窄栏，利用全宽

about.html

@@ -8,42 +8,48 @@
   <header>{include file="public/header"}</header>
 
   <section class="about-main">
-    <div class="about-container">
+    <div class="about-wrap">
 
-      <div class="about-badge">ABOUT US</div>
+      <!-- 左侧：标题 + 文案 -->
-      <h1 class="about-title">关于我们</h1>
+      <div class="about-left">
-
+        <h1 class="about-title">关于我们</h1>
-      <div class="about-text">
+        <div class="about-text">
-        <p>我们是一家专注于云计算基础设施服务的技术型企业，致力于为全球用户提供稳定、高效、安全的云端解决方案。自创立以来，团队始终秉持技术驱动的理念，围绕计算、存储、网络、安全等核心领域持续深耕，打造覆盖多种业务场景的云产品服务体系。</p>
+          <p>我们是一家专注于云计算基础设施服务的技术型企业，致力于为全球用户提供稳定、高效、安全的云端解决方案。自创立以来，团队始终秉持技术驱动的理念，围绕计算、存储、网络、安全等核心领域持续深耕，打造覆盖多种业务场景的云产品服务体系。</p>
-        <p>我们在全球多个地区部署了数据中心节点，依托自研调度平台与成熟的运维体系，为电商、游戏、金融、教育、开发者等不同行业客户提供弹性可扩展的基础设施支撑。无论是初创团队还是成长型企业，都能在这里找到适合自身业务的云上方案。</p>
+          <p>我们在全球多个地区部署了数据中心节点，依托自研调度平台与成熟的运维体系，为电商、游戏、金融、教育、开发者等不同行业客户提供弹性可扩展的基础设施支撑。无论是初创团队还是成长型企业，都能在这里找到适合自身业务的云上方案。</p>
-        <p>我们重视每一位客户的使用体验，坚持以合理的价格提供优质的服务。技术支持团队全天候在线，确保问题能够及时响应和处理。同时，我们也在不断优化产品能力与服务流程，力求让云上业务部署更简单、更可靠。</p>
+          <p>我们重视每一位客户的使用体验，坚持以合理的价格提供优质的服务。技术支持团队全天候在线，确保问题能够及时响应和处理。同时，我们也在不断优化产品能力与服务流程，力求让云上业务部署更简单、更可靠。</p>
+        </div>
       </div>
 
-      <div class="about-divider"></div>
+      <!-- 右侧：联系信息 -->
-
+      <div class="about-right">
-      <div class="about-contact">
         <h3 class="about-contact-title">联系我们</h3>
-        <div class="about-contact-grid">
+        <div class="contact-list">
           <div class="contact-card">
             <div class="contact-icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
             </div>
-            <div class="contact-label">公司地址</div>
+            <div>
-            <div class="contact-value">xx省xx市xx区xx路xx号</div>
+              <div class="contact-label">公司地址</div>
+              <div class="contact-value">xx省xx市xx区xx路xx号</div>
+            </div>
           </div>
           <div class="contact-card">
             <div class="contact-icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
             </div>
-            <div class="contact-label">电子邮箱</div>
+            <div>
-            <div class="contact-value">support@example.com</div>
+              <div class="contact-label">电子邮箱</div>
+              <div class="contact-value">support@example.com</div>
+            </div>
           </div>
           <div class="contact-card">
             <div class="contact-icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
             </div>
-            <div class="contact-label">联系电话</div>
+            <div>
-            <div class="contact-value">400-xxxx-xxxx</div>
+              <div class="contact-label">联系电话</div>
+              <div class="contact-value">400-xxxx-xxxx</div>
+            </div>
           </div>
         </div>
       </div>

css/about.css

@@ -1,5 +1,5 @@
 /* ============================================
-   About 页面 — 极简
+   About 页面 — 左右布局
    ============================================ */
 
 #about {
@@ -13,40 +13,30 @@
   padding: 100px 0 80px;
 }
 
-.about-container {
+.about-wrap {
-  max-width: 680px;
+  display: flex;
-  margin: 0 auto;
+  gap: 80px;
-  padding: 0 24px;
+  max-width: 1200px;
+  width: 100%;
+  padding: 0 40px;
+  align-items: flex-start;
 }
 
-/* Badge */
+/* ---- 左侧 ---- */
-.about-badge {
+.about-left {
-  display: inline-block;
+  flex: 1;
-  padding: 4px 16px;
+  min-width: 0;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 3px;
-  color: rgba(56, 189, 248, 0.7);
-  border: 1px solid rgba(56, 189, 248, 0.18);
-  border-radius: 20px;
-  margin-bottom: 28px;
 }
 
-/* 标题 */
 .about-title {
-  font-size: 48px;
+  font-size: 40px;
   font-weight: 700;
-  margin-bottom: 48px;
+  margin-bottom: 40px;
   background: linear-gradient(135deg, #fff 20%, #38BDF8 80%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  line-height: 1.15;
+  line-height: 1.2;
-}
-
-/* ---- 文案 ---- */
-.about-text {
-  margin-bottom: 56px;
 }
 
 .about-text p {
@@ -61,34 +51,31 @@
   margin-bottom: 0;
 }
 
-/* 分隔线 */
+/* ---- 右侧 ---- */
-.about-divider {
+.about-right {
-  width: 48px;
+  width: 340px;
-  height: 2px;
+  flex-shrink: 0;
-  background: linear-gradient(90deg, #38BDF8, rgba(99, 102, 241, 0.5));
+  padding-top: 8px;
-  border-radius: 2px;
-  margin-bottom: 48px;
 }
 
-/* ---- 联系我们 ---- */
 .about-contact-title {
   font-size: 18px;
   font-weight: 600;
   color: rgba(226, 232, 240, 0.85);
-  margin-bottom: 28px;
+  margin-bottom: 24px;
 }
 
-.about-contact-grid {
+.contact-list {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }
 
 .contact-card {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  gap: 16px;
+  gap: 14px;
-  padding: 20px 24px;
+  padding: 18px 20px;
   background: rgba(30, 41, 59, 0.3);
   border: 1px solid rgba(148, 163, 184, 0.05);
   border-radius: 12px;
@@ -101,11 +88,12 @@
 }
 
 .contact-icon {
-  width: 20px;
+  width: 18px;
-  height: 20px;
+  height: 18px;
   flex-shrink: 0;
   color: #38BDF8;
-  opacity: 0.6;
+  opacity: 0.55;
+  margin-top: 2px;
 }
 
 .contact-icon svg {
@@ -114,15 +102,16 @@
 }
 
 .contact-label {
-  font-size: 13px;
+  font-size: 12px;
-  color: rgba(148, 163, 184, 0.5);
+  color: rgba(148, 163, 184, 0.45);
-  min-width: 64px;
+  margin-bottom: 4px;
-  flex-shrink: 0;
+  letter-spacing: 0.3px;
 }
 
 .contact-value {
   font-size: 14px;
   color: rgba(226, 232, 240, 0.8);
+  line-height: 1.4;
 }
 
 /* ---- 移动端 ---- */
@@ -131,22 +120,22 @@
     padding: 70px 0 60px;
   }
 
+  .about-wrap {
+    flex-direction: column;
+    gap: 48px;
+    padding: 0 20px;
+  }
+
+  .about-right {
+    width: 100%;
+  }
+
   .about-title {
-    font-size: 32px;
+    font-size: 28px;
-    margin-bottom: 32px;
+    margin-bottom: 28px;
   }
 
   .about-text p {
     font-size: 14px;
   }
-
-  .contact-card {
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 16px 18px;
-  }
-
-  .contact-label {
-    min-width: auto;
-  }
 }