数据更新

public/Chenzhebei-ShanxiMuseum/index.html

@@ -20,6 +20,9 @@
     </div>
   </body>
   <script>
+    window.centerCameraViewportX = 0.55
+    window.centerCameraOffsetX = 0
+
     window.leftCameraViewportX = 0.268
     window.leftCameraOffsetX = 0
 

public/myData/myData.js

@@ -2,7 +2,6 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
-
 // 本地开发静态资源目录
 const baseUrlLoc = 'http://192.168.0.68:8080/staticData/'
 
@@ -695,7 +694,17 @@ const myDataTemp = {
   ],
   // 发现之谜
   discover: {
-    txt1: '民国七年或八年（1918或1919）：太原傅公祠<br/>1952年：山西古建筑博物馆（纯阳宫碑廊）<br/>2005年：山西博物院《山西博物院藏品概览·石造像卷》',
+    txt1Items: [
+      {
+        title: '民国七年或八年（1918或1919）：太原傅公祠'
+      },
+      {
+        title: '1952年：山西古建筑博物馆'
+      },
+      {
+        title: '2005年：山西博物院'
+      }
+    ],
     search: [
       {
         title: '程哲碑最早著录：',

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

@@ -26,8 +26,6 @@
         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;
         }
@@ -42,12 +40,16 @@
       .record1 {
         width: 200px;
         height: 75px;
-        transform: translate(-90%, -115%);
+        transform: translate(-80%, -121%);
+        background: url('../../../../assets/img/A7_discover_record1.png') no-repeat center center;
+        background-size: 100% 100%;
       }
       .record2 {
         width: 130px;
         height: 60px;
-        transform: translate(5%, 166%);
+        transform: translate(0%, 166%);
+        background: url('../../../../assets/img/A7_discover_record2.png') no-repeat center center;
+        background-size: 100% 100%;
         .btnContainer {
           width: 100%;
           height: 12px;
@@ -65,6 +67,42 @@
           }
         }
       }
+      .record3 {
+        width: 155px;
+        height: 45px;
+        transform: translate(21%, -48%);
+        background: url('../../../../assets/img/A7_discover_record3.png') no-repeat center center;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+      }
+      .record4 {
+        width: 140px;
+        height: 25px;
+        transform: translate(-95%, 270%);
+        background: url('../../../../assets/img/A7_discover_record4.png') no-repeat center center;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        .text {
+          height: 8px;
+        }
+      }
+      .record5 {
+        width: 102px;
+        height: 25px;
+        transform: translate(-139%, -220%);
+        background: url('../../../../assets/img/A7_discover_record5.png') no-repeat center center;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        .text {
+          height: 15px;
+        }
+      }
       .point {
         height: 15px;
         width: 15px;
@@ -78,12 +116,24 @@
         }
       }
       .point1 {
-        transform: translate(-10%, -82%);
+        transform: translate(17%, -82%);
       }
       .point2 {
         transform: translate(69%, 482%);
       }
     }
+    .left {
+      .arrow1 {
+        width: 13px;
+        height: 62px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(53%, 21%);
+        background: url('../../../../assets/img/A7_discover_arrow1.png') no-repeat center center;
+        background-size: 100% 100%;
+      }
+    }
     .left2 {
       background: url('../../../../assets/img/A7_map2.png') no-repeat center bottom;
       background-size: contain;

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
+import { myData } from '@/utils/http'
 function Discover(props: { style?: React.CSSProperties }) {
   // 将隐藏的页面打开，全景图->诗歌->大场景
   const lookScene = () => {
@@ -15,11 +16,14 @@ function Discover(props: { style?: React.CSSProperties }) {
         <div className='left'>
           <div className='record record1'>
             <div className='text'>
-              民国七年或八年（1918或1919）：太原傅公祠
-              <br />
-              1952年：山西古建筑博物馆（纯阳宫碑廊）
-              <br />
-              2005年：山西博物院
+              {
+                myData.discover.txt1Items.map((item, index) => (
+                  <span key={index}>
+                    {item.title}
+                    {index !== myData.discover.txt1Items.length - 1 && <br />}
+                  </span>
+                ))
+              }
             </div>
             <div className='btn' onClick={() => setIsShowRecord(false)}>
               查看流转轨迹
@@ -34,6 +38,7 @@ function Discover(props: { style?: React.CSSProperties }) {
               <div className='btn' onClick={() => lookScene()}>场景漫游</div>
             </div>
           </div>
+          <div className="arrow1"></div>
           <div className='point point1'>
             <img src={require('@/assets/img/A7_point1.png')} alt='' />
           </div>
@@ -41,43 +46,54 @@ function Discover(props: { style?: React.CSSProperties }) {
             <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='' />
+      )
+      }
+      {
+        !isShowRecord && (
+          <div className='left2'>
+            {myData.discover.txt1Items.map((item, index) => (
+              <div className={`record ${'record' + (index + 3)}`} key={index}>
+                <div className='text'>{item.title}</div>
               </div>
-              <div className='txt'>程哲碑最早著录</div>
+            ))}
+            <div className='point point3'>
+              <img src={require('@/assets/img/A7_point2.png')} alt='' />
             </div>
-            <div className='text'>
-              今在长治县袁家漏村，谨案此碑于近年始经人访得摩崖刻，高四尺，许字三十二行（此处《通志》有偏差，实三十一行），行四十五字，楷法劲整，惟结体甚小，摩崖刻艰于运刀，锋芒少锻而完好，仅缺数字，殊可贵也……
+            <div className='point point4'>
+              <img src={require('@/assets/img/A7_point2.png')} alt='' />
+            </div>
+            <div className='point point'>
+              <img src={require('@/assets/img/A7_point2.png')} alt='' />
+            </div>
+            <div className='back' onClick={() => setIsShowRecord(true)}>
+              <img src={require('@/assets/img/btn_back.png')} alt='' />
             </div>
-            <div className='from'>——（清）王轩、杨笃：《山西通志》</div>
           </div>
+        )
+      }
+      <div className='right'>
+        <div className='scroll'>
+          {
+            myData.discover.search.map((item, index) => (
+              <div className='item' key={index}>
+                <div className='title'>
+                  <div className='icon'>
+                    <img src={require('@/assets/img/A7base3_icon.png')} alt='' />
+                  </div>
+                  <div className='txt'>{item.title}</div>
+                </div>
+                <div className='text'>{item.txt}</div>
+                <div className='from'>{item.from}</div>
+              </div>
+            ))
+          }
+
         </div>
       </div>
       <div className='direct'>
         <img src={require('@/assets/img/A7_direct.png')} alt='' draggable={false} />
       </div>
-    </div>
+    </div >
   )
 }
 

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

@@ -17,7 +17,6 @@
         font-size: 12px;
         font-weight: 500;
         color: rgba(93, 96, 96, 1);
-        
       }
       .imgBox {
         width: 100%;
@@ -39,7 +38,8 @@
             width: 100%;
             height: 165px;
             object-fit: contain;
-            background: rgba(177, 150, 123, 1);
+            background: url('../../../../assets/img/A7_shuxing_bg.png') no-repeat center center;
+            background-size: 100% 100%;
             cursor: pointer;
             & > img {
               width: 100%;

src/types/declaration.d.ts

@@ -35,6 +35,11 @@ type MyDataType = {
     origin: string
     translate: string
   }[]
+  // 发现之谜
+  discover: {
+    txt1Items: { title: string }[]
+    search: { title: string; txt: string; from: string }[]
+  }
   // 属性之辩
   shuxing: {
     name: string