up

public/myData/myData.js

@@ -23,17 +23,17 @@ const myDataTemp = {
   // /base页的三个模块信息
   baseInfo: [
     {
-      title: '【初识奇碑】',
+      title: '初识奇碑',
       text: '程哲碑，为山西地区现存重要的东魏时期碑刻，碑阳佛像宝相庄严，线条灵动、技艺精湛；碑阴文字楷中带隶，见证了北朝书法的演变，又载录程氏家族信息，一碑双面，融宗教信仰与丧葬记事功能于一体，堪称北朝碑林的“双面奇碑”。',
       path: '#/yblm'
     },
     {
-      title: '【融合之光】',
+      title: '融合之光',
       text: '程哲碑以其“佛教造像+家族谱系”的表现形式，成为反映东魏时代特征的特殊标本。佛教造像尽显宗教信仰的底蕴与艺术张力；家族谱系则折射出门第观念，标榜了程氏荣耀。一碑见证了造像艺术、家族观念、社会秩序等诸多方面，将东魏历史文化的深厚意蕴凝于方寸，堪称北朝文化的鲜活载体。',
       path: '#/ybwx'
     },
     {
-      title: '【寻踪叩问】',
+      title: '寻踪叩问',
       text: '自清末以来，程哲碑广受关注，辗转间，学界探索从未停歇——于碑刻文字中勾勒程氏荣光，窥见北朝社会风貌；在凌厉刀锋下探寻民间信仰，触摸艺术流变脉络。这通凝萃东魏时代气韵的石碑，既有已知研究的璀璨光华，更藏未知领域的深邃秘境，为我们叩问历史留下了无尽的遐想与追寻空间。',
       path: '#/wjwj'
     }

src/components/MenuSider/index.module.scss

@@ -161,17 +161,17 @@
 
       .siderContent {
         .tab {
-          font-size: 24px;
+          font-size: 20px;
         }
 
         .icon {
           width: 100%;
           &>div{
             img{
-              width: 40px;
+              width: 34px;
             }
             .txt{
-              font-size: 14px;
+              font-size: 12px;
             }
           }
         }

src/components/MenuSider/index.tsx

@@ -34,7 +34,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               className={`tab ${activeTab === 0 ? 'tabAc' : ''}`}
               onClick={() => window.location.replace('#/yblm')}
             >
-              <div className='txt'>一碑两面</div>
+              <div className='txt'>初识奇碑</div>
               <div className={`bottomLine`}>
                 <img
                   src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)}
@@ -46,7 +46,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               className={`tab ${activeTab === 1 ? 'tabAc' : ''}`}
               onClick={() => window.location.replace('#/ybwx')}
             >
-              <div className='txt'>一碑万象</div>
+              <div className='txt'>融合之光</div>
               <div className={`bottomLine`}>
                 <img
                   src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)}
@@ -58,7 +58,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               className={`tab ${activeTab === 2 ? 'tabAc' : ''}`}
               onClick={() => window.location.replace('#/wjwj')}
             >
-              <div className='txt'>无尽未竟</div>
+              <div className='txt'>寻踪叩问</div>
               <div className={`bottomLine`}>
                 <img
                   src={require(`@/assets/img/menu_item${activeTab === 2 ? '_ac.png' : '.png'}`)}

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

