152 lines
4.0 KiB
Vue
152 lines
4.0 KiB
Vue
<script setup lang="ts">
|
||
import type { InvoiceTitle } from '@/types/business/finance'
|
||
|
||
interface Props {
|
||
invoiceTitle: InvoiceTitle
|
||
}
|
||
|
||
defineProps<Props>()
|
||
|
||
const emit = defineEmits<{
|
||
setDefault: [id: string]
|
||
edit: [item: InvoiceTitle]
|
||
delete: [id: string]
|
||
}>()
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 设计 35/36：整幅宽卡——左侧「默认抬头」蓝胶囊，右侧操作按钮；下方三栏字段 -->
|
||
<div class="invoice-title-card">
|
||
<div class="invoice-title-card__top">
|
||
<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"
|
||
@click="emit('setDefault', invoiceTitle.id)"
|
||
>
|
||
{{ invoiceTitle.isDefault ? '取消默认' : '设为默认' }}
|
||
</button>
|
||
<button class="invoice-title-card__btn" @click="emit('delete', invoiceTitle.id)">
|
||
删除
|
||
</button>
|
||
<button class="invoice-title-card__btn" @click="emit('edit', invoiceTitle)">
|
||
编辑
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="invoice-title-card__cols">
|
||
<div class="invoice-title-card__col">
|
||
<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">发票抬头</span>
|
||
<span class="invoice-title-card__value">{{ invoiceTitle.title }}</span>
|
||
</div>
|
||
<div class="invoice-title-card__col">
|
||
<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: 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-sizing: border-box;
|
||
|
||
// 顶行：徽标 (98.58,249) 88.17×22 + 操作按钮 (1632.4,277.5) 各 12/500
|
||
&__top {
|
||
.flex(row, space-between, center);
|
||
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: 24px;
|
||
}
|
||
|
||
&__btn {
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
color: @finance-entry-text;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
transition: color 0.2s;
|
||
|
||
&:hover {
|
||
color: @primary-strong;
|
||
}
|
||
}
|
||
|
||
// 三栏：列起点（卡内，卡 x70 → 内容 x97/579/1061）= 0 / 482 / 964
|
||
&__cols {
|
||
.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: 8px; // 标签 ink 293 → 值 ink 316
|
||
width: 482px;
|
||
box-sizing: border-box;
|
||
|
||
&:last-child {
|
||
width: auto;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
}
|
||
|
||
&__label {
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
line-height: 15px;
|
||
color: @finance-muted-text;
|
||
}
|
||
|
||
&__value {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 19px;
|
||
color: @finance-ink;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
</style>
|