Home Esplora Aiuto
Registrati Accedi
lanxin
/
eyuwan
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

feat：1.0

lanxin 2 settimane fa
parent
60ff5eb00f
commit
8249839b34
23 ha cambiato i file con 149 aggiunte e 6427 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 1 0
      .gitignore
  2. 3 6
      index.html
  3. 20 20
      static/myData/data.js
  4. 0 0
      public/myData/img/intro1.png
  5. 0 0
      public/myData/media/test.mp3
  6. 6 3
      src/App.tsx
  7. BIN
      src/assets/img/full.png
  8. 1 1
      src/pages/A3detailPannelM/index.tsx
  9. 1 0
      src/pages/A5Intro2D/index.module.scss
  10. 10 1
      src/pages/A5Intro2D/index.tsx
  11. 5 4
      src/pages/A5Intro2DM/index.module.scss
  12. 11 1
      src/pages/A5Intro2DM/index.tsx
  13. 11 0
      src/pages/A6Intro3D/index.module.scss
  14. 34 2
      src/pages/A6Intro3D/index.tsx
  15. 12 1
      src/pages/A6Intro3DM/index.module.scss
  16. 34 2
      src/pages/A6Intro3DM/index.tsx
  17. 0 6352
      static/4dage.js
  18. 0 34
      static/model.html
  19. BIN
      static/myData/img/intro1_thumb.png
  20. BIN
      static/myData/img/intro2.png
  21. BIN
      static/myData/img/intro2_thumb.png
  22. BIN
      static/myData/img/ore1.png
  23. BIN
      static/myData/img/ore2.png

+ 1 - 0
.gitignore
Vedi File 

@@ -10,6 +10,7 @@
 
 
 # production
 
 /build
 
+/dist
 
 
 # misc
 
 .DS_Store

+ 3 - 6
index.html
Vedi File 

@@ -5,13 +5,10 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
     <meta name="description" content="Web site created using Vite + React" />
 
-    <meta
 
-      name="viewport"
 
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
 
-    />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
 
     <link rel="apple-touch-icon" href="./logo192.png" />
 
-    <script src="./static/myData/data.js"></script>
 
-    <title>集宁博物馆</title>
 
+    <script src="myData/data.js"></script>
 
+    <title>鄂豫皖革命纪念馆</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 20 - 20
static/myData/data.js
Vedi File 

@@ -9,8 +9,8 @@ const infoTemo = {
 
       level: 1, // 1 一级 2 二级 3 三级 0 未定级
 
       desc: '描述',
 
       location: '现存于xxx',
 
-      musicLink: './static/myData/media/test.mp3',
 
-      src: './static/myData/img/intro1.png'
 
+      musicLink: 'myData/media/test.mp3',
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称1',
 
@@ -22,7 +22,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称2',
 
@@ -34,7 +34,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称3',
 
@@ -46,7 +46,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称4',
 
@@ -58,7 +58,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称5',
 
@@ -70,7 +70,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称6',
 
@@ -82,7 +82,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称7',
 
@@ -94,7 +94,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称8',
 
@@ -106,7 +106,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称9',
 
@@ -118,7 +118,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称10',
 
@@ -130,7 +130,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称11',
 
@@ -142,7 +142,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称12',
 
@@ -154,7 +154,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称13',
 
@@ -166,7 +166,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称14',
 
@@ -178,7 +178,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称15',
 
@@ -190,7 +190,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称16',
 
@@ -202,7 +202,7 @@ const infoTemo = {
 
       desc: '    这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是这是一段简介这是这是一段简介这是这是一段简介这是这是一段简介这是这是一段简介这是这是一段简介这是这是一段简介这是这是一段简介这是这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称17',
 
@@ -214,7 +214,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     },
 
     {
 
       title: '文物名称18',
 
@@ -226,7 +226,7 @@ const infoTemo = {
 
       desc: '描述',
 
       location: '现存于xxx',
 
       musicLink: '音频链接',
 
-      src: './static/myData/img/intro1.png'
 
+      src: 'myData/img/intro1.png'
 
     }
 
   ]
 
 }

static/myData/img/intro1.png → public/myData/img/intro1.png
Vedi File


static/myData/media/test.mp3 → public/myData/media/test.mp3
Vedi File


+ 6 - 3
src/App.tsx
Vedi File 

@@ -5,6 +5,9 @@ import { HashRouter, Routes, Route } from 'react-router-dom'
 
 import { isMobileFu } from './utils/history'
 
 import SpinLoding from './components/SpinLoding'
 
 import AsyncSpinLoding from './components/AsyncSpinLoding'
 
+import { Image } from 'antd'
 
+import { useSelector } from 'react-redux'
 
+import store from '@/store'
 
 
 import UpAsyncLoding from './components/UpAsyncLoding'
 
 import MessageCom from './components/Message'
 
