From 477939ae7bd455d796256f6716dde58fcb074578 Mon Sep 17 00:00:00 2001
From: XYShaoKang <38753204+XYShaoKang@users.noreply.github.com>
Date: Sat, 18 Mar 2023 02:58:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(ranking):=20=E8=B0=83=E6=95=B4=E9=A2=84?=
 =?UTF-8?q?=E6=B5=8B=E7=A7=AF=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/pages/ranking/Item.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/content/pages/ranking/Item.tsx b/src/content/pages/ranking/Item.tsx
index c60c521..d2a407c 100644
--- a/src/content/pages/ranking/Item.tsx
+++ b/src/content/pages/ranking/Item.tsx
@@ -82,30 +82,36 @@ export const Item: FC<ItmeType> = memo(function Item({
 
   if (!oldRating) return <></>
 
-  let deltaEl, oldRatingEl
+  let deltaEl, newRatingEl
   if (delta === undefined) {
     deltaEl = <></>
-    oldRatingEl = <></>
+    newRatingEl = <></>
   } else {
     const deltaNum = Number((delta ?? 0).toFixed(1))
     deltaEl = (
       <div
         css={css`
-          color: ${deltaNum >= 0 ? 'green' : 'gray'};
-          width: 55px;
+          font-weight: bold;
+          color: ${delta >= 0
+            ? `rgb(0 136 0 / ${Math.min(delta / 100, 1) * 70 + 30}%)`
+            : `rgb(64 64 64 / ${Math.min(-delta / 100, 1) * 70 + 30}%)`};
+          width: 60px;
         `}
       >
         {deltaNum > 0 ? `+${deltaNum}` : deltaNum}
       </div>
     )
     const newRating = Number(((delta ?? 0) + oldRating).toFixed(1))
-    oldRatingEl = (
+    newRatingEl = (
       <div
         css={
           showPredictordelta
             ? // 如果有显示分数变化，则新分数只需要区分颜色
               css`
-                color: ${delta >= 0 ? `green` : `gray`};
+                font-weight: bold;
+                color: ${delta >= 0
+                  ? `rgb(0 136 0 / ${Math.min(delta / 100, 1) * 70 + 30}%)`
+                  : `rgb(64 64 64 / ${Math.min(-delta / 100, 1) * 70 + 30}%)`};
               `
             : // 如果没有显示分数变化，则需要将分数变化反应到颜色的深浅中
               css`
@@ -131,7 +137,7 @@ export const Item: FC<ItmeType> = memo(function Item({
     >
       {showOldRating && <div style={{ width: 60 }}>{oldRating}</div>}
       {showPredictordelta && deltaEl}
-      {showNewRating && oldRatingEl}
+      {showNewRating && newRatingEl}
     </div>
   )
 })