首页处理

src/styles/index.css

@@ -28,7 +28,30 @@
       0 0 33px 0 rgba(242, 242, 242, 0.50) inset;
   }
 }
+@layer components {
+  .container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
 
+    /* 1. 移动端默认：左右 18px 边距 */
+    padding-left: 18px;
+    padding-right: 18px;
+
+    /* 2. 桌面端逻辑：当屏幕达到 1440px 及以上 */
+    @media (width >= 1440px) {
+      /* 计算公式：
+         内容区固定为 1268px
+         侧边留白 = (1440 - 1268) / 2 = 86px
+      */
+      max-width: 1268px;
+
+      /* 此时 padding 可以设为 0，因为 max-width 配合 margin: auto 已经产生了 86px 的留白 */
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {