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:
@@ -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;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 历史对比表格数据行类型(包含业务明细)
|
// 历史对比表格数据行类型(包含业务明细)
|
||||||
|
|||||||
@@ -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)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user