diff --git a/src/pages/dashboard/analysis/components/SalesCard.tsx b/src/pages/dashboard/analysis/components/SalesCard.tsx
index b7c03a2a..a66c469e 100644
--- a/src/pages/dashboard/analysis/components/SalesCard.tsx
+++ b/src/pages/dashboard/analysis/components/SalesCard.tsx
@@ -118,7 +118,7 @@ const SalesCard = ({
                           <li key={item.title}>
                             <span
                               className={`${styles.rankingItemNumber} ${
-                                i < 3 ? styles.active : ''
+                                i < 3 ? styles.rankingItemNumberActive : ''
                               }`}
                             >
                               {i + 1}
@@ -126,9 +126,7 @@ const SalesCard = ({
                             <span className={styles.rankingItemTitle} title={item.title}>
                               {item.title}
                             </span>
-                            <span className={styles.rankingItemValue}>
-                              {numeral(item.total).format('0,0')}
-                            </span>
+                            <span>{numeral(item.total).format('0,0')}</span>
                           </li>
                         ))}
                       </ul>
diff --git a/src/pages/dashboard/analysis/components/Trend/index.style.ts b/src/pages/dashboard/analysis/components/Trend/index.style.ts
index 831001c9..2527a729 100644
--- a/src/pages/dashboard/analysis/components/Trend/index.style.ts
+++ b/src/pages/dashboard/analysis/components/Trend/index.style.ts
@@ -14,8 +14,13 @@ const useStyles = createStyles(({ token }) => {
       top: '-1px',
       color: token['green-6'],
     },
-    'trendItemGrey .up, trendItemGrey .down': {
-      color: token.colorText,
+    trendItemGrey: {
+      up: {
+        color: token.colorText,
+      },
+      down: {
+        color: token.colorText,
+      },
     },
     'reverseColor .up': {
       color: token['green-6'],
diff --git a/src/pages/dashboard/analysis/components/Trend/index.tsx b/src/pages/dashboard/analysis/components/Trend/index.tsx
index e6b18ec7..c39e20d4 100644
--- a/src/pages/dashboard/analysis/components/Trend/index.tsx
+++ b/src/pages/dashboard/analysis/components/Trend/index.tsx
@@ -2,6 +2,7 @@ import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import React from 'react';
 import useStyles from './index.style';
+
 export type TrendProps = {
   colorful?: boolean;
   flag: 'up' | 'down';
@@ -10,6 +11,7 @@ export type TrendProps = {
   className?: string;
   children?: React.ReactNode;
 };
+
 const Trend: React.FC<TrendProps> = ({
   colorful = true,
   reverseColor = false,
diff --git a/src/pages/dashboard/analysis/style.style.ts b/src/pages/dashboard/analysis/style.style.ts
index 5b033a1d..eae5bd02 100644
--- a/src/pages/dashboard/analysis/style.style.ts
+++ b/src/pages/dashboard/analysis/style.style.ts
@@ -32,11 +32,6 @@ const useStyles = createStyles(({ token }) => {
           fontSize: '0',
           visibility: 'hidden',
         },
-        span: {
-          color: token.colorText,
-          fontSize: '14px',
-          lineHeight: '22px',
-        },
       },
       [`@media screen and (max-width: ${token.screenLG}px)`]: {
         li: {
@@ -54,8 +49,8 @@ const useStyles = createStyles(({ token }) => {
       fontSize: '12px',
       lineHeight: '20px',
       textAlign: 'center',
-      backgroundColor: '#F9F9F9',
       borderRadius: '20px',
+      backgroundColor: token.colorBgContainerDisabled,
     },
     rankingItemTitle: {
       flex: '1',
@@ -64,9 +59,9 @@ const useStyles = createStyles(({ token }) => {
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
     },
-    active: {
+    rankingItemNumberActive: {
       color: '#fff',
-      backgroundColor: '#314659',
+      backgroundColor: token.colorBgSpotlight,
     },
     salesExtra: {
       display: 'inline-block',