feat 公共样式整改

src/components/AppFooter.vue

@@ -85,77 +85,57 @@ const coreBusiness = [
 
 <style lang="less" scoped>
 .app-footer {
-  // 设计稿：footer 顶 y=1942，总高 481px。各行绝对坐标换算为相对 footer 顶：
-  // 列标题 54 / 内容首行 115 / legal[0] 332 / legal[1] 371。
-  min-height: @footer-height;
-  display: flex;
-  flex-direction: column;
   background: @footer-bg;
   color: @white;
+  padding: @spacing-xl 0 @spacing-base;
 
   &__inner {
-    .flex(row, flex-start, flex-start);
+    .flex(row, space-between, flex-start);
+    flex-wrap: wrap;
+    gap: @spacing-xl;
     width: 100%;
-    max-width: 1920px;
+    max-width: @page-content;
     margin: 0 auto;
-    height: 250px;
     box-sizing: border-box;
-    padding-top: 54px;
+    padding: 0 @page-gutter;
-    padding-left: clamp(
-      @spacing-base,
-      calc((100% - 1609px) / 2),
-      155px
-    );
-    overflow: hidden;
   }
 
   &__about {
-    flex: 0 1 625px; // x155 → 780
+    flex: 0 1 360px;
+    max-width: 420px;
     min-width: 0;
   }
 
   &__brand {
     .flex(row, flex-start);
-    margin-bottom: 20px;
+    margin-bottom: @spacing-sm;
-    margin-left: 45px;
   }
 
   &__name {
-    font-size: @font-size-xl;
+    font-size: @font-size-lg;
     font-weight: 500;
     line-height: 1.4;
     color: @white;
   }
 
   &__desc {
-    margin-top: 0;
+    margin: 0;
     font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.6;
+    color: fade(@white, 72%);
   }
 
   &__col {
     .flex(column, flex-start, flex-start);
-    gap: 0;
+    gap: 2px;
+    flex: 0 0 auto;
     min-width: 0;
-
-    &--core {
-      flex: 0 0 193px;
-      margin-left: 142px;
-    }
-    &--nav {
-      flex: 0 0 80px;
-      margin-left: 142px;
-    }
-    &--contact {
-      flex: 0 0 253px;
-      margin-left: 174px;
-    }
   }
 
   &__title {
-    margin-bottom: @spacing-base;
+    margin: 0 0 @spacing-sm;
-    font-size: @font-size-lg;
+    font-size: @font-size-base;
     font-weight: 500;
     line-height: 1.4;
     white-space: nowrap;
@@ -165,10 +145,11 @@ const coreBusiness = [
   &__link {
     font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 1.8;
+    line-height: 1.7;
     white-space: nowrap;
     cursor: pointer;
     transition: color 0.2s;
+    color: fade(@white, 72%);
 
     &:hover {
       color: @primary-light;
@@ -178,30 +159,29 @@ const coreBusiness = [
   &__contact {
     font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 1.8;
+    line-height: 1.7;
+    color: fade(@white, 72%);
   }
 
   &__bottom {
-    width: 867px;
+    width: 100%;
-    max-width: calc(100% - 32px);
+    max-width: @page-content;
-    margin: 0 auto;
+    margin: @spacing-lg auto 0;
-    padding-bottom: 20px;
+    padding: @spacing-base @page-gutter 0;
-    text-align: left;
+    border-top: 1px solid fade(@white, 10%);
-    // legal[0] 需落在相对 footer 顶 332px 处
+    text-align: center;
-    margin-top: 62px;
+    box-sizing: border-box;
   }
 
   &__legal {
     margin: 0;
-    font-size: @font-size-sm;
+    font-size: @font-size-xs;
     font-weight: 400;
     line-height: 1.6;
-    white-space: nowrap;
+    color: fade(@white, 55%);
-    color: @white;
 
     &--icp {
-      margin-top: @spacing-base;
+      margin-top: @spacing-xs;
-      margin-left: 315px;
     }
   }
 }

src/styles/variables.less

@@ -77,7 +77,7 @@
 
 @header-height: 72px;
 @header-nav-gap: 94px;
-@footer-height: 481px;
+@footer-height: 280px;
 @footer-inset: 70px;
 
 // 登录/注册/找回密码三页共用的品牌区宽度。设计稿 #36/#38/#39 的左侧渐变