点位背景更新

public/myData/data.js

@@ -24,7 +24,7 @@ const infoTemo = {
     three: [
       {
         // 封面图
-        pic: '',
+        pic: './myData/intro/intro1_thumb.png',
         // 标题
         title: '1948石碑',
         // 文字介绍
@@ -35,35 +35,35 @@ const infoTemo = {
         otherPic: []
       },
       {
-        pic: '',
+        pic: './myData/intro/intro1_thumb.png',
         title: '人民英雄纪念碑',
         text: '1949年10月24日，集宁战役开始，100多名革命先烈被派往集宁。',
         link: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=JN-RMYXjinianbei',
         otherPic: []
       },
       {
-        pic: '',
+        pic: './myData/intro/intro1_thumb.png',
         title: '英雄像',
         text: '1949年10月24日，集宁战役开始，100多名革命先烈被派往集宁。',
         link: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=JN-YXxiang',
-        otherPic: []
+        otherPic: ['./myData/intro/intro1_thumb.png', './myData/intro/intro1_thumb.png']
       }
     ],
     two: [
-      // {
-      //   pic: 'ore/ore2.png',
-      //   title: '1949年10月25日',
-      //   text: '1949年10月25日，集宁战役结束，100多名革命先烈被派往集宁。',
-      //   link: '',
-      //   otherPic: ['./myData/intro/intro1_thumb.png']
-      // },
-      // {
-      //   pic: './myData/intro/intro1_thumb.png',
-      //   title: '1949年10月24日',
-      //   text: '1949年10月24日，集宁战役开始，100多名革命先烈被派往集宁。',
-      //   link: '',
-      //   otherPic: ['./myData/intro/intro1_thumb.png']
-      // }
+      {
+        pic: 'ore/ore2.png',
+        title: '1949年10月25日',
+        text: '1949年10月25日，集宁战役结束，100多名革命先烈被派往集宁。',
+        link: '',
+        otherPic: ['./myData/intro/intro1_thumb.png']
+      },
+      {
+        pic: './myData/intro/intro1_thumb.png',
+        title: '1949年10月24日',
+        text: '1949年10月24日，集宁战役开始，100多名革命先烈被派往集宁。',
+        link: '',
+        otherPic: ['./myData/intro/intro1_thumb.png']
+      }
     ]
   },
   // 全景信息

src/pages/A2layout/index.module.scss

@@ -3,9 +3,12 @@
   height: 100%;
   :global {
     .bg {
-      width: 100%;
-      height: 100%;
+      width: 1920px;
+      height: 945px;
       background-color: #ccc;
+      background-image: url('../../assets/img/layoutBg.jpg');
+      background-size: 100% 100%;
+      position: relative;
     }
     .tabBar {
       position: fixed;

src/pages/A2layout/index.tsx

@@ -4,18 +4,19 @@ import Intro from '../components/Intro'
 import Look from '../components/Look'
 import isMobile from '../../utils/isMobile'
 import IntroM from '../components/IntroM'
-import Panoramic from '../components/Panoramic'
-
+import Dot from '../components/Dot'
+import { location } from './location'
 import { useNavigate } from 'react-router-dom'
 
 function A2layout() {
   const [currentActive, setCurrentActive] = useState('')
-  const [currentScene, setCurrentScene] = useState('p1')
   const navigate = useNavigate()
   return (
     <div className={styles.A2layout}>
       <div className='bg'>
-        <Panoramic currentScene={currentScene} setCurrentScene={setCurrentScene} />
+        {location.map((item) => (
+          <Dot key={item.name} name={item.name} transform={item.transform} />
+        ))}
       </div>
       <div className='tabBar'>
         <div

src/pages/A2layout/location.ts

@@ -0,0 +1,54 @@
+export const location = [
+  {
+    name: '1',
+    transform: 'translate(-374%, 337%)',
+  },
+  {
+    name: '4',
+    transform: 'translate(-167%, 733%)',
+  },
+  {
+    name: '5',
+    transform: 'translate(-37%, 550%)',
+  },
+  {
+    name: '6',
+    transform: 'translate(-39%, 129%)',
+  },
+  {
+    name: '9',
+    transform: 'translate(-269%, -475%)',
+  },
+  {
+    name: '10',
+    transform: 'translate(-221%, -930%)',
+  },
+  {
+    name: '11',
+    transform: 'translate(-178%, -1069%)',
+  },
+  {
+    name: '12',
+    transform: 'translate(-179%, -825%)',
+  },
+  {
+    name: '13',
+    transform: 'translate(99%, -685%)',
+  },
+  {
+    name: '15',
+    transform: 'translate(-45%, -506%)',
+  },
+  {
+    name: '16',
+    transform: 'translate(146%, -750%)',
+  },
+  {
+    name: '18',
+    transform: 'translate(328%, -575%)',
+  },
+  {
+    name: '21',
+    transform: 'translate(328%, 24%)',
+  },
+]

src/pages/components/Dot/index.module.scss

@@ -9,6 +9,11 @@
   background-size: 100% 100%;
   gap: 5px;
   cursor: pointer;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  scale: 0.8;
   & > img {
     width: 13%;
     height: 60%;

src/pages/components/Dot/index.tsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import styles from './index.module.scss'
+import { useNavigate } from 'react-router-dom'
 type DotType = {
   name?: string
+  transform?: string
 }
-function Dot({ name = '点位名称' }: DotType) {
+function Dot({ name = '点位名称', transform = 'translate(-50%, -50%)' }: DotType) {
+  const navigate = useNavigate()
   return (
     <div
       className={styles.dot}
-
+      style={{ transform }}
+      onClick={() => navigate(`/pano?name=${name}`)}
     >
       <img src={require('@/assets/img/dot.png')} alt='' />
       <div className='dotName'>{name}</div>

src/pages/components/Look/DetailM.tsx

@@ -0,0 +1,81 @@
+import React, { useRef } from 'react'
+import { OreInfoType } from './index'
+import fullImg from '@/assets/img/full.png'
+
+export default function Detail({
+  isShow3,
+  data,
+  setShowDetail
+}: {
+  isShow3: boolean
+  data: OreInfoType
+  setShowDetail: (val: boolean) => void
+}) {
+  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='detailContainerM'>
+      <div className='imgBoxDM'>
+        {isShow3 ? (
+          <iframe ref={iframeRef} title='3dModal' src={data.link}></iframe>
+        ) : (
+          <img src={data.pic} alt='' />
+        )}
+        <img
+          className='fullImg'
+          src={fullImg}
+          alt=''
+          onClick={toggleFullscreen}
+        />
+      </div>
+      <div className='textBoxDM'>
+        <div className='picList'>
+          <div className='scroll'>
+            {data.otherPic.map((item, index) => (
+              <div className='picItem' key={index}>
+                <img src={item} alt='' />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className='detailTitle'>{data.title}</div>
+        <div className='txt'>{data.text}</div>
+
+
+      </div>
+      <div className='detailBackM' onClick={() => setShowDetail(false)}>
+        <img src={require('@/assets/img/back.png')} alt='' />
+      </div>
+    </div>
+  )
+}

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

@@ -290,6 +290,116 @@
       .contentM {
         display: none;
       }
+      .detailContainerM {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 85%;
+        background-color: rgba(0, 0, 0, 0.8);
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        align-self: flex-end;
+        padding: 15px;
+        gap: 10px;
+        .imgBoxDM {
+          width: 100%;
+          height: 42%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+          .fullImg {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+          }
+          & > iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+          }
+        }
+        .textBoxDM {
+          width: 100%;
+          height: 50%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 20px;
+          .detailTitle {
+            width: 100%;
+            height: 10%;
+            font-size: 18px;
+            letter-spacing: 1px;
+            font-weight: bold;
+            line-height: 42px;
+            color: #fff;
+            text-align: center;
+          }
+          .txt {
+            width: 100%;
+            height: 50%;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 32px;
+            color: #fff;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 2px;
+            }
+            &::-webkit-scrollbar-thumb {
+              background-color: rgba(177, 53, 53, 0.8);
+            }
+          }
+          .picList {
+            width: 100%;
+            height: 20%;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              display: none;
+            }
+            .scroll {
+              width: fit-content;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              gap: 14px;
+
+              .picItem {
+                width: 110px;
+                height: 60px;
+                & > img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                }
+              }
+            }
+          }
+        }
+        .detailBackM {
+          position: fixed;
+          top: 20px;
+          left: 20px;
+          width: 50px;
+          height: 50px;
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
     }
   }
 }

src/pages/components/Look/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import Detail from './Detail'
+import DetailM from './DetailM'
+import { isMobileFu } from '@/utils/history'
 
 export type OreInfoType = {
   pic: string
@@ -120,20 +122,25 @@ function Look({ setCurrentActive }: { setCurrentActive: (active: string) => void
         <div className='bottom'>
           这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语这是一段总结语
         </div>
-        {showDetail && <Detail isShow3={isShow3} data={currentData[currentIndex]} setShowDetail={setShowDetail} />}
+        {showDetail && (!isMobileFu() ? <Detail isShow3={isShow3} data={currentData[currentIndex]} setShowDetail={setShowDetail} /> : <DetailM isShow3={isShow3} data={currentData[currentIndex]} setShowDetail={setShowDetail} />)}
         {/* 移动端 */}
         <div className='contentM'>
           <div className='scroll'>
-            <div className='conItem'>
-              <div className='l_img'>
-                <img src='/myData/img/intro1.png' alt='' />
+            {currentData.map((item, index) => (
+              <div className='conItem' key={index} onClick={() => {
+                setCurrentIndex(index)
+                setShowDetail(true)
+              }}>
+                <div className='l_img'>
+                  <img src={item.pic} alt='' />
+                </div>
+                <div className='l_title'>{item.title}</div>
               </div>
-              <div className='l_title'>文物标题</div>
-            </div>
+            ))}
           </div>
         </div>
       </div>
-    </div>
+    </div >
   )
 }