shaogen1995 il y a 1 mois
Parent
commit
da916c512d

+ 15 - 4
public/index.html

@@ -12,12 +12,20 @@
     <script src="./myData/jsmpeg.min.js"></script>
     <script src="./myData/f-video.js"></script>
 
-    <!-- <style>
+    <style>
       @font-face {
-        font-family: 'qfk';
-        src: url('./myData/qfk.TTF');
+        font-family: 'song';
+        src: url('./myData/song.TTF');
       }
-    </style> -->
+      .fontLoding{
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        font-family: 'song';
+      }
+    </style>
     <title>程哲碑</title>
   </head>
   <body>
@@ -25,6 +33,9 @@
     <div id="root"></div>
 
     <div id="panoramic-root"></div>
+
+    <!-- 一进页面就加载字体 -->
+     <i class="fontLoding">123</i>
   </body>
 
   <script>

+ 1 - 1
public/myData/myDataEN.js

@@ -659,7 +659,7 @@ const myDataTemp2 = {
       ],
       // 解读
       intro:
-        '三组颂文,赞颂程哲与子程永,程蠡与二子程静光、程次等,程买与子程义,从颂文中可以知其已故后代官职,并最终表明造碑的目的为“托咏名门”。',
+        'The three eulogies praise Cheng Zhe and his son Cheng Yong; Cheng Li and his two sons Cheng Jingguang and Cheng Cideng; as well as Cheng Mai and his son Cheng Yi. From these eulogies, we learn the official titles of the deceased descendants. Ultimately, they clarify the purpose of erecting the stele: to "entrust their legacy to the renowned family."',
       // 碑文体制之变例 (特殊之处)
       mzmtz: {
         title: '一位缺席的碑主',

public/myData/qfk.TTF → public/myData/song.TTF


BIN
src/assets/sgImg/homeBg.jpg


+ 7 - 4
src/assets/styles/base.css

@@ -411,10 +411,6 @@ textarea {
   background-color: transparent;
   /* 确保背景透明 */
 }
-.myFont {
-  font-family: 'SimSun' !important;
-  font-weight: 700;
-}
 @keyframes opacityChange {
   0% {
     opacity: 1;
@@ -451,3 +447,10 @@ textarea {
 #root .moBack img {
   object-fit: fill !important;
 }
+.songFont {
+  font-family: 'song' !important;
+}
+.songFontc {
+  font-family: 'song' !important;
+  font-weight: 700 !important;
+}

+ 11 - 7
src/assets/styles/base.less

@@ -535,12 +535,6 @@ textarea {
   /* 确保背景透明 */
 }
 
-.myFont {
-  font-family: 'SimSun' !important;
-  font-weight: 700;
-}
-
-
 
 @keyframes opacityChange {
   0% {
@@ -603,4 +597,14 @@ textarea {
 //   100% {
 //     opacity: 1;
 //   }
-// }
+// }
+
+// 宋体
+.songFont{
+  font-family: 'song' !important;
+}
+
+.songFontc{
+  font-family: 'song' !important;
+  font-weight: 700 !important;
+}

+ 1 - 1
src/components/MenuSider/index.module.scss

@@ -184,7 +184,7 @@
 
         .knowledge {
           position: relative;
-          top: -22px;
+          top: -12px;
         }
       }
     }

+ 6 - 6
src/components/MenuSider/index.tsx

@@ -48,7 +48,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               className={`tab ${activeTab === 0 ? 'tabAc' : ''}`}
               onClick={() => window.location.replace('#/yblm')}
             >
-              <div className='txt'>{myData.baseInfo[0].title}</div>
+              <div className='txt songFontc'>{myData.baseInfo[0].title}</div>
               <div className={`bottomLine`}>
                 <img
                   src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)}
@@ -60,7 +60,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               className={`tab ${activeTab === 1 ? 'tabAc' : ''}`}
               onClick={() => window.location.replace('#/ybwx')}
             >
-              <div className='txt'>{myData.baseInfo[1].title}</div>
+              <div className='txt songFontc'>{myData.baseInfo[1].title}</div>
               <div className={`bottomLine`}>
                 <img
                   src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)}
