feat ui设计稿bug修复

src/views/finance/cpns/InvoiceTitleCard.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { StatusTag } from '@/components'
 import type { InvoiceTitle } from '@/types/business/finance'
 
 interface Props {
@@ -16,10 +15,11 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <!-- 设计 35/36：一行一张宽卡——左上默认徽标、右上操作按钮，下方三栏字段 -->
+  <!-- 设计 35/36：整幅宽卡——左侧「默认抬头」蓝胶囊，右侧操作按钮；下方三栏字段 -->
   <div class="invoice-title-card">
     <div class="invoice-title-card__top">
-      <StatusTag v-if="invoiceTitle.isDefault" label="默认" variant="success" />
+      <span v-if="invoiceTitle.isDefault" class="invoice-title-card__badge">默认抬头</span>
+      <span v-else class="invoice-title-card__badge-placeholder" />
       <div class="invoice-title-card__actions">
         <button
           class="invoice-title-card__btn"
@@ -27,7 +27,7 @@ const emit = defineEmits<{
         >
           {{ invoiceTitle.isDefault ? '取消默认' : '设为默认' }}
         </button>
-        <button class="invoice-title-card__btn is-danger" @click="emit('delete', invoiceTitle.id)">
+        <button class="invoice-title-card__btn" @click="emit('delete', invoiceTitle.id)">
           删除
         </button>
         <button class="invoice-title-card__btn" @click="emit('edit', invoiceTitle)">
@@ -38,112 +38,114 @@ const emit = defineEmits<{
 
     <div class="invoice-title-card__cols">
       <div class="invoice-title-card__col">
-        <StatusTag
-          :label="invoiceTitle.type"
-          :variant="invoiceTitle.type === '企业单位' ? 'primary' : 'info'"
-        />
+        <span class="invoice-title-card__label">抬头类型</span>
+        <span class="invoice-title-card__value">{{ invoiceTitle.type }}</span>
       </div>
       <div class="invoice-title-card__col">
-        <span class="invoice-title-card__label text-secondary">发票抬头</span>
-        <p class="invoice-title-card__title">
-          {{ invoiceTitle.title }}
-        </p>
+        <span class="invoice-title-card__label">发票抬头</span>
+        <span class="invoice-title-card__value">{{ invoiceTitle.title }}</span>
       </div>
       <div class="invoice-title-card__col">
-        <span class="invoice-title-card__label text-secondary">税号</span>
-        <span class="invoice-title-card__tax-no">{{ invoiceTitle.taxNo }}</span>
+        <span class="invoice-title-card__label">税号</span>
+        <span class="invoice-title-card__value">{{ invoiceTitle.taxNo }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
+// 设计 35：卡片 (70,229) 1780×129 / (70,372) 1780×88
 .invoice-title-card {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 14px 20px;
-  border: none;
+  gap: 0;
+  width: 1780px;
+  min-height: 88px;
+  padding: 0 33.56px 0 27px; // 徽标 x98.58、按钮右缘 1820.6（卡内 1750.6）
+  border: 1px solid @finance-card-line;
   border-radius: @radius-base;
   background: @white;
-  box-shadow: @shadow-base;
+  box-sizing: border-box;
 
-  // 顶行：默认徽标居左、操作按钮居右（设计 35 同一行）
+  // 顶行：徽标 (98.58,249) 88.17×22 + 操作按钮 (1632.4,277.5) 各 12/500
   &__top {
     .flex(row, space-between, center);
-    min-height: 24px;
+    height: 49px; // 徽标盒 y249（卡顶 229 + 20 居中）
+    flex-shrink: 0;
   }
 
+  // 「默认抬头」胶囊：蓝底白字 11/500
+  &__badge {
+    .flex(row, center, center);
+    height: 22px;
+    padding: 0 12px;
+    border-radius: 4px;
+    background: @primary-strong;
+    color: @white;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 15px;
+  }
+
+  &__badge-placeholder {
+    height: 22px;
+  }
+
+  // 操作按钮：纯文字 12/500 #4B5563，盒距 20.8（文字盒 67.2/43.2/43.2 + 间隔 4）
   &__actions {
     .flex(row, flex-end, center);
-    gap: @spacing-sm;
+    gap: 24px;
   }
 
-  // 描边小按钮：浅灰边白底 11px（设计 35 实取）
   &__btn {
-    height: 24px;
-    padding: 0 10px;
-    border: 1px solid @border-color;
-    border-radius: @radius-sm;
-    background: @white;
-    color: @text-color;
-    font-size: 11px;
-    cursor: pointer;
-    transition: all 0.2s;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: @finance-entry-text;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    transition: color 0.2s;
 
-    &:hover:not(:disabled) {
-      border-color: @primary-strong;
+    &:hover {
       color: @primary-strong;
     }
-
-    &.is-danger:hover:not(:disabled) {
-      border-color: @danger-color;
-      color: @danger-color;
-    }
   }
 
-  // 三栏字段：列起点按设计 35（x97 / x579 / x1061，卡内 0 / 371 / 742 CSS）
+  // 三栏：列起点（卡内，卡 x70 → 内容 x97/579/1061）= 0 / 482 / 964
   &__cols {
-    display: grid;
-    grid-template-columns: minmax(0, 371px) minmax(0, 371px) minmax(0, 1fr);
-    gap: @spacing-base;
+    .flex(row, flex-start, flex-start);
+    gap: 0;
+    padding-top: 2px; // 顶行 59 → 标签 ink y293（卡内 64）
+    padding-bottom: 30px; // 值底 y335（卡内 106）→ 卡底 358
   }
 
   &__col {
     .flex(column, flex-start, flex-start);
-    gap: 6px;
-    min-width: 0;
+    gap: 8px; // 标签 ink 293 → 值 ink 316
+    width: 482px;
+    box-sizing: border-box;
+
+    &:last-child {
+      width: auto;
+      flex: 1;
+      min-width: 0;
+    }
   }
 
-  // 标签 11 设计px → 11px 灰；值 14 设计px → 11px 粗体深色
   &__label {
     font-size: 11px;
+    font-weight: 400;
+    line-height: 15px;
+    color: @finance-muted-text;
   }
 
-  &__title,
-  &__tax-no {
-    font-size: 11px;
+  &__value {
+    font-size: 14px;
     font-weight: 700;
-    color: @heading-color;
+    line-height: 19px;
+    color: @finance-ink;
     word-break: break-all;
   }
-
-  // 抬头类型值：去掉徽标底色，按设计为纯文字
-  :deep(.status-tag) {
-    padding: 0;
-    background: transparent;
-    color: @heading-color;
-    font-size: 11px;
-    font-weight: 700;
-    align-self: flex-start;
-  }
-
-  // 「默认」徽标：设计 35 为实底蓝底白字小胶囊
-  :deep(.status-tag--success) {
-    padding: 2px 8px;
-    background: @primary-strong;
-    color: @white;
-    font-weight: 500;
-  }
 }
 </style>