před 2 dny · 6fd06727d4
--- a/project/public/index.html
+++ b/project/public/index.html
@@ -11,11 +11,12 @@
 
				     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
			
 
				     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
			
 
				     <script src="./myData/myData.js"></script>
			
 
				+    <script src="./three/data.js"></script>
			
 
				     <title>革命领袖视察黑龙江纪念馆</title>
			
 
				   </head>
			
 
				 
			
 
				   <body>
			
 
				     <noscript>You need to enable JavaScript to run this app.</noscript>
			
 
				-    <div id="root" style="width: 100%; height: 100vh;"></div>
			
 
				+    <div id="root" style="width: 100%; height: 100vh"></div>
			
 
				   </body>
			
 
				 </html>
			
--- a/project/public/myData/myData.js
+++ b/project/public/myData/myData.js
@@ -387,66 +387,3 @@ const myDataTemp = {
 
				     }
			
 
				   ]
			
 
				 }
			
 
				-
			
 
				-const cardNames = [
			
 
				-  {
			
 
				-    id: 1,
			
 
				-    name: '文物的名称1',
			
 
				-    img: '1.png',
			
 
				-    obj: { 构件: '构件1', 位置: '位置1', 装饰: '装饰1', 材质: '材质1' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 2,
			
 
				-    name: '文物的名称2',
			
 
				-    img: '2.png',
			
 
				-    obj: { 构件: '构件2', 位置: '位置2', 装饰: '装饰2', 材质: '材质2' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 3,
			
 
				-    name: '文物的名称3',
			
 
				-    img: '3.png',
			
 
				-    obj: { 构件: '构件3', 位置: '位置3', 装饰: '装饰3', 材质: '材质3' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 4,
			
 
				-    name: '文物的名称4',
			
 
				-    img: '4.png',
			
 
				-    obj: { 构件: '构件4', 位置: '位置4', 装饰: '装饰4', 材质: '材质4' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 5,
			
 
				-    name: '文物的名称5',
			
 
				-    img: '5.png',
			
 
				-    obj: { 构件: '构件5', 位置: '位置5', 装饰: '装饰5', 材质: '材质5' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 6,
			
 
				-    name: '文物的名称6',
			
 
				-    img: '6.png',
			
 
				-    obj: { 构件: '构件6', 位置: '位置6', 装饰: '装饰6', 材质: '材质6' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 7,
			
 
				-    name: '文物的名称7',
			
 
				-    img: '7.png',
			
 
				-    obj: { 构件: '构件7', 位置: '位置7', 装饰: '装饰7', 材质: '材质7' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 8,
			
 
				-    name: '文物的名称8',
			
 
				-    img: '8.png',
			
 
				-    obj: { 构件: '构件8', 位置: '位置8', 装饰: '装饰8', 材质: '材质8' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 9,
			
 
				-    name: '文物的名称9',
			
 
				-    img: '9.png',
			
 
				-    obj: { 构件: '构件9', 位置: '位置9', 装饰: '装饰9', 材质: '材质9' }
			
 
				-  },
			
 
				-  {
			
 
				-    id: 10,
			
 
				-    name: '文物的名称10',
			
 
				-    img: '10.png',
			
 
				-    obj: { 构件: '构件10', 位置: '位置10', 装饰: '装饰10', 材质: '材质10' }
			
 
				-  }
			
 
				-]
			
--- a/project/public/three/assets/in/1.png
+++ b/project/public/three/assets/in/1.png
--- a/project/public/three/assets/in/10.png
+++ b/project/public/three/assets/in/10.png
--- a/project/public/three/assets/in/2.png
+++ b/project/public/three/assets/in/2.png
--- a/project/public/three/assets/in/3.png
+++ b/project/public/three/assets/in/3.png
--- a/project/public/three/assets/in/4.png
+++ b/project/public/three/assets/in/4.png
--- a/project/public/three/assets/in/5.png
+++ b/project/public/three/assets/in/5.png
--- a/project/public/three/assets/in/6.png
+++ b/project/public/three/assets/in/6.png
--- a/project/public/three/assets/in/7.png
+++ b/project/public/three/assets/in/7.png
--- a/project/public/three/assets/in/8.png
+++ b/project/public/three/assets/in/8.png
--- a/project/public/three/assets/in/9.png
+++ b/project/public/three/assets/in/9.png
--- a/project/public/three/assets/out/1.png
+++ b/project/public/three/assets/out/1.png
--- a/project/public/three/assets/out/10.png
+++ b/project/public/three/assets/out/10.png
--- a/project/public/three/assets/out/2.png
+++ b/project/public/three/assets/out/2.png
--- a/project/public/three/assets/out/3.png
+++ b/project/public/three/assets/out/3.png
--- a/project/public/three/assets/out/4.png
+++ b/project/public/three/assets/out/4.png
--- a/project/public/three/assets/out/5.png
+++ b/project/public/three/assets/out/5.png
--- a/project/public/three/assets/out/6.png
+++ b/project/public/three/assets/out/6.png
--- a/project/public/three/assets/out/7.png
+++ b/project/public/three/assets/out/7.png
--- a/project/public/three/assets/out/8.png
+++ b/project/public/three/assets/out/8.png
--- a/project/public/three/assets/out/9.png
+++ b/project/public/three/assets/out/9.png
--- a/project/public/three/click.js
+++ b/project/public/three/click.js
@@ -2,7 +2,7 @@
 
				 viewer.addEventListener('clickObject', e => {
			
 
				   window.top.clickObject(e.id)
			
 
				   // 暂停动画
			
 
				-  viewer.setAutoMove(false)
			
 
				+  // viewer.setAutoMove(false)
			
 
				 })
			
 
				 
			
 
				 // 继续动画 - 给 父页面调用
			
--- a/project/public/three/data.js
+++ b/project/public/three/data.js
@@ -0,0 +1,62 @@
 
				+const cardNames = [
			
 
				+  {
			
 
				+    id: 1,
			
 
				+    name: '文物的名称1',
			
 
				+    img: '1.png',
			
 
				+    obj: { 构件: '构件1', 位置: '位置1', 装饰: '装饰1', 材质: '材质1' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 2,
			
 
				+    name: '文物的名称2',
			
 
				+    img: '2.png',
			
 
				+    obj: { 构件: '构件2', 位置: '位置2', 装饰: '装饰2', 材质: '材质2' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 3,
			
 
				+    name: '文物的名称3',
			
 
				+    img: '3.png',
			
 
				+    obj: { 构件: '构件3', 位置: '位置3', 装饰: '装饰3', 材质: '材质3' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 4,
			
 
				+    name: '文物的名称4',
			
 
				+    img: '4.png',
			
 
				+    obj: { 构件: '构件4', 位置: '位置4', 装饰: '装饰4', 材质: '材质4' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 5,
			
 
				+    name: '文物的名称5',
			
 
				+    img: '5.png',
			
 
				+    obj: { 构件: '构件5', 位置: '位置5', 装饰: '装饰5', 材质: '材质5' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 6,
			
 
				+    name: '文物的名称6',
			
 
				+    img: '6.png',
			
 
				+    obj: { 构件: '构件6', 位置: '位置6', 装饰: '装饰6', 材质: '材质6' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 7,
			
 
				+    name: '文物的名称7',
			
 
				+    img: '7.png',
			
 
				+    obj: { 构件: '构件7', 位置: '位置7', 装饰: '装饰7', 材质: '材质7' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 8,
			
 
				+    name: '文物的名称8',
			
 
				+    img: '8.png',
			
 
				+    obj: { 构件: '构件8', 位置: '位置8', 装饰: '装饰8', 材质: '材质8' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 9,
			
 
				+    name: '文物的名称9',
			
 
				+    img: '9.png',
			
 
				+    obj: { 构件: '构件9', 位置: '位置9', 装饰: '装饰9', 材质: '材质9' }
			
 
				+  },
			
 
				+  {
			
 
				+    id: 10,
			
 
				+    name: '文物的名称10',
			
 
				+    img: '10.png',
			
 
				+    obj: { 构件: '构件10', 位置: '位置10', 装饰: '装饰10', 材质: '材质10' }
			
 
				+  }
			
 
				+]
			
--- a/project/public/three/index.html
+++ b/project/public/three/index.html
@@ -42,7 +42,7 @@
 
				       <canvas></canvas>
			
 
				     </div>
			
 
				 
			
 
				-    <script src="../myData/myData.js"></script>
			
 
				+    <script src="./data.js"></script>
			
 
				 
			
 
				     <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
			
 
				     <script type="text/javascript" src="three.min.js"></script>
			
--- a/project/public/three/index.js
+++ b/project/public/three/index.js
@@ -138,7 +138,7 @@ Viewer.prototype.getDensity = function () {
 
				 
			
 
				 Viewer.prototype.addCard = function (around) {
			
 
				   let cardIndex = Math.floor(cardNames.length * Math.random())
			
 
				-  common.loadTexture('./assets/' + cardNames[cardIndex].img, map => {
			
 
				+  common.loadTexture('./assets/out/' + cardNames[cardIndex].img, map => {
			
 
				     /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ 
			
 
				             map,
			
 
				             transparent:true, opacity:0,side:2
			
--- a/project/src/App.tsx
+++ b/project/src/App.tsx
@@ -32,7 +32,6 @@ declare global {
 
				 }
			
 
				 
			
 
				 export default function App() {
			
 
				-
			
 
				   const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
			
 
				 
			
 
				   return (
			
@@ -46,7 +45,7 @@ export default function App() {
 
				             <Route path='/scene' component={Scene} exact />
			
 
				             <Route path='/architecture' component={Architecture} exact />
			
 
				             <Route path='/member' component={Member} exact />
			
 
				-            <Route path='/view' component={View} exact />
			
 
				+            <Route path='/view/:key' component={View} exact />
			
 
				             <Route path='/life' component={Life} exact />
			
 
				             <Route path='*' component={NotFound} />
			
 
				           </Switch>
			
--- a/project/src/assets/img/A1_sider_close.png
+++ b/project/src/assets/img/A1_sider_close.png
--- a/project/src/assets/img/A1_sider_open.png
+++ b/project/src/assets/img/A1_sider_open.png
--- a/project/src/assets/three/bac.jpg
+++ b/project/src/assets/three/bac.jpg
--- a/project/src/assets/three/back.png
+++ b/project/src/assets/three/back.png
--- a/project/src/assets/three/bj.png
+++ b/project/src/assets/three/bj.png
--- a/project/src/assets/three/cut.png
+++ b/project/src/assets/three/cut.png
--- a/project/src/assets/three/icG.png
+++ b/project/src/assets/three/icG.png
--- a/project/src/assets/three/icM.png
+++ b/project/src/assets/three/icM.png
--- a/project/src/assets/three/icX.png
+++ b/project/src/assets/three/icX.png
--- a/project/src/assets/three/row.png
+++ b/project/src/assets/three/row.png
--- a/project/src/components/MenuSider/index.module.scss
+++ b/project/src/components/MenuSider/index.module.scss
@@ -20,7 +20,7 @@
 
				   }
			
 
				 
			
 
				   &.sidebarClosed {
			
 
				-    transform: translateX(-100%);  // 完全滑出到左侧
			
 
				+    transform: translateX(-100%); // 完全滑出到左侧
			
 
				     transition: transform 0.3s ease-in-out;
			
 
				   }
			
 
				 
			
@@ -44,12 +44,12 @@
 
				     background-size: contain;
			
 
				     background-repeat: no-repeat;
			
 
				     color: rgba(249, 211, 109, 1);
			
 
				+    pointer-events: none;
			
 
				   }
			
 
				-
			
 
				-  
			
 
				 }
			
 
				 
			
 
				 .siderOpen {
			
 
				+  cursor: pointer;
			
 
				   position: fixed;
			
 
				   bottom: 1.5vh;
			
 
				   left: 1.5vw;
			
@@ -60,4 +60,4 @@
 
				     width: 100%;
			
 
				     object-fit: contain;
			
 
				   }
			
 
				-}
			
 
				+}
			
--- a/project/src/components/MenuSider/index.tsx
+++ b/project/src/components/MenuSider/index.tsx
@@ -1,6 +1,6 @@
 
				-import React, { useEffect, useState } from "react";
			
 
				-import styles from "./index.module.scss";
			
 
				-import history from "@/utils/history";
			
 
				+import React, { useEffect, useState } from 'react'
			
 
				+import styles from './index.module.scss'
			
 
				+import history from '@/utils/history'
			
 
				 function MenuSider({ isSidebarOpen = true }: { isSidebarOpen?: boolean }) {
			
 
				   const [activeIndex, setActiveIndex] = useState(0)
			
 
				   const [isOpen, setIsOpen] = useState(true)
			
@@ -8,7 +8,7 @@ function MenuSider({ isSidebarOpen = true }: { isSidebarOpen?: boolean }) {
 
				     if (!isSidebarOpen) {
			
 
				       setIsOpen(false)
			
 
				     }
			
 
				-    const path =  window.location.hash.split('/')[1]
			
 
				+    const path = window.location.hash.split('/')[1]
			
 
				     console.log(path)
			
 
				     if (path) {
			
 
				       const index = myDataTemp.siderData.findIndex(item => item.path === path)
			
@@ -16,7 +16,8 @@ function MenuSider({ isSidebarOpen = true }: { isSidebarOpen?: boolean }) {
 
				     }
			
 
				   }, [isSidebarOpen])
			
 
				   const handleClick = (index: number, path: string) => {
			
 
				-    history.push(`/${path}`)
			
 
				+    const pathRes = path === 'view' ? 'view/three' : path
			
 
				+    history.push(`/${pathRes}`)
			
 
				   }
			
 
				   return (
			
 
				     <>
			
@@ -36,10 +37,9 @@ function MenuSider({ isSidebarOpen = true }: { isSidebarOpen?: boolean }) {
 
				         <img src={require(`@/assets/img/A1_sider_${isOpen ? 'open' : 'close'}.png`)} alt='' />
			
 
				       </div>
			
 
				     </>
			
 
				-
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-const MemoMenuSider = React.memo(MenuSider);
			
 
				+const MemoMenuSider = React.memo(MenuSider)
			
 
				 
			
 
				-export default MemoMenuSider;
			
 
				+export default MemoMenuSider
			
--- a/project/src/pages/A5view/PageSon/A5Three/index.module.scss
+++ b/project/src/pages/A5view/PageSon/A5Three/index.module.scss
@@ -0,0 +1,48 @@
 
				+.A5Three {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+
			
 
				+  :global {
			
 
				+    img {
			
 
				+      pointer-events: none;
			
 
				+    }
			
 
				+    iframe {
			
 
				+      position: absolute;
			
 
				+      top: 0;
			
 
				+      left: 0;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      z-index: 1;
			
 
				+    }
			
 
				+
			
 
				+    .txt {
			
 
				+      position: absolute;
			
 
				+      z-index: 3;
			
 
				+      top: 0;
			
 
				+      left: 0;
			
 
				+      width: 200px;
			
 
				+      text-align: center;
			
 
				+      pointer-events: none;
			
 
				+      font-size: 16px;
			
 
				+      letter-spacing: 2px;
			
 
				+      opacity: 0;
			
 
				+      color: var(--themeColor2);
			
 
				+
			
 
				+      h2 {
			
 
				+        font-size: 20px;
			
 
				+        font-weight: 700;
			
 
				+        text-shadow: 2px 2px 2px black;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .A5cut {
			
 
				+      position: absolute;
			
 
				+      z-index: 4;
			
 
				+      cursor: pointer;
			
 
				+      bottom: 1.5vh;
			
 
				+      left: 6.5vw;
			
 
				+      width: 4vw;
			
 
				+      height: 4vw;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/project/src/pages/A5view/PageSon/A5Three/index.tsx
+++ b/project/src/pages/A5view/PageSon/A5Three/index.tsx
@@ -0,0 +1,89 @@
 
				+import React, { useEffect, useRef, useState } from 'react'
			
 
				+import styles from './index.module.scss'
			
 
				+import A5win from '../A5win'
			
 
				+import history from '@/utils/history'
			
 
				+import { infoPageIDSet } from '@/utils/locStore'
			
 
				+
			
 
				+const fullNum = {
			
 
				+  width: window.innerWidth,
			
 
				+  height: window.innerHeight
			
 
				+}
			
 
				+
			
 
				+function A5Three() {
			
 
				+  const iframeDom = useRef<any>(null)
			
 
				+
			
 
				+  const [txt, setTxt] = useState({
			
 
				+    title: '',
			
 
				+    show: false
			
 
				+  })
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    infoPageIDSet('three')
			
 
				+
			
 
				+    // 点击图片
			
 
				+    ;(window as any).clickObject = (id: any) => {
			
 
				+      setWinId(Number(id))
			
 
				+    }
			
 
				+    // 鼠标移入
			
 
				+    ;(window as any).hoverObject = (name: any) => {
			
 
				+      setTxt({
			
 
				+        title: name,
			
 
				+        show: true
			
 
				+      })
			
 
				+    }
			
 
				+    // 鼠标移出
			
 
				+    ;(window as any).mouseoutObject = () => {
			
 
				+      setTxt({
			
 
				+        title: '',
			
 
				+        show: false
			
 
				+      })
			
 
				+    }
			
 
				+
			
 
				+    const txtDom: any = document.querySelector('.txt')
			
 
				+
			
 
				+    if (txtDom) {
			
 
				+      // 获取鼠标坐标
			
 
				+      ;(window as any).mouseLoc = (x: any, y: any) => {
			
 
				+        // console.log("ppp", x, y);
			
 
				+        // 最大X值
			
 
				+        const maxX = fullNum.width - 200
			
 
				+        let xRes = x >= maxX ? maxX : x
			
 
				+        // xRes = xRes - 100 <= 0 ? 0 : xRes - 100;
			
 
				+        // 最大y值
			
 
				+        const domHeight = txtDom.clientHeight
			
 
				+        const maxY = fullNum.height - domHeight
			
 
				+        let yRes = y >= maxY ? maxY : y
			
 
				+        // yRes = yRes - domHeight / 2 <= 0 ? 0 : yRes - domHeight / 2;
			
 
				+        txtDom.style.top = yRes + 'px'
			
 
				+        txtDom.style.left = xRes + 'px'
			
 
				+      }
			
 
				+    }
			
 
				+  }, [])
			
 
				+
			
 
				+  const [winId, setWinId] = useState(0)
			
 
				+
			
 
				+  return (
			
 
				+    <div className={styles.A5Three}>
			
 
				+      <iframe
			
 
				+        id='iframe'
			
 
				+        ref={iframeDom}
			
 
				+        title='3d'
			
 
				+        src='./three/index.html'
			
 
				+        frameBorder='0'
			
 
				+      ></iframe>
			
 
				+      <div className='txt' style={{ opacity: txt.show ? 0.8 : 0 }}>
			
 
				+        <h2>{txt.title}</h2>
			
 
				+      </div>
			
 
				+
			
 
				+      <div className='A5cut' onClick={() => history.replace('/view/list')}>
			
 
				+        <img src={require('@/assets/three/cut.png')} alt='' />
			
 
				+      </div>
			
 
				+      {/* 弹窗页面 */}
			
 
				+      <A5win id={winId} closeFu={() => setWinId(0)} />
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const MemoA5Three = React.memo(A5Three)
			
 
				+
			
 
				+export default MemoA5Three
			
--- a/project/src/pages/A5view/PageSon/A5atlas/index.module.scss
+++ b/project/src/pages/A5view/PageSon/A5atlas/index.module.scss
@@ -0,0 +1,4 @@
 
				+.A5atlas {
			
 
				+  :global {
			
 
				+  }
			
 
				+}
			
--- a/project/src/pages/A5view/PageSon/A5atlas/index.tsx
+++ b/project/src/pages/A5view/PageSon/A5atlas/index.tsx
@@ -0,0 +1,24 @@
 
				+import React from 'react'
			
 
				+import styles from './index.module.scss'
			
 
				+import { infoPageIDGet } from '@/utils/locStore'
			
 
				+import history from '@/utils/history'
			
 
				+function A5atlas() {
			
 
				+  return (
			
 
				+    <div className={styles.A5atlas}>
			
 
				+      <h1 style={{ color: '#fff' }}>图谱页面</h1>
			
 
				+      <h1
			
 
				+        style={{ color: '#fff' }}
			
 
				+        onClick={() => {
			
 
				+          const key = infoPageIDGet()
			
 
				+          history.replace(`/view/${key}`)
			
 
				+        }}
			
 
				+      >
			
 
				+        返回
			
 
				+      </h1>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const MemoA5atlas = React.memo(A5atlas)
			
 
				+
			
 
				+export default MemoA5atlas
			
--- a/project/src/pages/A5view/PageSon/A5list/index.module.scss
+++ b/project/src/pages/A5view/PageSon/A5list/index.module.scss
@@ -0,0 +1,5 @@
 
				+.A5list {
			
 
				+  color: #fff;
			
 
				+  :global {
			
 
				+  }
			
 
				+}
			
--- a/project/src/pages/A5view/PageSon/A5list/index.tsx
+++ b/project/src/pages/A5view/PageSon/A5list/index.tsx
@@ -0,0 +1,25 @@
 
				+import React, { useEffect, useState } from 'react'
			
 
				+import styles from './index.module.scss'
			
 
				+import A5win from '../A5win'
			
 
				+import { infoPageIDSet } from '@/utils/locStore'
			
 
				+
			
 
				+function A5list() {
			
 
				+  const [winId, setWinId] = useState(0)
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    infoPageIDSet('list')
			
 
				+  }, [])
			
 
				+
			
 
				+  return (
			
 
				+    <div className={styles.A5list}>
			
 
				+      <h1 onClick={() => setWinId(1)}>打开弹窗</h1>
			
 
				+
			
 
				+      {/* 弹窗页面 */}
			
 
				+      <A5win id={winId} closeFu={() => setWinId(0)} />
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const MemoA5list = React.memo(A5list)
			
 
				+
			
 
				+export default MemoA5list
			
--- a/project/src/pages/A5view/PageSon/A5model/index.module.scss
+++ b/project/src/pages/A5view/PageSon/A5model/index.module.scss
@@ -0,0 +1,4 @@
 
				+.A5model {
			
 
				+  :global {
			
 
				+  }
			
 
				+}
			
--- a/project/src/pages/A5view/PageSon/A5model/index.tsx
+++ b/project/src/pages/A5view/PageSon/A5model/index.tsx
@@ -0,0 +1,25 @@
 
				+import React from 'react'
			
 
				+import styles from './index.module.scss'
			
 
				+import { infoPageIDGet } from '@/utils/locStore'
			
 
				+import history from '@/utils/history'
			
 
				+
			
 
				+function A5model() {
			
 
				+  return (
			
 
				+    <div className={styles.A5model}>
			
 
				+      <h1 style={{ color: '#fff' }}>模型页面</h1>
			
 
				+      <h1
			
 
				+        style={{ color: '#fff' }}
			
 
				+        onClick={() => {
			
 
				+          const key = infoPageIDGet()
			
 
				+          history.replace(`/view/${key}`)
			
 
				+        }}
			
 
				+      >
			
 
				+        返回
			
 
				+      </h1>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const MemoA5model = React.memo(A5model)
			
 
				+
			
 
				+export default MemoA5model
			
--- a/project/src/pages/A5view/PageSon/A5win/index.module.scss
+++ b/project/src/pages/A5view/PageSon/A5win/index.module.scss
@@ -0,0 +1,82 @@
 
				+.A5win {
			
 
				+  opacity: 0;
			
 
				+  pointer-events: none;
			
 
				+  transition: all 0.3s;
			
 
				+  position: absolute;
			
 
				+  z-index: 10;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  background-color: rgba(0, 0, 0, 0.4);
			
 
				+  backdrop-filter: blur(4px);
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+
			
 
				+  :global {
			
 
				+    img {
			
 
				+      pointer-events: none;
			
 
				+    }
			
 
				+    .A5Mmain {
			
 
				+      width: 50vw;
			
 
				+      height: auto;
			
 
				+      position: relative;
			
 
				+      & > img {
			
 
				+        width: 100%;
			
 
				+        height: auto;
			
 
				+      }
			
 
				+      .A5Mbox {
			
 
				+        position: absolute;
			
 
				+        top: 0;
			
 
				+        left: 0;
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        padding: 5%;
			
 
				+        z-index: 2;
			
 
				+        & > h3 {
			
 
				+          color: var(--themeColor2);
			
 
				+          font-size: 24px;
			
 
				+          font-weight: 700;
			
 
				+          letter-spacing: 2px;
			
 
				+        }
			
 
				+        .A5Mrow {
			
 
				+          margin-top: 1vh;
			
 
				+          color: var(--themeColor2);
			
 
				+          font-size: 16px;
			
 
				+          display: flex;
			
 
				+          flex-wrap: wrap;
			
 
				+          & > div {
			
 
				+            font-weight: 700;
			
 
				+          }
			
 
				+        }
			
 
				+        .A5Mtu {
			
 
				+          position: absolute;
			
 
				+          top: 50%;
			
 
				+          left: 50%;
			
 
				+          transform: translate(-50%, -50%);
			
 
				+        }
			
 
				+
			
 
				+        .A5Mbtn {
			
 
				+          z-index: 10;
			
 
				+          position: absolute;
			
 
				+          bottom: 8%;
			
 
				+          left: 50%;
			
 
				+          transform: translateX(-50%);
			
 
				+          img {
			
 
				+            width: 2vw;
			
 
				+            height: auto;
			
 
				+            margin: 0 1vw;
			
 
				+            pointer-events: auto;
			
 
				+            cursor: pointer;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.A5winShow {
			
 
				+  opacity: 1;
			
 
				+  pointer-events: auto;
			
 
				+}
			
--- a/project/src/pages/A5view/PageSon/A5win/index.tsx
+++ b/project/src/pages/A5view/PageSon/A5win/index.tsx
@@ -0,0 +1,69 @@
 
				+import React, { useMemo } from 'react'
			
 
				+import styles from './index.module.scss'
			
 
				+import classNmaes from 'classnames'
			
 
				+import history from '@/utils/history'
			
 
				+
			
 
				+type Props = {
			
 
				+  id: number
			
 
				+  closeFu: () => void
			
 
				+}
			
 
				+
			
 
				+function A5win({ id, closeFu }: Props) {
			
 
				+  const info = useMemo(() => {
			
 
				+    const obj = cardNames.find(v => v.id === id) || {}
			
 
				+    return obj
			
 
				+  }, [id])
			
 
				+
			
 
				+  const txtArr = useMemo(() => {
			
 
				+    let arr: any[] = []
			
 
				+
			
 
				+    if (info.id) {
			
 
				+      const obj = info.obj
			
 
				+      for (const k in obj) {
			
 
				+        arr.push({ name: k, txt: obj[k] })
			
 
				+      }
			
 
				+    }
			
 
				+    return arr
			
 
				+  }, [info.id, info.obj])
			
 
				+
			
 
				+  return (
			
 
				+    <div className={classNmaes(styles.A5win, id > 0 ? styles.A5winShow : '')}>
			
 
				+      <div className='A5Mmain'>
			
 
				+        <img src={require('@/assets/three/bac.jpg')} alt='' />
			
 
				+        <div className='A5Mbox'>
			
 
				+          {info.id ? (
			
 
				+            <>
			
 
				+              <h3>{info.name}</h3>
			
 
				+              {txtArr.map(item => (
			
 
				+                <div className='A5Mrow' key={item.name}>
			
 
				+                  <div>{item.name}：</div>
			
 
				+                  <p>{item.txt}</p>
			
 
				+                </div>
			
 
				+              ))}
			
 
				+
			
 
				+              <img className='A5Mtu' src={`./three/assets/in/${info.img}`} alt='' />
			
 
				+
			
 
				+              <div className='A5Mbtn'>
			
 
				+                <img
			
 
				+                  src={require('@/assets/three/icG.png')}
			
 
				+                  alt=''
			
 
				+                  onClick={() => history.replace('/view/atlas')}
			
 
				+                />
			
 
				+                <img src={require('@/assets/three/icX.png')} alt='' onClick={closeFu} />
			
 
				+                <img
			
 
				+                  src={require('@/assets/three/icM.png')}
			
 
				+                  alt=''
			
 
				+                  onClick={() => history.replace('/view/model')}
			
 
				+                />
			
 
				+              </div>
			
 
				+            </>
			
 
				+          ) : null}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const MemoA5win = React.memo(A5win)
			
 
				+
			
 
				+export default MemoA5win
			
--- a/project/src/pages/A5view/index.module.scss
+++ b/project/src/pages/A5view/index.module.scss
@@ -1,44 +1,6 @@
 
				 .A5view {
			
 
				-  :global {
			
 
				-    iframe {
			
 
				-      position: absolute;
			
 
				-      top: 0;
			
 
				-      left: 0;
			
 
				-      width: 100%;
			
 
				-      height: 100%;
			
 
				-      z-index: 1;
			
 
				-    }
			
 
				-
			
 
				-    .btn {
			
 
				-      position: absolute;
			
 
				-      top: 50px;
			
 
				-      left: 50px;
			
 
				-      cursor: pointer;
			
 
				-      background-color: red;
			
 
				-      display: flex;
			
 
				-      justify-content: center;
			
 
				-      align-items: center;
			
 
				-      z-index: 2;
			
 
				-    }
			
 
				-
			
 
				-    .txt {
			
 
				-      position: absolute;
			
 
				-      z-index: 3;
			
 
				-      top: 0;
			
 
				-      left: 0;
			
 
				-      width: 200px;
			
 
				-      text-align: center;
			
 
				-      pointer-events: none;
			
 
				-      font-size: 16px;
			
 
				-      letter-spacing: 2px;
			
 
				-      opacity: 0;
			
 
				-      color: #f9d36d;
			
 
				-
			
 
				-      h2 {
			
 
				-        font-size: 24px;
			
 
				-        font-weight: 700;
			
 
				-        margin-bottom: 15px;
			
 
				-      }
			
 
				-    }
			
 
				-  }
			
 
				+  background-image: url('../../assets/three/background.jpg');
			
 
				+  background-size: 100% 100%;
			
 
				+  // :global {
			
 
				+  // }
			
 
				 }
			
--- a/project/src/pages/A5view/index.tsx
+++ b/project/src/pages/A5view/index.tsx
@@ -1,74 +1,27 @@
 
				-import React, { useEffect, useRef, useState } from 'react'
			
 
				+import React, { useEffect } from 'react'
			
 
				 import styles from './index.module.scss'
			
 
				+import { useParams } from 'react-router-dom'
			
 
				+import A5Three from './PageSon/A5Three'
			
 
				+import A5list from './PageSon/A5list'
			
 
				+import A5model from './PageSon/A5model'
			
 
				+import A5atlas from './PageSon/A5atlas'
			
 
				 import MenuSider from '@/components/MenuSider'
			
 
				 
			
 
				-const fullNum = {
			
 
				-  width: window.innerWidth,
			
 
				-  height: window.innerHeight
			
 
				-}
			
 
				+export type A5pageType = 'three' | 'list' | 'model' | 'atlas'
			
 
				 
			
 
				 function A5view() {
			
 
				-  const iframeDom = useRef<any>(null)
			
 
				-
			
 
				-  const [txt, setTxt] = useState({
			
 
				-    title: '',
			
 
				-    show: false
			
 
				-  })
			
 
				-
			
 
				-  useEffect(() => {
			
 
				-    // 点击图片
			
 
				-    ;(window as any).clickObject = (val: any) => {
			
 
				-      console.log('000', val)
			
 
				-    }
			
 
				-    // 鼠标移入
			
 
				-    ;(window as any).hoverObject = (name: any) => {
			
 
				-      setTxt({
			
 
				-        title: name,
			
 
				-        show: true
			
 
				-      })
			
 
				-    }
			
 
				-    // 鼠标移出
			
 
				-    ;(window as any).mouseoutObject = () => {
			
 
				-      setTxt({
			
 
				-        title: '',
			
 
				-        show: false
			
 
				-      })
			
 
				-    }
			
 
				+  const { key } = useParams<{ key: A5pageType }>()
			
 
				 
			
 
				-    const txtDom: any = document.querySelector('.txt')
			
 
				-
			
 
				-    if (txtDom) {
			
 
				-      // 获取鼠标坐标
			
 
				-      ;(window as any).mouseLoc = (x: any, y: any) => {
			
 
				-        // console.log("ppp", x, y);
			
 
				-        // 最大X值
			
 
				-        const maxX = fullNum.width - 200
			
 
				-        let xRes = x >= maxX ? maxX : x
			
 
				-        // xRes = xRes - 100 <= 0 ? 0 : xRes - 100;
			
 
				-        // 最大y值
			
 
				-        const domHeight = txtDom.clientHeight
			
 
				-        const maxY = fullNum.height - domHeight
			
 
				-        let yRes = y >= maxY ? maxY : y
			
 
				-        // yRes = yRes - domHeight / 2 <= 0 ? 0 : yRes - domHeight / 2;
			
 
				-        txtDom.style.top = yRes + 'px'
			
 
				-        txtDom.style.left = xRes + 'px'
			
 
				-      }
			
 
				-    }
			
 
				-  }, [])
			
 
				+  // useEffect(() => {
			
 
				+  //   console.log('-------', key)
			
 
				+  // }, [key])
			
 
				 
			
 
				   return (
			
 
				     <div className={styles.A5view}>
			
 
				-      <iframe
			
 
				-        id='iframe'
			
 
				-        ref={iframeDom}
			
 
				-        title='3d'
			
 
				-        src='./three/index.html'
			
 
				-        frameBorder='0'
			
 
				-      ></iframe>
			
 
				-      <div className='txt' style={{ opacity: txt.show ? 0.8 : 0 }}>
			
 
				-        <h2>{txt.title}</h2>
			
 
				-      </div>
			
 
				-
			
 
				+      {key === 'three' ? <A5Three /> : null}
			
 
				+      {key === 'list' ? <A5list /> : null}
			
 
				+      {key === 'model' ? <A5model /> : null}
			
 
				+      {key === 'atlas' ? <A5atlas /> : null}
			
 
				       <MenuSider isSidebarOpen={false} />
			
 
				     </div>
			
 
				   )
			
--- a/project/src/utils/locStore.ts
+++ b/project/src/utils/locStore.ts
@@ -0,0 +1,16 @@
 
				+import { A5pageType } from '@/pages/A5view'
			
 
				+
			
 
				+const PAGE_KEY = 'GMLX_WEB_VIEW_PAGE_KEY'
			
 
				+
			
 
				+// 存
			
 
				+export const infoPageIDSet = (key: A5pageType) => {
			
 
				+  localStorage.setItem(PAGE_KEY, key)
			
 
				+}
			
 
				+
			
 
				+// 取
			
 
				+export const infoPageIDGet = () => {
			
 
				+  let res: A5pageType = 'three'
			
 
				+  let txt: any = localStorage.getItem(PAGE_KEY) || ''
			
 
				+  if (txt) res = txt
			
 
				+  return res
			
 
				+}