修改一波样式

public/myData/myData.js

@@ -2,6 +2,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
+
 // 本地开发静态资源目录
 const baseUrlLoc = 'http://192.168.0.68:8080/staticData/'
 

src/assets/styles/base.css

@@ -359,3 +359,7 @@ textarea {
   top: 0;
   left: 0;
 }
+.myFont {
+  font-family: 'SimSun' !important;
+  font-weight: 700;
+}

src/assets/styles/base.less

@@ -66,7 +66,8 @@ body #A7Back {
   top: 3%;
   left: 4%;
   cursor: pointer;
-  & > img {
+
+  &>img {
     height: 100%;
     object-fit: contain;
   }
@@ -77,7 +78,7 @@ body #A7Back {
   margin: auto;
   position: relative;
 
-  & > div {
+  &>div {
     width: 100%;
     height: 100%;
   }
@@ -110,8 +111,10 @@ textarea {
   transition: opacity 0.5s;
   text-align: center;
   transform: scale(0.6);
+
   .ant-result {
     padding: 20px !important;
+
     .ant-result-subtitle {
       font-size: 20px;
     }
@@ -158,6 +161,7 @@ textarea {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
+
 .adm-auto-center-content {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
@@ -168,6 +172,7 @@ textarea {
 
 .hoverD {
   transition: all 0.3s;
+
   &:hover {
     transform: scale(1.1);
   }
@@ -178,6 +183,7 @@ textarea {
   animation: yunShan 1.5s infinite linear;
   color: #f1e39e;
 }
+
 @keyframes yunShan {
   0% {
     opacity: 1;
@@ -200,7 +206,8 @@ textarea {
   cursor: pointer;
   bottom: 15px;
   right: 20px;
-  & > img {
+
+  &>img {
     position: absolute;
     top: 0;
     left: 0;
@@ -210,15 +217,18 @@ textarea {
     opacity: 1;
     transition: all 0.3s;
   }
+
   .BtnRight2 {
     opacity: 0;
     pointer-events: none;
   }
+
   &:hover {
     .BtnRight1 {
       opacity: 0;
       pointer-events: none;
     }
+
     .BtnRight2 {
       opacity: 1;
       pointer-events: auto;
@@ -237,6 +247,7 @@ textarea {
 #HotOpCss {
   animation: HotOpCss 0.5s linear forwards;
 }
+
 @keyframes HotOpCss {
   0% {
     opacity: 0;
@@ -260,16 +271,20 @@ textarea {
 // antd mo 查看图片
 
 @media screen and (orientation: portrait) {
+
   /* 竖屏 */
   .adm-image-viewer-image-wrapper img {
     transform: rotate(90deg) !important;
   }
+
   .adm-toast-wrap {
     transform: rotate(90deg) !important;
   }
+
   #root .ant-tooltip {
     transform: rotate(0) !important;
   }
+
   body #A7Back {
     transform: rotate(90deg);
     left: auto;
@@ -280,7 +295,8 @@ textarea {
     position: absolute;
     z-index: 3;
     cursor: pointer;
-    & > img {
+
+    &>img {
       height: 100%;
       object-fit: contain;
     }
@@ -303,6 +319,7 @@ textarea {
 .HotIconBase {
   animation: yunShan 2s infinite linear;
 }
+
 @keyframes yunShan {
   0% {
     opacity: 1;
@@ -337,6 +354,7 @@ textarea {
 .likeImg2 {
   animation: likeImg2 1.5s linear forwards;
 }
+
 @keyframes likeImg2 {
   0% {
     transform: scale(0.1);
@@ -371,6 +389,7 @@ textarea {
     width: 100% !important;
     height: 100% !important;
   }
+
   .ant-tooltip-inner {
     background: url(../img/tooltipBg.png) no-repeat;
     background-size: 100% 100%;
@@ -389,12 +408,14 @@ textarea {
   flex-direction: column;
   padding-bottom: 8px;
   gap: 4px;
+
   .top {
     width: 100%;
     height: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .title {
       width: 30px;
       height: 100%;
@@ -402,6 +423,7 @@ textarea {
       line-height: 15px;
       color: rgba(255, 233, 182, 1);
     }
+
     .close {
       width: 40px;
       height: 100%;
@@ -409,12 +431,14 @@ textarea {
       display: flex;
       justify-content: end;
       align-items: center;
-      & > img {
+
+      &>img {
         height: 90%;
         object-fit: contain;
       }
     }
   }
+
   .content {
     width: 100%;
     height: calc(100% - 16px);
@@ -423,9 +447,11 @@ textarea {
     color: #fff;
     font-weight: lighter;
     overflow: auto;
+
     &::-webkit-scrollbar {
       width: 1px;
     }
+
     &::-webkit-scrollbar-thumb {
       background: rgba(255, 233, 182, 1);
     }
@@ -440,4 +466,9 @@ textarea {
   position: fixed;
   top: 0;
   left: 0;
+}
+
+.myFont {
+  font-family:'SimSun' !important;
+  font-weight: 700;
 }

src/components/MenuSider/index.module.scss

@@ -7,11 +7,13 @@
   top: 3%;
   right: 3%;
   cursor: pointer;
-  & > img {
+
+  &>img {
     height: 100%;
     object-fit: contain;
   }
 }
+
 // menu界面
 .menuSider {
   opacity: 0;
@@ -26,14 +28,17 @@
   transform: translate(-50%, -50%);
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(3px);
+
   &:global(.show) {
     opacity: 1;
     pointer-events: auto;
+
     .sider {
       transition: all 0.3s ease-in-out;
       transform: translate(0, -50%);
     }
   }
+
   :global {
     .sider {
       width: 26%;
@@ -47,7 +52,8 @@
       background-size: 100% 100%;
       display: flex;
       justify-content: flex-end;
-      & > img {
+
+      &>img {
         position: absolute;
         height: 20px;
         top: 50%;
@@ -56,6 +62,7 @@
         cursor: pointer;
         object-fit: contain;
       }
+
       .siderContent {
         width: 90%;
         height: 100%;
@@ -65,6 +72,7 @@
         align-items: center;
         gap: 20px;
         position: relative;
+
         .tab {
           text-align: center;
           width: 100%;
@@ -84,20 +92,24 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            & > img {
+
+            &>img {
               width: 60%;
               height: 100%;
               object-fit: contain;
             }
           }
         }
+
         .tabAc {
           color: #fbebbd;
+
           .bottomLine {
             bottom: 20px;
             height: 30px;
           }
         }
+
         .icon {
           position: relative;
           top: 60px;
@@ -108,7 +120,7 @@
           justify-content: center;
           gap: 10px;
 
-          & > div {
+          &>div {
             font-size: 10px;
             font-weight: lighter;
             color: #fff;
@@ -116,7 +128,8 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            & > img {
+
+            &>img {
               width: 30px;
               object-fit: contain;
             }
@@ -126,3 +139,43 @@
     }
   }
 }
+
+
+// ------------移动端页面---------
+.menuMo {
+  top: 2%;
+  right: 2%;
+  ;
+  width: 66px;
+  height: 66px;
+}
+
+
+.menuSiderMo {
+  :global {
+    .sider {
+      img {
+        height: 46px;
+        left: -6%;
+      }
+
+      .siderContent {
+        .tab {
+          font-size: 24px;
+        }
+
+        .icon {
+          width: 100%;
+          &>div{
+            img{
+              width: 40px;
+            }
+            .txt{
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/MenuSider/index.tsx

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import styles from "./index.module.scss";
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import { isPc } from '@/utils/http'
 
 /**
  * @param activeTab 0:一碑两面 1:一碑万象 2:无尽未竟
@@ -7,11 +9,20 @@ import styles from "./index.module.scss";
 function MenuSider({ activeTab }: { activeTab: number }) {
   const [isShowMenu, setIsShowMenu] = useState(false)
   return (
-    < >
-      <div className={styles.menu} onClick={() => setIsShowMenu(true)}>
+    <>
+      <div
+        className={classNames(isPc ? '' : styles.menuMo, styles.menu)}
+        onClick={() => setIsShowMenu(true)}
+      >
         <img src={require('@/assets/img/btn_menu.png')} alt='' />
       </div>
-      <div className={`${styles.menuSider} ${isShowMenu ? 'show' : ''}`}>
+      <div
+        className={classNames(
+          styles.menuSider,
+          isShowMenu ? 'show' : '',
+          isPc ? '' : styles.menuSiderMo
+        )}
+      >
         <div className='sider'>
           <img
             onClick={() => setIsShowMenu(false)}
@@ -19,17 +30,41 @@ function MenuSider({ activeTab }: { activeTab: number }) {
             alt=''
           />
           <div className='siderContent'>
-            <div className={`tab ${activeTab === 0 ? 'tabAc' : ''}`} onClick={() => window.location.replace('#/yblm')}>
-              <div className="txt">一碑两面</div>
-              <div className={`bottomLine`}><img src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)} alt="" /></div>
+            <div
+              className={`tab ${activeTab === 0 ? 'tabAc' : ''}`}
+              onClick={() => window.location.replace('#/yblm')}
+            >
+              <div className='txt'>一碑两面</div>
+              <div className={`bottomLine`}>
+                <img
+                  src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)}
+                  alt=''
+                />
+              </div>
             </div>
-            <div className={`tab ${activeTab === 1 ? 'tabAc' : ''}`} onClick={() => window.location.replace('#/ybwx')}>
-              <div className="txt">一碑万象</div>
-              <div className={`bottomLine`}><img src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)} alt="" /></div>
+            <div
+              className={`tab ${activeTab === 1 ? 'tabAc' : ''}`}
+              onClick={() => window.location.replace('#/ybwx')}
+            >
+              <div className='txt'>一碑万象</div>
+              <div className={`bottomLine`}>
+                <img
+                  src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)}
+                  alt=''
+                />
+              </div>
             </div>
-            <div className={`tab ${activeTab === 2 ? 'tabAc' : ''}`} onClick={() => window.location.replace('#/wjwj')}>
-              <div className="txt">无尽未竟</div>
-              <div className={`bottomLine`}><img src={require(`@/assets/img/menu_item${activeTab === 2 ? '_ac.png' : '.png'}`)} alt="" /></div>
+            <div
+              className={`tab ${activeTab === 2 ? 'tabAc' : ''}`}
+              onClick={() => window.location.replace('#/wjwj')}
+            >
+              <div className='txt'>无尽未竟</div>
+              <div className={`bottomLine`}>
+                <img
+                  src={require(`@/assets/img/menu_item${activeTab === 2 ? '_ac.png' : '.png'}`)}
+                  alt=''
+                />
+              </div>
             </div>
             <div className='icon'>
               <div className='paint'>
@@ -52,6 +87,6 @@ function MenuSider({ activeTab }: { activeTab: number }) {
   )
 }
 
-const MemoMenuSider = React.memo(MenuSider);
+const MemoMenuSider = React.memo(MenuSider)
 
-export default MemoMenuSider;
+export default MemoMenuSider

src/pages/A0base/index.module.scss

@@ -3,6 +3,7 @@
   height: 100%;
   background-color: #ccc;
   position: relative;
+
   :global {
     .A0baseContainner {
       width: 58%;
@@ -15,12 +16,14 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .content {
         width: 60%;
         height: 100%;
         display: flex;
         flex-direction: column;
         gap: 10px;
+
         .title {
           width: 150px;
           max-width: 80%;
@@ -29,6 +32,7 @@
           color: rgba(124, 75, 54, 1);
           border-bottom: 1px solid rgba(93, 96, 96, 0.4);
         }
+
         .text {
           width: 90%;
           height: fit-content;
@@ -38,6 +42,7 @@
           font-weight: lighter;
           color: rgba(93, 96, 96, 1);
         }
+
         .btn {
           padding-top: 10px;
           font-size: 14px;
@@ -46,6 +51,7 @@
           cursor: pointer;
         }
       }
+
       .baseContent {
         width: 155px;
         height: 100%;
@@ -54,6 +60,7 @@
         justify-content: center;
         flex-direction: column;
         gap: 20px;
+
         .base {
           width: 165px;
           height: 60px;
@@ -64,6 +71,7 @@
           color: rgba(255, 233, 182, 1);
           cursor: pointer;
         }
+
         .baseAc {
           color: rgba(124, 75, 54, 1);
           background: url('../../assets/img/A0_btn_bg_ac.png') no-repeat center center;
@@ -85,6 +93,7 @@
       align-items: center;
       justify-content: flex-end;
       flex-direction: column;
+
       .inter_content {
         width: 100%;
         height: 0;
@@ -110,15 +119,18 @@
           font-weight: 500;
         }
       }
+
       /* 展开状态样式 */
       .inter_content_active {
         height: calc(100% - 50px);
         opacity: 1;
       }
+
       .icon {
         width: 50px;
         height: 50px;
         cursor: pointer;
+
         img {
           width: 100%;
           height: 100%;
@@ -153,11 +165,13 @@
       flex-direction: column;
       color: rgba(177, 150, 123, 1);
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 30px;
         object-fit: contain;
       }
-      & > .guideVideoTitle {
+
+      &>.guideVideoTitle {
         height: 12px;
         line-height: 8px;
         font-size: 12px;
@@ -166,3 +180,51 @@
     }
   }
 }
+
+
+// ------------移动端---------------
+
+.A0baseMo {
+  :global {
+    .home {
+      width: 44px;
+      height: 44px;
+    }
+
+    .interact .icon {
+      width: 64px;
+      height: 64px;
+    }
+
+    .guideVideo {
+      &>img {
+        width: 44px;
+        object-fit: cover;
+      }
+
+      .guideVideoTitle {
+        margin-top: 5px;
+        font-size: 16px;
+      }
+    }
+    .A0baseContainner .content{
+      width: 64%;
+      .title{
+        width: 160px;
+        font-size: 26px;
+      }
+      .text{
+        color: black;
+        font-size: 18px;
+        line-height: 22px;
+        letter-spacing: 2px;
+        text-align: justify;
+      }
+      .btn{
+        font-size: 18px;
+        padding-top: 30px;
+      }
+    }
+  }
+
+}

src/pages/A0base/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { isPc, myData } from '@/utils/http'
+import classNames from 'classnames'
 
 function A0base() {
   const [currentBase, setCurrentBase] = useState(0)
@@ -13,10 +14,10 @@ function A0base() {
   }
 
   return (
-    <div className={styles.A0base}>
+    <div className={classNames(isPc?'':styles.A0baseMo,styles.A0base)}>
       <div className='A0baseContainner'>
         <div className='content'>
-          <div className='title'>{myData.baseInfo[currentBase].title}</div>
+          <div className='title myFont'>{myData.baseInfo[currentBase].title}</div>
           <div className='text'>{myData.baseInfo[currentBase].text}</div>
           <div className='btn' onClick={(e) => goto(e, myData.baseInfo[currentBase].path)}>查看详情</div>
         </div>

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

@@ -79,3 +79,21 @@
     }
   }
 }
+
+// ---------移动端
+.detailMo{
+  :global {
+    .selectContainner {
+      &>div {
+        &>div {
+          .txt {
+            font-size: 18px !important;
+          }
+          .item{
+            font-size: 18px !important;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,7 +1,8 @@
 import React from "react";
 import styles from "./index.module.scss";
-import { myData } from "@/utils/http";
+import { isPc, myData } from "@/utils/http";
 import { callIframeFu } from "@/utils/history";
+import classNames from 'classnames'
 
 type DetailProps = {
   currentTagIndex: number,
@@ -27,7 +28,7 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
   }
 
   return (
-    <div className={styles.detail}>
+    <div className={classNames(styles.detail,isPc?'':styles.detailMo)}>
       <div className="selectContainner">
         <div className="detail_top">
           <div className="topL">

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

@@ -8,11 +8,15 @@
   padding-top: 40px;
   background: url(../../../../assets/img/intro_bg.png) no-repeat center center;
   background-size: 100% 100%;
+
+  overflow-y: auto;
+
   :global {
     .titleLogo {
       width: 100px;
       height: 50px;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -24,6 +28,7 @@
       display: flex;
       gap: 10px;
       color: #fff;
+
       .label {
         font-size: 12px;
         font-weight: bold;
@@ -31,6 +36,7 @@
         width: 40px;
         text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
       }
+
       .content {
         width: calc(100% - 40px);
         color: rgba(255, 255, 255, 0.8);
@@ -40,3 +46,29 @@
     }
   }
 }
+
+
+// --------移动端-----
+.IntroMo {
+  padding-top: 30px;
+
+  :global {
+    .titleLogo {
+      width: 120px;
+      height: 60px;
+    }
+
+    .info {
+      &:last-child{
+        margin-bottom: 15px;
+      }
+      .label {
+        font-size: 16px;
+      }
+      .content{
+        font-size: 16px;
+        text-align: justify;
+      }
+    }
+  }
+}

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

@@ -1,10 +1,12 @@
 import React from "react";
 import styles from "./index.module.scss";
-import { myData } from "@/utils/http";
+import { isPc, myData } from "@/utils/http";
+import classNames from 'classnames'
+
 function Intro() {
 
   return (
-    <div className={styles.Intro}>
+    <div className={classNames(styles.Intro,isPc?'':styles.IntroMo)}>
       <div className="titleLogo">
         <img src={require("@/assets/img/titleLogo.png")} alt="" />
       </div>

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

@@ -1,20 +1,27 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { isPc, myData } from '@/utils/http'
 import { Tooltip } from 'antd'
 import { callIframeFu, isMobiileFu } from '@/utils/history'
+import classNames from 'classnames'
 
-function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (isShowTabBar: boolean) => void; setIsShowMzmTitle: (isShowMzmTitle: boolean) => void }) {
+function ModalTxt({
+  setIsShowTabBar,
+  setIsShowMzmTitle
+}: {
+  setIsShowTabBar: (isShowTabBar: boolean) => void
+  setIsShowMzmTitle: (isShowMzmTitle: boolean) => void
+}) {
   const [selectedTab, setSelectedTab] = useState(0)
 
   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);
+  const ori_touchStartX = useRef(0)
+  const trans_touchStartX = useRef(0)
+  const originRef = useRef<any>(null)
+  const translateRef = useRef<any>(null)
 
   useEffect(() => {
     if (selectedTab !== 0) {
@@ -23,7 +30,6 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
     }
   }, [selectedTab, setIsShowMzmTitle, setIsShowTabBar])
 
-
   useEffect(() => {
     localStorage.setItem('selectedBeiwen', selectedTab.toString())
   }, [selectedTab])
@@ -32,28 +38,38 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
 
   // 处理触摸移动事件
   const handleOriTouchMove = (e: any) => {
-    e.preventDefault();
-    const deltaX = e.touches[0].clientX - ori_touchStartX.current;
+    e.preventDefault()
+    const deltaX = e.touches[0].clientX - ori_touchStartX.current
     if (originRef.current) {
-      originRef.current.scrollTop += deltaX;
+      originRef.current.scrollTop += deltaX
     }
-    ori_touchStartX.current = e.touches[0].clientX;
-  };
+    ori_touchStartX.current = e.touches[0].clientX
+  }
   const handleTransTouchMove = (e: any) => {
-    e.preventDefault();
-    const deltaX = e.touches[0].clientX - trans_touchStartX.current;
+    e.preventDefault()
+    const deltaX = e.touches[0].clientX - trans_touchStartX.current
     if (translateRef.current) {
-      translateRef.current.scrollTop += deltaX;
+      translateRef.current.scrollTop += deltaX
     }
-    trans_touchStartX.current = e.touches[0].clientX;
-  };
+    trans_touchStartX.current = e.touches[0].clientX
+  }
   // 处理触摸开始事件
   const handleTouchStart = (e: any, start: any) => {
-    start.current = e.touches[0].clientX;
-  };
+    start.current = e.touches[0].clientX
+  }
 
   //动态加入a标签
-  const CommentLink = ({ index, word, define, inset }: { index: number; word: string; define: string; inset: string }) => {
+  const CommentLink = ({
+    index,
+    word,
+    define,
+    inset
+  }: {
+    index: number
+    word: string
+    define: string
+    inset: string
+  }) => {
     const handleClick = () => {
       setActiveAId(index)
       setShowTooltip(index)
@@ -66,11 +82,15 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
           <div className='tooltip_MT'>
             <div className='top'>
               <div className='title'>{word}</div>
-              <div className='close' onClick={() => setShowTooltip(-1)} onTouchEnd={() => setShowTooltip(-1)}>
+              <div
+                className='close'
+                onClick={() => setShowTooltip(-1)}
+                onTouchEnd={() => setShowTooltip(-1)}
+              >
                 <img src={require('@/assets/img/close.png')} alt='' draggable='false' />
               </div>
             </div>
-            <div className="content">{define}</div>
+            <div className='content'>{define}</div>
           </div>
         }
         getPopupContainer={() => document.body.querySelector('#root') as HTMLElement}
@@ -80,7 +100,12 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
         align={{ offset: [-45, 0] }}
         arrow={false}
       >
-        <a key={index} className={activeAId === index ? 'active' : ''} onTouchEnd={handleClick} onClick={handleClick} >
+        <a
+          key={index}
+          className={activeAId === index ? 'active' : ''}
+          onTouchEnd={handleClick}
+          onClick={handleClick}
+        >
           {word}
         </a>
       </Tooltip>
@@ -88,32 +113,32 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
   }
 
   const CommentText = ({ str, index }: { str: string; index: number }) => {
-    const convertArr = myData.readDetail[index].words.map(item => item.name);
-    const defineArr = myData.readDetail[index].words.map(item => item.define);
-    const insetArr = myData.readDetail[index].words.map(item => item.inset);
-    const parts: React.ReactNode[] = [];
-    let remainingStr = str;
+    const convertArr = myData.readDetail[index].words.map(item => item.name)
+    const defineArr = myData.readDetail[index].words.map(item => item.define)
+    const insetArr = myData.readDetail[index].words.map(item => item.inset)
+    const parts: React.ReactNode[] = []
+    let remainingStr = str
 
     // 工具函数：过滤 <p> 标签（保留文本，移除所有 <p> 和 </p>）
     const removePTags = (text: string) => {
       // 匹配所有 <p...> 和 </p> 标签，替换为空（保留内部文本）
-      return text.replace(/<p[^>]*>/gi, '').replace(/<\/p>/gi, '');
-    };
+      return text.replace(/<p[^>]*>/gi, '').replace(/<\/p>/gi, '')
+    }
 
     // 先过滤原始字符串中的 <p> 标签
-    remainingStr = removePTags(remainingStr);
+    remainingStr = removePTags(remainingStr)
     // 若 word/define 也带 <p>，同步过滤（按需开启）
     // convertArr = convertArr.map(word => removePTags(word));
     // defineArr = defineArr.map(define => removePTags(define));
 
     convertArr.forEach((word, idx) => {
       // 注意：若 word 含特殊字符（如 . * +），需转义正则
-      const escapedWord = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      const regex = new RegExp(escapedWord);
-      const match = remainingStr.match(regex);
+      const escapedWord = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      const regex = new RegExp(escapedWord)
+      const match = remainingStr.match(regex)
 
       if (match) {
-        const matchIndex = match.index || 0;
+        const matchIndex = match.index || 0
 
         // 添加匹配前的文本（已过滤 <p>）
         if (matchIndex > 0) {
@@ -122,7 +147,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
               key={`text-before-${idx}`}
               dangerouslySetInnerHTML={{ __html: remainingStr.substring(0, matchIndex) }}
             />
-          );
+          )
         }
 
         // 添加链接组件（若 define 带 <p>，这里也可过滤：define={removePTags(defineArr[idx])}）
@@ -134,25 +159,20 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
             define={defineArr[idx]}
             inset={insetArr[idx]}
           />
-        );
+        )
 
         // 更新剩余字符串
-        remainingStr = remainingStr.substring(matchIndex + word.length);
+        remainingStr = remainingStr.substring(matchIndex + word.length)
       }
-    });
+    })
 
     // 添加剩余文本（已过滤 <p>）
     if (remainingStr) {
-      parts.push(
-        <span
-          key="text-remaining"
-          dangerouslySetInnerHTML={{ __html: remainingStr }}
-        />
-      );
+      parts.push(<span key='text-remaining' dangerouslySetInnerHTML={{ __html: remainingStr }} />)
     }
 
-    return <>{parts}</>;
-  };
+    return <>{parts}</>
+  }
 
   const handleBeie = () => {
     window.location.replace('#/beie')
@@ -165,10 +185,8 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
   }
 
   return (
-    <div className={styles.modalTxt} id='modalTxt'>
+    <div className={classNames(styles.modalTxt, isPc ? '' : styles.modalTxtMo)} id='modalTxt'>
       <div className='modalTxtContainner'>
-
-
         <div className='topBar'>
           <div className='beie'>
             <img src={require('@/assets/img/beie.png')} alt='' />
@@ -225,7 +243,12 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
           <div className='detailTxt'>
             <div className='left'>
               <div className='title'>原文</div>
-              <div className='txt' onTouchMove={handleOriTouchMove} onTouchStart={(e) => handleTouchStart(e, ori_touchStartX)} ref={originRef}>
+              <div
+                className='txt'
+                onTouchMove={handleOriTouchMove}
+                onTouchStart={e => handleTouchStart(e, ori_touchStartX)}
+                ref={originRef}
+              >
                 {CommentText({
                   str: myData.readDetail[selectedTab - 1].origin,
                   index: selectedTab - 1
@@ -234,7 +257,13 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
             </div>
             <div className='right'>
               <div className='title'>译文</div>
-              <div className='txt' onTouchMove={handleTransTouchMove} onTouchStart={(e) => handleTouchStart(e, trans_touchStartX)} ref={translateRef} dangerouslySetInnerHTML={{ __html: 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>
         )}
@@ -243,7 +272,8 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
           <div className='content'>
             <div className='title'>碑文概述</div>
             <div className='text'>
-              <p>碑额留出高约15厘米的空白范围，仅在碑额左侧题写造碑日期。《山
+              <p>
+                碑额留出高约15厘米的空白范围，仅在碑额左侧题写造碑日期。《山
                 西通志》指出：其“碑额题‘大魏天平元年岁次甲寅十一月庚辰朔三日壬午造讫’
                 岁月书额，唐贞观晋祠铭以前，此为仅见”。
               </p>
@@ -251,7 +281,6 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
                 程哲碑碑文，31行楷书，满行45字，字径约2厘米，带方界格，总计
                 1404字；未刻正式碑名。通篇颂德程氏家族的历史功绩。
               </p>
-
             </div>
           </div>
         )}

src/pages/A2yblm/index.module.scss

@@ -3,6 +3,7 @@
   height: 100%;
   position: relative;
   background-color: #ccc;
+
   :global {
     .A2_tabBar {
       width: 50px;
@@ -33,6 +34,7 @@
         color: #fbebbd;
         cursor: pointer;
       }
+
       .tab_active {
         background: url(../../assets/img/btn_tabAc.png) no-repeat center center;
         background-size: 100% 100%;
@@ -48,11 +50,13 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     // 文物鉴赏
     .wenwu {
       width: 60px;
@@ -62,7 +66,8 @@
       bottom: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -82,10 +87,12 @@
       border-radius: 15px;
       padding: 0 8px;
       cursor: pointer;
+
       .icon {
         width: 20px;
         height: 100%;
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: contain;
         }
@@ -99,6 +106,7 @@
         color: #fbebbd;
       }
     }
+
     .mzm {
       width: 100%;
       height: 100%;
@@ -113,33 +121,39 @@
       flex-direction: column;
       gap: 10px;
       padding: 20px 55px;
+
       .top {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         height: 50px;
+
         .title {
           font-size: 14px;
           font-weight: 500;
           color: #fbebbd;
         }
+
         .close {
           width: 50px;
           height: 50px;
           cursor: pointer;
-          & > img {
+
+          &>img {
             height: 100%;
             object-fit: contain;
           }
         }
       }
+
       .content {
         font-size: 10px;
         line-height: 15px;
         font-weight: lighter;
         color: rgba(255, 255, 255, 1);
-        & > p {
+
+        &>p {
           padding-bottom: 15px;
         }
       }
@@ -155,6 +169,7 @@
       left: 50%;
       transform: translate(5%, -50%);
     }
+
     .sider2 {
       width: 170px;
       height: 100%;
@@ -164,6 +179,7 @@
       left: 50%;
       transform: translate(120%, -50%);
     }
+
     .sider3 {
       width: 100%;
       height: 100%;
@@ -177,6 +193,7 @@
     .show {
       opacity: 1;
       pointer-events: auto;
+
       .sider {
         transition: all 0.3s ease-in-out;
         transform: translate(0, -50%);
@@ -187,14 +204,13 @@
     .tagInfo {
       position: absolute;
       z-index: 1;
-      top: 50%;
-      left: 50%;
-      transform: translate(-150%, -50%);
+      top: 33%;
+      left: 14%;
       width: 200px;
-      height: 150px;
+      height: 260px;
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
+
       .top {
         width: 100%;
         height: 30px;
@@ -203,7 +219,7 @@
 
         .title {
           width: fit-content;
-          max-width: 105px;
+          max-width: 120px;
           height: 100%;
           line-height: 30px;
           font-size: 16px;
@@ -212,37 +228,112 @@
           display: flex;
           align-items: center;
           gap: 2px;
+
           .dot {
             font-size: 5px;
           }
         }
+
         .line {
           width: 0;
           flex: 1;
           height: 1px;
           border-top: 1px dashed rgba(124, 75, 54, 1);
         }
+
         .icon {
           width: 15px;
           height: 15px;
           display: flex;
           align-items: center;
           justify-content: center;
-          & > img {
+
+          &>img {
             width: 100%;
             height: 100%;
             object-fit: contain;
           }
         }
       }
+
       .content {
+        margin-top: 15px;
         width: 60%;
         height: 110px;
-        font-size: 10px;
-        line-height: 15px;
-        color: rgba(124, 75, 54, 1);
-        text-indent: 2em;
+        padding-right: 6px;
+          overflow-y: auto;
+
+        &>div {
+          width: 100%;
+          height: 100%;
+        
+          font-size: 10px;
+          line-height: 15px;
+          color: rgba(124, 75, 54, 1);
+          text-indent: 2em;
+          letter-spacing: 2px;
+          text-align: justify;
+        }
       }
     }
   }
 }
+
+
+// ---------移动端
+.A2yblmMo {
+  :global {
+    .back {
+      width: 80px;
+      height: 40px;
+
+      img {
+        object-fit: fill !important;
+      }
+    }
+
+    .A2_tabBar {
+      top: 46%;
+
+      .tab {
+        width: 80px;
+        height: 80px;
+        font-size: 16px;
+      }
+    }
+
+    .wenwu {
+      bottom: 2%;
+      left: 3.5%;
+      width: 80px;
+      height: 80px;
+    }
+
+    .tagInfo {
+      .top {
+        .title {
+          font-size: 22px;
+
+          .dot {
+            font-size: 10px;
+          }
+        }
+      }
+
+      .content {
+        width: 80%;
+        height: 240px;
+
+        &>div {
+          width: 100%;
+          height: 100%;
+          line-height: 20px;
+
+          font-size: 18px;
+
+        }
+
+      }
+    }
+  }
+}

src/pages/A2yblm/index.tsx

@@ -4,14 +4,16 @@ import { callIframeFu } from '@/utils/history'
 import Intro from '@/pages/A2yblm/components/Intro'
 import Detail from '@/pages/A2yblm/components/Detail'
 import ModalTxt from '@/pages/A2yblm/components/ModalTxt'
-import { myData } from '@/utils/http'
+import { isPc, myData } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
+import classNames from 'classnames'
+
 function A2yblm() {
   const [currentTab, setCurrentTab] = useState('tab1')
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowMzmTitle, setIsShowMzmTitle] = useState(false)
   const [isOpenMzm, setIsOpenMzm] = useState(false)
-  const [currentTagIndex, setCurrentTagIndex] = useState(1);
+  const [currentTagIndex, setCurrentTagIndex] = useState(1)
   const [isShowTag, setIsShowTag] = useState(false)
 
   const gotoQuanwenOrWenwu = useCallback(() => {
@@ -24,14 +26,13 @@ function A2yblm() {
     else window.location.replace('#/base')
   }
 
-
   // 退出图像赏析时调用showHotspot(-1) 退出碑文解读时调用showInscription(-1)
   useEffect(() => {
-    if (currentTab === 'tab2') setIsShowTag(true);
+    if (currentTab === 'tab2') setIsShowTag(true)
     if (currentTab !== 'tab2') {
-      setCurrentTagIndex(1);
+      setCurrentTagIndex(1)
       setIsShowTag(false)
-      callIframeFu('showHotspot', -1);
+      callIframeFu('showHotspot', -1)
     }
     // 墓志铭解读只在tab3显示
     if (currentTab !== 'tab3') {
@@ -42,7 +43,7 @@ function A2yblm() {
     callIframeFu('changePanel', currentTab === 'tab1' ? 1 : currentTab === 'tab2' ? 2 : 3)
   }, [currentTab])
   return (
-    <div className={styles.A2yblm}>
+    <div className={classNames(isPc ? '' : styles.A2yblmMo, styles.A2yblm)}>
       {/* 左侧边 */}
       <div className='A2_tabBar' style={{ display: isShowTabBar ? 'flex' : 'none' }}>
         <div
@@ -76,7 +77,10 @@ function A2yblm() {
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
       <div className='wenwu' onClick={gotoQuanwenOrWenwu}>
-        <img src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}.png`)} alt='' />
+        <img
+          src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}.png`)}
+          alt=''
+        />
       </div>
 
       {/* 墓志铭体制之变例 */}
@@ -92,7 +96,12 @@ function A2yblm() {
       {isOpenMzm && (
         <div className='mzm'>
           <div className='top'>
-            <div className='title'>{myData.readDetail[Number(localStorage.getItem('selectedBeiwen')) - 1 ?? 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,12 +112,15 @@ function A2yblm() {
           </div>
           <div
             className='content'
-            dangerouslySetInnerHTML={{ __html: myData.readDetail[Number(localStorage.getItem('selectedBeiwen')) - 1 ?? 0].mzmtz.content }}
+            dangerouslySetInnerHTML={{
+              __html:
+                myData.readDetail[Number(localStorage.getItem('selectedBeiwen')) - 1 ?? 0].mzmtz
+                  .content
+            }}
           ></div>
         </div>
       )}
 
-
       {/* 右侧内容 */}
       {currentTab === 'tab1' && (
         <div className='sider1'>
@@ -117,7 +129,11 @@ function A2yblm() {
       )}
       {currentTab === 'tab2' && (
         <div className='sider2'>
-          <Detail currentTagIndex={currentTagIndex} setCurrentTagIndex={setCurrentTagIndex} setIsShowTag={setIsShowTag} />
+          <Detail
+            currentTagIndex={currentTagIndex}
+            setCurrentTagIndex={setCurrentTagIndex}
+            setIsShowTag={setIsShowTag}
+          />
         </div>
       )}
       {currentTab === 'tab3' && (
@@ -128,13 +144,25 @@ function A2yblm() {
       <MenuSider activeTab={0} />
 
       {/* 图像赏析的tag 使用的是索引对应*/}
-      <div className="tagInfo" style={{ display: isShowTag ? 'flex' : 'none' }}>
-        <div className="top">
-          <div className="title"><div className="dot">●</div>{currentTagIndex >= myData.detail_modal.top.length ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].title : myData.detail_modal.top[currentTagIndex].title}<div className="dot">●</div></div>
-          <div className="line"></div>
-          <div className="icon"><img src={require('@/assets/img/icon_dot2.png')} alt="" /></div>
+      <div className='tagInfo' style={{ display: isShowTag ? 'flex' : 'none' }}>
+        <div className='top'>
+          <div className='title'>
+            <div className='dot'>●</div>
+            {currentTagIndex >= myData.detail_modal.top.length
+              ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].title
+              : myData.detail_modal.top[currentTagIndex].title}
+            <div className='dot'>●</div>
+          </div>
+          <div className='line'></div>
+          <div className='icon'>
+            <img src={require('@/assets/img/icon_dot2.png')} alt='' />
+          </div>
+        </div>
+        <div className='content'>
+          <div>{currentTagIndex >= myData.detail_modal.top.length
+            ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].txt
+            : myData.detail_modal.top[currentTagIndex].txt}</div>
         </div>
-        <div className="content">{currentTagIndex >= myData.detail_modal.top.length ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].txt : myData.detail_modal.top[currentTagIndex].txt}</div>
       </div>
     </div>
   )