fix TextInfoPanel

src/components/common/TextInfoPanel/index.jsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Scrollbars } from "react-custom-scrollbars-2";
 import { useInterval } from "ahooks";
 import { useLocation } from "react-router-dom";
+import styles from "./index.module.less";
 
 let index = 0;
 
@@ -38,8 +39,16 @@ function TextInfoPanel({ content }) {
   }, []);
 
   return (
-    <div className="text-info-panel" onDoubleClick={stopHandler}>
-      <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={400}>
+    <div className={styles.textInfoPanel} onDoubleClick={stopHandler}>
+      <Scrollbars
+        className="scrollbars"
+        renderThumbVertical={(styles) => {
+          return <div className="thumbVertical" {...styles}></div>;
+        }}
+        renderView={(props) => {
+          return <div className="view" {...props}></div>;
+        }}
+      >
         {contentText}
       </Scrollbars>
     </div>

src/components/common/TextInfoPanel/index.module.less

@@ -0,0 +1,25 @@
+.textInfoPanel :global {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #04fbfd;
+  color: #02f9ff !important;
+  background-color: #000000e7;
+  pointer-events: auto;
+  font-size: 18px;
+  text-indent: 2em;
+  line-height: 1.5;
+  z-index: 999;
+  border-radius: 8px;
+
+  .scrollbars {
+    .view {
+      padding: 12px;
+    }
+
+    .thumbVertical {
+      background-color: #00a2a2;
+      border-radius: 6px;
+      //   margin-left: 8px;
+    }
+  }
+}

src/components/domain/Six/SceneOne/index.module.less

@@ -51,21 +51,6 @@
       display: flex;
       flex-direction: column;
       height: 100%;
-
-      .text-info-panel {
-        width: 100%;
-        height: 100%;
-        padding: 12px;
-        border: 1px solid #04fbfd;
-        color: #02f9ff !important;
-        background-color: #000000e7;
-        pointer-events: auto;
-        font-size: 18px;
-        text-indent: 2em;
-        line-height: 1.5;
-        z-index: 999;
-        border-radius: 8px;
-      }
     }
 
     .right-panel {

src/components/domain/Three/SceneOne/index.module.less

@@ -32,21 +32,6 @@
       display: flex;
       flex-direction: column;
       height: 100%;
-
-      .text-info-panel {
-        width: 100%;
-        height: 100%;
-        padding: 12px;
-        border: 1px solid #04fbfd;
-        color: #02f9ff !important;
-        background-color: #000000e7;
-        pointer-events: auto;
-        font-size: 18px;
-        text-indent: 2em;
-        line-height: 1.5;
-        z-index: 999;
-        border-radius: 8px;
-      }
     }
 
     .right-panel {

src/components/map/Layout/index.module.less

@@ -44,21 +44,6 @@
     .bottom-panel {
       flex: 1;
     }
-
-    .text-info-panel {
-      width: 100%;
-      height: 100%;
-      padding: 12px;
-      border: 1px solid #04fbfd;
-      color: #02f9ff !important;
-      background-color: #000000e7;
-      pointer-events: auto;
-      font-size: 18px;
-      text-indent: 2em;
-      line-height: 1.5;
-      z-index: 999;
-      border-radius: 8px;
-    }
   }
 
   .right-panel {