fix: 使用unocss 预设代替 scss 变量

app/assets/scss/common.scss

@@ -2,11 +2,6 @@
   box-sizing: border-box;
 }
 
-// 响应式容器：大于 1440 时动态计算 padding，保持内容 1440 居中
-.landing-container {
-  @extend %landing-container;
-}
-
 #app {
   overflow-x: hidden;
   text-align: center;

app/assets/scss/vars.scss

@@ -42,21 +42,3 @@
   --el-text-color-secondary: var(--hj-text-muted);
   --el-border-color: var(--hj-border);
 }
-
-// 响应式容器占位符
-%landing-container {
-  width: 100%;
-  margin: 0 auto;
-  padding-left: 40px;
-  padding-right: 40px;
-
-  @media screen and (min-width: 768px) {
-    padding-left: 240px;
-    padding-right: 240px;
-  }
-
-  @media screen and (min-width: 1440px) {
-    padding-left: calc((100vw - 1440px) / 2);
-    padding-right: calc((100vw - 1440px) / 2);
-  }
-}

app/components/m-footer.vue

@@ -187,6 +187,6 @@
 
 <style scoped lang="scss">
   .footer-container {
-    @extend %landing-container;
+    @apply landing-container;
   }
 </style>

app/components/section/ability.vue

@@ -76,9 +76,7 @@
 
 <style scoped lang="scss">
   .ability {
-    @apply py-120px;
-    @extend %landing-container;
-    @apply lt-sm:py-120px lt-sm:px-32px;
+    @apply landing-container py-120px lt-sm:py-120px lt-sm:px-32px;
     background-size: 100% 100%;
     background-image: url('@/assets/images/bg-ability.png');
 

app/components/section/cases.vue

@@ -93,8 +93,7 @@
 
 <style scoped lang="scss">
   .cases {
-    @apply pt-120px pb-46px lt-sm:pt-120px lt-sm:pb-60px lt-sm:px-32px;
-    @extend %landing-container;
+    @apply landing-container pt-120px pb-46px lt-sm:pt-120px lt-sm:pb-60px lt-sm:px-32px;
   }
 
   .cases-header {

app/components/section/hero.vue

@@ -49,8 +49,7 @@
     }
 
     .hero-content {
-      @extend %landing-container;
-      @apply flex items-center pb-48px pt-200px;
+      @apply landing-container flex items-center pb-48px pt-200px;
       @apply lt-sm:pt-80px;
     }
 

app/components/section/history.vue

@@ -266,9 +266,8 @@
 
 <style scoped lang="scss">
   .history {
-    @apply overflow-hidden relative py-60px;
+    @apply landing-container overflow-hidden relative py-60px;
     @apply lt-sm:pt-60px lt-sm:pb-160px lt-sm:px-32px;
-    @extend %landing-container;
     background-size: cover;
     background-position: center;
     background-image: url('@/assets/images/history-bg.png');

app/components/section/partnership.vue

@@ -43,7 +43,7 @@
 
 <style scoped lang="scss">
   .partnership {
-    @extend %landing-container;
+    @apply landing-container;
     @media screen and (min-width: 1480px) {
       padding-left: calc((100vw - 1480px) / 2);
       padding-right: calc((100vw - 1480px) / 2);

app/components/section/solution.vue

@@ -207,8 +207,7 @@
 
 <style scoped lang="scss">
   .solution {
-    @extend %landing-container;
-    @apply py-120px lt-sm:py-120px lt-sm:px-0;
+    @apply landing-container py-120px lt-sm:py-120px lt-sm:px-0;
   }
 
   .solution-header {
@@ -235,18 +234,9 @@
   }
 
   .solution-card {
-    position: relative;
-    display: flex;
-    height: 100%;
-    cursor: pointer;
-    overflow: hidden;
-    border-radius: 24px;
-    will-change: transform, opacity;
-    transition:
-      transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
-      opacity 600ms ease,
-      flex 600ms ease-in-out,
-      background-color 600ms ease-in-out;
+    @apply relative flex h-full cursor-pointer overflow-hidden rounded-24px will-change-[transform,opacity] transition-all duration-600 
+            transition-[transform:cubic-bezier(0.34,1.56,0.64,1),opacity:ease,flex:ease-in-out,background-color:ease-in-out];
+    @apply lt-sm:flex-[0_0_90%] lt-sm:min-h-750px lt-sm:w-630px lt-sm:[scroll-snap-align:center] lt-sm:rounded-24px;
 
     @media (min-width: 768px) {
       &.active {
@@ -257,9 +247,6 @@
       }
     }
 
-    @apply lt-sm:flex-[0_0_90%] lt-sm:min-h-750px lt-sm:w-630px;
-    @apply lt-sm:[scroll-snap-align:center];
-
     &:not(.active) {
       @apply lt-sm:scale-96 lt-sm:opacity-50;
     }

app/pages/about/components/about.vue

@@ -118,8 +118,7 @@
   }
 
   .inner-container {
-    @apply lt-sm:px-32px;
-    @extend %landing-container;
+    @apply landing-container lt-sm:px-32px;
   }
 
   .top-header {

uno.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-05-07 20:59:28
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-20 16:03:07
+ * @LastEditTime: 2026-01-26 09:10:30
  * @Description:
  */
 import {
@@ -89,6 +89,8 @@ export default defineConfig({
     'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis',
     // 文本溢出换行
     'text-break': 'whitespace-normal break-all break-words',
+    // 响应式容器：大于 1440 时动态计算 padding，保持内容 1440 居中
+    'landing-container': 'w-full mx-auto px-[40px] sm:px-[240px] wid:px-[calc(50vw-720px)]',
   },
   theme: {
     breakpoints: {
@@ -96,11 +98,12 @@ export default defineConfig({
       sm: '768px',
       md: '992px',
       lg: '1200px',
+      wid: '1440px',
       xl: '1920px',
       xxl: '3840px',
     },
     colors: {
-      primary: 'var(--primary-color)',
+      primary: 'var(--hj-primary)',
       'primary-2': 'var(--primary-color-2)',
       success: 'var(--success-color)',
       warning: 'var(--warning-color)',