feat ui设计稿
This commit is contained in:
Ironsp
@@ -79,7 +79,14 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="bill-detail__field">
|
||||
<span class="bill-detail__label text-secondary">订单金额</span>
|
||||
<span class="bill-detail__value bill-detail__value--amount">¥{{ formatMoney(currentBill.amount) }}</span>
|
||||
<!-- 设计 31：金额随状态取色——已支付红 / 待支付橙 / 未到期深灰 -->
|
||||
<span
|
||||
class="bill-detail__value bill-detail__value--amount"
|
||||
:class="{
|
||||
'is-pending': currentBill.status === '待支付',
|
||||
'is-idle': currentBill.status === '未到期' || currentBill.status === '已取消',
|
||||
}"
|
||||
>¥{{ formatMoney(currentBill.amount) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -143,17 +150,28 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bill-detail {
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-xxl;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
|
||||
// 设计 31：面包屑 13 设计px → 11px，前缀灰、当前页深灰
|
||||
&__breadcrumb {
|
||||
margin-bottom: @spacing-base;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
|
||||
> span:last-child {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 31：白卡居中（对应设计三张窄卡的中轴布局），圆角 8、柔阴影
|
||||
&__card {
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
max-width: 440px;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-base 20px 20px;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
}
|
||||
@@ -164,69 +182,114 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
// 状态徽标压成设计稿的深色粗体状态词
|
||||
:deep(.status-tag) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: @heading-color;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// 字段行：标签左（灰 11px）、值右（深色粗体）——设计 31 左右分栏
|
||||
&__fields {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-sm;
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__field {
|
||||
.flex(row, flex-start, center);
|
||||
.flex(row, space-between, center);
|
||||
gap: @spacing-base;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: @heading-color;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
|
||||
// 设计 31：付款金额 已支付 #EF4444 / 待支付 #F59E0B / 未到期深灰，18 设计px → 14px 粗体
|
||||
&--amount {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: @danger-color;
|
||||
}
|
||||
|
||||
&.is-pending {
|
||||
color: @finance-pending;
|
||||
}
|
||||
|
||||
&.is-idle {
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__pay {
|
||||
margin-top: @spacing-lg;
|
||||
margin-top: @spacing-base;
|
||||
}
|
||||
|
||||
&__pay-info {
|
||||
margin-top: @spacing-lg;
|
||||
margin-top: @spacing-base;
|
||||
padding-top: @spacing-base;
|
||||
border-top: 1px solid @border-color;
|
||||
border-top: 1px solid @project-divider;
|
||||
}
|
||||
|
||||
&__sub-title {
|
||||
margin-bottom: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__tip {
|
||||
margin-top: @spacing-lg;
|
||||
padding: @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
margin-top: @spacing-base;
|
||||
padding: 12px;
|
||||
border-radius: @radius-sm;
|
||||
background: @bg-color;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: @spacing-xl 0;
|
||||
text-align: center;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__back {
|
||||
margin-top: @spacing-lg;
|
||||
max-width: 440px;
|
||||
margin: @spacing-base auto 0;
|
||||
}
|
||||
|
||||
// 设计 31/32：按钮蓝底 #024FFF（返回/立即支付同色）
|
||||
:deep(.app-button--primary) {
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__back :deep(.app-button--default) {
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
background: @primary-color;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -75,84 +75,208 @@ onMounted(() => {
|
||||
<span>账单明细</span>
|
||||
</nav>
|
||||
|
||||
<div class="bills__tabs">
|
||||
<button
|
||||
v-for="tab in STATUS_TABS"
|
||||
:key="tab.value"
|
||||
class="bills__tab"
|
||||
:class="{ 'is-active': query.status === tab.value }"
|
||||
@click="onTab(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
<!-- 设计 30：状态分段 Tab 与搜索栏同排共处一张白卡 -->
|
||||
<div class="bills__toolbar">
|
||||
<div class="bills__tabs">
|
||||
<button
|
||||
v-for="tab in STATUS_TABS"
|
||||
:key="tab.value"
|
||||
class="bills__tab"
|
||||
:class="{ 'is-active': query.status === tab.value }"
|
||||
@click="onTab(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<FilterPanel
|
||||
v-model:keyword="keyword"
|
||||
keyword-placeholder="搜索账单名称 / 账单号 / 项目名称"
|
||||
@search="onSearch"
|
||||
@reset="onReset"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FilterPanel
|
||||
v-model:keyword="keyword"
|
||||
keyword-placeholder="搜索账单名称 / 账单号 / 项目名称"
|
||||
@search="onSearch"
|
||||
@reset="onReset"
|
||||
/>
|
||||
<div class="bills__board">
|
||||
<BillTable
|
||||
:bills="list"
|
||||
:selected-ids="selectedIds"
|
||||
@update:selection="selectedIds = $event"
|
||||
@view="onView"
|
||||
@pay="onPay"
|
||||
/>
|
||||
|
||||
<BillTable
|
||||
:bills="list"
|
||||
:selected-ids="selectedIds"
|
||||
@update:selection="selectedIds = $event"
|
||||
@view="onView"
|
||||
@pay="onPay"
|
||||
/>
|
||||
<PaginationBar
|
||||
:page="query.page"
|
||||
:page-size="query.pageSize"
|
||||
:total="total"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BillSummaryBar
|
||||
:bills="list"
|
||||
:selected-ids="selectedIds"
|
||||
@batch-pay="onBatchPay"
|
||||
/>
|
||||
|
||||
<PaginationBar
|
||||
:page="query.page"
|
||||
:page-size="query.pageSize"
|
||||
:total="total"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bills {
|
||||
.flex(column, flex-start);
|
||||
align-items: stretch;
|
||||
gap: @spacing-base;
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-xxl;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
|
||||
// 设计 30：面包屑 13 设计px → 11px，前缀灰、当前页深灰
|
||||
&__breadcrumb {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
|
||||
> span:last-child {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 顶部工具条：Tab 分段组 + 搜索栏（一张白卡）
|
||||
&__toolbar {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
padding: 10px @spacing-base;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
|
||||
:deep(.filter-panel) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__body) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__bar) {
|
||||
gap: @spacing-sm;
|
||||
}
|
||||
|
||||
:deep(.filter-panel__input) {
|
||||
order: 1;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
height: 26px;
|
||||
border: none;
|
||||
border-radius: @radius-sm;
|
||||
background: @finance-field-bg;
|
||||
font-size: 11px;
|
||||
|
||||
&::placeholder {
|
||||
color: @contract-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计顺序：… 重置 搜索（FilterPanel 模板为搜索在前，用 order 调序）
|
||||
:deep(.filter-panel__btn--primary) {
|
||||
order: 3;
|
||||
height: 26px;
|
||||
padding: 0 14px;
|
||||
border: none;
|
||||
background: @primary-strong;
|
||||
font-size: 11px;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.filter-panel__btn:not(.filter-panel__btn--primary)) {
|
||||
order: 2;
|
||||
height: 26px;
|
||||
padding: 0 14px;
|
||||
border: none;
|
||||
background: @project-quiet-btn;
|
||||
color: @text-color;
|
||||
font-size: 11px;
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background: @border-color;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 状态 Tab：描边分段组，选中实底 #024FFF（设计 30）
|
||||
&__tabs {
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-sm;
|
||||
gap: 0;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-sm;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
height: 34px;
|
||||
padding: 0 @spacing-base;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
height: 26px;
|
||||
padding: 0 14px;
|
||||
border: none;
|
||||
border-right: 1px solid @border-color;
|
||||
border-radius: 0;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
color: @primary-strong;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-color: @primary-color;
|
||||
background: @primary-color;
|
||||
border-right-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格 + 分页共处白卡（设计 30：分页在卡片内右下角）
|
||||
&__board {
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 分页：右对齐小方格，选中浅蓝底蓝字（设计 30/35）
|
||||
.pagination {
|
||||
justify-content: flex-end;
|
||||
padding: 12px @spacing-base @spacing-base;
|
||||
}
|
||||
|
||||
:deep(.pagination__btn) {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
border-color: @border-color;
|
||||
border-radius: @radius-sm;
|
||||
color: @text-color-secondary;
|
||||
font-size: 11px;
|
||||
|
||||
&.is-active {
|
||||
border-color: @primary-strong;
|
||||
background: @finance-page-active;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,17 +34,22 @@ function onBatchPay(): void {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 设计 30：整幅白条——左「已选择 N 笔订单」+ 统计，右「合计：¥ 金额 + 立即支付」 -->
|
||||
<div class="bill-summary">
|
||||
<div class="bill-summary__stats">
|
||||
<span class="bill-summary__stat">总笔数：<strong>{{ totalCount }}</strong></span>
|
||||
<span class="bill-summary__stat">总金额：<strong>¥{{ formatMoney(totalAmount) }}</strong></span>
|
||||
<span class="bill-summary__stat">待支付：<strong>{{ pendingCount }}</strong></span>
|
||||
<div class="bill-summary__left">
|
||||
<span class="bill-summary__selected">
|
||||
已选择<strong>{{ selectedBills.length }}</strong>笔订单
|
||||
</span>
|
||||
<div class="bill-summary__stats">
|
||||
<span class="bill-summary__stat">总笔数：<strong>{{ totalCount }}</strong></span>
|
||||
<span class="bill-summary__stat">总金额：<strong>¥{{ formatMoney(totalAmount) }}</strong></span>
|
||||
<span class="bill-summary__stat">待支付：<strong>{{ pendingCount }}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bill-summary__right">
|
||||
<span class="bill-summary__selected">
|
||||
已选择{{ selectedBills.length }}笔订单 · 合计：¥{{ formatMoney(selectedAmount) }}
|
||||
</span>
|
||||
<span class="bill-summary__label">合计：</span>
|
||||
<span class="bill-summary__amount">¥{{ formatMoney(selectedAmount) }}</span>
|
||||
<AppButton
|
||||
type="primary"
|
||||
:disabled="!canPay"
|
||||
@@ -59,30 +64,73 @@ function onBatchPay(): void {
|
||||
<style lang="less" scoped>
|
||||
.bill-summary {
|
||||
.flex(row, space-between, center);
|
||||
padding: @spacing-base @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
gap: @spacing-base;
|
||||
margin: 0 -16px;
|
||||
padding: 10px @spacing-base;
|
||||
border-radius: 0;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
|
||||
&__left {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-lg;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__selected {
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
white-space: nowrap;
|
||||
|
||||
strong {
|
||||
margin: 0 2px;
|
||||
color: @danger-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
.flex(row, flex-start);
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-lg;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
|
||||
strong {
|
||||
color: @heading-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
.flex(row, flex-end, center);
|
||||
gap: @spacing-base;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__selected {
|
||||
font-size: @font-size-base;
|
||||
&__label {
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
// 合计金额：设计 30 实取 20 设计px → 15px 粗体红
|
||||
&__amount {
|
||||
margin-right: @spacing-sm;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: @danger-color;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 「立即支付」：设计 30 实取橙色按钮
|
||||
:deep(.app-button--primary) {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
background: @finance-summary-cta;
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
|
||||
&:hover {
|
||||
background: @warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -39,6 +39,25 @@ function percentOf(value: number): number {
|
||||
业务类型分布
|
||||
</h3>
|
||||
<div class="finance-chart__body">
|
||||
<!-- 设计 37：横向网格线 + 等宽柱条（柱高按占比换算） -->
|
||||
<div class="finance-chart__plot">
|
||||
<div class="finance-chart__grid" aria-hidden="true">
|
||||
<i class="finance-chart__line" />
|
||||
<i class="finance-chart__line" />
|
||||
<i class="finance-chart__line" />
|
||||
<i class="finance-chart__line" />
|
||||
<i class="finance-chart__line" />
|
||||
</div>
|
||||
<div class="finance-chart__bars">
|
||||
<span
|
||||
v-for="item in distribution"
|
||||
:key="item.name"
|
||||
class="finance-chart__bar"
|
||||
:style="{ height: `${Math.max(percentOf(item.value), 6)}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据源色环：设计稿为柱状图，此处仅保留绑定（隐藏）以免游离变量 -->
|
||||
<div class="finance-chart__pie" :style="{ background: gradient }" />
|
||||
<ul class="finance-chart__legend">
|
||||
<li
|
||||
@@ -59,52 +78,100 @@ function percentOf(value: number): number {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 37：白卡 + 蓝色竖条标题（15 设计px → 12px/700）+ 柱状图 + 横排图例
|
||||
.finance-chart {
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
padding: 20px @spacing-lg @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
margin-bottom: @spacing-base;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-strong;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
.flex(row, center, center);
|
||||
gap: @spacing-xl;
|
||||
.flex(column, center, center);
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__plot {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 184px;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
.flex(column, space-between);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
&__line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: @finance-chart-grid;
|
||||
}
|
||||
|
||||
&__bars {
|
||||
.flex(row, space-around, flex-end);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
&__bar {
|
||||
display: block;
|
||||
width: 40px;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: @finance-chart-bar;
|
||||
}
|
||||
|
||||
// 设计稿无色环：绑定保留但不参与展示
|
||||
&__pie {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: @radius-round;
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__legend {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-base;
|
||||
.flex(row, center, center);
|
||||
gap: @spacing-lg;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__legend-item {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: @radius-round;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
min-width: 72px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__value {
|
||||
|
||||
@@ -63,33 +63,39 @@ const emit = defineEmits<{
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 设计 37：整卡为蓝紫渐变（累计消费总额白字），右上角白色操作链接
|
||||
.finance-overview {
|
||||
.flex(row, space-between, center);
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
.flex(column, flex-start, stretch);
|
||||
flex: 1 1 500px;
|
||||
min-width: 0;
|
||||
padding: 14px @spacing-lg 16px;
|
||||
border-radius: @radius-base;
|
||||
background: @finance-hero-gradient;
|
||||
box-shadow: @shadow-base;
|
||||
|
||||
&__main {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-sm;
|
||||
.flex(column, flex-start, flex-start);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: @font-size-base;
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: @heading-color;
|
||||
line-height: 1.2;
|
||||
color: @white;
|
||||
font-size: 29px;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
font-size: @font-size-base;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
|
||||
&__periods {
|
||||
@@ -98,38 +104,52 @@ const emit = defineEmits<{
|
||||
}
|
||||
|
||||
&__period {
|
||||
height: 28px;
|
||||
height: 22px;
|
||||
padding: 0 @spacing-sm;
|
||||
border: 1px solid @border-color;
|
||||
border: 1px solid fade(@white, 45%);
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: @font-size-sm;
|
||||
background: fade(@white, 16%);
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
border-color: @white;
|
||||
background: fade(@white, 30%);
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&__month {
|
||||
font-size: @font-size-sm;
|
||||
font-size: 11px;
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
|
||||
// 待支付小徽标压到渐变上：半透明白底 + 白字
|
||||
:deep(.status-tag) {
|
||||
background: fade(@white, 20%);
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
// 操作链接置顶右对齐（对应设计右上角「2026年账单 ›」位置）
|
||||
&__actions {
|
||||
.flex(row, flex-start);
|
||||
order: -1;
|
||||
align-self: stretch;
|
||||
.flex(row, flex-end, center);
|
||||
gap: @spacing-base;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
font-size: @font-size-base;
|
||||
color: @primary-color;
|
||||
font-size: 11px;
|
||||
color: fade(@white, 92%);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-hover;
|
||||
color: @white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -53,8 +53,7 @@ const qrSvg = computed(() => {
|
||||
qr.addData(props.content)
|
||||
qr.make()
|
||||
return qr.createSvgTag({ cellSize: 4, margin: 2, scalable: true })
|
||||
}
|
||||
catch {
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
@@ -98,12 +97,8 @@ function onBoxClick(): void {
|
||||
<Teleport to="body">
|
||||
<div v-if="visible" class="wx-qr" @click.self="close">
|
||||
<div class="wx-qr__panel">
|
||||
<h3 class="wx-qr__title">
|
||||
微信扫码支付
|
||||
</h3>
|
||||
<p class="wx-qr__amount">
|
||||
¥{{ formatMoney(amount) }}
|
||||
</p>
|
||||
<h3 class="wx-qr__title">微信扫码支付</h3>
|
||||
<p class="wx-qr__amount">¥{{ formatMoney(amount) }}</p>
|
||||
|
||||
<div
|
||||
class="wx-qr__box"
|
||||
@@ -115,25 +110,21 @@ function onBoxClick(): void {
|
||||
<div v-else class="wx-qr__mask">
|
||||
<span class="wx-qr__mask-icon">⟳</span>
|
||||
<span class="wx-qr__mask-text">
|
||||
{{ expired ? '二维码已过期' : '二维码生成中' }}<br>点击刷新
|
||||
{{ expired ? '二维码已过期' : '二维码生成中' }}<br />点击刷新
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="wx-qr__status">
|
||||
<template v-if="!expired">
|
||||
请使用手机微信 <strong>[扫一扫]</strong> 扫描上方二维码，
|
||||
二维码 <strong class="wx-qr__count">{{ countdownText }}</strong> 后失效
|
||||
</template>
|
||||
<template v-else>
|
||||
二维码已过期，请点击二维码或下方按钮刷新
|
||||
请使用手机微信 <strong>[扫一扫]</strong> 扫描上方二维码， 二维码
|
||||
<strong class="wx-qr__count">{{ countdownText }}</strong> 后失效
|
||||
</template>
|
||||
<template v-else> 二维码已过期，请点击二维码或下方按钮刷新 </template>
|
||||
</p>
|
||||
|
||||
<div class="wx-qr__actions">
|
||||
<button class="wx-qr__btn" @click="refresh">
|
||||
刷新二维码
|
||||
</button>
|
||||
<button class="wx-qr__btn" @click="refresh">刷新二维码</button>
|
||||
<button class="wx-qr__btn wx-qr__btn--cta" @click="onPaid">
|
||||
我已完成支付
|
||||
</button>
|
||||
|
||||
@@ -36,75 +36,99 @@ onMounted(() => {
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<FinanceOverview
|
||||
:stats="stats"
|
||||
@period-change="onPeriodChange"
|
||||
@export="onExport"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<FinanceChart :distribution="stats?.distribution ?? []" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.finance {
|
||||
.flex(column, flex-start);
|
||||
align-items: stretch;
|
||||
gap: @spacing-base;
|
||||
padding-top: @spacing-xl;
|
||||
padding-bottom: @spacing-xxl;
|
||||
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: @font-size-xxl;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
margin-top: @spacing-xs;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 顶部行：左「累计消费」渐变卡 + 右快捷入口白卡（设计 37 同排并列）
|
||||
&__top {
|
||||
.flex(row, flex-start, stretch);
|
||||
gap: @spacing-base;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__entries {
|
||||
.flex(row, flex-start);
|
||||
.flex(row, space-around, center);
|
||||
flex: 0 0 500px;
|
||||
gap: @spacing-base;
|
||||
padding: @spacing-base @spacing-lg;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
.flex(row, center, center);
|
||||
.flex(column, center, center);
|
||||
gap: @spacing-sm;
|
||||
width: 200px;
|
||||
height: 72px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: @text-color;
|
||||
font-size: @font-size-lg;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
border: none;
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__entry-icon {
|
||||
font-size: @font-size-xl;
|
||||
.flex(row, center, center);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: @radius-base;
|
||||
background: @bg-color;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -146,24 +146,52 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.invoice-titles {
|
||||
.flex(column, flex-start);
|
||||
align-items: stretch;
|
||||
gap: @spacing-base;
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-xxl;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
|
||||
// 设计 35/36：面包屑 13 设计px → 11px，前缀灰、当前页深灰
|
||||
&__breadcrumb {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
|
||||
> span:last-child {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 顶部「发票管理」白卡条（设计 35：蓝竖条标题 + 右侧按钮组）
|
||||
&__head {
|
||||
.flex(row, space-between, center);
|
||||
flex-wrap: wrap;
|
||||
gap: @spacing-base;
|
||||
padding: 14px 20px;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-strong;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__filters {
|
||||
@@ -172,36 +200,51 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&__filter {
|
||||
height: 34px;
|
||||
padding: 0 @spacing-base;
|
||||
height: 26px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: @radius-base;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
border-color: @primary-strong;
|
||||
color: @primary-strong;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border-color: @primary-color;
|
||||
background: @primary-color;
|
||||
border-color: @primary-strong;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
// 「＋ 新增抬头」：设计 35 实底 #024FFF 小按钮
|
||||
:deep(.app-button--primary) {
|
||||
height: 26px;
|
||||
padding: 0 12px;
|
||||
border-radius: @radius-sm;
|
||||
background: @primary-strong;
|
||||
font-size: 11px;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 抬头卡纵排铺满（设计 35 一行一张）
|
||||
&__grid {
|
||||
.flex(row, flex-start);
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: @spacing-xl 0;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -213,12 +213,21 @@ onMounted(() => {
|
||||
<style lang="less" scoped>
|
||||
.invoices {
|
||||
.flex(column, flex-start);
|
||||
align-items: stretch;
|
||||
gap: @spacing-base;
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-xxl;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
|
||||
// 与财务中心其他页一致：面包屑 11px、前缀灰当前页深灰
|
||||
&__breadcrumb {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
|
||||
> span:last-child {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__title-card {
|
||||
@@ -230,7 +239,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
&__title-main {
|
||||
.flex(column, flex-start);
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: @spacing-xs;
|
||||
}
|
||||
|
||||
|
||||
@@ -52,12 +52,12 @@ onMounted(() => {
|
||||
<h2 class="pay-result__title">
|
||||
支付成功
|
||||
</h2>
|
||||
<p class="pay-result__amount">
|
||||
付款金额 ¥{{ formatMoney(result.amount) }}
|
||||
</p>
|
||||
<p class="pay-result__count text-secondary">
|
||||
共{{ result.bills.length }}个订单
|
||||
</p>
|
||||
<p class="pay-result__amount">
|
||||
付款金额 ¥{{ formatMoney(result.amount) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -109,130 +109,171 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pay-result {
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-xxl;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
|
||||
// 设计 32：面包屑 13 设计px → 11px，前缀灰、当前页深灰
|
||||
&__breadcrumb {
|
||||
margin-bottom: @spacing-base;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
|
||||
> span:last-child {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 32：内容为居中窄列，直接坐在页面底色上（无外层大卡）
|
||||
&__card {
|
||||
padding: @spacing-xl @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 头部：大绿圆勾 + 标题 + 「共 N 个订单 / 付款金额」同一行
|
||||
&__head {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
padding-bottom: @spacing-lg;
|
||||
border-bottom: 1px solid @border-color;
|
||||
.flex(column, center, center);
|
||||
gap: 12px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid @project-divider;
|
||||
}
|
||||
|
||||
&__check {
|
||||
.flex(row, center);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-radius: @radius-round;
|
||||
background: fade(@success-color, 12%);
|
||||
color: @success-color;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
background: @finance-result-circle;
|
||||
color: @white;
|
||||
font-size: 42px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__head-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @font-size-xl;
|
||||
font-weight: 600;
|
||||
flex-basis: 100%;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
margin-top: @spacing-xs;
|
||||
font-size: @font-size-lg;
|
||||
font-size: 14px;
|
||||
color: @danger-color;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__count {
|
||||
margin-top: @spacing-xs;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
// 支付信息：标签左灰、值右粗（设计 32 竖排行）
|
||||
&__grid {
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: @spacing-xxl;
|
||||
margin-top: @spacing-lg;
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&__grid-item {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-xs;
|
||||
.flex(row, space-between, center);
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__grid-label {
|
||||
font-size: @font-size-sm;
|
||||
font-size: 11px;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__grid-value {
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&__bills {
|
||||
margin-top: @spacing-lg;
|
||||
padding-top: @spacing-base;
|
||||
border-top: 1px solid @border-color;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&__sub-title {
|
||||
margin-bottom: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
// 已支付订单行卡：白底圆角（设计 32 实取）
|
||||
&__bill-list {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-sm;
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 6px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__bill {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
padding: @spacing-sm;
|
||||
border-radius: @radius-sm;
|
||||
background: @bg-color-light;
|
||||
font-size: @font-size-base;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: @white;
|
||||
font-size: 11px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&__bill-name {
|
||||
color: @heading-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__bill-no {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
}
|
||||
|
||||
&__bill-amount {
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 返回按钮右对齐（设计 32 在列右下）
|
||||
&__footer {
|
||||
margin-top: @spacing-lg;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
:deep(.app-button--primary) {
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: @spacing-xl 0;
|
||||
text-align: center;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -74,29 +74,42 @@ onMounted(() => {
|
||||
<span>扫码支付</span>
|
||||
</nav>
|
||||
|
||||
<div class="pay__body">
|
||||
<section class="pay__left card">
|
||||
<QrCodePanel
|
||||
:expires-in="payment?.qrExpiresInSeconds ?? 300"
|
||||
@refresh="onRefresh"
|
||||
/>
|
||||
<p class="pay__safe text-secondary">
|
||||
安全提示：本页面已通过安全验证，请勿向他人泄露付款码
|
||||
</p>
|
||||
<AppButton @click="dialogVisible = true">
|
||||
切换支付方式
|
||||
</AppButton>
|
||||
</section>
|
||||
<!-- 设计 33/34：单张大白卡——左（渠道说明 + 切换）/ 中（金额 + 二维码）/ 右（步骤 + 订单明细 + 安全提示） -->
|
||||
<div class="pay__body card">
|
||||
<section class="pay__left">
|
||||
<div class="pay__left-top">
|
||||
<p class="pay__method">
|
||||
{{ methodLabel }} · 请使用手机微信 <strong>[扫一扫]</strong> 扫描下方二维码完成支付
|
||||
</p>
|
||||
<AppButton class="pay__switch" @click="dialogVisible = true">
|
||||
切换支付方式
|
||||
</AppButton>
|
||||
</div>
|
||||
|
||||
<section class="pay__right card">
|
||||
<div class="pay__amount-block">
|
||||
<p class="pay__amount-label text-secondary">
|
||||
支付金额
|
||||
</p>
|
||||
<p class="pay__amount">¥{{ formatMoney(payment?.amount ?? currentBill?.amount ?? 0) }}</p>
|
||||
<p class="pay__method">
|
||||
{{ methodLabel }} · 请使用手机微信 <strong>[扫一扫]</strong> 扫描下方二维码完成支付
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<QrCodePanel
|
||||
:expires-in="payment?.qrExpiresInSeconds ?? 300"
|
||||
@refresh="onRefresh"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="pay__right">
|
||||
<div class="pay__steps">
|
||||
<h4 class="pay__sub-title">
|
||||
扫码支付操作步骤
|
||||
</h4>
|
||||
<ol class="pay__step-list">
|
||||
<li v-for="(step, index) in steps" :key="step" class="pay__step">
|
||||
<span class="pay__step-index">{{ index + 1 }}</span>
|
||||
<span>{{ step }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="pay__detail">
|
||||
@@ -123,29 +136,22 @@ onMounted(() => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pay__steps">
|
||||
<h4 class="pay__sub-title">
|
||||
扫码支付操作步骤
|
||||
</h4>
|
||||
<ol class="pay__step-list">
|
||||
<li v-for="(step, index) in steps" :key="step" class="pay__step">
|
||||
<span class="pay__step-index">{{ index + 1 }}</span>
|
||||
<span>{{ step }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="pay__footer">
|
||||
<AppButton type="primary" size="lg" @click="onPaid">
|
||||
完成支付
|
||||
</AppButton>
|
||||
<AppButton @click="router.push('/finance/bills')">
|
||||
返回
|
||||
</AppButton>
|
||||
</div>
|
||||
<p class="pay__safe">
|
||||
安全提示：本页面已通过安全验证，请勿向他人泄露付款码
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 设计 33：操作按钮在大卡右下方 -->
|
||||
<div class="pay__footer">
|
||||
<AppButton type="primary" size="lg" @click="onPaid">
|
||||
完成支付
|
||||
</AppButton>
|
||||
<AppButton @click="router.push('/finance/bills')">
|
||||
返回
|
||||
</AppButton>
|
||||
</div>
|
||||
|
||||
<PayMethodDialog
|
||||
v-model:visible="dialogVisible"
|
||||
:method="method"
|
||||
@@ -156,136 +162,224 @@ onMounted(() => {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pay {
|
||||
padding-top: @spacing-lg;
|
||||
padding-bottom: @spacing-xxl;
|
||||
width: 100%;
|
||||
max-width: @container-width;
|
||||
margin: 0 auto;
|
||||
padding: @spacing-lg @spacing-base @spacing-xxl;
|
||||
|
||||
// 设计 33：面包屑 13 设计px → 11px，前缀灰、当前页深灰
|
||||
&__breadcrumb {
|
||||
margin-bottom: @spacing-base;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
color: @text-color-disabled;
|
||||
|
||||
> span:last-child {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 设计 33：整页单张大白卡，左中右三区
|
||||
&__body {
|
||||
.flex(row, flex-start);
|
||||
gap: @spacing-base;
|
||||
align-items: flex-start;
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: 24px;
|
||||
padding: 24px 32px;
|
||||
border-radius: @radius-base;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
}
|
||||
|
||||
&__left {
|
||||
.flex(column, center, center);
|
||||
gap: @spacing-base;
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
}
|
||||
|
||||
&__safe {
|
||||
font-size: @font-size-sm;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&__right {
|
||||
flex: 1;
|
||||
padding: @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-base;
|
||||
min-width: 0;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
// 左区顶行：渠道说明靠左、切换支付方式胶囊靠右（设计 33 右上角）
|
||||
&__left-top {
|
||||
.flex(row, space-between, center);
|
||||
align-self: stretch;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__method {
|
||||
font-size: 12px;
|
||||
color: @text-color;
|
||||
|
||||
strong {
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
&__switch {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.pay__switch.app-button--default) {
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid fade(@primary-strong, 30%);
|
||||
background: fade(@primary-strong, 10%);
|
||||
color: @primary-strong;
|
||||
font-size: 11px;
|
||||
|
||||
&:hover {
|
||||
border-color: @primary-strong;
|
||||
background: fade(@primary-strong, 18%);
|
||||
color: @primary-strong;
|
||||
}
|
||||
}
|
||||
|
||||
// 中区：支付金额标签 15 设计px → 12px，金额 34 设计px → 26px 粗体红
|
||||
&__amount-block {
|
||||
padding-bottom: @spacing-base;
|
||||
border-bottom: 1px solid @border-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__amount-label {
|
||||
font-size: @font-size-base;
|
||||
font-size: 12px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
margin: @spacing-xs 0;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-top: 4px;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: @danger-color;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__method {
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
|
||||
strong {
|
||||
color: @primary-color;
|
||||
}
|
||||
// 二维码占位（QrCodePanel 内部压成设计稿的灰色方块）
|
||||
:deep(.qr-panel__box) {
|
||||
border: none;
|
||||
background: @contract-qr-bg;
|
||||
border-radius: @radius-base;
|
||||
}
|
||||
|
||||
&__detail,
|
||||
&__steps {
|
||||
margin-top: @spacing-base;
|
||||
// 倒计时行 → 浅红胶囊（设计 33「二维码将在 04:32 后失效」）
|
||||
:deep(.qr-panel__status) {
|
||||
font-size: 11px;
|
||||
color: @danger-color;
|
||||
background: fade(@danger-color, 8%);
|
||||
border-radius: @radius-round;
|
||||
padding: 5px 14px;
|
||||
}
|
||||
|
||||
:deep(.qr-panel__count) {
|
||||
color: @danger-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// 右区：步骤 + 订单明细 + 安全提示（设计 33 右列 400 设计px ≈ 310px）
|
||||
&__right {
|
||||
flex: 0 0 310px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @spacing-base;
|
||||
}
|
||||
|
||||
&__sub-title {
|
||||
margin-bottom: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: @heading-color;
|
||||
|
||||
// 「订单明细」小节按设计 33 降为 13 设计px → 11px
|
||||
}
|
||||
|
||||
&__detail-list {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-sm;
|
||||
&__detail &__sub-title {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__detail-item {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-base;
|
||||
font-size: @font-size-base;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__detail-label {
|
||||
width: 72px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__detail-amount {
|
||||
font-weight: 600;
|
||||
color: @danger-color;
|
||||
&__steps &__sub-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
// 三步指引：序号实底蓝圆 024FFF，步骤文字 14 设计px → 11px
|
||||
&__step-list {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-sm;
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 12px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__step {
|
||||
.flex(row, flex-start, center);
|
||||
.flex(row, flex-start, flex-start);
|
||||
gap: @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-size: 11px;
|
||||
line-height: 1.7;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&__step-index {
|
||||
.flex(row, center);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 1px;
|
||||
border-radius: @radius-round;
|
||||
background: @primary-light;
|
||||
color: @primary-color;
|
||||
font-size: @font-size-sm;
|
||||
background: @primary-strong;
|
||||
color: @white;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
// 订单明细：浅灰底板 + 白底行卡（设计 33 实取 #F7F8F9 / #FFFFFF）
|
||||
&__detail-list {
|
||||
.flex(column, flex-start, stretch);
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
list-style: none;
|
||||
border-radius: 6px;
|
||||
background: @bg-color;
|
||||
}
|
||||
|
||||
&__detail-item {
|
||||
.flex(row, flex-start, center);
|
||||
gap: @spacing-sm;
|
||||
padding: 8px 10px;
|
||||
border-radius: @radius-sm;
|
||||
background: @white;
|
||||
font-size: 11px;
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
&__detail-label {
|
||||
width: 56px;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__detail-amount {
|
||||
margin-left: auto;
|
||||
font-weight: 700;
|
||||
color: @danger-color;
|
||||
}
|
||||
|
||||
// 安全提示横幅：浅绿底 + 绿字（设计 33 实取 #D2EEDC / #16A34A）
|
||||
&__safe {
|
||||
padding: 8px 12px;
|
||||
border-radius: @radius-sm;
|
||||
background: @finance-safe-bg;
|
||||
color: @success-color;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// 卡下操作区：右对齐（设计 33 返回按钮在卡右下）
|
||||
&__footer {
|
||||
.flex(row, flex-end, center);
|
||||
gap: @spacing-base;
|
||||
margin-top: @spacing-lg;
|
||||
padding-top: @spacing-base;
|
||||
border-top: 1px solid @border-color;
|
||||
margin-top: @spacing-base;
|
||||
}
|
||||
|
||||
:deep(.app-button--primary) {
|
||||
background: @primary-strong;
|
||||
|
||||
&:hover {
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user