fix

src/global.less

@@ -330,6 +330,8 @@ body {
   }
 }
 
+
+
 .header_table_body td {
   font-weight: 600;
 }
@@ -344,16 +346,45 @@ body {
 
 .orangeColorClass {
   background-color: #fff2e8;
+
+  &.ant-table-cell-fix-left,
+  &.ant-table-cell-fix-right {
+    background-color: #fff2e8;
+  }
 }
 
 .volcanoColorClass {
-  background-color: #ffe7ba;
+  background-color: #fff2e8;
+
+  &.ant-table-cell-fix-left,
+  &.ant-table-cell-fix-right {
+    background-color: #fff2e8;
+  }
 }
 
 .redColorClass {
   background-color: #fff7e6;
+
+  &.ant-table-cell-fix-left,
+  &.ant-table-cell-fix-right {
+    background-color: #fff7e6;
+  }
 }
 
 .green2ColorClass {
   background-color: #f6ffed;
+
+  &.ant-table-cell-fix-left,
+  &.ant-table-cell-fix-right {
+    background-color: #f6ffed;
+  }
+}
+
+.purple1ColorClass {
+  background-color: #f9f0ff;
+
+  &.ant-table-cell-fix-left,
+  &.ant-table-cell-fix-right {
+    background-color: #f9f0ff;
+  }
 }

src/pages/iaaData/tencentIaa/adList/tableConfig.tsx

@@ -183,19 +183,19 @@ function columns12(dayHandle: (data: any) => void, onChange?: () => void): { lab
             label: 'IAA补充指标',
             data: [
                 {
-                    title: '首日ROI', dataIndex: 'firstRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true,
+                    title: '首日ROI', dataIndex: 'firstRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true, className: 'redColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '24小时ROI', dataIndex: 'twentyFourHoursRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true,
+                    title: '24小时ROI', dataIndex: 'twentyFourHoursRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true, className: 'redColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '总ROI', dataIndex: 'totalRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true,
+                    title: '总ROI', dataIndex: 'totalRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true, className: 'redColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '广告总ROI', dataIndex: 'promotionTotalRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true,
+                    title: '广告总ROI', dataIndex: 'promotionTotalRoi', label: 'IAA补充指标', align: 'center', width: 80, sorter: true, className: 'redColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 }
             ]
@@ -204,63 +204,63 @@ function columns12(dayHandle: (data: any) => void, onChange?: () => void): { lab
             label: '其他业务(平台上报指标)',
             data: [
                 {
-                    title: '激活首24小时广告变现ARPPU(平台上报)', dataIndex: 'firstDayAdPurArppuCost24hPla', label: '其他业务(平台上报指标)', width: 130, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现ARPPU(平台上报)', dataIndex: 'firstDayAdPurArppuCost24hPla', label: '其他业务(平台上报指标)', width: 130, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现ROI(平台上报)', dataIndex: 'incomeRoi124hPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现ROI(平台上报)', dataIndex: 'incomeRoi124hPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 50 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '激活首24小时广告变现次数(平台上报)', dataIndex: 'incomePv24hPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现次数(平台上报)', dataIndex: 'incomePv24hPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现次数(平台上报)', dataIndex: 'incomePv1dPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活首日广告变现次数(平台上报)', dataIndex: 'incomePv1dPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活3日广告变现次数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive3dPv', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活3日广告变现次数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive3dPv', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日广告变现次数(平台上报)', dataIndex: 'minigame7dIncomeCount', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活7日广告变现次数(平台上报)', dataIndex: 'minigame7dIncomeCount', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '注册3日广告变现次数(平台上报)', dataIndex: 'minigame3dIncomeCount', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '注册3日广告变现次数(平台上报)', dataIndex: 'minigame3dIncomeCount', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现金额(平台上报)', dataIndex: 'incomeVal24hPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现金额(平台上报)', dataIndex: 'incomeVal24hPla', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '注册首日广告变现金额(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationAmount', label: '其他业务(平台上报指标)', width: 120, align: 'center', sorter: true,
+                    title: '注册首日广告变现金额(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationAmount', label: '其他业务(平台上报指标)', width: 120, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '注册7日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD7', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '注册7日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD7', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活14日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD14', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活14日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD14', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmount', label: '其他业务(平台上报指标)', width: 100, align: 'center', sorter: true,
+                    title: '广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmount', label: '其他业务(平台上报指标)', width: 100, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现人数(平台上报)', dataIndex: 'adPayingUsers24hPla', label: '其他业务(平台上报指标)', width: 115, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现人数(平台上报)', dataIndex: 'adPayingUsers24hPla', label: '其他业务(平台上报指标)', width: 115, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive1dPv', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true,
+                    title: '激活首日广告变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive1dPv', label: '其他业务(平台上报指标)', width: 110, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive7dPv', label: '其他业务(平台上报指标)', width: 100, align: 'center', sorter: true,
+                    title: '激活7日变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive7dPv', label: '其他业务(平台上报指标)', width: 100, align: 'center', sorter: true, className: 'green2ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 }
             ]
@@ -269,99 +269,99 @@ function columns12(dayHandle: (data: any) => void, onChange?: () => void): { lab
             label: '其他业务(其他指标)',
             data: [
                 {
-                    title: '激活首24小时广告变现ARPPU', dataIndex: 'firstDayAdPurArppuCost24h', label: '其他业务(其他指标)', width: 100, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现ARPPU', dataIndex: 'firstDayAdPurArppuCost24h', label: '其他业务(其他指标)', width: 100, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现ARPPU', dataIndex: 'firstDayAdPurArppuCost', label: '其他业务(其他指标)', width: 90, align: 'center', sorter: true,
+                    title: '激活首日广告变现ARPPU', dataIndex: 'firstDayAdPurArppuCost', label: '其他业务(其他指标)', width: 90, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现ARPPU', dataIndex: 'adMonetizationArppu', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '广告变现ARPPU', dataIndex: 'adMonetizationArppu', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现ROI', dataIndex: 'incomeRoi124h', label: '其他业务(其他指标)', width: 90, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现ROI', dataIndex: 'incomeRoi124h', label: '其他业务(其他指标)', width: 90, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现ROI', dataIndex: 'incomeRoi1', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活首日广告变现ROI', dataIndex: 'incomeRoi1', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活3日广告变现ROI', dataIndex: 'incomeRoi3', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活3日广告变现ROI', dataIndex: 'incomeRoi3', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日广告变现ROI', dataIndex: 'incomeRoi7', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活7日广告变现ROI', dataIndex: 'incomeRoi7', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活14日广告变现ROI', dataIndex: 'incomeRoi14', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活14日广告变现ROI', dataIndex: 'incomeRoi14', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现ROI', dataIndex: 'adMonetizationRoi', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '广告变现ROI', dataIndex: 'adMonetizationRoi', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现成本(人数)', dataIndex: 'adPayingCostD1', label: '其他业务(其他指标)', width: 100, align: 'center', sorter: true,
+                    title: '激活首日广告变现成本(人数)', dataIndex: 'adPayingCostD1', label: '其他业务(其他指标)', width: 100, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现成本', dataIndex: 'adMonetizationCost', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '广告变现成本', dataIndex: 'adMonetizationCost', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活3日广告变现次数', dataIndex: 'adMonetizationActive3dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活3日广告变现次数', dataIndex: 'adMonetizationActive3dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日广告变现次数', dataIndex: 'adMonetizationActive7dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活7日广告变现次数', dataIndex: 'adMonetizationActive7dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现次数(平台上报)', dataIndex: 'incomePvPla', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '广告变现次数(平台上报)', dataIndex: 'incomePvPla', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现金额', dataIndex: 'incomeVal24h', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现金额', dataIndex: 'incomeVal24h', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现金额', dataIndex: 'incomeVal1', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活首日广告变现金额', dataIndex: 'incomeVal1', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活3日广告变现金额', dataIndex: 'incomeVal3', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活3日广告变现金额', dataIndex: 'incomeVal3', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日广告变现金额', dataIndex: 'incomeVal7', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活7日广告变现金额', dataIndex: 'incomeVal7', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活14日广告变现金额', dataIndex: 'incomeVal14', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活14日广告变现金额', dataIndex: 'incomeVal14', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现金额', dataIndex: 'adMonetizationAmount', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '广告变现金额', dataIndex: 'adMonetizationAmount', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现人数', dataIndex: 'adPayingUsers24h', label: '其他业务(其他指标)', width: 90, align: 'center', sorter: true,
+                    title: '激活首24小时广告变现人数', dataIndex: 'adPayingUsers24h', label: '其他业务(其他指标)', width: 90, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现人数', dataIndex: 'adPayingUsersD1', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活首日广告变现人数', dataIndex: 'adPayingUsersD1', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活3日广告变现人数', dataIndex: 'adMonetizationDedupActive3dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活3日广告变现人数', dataIndex: 'adMonetizationDedupActive3dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日广告变现人数', dataIndex: 'adMonetizationDedupActive7dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true,
+                    title: '激活7日广告变现人数', dataIndex: 'adMonetizationDedupActive7dPv', label: '其他业务(其他指标)', width: 80, align: 'center', sorter: true, className: 'volcanoColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 }
             ]
@@ -370,55 +370,55 @@ function columns12(dayHandle: (data: any) => void, onChange?: () => void): { lab
             label: '小游戏(平台上报)',
             data: [
                 {
-                    title: '小游戏注册首日广告变现ARPU(平台上报)', dataIndex: 'miniGameFirstDayAdPayingArpu', label: '小游戏(平台上报)', width: 130, align: 'center', sorter: true,
+                    title: '小游戏注册首日广告变现ARPU(平台上报)', dataIndex: 'miniGameFirstDayAdPayingArpu', label: '小游戏(平台上报)', width: 130, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏广告变现ARPU(平台上报)', dataIndex: 'miniGameAdMonetizationArpu', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏广告变现ARPU(平台上报)', dataIndex: 'miniGameAdMonetizationArpu', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册首日广告变现ROI(平台上报)', dataIndex: 'miniGameIncomeRoi1', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册首日广告变现ROI(平台上报)', dataIndex: 'miniGameIncomeRoi1', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册3日广告变现ROI(平台上报)', dataIndex: 'minigame3dIncomeRoi', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册3日广告变现ROI(平台上报)', dataIndex: 'minigame3dIncomeRoi', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册7日广告变现ROI(平台上报)', dataIndex: 'minigame7dIncomeRoi', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册7日广告变现ROI(平台上报)', dataIndex: 'minigame7dIncomeRoi', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏广告变现ROI(平台上报)', dataIndex: 'miniGameAdMonetizationRoi', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏广告变现ROI(平台上报)', dataIndex: 'miniGameAdMonetizationRoi', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册首日广告变现成本(平台上报)', dataIndex: 'miniGameFirstDayAdPayingCost', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册首日广告变现成本(平台上报)', dataIndex: 'miniGameFirstDayAdPayingCost', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏广告变现成本(平台上报)', dataIndex: 'miniGameAdMonetizationCost', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏广告变现成本(平台上报)', dataIndex: 'miniGameAdMonetizationCost', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册3日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD3', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册3日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD3', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationUsers', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationUsers', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册3日广告变现人数(平台上报)', dataIndex: 'minigame3dIncomeUv', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册3日广告变现人数(平台上报)', dataIndex: 'minigame3dIncomeUv', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册7日广告变现人数(平台上报)', dataIndex: 'minigame7dIncomeUv', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏注册7日广告变现人数(平台上报)', dataIndex: 'minigame7dIncomeUv', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏广告变现人数(平台上报)', dataIndex: 'miniGameAdMonetizationUsers', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true,
+                    title: '小游戏广告变现人数(平台上报)', dataIndex: 'miniGameAdMonetizationUsers', label: '小游戏(平台上报)', width: 110, align: 'center', sorter: true, className: 'purple1ColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 }
             ]

src/pages/iaaData/tencentIaa/appEveryDayData/tableConfig.tsx

@@ -12,51 +12,51 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
             label: '基本信息',
             data: [
                 {
-                    title: '应用', dataIndex: 'appName', label: '基本信息', align: 'center', width: 120, default: 1,
+                    title: '应用', dataIndex: 'appName', label: '基本信息', align: 'center', width: 120, default: 1, 
                     render: (a: string) => (<WidthEllipsis value={a} />)
                 },
                 {
-                    title: '应用ID', dataIndex: 'appId', label: '基本信息', align: 'center', width: 80,
+                    title: '应用ID', dataIndex: 'appId', label: '基本信息', align: 'center', width: 80, 
                     render: (a: string) => (<WidthEllipsis value={a} />)
                 },
                 {
-                    title: '小程序名称', dataIndex: 'mpName', label: '基本信息', align: 'center', width: 85, default: 2,
+                    title: '小程序名称', dataIndex: 'mpName', label: '基本信息', align: 'center', width: 85, default: 2, 
                     render: (a: string) => (<WidthEllipsis value={a} />)
                 },
                 {
-                    title: '小程序ID', dataIndex: 'mpId', label: '基本信息', align: 'center', width: 80,
+                    title: '小程序ID', dataIndex: 'mpId', label: '基本信息', align: 'center', width: 80, 
                     render: (a: string) => (<WidthEllipsis value={a} />)
                 },
                 {
-                    title: '业务类型', dataIndex: 'productType', label: '基本信息', align: 'center', width: 80, default: 3,
+                    title: '业务类型', dataIndex: 'productType', label: '基本信息', align: 'center', width: 80, default: 3, 
                     render: (a: string) => (<WidthEllipsis value={PRODUCT_TYPE_ENUM[a as keyof typeof PRODUCT_TYPE_ENUM]} />)
                 },
                 {
-                    title: '消耗时间', dataIndex: 'dt', label: '基本信息', align: 'center', width: 80, default: 4,
+                    title: '消耗时间', dataIndex: 'dt', label: '基本信息', align: 'center', width: 80, default: 4, 
                     render: (a: string) => (<WidthEllipsis value={a} />)
                 },
                 {
-                    title: '累计消耗', dataIndex: 'costToday', label: '基本信息', align: 'center', width: 95, default: 5, sorter: true,
+                    title: '累计消耗', dataIndex: 'costToday', label: '基本信息', align: 'center', width: 95, default: 5, sorter: true, className: 'redColorClass',
                     render: (a: string) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '每日真实消耗', dataIndex: 'costTotal', label: '基本信息', align: 'center', width: 90, default: 6, sorter: true,
+                    title: '每日真实消耗', dataIndex: 'costTotal', label: '基本信息', align: 'center', width: 90, default: 6, sorter: true, className: 'redColorClass',
                     render: (a: string) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '每日消耗', dataIndex: 'cost', label: '基本信息', align: 'center', width: 85, default: 7, sorter: true,
+                    title: '每日消耗', dataIndex: 'cost', label: '基本信息', align: 'center', width: 85, default: 7, sorter: true, className: 'redColorClass',
                     render: (a: string) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '每日赔付金', dataIndex: 'payout', label: '基本信息', align: 'center', width: 80, default: 8, sorter: true,
+                    title: '每日赔付金', dataIndex: 'payout', label: '基本信息', align: 'center', width: 80, default: 8, sorter: true, className: 'redColorClass',
                     render: (a: string) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '推广广告账号数量', tips: '消耗大于0', dataIndex: 'accountCount', label: '基本信息', align: 'center', width: 80, default: 9, sorter: true,
+                    title: '推广广告账号数量', tips: '消耗大于0', dataIndex: 'accountCount', label: '基本信息', align: 'center', width: 80, default: 9, sorter: true, className: 'redColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '推广广告数量', tips: '消耗大于0', dataIndex: 'adCount', label: '基本信息', align: 'center', width: 80, default: 10, sorter: true,
+                    title: '推广广告数量', tips: '消耗大于0', dataIndex: 'adCount', label: '基本信息', align: 'center', width: 80, default: 10, sorter: true, className: 'redColorClass',
                     render: (a: string) => <Statistic value={a || 0} />
                 },
             ]
@@ -65,191 +65,191 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
             label: '应用端指标',
             data: [
                 {
-                    title: '累计注册人数', dataIndex: 'regUserTotal', label: '应用端指标', align: 'center', width: 80, default: 11, sorter: true,
+                    title: '累计注册人数', dataIndex: 'regUserTotal', label: '应用端指标', align: 'center', width: 80, default: 11, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '新增注册人数', dataIndex: 'regUserNew', label: '应用端指标', align: 'center', width: 80, default: 12, sorter: true,
+                    title: '新增注册人数', dataIndex: 'regUserNew', label: '应用端指标', align: 'center', width: 80, default: 12, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: 'DAU', tips: '日活用户人数', dataIndex: 'dau', label: '应用端指标', align: 'center', width: 80, default: 13, sorter: true,
+                    title: 'DAU', tips: '日活用户人数', dataIndex: 'dau', label: '应用端指标', align: 'center', width: 80, default: 13, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '新增占比', tips: '新增注册人数/DAU', dataIndex: 'newProportion', label: '应用端指标', align: 'center', width: 90, default: 14, sorter: true,
+                    title: '新增占比', tips: '新增注册人数/DAU', dataIndex: 'newProportion', label: '应用端指标', align: 'center', width: 90, default: 14, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '累计利润', tips: '广告变现累计收入-累计消耗', dataIndex: 'totalProfit', label: '应用端指标', align: 'center', width: 100, default: 15, sorter: true,
+                    title: '累计利润', tips: '广告变现累计收入-累计消耗', dataIndex: 'totalProfit', label: '应用端指标', align: 'center', width: 100, default: 15, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '利润率', tips: '（广告变现累计收入-累计消耗）/累计消耗*100%', dataIndex: 'profitRate', label: '应用端指标', align: 'center', width: 80, default: 16, sorter: true,
+                    title: '利润率', tips: '（广告变现累计收入-累计消耗）/累计消耗*100%', dataIndex: 'profitRate', label: '应用端指标', align: 'center', width: 80, default: 16, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '广告变现收入', dataIndex: 'adMonRevenue', label: '应用端指标', align: 'center', width: 80, default: 17, sorter: true,
+                    title: '广告变现收入', dataIndex: 'adMonRevenue', label: '应用端指标', align: 'center', width: 80, default: 17, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={(a || 0) / 100} precision={2} />
                 },
                 {
-                    title: '广告变现累计收入', dataIndex: 'adMonRevenueTotal', label: '应用端指标', align: 'center', width: 85, default: 18, sorter: true,
+                    title: '广告变现累计收入', dataIndex: 'adMonRevenueTotal', label: '应用端指标', align: 'center', width: 85, default: 18, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={(a || 0) / 100} precision={2} />
                 },
                 {
-                    title: '新增用户成本', tips: '总消耗/新增注册人数', dataIndex: 'newUserRate', label: '应用端指标', align: 'center', width: 80, default: 19, sorter: true,
+                    title: '新增用户成本', tips: '总消耗/新增注册人数', dataIndex: 'newUserRate', label: '应用端指标', align: 'center', width: 80, default: 19, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '人均新增成本', tips: '累计消耗/累计注册人数', dataIndex: 'avgUserRate', label: '应用端指标', align: 'center', width: 80, default: 20, sorter: true,
+                    title: '人均新增成本', tips: '累计消耗/累计注册人数', dataIndex: 'avgUserRate', label: '应用端指标', align: 'center', width: 80, default: 20, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '人均活跃成本', tips: '累计消耗/DAU', dataIndex: 'avgActiveRate', label: '应用端指标', align: 'center', width: 80, default: 21, sorter: true,
+                    title: '人均活跃成本', tips: '累计消耗/DAU', dataIndex: 'avgActiveRate', label: '应用端指标', align: 'center', width: 80, default: 21, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '分享用户人数', dataIndex: 'shareUser', label: '应用端指标', align: 'center', width: 70, default: 22, sorter: true,
+                    title: '分享用户人数', dataIndex: 'shareUser', label: '应用端指标', align: 'center', width: 70, default: 22, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '分享次数', dataIndex: 'shareCount', label: '应用端指标', align: 'center', width: 60, default: 23, sorter: true,
+                    title: '分享次数', dataIndex: 'shareCount', label: '应用端指标', align: 'center', width: 60, default: 23, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '人均分享次数', tips: '分享次数/分享用户人数', dataIndex: 'avgShareCount', label: '应用端指标', align: 'center', width: 80, default: 24, sorter: true,
+                    title: '人均分享次数', tips: '分享次数/分享用户人数', dataIndex: 'avgShareCount', label: '应用端指标', align: 'center', width: 80, default: 24, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '分享用户占比', tips: '分享用户人数/DAU', dataIndex: 'shareUserProportion', label: '应用端指标', align: 'center', width: 80, default: 25, sorter: true,
+                    title: '分享用户占比', tips: '分享用户人数/DAU', dataIndex: 'shareUserProportion', label: '应用端指标', align: 'center', width: 80, default: 25, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '新增次日留存人数', dataIndex: 'newRetainedTomorrow', label: '应用端指标', align: 'center', width: 80, default: 26, sorter: true,
+                    title: '新增次日留存人数', dataIndex: 'newRetainedTomorrow', label: '应用端指标', align: 'center', width: 80, default: 26, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '新增注册次日留存率', tips: '新增注册次日留存人数/新增注册人数', dataIndex: 'newRetainedTomorrowRate', label: '应用端指标', align: 'center', width: 80, default: 27, sorter: true,
+                    title: '新增注册次日留存率', tips: '新增注册次日留存人数/新增注册人数', dataIndex: 'newRetainedTomorrowRate', label: '应用端指标', align: 'center', width: 80, default: 27, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '活跃用户次日留存人数', dataIndex: 'retainedUserTomorrow', label: '应用端指标', align: 'center', width: 85, default: 28, sorter: true,
+                    title: '活跃用户次日留存人数', dataIndex: 'retainedUserTomorrow', label: '应用端指标', align: 'center', width: 85, default: 28, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={0} />
                 },
                 {
-                    title: '活跃用户次日留存率', tips: '指定时间活跃（即访问小游戏）的用户，在之后的第1天（或周、月），再次访问小游戏的用户数占比', dataIndex: 'retainedUserTomorrowRate', label: '应用端指标', align: 'center', width: 85, default: 29, sorter: true,
+                    title: '活跃用户次日留存率', tips: '指定时间活跃（即访问小游戏）的用户，在之后的第1天（或周、月），再次访问小游戏的用户数占比', dataIndex: 'retainedUserTomorrowRate', label: '应用端指标', align: 'center', width: 85, default: 29, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '活跃用户访问次数', dataIndex: 'activeUserAccessCount', label: '应用端指标', align: 'center', width: 100, sorter: true,
+                    title: '活跃用户访问次数', dataIndex: 'activeUserAccessCount', label: '应用端指标', align: 'center', width: 100, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '活跃用户人均访问次数', tips: '活跃用户访问次数/活跃用户人数', dataIndex: 'avgActiveUserAccessCount', label: '应用端指标', align: 'center', width: 100, default: 30, sorter: true,
+                    title: '活跃用户人均访问次数', tips: '活跃用户访问次数/活跃用户人数', dataIndex: 'avgActiveUserAccessCount', label: '应用端指标', align: 'center', width: 100, default: 30, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '活跃用户停留总时长', tips: '活跃用户人均停留时长*活跃用户人数', dataIndex: 'activeDuration', label: '应用端指标', align: 'center', width: 110, default: 31, sorter: true,
+                    title: '活跃用户停留总时长', tips: '活跃用户人均停留时长*活跃用户人数', dataIndex: 'activeDuration', label: '应用端指标', align: 'center', width: 110, default: 31, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => {
                         return formatSecondsToTime(a ? Math.round(a) : 0)
                     }
                 },
                 {
-                    title: '活跃用户人均停留时长', tips: '活跃用户停留总时长/活跃用户人数', dataIndex: 'avgActiveDuration', label: '应用端指标', align: 'center', width: 120, default: 32, sorter: true,
+                    title: '活跃用户人均停留时长', tips: '活跃用户停留总时长/活跃用户人数', dataIndex: 'avgActiveDuration', label: '应用端指标', align: 'center', width: 120, default: 32, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => {
                         return formatSecondsToTime(a ? Math.round(a) : 0)
                     }
                 },
                 {
-                    title: '广告新增ARPU', tips: '广告变现收入/新增注册人数', dataIndex: 'nweAdArpu', label: '应用端指标', align: 'center', width: 80, default: 33, sorter: true,
+                    title: '广告新增ARPU', tips: '广告变现收入/新增注册人数', dataIndex: 'nweAdArpu', label: '应用端指标', align: 'center', width: 80, default: 33, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告总ARPU', tips: '广告累计变现收入/累计注册人数', dataIndex: 'adArpuTotal', label: '应用端指标', align: 'center', width: 80, default: 34, sorter: true,
+                    title: '广告总ARPU', tips: '广告累计变现收入/累计注册人数', dataIndex: 'adArpuTotal', label: '应用端指标', align: 'center', width: 80, default: 34, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '激励视频广告收入', dataIndex: 'videoAdIncome', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '激励视频广告收入', dataIndex: 'videoAdIncome', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '激励视频广告ecpm', dataIndex: 'videoAdEcpm', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '激励视频广告ecpm', dataIndex: 'videoAdEcpm', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '激励视频拉取量', dataIndex: 'videoAdCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '激励视频拉取量', dataIndex: 'videoAdCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '人均视频次数', dataIndex: 'avgUserVideoCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '人均视频次数', dataIndex: 'avgUserVideoCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '插屏广告收入', dataIndex: 'plaqueAdIncome', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '插屏广告收入', dataIndex: 'plaqueAdIncome', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '插屏广告ecpm', dataIndex: 'plaqueAdEcpm', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '插屏广告ecpm', dataIndex: 'plaqueAdEcpm', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '插屏广告拉取量', dataIndex: 'plaqueAdCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '插屏广告拉取量', dataIndex: 'plaqueAdCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '插屏广告曝光量', dataIndex: 'interstitialExposureCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '插屏广告曝光量', dataIndex: 'interstitialExposureCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '插屏广告点击量', dataIndex: 'interstitialClickCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '插屏广告点击量', dataIndex: 'interstitialClickCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激励视频曝光量', dataIndex: 'videoExposureCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '激励视频曝光量', dataIndex: 'videoExposureCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激励视频点击量', dataIndex: 'videoClickCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '激励视频点击量', dataIndex: 'videoClickCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: 'Banner广告点击量', dataIndex: 'bannerClickCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: 'Banner广告点击量', dataIndex: 'bannerClickCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: 'Banner广告曝光量', dataIndex: 'bannerExposureCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: 'Banner广告曝光量', dataIndex: 'bannerExposureCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: 'Banner广告收入', dataIndex: 'bannerIncome', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: 'Banner广告收入', dataIndex: 'bannerIncome', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: 'Banner广告ecpm', dataIndex: 'bannerEcpm', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: 'Banner广告ecpm', dataIndex: 'bannerEcpm', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: 'banner广告拉取量', dataIndex: 'bannerReqSuccCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: 'banner广告拉取量', dataIndex: 'bannerReqSuccCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '人均Banner广告广告收益', dataIndex: 'avgUserBannerIncome', label: '应用端指标', align: 'center', width: 100, sorter: true,
+                    title: '人均Banner广告广告收益', dataIndex: 'avgUserBannerIncome', label: '应用端指标', align: 'center', width: 100, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '人均激励视频收益', dataIndex: 'avgUserVideoIncome', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '人均激励视频收益', dataIndex: 'avgUserVideoIncome', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '人均插屏广告次数', dataIndex: 'avgUserInterstitialCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '人均插屏广告次数', dataIndex: 'avgUserInterstitialCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '人均插屏广告收益', dataIndex: 'avgPlaqueAdIncome', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '人均插屏广告收益', dataIndex: 'avgPlaqueAdIncome', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '人均Banner广告次数', dataIndex: 'avgUserBannerCount', label: '应用端指标', align: 'center', width: 80, sorter: true,
+                    title: '人均Banner广告次数', dataIndex: 'avgUserBannerCount', label: '应用端指标', align: 'center', width: 80, sorter: true, className: 'green2ColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 }
             ]
@@ -258,171 +258,171 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
             label: '广告媒体端指标',
             data: [
                 {
-                    title: '点击量', dataIndex: 'validClickCount', label: '广告媒体端指标', align: 'center', width: 65, default: 35, sorter: true,
+                    title: '点击量', dataIndex: 'validClickCount', label: '广告媒体端指标', align: 'center', width: 65, default: 35, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册人数', dataIndex: 'miniGameRegisterUsers', label: '广告媒体端指标', align: 'center', width: 80, default: 36, sorter: true,
+                    title: '小游戏注册人数', dataIndex: 'miniGameRegisterUsers', label: '广告媒体端指标', align: 'center', width: 80, default: 36, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册率', dataIndex: 'miniGameRegisterRate', label: '广告媒体端指标', align: 'center', width: 80, default: 37, sorter: true,
+                    title: '小游戏注册率', dataIndex: 'miniGameRegisterRate', label: '广告媒体端指标', align: 'center', width: 80, default: 37, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏注册成本', dataIndex: 'miniGameRegisterCost', label: '广告媒体端指标', align: 'center', width: 80, default: 38, sorter: true,
+                    title: '小游戏注册成本', dataIndex: 'miniGameRegisterCost', label: '广告媒体端指标', align: 'center', width: 80, default: 38, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive1dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活首日广告变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive1dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首日广告变现次数(平台上报)', dataIndex: 'incomePv1dPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活首日广告变现次数(平台上报)', dataIndex: 'incomePv1dPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '注册首日广告变现金额(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '注册首日广告变现金额(平台上报)', dataIndex: 'miniGameFirstDayAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日变现ARPPU', tips: '注册首日广告变现金额(平台上报)/小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdPayingArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '首日变现ARPPU', tips: '注册首日广告变现金额(平台上报)/小游戏注册首日广告变现人数(平台上报)', dataIndex: 'miniGameFirstDayAdPayingArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日变现ARPU', tips: '小游戏注册首日广告变现金额(平台上报)/小游戏注册人数', dataIndex: 'miniGameFirstDayAdPayingArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '首日变现ARPU', tips: '小游戏注册首日广告变现金额(平台上报)/小游戏注册人数', dataIndex: 'miniGameFirstDayAdPayingArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日广告变现成本(平台上报)', dataIndex: 'miniGameFirstDayAdPayingCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '首日广告变现成本(平台上报)', dataIndex: 'miniGameFirstDayAdPayingCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '首日ROI', tips: '小游戏注册首日广告变现金额(平台上报)/消耗*100%', dataIndex: 'miniGameFirstDayAdPayingRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '首日ROI', tips: '小游戏注册首日广告变现金额(平台上报)/消耗*100%', dataIndex: 'miniGameFirstDayAdPayingRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '激活首24小时广告变现人数(平台上报)', dataIndex: 'adPayingUsers24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活首24小时广告变现人数(平台上报)', dataIndex: 'adPayingUsers24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现次数(平台上报)', dataIndex: 'incomePv24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活首24小时广告变现次数(平台上报)', dataIndex: 'incomePv24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活首24小时广告变现金额(平台上报)', dataIndex: 'incomeVal24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活首24小时广告变现金额(平台上报)', dataIndex: 'incomeVal24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '激活首24小时广告变现ARPPU(平台上报)', dataIndex: 'firstDayAdPurArppuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活首24小时广告变现ARPPU(平台上报)', dataIndex: 'firstDayAdPurArppuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '24小时广告变现ARPU(平台上报)', dataIndex: 'firstDayAdPurArpuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '24小时广告变现ARPU(平台上报)', dataIndex: 'firstDayAdPurArpuCost24hPla', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '24小时广告变现成本', dataIndex: 'firstDayAdPurArpuCost24hPlaCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '24小时广告变现成本', dataIndex: 'firstDayAdPurArpuCost24hPlaCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '24小时广告变现ROI', dataIndex: 'firstDayAdPurArpuCost24hPlaRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '24小时广告变现ROI', dataIndex: 'firstDayAdPurArpuCost24hPlaRoi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏注册3日广告变现人数(平台上报)', dataIndex: 'minigame3dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '小游戏注册3日广告变现人数(平台上报)', dataIndex: 'minigame3dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '注册3日广告变现次数(平台上报)', dataIndex: 'minigame3dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '注册3日广告变现次数(平台上报)', dataIndex: 'minigame3dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活3日广告变现次数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive3dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活3日广告变现次数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive3dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册3日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD3', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '小游戏注册3日广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmountD3', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现ARPPU(平台上报)', dataIndex: 'adPurArppuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '3日广告变现ARPPU(平台上报)', dataIndex: 'adPurArppuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现ARPU(平台上报)', dataIndex: 'adPurArpuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '3日广告变现ARPU(平台上报)', dataIndex: 'adPurArpuDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现成本(平台上报)', dataIndex: 'adPurDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '3日广告变现成本(平台上报)', dataIndex: 'adPurDay3Cost', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '3日广告变现ROI', dataIndex: 'adPurDay3Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '3日广告变现ROI', dataIndex: 'adPurDay3Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏注册7日广告变现人数(平台上报)', dataIndex: 'minigame7dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '小游戏注册7日广告变现人数(平台上报)', dataIndex: 'minigame7dIncomeUv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive7dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活7日变现人数(平台上报)', dataIndex: 'adMonetizationPlaDedupActive7dPv', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '激活7日广告变现次数(平台上报)', dataIndex: 'minigame7dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '激活7日广告变现次数(平台上报)', dataIndex: 'minigame7dIncomeCount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏注册7日广告变现金额(平台上报)', dataIndex: 'miniGameRegD7Amount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '小游戏注册7日广告变现金额(平台上报)', dataIndex: 'miniGameRegD7Amount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现ARPPU(平台上报)', dataIndex: 'miniGameRegD7Arppu', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '7日广告变现ARPPU(平台上报)', dataIndex: 'miniGameRegD7Arppu', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现ARPU(平台上报)', dataIndex: 'miniGameRegD7Arpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '7日广告变现ARPU(平台上报)', dataIndex: 'miniGameRegD7Arpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现成本（平台上报', dataIndex: 'miniGameRegD7Cost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '7日广告变现成本（平台上报', dataIndex: 'miniGameRegD7Cost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '7日广告变现ROI', dataIndex: 'miniGameRegD7Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '7日广告变现ROI', dataIndex: 'miniGameRegD7Roi', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 },
                 {
-                    title: '小游戏广告变现人数(平台上报)', dataIndex: 'miniGameAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '小游戏广告变现人数(平台上报)', dataIndex: 'miniGameAdMonetizationUsers', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '广告变现次数(平台上报)', dataIndex: 'incomePvPla', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '广告变现次数(平台上报)', dataIndex: 'incomePvPla', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} />
                 },
                 {
-                    title: '小游戏广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true,
+                    title: '小游戏广告变现金额(平台上报)', dataIndex: 'miniGameAdMonetizationAmount', label: '广告媒体端指标', align: 'center', width: 100, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现ARPPU(平台上报)', dataIndex: 'miniGameAdMonetizationArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '广告变现ARPPU(平台上报)', dataIndex: 'miniGameAdMonetizationArppu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现ARPU(平台上报)', dataIndex: 'miniGameAdMonetizationArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '广告变现ARPU(平台上报)', dataIndex: 'miniGameAdMonetizationArpu', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现成本(平台上报)', dataIndex: 'miniGameAdMonetizationCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true,
+                    title: '广告变现成本(平台上报)', dataIndex: 'miniGameAdMonetizationCost', label: '广告媒体端指标', align: 'center', width: 80, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a || 0} precision={2} />
                 },
                 {
-                    title: '广告变现总ROI', dataIndex: 'miniGameAdMonetizationRoi', label: '广告媒体端指标', align: 'center', width: 80, default: 39, sorter: true,
+                    title: '广告变现总ROI', dataIndex: 'miniGameAdMonetizationRoi', label: '广告媒体端指标', align: 'center', width: 80, default: 39, sorter: true, className: 'volcanoColorClass',
                     render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                 }
             ]