lanxin 1 månad sedan
förälder
incheckning
2e3c0d5458
34 ändrade filer med 422 tillägg och 132 borttagningar
  1. BIN
      public/Chenzhebei-ShanxiMuseum/Build/Build.data.unityweb
  2. BIN
      public/Chenzhebei-ShanxiMuseum/Build/Build.framework.js.unityweb
  3. BIN
      public/Chenzhebei-ShanxiMuseum/Build/Build.wasm.unityweb
  4. 83 82
      public/Chenzhebei-ShanxiMuseum/index.html
  5. BIN
      public/myData/img/gaofudiao.png
  6. BIN
      public/myData/img/gongyangren.png
  7. BIN
      public/myData/img/sin_1.png
  8. BIN
      public/myData/img/sin_10.png
  9. BIN
      public/myData/img/sin_11.png
  10. BIN
      public/myData/img/sin_12.png
  11. BIN
      public/myData/img/sin_13.png
  12. BIN
      public/myData/img/sin_14.png
  13. BIN
      public/myData/img/sin_15.png
  14. BIN
      public/myData/img/sin_2.png
  15. BIN
      public/myData/img/sin_3.png
  16. BIN
      public/myData/img/sin_4.png
  17. BIN
      public/myData/img/sin_5.png
  18. BIN
      public/myData/img/sin_6.png
  19. BIN
      public/myData/img/sin_7.png
  20. BIN
      public/myData/img/sin_8.png
  21. BIN
      public/myData/img/sin_9.png
  22. BIN
      public/myData/img/yinxianke1.png
  23. BIN
      public/myData/img/yinxianke2.png
  24. BIN
      public/myData/img/zhongxironghe.png
  25. 234 7
      public/myData/myData.js
  26. BIN
      src/assets/img/A6_sincize_detailIcon.png
  27. BIN
      src/assets/img/A6_sincize_detailIcon_ac.png
  28. 3 3
      src/components/MenuSider/index.tsx
  29. 6 2
      src/pages/A6ybwx/A6_1_zxys/index.module.scss
  30. 30 19
      src/pages/A6ybwx/A6_1_zxys/index.tsx
  31. 27 7
      src/pages/A6ybwx/A6_2_zxzgh/index.module.scss
  32. 22 10
      src/pages/A6ybwx/A6_2_zxzgh/index.tsx
  33. 0 1
      src/pages/A6ybwx/index.tsx
  34. 17 1
      src/types/declaration.d.ts

BIN
public/Chenzhebei-ShanxiMuseum/Build/Build.data.unityweb


BIN
public/Chenzhebei-ShanxiMuseum/Build/Build.framework.js.unityweb


BIN
public/Chenzhebei-ShanxiMuseum/Build/Build.wasm.unityweb


+ 83 - 82
public/Chenzhebei-ShanxiMuseum/index.html

@@ -1,31 +1,33 @@
 <!DOCTYPE html>
 <html lang="en-us">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Chenzhebei-ShanxiMuseum</title>
-    <link rel="shortcut icon" href="TemplateData/favicon.ico">
-    <link rel="stylesheet" href="TemplateData/style.css">
+    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
+    <link rel="stylesheet" href="TemplateData/style.css" />
     <script src="./unityExport.js"></script>
-</head>
-<body>
+  </head>
+  <body>
     <div id="unity-container">
-        <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
-        <div id="unity-loading-bar">
-            <div id="unity-progress-bar-empty">
-                <div id="unity-progress-bar-full"></div>
-            </div>
+      <canvas id="unity-canvas" width="960" height="600" tabindex="-1"></canvas>
+      <div id="unity-loading-bar">
+        <div id="unity-progress-bar-empty">
+          <div id="unity-progress-bar-full"></div>
         </div>
-        <div id="unity-warning"></div>
+      </div>
+      <div id="unity-warning"></div>
     </div>
-</body>
-<script>
+  </body>
+  <script>
+    window.leftCameraViewportX = 0.268
+    window.leftCameraOffsetX = 0
 
-    var container = document.querySelector("#unity-container");
-    var canvas = document.querySelector("#unity-canvas");
-    var loadingBar = document.querySelector("#unity-loading-bar");
-    var progressBarFull = document.querySelector("#unity-progress-bar-full");
-    var warningBanner = document.querySelector("#unity-warning");
+    var container = document.querySelector('#unity-container')
+    var canvas = document.querySelector('#unity-canvas')
+    var loadingBar = document.querySelector('#unity-loading-bar')
+    var progressBarFull = document.querySelector('#unity-progress-bar-full')
+    var warningBanner = document.querySelector('#unity-warning')
 
     // Shows a temporary message banner/ribbon for a few seconds, or
     // a permanent error message on top of the canvas if type=='error'.
