第二单元，第三单元基础开发

src/App.tsx

@@ -22,7 +22,8 @@ const A4quanwen = React.lazy(() => import('./pages/A4quanwen'))
 const A5wenwu = React.lazy(() => import('./pages/A5wenwu'))
 const A6ybwx = React.lazy(() => import('./pages/A6ybwx'))
 const A7Wjwj = React.lazy(() => import('./pages/A7wjwj'))
-
+const A6_1_zxys = React.lazy(() => import('./pages/A6ybwx/A6_1_zxys'))
+const A6_2_zxzgh = React.lazy(() => import('./pages/A6ybwx/A6_2_zxzgh'))
 
 
 declare global {
@@ -206,12 +207,14 @@ export default function App() {
             <Route path='/wenwu' component={A5wenwu} exact />
             <Route path='/ybwx' component={A6ybwx} exact />
             <Route path='/wjwj' component={A7Wjwj} exact />
+            <Route path='/zxys' component={A6_1_zxys} exact />
+            <Route path='/sinicize' component={A6_2_zxzgh} exact />
             <Route path='*' component={NotFound} />
           </Switch>
         </React.Suspense>
       </Router>
 
-      <iframe id='modalIframe' title='modal' src='Chenzhebei-ShanxiMuseum/index.html'></iframe>
+      <iframe style={{ display: 'none' }} id='modalIframe' title='modal' src=''></iframe>
 
       {/* 背景音乐 */}
       <audio id='bgMp3' loop style={{ display: 'none' }} src={baseURL + 'home/bg.mp3'}></audio>

src/components/MenuSider/index.module.scss

@@ -26,6 +26,14 @@
   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%;
@@ -34,7 +42,7 @@
       top: 50%;
       right: 0%;
       transition: all 0.3s ease-in-out;
-      transform: translate(100%, -50%);
+      transform: translate(0, -50%);
       background: url(../../assets/img/menuSider.png) no-repeat center center;
       background-size: 100% 100%;
       display: flex;
@@ -82,14 +90,14 @@
               object-fit: contain;
             }
           }
-          .bottomLineAc {
+        }
+        .tabAc {
+          color: #fbebbd;
+          .bottomLine {
             bottom: 20px;
             height: 30px;
           }
         }
-        .tab:nth-child(1) {
-          color: #fbebbd;
-        }
         .icon {
           position: relative;
           top: 60px;

src/components/MenuSider/index.tsx

@@ -19,17 +19,17 @@ function MenuSider({ activeTab }: { activeTab: number }) {
             alt=''
           />
           <div className='siderContent'>
-            <div className='tab' onClick={() => window.location.replace('#/yblm')}>
+            <div className={`tab ${activeTab === 0 ? 'tabAc' : ''}`} onClick={() => window.location.replace('#/yblm')}>
               <div className="txt">一碑两面</div>
-              <div className={`bottomLine ${activeTab === 0 ? 'bottomLineAc' : ''}`}><img src={require('@/assets/img/menu_item_ac.png')} alt="" /></div>
+              <div className={`bottomLine`}><img src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)} alt="" /></div>
             </div>
-            <div className='tab' onClick={() => window.location.replace('#/ybwx')}>
+            <div className={`tab ${activeTab === 1 ? 'tabAc' : ''}`} onClick={() => window.location.replace('#/ybwx')}>
               <div className="txt">一碑万象</div>
-              <div className={`bottomLine ${activeTab === 1 ? 'bottomLineAc' : ''}`}><img src={require('@/assets/img/menu_item.png')} alt="" /></div>
+              <div className={`bottomLine`}><img src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)} alt="" /></div>
             </div>
-            <div className='tab' onClick={() => window.location.replace('#/wjwj')}>
+            <div className={`tab ${activeTab === 2 ? 'tabAc' : ''}`} onClick={() => window.location.replace('#/wjwj')}>
               <div className="txt">无尽未竟</div>
-              <div className={`bottomLine ${activeTab === 2 ? 'bottomLineAc' : ''}`}><img src={require('@/assets/img/menu_item.png')} alt="" /></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'>

src/pages/A0base/index.module.scss