@@ -9,6 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
   :global {
     .modalTxtContainner {
       width: 450px;
@@ -22,22 +23,28 @@
         height: 70px;
         display: flex;
         align-items: center;
-
+        justify-content: space-around;
+        padding-right: 80px;
+        position: relative;
         gap: 10px;
         margin-top: 10px;
+
         .beie {
           width: 100px;
           height: 50px;
           font-size: 10px;
           line-height: 50px;
           color: #fff;
-          position: relative;
+          position: absolute;
           align-self: flex-start;
-          transform: translate(-109px, 35px);
-          & > img {
+          top: 35px;
+          left: -109px;
+
+          &>img {
             width: 100px;
             object-fit: contain;
           }
+
           .txt {
             width: 70px;
             text-align: center;
@@ -48,6 +55,7 @@
             cursor: pointer;
           }
         }
+
         .tab {
           width: fit-content;
           min-width: 70px;
@@ -57,10 +65,12 @@
           flex-direction: column;
           cursor: pointer;
           position: relative;
-          & > img {
+
+          &>img {
             height: 45px;
             object-fit: contain;
           }
+
           .tabNub {
             font-size: 10px;
             line-height: 45px;
@@ -70,17 +80,21 @@
             transform: translate(-50%, -53%);
             color: rgba(94, 52, 34, 1);
           }
+
           .tabNubAc {
             color: rgba(255, 233, 182, 1);
           }
+
           .txt {
             font-size: 10px;
             line-height: 15px;
             text-align: center;
             font-weight: lighter;
             color: rgba(255, 255, 255, 1);
+            width: 200%;
           }
         }
+
         .tab:nth-child(3) {
           width: 100px;
         }
@@ -94,6 +108,9 @@
         line-height: 15px;
         font-weight: lighter;
         color: rgba(255, 255, 255, 1);
+        text-align: justify;
+        overflow-y: auto;
+        color: #777463;
       }
 
       .detailTxt {
@@ -103,6 +120,7 @@
         height: 62%;
         display: flex;
         justify-content: space-between;
+
         .left,
         .right {
           width: 49%;
@@ -111,38 +129,48 @@
           flex-direction: column;
           gap: 10px;
           padding: 20px;
+
           .title {
             font-size: 13px;
             line-height: 20px;
             font-weight: bold;
             color: rgba(94, 52, 34, 1);
           }
+
           .txt {
+            text-align: justify;
             font-size: 9px;
             line-height: 17px;
             font-weight: 500;
             color: rgba(94, 52, 34, 1); // 原始颜色
             overflow: auto;
             padding-bottom: 10px;
+
             &::-webkit-scrollbar {
               width: 2px;
             }
+
             &::-webkit-scrollbar-track {
               background-color: transparent;
             }
+
             &::-webkit-scrollbar-thumb {
               background-color: rgba(94, 52, 34, 0.226);
               border-radius: 4px;
             }
+
             &:has(> a:hover) {
               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;
+
               &::after {
                 content: '';
                 position: absolute;
@@ -157,10 +185,12 @@
             }
           }
         }
+
         .left {
           background: url(../../../../assets/img/detailTxt_l.png) no-repeat center center;
           background-size: 100% 100%;
         }
+
         .right {
           background: url(../../../../assets/img/detailTxt_r.png) no-repeat center center;
           background-size: 100% 100%;
@@ -174,20 +204,101 @@
         flex-direction: column;
         gap: 10px;
         color: rgba(94, 52, 34, 1);
+
         .title {
           font-size: 13px;
           line-height: 20px;
           font-weight: bold;
         }
+
         .text {
           width: 300px;
           line-height: 15px;
           font-size: 9px;
-          & > p {
-            text-indent: 2em;
+          text-align: justify;
+          letter-spacing: 2px;
+          color: #504e40;
+
+
+          &>p {
+            
           }
         }
       }
     }
   }
 }
+
+// -----------移动端
+.modalTxtMo {
+  :global {
+    .modalTxtContainner {
+      .topBar {
+        .beie {
+          height: 60px;
+          width: 120px;
+
+          &>img {
+            width: 100%;
+          }
+
+          .txt {
+            margin-left: 6px;
+            font-size: 18px;
+          }
+        }
+
+        .tab {
+          height: 60px;
+
+          img {
+            height: 50px;
+          }
+
+          .txt {
+            font-size: 16px;
+          }
+        }
+
+
+
+      }
+
+      .content {
+        .title {
+          font-size: 20px;
+        }
+
+        .text {
+          line-height: 18px;
+          font-size: 18px;
+        }
+      }
+
+
+      .intro{
+        font-size: 16px;
+        line-height: 18px;
+      
+      }
+
+
+
+      .detailTxt{
+        .title{
+          font-size: 20px !important;
+        }
+        .txt{
+          font-size: 18px !important;
+          line-height: 24px !important;
+          letter-spacing: 2px;
+          a::after {
+            bottom:-2px !important;
+            height: 2px !important;
+          }
+        }
+      }
+    }
+
+  }
+}

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

@@ -270,7 +270,7 @@ function ModalTxt({
 
         {selectedTab === 0 && (
           <div className='content'>
-            <div className='title'>碑文概述</div>
+            <div className='title myFont'>碑文概述</div>
             <div className='text'>
               <p>
                 碑额留出高约15厘米的空白范围，仅在碑额左侧题写造碑日期。《山

src/pages/A2yblm/index.module.scss

@@ -261,16 +261,16 @@
         width: 60%;
         height: 110px;
         padding-right: 6px;
-          overflow-y: auto;
-
+        overflow-y: auto;
+        
         &>div {
+          color:#595547;
           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;
         }
@@ -293,20 +293,20 @@
     }
 
     .A2_tabBar {
-      top: 46%;
+      top: 51%;
 
       .tab {
-        width: 80px;
-        height: 80px;
-        font-size: 16px;
+        width: 60px;
+        height: 60px;
+        font-size: 14px;
       }
     }
 
     .wenwu {
       bottom: 2%;
       left: 3.5%;
-      width: 80px;
-      height: 80px;
+      width: 70px;
+      height: 70px;
     }
 
     .tagInfo {
@@ -335,5 +335,17 @@
 
       }
     }
+
+
+    .extra{
+      width: 180px;
+      height: 40px;
+      .icon{
+        width: 30px;
+      }
+      .txt{
+        font-size: 16px;
+      }
+    }
   }
 }

src/pages/A3beie/index.module.scss

@@ -2,15 +2,17 @@
   width: 100%;
   height: 100%;
   position: relative;
+
   :global {
     .container {
-      width: 350px;
+      width: 380px;
       height: 100%;
       position: absolute;
       z-index: 1;
       top: 50%;
       left: 50%;
       transform: translate(-5%, -50%);
+
       .content {
         width: 100%;
         height: 100%;
@@ -26,18 +28,21 @@
           line-height: 20px;
           font-weight: 500;
           position: relative;
+
           .butterflyR {
             width: 20px;
             height: 20px;
             position: absolute;
             top: -67%;
             left: 5%;
-            & > img {
+
+            &>img {
               height: 100%;
               object-fit: contain;
             }
           }
         }
+
         .text {
           line-height: 15px;
           font-size: 9px;
@@ -53,11 +58,13 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     // 文物鉴赏
     .wenwu {
       width: 60px;
@@ -67,7 +74,8 @@
       bottom: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -81,10 +89,39 @@
       z-index: 1;
       top: 3%;
       right: 3%;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
   }
 }
+
+
+// ----------------移动端
+.A3beieMo {
+  :global {
+    .container .content {
+      .title {
+        font-size: 24px;
+        letter-spacing: 3px;
+      }
+
+      .text {
+        font-size: 18px;
+        line-height: 22px;
+        letter-spacing: 2px;
+      }
+    }
+
+
+    .wenwu {
+      bottom: 2%;
+      left: 3.5%;
+      width: 70px;
+      height: 70px;
+    }
+
+  }
+}

src/pages/A3beie/index.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import styles from './index.module.scss'
 import { backPageFu, callIframeFu } from '@/utils/history'
+import classNames from 'classnames'
+import { isPc } from '@/utils/http'
+import MenuSider from '@/components/MenuSider'
+
 function A3beie() {
   const handleBack = () => {
     backPageFu('#/yblm')
@@ -13,22 +17,20 @@ function A3beie() {
   }
 
   return (
-    <div className={styles.A3beie}>
+    <div className={classNames(styles.A3beie, isPc ? '' : styles.A3beieMo)}>
       <div className='back' onClick={() => handleBack()}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
       <div className='wenwu' onClick={() => gotoQuanwen()}>
         <img src={require('@/assets/img/A2_quanwen.png')} alt='' />
       </div>
-      <div className='menu'>
-        <img src={require('@/assets/img/btn_menu.png')} alt='' />
-      </div>
+      <MenuSider activeTab={0} />
       <div className='container'>
         <div className='content'>
           <div className='title'>
-            <div className='butterflyR'>
+            {/* <div className='butterflyR'>
               <img src={require('@/assets/img/butterflyR.png')} alt='' />
-            </div>
+            </div> */}
             碑额
           </div>
           <div className='text'>

src/pages/A4quanwen/index.module.scss

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+
   :global {
     .back {
       width: 60px;
@@ -14,11 +15,13 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .highlight {
       width: 25px;
       height: 25px;
@@ -27,7 +30,8 @@
       bottom: 3%;
       left: 2%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -44,42 +48,51 @@
       flex-direction: column;
       color: rgba(69, 68, 55, 1);
       overflow: auto;
+
       &::-webkit-scrollbar {
         width: 2px;
         height: 0;
       }
+
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
+
       &::-webkit-scrollbar-thumb {
         background-color: rgba(69, 68, 55, 1);
       }
+
       .item {
         width: 100%;
         height: fit-content;
 
         display: flex;
         align-items: center;
+
         .left {
           width: 30px;
           height: 100%;
           display: flex;
           align-items: center;
           flex-direction: column;
+
           .icon {
             width: 100%;
             height: 15px;
-            & > img {
+
+            &>img {
               width: 100%;
               object-fit: contain;
             }
           }
+
           .line {
             width: 1px;
             height: 100%;
             background-color: rgba(69, 68, 55, 1);
           }
         }
+
         .right {
           width: calc(100% - 30px);
           height: fit-content;
@@ -87,8 +100,41 @@
           font-size: 10px;
           line-height: 20px;
           padding-bottom: 10px;
+          text-align: justify;
+          letter-spacing: 2px;
         }
       }
     }
   }
 }
+
+// -------------移动端
+.A4quanwenMo {
+  :global {
+    .back {
+      width: 80px;
+      height: 40px;
+
+      img {
+        object-fit: fill !important;
+      }
+    }
+    .highlight{
+      width: 40px;
+      height: 40px;
+    }
+
+
+    .txtContent .item {
+      .left{
+        .icon{
+          height: 24px;
+        }
+      }
+      .right{
+        font-size: 18px;
+        line-height: 22px;
+      }
+    }
+  }
+}

src/pages/A4quanwen/index.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useEffect, useCallback } from "react";
 import styles from "./index.module.scss";
 import { backPageFu, callIframeFu } from "@/utils/history";
-import { myData } from "@/utils/http";
+import { isPc, myData } from "@/utils/http";
+import classNames from 'classnames'
+
+
 function A4quanwen() {
   const [isHighlight, setIsHighlight] = useState(true);
   useEffect(() => {
@@ -22,7 +25,7 @@ function A4quanwen() {
 
 
   return (
-    <div className={styles.A4quanwen}>
+    <div className={classNames(styles.A4quanwen,isPc?'':styles.A4quanwenMo)}>
       <div className='back' onClick={() => gotoBack()}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>

src/pages/A7wjwj/conponents/Shuxing/index.module.scss

@@ -17,7 +17,7 @@
         font-size: 12px;
         font-weight: 500;
         color: rgba(93, 96, 96, 1);
-        text-indent: 2em;
+        
       }
       .imgBox {
         width: 100%;

src/pages/A7wjwj/index.module.scss

@@ -63,7 +63,7 @@
       width: 100%;
       height: 100%;
       position: relative;
-      text-indent: 2em;
+      
       padding: 100px 50px 0 50px;
       color: rgba(93, 96, 96, 1);
       font-size: 13px;