@@ -34,36 +36,36 @@
     // way that non-critical warnings and error messages are presented to the
     // user.
     function unityShowBanner(msg, type) {
-        function updateBannerVisibility() {
-            warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
-        }
-        var div = document.createElement('div');
-        div.innerHTML = msg;
-        warningBanner.appendChild(div);
-        if (type == 'error') div.style = 'background: red; padding: 10px;';
-        else {
-            if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
-            setTimeout(function () {
-                warningBanner.removeChild(div);
-                updateBannerVisibility();
-            }, 5000);
-        }
-        updateBannerVisibility();
+      function updateBannerVisibility() {
+        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'
+      }
+      var div = document.createElement('div')
+      div.innerHTML = msg
+      warningBanner.appendChild(div)
+      if (type == 'error') div.style = 'background: red; padding: 10px;'
+      else {
+        if (type == 'warning') div.style = 'background: yellow; padding: 10px;'
+        setTimeout(function () {
+          warningBanner.removeChild(div)
+          updateBannerVisibility()
+        }, 5000)
+      }
+      updateBannerVisibility()
     }
 
-    var buildUrl = "Build";
-    var loaderUrl = buildUrl + "/Build.loader.js";
+    var buildUrl = 'Build'
+    var loaderUrl = buildUrl + '/Build.loader.js'
     var config = {
-        dataUrl: buildUrl + "/Build.data.unityweb",
-        frameworkUrl: buildUrl + "/Build.framework.js.unityweb",
-        codeUrl: buildUrl + "/Build.wasm.unityweb",
-        streamingAssetsUrl: "StreamingAssets",
-        devicePixelRatio: 2,
-        companyName: "DefaultCompany",
-        productName: "Chenzhebei-ShanxiMuseum",
-        productVersion: "0.1",
-        showBanner: unityShowBanner,
-    };
+      dataUrl: buildUrl + '/Build.data.unityweb',
+      frameworkUrl: buildUrl + '/Build.framework.js.unityweb',
+      codeUrl: buildUrl + '/Build.wasm.unityweb',
+      streamingAssetsUrl: 'StreamingAssets',
+      devicePixelRatio: 2,
+      companyName: 'DefaultCompany',
+      productName: 'Chenzhebei-ShanxiMuseum',
+      productVersion: '0.1',
+      showBanner: unityShowBanner
+    }
 
     // By default Unity keeps WebGL canvas render target size matched with
     // the DOM size of the canvas element (scaled by window.devicePixelRatio)
@@ -73,43 +75,42 @@
     // config.matchWebGLToCanvasSize = false;
 
     if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-        // Mobile device style: fill the whole browser client area with the game canvas:
-        var meta = document.createElement('meta');
-        meta.name = 'viewport';
-        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
-        document.getElementsByTagName('head')[0].appendChild(meta);
-        document.querySelector("#unity-container").className = "unity-mobile";
-        canvas.className = "unity-mobile";
+      // Mobile device style: fill the whole browser client area with the game canvas:
+      var meta = document.createElement('meta')
+      meta.name = 'viewport'
+      meta.content =
+        'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
+      document.getElementsByTagName('head')[0].appendChild(meta)
+      document.querySelector('#unity-container').className = 'unity-mobile'
+      canvas.className = 'unity-mobile'
 
-        // To lower canvas resolution on mobile devices to gain some
-        // performance, uncomment the following line:
-        // config.devicePixelRatio = 1;
+      // To lower canvas resolution on mobile devices to gain some
+      // performance, uncomment the following line:
+      // config.devicePixelRatio = 1;
     }
 
-
-
-loadingBar.style.display = "block";
-    var script = document.createElement("script");
-    script.src = loaderUrl;
+    loadingBar.style.display = 'block'
+    var script = document.createElement('script')
+    script.src = loaderUrl
     script.onload = () => {
-        createUnityInstance(canvas, config, (progress) => {
-
-            if (window.parent && window.parent !== window) {
-                window.parent.unityLoading(progress);
-            }
-            progressBarFull.style.width = 100 * progress + "%";
-        }).then((unityInstance) => {
-            loadingBar.style.display = "none";
-            window.unityInstance = unityInstance;
-            
-            if (window.parent && window.parent !== window) {
-                window.parent.unityLoading(1);
-            }
-        }).catch((message) => {
-            alert(message);
-        });
-    };
-    document.body.appendChild(script);
-</script>
+      createUnityInstance(canvas, config, progress => {
+        if (window.parent && window.parent !== window) {
+          window.parent.unityLoading(progress)
+        }
+        progressBarFull.style.width = 100 * progress + '%'
+      })
+        .then(unityInstance => {
+          loadingBar.style.display = 'none'
+          window.unityInstance = unityInstance
 
-</html>
+          if (window.parent && window.parent !== window) {
+            window.parent.unityLoading(1)
+          }
+        })
+        .catch(message => {
+          alert(message)
+        })
+    }
+    document.body.appendChild(script)
+  </script>
+</html>

