优化

src/styles/Base.less

@@ -3,7 +3,8 @@
 :root {
 	--vh-animation-delay: 0ms;
 	--vh-padding-top: calc(66px + 1rem);
-	--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), 1388px)) / 2 + 1rem);
+	--vh-main-max-width: 1388px;
+	--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem);
 }
 
 h1,

src/styles/Footer.less

@@ -0,0 +1,116 @@
+.vh-footer {
+  margin-top: 1.68rem;
+  box-sizing: border-box;
+  padding: 2.6rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: max-content;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: saturate(100%) blur(2px);
+  user-select: none;
+
+  &>main {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 0.618rem;
+    width: 100%;
+    max-width: var(--vh-main-max-width);
+    height: max-content;
+
+    &>p {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: 0.618rem;
+      line-height: 1;
+
+      &>a {
+        line-height: 1;
+      }
+
+      &>span {
+        box-sizing: border-box;
+        padding-left: 0.28rem;
+        display: flex;
+        align-items: center;
+        width: max-content;
+        height: 1.25rem;
+        background: #25C2A0;
+        font-size: 0.68rem;
+        border-radius: 0.18rem;
+        overflow: hidden;
+
+        &>cite,
+        &>em {
+          box-sizing: border-box;
+          padding: 0 0.618rem;
+          width: max-content;
+          height: 100%;
+          line-height: 1.25rem;
+          color: #fff;
+          font-style: normal;
+        }
+
+        &>cite {
+          padding-left: 0.28rem;
+        }
+
+        &>em {
+          background: #5D5D5D;
+        }
+
+        &>svg {
+          width: 0.88rem;
+          height: 0.88rem;
+        }
+      }
+    }
+  }
+
+  &>section {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 0.88rem;
+    width: 100%;
+    height: max-content;
+
+    p {
+      line-height: 1;
+
+      a {
+        line-height: 1;
+      }
+    }
+
+    &.text {
+      &>p {
+
+        font-size: 0.88rem;
+
+        &>a {
+          color: #94A3B8;
+          transition: opacity 0.16s ease-in-out;
+
+          &:hover {
+            opacity: 0.88;
+          }
+        }
+      }
+    }
+
+    &.icon {
+      &>p {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 1rem;
+      }
+    }
+  }
+
+}

src/styles/Layout.less

@@ -16,13 +16,12 @@ body {
     flex-direction: column;
     gap: 1rem;
     width: 100%;
-    max-width: 1388px;
+    max-width: var(--vh-main-max-width);
     height: max-content;
 
     &>section.vh-container {
       position: relative;
       box-sizing: border-box;
-      padding-bottom: 5.66rem;
       display: flex;
       flex-direction: row-reverse;
       gap: 1.8rem;

src/styles/components/ArticleCard.less

@@ -6,6 +6,7 @@ section.article-list {
   grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
   gap: 1.6rem;
   width: 100%;
+  height: max-content;
   overflow: hidden;
 
   &>.vh-article-item {

src/styles/components/Header.less

@@ -24,7 +24,7 @@ header.vh-header {
     justify-content: space-between;
     width: 100%;
     height: 80%;
-    max-width: 1388px;
+    max-width: var(--vh-main-max-width);
 
     a,
     span.nav-btn-item {