Align finance dashboard visual style
This commit is contained in:
SmartUp Developer
+149
-59
@@ -572,31 +572,37 @@ function renderTrendChart() {
|
||||
trendChart ??= echarts.init(trendChartRef.value)
|
||||
const labels = summary.value.chart.labels.map(label => label.slice(5))
|
||||
trendChart.setOption({
|
||||
color: ['#1f9d7a', '#d97706'],
|
||||
grid: { left: 12, right: 18, top: 24, bottom: 12, containLabel: true },
|
||||
color: ['#22a884', '#f08a05'],
|
||||
grid: { left: 10, right: 18, top: 28, bottom: 10, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#dbe4ef',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#142033', fontSize: 12 },
|
||||
valueFormatter: (value: number) => formatAmount(value),
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
icon: 'circle',
|
||||
textStyle: { color: '#64748b', fontSize: 12 },
|
||||
itemWidth: 9,
|
||||
itemHeight: 9,
|
||||
textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 },
|
||||
data: ['收入', '消费'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: labels,
|
||||
axisLine: { lineStyle: { color: '#e2e8f0' } },
|
||||
axisLine: { lineStyle: { color: '#e8eef6' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: '#64748b' },
|
||||
axisLabel: { color: '#73839a', fontSize: 12 },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: { color: '#64748b', formatter: (value: number) => `$${value}` },
|
||||
splitLine: { lineStyle: { color: '#eef2f7' } },
|
||||
axisLabel: { color: '#73839a', fontSize: 12, formatter: (value: number) => `$${value}` },
|
||||
splitLine: { lineStyle: { color: '#edf2f7' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -605,7 +611,7 @@ function renderTrendChart() {
|
||||
smooth: true,
|
||||
symbolSize: 7,
|
||||
data: summary.value.chart.revenue,
|
||||
areaStyle: { color: 'rgba(31, 157, 122, 0.12)' },
|
||||
areaStyle: { color: 'rgba(34, 168, 132, 0.12)' },
|
||||
lineStyle: { width: 3 },
|
||||
},
|
||||
{
|
||||
@@ -614,7 +620,7 @@ function renderTrendChart() {
|
||||
smooth: true,
|
||||
symbolSize: 7,
|
||||
data: summary.value.chart.cost,
|
||||
areaStyle: { color: 'rgba(217, 119, 6, 0.12)' },
|
||||
areaStyle: { color: 'rgba(240, 138, 5, 0.11)' },
|
||||
lineStyle: { width: 3 },
|
||||
},
|
||||
],
|
||||
@@ -628,29 +634,42 @@ function renderShareChart() {
|
||||
.filter(item => item.amount > 0)
|
||||
.map(item => ({ name: item.name, value: Number(item.amount.toFixed(6)) }))
|
||||
shareChart.setOption({
|
||||
color: ['#1f9d7a', '#2563eb', '#d97706', '#9333ea', '#dc2626', '#0891b2'],
|
||||
color: ['#22a884', '#2f69e8', '#e87d04', '#9b42e8', '#dc4b4b', '#0b9bb0'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#dbe4ef',
|
||||
borderWidth: 1,
|
||||
textStyle: { color: '#142033', fontSize: 12 },
|
||||
formatter: (params: any) => `${params.name}<br/>${formatAmount(params.value)} (${params.percent}%)`,
|
||||
},
|
||||
legend: {
|
||||
bottom: 0,
|
||||
type: 'scroll',
|
||||
icon: 'circle',
|
||||
textStyle: { color: '#64748b', fontSize: 12 },
|
||||
itemWidth: 9,
|
||||
itemHeight: 9,
|
||||
textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '上游消费',
|
||||
type: 'pie',
|
||||
radius: ['54%', '74%'],
|
||||
center: ['50%', '43%'],
|
||||
radius: ['52%', '72%'],
|
||||
center: ['50%', '42%'],
|
||||
avoidLabelOverlap: true,
|
||||
minAngle: 4,
|
||||
label: {
|
||||
color: '#334155',
|
||||
color: '#536276',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
formatter: '{b}\n{d}%',
|
||||
},
|
||||
labelLine: {
|
||||
length: 16,
|
||||
length2: 18,
|
||||
lineStyle: { width: 1.4 },
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 3,
|
||||
@@ -753,17 +772,18 @@ onBeforeUnmount(() => {
|
||||
|
||||
<style scoped>
|
||||
.finance-page {
|
||||
--finance-bg: #f4f7fb;
|
||||
--finance-bg: #eef3f8;
|
||||
--finance-card: #ffffff;
|
||||
--finance-border: #e2e8f0;
|
||||
--finance-border-strong: #cbd5e1;
|
||||
--finance-text: #0f172a;
|
||||
--finance-muted: #64748b;
|
||||
--finance-soft: #94a3b8;
|
||||
--finance-green: #1f9d7a;
|
||||
--finance-orange: #d97706;
|
||||
--finance-blue: #2563eb;
|
||||
--finance-red: #dc2626;
|
||||
--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;
|
||||
|
||||
width: 100%;
|
||||
color: var(--finance-text);
|
||||
@@ -772,12 +792,18 @@ onBeforeUnmount(() => {
|
||||
|
||||
.finance-shell {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
max-width: 1600px;
|
||||
gap: 16px;
|
||||
max-width: 1504px;
|
||||
margin: 0 auto;
|
||||
padding: 18px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(221, 230, 240, 0.96);
|
||||
border-radius: 18px;
|
||||
background: var(--finance-bg);
|
||||
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,
|
||||
@@ -788,15 +814,16 @@ onBeforeUnmount(() => {
|
||||
background: var(--finance-card);
|
||||
border: 1px solid var(--finance-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 8px 20px rgba(30, 43, 62, 0.045);
|
||||
}
|
||||
|
||||
.finance-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
gap: 12px;
|
||||
min-height: 66px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.period-tabs,
|
||||
@@ -806,28 +833,31 @@ onBeforeUnmount(() => {
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
background: #eef2f7;
|
||||
background: #e7edf5;
|
||||
border: 1px solid var(--finance-border);
|
||||
box-shadow: inset 0 1px 2px rgba(20, 32, 51, 0.04);
|
||||
}
|
||||
|
||||
.period-tab,
|
||||
.table-tabs button {
|
||||
min-width: 54px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
height: 34px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--finance-muted);
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
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 3px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 0 1px 4px rgba(20, 32, 51, 0.13);
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
@@ -835,20 +865,23 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
width: 232px;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
width: 170px;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
min-height: 38px;
|
||||
padding-inline: 15px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-button :deep(svg) {
|
||||
@@ -856,7 +889,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.compare-button {
|
||||
color: #fff;
|
||||
color: #fff6ec;
|
||||
box-shadow: 0 8px 18px rgba(232, 125, 4, 0.24);
|
||||
}
|
||||
|
||||
.page-alert {
|
||||
@@ -870,10 +904,25 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-height: 136px;
|
||||
padding: 18px;
|
||||
position: relative;
|
||||
min-height: 120px;
|
||||
padding: 17px 18px 16px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 18px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(232, 125, 4, 0.13), transparent 68%);
|
||||
filter: blur(2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.metric-head {
|
||||
@@ -882,13 +931,13 @@ onBeforeUnmount(() => {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: var(--finance-muted);
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
@@ -917,7 +966,7 @@ onBeforeUnmount(() => {
|
||||
.metric-card strong {
|
||||
color: var(--finance-text);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: clamp(22px, 2vw, 32px);
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
line-height: 1.12;
|
||||
word-break: break-word;
|
||||
@@ -927,6 +976,7 @@ onBeforeUnmount(() => {
|
||||
.metric-card small {
|
||||
color: var(--finance-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.positive {
|
||||
@@ -939,7 +989,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
.chart-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
|
||||
grid-template-columns: minmax(0, 1.74fr) minmax(340px, 0.82fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@@ -953,7 +1003,7 @@ onBeforeUnmount(() => {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
@@ -961,19 +1011,21 @@ onBeforeUnmount(() => {
|
||||
color: var(--finance-text);
|
||||
font-size: 17px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.panel-header p {
|
||||
margin: 5px 0 0;
|
||||
color: var(--finance-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-chip {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px 9px;
|
||||
border-radius: 999px;
|
||||
background: #eef2f7;
|
||||
background: #eef3f8;
|
||||
color: var(--finance-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
@@ -984,11 +1036,11 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
height: 326px;
|
||||
height: 314px;
|
||||
}
|
||||
|
||||
.share-chart {
|
||||
height: 326px;
|
||||
height: 314px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
@@ -1000,6 +1052,7 @@ onBeforeUnmount(() => {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--finance-border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.finance-table {
|
||||
@@ -1096,19 +1149,20 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-input__wrapper) {
|
||||
min-height: 34px;
|
||||
min-height: 38px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 1px var(--finance-border) inset;
|
||||
box-shadow: 0 0 0 1px #e7dde5 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;
|
||||
box-shadow: 0 0 0 1px var(--finance-border-strong) inset, 0 0 0 3px rgba(232, 125, 4, 0.06) !important;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-input__inner) {
|
||||
color: var(--finance-text);
|
||||
color: var(--finance-text) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-input__inner::placeholder),
|
||||
@@ -1117,10 +1171,13 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-button--primary) {
|
||||
--el-button-bg-color: #0f172a;
|
||||
--el-button-border-color: #0f172a;
|
||||
--el-button-hover-bg-color: #263449;
|
||||
--el-button-hover-border-color: #263449;
|
||||
--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;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-button:not(.el-button--primary)) {
|
||||
@@ -1130,6 +1187,7 @@ onBeforeUnmount(() => {
|
||||
--el-button-hover-bg-color: #f8fafc;
|
||||
--el-button-hover-border-color: var(--finance-border-strong);
|
||||
--el-button-hover-text-color: var(--finance-text);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table) {
|
||||
@@ -1140,17 +1198,20 @@ onBeforeUnmount(() => {
|
||||
--el-table-text-color: var(--finance-text);
|
||||
--el-table-row-hover-bg-color: #f8fafc;
|
||||
--el-table-border-color: var(--finance-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table th.el-table__cell) {
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
color: #506179;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table td.el-table__cell) {
|
||||
border-bottom-color: #eef2f7;
|
||||
padding-top: 13px;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-table__inner-wrapper::before),
|
||||
@@ -1161,6 +1222,31 @@ onBeforeUnmount(() => {
|
||||
.finance-page :deep(.el-tag) {
|
||||
border-radius: 4px;
|
||||
font-weight: 800;
|
||||
padding-inline: 8px;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--success) {
|
||||
--el-tag-bg-color: #edf9e9;
|
||||
--el-tag-border-color: #edf9e9;
|
||||
--el-tag-text-color: #42aa35;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--primary) {
|
||||
--el-tag-bg-color: #e9f3ff;
|
||||
--el-tag-border-color: #e9f3ff;
|
||||
--el-tag-text-color: #4d9cff;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--warning) {
|
||||
--el-tag-bg-color: #fff4e2;
|
||||
--el-tag-border-color: #fff4e2;
|
||||
--el-tag-text-color: #e3912d;
|
||||
}
|
||||
|
||||
.finance-page :deep(.el-tag--danger) {
|
||||
--el-tag-bg-color: #fff0f0;
|
||||
--el-tag-border-color: #fff0f0;
|
||||
--el-tag-text-color: var(--finance-red);
|
||||
}
|
||||
|
||||
:global(.finance-compare-dialog) {
|
||||
@@ -1224,6 +1310,10 @@ onBeforeUnmount(() => {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
.detail-header,
|
||||
.compare-grid {
|
||||
|
||||
Reference in New Issue
Block a user