feat: udpate route widget

src/pages/Route/route-preview/webgl-prototype/RouteWidget.module.css

@@ -59,6 +59,18 @@
   font-weight: 900;
 }
 
+.route-widget-number--3 {
+  font-size: 50px;
+}
+
+.route-widget-number--4 {
+  font-size: 38px;
+}
+
+.route-widget-number--5 {
+  font-size: 30px;
+}
+
 .route-widget-content {
   overflow: hidden;
   width: 257px;

src/pages/Route/route-preview/webgl-prototype/RouteWidget.tsx

@@ -6,6 +6,14 @@ import { observer } from "mobx-react-lite";
 const shouldAnimate = (text: string | undefined, maxLength: number) =>
   (text?.length ?? 0) > maxLength;
 
+const getNumberSizeClass = (text: string | undefined) => {
+  const length = text?.length ?? 0;
+  if (length <= 2) return "";
+  if (length === 3) return styles["route-widget-number--3"];
+  if (length === 4) return styles["route-widget-number--4"];
+  return styles["route-widget-number--5"];
+};
+
 const getLabelSizeClass = (text: string | undefined) => {
   const length = text?.length ?? 0;
   if (length <= 40) return "";
@@ -33,7 +41,7 @@ export const RouteWidget = observer(() => {
 
   return (
     <div className={styles["route-widget"]} style={{ position: "relative" }}>
-      <div className={styles["route-widget-number"]}>
+      <div className={[styles["route-widget-number"], getNumberSizeClass(routeData?.route_sys_number)].join(" ")}>
         {routeData?.route_sys_number || ""}
       </div>
       <div className={styles["route-widget-content"]}>