@@ -27,7 +30,7 @@ const A6Intro3DM = React.lazy(() => import('./pages/A6Intro3DM'))
 
 
 export default function App() {
 
   // 从仓库中获取查看图片的信息
 
-  // const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
+  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
 
   const rootDomFu = useCallback(() => {
 
     const rootDom: HTMLDivElement = document.querySelector('#root')!
 
@@ -61,7 +64,7 @@ export default function App() {
 
       <AsyncSpinLoding />
 
 
       {/* 所有图片点击预览查看大图 */}
 
-      {/* <Image
 
+      <Image
 
         preview={{
 
           visible: lookBigImg.show,
 
           src: lookBigImg.url,
 
@@ -73,7 +76,7 @@ export default function App() {
 
             })
 
           }
 
         }}
 
-      /> */}
 
+      />
 
 
       {/* 上传附件的进度条元素 */}
 
       <UpAsyncLoding />

BIN
src/assets/img/full.png
Vedi File


+ 1 - 1
src/pages/A3detailPannelM/index.tsx
Vedi File 

@@ -107,7 +107,7 @@ function DetailPanel() {
 
         <div className='Dcontent'>
 
           {/* 二维文物 */}
 
           {oreData
 
-            .filter((item, index) => index >= 8 * (currentPage - 1) && index < 8 * currentPage)
 
+            .filter((item, index) => index < visibleCount)
 
             .map((item, index) => (
 
               <div className='Ditem' onClick={() => navigate(item.type === 0 ? `/intro3D?title=${item.title}` : `/intro2D?title=${item.title}`)} onTouchStart={() => setShowMoodIndex(index)} key={index}>
 
                 <img src={item.src} alt='' />

+ 1 - 0
src/pages/A5Intro2D/index.module.scss
Vedi File 

@@ -30,6 +30,7 @@
 
         width: 100%;
 
         height: 100%;
 
         object-fit: contain;
 
+        cursor: pointer;
 
       }
 
     }
 
     .iRight {

+ 10 - 1
src/pages/A5Intro2D/index.tsx
Vedi File 

@@ -2,9 +2,13 @@ import React, { useEffect, useRef, useState } from "react";
 
 import closeBtn from '@/assets/img/closeBtn.png'
 
 import styles from "./index.module.scss";
 
 import { useNavigate } from 'react-router-dom'
 
+import { useSelector } from 'react-redux'
 
+import store from '@/store'
 
 function Intro2D() {
 
   const navigate = useNavigate()
 
   const [item, setItem] = useState(null)
 
+  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
+
 
   useEffect(() => {
 
     const title = new URLSearchParams(window.location.href.split('?')[1]).get('title')
 
     setItem(infoTemo.oreData.find(item => item.title === title))
 
@@ -24,7 +28,12 @@ function Intro2D() {
 
       <div className="iClose">
 
         <img draggable={false} src={closeBtn} alt='' onClick={() => navigate(-1)} />
 
       </div>
 
-      <div className="iLeft"><img src={item?.src} alt="" /></div>
 
+      <div className="iLeft"><img src={item?.src} alt="" onClick={() => {
 
+        store.dispatch({
 
+          type: 'layout/lookBigImg',
 
+          payload: { url: item?.src, show: true }
 
+        })
 
+      }} /></div>
 
       <div className="iRight">
 
         <div className="ititle">{item?.title}</div>
 
         <div className="idate">年代：{item?.date}</div>

+ 5 - 4
src/pages/A5Intro2DM/index.module.scss
Vedi File 

@@ -28,18 +28,19 @@
 
       display: flex;
 
       flex-direction: column;
 
       gap: 4px;
 
+      padding: 0 10px;
 
       .ititle {
 
-        font-size: 28px;
 
+        font-size: 24px;
 
         font-weight: bold;
 
         letter-spacing: 1px;
 
         color: rgba(226, 16, 2, 1);
 
-        margin-bottom: 20px;
 
+        margin-bottom: 10px;
 
       }
 
       .idate,
 
       .itype,
 
       .ilevel {
 
-        font-size: 12px;
 
-        font-weight: 500;
 
+        font-size: 14px;
 
+        font-weight: bold;
 
         color: rgba(21, 21, 21, 1);
 
       }
 
       .imusic {

+ 11 - 1
src/pages/A5Intro2DM/index.tsx
Vedi File 

@@ -2,8 +2,12 @@ import React, { useEffect, useRef, useState } from "react";
 
 import closeBtn from '@/assets/img/closeBtn.png'
 
 import styles from "./index.module.scss";
 
 import { useNavigate } from 'react-router-dom'
 
+import { useSelector } from 'react-redux'
 
+import store from '@/store'
 
+
 
 function Intro2D() {
 
   const navigate = useNavigate()
 
+  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
   const [item, setItem] = useState(null)
 
   useEffect(() => {
 
     const title = new URLSearchParams(window.location.href.split('?')[1]).get('title')
 
@@ -21,7 +25,13 @@ function Intro2D() {
 
   }
 
   return (
 
     <div className={styles.intro2D}>
 
-      <div className="iLeft"><img src={item?.src} alt="" /></div>
 
+      <div className="iLeft"><img src={item?.src} alt="" onClick={() => {
 
+        store.dispatch({
 
+          type: 'layout/lookBigImg',
 
+          payload: { url: item?.src, show: true }
 
+        })
 
+      }} />
 
+      </div>
 
       <div className="iRight">
 
         <div className="ititle">{item?.title}</div>
 
         <div className="idate">年代：{item?.date}</div>

+ 11 - 0
src/pages/A6Intro3D/index.module.scss
Vedi File 

@@ -54,11 +54,20 @@
 
         align-items: center;
 
         justify-content: center;
 
         margin: 40px 0;
 
+        position: relative;
 
         iframe {
 
           width: 100%;
 
           height: 100%;
 
           border: none;
 
         }
 
+        & > img {
 
+          position: absolute;
 
+          bottom: 20px;
 
+          right: 20px;
 
+          width: 48px;
 
+          height: 48px;
 
+          cursor: pointer;
 
+        }
 
       }
 
       .Intro3DContentBtns {
 
         display: flex;
 
@@ -94,6 +103,7 @@
 
       display: flex;
 
       align-items: center;
 
       justify-content: center;
 
+
 
       .Intro3DContentDescContent {
 
         width: 80%;
 
         height: 83%;
 
@@ -104,6 +114,7 @@
 
         align-items: center;
 
         justify-content: center;
 
         gap: 50px;
 
+        border-radius: 5px;
 
         .Intro3DContentDescTitle {
 
           font-size: 30px;
 
           font-weight: 500;

+ 34 - 2
src/pages/A6Intro3D/index.tsx
Vedi File 

@@ -1,6 +1,7 @@
 
-import React, { useState, useEffect } from "react";
 
+import React, { useState, useEffect, useRef } from "react";
 
 import styles from "./index.module.scss";
 
 import Logo from '@/assets/img/Logo.png'
 
+import fullIcon from '@/assets/img/full.png'
 
 import closeBtn from '@/assets/img/closeBtn.png'
 
 import homeBtn from '@/assets/img/homeBtn.png'
 
 import introBtn from '@/assets/img/introBtn.png'
 
@@ -13,6 +14,37 @@ function Intro3D() {
 
   }, [])
 
   const navigate = useNavigate()
 
   const [showDesc, setShowDesc] = useState(false);
 
+  const iframeRef = useRef<HTMLIFrameElement>(null)
 
+
 
+  // 添加全屏切换函数
 
+  const toggleFullscreen = () => {
 
+    if (!iframeRef.current) return
 
+
 
+    const iframe = iframeRef.current
 
+
 
+    // 检查是否已经全屏
 
+    if (!document.fullscreenElement) {
 
+      // 直接请求iframe元素全屏（而非内部文档）
 
+      if (iframe.requestFullscreen) {
 
+        iframe
 
+          .requestFullscreen()
 
+          .then()
 
+          .catch(err => {
 
+            console.error('进入全屏失败:', err)
 
+          })
 
+      }
 
+    } else {
 
+      // 退出全屏
 
+      if (document.exitFullscreen) {
 
+        document
 
+          .exitFullscreen()
 
+          .then()
 
+          .catch(err => {
 
+            console.error('退出全屏失败:', err)
 
+          })
 
+      }
 
+    }
 
+  }
 
   return (
 
     <div className={styles.Intro3D}>
 
       <div className="Logo"><img src={Logo} alt="" /></div>
 
@@ -22,7 +54,7 @@ function Intro3D() {
 
       <div className="Intro3DContent">
 
         <div className="Intro3DContentTitle">{item?.title}</div>
 
         <div className="Intro3DContentLocation">{item?.location}</div>
 
-        <div className="Intro3DContentImg"><iframe src={item?.modalLink} title="item?.title"></iframe></div>
 
+        <div className="Intro3DContentImg"><iframe ref={iframeRef} src={item?.modalLink} title="item?.title"></iframe><img draggable={false} src={fullIcon} alt="" onClick={toggleFullscreen} /></div>
 
         <div className="Intro3DContentBtns">
 
           <div className="homeBtn" onClick={() => navigate('/layout')}> <img src={homeBtn} alt="" /> 首页</div>
 
           <div className="detailBtn" onClick={() => setShowDesc(true)}> <img src={introBtn} alt="" /> 简介</div>

+ 12 - 1
src/pages/A6Intro3DM/index.module.scss
Vedi File 

@@ -46,11 +46,20 @@
 
         align-items: center;
 
         justify-content: center;
 
         margin: 40px 0;
 
+        position: relative;
 
         iframe {
 
           width: 100%;
 
           height: 100%;
 
           border: none;
 
         }
 
+        & > img {
 
+          position: absolute;
 
+          bottom: 10px;
 
+          right: 10px;
 
+          width: 28px;
 
+          height: 28px;
 
+          cursor: pointer;
 
+        }
 
       }
 
       .Intro3DContentBtns {
 
         width: 100%;
 
@@ -87,6 +96,7 @@
 
       display: flex;
 
       align-items: center;
 
       justify-content: center;
 
+
 
       .iClose {
 
         position: absolute;
 
         top: 6%;
 
@@ -105,11 +115,12 @@
 
         flex-direction: column;
 
         align-items: center;
 
         gap: 10px;
 
+        border-radius: 5px;
 
         .Intro3DContentDescTitle {
 
           margin-top: 70px;
 
           font-size: 20px;
 
           letter-spacing: 2px;
 
-          font-weight: 500;
 
+          font-weight: bold;
 
           line-height: 30px;
 
           color: rgba(226, 16, 2, 1);
 
         }

+ 34 - 2
src/pages/A6Intro3DM/index.tsx
Vedi File 

@@ -1,6 +1,7 @@
 
-import React, { useState, useEffect } from "react";
 
+import React, { useState, useEffect, useRef } from "react";
 
 import styles from "./index.module.scss";
 
 import Logo from '@/assets/img/Logo.png'
 
+import fullIcon from '@/assets/img/full.png'
 
 import closeBtn from '@/assets/img/closeBtn.png'
 
 import homeBtn from '@/assets/img/homeBtn.png'
 
 import introBtn from '@/assets/img/introBtn.png'
 
@@ -13,10 +14,41 @@ function Intro3D() {
 
   }, [])
 
   const navigate = useNavigate()
 
   const [showDesc, setShowDesc] = useState(false);
 
+  const iframeRef = useRef<HTMLIFrameElement>(null)
 
+
 
+  // 添加全屏切换函数
 
+  const toggleFullscreen = () => {
 
+    if (!iframeRef.current) return
 
+
 
+    const iframe = iframeRef.current
 
+
 
+    // 检查是否已经全屏
 
+    if (!document.fullscreenElement) {
 
+      // 直接请求iframe元素全屏（而非内部文档）
 
+      if (iframe.requestFullscreen) {
 
+        iframe
 
+          .requestFullscreen()
 
+          .then()
 
+          .catch(err => {
 
+            console.error('进入全屏失败:', err)
 
+          })
 
+      }
 
+    } else {
 
+      // 退出全屏
 
+      if (document.exitFullscreen) {
 
+        document
 
+          .exitFullscreen()
 
+          .then()
 
+          .catch(err => {
 
+            console.error('退出全屏失败:', err)
 
+          })
 
+      }
 
+    }
 
+  }
 
   return (
 
     <div className={styles.Intro3D}>
 
       <div className="Intro3DContent">
 
-        <div className="Intro3DContentImg"><iframe src={item?.modalLink} title="item?.title"></iframe></div>
 
+        <div className="Intro3DContentImg"><iframe ref={iframeRef} src={item?.modalLink} title="item?.title"></iframe><img draggable={false} src={fullIcon} alt="" onClick={toggleFullscreen} /></div>
 
         <div className="Intro3DContentTitle">{item?.title}</div>
 
         <div className="Intro3DContentLocation">{item?.location}</div>
 
         <div className="Intro3DContentBtns">

File diff suppressed because it is too large
+ 0 - 6352
static/4dage.js


+ 0 - 34
static/model.html
Vedi File 

@@ -1,34 +0,0 @@
 
-<!DOCTYPE html>

-<html lang="en">

-  <head>

-    <meta charset="UTF-8" />

-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

-    <script src="./4dage.js"></script>

-    <title>Document</title>

-    <style>

-      html {

-        overflow: hidden;

-      }

-    </style>

-  </head>

-

-  <body>

-    <div id="ui"></div>

-    <script>

-      let m = getQueryVariable('m')

-

-      // window.autoRotate = true; // 是否自动旋转

-

-      // fdage.embed( number, {

-      fdage.embed(m, {

-        transparentBackground: true,

-        width: 800,

-        height: 600,

-        autoStart: true,

-        fullFrame: true,

-        pagePreset: false

-      })

-    </script>

-  </body>

-</html>

BIN
static/myData/img/intro1_thumb.png
Vedi File


BIN
static/myData/img/intro2.png
Vedi File


BIN
static/myData/img/intro2_thumb.png
Vedi File


BIN
static/myData/img/ore1.png
Vedi File


BIN
static/myData/img/ore2.png
Vedi File