数据更新

public/myData/data.js

@@ -3,84 +3,84 @@ const oreData = [
     title: '牡丹石',
     img: './myData/img/item1.png',
     activeImg: './myData/img/item1_ac.png',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts53',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-mds',
     text: '123'
   },
   {
     title: '角砾岩型金矿',
     img: './myData/img/item2.png',
     activeImg: './myData/img/item2_ac.png',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts53',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-jlyxjk',
     text: '123'
   },
   {
     title: '伊源玉',
     img: './myData/img/item3.png',
     activeImg: './myData/img/item3_ac.png',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts53',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-yyy',
     text: '伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉'
   }
 ]
 
 const sceneData = [
   {
-    title: '科学家精神教育基地',
-    img: './myData/img/scenePic.png',
-    code: 'SG-NhzxmM4kcLn-05',
-    region: '室内'
+    title: '科学广场',
+    img: './myData/img/kxgc.png',
+    code: 'SG-ozwozjnnnTi',
+    region: '室外'
   },
   {
-    title: '科学家精神教育基地',
-    img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
+    title: '地质展馆（院史馆）',
+    img: './myData/img/dzzg.png',
+    code: 'SG-S3nHAkNO0Lc',
     region: '室内'
   },
   {
-    title: '科学家精神教育基地',
-    img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
-    region: '室内'
+    title: '矿石标本',
+    img: './myData/img/bbks.png',
+    code: 'SG-yLLMlrtEiZt',
+    region: '室外'
   },
   {
-    title: '科学家精神教育基地',
-    img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
-    region: '室内'
+    title: '李四光像',
+    img: './myData/img/lsgdx.png',
+    code: 'SG-wmK4YbaSudf',
+    region: '室外'
   },
   {
-    title: '科学家精神教育基地',
-    img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
+    title: '未来广场',
+    img: './myData/img/wlgc.png',
+    code: 'SG-6afCSVCf9g3',
     region: '室外'
   },
   {
-    title: '科学家精神教育基地',
-    img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
+    title: '石碑',
+    img: './myData/img/sb.png',
+    code: 'SG-n8oFo3HoKOR',
     region: '室外'
   },
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
+    code: 'SG-eIO0OyK0Iuk-07',
     region: '室外'
   },
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
+    code: 'SG-eIO0OyK0Iuk-08',
     region: '室外'
   },
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
+    code: 'SG-eIO0OyK0Iuk-09',
     region: '室内'
   },
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-03',
+    code: 'SG-eIO0OyK0Iuk-00',
     region: '室内'
   }
 ]

src/pages/A2layout/components/Look/index.module.scss

@@ -126,6 +126,19 @@
         height: 600px;
         background: url('../../../../assets/img/detailBg.png') no-repeat;
         background-size: 100% 100%;
