Match finance dashboard dark design
This commit is contained in:
SmartUp Developer
+252
-247
@@ -72,7 +72,7 @@
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-head">
|
||||
<span>总收入</span>
|
||||
<span>网站收入 (USD)</span>
|
||||
<span class="metric-icon income"><TrendingUp :size="18" /></span>
|
||||
</div>
|
||||
<strong>{{ formatAmount(summary.total_revenue) }}</strong>
|
||||
@@ -80,7 +80,7 @@
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-head">
|
||||
<span>总消费</span>
|
||||
<span>上游消费 (USD)</span>
|
||||
<span class="metric-icon cost"><ReceiptText :size="18" /></span>
|
||||
</div>
|
||||
<strong>{{ formatAmount(summary.total_cost) }}</strong>
|
||||
@@ -88,7 +88,7 @@
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-head">
|
||||
<span>净收入</span>
|
||||
<span>净收入 (USD)</span>
|
||||
<span class="metric-icon net"><WalletCards :size="18" /></span>
|
||||
</div>
|
||||
<strong :class="summary.net_income >= 0 ? 'positive' : 'negative'">
|
||||
@@ -98,7 +98,7 @@
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-head">
|
||||
<span>{{ summary.partial ? '部分汇总' : '失败项' }}</span>
|
||||
<span>{{ summary.partial ? '部分汇总' : '失败项（项）' }}</span>
|
||||
<span class="metric-icon risk"><BadgeAlert :size="18" /></span>
|
||||
</div>
|
||||
<strong :class="summary.failed_count > 0 || summary.partial ? 'negative' : ''">
|
||||
@@ -134,30 +134,14 @@
|
||||
<section class="dashboard-panel detail-panel">
|
||||
<div class="panel-header detail-header">
|
||||
<div>
|
||||
<h2>收入 / 消费明细</h2>
|
||||
<p>{{ filteredWebsiteItems.length }} 个收入项，{{ filteredUpstreamItems.length }} 个消费项</p>
|
||||
</div>
|
||||
<div class="table-tabs">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: activeTable === 'websites' }"
|
||||
@click="activeTable = 'websites'"
|
||||
>
|
||||
收入
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: activeTable === 'upstreams' }"
|
||||
@click="activeTable = 'upstreams'"
|
||||
>
|
||||
消费
|
||||
</button>
|
||||
<h2><span class="panel-dot amber" />网站收入明细</h2>
|
||||
<p>{{ filteredWebsiteItems.length }} 个收入项</p>
|
||||
</div>
|
||||
<span class="success-pill">{{ filteredWebsiteItems.filter(i => i.status === 'success').length }}/{{ filteredWebsiteItems.length }} 成功</span>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<el-table
|
||||
v-if="activeTable === 'websites'"
|
||||
:data="filteredWebsiteItems"
|
||||
class="finance-table"
|
||||
empty-text="暂无收入明细"
|
||||
@@ -182,9 +166,20 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="dashboard-panel detail-panel">
|
||||
<div class="panel-header detail-header">
|
||||
<div>
|
||||
<h2><span class="panel-dot amber" />上游消费明细</h2>
|
||||
<p>{{ filteredUpstreamItems.length }} 个消费项</p>
|
||||
</div>
|
||||
<span class="success-pill">{{ filteredUpstreamItems.filter(i => i.status === 'success').length }}/{{ filteredUpstreamItems.length }} 成功</span>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<el-table
|
||||
v-else
|
||||
:data="filteredUpstreamItems"
|
||||
class="finance-table"
|
||||
empty-text="暂无消费明细"
|
||||
@@ -398,9 +393,9 @@ interface CompareResponse {
|
||||
}
|
||||
|
||||
const periodOptions: Array<{ value: Period; label: string }> = [
|
||||
{ value: 'day', label: '日' },
|
||||
{ value: 'week', label: '周' },
|
||||
{ value: 'month', label: '月' },
|
||||
{ value: 'day', label: '按日查询' },
|
||||
{ value: 'week', label: '按周查询' },
|
||||
{ value: 'month', label: '按月查询' },
|
||||
]
|
||||
|
||||
const period = ref<Period>('day')
|
||||
@@ -411,7 +406,6 @@ const comparing = ref(false)
|
||||
const overwriting = ref(false)
|
||||
const fetchError = ref<string | null>(null)
|
||||
const summary = ref<FinanceSummary | null>(null)
|
||||
const activeTable = ref<'websites' | 'upstreams'>('websites')
|
||||
const compareDialogVisible = ref(false)
|
||||
const compareResult = ref<CompareResponse | null>(null)
|
||||
|
||||
@@ -572,56 +566,56 @@ function renderTrendChart() {
|
||||
trendChart ??= echarts.init(trendChartRef.value)
|
||||
const labels = summary.value.chart.labels.map(label => label.slice(5))
|
||||
trendChart.setOption({
|
||||
color: ['#22a884', '#f08a05'],
|
||||
grid: { left: 10, right: 18, top: 28, bottom: 10, containLabel: true },
|
||||
color: ['#f4a01f', '#ff4d4f'],
|
||||
grid: { left: 10, right: 20, top: 34, bottom: 12, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#dbe4ef',
|
||||
backgroundColor: '#17110f',
|
||||
borderColor: 'rgba(245, 158, 11, 0.35)',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#142033', fontSize: 12 },
|
||||
textStyle: { color: '#f5ede5', fontSize: 12 },
|
||||
valueFormatter: (value: number) => formatAmount(value),
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
icon: 'circle',
|
||||
itemWidth: 9,
|
||||
itemHeight: 9,
|
||||
textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 },
|
||||
data: ['收入', '消费'],
|
||||
left: 'center',
|
||||
icon: 'rect',
|
||||
itemWidth: 32,
|
||||
itemHeight: 8,
|
||||
textStyle: { color: '#8f7c6d', fontSize: 12, fontWeight: 700 },
|
||||
data: ['网站总收入 (USD)', '上游总消费 (USD)'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: labels,
|
||||
axisLine: { lineStyle: { color: '#e8eef6' } },
|
||||
axisLine: { lineStyle: { color: 'rgba(218, 183, 142, 0.14)' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: '#73839a', fontSize: 12 },
|
||||
axisLabel: { color: '#74665b', fontSize: 12 },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: { color: '#73839a', fontSize: 12, formatter: (value: number) => `$${value}` },
|
||||
splitLine: { lineStyle: { color: '#edf2f7' } },
|
||||
axisLabel: { color: '#74665b', fontSize: 12, formatter: (value: number) => `${value}` },
|
||||
splitLine: { lineStyle: { color: 'rgba(218, 183, 142, 0.10)' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
name: '网站总收入 (USD)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 7,
|
||||
data: summary.value.chart.revenue,
|
||||
areaStyle: { color: 'rgba(34, 168, 132, 0.12)' },
|
||||
lineStyle: { width: 3 },
|
||||
areaStyle: { color: 'rgba(244, 160, 31, 0.18)' },
|
||||
lineStyle: { width: 2.5 },
|
||||
},
|
||||
{
|
||||
name: '消费',
|
||||
name: '上游总消费 (USD)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 7,
|
||||
data: summary.value.chart.cost,
|
||||
areaStyle: { color: 'rgba(240, 138, 5, 0.11)' },
|
||||
lineStyle: { width: 3 },
|
||||
areaStyle: { color: 'rgba(255, 77, 79, 0.16)' },
|
||||
lineStyle: { width: 2.5 },
|
||||
},
|
||||
],
|
||||
})
|
||||
@@ -634,13 +628,13 @@ function renderShareChart() {
|
||||
.filter(item => item.amount > 0)
|
||||
.map(item => ({ name: item.name, value: Number(item.amount.toFixed(6)) }))
|
||||
shareChart.setOption({
|
||||
color: ['#22a884', '#2f69e8', '#e87d04', '#9b42e8', '#dc4b4b', '#0b9bb0'],
|
||||
color: ['#f4a01f', '#ff4d4f', '#3b82f6', '#10b981', '#a855f7', '#06b6d4'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#dbe4ef',
|
||||
backgroundColor: '#17110f',
|
||||
borderColor: 'rgba(245, 158, 11, 0.35)',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#142033', fontSize: 12 },
|
||||
textStyle: { color: '#f5ede5', fontSize: 12 },
|
||||
formatter: (params: any) => `${params.name}<br/>${formatAmount(params.value)} (${params.percent}%)`,
|
||||
},
|
||||
legend: {
|
||||
@@ -649,20 +643,20 @@ function renderShareChart() {
|
||||
icon: 'circle',
|
||||
itemWidth: 9,
|
||||
itemHeight: 9,
|
||||
textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 },
|
||||
textStyle: { color: '#a99583', fontSize: 12, fontWeight: 700 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '上游消费',
|
||||
type: 'pie',
|
||||
radius: ['52%', '72%'],
|
||||
radius: ['48%', '70%'],
|
||||
center: ['50%', '42%'],
|
||||
avoidLabelOverlap: true,
|
||||
minAngle: 4,
|
||||
label: {
|
||||
color: '#536276',
|
||||
color: '#a99583',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
fontWeight: 700,
|
||||
formatter: '{b}\n{d}%',
|
||||
},
|
||||
labelLine: {
|
||||
@@ -671,10 +665,10 @@ function renderShareChart() {
|
||||
lineStyle: { width: 1.4 },
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderColor: '#120d0b',
|
||||
borderWidth: 3,
|
||||
},
|
||||
data: data.length ? data : [{ name: '暂无消费', value: 1, itemStyle: { color: '#e2e8f0' } }],
|
||||
data: data.length ? data : [{ name: '暂无消费', value: 1, itemStyle: { color: '#2a201b' } }],
|
||||
},
|
||||
],
|
||||
})
|
||||
@@ -772,18 +766,20 @@ onBeforeUnmount(() => {
|
||||
|
||||
<style scoped>
|
||||
.finance-page {
|
||||
--finance-bg: #eef3f8;
|
||||
--finance-card: #ffffff;
|
||||
--finance-card-soft: #f8fafd;
|
||||
--finance-border: #dce5ef;
|
||||
--finance-border-strong: #c7d3e1;
|
||||
--finance-text: #142033;
|
||||
--finance-muted: #65758b;
|
||||
--finance-soft: #9aa8ba;
|
||||
--finance-green: #22a884;
|
||||
--finance-orange: #e87d04;
|
||||
--finance-blue: #2f69e8;
|
||||
--finance-red: #ef5b61;
|
||||
--finance-bg: #0f0b09;
|
||||
--finance-panel: #15100e;
|
||||
--finance-panel-soft: #1b1411;
|
||||
--finance-border: rgba(217, 139, 66, 0.16);
|
||||
--finance-border-strong: rgba(245, 158, 11, 0.4);
|
||||
--finance-text: #f8efe6;
|
||||
--finance-muted: #a99787;
|
||||
--finance-soft: #74675d;
|
||||
--finance-card-text: #061329;
|
||||
--finance-amber: #f59e0b;
|
||||
--finance-amber-soft: rgba(245, 158, 11, 0.16);
|
||||
--finance-green: #10c985;
|
||||
--finance-red: #ff4d4f;
|
||||
--finance-blue: #3b82f6;
|
||||
|
||||
width: 100%;
|
||||
color: var(--finance-text);
|
||||
@@ -792,72 +788,60 @@ onBeforeUnmount(() => {
|
||||
|
||||
.finance-shell {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
max-width: 1504px;
|
||||
gap: 30px;
|
||||
max-width: 1480px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(221, 230, 240, 0.96);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 56px),
|
||||
var(--finance-bg);
|
||||
box-shadow:
|
||||
0 24px 70px rgba(10, 16, 28, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.finance-topbar,
|
||||
.dashboard-panel,
|
||||
.metric-card,
|
||||
.loading-panel,
|
||||
.empty-state {
|
||||
background: var(--finance-card);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 244, 232, 0.025), transparent 42%),
|
||||
var(--finance-panel);
|
||||
border: 1px solid var(--finance-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 20px rgba(30, 43, 62, 0.045);
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 232, 0.035);
|
||||
}
|
||||
|
||||
.finance-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 66px;
|
||||
padding: 12px;
|
||||
gap: 16px;
|
||||
min-height: 96px;
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.period-tabs,
|
||||
.table-tabs {
|
||||
.period-tabs {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
background: #e7edf5;
|
||||
border: 1px solid var(--finance-border);
|
||||
box-shadow: inset 0 1px 2px rgba(20, 32, 51, 0.04);
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
border: 1px solid rgba(217, 139, 66, 0.12);
|
||||
border-radius: 12px;
|
||||
background: rgba(8, 6, 5, 0.72);
|
||||
}
|
||||
|
||||
.period-tab,
|
||||
.table-tabs button {
|
||||
min-width: 54px;
|
||||
height: 34px;
|
||||
.period-tab {
|
||||
min-width: 128px;
|
||||
height: 42px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: var(--finance-muted);
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
color: #a99583;
|
||||
font-weight: 800;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.period-tab.active,
|
||||
.table-tabs button.active {
|
||||
color: var(--finance-text);
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(20, 32, 51, 0.13);
|
||||
.period-tab.active {
|
||||
color: #2a1708;
|
||||
background: linear-gradient(135deg, #f3a321, #f59e0b);
|
||||
box-shadow: 0 10px 24px rgba(245, 158, 11, 0.22);
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
@@ -865,62 +849,66 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 9px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 232px;
|
||||
width: 310px;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
width: 190px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
min-height: 38px;
|
||||
padding-inline: 15px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
min-height: 42px;
|
||||
padding-inline: 18px;
|
||||
border-radius: 12px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-button :deep(svg) {
|
||||
margin-right: 6px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.compare-button {
|
||||
color: #fff6ec;
|
||||
box-shadow: 0 8px 18px rgba(232, 125, 4, 0.24);
|
||||
color: #1d1108;
|
||||
box-shadow: 0 12px 26px rgba(245, 158, 11, 0.22);
|
||||
}
|
||||
|
||||
.page-alert {
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
position: relative;
|
||||
min-height: 120px;
|
||||
padding: 17px 18px 16px;
|
||||
min-height: 166px;
|
||||
padding: 28px 30px 24px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
overflow: hidden;
|
||||
background: #fffdf9;
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.metric-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 18px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
right: 30px;
|
||||
bottom: 25px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(232, 125, 4, 0.13), transparent 68%);
|
||||
background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 68%);
|
||||
filter: blur(2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -930,52 +918,52 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: var(--finance-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #42516a;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.metric-icon.income {
|
||||
color: var(--finance-green);
|
||||
background: rgba(31, 157, 122, 0.1);
|
||||
color: #d98b00;
|
||||
background: rgba(245, 158, 11, 0.14);
|
||||
}
|
||||
|
||||
.metric-icon.cost {
|
||||
color: var(--finance-orange);
|
||||
background: rgba(217, 119, 6, 0.12);
|
||||
color: var(--finance-red);
|
||||
background: rgba(255, 77, 79, 0.10);
|
||||
}
|
||||
|
||||
.metric-icon.net {
|
||||
color: var(--finance-blue);
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
color: var(--finance-green);
|
||||
background: rgba(16, 201, 133, 0.11);
|
||||
}
|
||||
|
||||
.metric-icon.risk {
|
||||
color: var(--finance-red);
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
color: #6f7480;
|
||||
background: #f4f4f6;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
color: var(--finance-text);
|
||||
color: var(--finance-card-text);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 30px;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: 1.12;
|
||||
line-height: 1.08;
|
||||
word-break: break-word;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.metric-card small {
|
||||
color: var(--finance-muted);
|
||||
font-size: 12px;
|
||||
color: #7a8597;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -989,12 +977,12 @@ onBeforeUnmount(() => {
|
||||
|
||||
.chart-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.74fr) minmax(340px, 0.82fr);
|
||||
gap: 14px;
|
||||
grid-template-columns: minmax(0, 2.1fr) minmax(340px, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.dashboard-panel {
|
||||
padding: 18px;
|
||||
padding: 28px 30px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -1002,33 +990,50 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 10px;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
margin: 0;
|
||||
color: var(--finance-text);
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 5px 0 0;
|
||||
color: var(--finance-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin: 9px 0 0;
|
||||
color: #817166;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.panel-chip {
|
||||
.panel-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
.panel-dot.amber {
|
||||
background: var(--finance-amber);
|
||||
box-shadow: 0 0 16px rgba(245, 158, 11, 0.42);
|
||||
}
|
||||
|
||||
.panel-chip,
|
||||
.success-pill {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px 9px;
|
||||
min-height: 26px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid rgba(16, 201, 133, 0.22);
|
||||
border-radius: 999px;
|
||||
background: #eef3f8;
|
||||
color: var(--finance-muted);
|
||||
background: rgba(16, 201, 133, 0.12);
|
||||
color: var(--finance-green);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.chart {
|
||||
@@ -1036,23 +1041,23 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
height: 314px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.share-chart {
|
||||
height: 314px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
align-items: center;
|
||||
padding-bottom: 18px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid rgba(217, 139, 66, 0.14);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--finance-border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.finance-table {
|
||||
@@ -1070,26 +1075,26 @@ onBeforeUnmount(() => {
|
||||
.amount.income,
|
||||
.diff-new {
|
||||
color: var(--finance-green);
|
||||
font-weight: 800;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.amount.cost {
|
||||
color: var(--finance-orange);
|
||||
font-weight: 800;
|
||||
color: var(--finance-amber);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.diff-old {
|
||||
.diff-old,
|
||||
.error-text {
|
||||
color: var(--finance-red);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--finance-red);
|
||||
font-size: 12px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.muted-text {
|
||||
color: var(--finance-soft);
|
||||
color: #72645a;
|
||||
}
|
||||
|
||||
.empty-state,
|
||||
@@ -1110,8 +1115,8 @@ onBeforeUnmount(() => {
|
||||
.compare-card {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--finance-border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
background: var(--finance-panel-soft);
|
||||
}
|
||||
|
||||
.compare-card h3,
|
||||
@@ -1149,123 +1154,126 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-input__wrapper) {
|
||||
min-height: 38px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px #e7dde5 inset !important;
|
||||
min-height: 42px;
|
||||
border-radius: 12px;
|
||||
background: rgba(6, 5, 4, 0.72) !important;
|
||||
box-shadow: 0 0 0 1px rgba(217, 139, 66, 0.22) inset !important;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-input__wrapper:hover),
|
||||
.finance-page :deep(.el-input__wrapper.is-focus) {
|
||||
box-shadow: 0 0 0 1px var(--finance-border-strong) inset, 0 0 0 3px rgba(232, 125, 4, 0.06) !important;
|
||||
box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.52) inset, 0 0 0 3px rgba(245, 158, 11, 0.08) !important;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-input__inner) {
|
||||
color: var(--finance-text) !important;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-input__inner::placeholder),
|
||||
.finance-page :deep(.el-input__prefix) {
|
||||
color: var(--finance-soft);
|
||||
.finance-page :deep(.el-input__prefix),
|
||||
.finance-page :deep(.el-input__suffix) {
|
||||
color: #75675d;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-button--primary) {
|
||||
--el-button-bg-color: #ee9b45;
|
||||
--el-button-border-color: #ee9b45;
|
||||
--el-button-hover-bg-color: #f0a85a;
|
||||
--el-button-hover-border-color: #f0a85a;
|
||||
--el-button-active-bg-color: #e2862c;
|
||||
--el-button-active-border-color: #e2862c;
|
||||
--el-button-bg-color: #f59e0b;
|
||||
--el-button-border-color: #f59e0b;
|
||||
--el-button-hover-bg-color: #f7ad2d;
|
||||
--el-button-hover-border-color: #f7ad2d;
|
||||
--el-button-active-bg-color: #df8704;
|
||||
--el-button-active-border-color: #df8704;
|
||||
--el-button-text-color: #211205;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-button:not(.el-button--primary)) {
|
||||
--el-button-bg-color: #fff;
|
||||
--el-button-border-color: var(--finance-border);
|
||||
--el-button-text-color: var(--finance-text);
|
||||
--el-button-hover-bg-color: #f8fafc;
|
||||
--el-button-hover-border-color: var(--finance-border-strong);
|
||||
--el-button-hover-text-color: var(--finance-text);
|
||||
--el-button-bg-color: rgba(255, 255, 255, 0.08);
|
||||
--el-button-border-color: rgba(255, 255, 255, 0.18);
|
||||
--el-button-text-color: #f5ede5;
|
||||
--el-button-hover-bg-color: rgba(255, 255, 255, 0.13);
|
||||
--el-button-hover-border-color: rgba(255, 255, 255, 0.28);
|
||||
--el-button-hover-text-color: #ffffff;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table) {
|
||||
--el-table-bg-color: #fff;
|
||||
--el-table-tr-bg-color: #fff;
|
||||
--el-table-header-bg-color: #f8fafc;
|
||||
--el-table-header-text-color: #475569;
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(255, 244, 232, 0.02);
|
||||
--el-table-header-text-color: #83756b;
|
||||
--el-table-text-color: var(--finance-text);
|
||||
--el-table-row-hover-bg-color: #f8fafc;
|
||||
--el-table-border-color: var(--finance-border);
|
||||
border-radius: 8px;
|
||||
--el-table-row-hover-bg-color: rgba(255, 244, 232, 0.025);
|
||||
--el-table-border-color: rgba(217, 139, 66, 0.12);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table th.el-table__cell) {
|
||||
background: #f8fafc;
|
||||
color: #506179;
|
||||
background: rgba(255, 244, 232, 0.025);
|
||||
color: #83756b;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table td.el-table__cell) {
|
||||
border-bottom-color: #eef2f7;
|
||||
padding-top: 13px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom-color: rgba(217, 139, 66, 0.10);
|
||||
padding-top: 17px;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table__inner-wrapper::before),
|
||||
.finance-page :deep(.el-table__border-left-patch) {
|
||||
background: var(--finance-border);
|
||||
background: rgba(217, 139, 66, 0.12);
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag) {
|
||||
border-radius: 4px;
|
||||
font-weight: 800;
|
||||
padding-inline: 8px;
|
||||
border-radius: 999px;
|
||||
font-weight: 900;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--success) {
|
||||
--el-tag-bg-color: #edf9e9;
|
||||
--el-tag-border-color: #edf9e9;
|
||||
--el-tag-text-color: #42aa35;
|
||||
--el-tag-bg-color: rgba(16, 201, 133, 0.12);
|
||||
--el-tag-border-color: rgba(16, 201, 133, 0.22);
|
||||
--el-tag-text-color: var(--finance-green);
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--primary) {
|
||||
--el-tag-bg-color: #e9f3ff;
|
||||
--el-tag-border-color: #e9f3ff;
|
||||
--el-tag-text-color: #4d9cff;
|
||||
--el-tag-bg-color: rgba(59, 130, 246, 0.14);
|
||||
--el-tag-border-color: rgba(59, 130, 246, 0.28);
|
||||
--el-tag-text-color: #4ea1ff;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--warning) {
|
||||
--el-tag-bg-color: #fff4e2;
|
||||
--el-tag-border-color: #fff4e2;
|
||||
--el-tag-text-color: #e3912d;
|
||||
--el-tag-bg-color: rgba(245, 158, 11, 0.12);
|
||||
--el-tag-border-color: rgba(245, 158, 11, 0.28);
|
||||
--el-tag-text-color: var(--finance-amber);
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--danger) {
|
||||
--el-tag-bg-color: #fff0f0;
|
||||
--el-tag-border-color: #fff0f0;
|
||||
--el-tag-bg-color: rgba(255, 77, 79, 0.12);
|
||||
--el-tag-border-color: rgba(255, 77, 79, 0.24);
|
||||
--el-tag-text-color: var(--finance-red);
|
||||
}
|
||||
|
||||
:global(.finance-compare-dialog) {
|
||||
--el-dialog-bg-color: #fff;
|
||||
--el-text-color-primary: #0f172a;
|
||||
--el-text-color-regular: #0f172a;
|
||||
border-radius: 8px;
|
||||
--el-dialog-bg-color: #15100e;
|
||||
--el-text-color-primary: #f8efe6;
|
||||
--el-text-color-regular: #f8efe6;
|
||||
border: 1px solid rgba(217, 139, 66, 0.16);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
:global(.finance-compare-dialog .el-dialog__body) {
|
||||
color: #0f172a;
|
||||
color: #f8efe6;
|
||||
}
|
||||
|
||||
:global(.finance-compare-dialog .el-table) {
|
||||
--el-table-bg-color: #fff;
|
||||
--el-table-tr-bg-color: #fff;
|
||||
--el-table-header-bg-color: #f8fafc;
|
||||
--el-table-text-color: #0f172a;
|
||||
--el-table-border-color: #e2e8f0;
|
||||
--el-table-bg-color: transparent;
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-header-bg-color: rgba(255, 244, 232, 0.02);
|
||||
--el-table-text-color: #f8efe6;
|
||||
--el-table-border-color: rgba(217, 139, 66, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
@@ -1280,13 +1288,13 @@ onBeforeUnmount(() => {
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.finance-shell {
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.finance-topbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.period-tabs,
|
||||
@@ -1297,8 +1305,13 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.period-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.period-tab {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
@@ -1311,7 +1324,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
font-size: 26px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
@@ -1321,14 +1334,6 @@ onBeforeUnmount(() => {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.table-tabs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-tabs button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:global(.finance-compare-dialog) {
|
||||
width: calc(100vw - 24px) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user