BIN
public/myData/img/gaofudiao.png


BIN
public/myData/img/gongyangren.png


BIN
public/myData/img/sin_1.png


BIN
public/myData/img/sin_10.png


BIN
public/myData/img/sin_11.png


BIN
public/myData/img/sin_12.png


BIN
public/myData/img/sin_13.png


BIN
public/myData/img/sin_14.png


BIN
public/myData/img/sin_15.png


BIN
public/myData/img/sin_2.png


BIN
public/myData/img/sin_3.png


BIN
public/myData/img/sin_4.png


BIN
public/myData/img/sin_5.png


BIN
public/myData/img/sin_6.png


BIN
public/myData/img/sin_7.png


BIN
public/myData/img/sin_8.png


BIN
public/myData/img/sin_9.png


BIN
public/myData/img/yinxianke1.png


BIN
public/myData/img/yinxianke2.png


BIN
public/myData/img/zhongxironghe.png


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 234 - 7
public/myData/myData.js


BIN
src/assets/img/A6_sincize_detailIcon.png


BIN
src/assets/img/A6_sincize_detailIcon_ac.png


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

@@ -20,15 +20,15 @@ function MenuSider({ activeTab }: { activeTab: number }) {
           />
           <div className='siderContent'>
             <div 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'}`)} alt="" /></div>
             </div>
             <div 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'}`)} alt="" /></div>
             </div>
             <div 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'}`)} alt="" /></div>
             </div>
             <div className='icon'>

+ 6 - 2
src/pages/A6ybwx/A6_1_zxys/index.module.scss

@@ -81,6 +81,7 @@
       }
     }
     .ft {
+      cursor: pointer;
       transform: translate(-66%, 50%);
     }
     .fd {
@@ -92,6 +93,7 @@
       transform: translate(493%, 90%);
     }
     .gy {
+      cursor: pointer;
       transform: translate(523%, -139%);
     }
   }
@@ -171,7 +173,7 @@
           }
           .text {
             width: 100%;
-            height: 85px;
+            height: fit-content;
             line-height: 14px;
             text-align: center;
           }
@@ -206,7 +208,9 @@
             border-radius: 50%;
             background-color: #ccc;
             & > img {
-              height: 100%;
+              border-radius: 50%;
+              width: 120px;
+              height: 120px;
               object-fit: cover;
             }
           }

+ 30 - 19
src/pages/A6ybwx/A6_1_zxys/index.tsx

