zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ui设计稿

Browse Source
This commit is contained in:
Ironsp
2026-09-30 15:55:36 +08:00
parent ce8210fb3f
commit 9ab6253c81
102 changed files with 4855 additions and 2359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/finance/cpns/InvoiceTitleCard.vue
View File

@@ -16,95 +16,84 @@ const emit = defineEmits<{
</script>
<template>
<!-- 设计 35/36：一行一张宽卡——左上默认徽标、右上操作按钮，下方三栏字段 -->
<div class="invoice-title-card">
<div class="invoice-title-card__head">
<span class="invoice-title-card__label text-secondary">发票抬头</span>
<StatusTag
:label="invoiceTitle.type"
:variant="invoiceTitle.type === '企业单位' ? 'primary' : 'info'"
/>
<div class="invoice-title-card__top">
<StatusTag v-if="invoiceTitle.isDefault" label="默认" variant="success" />
</div>
<p class="invoice-title-card__title">
{{ invoiceTitle.title }}
</p>
<div class="invoice-title-card__tax">
<span class="invoice-title-card__label text-secondary">税号</span>
<span class="invoice-title-card__tax-no">{{ invoiceTitle.taxNo }}</span>
<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 is-danger" @click="emit('delete', invoiceTitle.id)">
删除
</button>
<button class="invoice-title-card__btn" @click="emit('edit', invoiceTitle)">
编辑
</button>
</div>
</div>
<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('edit', invoiceTitle)">
编辑
</button>
<button class="invoice-title-card__btn is-danger" @click="emit('delete', invoiceTitle.id)">
删除
</button>
<div class="invoice-title-card__cols">
<div class="invoice-title-card__col">
<StatusTag
:label="invoiceTitle.type"
:variant="invoiceTitle.type === '企业单位' ? 'primary' : 'info'"
/>
</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>
</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>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.invoice-title-card {
padding: @spacing-base;
border: 1px solid @border-color;
display: flex;
flex-direction: column;
gap: 16px;
padding: 14px 20px;
border: none;
border-radius: @radius-base;
background: @white;
.flex(column, flex-start);
gap: @spacing-sm;
box-shadow: @shadow-base;
&__head {
.flex(row, flex-start, center);
gap: @spacing-sm;
}
&__label {
font-size: @font-size-sm;
}
&__title {
font-size: @font-size-lg;
font-weight: 600;
color: @heading-color;
word-break: break-all;
}
&__tax {
.flex(row, flex-start, center);
gap: @spacing-sm;
}
&__tax-no {
font-size: @font-size-base;
color: @text-color;
word-break: break-all;
// 顶行：默认徽标居左、操作按钮居右（设计 35 同一行）
&__top {
.flex(row, space-between, center);
min-height: 24px;
}
&__actions {
.flex(row, flex-start);
.flex(row, flex-end, center);
gap: @spacing-sm;
margin-top: @spacing-xs;
}
// 描边小按钮：浅灰边白底 11px（设计 35 实取）
&__btn {
height: 28px;
padding: 0 @spacing-sm;
border: 1px solid @border-color-dark;
height: 24px;
padding: 0 10px;
border: 1px solid @border-color;
border-radius: @radius-sm;
background: @white;
color: @text-color;
font-size: @font-size-sm;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
&:hover:not(:disabled) {
border-color: @primary-color;
color: @primary-color;
border-color: @primary-strong;
color: @primary-strong;
}
&.is-danger:hover:not(:disabled) {
@@ -112,5 +101,49 @@ const emit = defineEmits<{
color: @danger-color;
}
}
// 三栏字段：列起点按设计 35（x97 / x579 / x1061，卡内 0 / 371 / 742 CSS）
&__cols {
display: grid;
grid-template-columns: minmax(0, 371px) minmax(0, 371px) minmax(0, 1fr);
gap: @spacing-base;
}
&__col {
.flex(column, flex-start, flex-start);
gap: 6px;
min-width: 0;
}
// 标签 11 设计px → 11px 灰；值 14 设计px → 11px 粗体深色
&__label {
font-size: 11px;
}
&__title,
&__tax-no {
font-size: 11px;
font-weight: 700;
color: @heading-color;
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>