@@ -72,7 +72,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
               className={`tab ${activeTab === 2 ? 'tabAc' : ''}`}
               onClick={() => window.location.replace('#/wjwj')}
             >
-              <div className='txt'>{myData.baseInfo[2].title}</div>
+              <div className='txt songFontc'>{myData.baseInfo[2].title}</div>
               <div className={`bottomLine`}>
                 <img
                   src={require(`@/assets/img/menu_item${activeTab === 2 ? '_ac.png' : '.png'}`)}
@@ -83,21 +83,21 @@ function MenuSider({ activeTab }: { activeTab: number }) {
             <div className='icon'>
               <div className='paint' onClick={() => byzhClick(activeTab)}>
                 <img src={require('@/assets/img/icon_paint.png')} alt='' />
-                <div className='txt'>
+                <div className='txt songFontc'>
                   {myLangue === 'EN' ? 'Stele Shadow Intelligence Mapping' : '碑影智绘'}
                 </div>
               </div>
               <div className='knowledge'>
                 <img src={require('@/assets/img/icon_knowledge.png')} alt='' />
                 <div
-                  className='txt'
+                  className='txt songFontc'
                   onClick={() => {
                     Toast.show({
                       content: '正在开发中'
                     })
                   }}
                 >
-                  {myLangue === 'EN' ? 'Exhibition Catalogue' : '展览图谱'}
+                  {myLangue === 'EN' ? 'mapping knowledge domain' : '知识图谱'}
                 </div>
               </div>
               {/* <div className='poster'>

+ 0 - 2
src/components/Message/index.tsx

@@ -9,8 +9,6 @@ function MessageCom() {
     (state: RootState) => state.A0Layout.message
   );
 
-  console.log(messageReducerInfo);
-
   const [messageApi, contextHolder] = message.useMessage();
 
   useEffect(() => {

+ 2 - 2
src/pages/A0base/index.module.scss

@@ -102,7 +102,7 @@
     /* 互动 */
     .interact {
       width: 100px;
-      height: 200px;
+      height: 170px;
       position: absolute;
       z-index: 1;
       bottom: 5%;
@@ -255,7 +255,7 @@
     }
 
     .interact {
-      height: 220px;
+      height: 200px;
 
       .inter_content {
         padding-bottom: 10px;

+ 7 - 7
src/pages/A0base/index.tsx

@@ -30,7 +30,7 @@ function A0base() {
     <div className={classNames(myLangue === 'ZH' ? '' : styles.A0baseEn, styles.A0base)}>
       <div className='A0baseContainner'>
         <div className={`content`}>
-          <div className='title myFont'>{myData.baseInfo[currentBase].title}</div>
+          <div className='title songFontc'>{myData.baseInfo[currentBase].title}</div>
           <div className='text'>{myData.baseInfo[currentBase].text}</div>
           <div className='btn' onClick={e => goto(e, myData.baseInfo[currentBase].path)}>
             {myLangue === 'ZH' ? '查看详情' : 'view details'}
@@ -38,19 +38,19 @@ function A0base() {
         </div>
         <div className='baseContent'>
           <div
-            className={`base ${currentBase === 0 ? 'baseAc' : ''}`}
+            className={`base songFontc ${currentBase === 0 ? 'baseAc' : ''}`}
             onClick={() => setCurrentBase(0)}
           >
             {myData.baseInfo[0].title}
           </div>
           <div
-            className={`base ${currentBase === 1 ? 'baseAc' : ''}`}
+            className={`base songFontc ${currentBase === 1 ? 'baseAc' : ''}`}
             onClick={() => setCurrentBase(1)}
           >
             {myData.baseInfo[1].title}
           </div>
           <div
-            className={`base ${currentBase === 2 ? 'baseAc' : ''}`}
+            className={`base songFontc ${currentBase === 2 ? 'baseAc' : ''}`}
             onClick={() => setCurrentBase(2)}
           >
             {myData.baseInfo[2].title}
@@ -75,9 +75,9 @@ function A0base() {
               })
             }}
           >
-            {myLangue === 'EN' ? 'Exhibition Catalogue' : '展览图谱'}
+            {myLangue === 'EN' ? 'mapping knowledge domain' : '知识图谱'}
           </div>
-          <div
+          {/* <div
             className='inter'
             onClick={() => {
               Toast.show({
@@ -86,7 +86,7 @@ function A0base() {
             }}
           >
             {myLangue === 'EN' ? 'AI Question Answering' : 'AI问答'}
-          </div>
+          </div> */}
         </div>
 
         <div className='icon' onClick={() => setIsOpenInteract(!isOpenInteract)}>

+ 14 - 11
src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -131,13 +131,13 @@
         width: 100%;
         padding-right: 40px;
         height: 15%;
-        font-size: 10px;
-        line-height: 15px;
-        font-weight: lighter;
         color: rgba(255, 255, 255, 1);
         text-align: justify;
         overflow-y: auto;
-        color: black;
+        font-size: 15px;
+        line-height: 21px;
+        font-weight: 400;
+        color: #504e40;
       }
 
       .detailTxt {
@@ -158,16 +158,19 @@
           padding: 20px;
 
           .title {
-            font-size: 13px;
-            line-height: 20px;
+            font-size: 16px;
+            line-height: 0px;
             font-weight: bold;
             color: rgba(94, 52, 34, 1);
           }
 
           .txt {
+
+            font-size: 16px !important;
+            line-height: 22px !important;
+            letter-spacing: 2px;
+
             text-align: justify;
-            font-size: 9px;
-            line-height: 17px;
             font-weight: 500;
             color: rgba(94, 52, 34, 1); // 原始颜色
             overflow: auto;
@@ -216,9 +219,9 @@
                 content: '';
                 position: absolute;
                 left: 0;
-                bottom: -1px;
+                bottom: -2px;
                 width: 100%;
-                height: 1px;
+                height: 2px;
                 background-color: rgba(166, 118, 67, 1);
                 transform: scaleX(0.95);
                 transform-origin: right center;
@@ -269,7 +272,7 @@
   }
 }
 
-// -----------移动端
+// -----------英文版
 .modalTxtEn {
 
   :global {

+ 1 - 1
src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -408,7 +408,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
 
         {selectedTab === 0 && (
           <div className='content'>
-            <div className='title myFont'>{myLangue==='EN'?'Overview of the Inscription':'碑文概述'}</div>
+            <div className='title songFontc'>{myLangue==='EN'?'Overview of the Inscription':'碑文概述'}</div>
             <div className='text'>
              {myLangue==='EN'?'The inscription on the Cheng Zhe Stele consists of 31 lines of regular script,':'程哲碑碑文,'}
             <br />{myLangue==='EN'?'with 45 characters per line at maximum. ':'31行楷书,满行45字,'}

+ 2 - 3
src/pages/A2yblm/index.tsx

@@ -74,8 +74,7 @@ function A2yblm() {
     if (bottomTxt) {
       setBottomTxt('')
       rightTopTabRef.current?.sonSetStaFu()
-    }
-    else window.location.replace('#/base')
+    } else window.location.replace('#/base')
   }, [bottomTxt])
 
   // 右上3个tab状态的时候点击返回按钮反选状态
@@ -210,7 +209,7 @@ function A2yblm() {
       {/* 图像赏析的tag 使用的是索引对应*/}
       <div className='tagInfo' style={{ display: isShowTag ? 'flex' : 'none' }}>
         <div className='top'>
-          <div className='title'>
+          <div className='title songFontc'>
             {currentTagIndex >= myData.detail_modal.top.length
               ? myData.detail_modal.bottom[currentTagIndex - myData.detail_modal.top.length].title
               : myData.detail_modal.top[currentTagIndex].title}

+ 33 - 46
src/pages/A3beie/index.module.scss

@@ -24,10 +24,11 @@
 
         .title {
           color: #fff;
-          font-size: 13px;
           line-height: 20px;
           font-weight: 500;
           position: relative;
+          font-size: 24px;
+          letter-spacing: 3px;
 
           .butterflyR {
             width: 20px;
@@ -44,35 +45,23 @@
         }
 
         .text {
-          line-height: 15px;
-          font-size: 9px;
+          font-size: 18px;
+          line-height: 30px;
+          letter-spacing: 2px;
         }
       }
     }
 
-    .back {
-      width: 60px;
-      height: 30px;
-      position: absolute;
-      z-index: 1;
-      top: 3%;
-      left: 4%;
-      cursor: pointer;
 
-      &>img {
-        height: 100%;
-        object-fit: contain;
-      }
-    }
 
     // 文物鉴赏
     .wenwu {
-      width: 60px;
-      height: 60px;
+      bottom: 2%;
+      left: 3.5%;
+      width: 70px;
+      height: 70px;
       position: absolute;
       z-index: 1;
-      bottom: 3%;
-      left: 4%;
       cursor: pointer;
 
       &>img {
@@ -99,39 +88,37 @@
 }
 
 
-// ----------------移动端
-.A3beieMo {
+// ----------------英文版
+.A3beieEn {
   :global {
-
-    .back {
+    .wenwu {
       width: 80px;
-      height: 40px;
-
-      img {
-        object-fit: fill !important;
-      }
+      height: 80px;
     }
 
-    .container .content {
-      .title {
-        font-size: 24px;
-        letter-spacing: 3px;
-      }
+    .container {
+      width: 360px;
+      padding: 40px 0;
 
-      .text {
-        font-size: 18px;
-        line-height: 30px;
-        letter-spacing: 2px;
-      }
-    }
+      .content {
+        overflow-y: auto;
+        display: block;
 
+        &::-webkit-scrollbar {
+          width: 0;
+        }
 
-    .wenwu {
-      bottom: 2%;
-      left: 3.5%;
-      width: 70px;
-      height: 70px;
-    }
+        .title {
+          margin-bottom: 15px;
+        }
 
+        .text {
+          letter-spacing: 0;
+          text-align: start;
+        }
+
+
+      }
+    }
   }
 }

+ 25 - 12
src/pages/A3beie/index.tsx

@@ -2,10 +2,14 @@ import React from 'react'
 import styles from './index.module.scss'
 import { callIframeFu } from '@/utils/history'
 import classNames from 'classnames'
-import { isPc } from '@/utils/http'
 import MenuSider from '@/components/MenuSider'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import Zback from '@/components/Zback'
 
 function A3beie() {
+  const { myLangue } = useSelector((state: RootState) => state.A0Layout)
+
   const handleBack = () => {
     window.location.replace('#/yblm?m=tab3')
     callIframeFu('showInscription', -1)
@@ -17,28 +21,37 @@ function A3beie() {
   }
 
   return (
-    <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={classNames(styles.A3beie, myLangue === 'ZH' ? '' : styles.A3beieEn)}>
+      <Zback clickFu={() => handleBack()} />
+
       <div className='wenwu' onClick={() => gotoQuanwen()}>
-        <img src={require('@/assets/img/A2_quanwen.png')} alt='' />
+        <img src={require(`@/assets/img/A2_quanwen${myLangue === 'EN' ? 'En' : ''}.png`)} alt='' />
       </div>
       <MenuSider activeTab={0} />
       <div className='container'>
         <div className='content'>
-          <div className='title'>
+          <div className='title songFontc'>
             {/* <div className='butterflyR'>
               <img src={require('@/assets/img/butterflyR.png')} alt='' />
             </div> */}
-            碑额
+            {myLangue === 'EN' ? 'top part of a tablet' : '碑额'}
           </div>
           <div className='text'>
-            碑额留出高约15厘米的空白范围,
-            <br /> 仅在碑额左侧题写造碑日期。
+            {myLangue === 'EN'
+              ? ' A blank space approximately 15 cm high is left at the top of the stele,'
+              : '碑额留出高约15厘米的空白范围,'}
+            <br />{' '}
+            {myLangue === 'EN'
+              ? ' with only the date of the stele’s creation inscribed on the left side.'
+              : '仅在碑额左侧题写造碑日期。'}
+            <br />
+            {myLangue === 'EN'
+              ? 'The Shanxi Tongzhi notes: "The stele’s heading records, ‘Completed on the 3rd day of the 11th month of the jiazi year,'
+              : '《山西通志》指出:其“碑额题‘大魏天平元年岁次甲寅十一月庚辰朔三日壬午造讫’岁月书额,'}
             <br />{' '}
-            《山西通志》指出:其“碑额题‘大魏天平元年岁次甲寅十一月庚辰朔三日壬午造讫’岁月书额,
-            <br /> 唐贞观晋祠铭以前,此为仅见”。
+            {myLangue === 'EN'
+              ? 'the first year of the Tianping era of the Great Wei’—such a practice of inscribing the date on the stele’s heading is rarely seen before the Tang Dynasty’s Jinci Stele Inscription of the Zhenguan era."'
+              : '唐贞观晋祠铭以前,此为仅见”。'}
           </div>
         </div>
       </div>

+ 13 - 51
src/pages/A4quanwen/index.module.scss

@@ -7,31 +7,17 @@
   justify-content: flex-end;
 
   :global {
-    .back {
-      width: 60px;
-      height: 30px;
-      position: absolute;
-      z-index: 1;
-      top: 3%;
-      left: 4%;
-      cursor: pointer;
-
-      & > img {
-        height: 100%;
-        object-fit: contain;
-      }
-    }
 
     .highlight {
-      width: 25px;
-      height: 25px;
+      width: 40px;
+      height: 40px;
       position: absolute;
       z-index: 1;
       bottom: 3%;
       left: 2%;
       cursor: pointer;
 
-      & > img {
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -78,9 +64,9 @@
 
           .icon {
             width: 100%;
-            height: 15px;
+            height: 24px;
 
-            & > img {
+            &>img {
               width: 100%;
               object-fit: contain;
             }
@@ -97,46 +83,22 @@
           width: calc(100% - 30px);
           height: fit-content;
           align-self: flex-start;
-          font-size: 10px;
-          line-height: 20px;
           padding-bottom: 10px;
           text-align: justify;
+          font-size: 16px;
+          line-height: 24px;
           letter-spacing: 2px;
+          font-weight: 400;
+          color: #504e40;
         }
       }
     }
   }
 }
 
-// -------------移动端
-.A4quanwenMo {
+// -------------英文版
+.A4quanwenEn{
   :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: 16px;
-        line-height: 24px;
-        letter-spacing: 2px;
-        font-weight: 400;
-        color: #504e40;
-      }
-    }
+  
   }
-}
+}

+ 4 - 7
src/pages/A4quanwen/index.tsx

@@ -1,14 +1,13 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import styles from './index.module.scss'
 import { callIframeFu } from '@/utils/history'
-import { isPc } from '@/utils/http'
 import classNames from 'classnames'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import Zback from '@/components/Zback'
 
 function A4quanwen() {
-
-   const {myData} = useSelector((state: RootState) => state.A0Layout)
+  const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
   const [isHighlight, setIsHighlight] = useState(true)
   useEffect(() => {
@@ -36,10 +35,8 @@ function A4quanwen() {
   }
 
   return (
-    <div className={classNames(styles.A4quanwen, isPc ? '' : styles.A4quanwenMo)}>
-      <div className='back' onClick={() => gotoBack()}>
-        <img src={require('@/assets/img/btn_back.png')} alt='' />
-      </div>
+    <div className={classNames(styles.A4quanwen, myLangue === 'ZH' ? '' : styles.A4quanwenEn)}>
+      <Zback clickFu={() => gotoBack()} />
 
       <div className={`highlight`} onClick={() => handleHighlight()}>
         <img

+ 1 - 1
src/pages/A6ybwx/Sangzang/index.tsx

@@ -105,7 +105,7 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
         </div>
         <div className='right'>
           <div className={`content`}>
-            <div className='title myFont'>{myData.sangzangStatic.rightInfoName}</div>
+            <div className='title songFontc'>{myData.sangzangStatic.rightInfoName}</div>
             <div className='text' dangerouslySetInnerHTML={{ __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt }} />
           </div>
         </div>