tooltip

package.json

@@ -16,8 +16,11 @@
     "antd": "^5.8.3",
     "antd-mobile": "^5.30.0",
     "axios": "^1.7.9",
+    "i18next": "^25.6.3",
+    "i18next-browser-languagedetector": "^8.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^16.3.5",
     "react-redux": "^8.0.4",
     "react-router-dom": "5.3",
     "react-scripts": "5.0.1",
@@ -61,4 +64,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

src/assets/styles/base.css

@@ -219,6 +219,34 @@ textarea {
   }
   #root .ant-tooltip {
     transform: rotate(0) !important;
+    inset: 24.331px auto auto 399.25px !important;
+    width: 250px !important;
+    height: 150px !important;
+    max-width: 250px !important;
+  }
+  #root .ant-tooltip .tooltip_MT .top {
+    width: 100%;
+    height: 20px !important;
+  }
+  #root .ant-tooltip .tooltip_MT .top .title {
+    width: 80px !important;
+    font-size: 13px !important;
+  }
+  #root .ant-tooltip .tooltip_MT .top .close {
+    width: 40px;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+  }
+  #root .ant-tooltip .tooltip_MT .top .close > img {
+    height: 90%;
+    object-fit: contain;
+  }
+  #root .ant-tooltip .tooltip_MT .content {
+    font-size: 12px !important;
+    line-height: 13px !important;
   }
   body #A7Back {
     transform: rotate(90deg);
@@ -285,9 +313,9 @@ textarea {
 }
 /* 隐藏静音按钮 */
 #root .ant-tooltip {
-  width: 190px !important;
-  height: 92px !important;
-  max-width: 200px !important;
+  width: 190px;
+  height: 92px;
+  max-width: 200px;
 }
 #root .ant-tooltip .ant-tooltip-content {
   width: 100% !important;

src/assets/styles/base.less

@@ -67,7 +67,7 @@ body #A7Back {
   left: 4%;
   cursor: pointer;
 