@@ -1,10 +1,17 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-
+import { myData } from '@/utils/http'
 
 function Zaoxiang() {
-
+  const [currentType, setCurrentType] = useState('')
   const [isShowDetail, setIsShowDetail] = useState(false)
+
+  const currentItem = React.useMemo(() => myData.zaoxiangDataDetail.find(item => item.type === currentType), [currentType])
+
+  const handleDotClick = (type: string) => {
+    setCurrentType(type)
+    setIsShowDetail(true)
+  }
   return (
     <div className={styles.Zaoxiang}>
       <div className='back' onClick={() => window.location.replace('#/ybwx?tab=1')}>
@@ -22,20 +29,20 @@ function Zaoxiang() {
           程哲碑整体布局主次分明,宗教意涵与艺术表现浑然一体,不仅体现造像者对佛教义理的理解,更彰显出北朝时期多元文化交融下的审美取向与工艺水准。这种以线塑形、以形传神的表现手法,将佛教的庄严与中土的典雅有机统一,体现出北朝工匠卓越的创造力与审美自觉。
         </div>
       </div>
-      <div className='dot ft'>
+      <div className='dot ft' onClick={() => handleDotClick('中西融合')}>
         <img src={require('@/assets/img/A6_zaoxiang_ft.png')} draggable='false' alt='' />
         <div className='addtxt'>中西融合</div>
       </div>
 
-      <div className='dot fd' onClick={() => setIsShowDetail(true)}>
+      <div className='dot fd' onClick={() => handleDotClick('西域雕塑风格')}>
         <img src={require('@/assets/img/A6_zaoxiang_fd.png')} draggable='false' alt='' />
         <div className='addtxt'>西域雕塑风格</div>
       </div>
-      <div className='dot yx' onClick={() => setIsShowDetail(true)}>
+      <div className='dot yx' onClick={() => handleDotClick('中国传统绘画')}>
         <img src={require('@/assets/img/A6_zaoxiang_yk.png')} draggable='false' alt='' />
         <div className='addtxt'>中国传统绘画</div>
       </div>
-      <div className='dot gy'>
+      <div className='dot gy' onClick={() => handleDotClick('汉地服饰')}>
         <img src={require('@/assets/img/A6_zaoxiang_gy.png')} draggable='false' alt='' />
         <div className='addtxt'>汉地服饰</div>
       </div>
@@ -49,32 +56,36 @@ function Zaoxiang() {
               <img src={require('@/assets/img/btn_back.png')} alt='' />
             </div>
             <div className='detailTitle'>
-              <div className='name'>高浮雕</div>
+              <div className='name'>{currentItem?.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='text'>{currentItem?.type}</div>
                 <div className='icon2'>
                   <img src={require('@/assets/img/A6_zaoxiang_icon2.png')} draggable='false' alt='' />
                 </div>
               </div>
             </div>
             <div className='txtcontent'>
-              其余部分引入中国传统绘画的线条雕刻,反映出浓郁的中国传统文化特色,也是佛教艺术进一步汉化的结果。
+              {currentItem?.intro}
             </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=''
-                  />
+              {currentItem?.imgItems.map((item, index) => (
+                <div className='previewItem' key={index}>
+                  <div className='pic'>
+                    <img src={item.src} draggable='false' alt='' />
+                  </div>
+                  <div className='txt'>{item.title}</div>
+                  <div className='icon3'>
+                    <img
+                      src={require('@/assets/img/A6_zaoxiang_foxiang_zoomIn.png')}
+                      draggable='false'
+                      alt=''
+                    />
+                  </div>
                 </div>
-              </div>
+              ))}
             </div>
             <div className='foxiang'>
               <img src={require('@/assets/img/A6_zaoxiang_foxiang.png')} draggable='false' alt='' />

+ 27 - 7
src/pages/A6ybwx/A6_2_zxzgh/index.module.scss

@@ -214,14 +214,12 @@
           background-size: 100% 100%;
 
           .txt {
+            writing-mode: vertical-rl;
+            text-align: left;
             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%
-            );
+            background-image: linear-gradient(to bottom, #7d3807 0%, rgba(232, 205, 149, 0) 100%);
           }
         }
         .detailShow,
@@ -275,6 +273,7 @@
             align-items: center;
             justify-content: center;
             gap: 10px;
+            position: relative;
             .title {
               width: 100%;
               height: 20px;
@@ -285,16 +284,37 @@
             }
             .pic {
               width: 100%;
-              height: 70%;
+              height: 65%;
               & > img {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
               }
             }
-            .icon {
+            .txt {
+              width: 90%;
+              height: 20%;
+              font-size: 11px;
+              color: rgba(93, 96, 96, 1);
+            }
+            .iconContainner {
+              align-self: flex-end;
               width: 100%;
               height: 30px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              gap: 10px;
+              .icon {
+                cursor: pointer;
+                width: 14px;
+                height: 14px;
+                & > img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: contain;
+                }
+              }
             }
           }
         }

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 22 - 10
src/pages/A6ybwx/A6_2_zxzgh/index.tsx


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

@@ -4,7 +4,6 @@ import StatueArt from "./StatueArt";
 import Genealogy from "./Genealogy";
 
 function A6ybwx() {
-  const [isShowBtn, setIsShowBtn] = useState(false);
   const [isEnter, setIsEnter] = useState(false)
   const [videoOk, setVideoOk] = useState(false)
   const [gotoTab, setGotoTab] = useState(0)

+ 17 - 1
src/types/declaration.d.ts

@@ -46,7 +46,23 @@ type MyDataType = {
   // 未解之思
   weijie: string
   // 造像中国化
-  sinicizeData: { time: string; bgPath: string }[]
+  sinicizeDataStatic: { desc: string }
+  sinicizeData: {
+    time: string
+    bgPath: string
+    desc: string
+    items: { title: string; txt: string }[]
+    imgItems: { title: string; src: string; txt: string }[]
+  }[]
+  zaoxiangDataDetail: {
+    type: string
+    name: string
+    intro: string
+    imgItems: {
+      src: string
+      title: string
+    }[]
+  }[]
   // 家族谱系
   genealogyData: {
     name: string