feat:初始化工程

src/styles/blog/blog.module.scss

@@ -0,0 +1,66 @@
+@use "blog.variable.module.scss" as blog;
+
+.blog-container {
+  // height: 100%;
+  background-color: blog.$bg-color;
+  padding: 0 5vw;
+
+  display: grid;
+  grid-template-columns: minmax(13vw, 200px) 1fr;
+  column-gap: 2vw;
+
+  aside {
+    display: grid;
+    grid-template-rows: 40vh 60vh;
+    row-gap: 2vh;
+    z-index: 2;
+
+    .blog-summary {
+      // 滚动到顶部固定
+      position: sticky;
+      top: 0;
+    }
+  }
+
+  section {
+    z-index: 2;
+
+    display: flex;
+    flex-direction: column;
+    gap: 2vh;
+
+    .blog-section {
+      // height: 100%;
+      min-height: 100vh;
+      background-color: blog.$card-bg-color;
+      border: 1px solid blog.$border-color;
+      border-radius: blog.$border-radius;
+      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
+                  0 3px 1px -2px rgba(0,0,0,0.06),
+                  0 1px 5px 0 rgba(0,0,0,0.12),
+                  0 -1px 0.5px 0 rgba(0,0,0,0.09);
+
+      .module-title {
+        background-color: blog.$theme-color;
+        padding: 5px;
+        border: 2px solid blog.$theme-color;
+        border-radius: 10px;
+        text-align: center;
+        font-size: blog.$large-font-size;
+        font-family: "华文楷体", serif;
+      }
+    }
+  }
+
+  .card-container {
+    background-color: blog.$card-bg-color;
+    border: 1px solid blog.$border-color;
+    border-radius: blog.$border-radius;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
+                0 3px 1px -2px rgba(0,0,0,0.06),
+                0 1px 5px 0 rgba(0,0,0,0.12),
+                0 -1px 0.5px 0 rgba(0,0,0,0.09);
+  }
+}
+
+