feat ui设计稿bug修复

src/views/finance/index.vue

@@ -3,6 +3,7 @@ import { onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { RouterLink } from 'vue-router'
 import { ElMessage } from 'element-plus'
+import { PageHead } from '@/components'
 // 页面容器：只做组件组合与事件中转，数据只经 store
 import { useFinanceStore } from '@/stores/modules/finance'
 import FinanceChart from './cpns/FinanceChart.vue'
@@ -11,6 +12,13 @@ import FinanceOverview from './cpns/FinanceOverview.vue'
 const financeStore = useFinanceStore()
 const { stats } = storeToRefs(financeStore)
 
+const ENTRIES = [
+  { label: '账单明细', to: '/finance/bills' },
+  { label: '待支付', to: '/finance/bills' },
+  { label: '发票申请', to: '/finance/invoices' },
+  { label: '报表导出', to: '' },
+] as const
+
 function onPeriodChange(period: string): void {
   void financeStore.fetchStats(period)
 }
@@ -27,92 +35,79 @@ onMounted(() => {
 
 <template>
   <div class="finance">
-    <header class="finance__head">
-      <h1 class="finance__title">
-        财务中心
-      </h1>
-      <p class="finance__slogan text-secondary">
-        账单支付、发票申请与报表导出一站式管理。
-      </p>
-    </header>
+    <PageHead
+      title="财务中心"
+      slogan="账单、支付、发票统一财务管理中心"
+    />
 
-    <div class="finance__top">
-      <FinanceOverview
-        :stats="stats"
-        @period-change="onPeriodChange"
-        @export="onExport"
-      />
+    <div class="container">
+      <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 class="finance__entries">
+          <template v-for="entry in ENTRIES" :key="entry.label">
+            <RouterLink
+              v-if="entry.to"
+              :to="entry.to"
+              class="finance__entry"
+            >
+              {{ entry.label }}
+            </RouterLink>
+            <button
+              v-else
+              class="finance__entry"
+              @click="onExport"
+            >
+              {{ entry.label }}
+            </button>
+          </template>
+        </div>
       </div>
-    </div>
 
-    <FinanceChart :distribution="stats?.distribution ?? []" />
+      <FinanceChart :distribution="stats?.distribution ?? []" />
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
+// 财务中心概览（设计 6cd4aa76，1920 画布 1:1）
+//   页头区 (70,162) 1780×17 副标语 13/400 #6B7280（标题 22/700 由全站页头统一渲染）
+//   概览行 y195 h135：左渐变卡 1093.84 宽、右白卡 672.16 宽（间距 14）
+//   图表卡 (70,344) 1780×378，白底 + #F0F1F3 描边
 .finance {
-  .flex(column, flex-start);
-  align-items: stretch;
-  gap: @spacing-base;
   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: 17px;
-    font-weight: 700;
-    color: @heading-color;
-  }
-
-  &__slogan {
-    margin-top: @spacing-xs;
-    font-size: 11px;
-    text-align: center;
-  }
-
-  // 顶部行：左「累计消费」渐变卡 + 右快捷入口白卡（设计 37 同排并列）
+  // 顶部行：左渐变卡 + 右快捷卡，间距 14
   &__top {
     .flex(row, flex-start, stretch);
-    gap: @spacing-base;
-    flex-wrap: wrap;
+    gap: 14px;
+    margin-top: -56px;            // 页头白条通栏高 179，卡片按设计压在 y195
   }
 
+  // 右侧快捷入口白卡 672.16×135
   &__entries {
-    .flex(row, space-around, center);
-    flex: 0 0 500px;
-    gap: @spacing-base;
-    padding: @spacing-base @spacing-lg;
-    border-radius: @radius-base;
+    .flex(row, space-between, center);
+    flex: 0 0 672px;
+    height: 135px;
+    padding: 0 34px;
+    border: 1px solid @finance-card-line;
+    border-radius: @radius-base;   // 设计无圆角？——卡面 8 以内，与全站一致
     background: @white;
-    box-shadow: @shadow-base;
+    box-sizing: border-box;
   }
 
   &__entry {
-    .flex(column, center, center);
-    gap: @spacing-sm;
-    width: auto;
-    height: auto;
+    .flex(row, center, center);
+    height: 100%;
     border: none;
-    border-radius: 0;
     background: transparent;
-    color: @text-color;
+    color: @finance-entry-text;
     font-size: 11px;
+    font-weight: 400;
     cursor: pointer;
     transition: color 0.2s;
 
@@ -121,14 +116,5 @@ onMounted(() => {
       color: @primary-strong;
     }
   }
-
-  &__entry-icon {
-    .flex(row, center, center);
-    width: 36px;
-    height: 36px;
-    border-radius: @radius-base;
-    background: @bg-color;
-    font-size: 18px;
-  }
 }
 </style>