feat ui设计稿
This commit is contained in:
@@ -118,31 +118,33 @@ const STATUS_VARIANTS: Record<BillStatus, 'warning' | 'success' | 'info' | 'dang
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 30:表格贴满白卡(外层 .bills__board 提供卡底),全网格浅灰线 + 浅灰表头
|
||||
.bill-table {
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
overflow-x: auto;
|
||||
|
||||
&__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: @spacing-sm @spacing-sm;
|
||||
padding: 11px 10px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid @border-color;
|
||||
border: 1px solid @project-divider;
|
||||
}
|
||||
|
||||
th {
|
||||
background: @bg-color-light;
|
||||
color: @text-color-secondary;
|
||||
font-weight: 500;
|
||||
background: @finance-table-head-bg;
|
||||
color: @text-color;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
@@ -150,28 +152,54 @@ const STATUS_VARIANTS: Record<BillStatus, 'warning' | 'success' | 'info' | 'dang
|
||||
}
|
||||
}
|
||||
|
||||
&__check {
|
||||
width: 40px;
|
||||
// 列对齐按设计 30:序号/账单号/流水号/金额/状态/操作居中,名称类左对齐
|
||||
&__table th:nth-child(1),
|
||||
&__table th:nth-child(2),
|
||||
&__table td:nth-child(1),
|
||||
&__table td:nth-child(2),
|
||||
&__table th:nth-child(4),
|
||||
&__table td:nth-child(4),
|
||||
&__table th:nth-child(5),
|
||||
&__table td:nth-child(5),
|
||||
&__table th:nth-child(7),
|
||||
&__table td:nth-child(7),
|
||||
&__table th:nth-child(8),
|
||||
&__table td:nth-child(8),
|
||||
&__table th:nth-child(9),
|
||||
&__table td:nth-child(9) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__check {
|
||||
width: 44px;
|
||||
text-align: center;
|
||||
|
||||
input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
accent-color: @primary-strong;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// 金额列与正文同色(设计 30 实取 #4B5563 常规字重)
|
||||
&__amount {
|
||||
color: @heading-color;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__ops {
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
.flex(row, center, center);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: @primary-color;
|
||||
font-size: @font-size-base;
|
||||
color: @primary-strong;
|
||||
font-size: 11px;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-hover;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,5 +207,14 @@ const STATUS_VARIANTS: Record<BillStatus, 'warning' | 'success' | 'info' | 'dang
|
||||
text-align: center;
|
||||
padding: @spacing-xl 0;
|
||||
}
|
||||
|
||||
// 状态列按设计 30 为纯文字(去底色徽标)
|
||||
:deep(.status-tag) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user