+        position: relative;
+        .fullscreen {
+          position: absolute;
+          top: 30px;
+          right: 30px;
+          width: 30px;
+          height: 30px;
+          z-index: 100;
+          & > img {
+            width: 100%;
+            height: 100%;
+          }
+        }
         iframe {
           transform: scale(0.95);
           width: 100%;
@@ -190,19 +203,33 @@
       }
       .detail {
         width: 100%;
-        height: 0;
-        flex: 1;
+        height: 100%;
         display: flex;
         align-items: center;
         flex-direction: column;
         justify-content: center;
         padding-bottom: 0;
+        gap: 0;
         background: url('../../../../assets/img/detailBg_M.png') no-repeat;
         background-size: 100% 100%;
         .left {
           background: none;
           width: 100%;
           height: 100%;
+          position: relative;
+          .fullscreen {
+            position: absolute;
+            top: auto;
+            bottom: 20px;
+            right: 25px;
+            width: 20px;
+            height: 20px;
+            z-index: 100;
+            & > img {
+              width: 100%;
+              height: 100%;
+            }
+          }
           iframe {
             transform: scale(1);
             width: 100%;

src/pages/A2layout/components/Look/index.tsx

@@ -8,12 +8,40 @@ import 'swiper/css/pagination'
 import 'swiper/css/navigation'
 
 import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'
-function Look({ setIsHideSider }: { setIsHideSider: (isHideSider: boolean) => void }) {
+function Look({ style, setIsHideSider }: { style: React.CSSProperties; setIsHideSider: (isHideSider: boolean) => void }) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
   const [selectIndex, setSelectIndex] = useState<number | null>(null)
   const swiperRef = useRef<any>(null)
+  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.look}>
+    <div className={styles.look} style={style}>
       {/* 顶部仅在pc端显示 */}
       <div className='top'>
         <div className='logo'>
@@ -90,9 +118,14 @@ function Look({ setIsHideSider }: { setIsHideSider: (isHideSider: boolean) => vo
           <div className='back' onClick={() => { setSelectIndex(null); setIsHideSider(false) }}>
             <img src={require('@/assets/img/back.png')} alt='' />
           </div>
+
           <div className='detail'>
             <div className='left'>
+              <div className='fullscreen' onClick={toggleFullscreen}>
+                <img src={require('@/assets/img/enlarge_on.png')} alt='' />
+              </div>
               <iframe
+                ref={iframeRef}
                 title='3D Model'
                 src={selectIndex !== null ? oreData[selectIndex].modelSrc : ''}
                 allow='src'

src/pages/A2layout/components/Scenes/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { useHistory } from 'react-router-dom'
 
-function Scenes() {
+function Scenes({ style }: { style: React.CSSProperties }) {
   const [activeTab, setActiveTab] = useState('全部')
   const [sceneData2, setSceneData2] = useState<{ title: string; img: string; code: string; region: string; }[]>([])
   const history = useHistory()
@@ -17,7 +17,7 @@ function Scenes() {
     }
   }, [activeTab])
   return (
-    <div className={styles.scenes}>
+    <div className={styles.scenes} style={style}>
       <div className='top'>
         <div className='logo'><img src={require('@/assets/img/sceneLogo.png')} alt="" /></div>
         <div className="title">十大场景</div>
@@ -29,7 +29,7 @@ function Scenes() {
         </div>
       </div>
       <div className='content'>{sceneData2.map((item) => (
-        <div className="sceneCard" key={item.code} onClick={() => goToScene(item.code)}>
+        <div className="sceneCard" key={item.code} onClick={() => window.open(`https://laser.4dkankan.com/index.html?m=${item.code}&lang=zh#/`, '_blank')}>
           <div className="pic"><img src={item.img} alt="" /></div>
           <div className="text">{item.title}</div>
         </div>

src/pages/A2layout/index.tsx

@@ -39,33 +39,33 @@ function A2layout() {
   return (
     <div className={styles.A2layout}>
       <div className='main'>
-        {siderActive === 'videoIntro' && (
-          <div className='video-container'>
 
-            <video loop playsInline className='background-video'>
-              <source src={require('../../assets/bgVideo.mp4')} type='video/mp4' />
-              您的浏览器不支持视频播放
-            </video>
-            <div
-              className='mask'
-              onClick={handlePlayClick}
-              style={{ opacity: isPlaying ? 0 : 1 }}
-            >
-              <img src={require('@/assets/img/play.png')} alt='' />
-            </div>
-            <div className='top'>
-              <div className='logo'>
-                <img src={require('@/assets/img/sceneLogo.png')} alt='' />
-              </div>
-              <div className='title'>视频介绍</div>
-            </div>
-            <div className="back" onClick={() => history.push('/')} >
-              <img src={require('@/assets/img/back.png')} alt='' />
+        <div className='video-container' style={{ display: siderActive === 'videoIntro' ? 'flex' : 'none' }}>
+
+          <video loop playsInline className='background-video'>
+            <source src={require('../../assets/bgVideo.mp4')} type='video/mp4' />
+            您的浏览器不支持视频播放
+          </video>
+          <div
+            className='mask'
+            onClick={handlePlayClick}
+            style={{ opacity: isPlaying ? 0 : 1 }}
+          >
+            <img src={require('@/assets/img/play.png')} alt='' />
+          </div>
+          <div className='top'>
+            <div className='logo'>
+              <img src={require('@/assets/img/sceneLogo.png')} alt='' />
             </div>
+            <div className='title'>视频介绍</div>
           </div>
-        )}
-        {siderActive === 'scenes' && <Scenes />}
-        {siderActive === 'look' && <Look setIsHideSider={setIsHideSider} />}
+          <div className="back" onClick={() => history.push('/')} >
+            <img src={require('@/assets/img/back.png')} alt='' />
+          </div>
+        </div>
+
+        <Scenes style={{ display: siderActive === 'scenes' ? 'flex' : 'none' }} />
+        <Look style={{ display: siderActive === 'look' ? 'flex' : 'none' }} setIsHideSider={setIsHideSider} />
       </div>
 
       <div className='sider' style={{ display: isHideSider ? 'none' : 'flex' }}>