@@ -4,102 +4,71 @@
   background-color: #ccc;
   position: relative;
   :global {
-    .A0Container {
-      width: 50%;
-      height: 50%;
+    .A0baseContainner {
+      width: 58%;
+      height: 60%;
       position: absolute;
       z-index: 1;
       top: 50%;
-      left: 50%;
-      transform: translate(-5%, -65%);
+      right: 0;
+      transform: translateY(-55%);
       display: flex;
+      justify-content: space-between;
       align-items: center;
-      flex-direction: column;
-      gap: 10px;
-      .base {
+      .content {
+        width: 60%;
+        height: 100%;
         display: flex;
-        align-items: center;
         flex-direction: column;
-        width: 370px;
-        transition: all 0.4s ease-in;
-        height: 50px;
-        gap: 0;
-        padding: 14px 25px;
-        background-color: rgba(92, 91, 76, 0.2);
-        .top {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          transition: all 0.2s ease-in 0.1s;
-          height: 50px;
-          color: rgba(92, 91, 76, 1);
-          position: relative;
-          .butterfly {
-            width: 60px;
-            height: 35px;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            transform: translate(-23%, -91%);
-          }
-          .title {
-            font-size: 16px;
-            font-weight: 600;
-            letter-spacing: 1px;
-          }
-          .detail {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            gap: 5px;
-            .icon {
-              width: 20px;
-              height: 20px;
-            }
-            .txt {
-              display: none;
-              width: fit-content;
-              font-size: 13px;
-              font-weight: 500;
-            }
-          }
+        gap: 10px;
+        .title {
+          width: 150px;
+          max-width: 80%;
+          height: 20x;
+          font-size: 21px;
+          color: rgba(124, 75, 54, 1);
+          border-bottom: 1px solid rgba(93, 96, 96, 0.4);
         }
-        .content {
-          width: 100%;
-          color: #fff;
+        .text {
+          width: 90%;
+          height: fit-content;
+          max-height: 200px;
           font-size: 13px;
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          height: 0;
-          opacity: 0;
-          transition: height 0.3s ease-in 0.1s, opacity 0.2s ease-in 0.1s;
+          line-height: 20px;
+          font-weight: lighter;
+          color: rgba(93, 96, 96, 1);
+        }
+        .btn {
+          padding-top: 10px;
+          font-size: 14px;
+          font-weight: 600;
+          color: rgba(93, 96, 96, 1);
+          cursor: pointer;
         }
       }
-      .A1active {
-        height: 130px;
-        background-color: rgba(92, 91, 76, 0.5);
-
-        gap: 10px;
-        transition: all 0.3s ease-in;
-        .top {
-          color: rgb(247, 221, 170);
-          transition: all 0.1s ease-in 0.1s;
-          .detail {
-            .icon {
-              transition: all 0.2s ease-in;
-              transform: rotate(-90deg);
-            }
-            .txt {
-              display: block;
-            }
-          }
+      .baseContent {
+        width: 155px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 20px;
+        .base {
+          width: 165px;
+          height: 60px;
+          background: url('../../assets/img/A0_btn_bg.png') no-repeat center center;
+          background-size: 100% 100%;
+          line-height: 60px;
+          text-align: center;
+          color: rgba(255, 233, 182, 1);
+          cursor: pointer;
         }
-        .content {
-          transition: all 0.2s ease-in 0.1s;
-          height: 80%;
-          opacity: 1;
+        .baseAc {
+          color: rgba(124, 75, 54, 1);
+          background: url('../../assets/img/A0_btn_bg_ac.png') no-repeat center center;
+          background-size: 100% 100%;
+          line-height: 55px;
         }
       }
     }
@@ -182,7 +151,7 @@
       align-items: center;
       justify-content: center;
       flex-direction: column;
-      color: rgba(255, 233, 182, 1);
+      color: rgba(177, 150, 123, 1);
       cursor: pointer;
       & > img {
         height: 30px;

src/pages/A0base/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import { myData } from '@/utils/http'
 
 function A0base() {
-  const [currentBase, setCurrentBase] = useState('base1')
+  const [currentBase, setCurrentBase] = useState(0)
   const [isOpenInteract, setIsOpenInteract] = useState(false)
 
   const goto = (e: React.MouseEvent, path: string) => {
@@ -14,30 +14,23 @@ function A0base() {
 
   return (
     <div className={styles.A0base}>
-      <div className='A0Container'>
-        {myData.baseInfo.map((item, index) => (
-          <div key={index}
-            className={`base ${currentBase === `base${index + 1}` ? 'A1active' : ''}`}
-            onClick={() => setCurrentBase(`base${index + 1}`)}
-          >
-            <div className='top'>
-              <div className='butterfly'>
-                <img src={require('@/assets/img/butterflyL.png')} alt='' />
-              </div>
-              <div className='title'>{item.title}</div>
-              <div className='detail' onClick={e => goto(e, item.path)}>
-                <div className='icon'>
-                  <img src={require('@/assets/img/A0_down.png')} alt='' />
-                </div>
-                <div className='txt'>查看详情</div>
-              </div>
-            </div>
-            <div className={`content`}>
-              {item.text}
-            </div>
+      <div className='A0baseContainner'>
+        <div className='content'>
+          <div className='title'>{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>
+        <div className='baseContent'>
+          <div className={`base ${currentBase === 0 ? 'baseAc' : ''}`} onClick={() => setCurrentBase(0)}>
+            {myData.baseInfo[0].title}
           </div>
-        ))}
-
+          <div className={`base ${currentBase === 1 ? 'baseAc' : ''}`} onClick={() => setCurrentBase(1)}>
+            {myData.baseInfo[1].title}
+          </div>
+          <div className={`base ${currentBase === 2 ? 'baseAc' : ''}`} onClick={() => setCurrentBase(2)}>
+            {myData.baseInfo[2].title}
+          </div>
+        </div>
       </div>
 
       {/* 互动 */}

src/pages/A1home/index.tsx

@@ -6,6 +6,14 @@ function A1home() {
   const [loadOk, setLoadOk] = useState(false)
   const [progress, setProgress] = useState(0)
 
+  useEffect(() => {
+    const modalIframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
+    if (modalIframe) {
+      modalIframe.style.display = 'block'
+      modalIframe.src = 'Chenzhebei-ShanxiMuseum/index.html'
+    }
+  }, [])
+
   const playerRef = useRef<any>(null)
   useEffect(() => {
     const params = {

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

@@ -33,6 +33,7 @@
           color: #fff;
           position: relative;
           align-self: flex-start;
+          transform: translate(-109px, 35px);
           & > img {
             width: 100px;
             object-fit: contain;

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

@@ -181,7 +181,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
               src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 1 ? '_ac' : ''}.png`)}
               alt=''
             />
-            <div className={`tabNub ${selectedTab === 1 ? 'tabNubAc' : ''}`}>壹</div>
+            <div className={`tabNub ${selectedTab === 1 ? 'tabNubAc' : ''}`}></div>
             <div
               className='txt'
               style={{ display: selectedTab === 1 || selectedTab === 0 ? 'block' : 'none' }}
@@ -194,7 +194,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
               src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 2 ? '_ac' : ''}.png`)}
               alt=''
             />
-            <div className={`tabNub ${selectedTab === 2 ? 'tabNubAc' : ''}`}>贰</div>
+            <div className={`tabNub ${selectedTab === 2 ? 'tabNubAc' : ''}`}></div>
             <div
               className='txt'
               style={{ display: selectedTab === 2 || selectedTab === 0 ? 'block' : 'none' }}
@@ -207,7 +207,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle }: { setIsShowTabBar: (is
               src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 3 ? '_ac' : ''}.png`)}
               alt=''
             />
-            <div className={`tabNub ${selectedTab === 3 ? 'tabNubAc' : ''}`}>叁</div>
+            <div className={`tabNub ${selectedTab === 3 ? 'tabNubAc' : ''}`}></div>
             <div
               className='txt'
               style={{ display: selectedTab === 3 || selectedTab === 0 ? 'block' : 'none' }}

src/pages/A6ybwx/A6_1_zxys/index.module.scss

@@ -0,0 +1,252 @@
+.Zaoxiang {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: url('../../../assets/img/A6_zaoxiang_bg.png') no-repeat center center;
+  background-size: 100% 100%;
+  :global {
+    .back {
+      width: 60px;
+      height: 30px;
+      position: absolute;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .title {
+      position: absolute;
+      top: 15%;
+      left: 50%;
+      transform: translateX(-115%);
+      height: 60px;
+      width: 330px;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .zaoxiang_text {
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      transform: translateX(-115%);
+      height: 60px;
+      width: 330px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      color: rgba(255, 233, 182, 1);
+      font-weight: lighter;
+      .t1 {
+        font-size: 16px;
+      }
+      .line1 {
+        width: 100%;
+        height: 25px;
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .t2 {
+        width: 87%;
+        font-size: 13px;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .dot {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      height: 60px;
+      width: 62px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .addtxt {
+        width: 2px;
+        line-height: 9px;
+        font-size: 8px;
+      }
+      & > img {
+        height: 60px;
+        width: 60px;
+        object-fit: contain;
+      }
+    }
+    .ft {
+      transform: translate(-66%, 50%);
+    }
+    .fd {
+      cursor: pointer;
+      transform: translate(189%, 243%);
+    }
+    .yx {
+      cursor: pointer;
+      transform: translate(493%, 90%);
+    }
+    .gy {
+      transform: translate(523%, -139%);
+    }
+  }
+}
+
+.detailPage {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  :global {
+    .detailpageTop {
+      width: 100%;
+      height: 12%;
+    }
+    .detailpageContent {
+      height: 88%;
+      width: 100%;
+      background: url('../../../assets/img/A6_zaoxiang_detail_bg.png') no-repeat center top;
+      background-size: 100% 94%;
+      .back {
+        width: 60px;
+        height: 30px;
+        position: absolute;
+        top: 3%;
+        left: 4%;
+        cursor: pointer;
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .title,
+      .txtcontent,
+      .preview,
+      .foxiang {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+      .detailTitle {
+        transform: translate(86%, -5%);
+        width: 65px;
+        height: 168px;
+        display: flex;
+        justify-content: center;
+        .name {
+          width: 50%;
+          height: 150px;
+          background: url('../../../assets/img/A6_zaoxiang_name_bg.png') no-repeat center center;
+          background-size: 100% 100%;
+          color: rgba(255, 233, 182, 1);
+          font-size: 17px;
+          font-weight: lighter;
+          padding-top: 25px;
+          text-align: center;
+        }
+        .txt {
+          width: 20px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+          align-items: center;
+          font-size: 12px;
+          color: rgba(124, 75, 54, 1);
+          margin-left: 6px;
+          .icon1,
+          .icon2 {
+            width: 20px;
+            height: 20px;
+            & > img {
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+          .text {
+            width: 100%;
+            height: 85px;
+            line-height: 14px;
+            text-align: center;
+          }
+        }
+      }
+      .txtcontent {
+        width: 280px;
+        height: fit-content;
+        max-height: 60px;
+        transform: translate(-98%, -190%);
+        font-size: 13px;
+        color: rgba(93, 96, 96, 1);
+        line-height: 22px;
+      }
+      .preview {
+        transform: translate(-94%, 27%);
+        width: 400px;
+        height: 132px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        .previewItem {
+          width: 180px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          .pic {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            background-color: #ccc;
+            & > img {
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+          .txt {
+            width: 25px;
+            height: 80px;
+            font-size: 10px;
+            line-height: 11px;
+            color: rgba(175, 135, 100, 1);
+            text-align: center;
+            writing-mode: vertical-rl;
+          }
+          .icon3 {
+            width: 30px;
+            height: 30px;
+            background-color: rgba(175, 135, 100, 0.6);
+            border-radius: 50%;
+            position: absolute;
+            bottom: 3%;
+            right: 22%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            & > img {
+              height: 20px;
+              width: 20px;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+      .foxiang {
+        transform: translate(5%, -41%);
+        width: 400px;
+        height: 150%;
+        & > img {
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+}

src/pages/A6ybwx/A6_1_zxys/index.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+
+
+function Zaoxiang() {
+
+  const [isShowDetail, setIsShowDetail] = useState(false)
+  return (
+    <div className={styles.Zaoxiang}>
+      <div className='back' onClick={() => window.location.replace('#/ybwx?tab=1')}>
+        <img src={require('@/assets/img/btn_back.png')} alt='' />
+      </div>
+      <div className='title'>
+        <img src={require('@/assets/img/A6_zaoxiang_title.png')} draggable='false' alt='' />
+      </div>
+      <div className='zaoxiang_text'>
+        <div className='t1'>东西方石刻技艺相融结合的完美范例之一</div>
+        <div className='line1'>
+          <img src={require('@/assets/img/A6_zaoxiang_line1.png')} draggable='false' alt='' />
+        </div>
+        <div className='t2'>
+          程哲碑整体布局主次分明，宗教意涵与艺术表现浑然一体，不仅体现造像者对佛教义理的理解，更彰显出北朝时期多元文化交融下的审美取向与工艺水准。这种以线塑形、以形传神的表现手法，将佛教的庄严与中土的典雅有机统一，体现出北朝工匠卓越的创造力与审美自觉。
+        </div>
+      </div>
+      <div className='dot ft'>
+        <img src={require('@/assets/img/A6_zaoxiang_ft.png')} draggable='false' alt='' />
+        <div className='addtxt'>中西融合</div>
+      </div>
+
+      <div className='dot fd' onClick={() => setIsShowDetail(true)}>
+        <img src={require('@/assets/img/A6_zaoxiang_fd.png')} draggable='false' alt='' />
+        <div className='addtxt'>西域雕塑风格</div>
+      </div>
+      <div className='dot yx' onClick={() => setIsShowDetail(true)}>
+        <img src={require('@/assets/img/A6_zaoxiang_yk.png')} draggable='false' alt='' />
+        <div className='addtxt'>中国传统绘画</div>
+      </div>
+      <div className='dot gy'>
+        <img src={require('@/assets/img/A6_zaoxiang_gy.png')} draggable='false' alt='' />
+        <div className='addtxt'>汉地服饰</div>
+      </div>
+
+      {/* 高浮雕 */}
+      {isShowDetail && (
+        <div className={styles.detailPage}>
+          <div className='detailpageTop'></div>
+          <div className='detailpageContent'>
+            <div className='back' onClick={() => setIsShowDetail(false)}>
+              <img src={require('@/assets/img/btn_back.png')} alt='' />
+            </div>
+            <div className='detailTitle'>
+              <div className='name'>高浮雕</div>
+              <div className='txt'>
+                <div className='icon1'>
+                  <img src={require('@/assets/img/A6_zaoxiang_icon1.png')} draggable='false' alt='' />
+                </div>
+                <div className='text'>中国传统绘画</div>
+                <div className='icon2'>
+                  <img src={require('@/assets/img/A6_zaoxiang_icon2.png')} draggable='false' alt='' />
+                </div>
+              </div>
+            </div>
+            <div className='txtcontent'>
+              其余部分引入中国传统绘画的线条雕刻，反映出浓郁的中国传统文化特色，也是佛教艺术进一步汉化的结果。
+            </div>
+            <div className='preview'>
+              <div className='previewItem'>
+                <div className='pic'></div>
+                <div className='txt'>闵子骞孝行图<br />北魏洛阳石棺</div>
+                <div className='icon3'>
+                  <img
+                    src={require('@/assets/img/A6_zaoxiang_foxiang_zoomIn.png')}
+                    draggable='false'
+                    alt=''
+                  />
+                </div>
+              </div>
+            </div>
+            <div className='foxiang'>
+              <img src={require('@/assets/img/A6_zaoxiang_foxiang.png')} draggable='false' alt='' />
+            </div>
+          </div>
+        </div>)}
+    </div>
+  )
+}
+
+const MemoZaoxiang = React.memo(Zaoxiang)
+
+export default MemoZaoxiang

src/pages/A6ybwx/A6_2_zxzgh/index.module.scss

@@ -0,0 +1,320 @@
+.Sinicize {
+  width: 100%;
+  overflow-x: auto;
+  transition: all 0.3s ease-in-out;
+  &::-webkit-scrollbar {
+    height: 0;
+  }
+  :global {
+    .SinicizeScroll {
+      width: fit-content;
+      height: 100%;
+
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.Sinicize1 {
+  width: 840px;
+  height: 100%;
+  position: relative;
+  background: url('../../../assets/img/A6_sinicize_bg.png') no-repeat center center;
+  background-size: 100% 100%;
+  :global {
+    .back {
+      width: 60px;
+      height: 30px;
+      position: absolute;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .title {
+      position: absolute;
+      top: 13%;
+      left: 50%;
+      transform: translateX(-140%);
+      height: 100px;
+      width: 275px;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .text {
+      position: absolute;
+      top: 36%;
+      left: 50%;
+      transform: translateX(-133%);
+      height: 60px;
+      width: 287px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      color: rgba(93, 96, 96, 1);
+      font-weight: lighter;
+      .line1 {
+        width: 100%;
+        height: 25px;
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .t2 {
+        width: 87%;
+        font-size: 13px;
+        letter-spacing: 0.5px;
+      }
+    }
+    .zhufo,
+    .pusha {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      opacity: 0.6;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+      &.active {
+        opacity: 1;
+      }
+    }
+    .zhufo {
+      height: 335px;
+      width: 280px;
+      transform: translate(-31%, -50%);
+      .name {
+        font-size: 10px;
+        font-weight: 500;
+        color: rgba(170, 105, 77, 1);
+        text-align: center;
+      }
+    }
+    .pusha {
+      height: 305px;
+      width: 100px;
+      transform: translate(195%, -50%);
+    }
+
+    .sinicizeBtn1,
+    .sinicizeBtn2 {
+      position: absolute;
+      right: 4%;
+      bottom: 15%;
+      height: 60px;
+      width: 60px;
+      background: url('../../../assets/img/btn_tab.png') no-repeat center center;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 500;
+      color: rgba(255, 233, 182, 1);
+
+      &.active {
+        color: rgba(93, 30, 32, 1);
+        background: url('../../../assets/img/btn_tabAc.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+    }
+    .sinicizeBtn1 {
+      bottom: 35%;
+    }
+  }
+}
+
+.label {
+  position: absolute;
+  height: 30px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  color: rgba(124, 75, 54, 1);
+  font-weight: 500;
+  font-size: 9px;
+  :global {
+    .btn {
+      width: 40px;
+      height: 15px;
+      background: url('../../../assets/img/A6_sinicize_btn1.png') no-repeat center center;
+      background-size: 100% 100%;
+      text-align: center;
+      line-height: 17px;
+    }
+    .arrowL,
+    .arrowR {
+      width: 10px;
+      position: relative;
+      height: 0;
+      border-bottom: 1px dashed rgba(124, 75, 54, 1);
+    }
+
+    .arrowL {
+      &::after {
+        content: '';
+        position: absolute;
+        left: -6px;
+        top: 50%;
+        transform: translateY(-1px);
+        // 箭头三角形（向左）
+        border-right: 4px solid rgb(124, 75, 54);
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+      }
+    }
+
+    .arrowR {
+      &::after {
+        content: '';
+        position: absolute;
+        right: -5px;
+        top: 50%;
+        transform: translateY(-1px);
+        border-left: 4px solid rgb(124, 75, 54);
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+      }
+    }
+  }
+}
+
+.Sinicize2 {
+  width: fit-content;
+  height: 100%;
+  position: relative;
+
+  :global {
+    .scroll {
+      width: fit-content;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .yearItem {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .year {
+          width: 100px;
+          height: 100%;
+          font-size: 20px;
+          font-weight: 500;
+          color: rgba(255, 233, 182, 1);
+          text-align: center;
+          background-size: 100% 100%;
+
+          .txt {
+            width: 100%;
+            padding: 50px 40%;
+            height: 100%;
+            background-image: linear-gradient(
+              to bottom,
+              rgba(122, 63, 11, 1) 0%,
+              rgba(182, 143, 86, 0) 100%
+            );
+          }
+        }
+        .detailShow,
+        .detailHide {
+          height: 100%;
+          background: url('../../../assets/img/A6_sinicize_bg2.png') no-repeat center center;
+          background-size: 100% 100%;
+          overflow: hidden;
+          transition: all 0.7s ease-in-out;
+          display: flex;
+          align-items: center;
+          .left {
+            width: 38%;
+            height: 100%;
+            padding: 44px 22px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            .desc {
+              color: rgba(93, 96, 96, 1);
+              font-size: 12px;
+              width: 100%;
+              max-height: 60%;
+              height: fit-content;
+            }
+            .txtItem {
+              width: 100%;
+              height: fit-content;
+              max-height: 60%;
+              display: flex;
+              flex-direction: column;
+              gap: 5px;
+              .title {
+                font-size: 12px;
+                font-weight: 500;
+                color: rgba(124, 75, 54, 1);
+              }
+              .txt {
+                color: rgba(93, 96, 96, 1);
+                font-size: 12px;
+              }
+            }
+          }
+          .right {
+            width: 60%;
+            height: 100%;
+            padding: 30px 25px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            .title {
+              width: 100%;
+              height: 20px;
+              font-size: 12px;
+              font-weight: 500;
+              color: rgba(124, 75, 54, 1);
+              text-align: center;
+            }
+            .pic {
+              width: 100%;
+              height: 70%;
+              & > img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+              }
+            }
+            .icon {
+              width: 100%;
+              height: 30px;
+            }
+          }
+        }
+        .detailShow {
+          width: 700px;
+          .left,
+          .right {
+            transition: all 0.3s ease-in-out 0.5s;
+            opacity: 1;
+          }
+        }
+        .detailHide {
+          width: 0;
+          .left,
+          .right {
+            transition: all 0.3s ease-in-out;
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A6ybwx/Genealogy/index.module.scss

@@ -0,0 +1,91 @@
+.Genealogy {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url('../../../assets/img/A6_gen_bg.png') no-repeat center center;
+  background-size: 100% 100%;
+  :global {
+    .back {
+      width: 60px;
+      height: 30px;
+      position: absolute;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+}
+
+.intro {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('../../../assets/img/A6_gen_introBg.png') no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  :global {
+    .title {
+      width: 60%;
+      height: 50px;
+      text-align: center;
+      position: relative;
+      .big {
+        width: 100%;
+        height: 25px;
+        font-size: 22px;
+        color: rgba(255, 233, 182, 1);
+      }
+      .small {
+        width: 100%;
+        height: 25px;
+        font-size: 15px;
+        color: rgba(255, 255, 255, 1);
+      }
+      .sun {
+        position: absolute;
+        top: -3%;
+        right: 57%;
+        width: 15px;
+        height: 15px;
+        border-radius: 50%;
+        box-shadow: 0 0 10px rgba(255, 233, 182, 1);
+        background-color: rgba(255, 233, 182, 0.6);
+        filter: blur(3px);
+      }
+    }
+    .line {
+      width: 38%;
+      height: 20px;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .content {
+      width: 70%;
+      height: 45%;
+      font-size: 15px;
+      color: rgba(209, 201, 178, 1);
+      text-align: center;
+    }
+    .close {
+      cursor: pointer;
+      width: 55px;
+      height: 55px;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+}

src/pages/A6ybwx/StatueArt/index.module.scss

@@ -1,4 +1,50 @@
 .StatueArt {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url('../../../assets/img/A6_ffhy_bg.png') no-repeat center center;
+  background-size: 100% 100%;
   :global {
+    .back {
+      width: 60px;
+      height: 30px;
+      position: absolute;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .ffhyTitle,
+    .ffhybtn1,
+    .ffhybtn2 {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    .ffhyTitle {
+      height: 80%;
+      width: 100px;
+      transform: translate(-255%, -47%);
+    }
+    .ffhybtn1 {
+      cursor: pointer;
+      height: 40px;
+      width: 265px;
+      transform: translate(29%, -167%);
+    }
+    .ffhybtn2 {
+      cursor: pointer;
+      height: 40px;
+      width: 265px;
+      transform: translate(29%, -6%);
+    }
   }
 }

src/pages/A6ybwx/StatueArt/index.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import styles from "./index.module.scss";
-function StatueArt() {
-
+function StatueArt({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   return (
     <div className={styles.StatueArt}>
-      <h1> StatueArt</h1>
+      <div className='back' onClick={() => setGotoTab(0)}>
+        <img src={require('@/assets/img/btn_back.png')} alt='' />
+      </div>
+      <div className="ffhyTitle"><img src={require('@/assets/img/A6_ffhy_title.png')} draggable={false} alt="" /></div>
+      <div className="ffhybtn1" onClick={() => window.location.replace('#/zxys')}><img src={require('@/assets/img/A6_ffhy_btn1.png')} draggable={false} alt="" /></div>
+      <div className="ffhybtn2" onClick={() => window.location.replace('#/sinicize')}><img src={require('@/assets/img/A6_ffhy_btn2.png')} draggable={false} alt="" /></div>
     </div>
   )
 }

src/pages/A6ybwx/index.module.scss

@@ -43,6 +43,32 @@
         height: 100%;
         border: none;
       }
+
+      .tabBar {
+        position: absolute;
+        z-index: 3;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 280px;
+        height: 35px;
+        cursor: pointer;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .tab {
+          width: 48%;
+          height: 100%;
+          line-height: 35px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: rgba(91, 71, 46, 1);
+          font-size: 12px;
+          background: url('../../assets/img/A6_base2_btn_bg.png') no-repeat center center;
+          background-size: 100% 100%;
+        }
+      }
     }
   }
 }

src/pages/A6ybwx/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import styles from "./index.module.scss";
 import StatueArt from "./StatueArt";
+import Genealogy from "./Genealogy";
 
 function A6ybwx() {
   const [isShowBtn, setIsShowBtn] = useState(false);
@@ -8,6 +9,16 @@ function A6ybwx() {
   const [videoOk, setVideoOk] = useState(false)
   const [gotoTab, setGotoTab] = useState(0)
 
+  useEffect(() => {
+    const search = new URLSearchParams(window.location.hash.split('?')[1] || '')
+    console.log(search.get('tab'), '===================================')
+    const tab = search.get('tab')
+    if (tab) {
+      setIsEnter(true)
+      setGotoTab(Number(tab))
+    }
+  }, [])
+
   const playerRef = useRef<any>(null)
   useEffect(() => {
     const params = {
@@ -43,20 +54,30 @@ function A6ybwx() {
 
   return (
     <div className={styles.A6ybwx}>
-      <div className="videoBox">
+      {gotoTab === 0 && <div className="videoBox">
         <div className='back' onClick={() => window.location.replace('#/base')}>
           <img src={require('@/assets/img/btn_back.png')} alt='' />
         </div>
-        <div className='back' style={{ left: '50%' }} onClick={() => setGotoTab(1)}>
-          <img src={require('@/assets/img/btn_back.png')} alt='' />
-        </div>
+
         {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
         <div className='A6video' style={{ opacity: 1 }}></div>
         {isShowBtn && <div className="enterBtn" onClick={() => { setIsEnter(true); setIsShowBtn(false) }}></div>}
         <iframe style={{ zIndex: isEnter ? 2 : -1 }} title="A6ybwx" src="https://app.4dage.com/projects/Chenzhebei-ShanxiMuseum/RoomScene/index.html" />
 
-        {gotoTab === 0 && <StatueArt />}
-      </div>
+        <div className="tabBar" style={{ display: isEnter ? 'flex' : 'none' }}>
+          <div className='tab' onClick={() => setGotoTab(1)}>
+            造像艺术
+          </div>
+          <div className='tab' style={{ left: '50%' }} onClick={() => setGotoTab(2)}>
+            程氏谱系
+          </div>
+        </div>
+      </div>}
+      {/* 造像艺术 */}
+      {gotoTab === 1 && <StatueArt setGotoTab={setGotoTab} />}
+
+      {/* 程氏谱系 */}
+      {gotoTab === 2 && <Genealogy setGotoTab={setGotoTab} />}
     </div>
   )
 }

src/pages/A7wjwj/conponents/Content/index.tsx

@@ -28,7 +28,7 @@ function Content() {
       setIsShowScene(false)
       setIsShowPano(false)
       panoramicRoot.style.display = 'none'
-      window.location.replace('#/base')
+      window.location.replace('#/wjwj')
     }
   }
   const onClickSkip = () => {

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

@@ -0,0 +1,186 @@
+.Discover {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  :global {
+    .left,
+    .left2 {
+      width: 45%;
+      height: 100%;
+      position: relative;
+      background: url('../../../../assets/img/A7_map1.png') no-repeat center bottom;
+      background-size: contain;
+      .record {
+        width: fit-content;
+        height: fit-content;
+        max-width: 250px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        padding: 10px;
+        color: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(255, 233, 182, 1);
+        background-color: rgba(33, 30, 26, 0.5);
+        .text {
+          font-size: 9px;
+        }
+        .btn {
+          text-align: right;
+          font-size: 9px;
+          line-height: 9px;
+          color: rgba(255, 223, 174, 1);
+          cursor: pointer;
+        }
+      }
+      .record1 {
+        width: 200px;
+        height: 75px;
+        transform: translate(-90%, -115%);
+      }
+      .record2 {
+        width: 130px;
+        height: 60px;
+        transform: translate(5%, 166%);
+        .btnContainer {
+          width: 100%;
+          height: 12px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .icon {
+            width: 15px;
+            height: 12px;
+            line-height: 10px;
+            & > img {
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+      .point {
+        height: 15px;
+        width: 15px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .point1 {
+        transform: translate(-10%, -82%);
+      }
+      .point2 {
+        transform: translate(69%, 482%);
+      }
+    }
+    .left2 {
+      background: url('../../../../assets/img/A7_map2.png') no-repeat center bottom;
+      background-size: contain;
+      position: relative;
+      .back {
+        width: 60px;
+        height: 30px;
+        position: absolute;
+        z-index: 1;
+        top: auto;
+        bottom: 5%;
+        left: 50%;
+        transform: translate(-50%, 10%);
+        cursor: pointer;
+        & > img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+    .right {
+      margin-top: 200px;
+      padding-bottom: 10px;
+      width: 55%;
+      height: 100%;
+      .scroll {
+        width: 100%;
+        height: 78%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0;
+        }
+      }
+      .item {
+        width: 90%;
+        height: fit-content;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+
+        .title {
+          width: 100%;
+          height: 15px;
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          .icon {
+            width: 15px;
+            height: 15px;
+            object-fit: contain;
+            line-height: 14px;
+            & > img {
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+          .txt {
+            height: 15px;
+            line-height: 15px;
+            font-weight: bold;
+            color: rgba(124, 75, 54, 1);
+            font-size: 12px;
+          }
+        }
+        .text {
+          width: 95%;
+          height: fit-content;
+          align-self: flex-end;
+          color: rgba(93, 96, 96, 1);
+          font-size: 11px;
+          line-height: 18px;
+        }
+        .from {
+          width: 95%;
+          height: fit-content;
+          align-self: flex-end;
+          text-align: right;
+          color: rgba(93, 96, 96, 1);
+          font-size: 11px;
+        }
+      }
+    }
+    .direct {
+      width: 70px;
+      height: 70px;
+      position: absolute;
+      left: 2%;
+      bottom: 2%;
+      cursor: pointer;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+}

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+function Discover(props: { style?: React.CSSProperties }) {
+  // 将隐藏的页面打开，全景图->诗歌->大场景
+  const lookScene = () => {
+    const panoramicRoot = document.getElementById('panoramic-root') as HTMLElement
+    panoramicRoot.style.display = 'block'
+    // 打开全景图
+    window.setIsShowPano(true)
+  }
+  const [isShowRecord, setIsShowRecord] = useState(true)
+  return (
+    <div className={styles.Discover} style={props.style}>
+      {isShowRecord && (
+        <div className='left'>
+          <div className='record record1'>
+            <div className='text'>
+              民国七年或八年（1918或1919）：太原傅公祠
+              <br />
+              1952年：山西古建筑博物馆（纯阳宫碑廊）
+              <br />
+              2005年：山西博物院
+            </div>
+            <div className='btn' onClick={() => setIsShowRecord(false)}>
+              查看流转轨迹
+            </div>
+          </div>
+          <div className='record record2'>
+            <div className='text'>清光绪年间（1879-1892） 长治市上党区东呈村</div>
+            <div className='btnContainer'>
+              <div className='icon'>
+                <img src={require('@/assets/img/A7_rotate.png')} alt='' />
+              </div>
+              <div className='btn' onClick={() => lookScene()}>场景漫游</div>
+            </div>
+          </div>
+          <div className='point point1'>
+            <img src={require('@/assets/img/A7_point1.png')} alt='' />
+          </div>
+          <div className='point point2'>
+            <img src={require('@/assets/img/A7_point1.png')} alt='' />
+          </div>
+        </div>
+      )}
+      {!isShowRecord && (
+        <div className='left2'>
+          <div className='record record3'>
+            <div className='text'>2005年：山西博物院</div>
+          </div>
+          <div className='record record4'>
+            <div className='text'>民国七年或八年（1918或1919）：太原傅公祠</div>
+          </div>
+          <div className='record record5'>
+            <div className='text'>1952年：山西古建筑博物馆</div>
+          </div>
+          <div className='back' onClick={() => setIsShowRecord(true)}>
+            <img src={require('@/assets/img/btn_back.png')} alt='' />
+          </div>
+        </div>
+      )}
+      <div className='right'>
+        <div className='scroll'>
+          <div className='item'>
+            <div className='title'>
+              <div className='icon'>
+                <img src={require('@/assets/img/A7base3_icon.png')} alt='' />
+              </div>
+              <div className='txt'>程哲碑最早著录</div>
+            </div>
+            <div className='text'>
+              今在长治县袁家漏村，谨案此碑于近年始经人访得摩崖刻，高四尺，许字三十二行（此处《通志》有偏差，实三十一行），行四十五字，楷法劲整，惟结体甚小，摩崖刻艰于运刀，锋芒少锻而完好，仅缺数字，殊可贵也……
+            </div>
+            <div className='from'>——（清）王轩、杨笃：《山西通志》</div>
+          </div>
+        </div>
+      </div>
+      <div className='direct'>
+        <img src={require('@/assets/img/A7_direct.png')} alt='' draggable={false} />
+      </div>
+    </div>
+  )
+}
+
+const MemoDiscover = React.memo(Discover)
+
+export default MemoDiscover

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

@@ -0,0 +1,169 @@
+.Shuxing {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  :global {
+    .mainContent {
+      width: 100%;
+      height: 100%;
+      padding: 100px 30px 0 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      .mainTitle {
+        width: 100%;
+        height: fit-content;
+        font-size: 12px;
+        font-weight: 500;
+        color: rgba(93, 96, 96, 1);
+        text-indent: 2em;
+      }
+      .imgBox {
+        width: 100%;
+        height: fit-content;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10px;
+        .item {
+          width: 24%;
+          height: 220px;
+          background-size: contain;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          font-size: 12px;
+          gap: 6px;
+          .pic {
+            width: 100%;
+            height: 165px;
+            object-fit: contain;
+            background: rgba(177, 150, 123, 1);
+            cursor: pointer;
+            & > img {
+              width: 100%;
+              height: 95%;
+              object-fit: contain;
+            }
+          }
+          .name {
+            font-size: 13px;
+            font-weight: 600;
+            color: rgba(91, 71, 46, 1);
+          }
+          .time {
+            font-size: 12px;
+            font-weight: 400;
+            color: rgba(91, 71, 46, 0.8);
+          }
+        }
+      }
+    }
+
+    .detailContent {
+      width: 100%;
+      height: 100%;
+      padding-top: 100px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      gap: 30px;
+      .detailContainner {
+        width: 70%;
+        height: 60%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        .left {
+          width: 50%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          color: rgba(93, 96, 96, 1);
+          font-size: 10px;
+          & > div {
+            display: flex;
+            align-items: center;
+            gap: 3px;
+            position: relative;
+            &::after {
+              content: '';
+              position: absolute;
+              top: 10px;
+              left: 3px;
+              width: 13px;
+              height: 2px;
+              background: rgba(175, 135, 100, 1);
+            }
+          }
+          .detailTitle {
+            width: fit-content;
+            height: 20px;
+            font-size: 18px;
+            color: rgba(175, 135, 100, 1);
+            &::after {
+              background: none;
+            }
+          }
+          .label {
+            align-self: flex-start;
+            width: fit-content;
+            min-width: 30px;
+            height: fit-content;
+            white-space: nowrap;
+          }
+        }
+        .right {
+          width: 50%;
+          height: 100%;
+          max-height: 180px;
+          align-self: flex-start;
+          position: relative;
+          & > img {
+            width: 80%;
+            height: 100%;
+            object-fit: contain;
+          }
+          .diwen {
+            position: absolute;
+            left: 50px;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            opacity: 0.7;
+          }
+        }
+      }
+      .bottom {
+        width: 100%;
+        height: 90px;
+        background-color: rgba(177, 150, 123, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 30px;
+        .item {
+          width: 80px;
+          height: 80px;
+          background-color: rgba(177, 150, 123, 1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          &.itemAc {
+            background-color: rgba(255, 212, 112, 0.7);
+          }
+          & > img {
+            width: 80%;
+            height: 80%;
+            object-fit: contain;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A7wjwj/index.module.scss

@@ -3,6 +3,71 @@
   z-index: 2;
   width: 100%;
   height: 100%;
+  background: url('../../assets/img/A7base3_bg.png') no-repeat center center;
+  background-size: cover;
   :global {
+    .back {
+      width: 60px;
+      height: 30px;
+      position: absolute;
+      z-index: 1;
+      top: 3%;
+      left: 4%;
+      cursor: pointer;
+      & > img {
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .topBar {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      transform: translate(-50%, 100%);
+      width: fit-content;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 55px;
+      font-size: 17px;
+      font-weight: bold;
+      color: rgba(124, 75, 54, 1);
+      .tab {
+        position: relative;
+        width: 70px;
+        height: 40px;
+        line-height: 40px;
+        color: rgba(93, 96, 96, 0.8);
+        cursor: pointer;
+        &.active {
+          color: rgba(124, 75, 54, 1);
+          &::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -56%);
+            width: 120%;
+            height: 100%;
+            background: url('../../assets/img/A7_btn_ac.png') no-repeat center center;
+            background-size: contain;
+          }
+        }
+      }
+    }
+
+    // 未解之思
+    .weijie {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      text-indent: 2em;
+      padding: 100px 50px 0 50px;
+      color: rgba(93, 96, 96, 1);
+      font-size: 13px;
+      line-height: 20px;
+    }
   }
 }

src/pages/A7wjwj/index.tsx

@@ -1,15 +1,42 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
+import MenuSider from "@/components/MenuSider";
+import Discover from "./conponents/Discover";
+import Shuxing from "./conponents/Shuxing";
+import { myData } from "@/utils/http";
+
+
+import { backPageFu } from "@/utils/history";
 function A7Wjwj() {
-  // 进入A7时，将隐藏的页面打开，全景图->诗歌->大场景
-  useEffect(() => {
-    const panoramicRoot = document.getElementById('panoramic-root') as HTMLElement
-    panoramicRoot.style.display = 'block'
-    // 打开全景图
-    window.setIsShowPano(true)
-  })
+  const [currentTab, setCurrentTab] = useState(0)
+
+  const gotoBack = () => {
+    backPageFu('#/base')
+  }
   return (
     <div className={styles.A7Wjwj}>
+      {/* 发现之谜 */}
+      <Discover style={{ display: currentTab === 0 ? 'flex' : 'none' }} />
+      {/* 属性之辩 */}
+      <Shuxing style={{ display: currentTab === 1 ? 'flex' : 'none' }} />
+      {/* 未解之思 */}
+      <div className="weijie" style={{ display: currentTab === 2 ? 'flex' : 'none' }}>
+        {myData.weijie}
+      </div>
+
+
+
+      <div className='back' onClick={() => gotoBack()}>
+        <img src={require('@/assets/img/btn_back.png')} alt='' />
+      </div>
+
+      <div className="topBar">
+        <div className={`tab ${currentTab === 0 ? 'active' : ''}`} onClick={() => setCurrentTab(0)}>发现之谜</div>
+        <div className={`tab ${currentTab === 1 ? 'active' : ''}`} onClick={() => setCurrentTab(1)}>属性之辩</div>
+        <div className={`tab ${currentTab === 2 ? 'active' : ''}`} onClick={() => setCurrentTab(2)}>未解之思</div>
+      </div>
+
+      <MenuSider activeTab={2} />
 
     </div>
   )

src/types/declaration.d.ts

@@ -35,4 +35,16 @@ type MyDataType = {
     origin: string
     translate: string
   }[]
+  // 属性之辩
+  shuxing: {
+    name: string
+    time: string
+    size: string
+    desc: string
+    img: string
+  }[]
+  // 未解之思
+  weijie: string
+  // 造像中国化
+  sinicizeData: { time: string; bgPath: string }[]
 }