style(MainBusinessAnalysis): 优化主营业务模块 UI

- 饼图配色改为黑金主题(金色系渐变)
- 修复表格固定列 hover 时背景色为白色的问题
- 统一表格单元格背景色为深色 #1A202C

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-16 20:20:15 +08:00
parent e734319ec4
commit da455946a3
2 changed files with 53 additions and 5 deletions

View File

@@ -66,10 +66,16 @@ const fixedColumnStyles = `
.main-business-table .ant-table-thead .ant-table-cell-fix-right { .main-business-table .ant-table-thead .ant-table-cell-fix-right {
background: rgba(26, 32, 44, 0.95) !important; background: rgba(26, 32, 44, 0.95) !important;
} }
.main-business-table .ant-table-tbody > tr:hover .ant-table-cell-fix-left, .main-business-table .ant-table-tbody > tr:hover > td {
.main-business-table .ant-table-tbody > tr:hover .ant-table-cell-fix-right {
background: rgba(212, 175, 55, 0.08) !important; background: rgba(212, 175, 55, 0.08) !important;
} }
.main-business-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
.main-business-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right {
background: #242d3d !important;
}
.main-business-table .ant-table-tbody > tr > td {
background: #1A202C !important;
}
`; `;
// 历史对比表格数据行类型(包含业务明细) // 历史对比表格数据行类型(包含业务明细)

View File

@@ -160,8 +160,20 @@ export const getComparisonChartOption = (
}; };
}; };
// 黑金主题饼图配色
const BLACK_GOLD_PIE_COLORS = [
'#D4AF37', // 金色
'#B8860B', // 深金色
'#FFD700', // 亮金色
'#DAA520', // 金菊色
'#CD853F', // 秘鲁色
'#F4A460', // 沙褐色
'#DEB887', // 实木色
'#D2691E', // 巧克力色
];
/** /**
* 生成主营业务饼图配置 * 生成主营业务饼图配置 - 黑金主题
* @param title 标题 * @param title 标题
* @param subtitle 副标题 * @param subtitle 副标题
* @param data 饼图数据 * @param data 饼图数据
@@ -177,9 +189,22 @@ export const getMainBusinessPieOption = (
text: title, text: title,
subtext: subtitle, subtext: subtitle,
left: 'center', left: 'center',
textStyle: {
color: '#D4AF37',
fontSize: 14,
},
subtextStyle: {
color: '#A0AEC0',
fontSize: 12,
},
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
backgroundColor: 'rgba(26, 32, 44, 0.95)',
borderColor: 'rgba(212, 175, 55, 0.3)',
textStyle: {
color: '#E2E8F0',
},
formatter: (params: { name: string; value: number; percent: number }) => { formatter: (params: { name: string; value: number; percent: number }) => {
return `${params.name}<br/>营收: ${formatUtils.formatLargeNumber( return `${params.name}<br/>营收: ${formatUtils.formatLargeNumber(
params.value params.value
@@ -190,17 +215,34 @@ export const getMainBusinessPieOption = (
orient: 'vertical', orient: 'vertical',
left: 'left', left: 'left',
top: 'center', top: 'center',
textStyle: {
color: '#E2E8F0',
fontSize: 12,
},
}, },
color: BLACK_GOLD_PIE_COLORS,
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: '50%', radius: '55%',
center: ['55%', '50%'],
data: data, data: data,
label: {
show: true,
color: '#E2E8F0',
fontSize: 11,
formatter: '{b}: {d}%',
},
labelLine: {
lineStyle: {
color: 'rgba(212, 175, 55, 0.5)',
},
},
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: 'rgba(212, 175, 55, 0.5)',
}, },
}, },
}, },