-  &>img {
+  & > img {
     height: 100%;
     object-fit: contain;
   }
@@ -78,7 +78,7 @@ body #A7Back {
   margin: auto;
   position: relative;
 
-  &>div {
+  & > div {
     width: 100%;
     height: 100%;
   }
@@ -207,7 +207,7 @@ textarea {
   bottom: 15px;
   right: 20px;
 
-  &>img {
+  & > img {
     position: absolute;
     top: 0;
     left: 0;
@@ -283,6 +283,40 @@ textarea {
 
   #root .ant-tooltip {
     transform: rotate(0) !important;
+    inset: 24.331px auto auto 399.25px !important;
+    width: 250px !important;
+    height: 150px !important;
+    max-width: 250px !important;
+  }
+
+  #root .ant-tooltip .tooltip_MT {
+    .top {
+      width: 100%;
+      height: 20px !important;
+
+      .title {
+        width: 80px !important;
+        font-size: 13px !important;
+      }
+
+      .close {
+        width: 40px;
+        height: 100%;
+        cursor: pointer;
+        display: flex;
+        justify-content: end;
+        align-items: center;
+
+        & > img {
+          height: 90%;
+          object-fit: contain;
+        }
+      }
+    }
+    .content {
+      font-size: 12px !important;
+      line-height: 13px !important;
+    }
   }
 
   body #A7Back {
@@ -296,7 +330,7 @@ textarea {
     z-index: 3;
     cursor: pointer;
 
-    &>img {
+    & > img {
       height: 100%;
       object-fit: contain;
     }
@@ -381,9 +415,9 @@ textarea {
 // }
 
 #root .ant-tooltip {
-  width: 190px !important;
-  height: 92px !important;
-  max-width: 200px !important;
+  width: 190px;
+  height: 92px;
+  max-width: 200px;
 
   .ant-tooltip-content {
     width: 100% !important;
@@ -432,7 +466,7 @@ textarea {
       justify-content: end;
       align-items: center;
 
-      &>img {
+      & > img {
         height: 90%;
         object-fit: contain;
       }
@@ -469,6 +503,6 @@ textarea {
 }
 
 .myFont {
-  font-family:'SimSun' !important;
+  font-family: 'SimSun' !important;
   font-weight: 700;
 }

src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -40,7 +40,7 @@
           top: 35px;
           left: -109px;
 
-          &>img {
+          & > img {
             width: 100px;
             object-fit: contain;
           }
@@ -66,7 +66,7 @@
           cursor: pointer;
           position: relative;
 
-          &>img {
+          & > img {
             height: 45px;
             object-fit: contain;
           }
@@ -93,7 +93,6 @@
             color: rgba(255, 255, 255, 1);
             width: 200%;
             font-weight: 700;
-
           }
         }
 
@@ -165,11 +164,11 @@
               color: rgba(0, 0, 0, 0.25);
             }
 
-            &:has(> a:hover)>a:not(:hover) {
+            &:has(> a:hover) > a:not(:hover) {
               color: rgba(0, 0, 0, 0.25);
             }
 
-            &>a {
+            & > a {
               color: rgba(94, 52, 34, 1);
               position: relative;
 
@@ -221,8 +220,8 @@
           letter-spacing: 2px;
           color: #504e40;
 
-
-          &>p {}
+          & > p {
+          }
         }
       }
     }
@@ -238,7 +237,7 @@
           height: 60px;
           width: 120px;
 
-          &>img {
+          & > img {
             width: 100%;
           }
 
@@ -259,9 +258,6 @@
             font-size: 14px;
           }
         }
-
-
-
       }
 
       .content {
@@ -276,15 +272,11 @@
         }
       }
 
-
       .intro {
         font-size: 16px;
         line-height: 18px;
-
       }
 
-
-
       .detailTxt {
         .title {
           font-size: 18px !important;
@@ -299,9 +291,16 @@
             bottom: -2px !important;
             height: 2px !important;
           }
+
+          &:has(> a:hover) {
+            color: rgba(94, 52, 34, 1) !important;
+          }
+
+          &:has(> a:hover) > a:not(:hover) {
+            color: rgba(94, 52, 34, 1) !important;
+          }
         }
       }
     }
-
   }
-}
+}

src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -20,8 +20,10 @@ function ModalTxt({
 
   const ori_touchStartX = useRef(0)
   const trans_touchStartX = useRef(0)
+  const content_touchStartX = useRef(0)
   const originRef = useRef<any>(null)
   const translateRef = useRef<any>(null)
+  const contentRef = useRef<any>(null)
 
   useEffect(() => {
     if (selectedTab !== 0) {
@@ -53,6 +55,14 @@ function ModalTxt({
     }
     trans_touchStartX.current = e.touches[0].clientX
   }
+  const handleTooltipTouchMove = (e: any) => {
+    e.preventDefault()
+    const deltaX = e.touches[0].clientX - content_touchStartX.current
+    if (contentRef.current) {
+      contentRef.current.scrollTop += deltaX
+    }
+    content_touchStartX.current = e.touches[0].clientX
+  }
   // 处理触摸开始事件
   const handleTouchStart = (e: any, start: any) => {
     start.current = e.touches[0].clientX
@@ -84,13 +94,22 @@ function ModalTxt({
               <div className='title'>{word}</div>
               <div
                 className='close'
-                onClick={() => setShowTooltip(-1)}
-                onTouchEnd={() => setShowTooltip(-1)}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setShowTooltip(-1)
+                }}
+
+                onTouchEnd={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setShowTooltip(-1)
+                }}
               >
                 <img src={require('@/assets/img/close.png')} alt='' draggable='false' />
               </div>
             </div>
-            <div className='content'>{define}</div>
+            <div className='content' ref={contentRef} onTouchStart={(e) => handleTouchStart(e, content_touchStartX)} onTouchMove={handleTooltipTouchMove}>{define}</div>
           </div>
         }
         getPopupContainer={() => document.body.querySelector('#root') as HTMLElement}

yarn.lock

@@ -1093,7 +1093,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.12.0":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.27.6", "@babel/runtime@^7.28.4":
   version "7.28.4"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
   integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
@@ -5740,6 +5740,13 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 html-void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
@@ -5839,6 +5846,13 @@ human-signals@^2.1.0:
   resolved "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+i18next-browser-languagedetector@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.npmmirror.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz#c3ca311e249d2f7d8bb9b3b13ac9af380a3b15b0"
+  integrity sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 i18next@^20.4.0:
   version "20.6.1"
   resolved "https://registry.npmmirror.com/i18next/-/i18next-20.6.1.tgz#535e5f6e5baeb685c7d25df70db63bf3cc0aa345"
@@ -5846,6 +5860,13 @@ i18next@^20.4.0:
   dependencies:
     "@babel/runtime" "^7.12.0"
 
+i18next@^25.6.3:
+  version "25.6.3"
+  resolved "https://registry.npmmirror.com/i18next/-/i18next-25.6.3.tgz#984dc1cf305fe10392e4db9ba5c56406eb4f27ad"
+  integrity sha512-AEQvoPDljhp67a1+NsnG/Wb1Nh6YoSvtrmeEd24sfGn3uujCtXCF3cXpr7ulhMywKNFF7p3TX1u2j7y+caLOJg==
+  dependencies:
+    "@babel/runtime" "^7.28.4"
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -9010,6 +9031,15 @@ react-fast-compare@^3.2.2:
   resolved "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
+react-i18next@^16.3.5:
+  version "16.3.5"
+  resolved "https://registry.npmmirror.com/react-i18next/-/react-i18next-16.3.5.tgz#3a129dd05236cc979343b2870872d48cd48878f6"
+  integrity sha512-F7Kglc+T0aE6W2rO5eCAFBEuWRpNb5IFmXOYEgztjZEuiuSLTe/xBIEG6Q3S0fbl8GXMNo+Q7gF8bpokFNWJww==
+  dependencies:
+    "@babel/runtime" "^7.27.6"
+    html-parse-stringify "^3.0.1"
+    use-sync-external-store "^1.6.0"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz"
@@ -10544,6 +10574,11 @@ use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
+use-sync-external-store@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -10603,6 +10638,11 @@ vconsole@^3.15.1:
     core-js "^3.11.0"
     mutation-observer "^1.0.3"
 
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"