feat ui设计稿

src/views/home/cpns/HomeQuickEntries.vue

@@ -87,14 +87,16 @@ function onMore(): void {
 
 <style lang="less" scoped>
 .home-quick {
+  position: relative;
   .flex(column, flex-start, stretch);
   flex-shrink: 0;
-  width: 320px;
-  gap: @spacing-base;
-  padding: @spacing-lg;
+  // 设计稿右卡 722×245 设计px → 556 宽；白底 + 浅灰描边
+  width: 556px;
+  gap: 0;
+  padding: 14px 31px 21px;
+  border: 1px solid @home-card-border;
   border-radius: @radius-lg;
   background: @white;
-  box-shadow: @shadow-base;
 
   &__head {
     .flex(row, flex-start);
@@ -102,25 +104,28 @@ function onMore(): void {
   }
 
   &__head-icon {
-    color: @heading-color;
-    font-size: @font-size-lg;
+    color: @home-ink;
+    font-size: @font-size-xl;
   }
 
   &__title {
-    font-size: @font-size-lg;
-    font-weight: 600;
-    color: @heading-color;
+    // 设计稿卡内标题 36 设计px / 700 / #121212
+    font-size: @font-size-xxl;
+    font-weight: 700;
+    color: @home-ink;
   }
 
   &__list {
-    .flex(row, space-between, flex-start);
-    gap: @spacing-sm;
+    .flex(row, flex-start, flex-start);
+    // 设计稿入口间距 127 设计px（图标 90 + 间隙 37）≈ 70 + 28
+    gap: 28px;
+    margin-top: 16px;
   }
 
   &__item {
     .flex(column, flex-start, center);
-    gap: @spacing-sm;
-    flex: 1;
+    gap: 8px;
+    flex: none;
     transition: transform 0.2s;
 
     &:hover {
@@ -130,55 +135,63 @@ function onMore(): void {
 
   &__icon {
     .flex(row, center);
-    width: 44px;
-    height: 44px;
+    // 设计稿图标块 90×90 设计px ≈ 70 CSS
+    width: 70px;
+    height: 70px;
     border-radius: @radius-base;
-    font-size: @font-size-xl;
+    font-size: 28px;
 
+    // 底色按设计稿采样（tone → 设计稿色）
     &--amber {
-      background: #fff3e0;
+      background: @home-quick-pink;
     }
 
     &--blue {
-      background: @primary-light;
+      background: @home-quick-peach;
     }
 
     &--green {
-      background: #e7f8ec;
+      background: @home-quick-green;
     }
 
     &--purple {
-      background: #f0eaff;
+      background: @home-quick-purple;
     }
 
     &--red {
-      background: #ffeceb;
+      background: fade(@danger-color, 15%);
     }
 
     &--cyan {
-      background: #e4f6fa;
+      background: @home-quick-blue;
     }
   }
 
   &__img {
-    width: 24px;
-    height: 24px;
+    width: 32px;
+    height: 32px;
     object-fit: contain;
   }
 
   &__label {
-    font-size: @font-size-sm;
-    color: @text-color;
+    // 设计稿入口文字 18 设计px / 500 / #121212
+    font-size: @font-size-base;
+    font-weight: 500;
+    color: @home-ink;
     text-align: center;
   }
 
   &__more {
-    align-self: flex-end;
+    // 设计稿「更多」箭头位于卡片右侧垂直居中
+    position: absolute;
+    top: 50%;
+    right: 31px;
     padding: 0;
     border: 0;
+    transform: translateY(-50%);
     background: transparent;
     font-size: @font-size-sm;
-    color: @text-color-secondary;
+    color: @home-ring;
     cursor: pointer;
   }
 }