From 0ad04d742c143d0fc72fa948f20b200c3a4de15a Mon Sep 17 00:00:00 2001
From: Aifeilong <2993607249@qq.com>
Date: Mon, 16 Oct 2023 17:51:08 +0800
Subject: [PATCH] fix TextInfoPanel

---
 src/components/common/TextInfoPanel/index.jsx | 13 ++++++++--
 .../common/TextInfoPanel/index.module.less    | 25 +++++++++++++++++++
 .../domain/Six/SceneOne/index.module.less     | 15 -----------
 .../domain/Three/SceneOne/index.module.less   | 15 -----------
 src/components/map/Layout/index.module.less   | 15 -----------
 5 files changed, 36 insertions(+), 47 deletions(-)
 create mode 100644 src/components/common/TextInfoPanel/index.module.less

diff --git a/src/components/common/TextInfoPanel/index.jsx b/src/components/common/TextInfoPanel/index.jsx
index 8441154..dcdd9e3 100644
--- a/src/components/common/TextInfoPanel/index.jsx
+++ b/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>
diff --git a/src/components/common/TextInfoPanel/index.module.less b/src/components/common/TextInfoPanel/index.module.less
new file mode 100644
index 0000000..8be1c4b
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/domain/Six/SceneOne/index.module.less b/src/components/domain/Six/SceneOne/index.module.less
index a3894c6..a242e33 100644
--- a/src/components/domain/Six/SceneOne/index.module.less
+++ b/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 {
diff --git a/src/components/domain/Three/SceneOne/index.module.less b/src/components/domain/Three/SceneOne/index.module.less
index a4ebe0a..6b9b3f3 100644
--- a/src/components/domain/Three/SceneOne/index.module.less
+++ b/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 {
diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less
index fdfd43b..4bc294d 100644
--- a/src/components/map/Layout/index.module.less
+++ b/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 {