feat ui设计稿

src/views/finance/index.vue

@@ -36,75 +36,99 @@ onMounted(() => {
       </p>
     </header>
 
-    <FinanceOverview
-      :stats="stats"
-      @period-change="onPeriodChange"
-      @export="onExport"
-    />
+    <div class="finance__top">
+      <FinanceOverview
+        :stats="stats"
+        @period-change="onPeriodChange"
+        @export="onExport"
+      />
+
+      <div class="finance__entries">
+        <RouterLink to="/finance/invoices" class="finance__entry">
+          <span class="finance__entry-icon">🧾</span>
+          <span class="finance__entry-name">发票申请</span>
+        </RouterLink>
+        <RouterLink to="/finance/bills" class="finance__entry">
+          <span class="finance__entry-icon">📋</span>
+          <span class="finance__entry-name">账单明细</span>
+        </RouterLink>
+        <button class="finance__entry" @click="onExport">
+          <span class="finance__entry-icon">📊</span>
+          <span class="finance__entry-name">报表导出</span>
+        </button>
+      </div>
+    </div>
 
     <FinanceChart :distribution="stats?.distribution ?? []" />
-
-    <div class="finance__entries">
-      <RouterLink to="/finance/invoices" class="finance__entry">
-        <span class="finance__entry-icon">🧾</span>
-        <span class="finance__entry-name">发票申请</span>
-      </RouterLink>
-      <RouterLink to="/finance/bills" class="finance__entry">
-        <span class="finance__entry-icon">📋</span>
-        <span class="finance__entry-name">账单明细</span>
-      </RouterLink>
-      <button class="finance__entry" @click="onExport">
-        <span class="finance__entry-icon">📊</span>
-        <span class="finance__entry-name">报表导出</span>
-      </button>
-    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 .finance {
   .flex(column, flex-start);
+  align-items: stretch;
   gap: @spacing-base;
-  padding-top: @spacing-xl;
-  padding-bottom: @spacing-xxl;
+  width: 100%;
+  max-width: @container-width;
+  margin: 0 auto;
+  padding: 40px @spacing-base @spacing-xxl;
 
+  // 设计 37：页头标题 22 设计px × 0.77 ≈ 17px 加粗，副标语 13 设计px → 11px 居中
   &__title {
-    font-size: @font-size-xxl;
-    font-weight: 600;
+    font-size: 17px;
+    font-weight: 700;
     color: @heading-color;
   }
 
   &__slogan {
     margin-top: @spacing-xs;
-    font-size: @font-size-base;
+    font-size: 11px;
+    text-align: center;
+  }
+
+  // 顶部行：左「累计消费」渐变卡 + 右快捷入口白卡（设计 37 同排并列）
+  &__top {
+    .flex(row, flex-start, stretch);
+    gap: @spacing-base;
+    flex-wrap: wrap;
   }
 
   &__entries {
-    .flex(row, flex-start);
+    .flex(row, space-around, center);
+    flex: 0 0 500px;
     gap: @spacing-base;
+    padding: @spacing-base @spacing-lg;
+    border-radius: @radius-base;
+    background: @white;
+    box-shadow: @shadow-base;
   }
 
   &__entry {
-    .flex(row, center, center);
+    .flex(column, center, center);
     gap: @spacing-sm;
-    width: 200px;
-    height: 72px;
-    border: 1px solid @border-color;
-    border-radius: @radius-base;
-    background: @white;
+    width: auto;
+    height: auto;
+    border: none;
+    border-radius: 0;
+    background: transparent;
     color: @text-color;
-    font-size: @font-size-lg;
+    font-size: 11px;
     cursor: pointer;
-    transition: all 0.2s;
+    transition: color 0.2s;
 
     &:hover {
-      border-color: @primary-color;
-      color: @primary-color;
+      border: none;
+      color: @primary-strong;
     }
   }
 
   &__entry-icon {
-    font-size: @font-size-xl;
+    .flex(row, center, center);
+    width: 36px;
+    height: 36px;
+    border-radius: @radius-base;
+    background: @bg-color;
+    font-size: 18px;
   }
 }
 </style>