添加数据，pc端定位的tooltip的inset直接给移动端手动手动添加

package.json

@@ -31,7 +31,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "dev": "react-app-rewired start",
+    "dev": "react-app-rewired start --port 0.0.0.0",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"

public/BigScene/css/main.css

@@ -7217,7 +7217,7 @@ a.hasHover.tag-link:hover {
 
 #call-to-action #interaction-modal.desktop {
   height: 350px;
-  width: 550px;
+  width: 100%;
   border-radius: 10px;
 }
 
@@ -7390,17 +7390,17 @@ a.hasHover.tag-link:hover {
   }
 }
 
-@media only screen and (max-height: 487px), (max-width: 620px) {
-  #call-to-action #interaction-modal:not(.small).desktop #interaction-modal-inner {
-    position: absolute;
-    height: auto;
-    width: 90%;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
+#call-to-action #interaction-modal:not(.small).desktop #interaction-modal-inner {
+  position: absolute;
+  height: auto;
+  width: 50%;
+  max-width: 550px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
+
 #call-to-action #interaction-modal.mobile {
   height: auto;
   width: 95%;

public/index.html

@@ -30,7 +30,12 @@
 
   <script>
     window.showA7Back = function () {
-      document.getElementById('A7Back').style.display = 'block'
+      const back = document.getElementById('A7Back')
+      back.style.display = 'block'
+      back.style.pointerEvents = 'none'
+      setTimeout(() => {
+        back.style.pointerEvents = 'auto'
+      }, 500)
     }
     window.hideA7Back = function () {
       document.getElementById('A7Back').style.display = 'none'

src/App.tsx

@@ -52,11 +52,11 @@ const planSize = {
 export default function App() {
   useEffect(() => {
     // 打包环境 刷新页面从 首页 开始
-    // if (!isLoc && myData.isLdong) {
-    //   if (window.location.hash !== '#/') {
-    //     window.location.href = window.location.href.split('#')[0] + '#/'
-    //   }
-    // }
+    if (!isLoc && myData.isLdong) {
+      if (window.location.hash !== '#/') {
+        window.location.href = window.location.href.split('#')[0] + '#/'
+      }
+    }
   }, [])
 
   // 根元素
@@ -140,14 +140,14 @@ export default function App() {
     store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
   }, [])
 
-  const audioPlayFu = useCallback(() => {
-    // 播放背景音乐
-    const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
-    // if (audioDom) {
-    //   if (audioDom.paused) audioDom.play()
-    //   else rootRef.current.removeEventListener('click', audioPlayFu)
-    // }
-  }, [])
+  // const audioPlayFu = useCallback(() => {
+  // 播放背景音乐
+  // const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
+  // if (audioDom) {
+  //   if (audioDom.paused) audioDom.play()
+  //   else rootRef.current.removeEventListener('click', audioPlayFu)
+  // }
+  // }, [])
 
   useEffect(() => {
     rootRef.current = document.querySelector('#root')
@@ -158,8 +158,8 @@ export default function App() {
     window.addEventListener('resize', pageFullChangeFu, false)
 
     // 全局点击都播放背景音乐
-    if (myData.isLdong && !isLoc) rootRef.current.addEventListener('click', audioPlayFu)
-  }, [audioPlayFu, pageFullChangeFu])
+    //   if (myData.isLdong && !isLoc) rootRef.current.addEventListener('click', audioPlayFu)
+  }, [pageFullChangeFu])
 
   // 动态根据路由更改背景图
   const handleHashChange = () => {

src/assets/styles/base.css

@@ -329,7 +329,7 @@ textarea {
   height: 100%;
   cursor: pointer;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   align-items: center;
 }
 #root .ant-tooltip .tooltip_MT .top .close > img {
@@ -358,4 +358,4 @@ textarea {
   position: fixed;
   top: 0;
   left: 0;
-}
+}

src/components/MenuSider/index.module.scss

@@ -38,7 +38,7 @@
       background: url(../../assets/img/menuSider.png) no-repeat center center;
       background-size: 100% 100%;
       display: flex;
-      justify-content: end;
+      justify-content: flex-end;
       & > img {
         position: absolute;
         height: 20px;

src/pages/A0base/index.module.scss

@@ -51,7 +51,7 @@
             cursor: pointer;
             display: flex;
             align-items: center;
-            justify-content: end;
+            justify-content: flex-end;
             gap: 5px;
             .icon {
               width: 20px;
@@ -114,7 +114,7 @@
       left: 2%;
       display: flex;
       align-items: center;
-      justify-content: end;
+      justify-content: flex-end;
       flex-direction: column;
       .inter_content {
         width: 100%;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styles from "./index.module.scss";
 import { myData } from "@/utils/http";
 import { callIframeFu } from "@/utils/history";
@@ -40,7 +40,7 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
           </div>
           <div className="topR">
             <div className="split"></div>
-            <div className="txt">碑面</div>
+            <div className="txt">碑阳</div>
           </div>
         </div>
         <div className="detail_bottom"> <div className="topL">

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

@@ -11,7 +11,7 @@ function Intro() {
       {myData.introInfo.map((item, index) => (
         <div className="info" key={index}>
           <div className="label">{item.title}</div>
-          <div className="content">{item.text}</div>
+          <div className="content" dangerouslySetInnerHTML={{ __html: item.text }}></div>
         </div>
       ))}
     </div>

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

@@ -8,7 +8,7 @@
   transform: translate(-8%, -50%);
   display: flex;
   align-items: center;
-  justify-content: end;
+  justify-content: flex-end;
   :global {
     .modalTxtContainner {
       width: 450px;

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

@@ -3,8 +3,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import { myData } from '@/utils/http'
 import { Tooltip } from 'antd'
-import { renderToString } from 'react-dom/server';
-import history, { callIframeFu, isMobiileFu } from '@/utils/history'
+import { callIframeFu, isMobiileFu } from '@/utils/history'
 
 function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (isShowTabBar: boolean) => void; setIsShowMzmTitle: (isShowMzmTitle: boolean) => void }) {
   const [selectedTab, setSelectedTab] = useState(0)
@@ -12,6 +11,11 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
   const [activeAId, setActiveAId] = useState<number | null>(null)
   const [showTooltip, setShowTooltip] = useState(-1)
 
+  const ori_touchStartX = useRef(0);
+  const trans_touchStartX = useRef(0);
+  const originRef = useRef<any>(null);
+  const translateRef = useRef<any>(null);
+
   useEffect(() => {
     if (selectedTab !== 0) {
       setIsShowMzmTitle(true)
@@ -24,6 +28,30 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
     localStorage.setItem('selectedBeiwen', selectedTab.toString())
   }, [selectedTab])
 
+  // 由于移动端旋转得到，滚动的xy轴需要对调
+
+  // 处理触摸移动事件
+  const handleOriTouchMove = (e: any) => {
+    e.preventDefault();
+    const deltaX = e.touches[0].clientX - ori_touchStartX.current;
+    if (originRef.current) {
+      originRef.current.scrollTop += deltaX;
+    }
+    ori_touchStartX.current = e.touches[0].clientX;
+  };
+  const handleTransTouchMove = (e: any) => {
+    e.preventDefault();
+    const deltaX = e.touches[0].clientX - trans_touchStartX.current;
+    if (translateRef.current) {
+      translateRef.current.scrollTop += deltaX;
+    }
+    trans_touchStartX.current = e.touches[0].clientX;
+  };
+  // 处理触摸开始事件
+  const handleTouchStart = (e: any, start: any) => {
+    start.current = e.touches[0].clientX;
+  };
+
   //动态加入a标签
   const CommentLink = ({ index, word, define, inset }: { index: number; word: string; define: string; inset: string }) => {
     const handleClick = () => {
@@ -49,7 +77,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
         open={showTooltip === index}
         trigger='click'
         placement='topLeft'
-        align={{ offset: [-30, 0] }}
+        align={{ offset: [-45, 0] }}
         arrow={false}
       >
         <a key={index} className={activeAId === index ? 'active' : ''} onTouchEnd={handleClick} onClick={handleClick} >
@@ -197,7 +225,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
           <div className='detailTxt'>
             <div className='left'>
               <div className='title'>原文</div>
-              <div className='txt'>
+              <div className='txt' onTouchMove={handleOriTouchMove} onTouchStart={(e) => handleTouchStart(e, ori_touchStartX)} ref={originRef}>
                 {CommentText({
                   str: myData.readDetail[selectedTab - 1].origin,
                   index: selectedTab - 1
@@ -206,7 +234,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
             </div>
             <div className='right'>
               <div className='title'>译文</div>
-              <div className='txt'>{myData.readDetail[selectedTab - 1].translate}</div>
+              <div className='txt' onTouchMove={handleTransTouchMove} onTouchStart={(e) => handleTouchStart(e, trans_touchStartX)} ref={translateRef} dangerouslySetInnerHTML={{ __html: myData.readDetail[selectedTab - 1].translate }}></div>
             </div>
           </div>
         )}

src/pages/A2yblm/index.module.scss

@@ -84,7 +84,7 @@
       cursor: pointer;
       .icon {
         width: 20px;
-        height: 20px;
+        height: 100%;
         & > img {
           height: 100%;
           object-fit: contain;
@@ -95,6 +95,7 @@
         width: fit-content;
         font-size: 9px;
         font-weight: 500;
+        line-height: 25px;
         color: #fbebbd;
       }
     }

src/pages/A2yblm/index.tsx

@@ -92,7 +92,7 @@ function A2yblm() {
       {isOpenMzm && (
         <div className='mzm'>
           <div className='top'>
-            <div className='title'>{myData.readDetail[Number(localStorage.getItem('selectedBeiwen')) ?? 0].mzmtz.title}</div>
+            <div className='title'>{myData.readDetail[Number(localStorage.getItem('selectedBeiwen')) - 1 ?? 0].mzmtz.title}</div>
             <div className='close' onClick={() => setIsOpenMzm(false)}>
               <img
                 src={require('@/assets/img/closeWithTxt.png')}
@@ -103,7 +103,7 @@ function A2yblm() {
           </div>
           <div
             className='content'
-            dangerouslySetInnerHTML={{ __html: myData.readDetail[Number(localStorage.getItem('selectedBeiwen')) ?? 0].mzmtz.content }}
+            dangerouslySetInnerHTML={{ __html: myData.readDetail[Number(localStorage.getItem('selectedBeiwen')) - 1 ?? 0].mzmtz.content }}
           ></div>
         </div>
       )}

src/pages/A4quanwen/index.module.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: end;
+  justify-content: flex-end;
   :global {
     .back {
       width: 60px;

src/pages/A7wjwj/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import styles from "./index.module.scss";
 function A7Wjwj() {
   // 进入A7时，将隐藏的页面打开，全景图->诗歌->大场景

src/utils/http.ts

@@ -1,5 +1,5 @@
 
-export const isLoc = false
+export const isLoc = true
 
 export const baseURL = isLoc ? baseUrlLoc : baseUrlAtl