Inicio Explorar Ayuda
Registro Iniciar sesión
lanxin
/
YLLZX
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

添加类别

lanxin hace 1 mes
padre
c1fc549565
commit
81d00112d4
Se han modificado 20 ficheros con 174 adiciones y 224 borrados
Dividir vista Mostrar estadísticas de diff
  1. 1 1
      public/index.html
  2. 29 56
      public/myData/data.js
  3. BIN
      public/myData/img/item1.png
  4. BIN
      public/myData/img/item2.png
  5. BIN
      public/myData/img/item3.png
  6. 0 0
      public/myData/video/video1.mp4
  7. BIN
      public/myData/video/video2.mp4
  8. BIN
      public/myData/video/video3.mp4
  9. 0 2
      src/App.tsx
  10. 46 19
      src/pages/A2layout/components/Appreciate/index.module.scss
  11. 42 12
      src/pages/A2layout/components/Appreciate/index.tsx
  12. 10 12
      src/pages/A2layout/components/VideoList/index.module.scss
  13. 15 14
      src/pages/A2layout/components/VideoList/index.tsx
  14. 8 7
      src/pages/A2layout/components/VideoListM/index.tsx
  15. 2 2
      src/pages/A2layout/index.module.scss
  16. 4 4
      src/pages/A2layout/index.tsx
  17. 0 24
      src/pages/A3scene/index.module.scss
  18. 0 45
      src/pages/A3scene/index.tsx
  19. 17 4
      src/types/declaration.d.ts
  20. 0 22
      src/utils/history.ts

+ 1 - 1
public/index.html
Ver fichero 

@@ -13,7 +13,7 @@
 
     <!-- <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> -->
 
     <script src="./myData/data.js"></script>
 
 
-    <title>科学家精神教育基地</title>
 
+    <title>伊犁林则徐纪念馆红色基因库</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 29 - 56
public/myData/data.js
Ver fichero 

@@ -2,85 +2,58 @@ const oreData = [
 
   {
 
     title: '牡丹石',
 
     img: './myData/img/item1.png',
 
-    activeImg: './myData/img/item1_ac.png',
 
     modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-mds',
 
-    text: '123'
 
+    year: '清',
 
+    texture: '白银',
 
+    size: '高5.5、宽5厘米，底长2.1、底宽1.8厘米，重量100克。 ',
 
+    type: '二维'
 
   },
 
   {
 
     title: '角砾岩型金矿',
 
     img: './myData/img/item2.png',
 
-    activeImg: './myData/img/item2_ac.png',
 
     modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-jlyxjk',
 
-    text: '123'
 
+    year: '清',
 
+    texture: '青铜青铜青铜青铜青铜青铜青铜青铜青铜青铜青铜青铜',
 
+    size: '高5.5、宽5厘米，底长2.1、底宽1.8厘米，重量100克。 ',
 
+    type: '三维'
 
   },
 
   {
 
     title: '伊源玉',
 
     img: './myData/img/item3.png',
 
-    activeImg: './myData/img/item3_ac.png',
 
     modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-yyy',
 
-    text: '伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉'
 
+    year: '清',
 
+    texture: '白银',
 
+    size: '高5.5、宽5厘米，底长2.1、底宽1.8厘米，重量100克。 ',
 
+    type: '三维'
 
   }
 
 ]
 
 
-const sceneData = [
 
+const videoData = [
 
   {
 
-    title: '科学广场',
 
-    img: './myData/img/kxgc.png',
 
-    code: 'SG-ozwozjnnnTi',
 
-    region: '室外'
 
+    title: '视频名称1',
 
+    src: './myData/video/video1.mp4'
 
   },
 
   {
 
-    title: '地质展馆（院史馆）',
 
-    img: './myData/img/dzzg.png',
 
-    code: 'SG-S3nHAkNO0Lc',
 
-    region: '室内'
 
+    title: '视频名称2',
 
+    src: './myData/video/video2.mp4'
 
   },
 
   {
 
-    title: '矿石标本',
 
-    img: './myData/img/bbks.png',
 
-    code: 'SG-yLLMlrtEiZt',
 
-    region: '室外'
 
-  },
 
-  {
 
-    title: '李四光像',
 
-    img: './myData/img/lsgdx.png',
 
-    code: 'SG-wmK4YbaSudf',
 
-    region: '室外'
 
-  },
 
-  {
 
-    title: '未来广场',
 
-    img: './myData/img/wlgc.png',
 
-    code: 'SG-6afCSVCf9g3',
 
-    region: '室外'
 
-  },
 
-  {
 
-    title: '石碑',
 
-    img: './myData/img/sb.png',
 
-    code: 'SG-n8oFo3HoKOR',
 
-    region: '室外'
 
-  },
 
-  {
 
-    title: '科学家精神教育基地',
 
-    img: './myData/img/scenePic.png',
 
-    code: 'SG-eIO0OyK0Iuk-07',
 
-    region: '室外'
 
-  },
 
+    title: '视频名称3',
 
+    src: './myData/video/video3.mp4'
 
+  }
 
+]
 
+
 
+const recordData = [
 
   {
 
-    title: '科学家精神教育基地',
 
-    img: './myData/img/scenePic.png',
 
-    code: 'SG-eIO0OyK0Iuk-08',
 
-    region: '室外'
 
+    title: '记录1',
 
+    src: './myData/video/video1.mp4'
 
   },
 
   {
 
-    title: '科学家精神教育基地',
 
-    img: './myData/img/scenePic.png',
 
-    code: 'SG-eIO0OyK0Iuk-09',
 
-    region: '室内'
 
+    title: '记录2',
 
+    src: './myData/video/video2.mp4'
 
   },
 
   {
 
-    title: '科学家精神教育基地',
 
-    img: './myData/img/scenePic.png',
 
-    code: 'SG-eIO0OyK0Iuk-00',
 
-    region: '室内'
 
+    title: '记录3',
 
+    src: './myData/video/video3.mp4'
 
   }
 
 ]

BIN
public/myData/img/item1.png
Ver fichero


BIN
public/myData/img/item2.png
Ver fichero


BIN
public/myData/img/item3.png
Ver fichero


public/myData/video/bgVideo.mp4 → public/myData/video/video1.mp4
Ver fichero


BIN
public/myData/video/video2.mp4
Ver fichero


BIN
public/myData/video/video3.mp4
Ver fichero


+ 0 - 2
src/App.tsx
Ver fichero 

@@ -13,7 +13,6 @@ import screenImg from '@/assets/img/landtip.png'
 
 
 const A1home = React.lazy(() => import('./pages/A1home'))
 
 const A2layout = React.lazy(() => import('./pages/A2layout'))
 
-const A3scene = React.lazy(() => import('./pages/A3scene'))
 
 
 export default function App() {
 
   // 从仓库中获取查看图片的信息
 
@@ -40,7 +39,6 @@ export default function App() {
 
             {/* <Route path='/codeSucc/:id' component={A3codeSucc} /> */}
 
             <Route exact path='/' component={A1home} />
 
             <Route path='/layout' component={A2layout} />
 
-            <Route path='/scene' component={A3scene} />
 
           </Switch>
 
         </React.Suspense>
 
       </Router>

+ 46 - 19
src/pages/A2layout/components/Appreciate/index.module.scss
Ver fichero 

@@ -50,7 +50,8 @@
 
           cursor: pointer;
 
         }
 
       }
 
-      .texture {
 
+      .texture,
 
+      .type {
 
         width: 200px;
 
         height: 40px;
 
         color: rgba(159, 91, 44, 1);
 
@@ -71,6 +72,9 @@
 
             height: 40px;
 
 
             border-radius: 50px;
 
+            .ant-select-selection-placeholder {
 
+              padding-right: 9px;
 
+            }
 
             .ant-select-selection-item {
 
               line-height: 40px;
 
               text-align: center;
 
@@ -81,6 +85,11 @@
 
           }
 
         }
 
       }
 
+      .type {
 
+        .label {
 
+          width: 80px;
 
+        }
 
+      }
 
       .total {
 
         font-size: 16px;
 
         color: rgba(159, 91, 44, 1);
 
@@ -99,6 +108,8 @@
 
         height: 100%;
 
         display: flex;
 
         align-items: center;
 
+
 
+        align-content: flex-start;
 
         gap: 1.5%;
 
         flex-wrap: wrap;
 
       }
 
@@ -291,22 +302,25 @@
 
 @media screen and (max-width: 768px) {
 
   .Appreciate {
 
     padding: 0;
 
+    background-image: none;
 
+    background-color: rgba(255, 251, 244, 1);
 
     :global {
 
       .top_A {
 
         height: 100px;
 
-        gap: 10px;
 
-        justify-content: center;
 
+        gap: 8px;
 
         align-items: center;
 
-        padding: 0 10px;
 
+        padding: 0 20px;
 
+        flex-wrap: wrap;
 
         .txt_A {
 
-          width: 18%;
 
+          width: 75px;
 
           white-space: nowrap;
 
           font-size: 18px;
 
           font-weight: bold;
 
           color: rgba(159, 91, 44, 1);
 
         }
 
         .search {
 
-          width: 52%;
 
+          max-width: 60%;
 
+          width: calc(100% - 120px);
 
           height: 30px;
 
           background-color: rgba(248, 241, 226, 1);
 
           display: flex;
 
@@ -314,7 +328,7 @@
 
           border-radius: 25px;
 
           border: 1px solid rgba(248, 241, 226, 1);
 
           & > input {
 
-            width: 120px;
 
+            width: calc(100% - 45px);
 
             height: 30px;
 
             line-height: 30px;
 
             background-color: transparent;
 
@@ -335,8 +349,9 @@
 
             cursor: pointer;
 
           }
 
         }
 
-        .texture {
 
-          width: 30%;
 
+        .texture,
 
+        .type {
 
+          width: 48%;
 
           height: 30px;
 
           color: rgba(159, 91, 44, 1);
 
           display: flex;
 
@@ -350,7 +365,7 @@
 
           }
 
           .ant-select {
 
             color: rgba(159, 91, 44, 1);
 
-            width: 80px;
 
+            width: 100px;
 
             .ant-select-selector {
 
               background-color: rgba(248, 241, 226, 1);
 
               height: 30px;
 
@@ -366,6 +381,11 @@
 
             }
 
           }
 
         }
 
+        .type {
 
+          .label {
 
+            width: 80px;
 
+          }
 
+        }
 
         .total {
 
           display: none;
 
         }
 
@@ -383,12 +403,14 @@
 
           height: 100%;
 
           display: flex;
 
           align-items: center;
 
-          justify-content: center;
 
-          gap: 3%;
 
+          justify-content: flex-start;
 
+          align-content: flex-start;
 
+          gap: 5%;
 
           flex-wrap: wrap;
 
+          padding: 0 10px;
 
         }
 
         .item {
 
-          width: 46%;
 
+          width: 47%;
 
           height: 170px;
 
           border-radius: 10px;
 
           display: flex;
 
@@ -398,21 +420,26 @@
 
           .img {
 
             width: 100%;
 
             height: 80%;
 
-            background-color: rgba(248, 241, 226, 1);
 
+
 
+            border-radius: 10px;
 
+            background-color: rgba(250, 241, 227, 1);
 
             & > img {
 
               border-radius: 10px;
 
               width: 100%;
 
               height: 100%;
 
-              object-fit: cover;
 
+              object-fit: contain;
 
             }
 
           }
 
           .txt {
 
             width: 100%;
 
-            height: 10%;
 
+            height: 32px;
 
             line-height: 30px;
 
             text-align: center;
 
             font-size: 14px;
 
             color: rgba(159, 91, 44, 1);
 
+            white-space: nowrap;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
           }
 
         }
 
       }
 
@@ -424,7 +451,7 @@
 
           position: absolute;
 
           top: auto;
 
           bottom: -4%;
 
-          left: 3%;
 
+          left: 50%;
 
           display: flex;
 
           align-items: center;
 
           width: 90%;
 
@@ -491,7 +518,7 @@
 
           }
 
         }
 
         .hideInfo {
 
-          transform: translateY(250px);
 
+          transform: translate(-50%, 250px);
 
           transition: all 0.3s ease-in-out;
 
           .arrow {
 
             transform: rotate(0);
 
@@ -502,7 +529,7 @@
 
           }
 
         }
 
         .showInfo {
 
-          transform: translateY(0);
 
+          transform: translate(-50%, 0);
 
           transition: all 0.3s ease-in-out;
 
           .arrow {
 
             opacity: 0;

+ 42 - 12
src/pages/A2layout/components/Appreciate/index.tsx
Ver fichero 

@@ -12,6 +12,11 @@ function Appreciate({
 
 }) {
 
   const [currentIndex, setCurrentIndex] = useState<number | undefined>(undefined)
 
   const [isShowInfo, setIsShowInfo] = useState<boolean>(true)
 
+  const [oreData1, setOreData1] = useState(oreData)
 
+  const [searchText, setSearchText] = useState('')
 
+  const [textureFilter, setTextureFilter] = useState('all')
 
+  const [typeFilter, setTypeFilter] = useState('all')
 
+
 
   useEffect(() => {
 
     if (currentIndex !== undefined) {
 
       setHidenComplete(true)
 
@@ -21,39 +26,64 @@ function Appreciate({
 
 
   }, [currentIndex, setHidenComplete])
 
 
+  useEffect(() => {
 
+    let filteredData = oreData;
 
+    if (textureFilter !== 'all') {
 
+      filteredData = filteredData.filter(item => item.texture === textureFilter);
 
+    }
 
+    if (typeFilter !== 'all') {
 
+      filteredData = filteredData.filter(item => item.type === typeFilter);
 
+    }
 
+    filteredData = filteredData.filter(item => item.title.includes(searchText));
 
+    setOreData1(filteredData);
 
+  }, [searchText, textureFilter, typeFilter]);
 
 
   return (
 
     <div className={styles.Appreciate} style={style}>
 
       <div className='top_A'>
 
         {isMobileFu() && <div className="txt_A">文物赏析</div>}
 
         <div className='search'>
 
-          <input type='text' placeholder='请输入要查找的文字信息' />
 
+          <input type='text' value={searchText} onChange={e => setSearchText(e.target.value)} placeholder='请输入要查找的文字信息' />
 
           <img src={require('@/assets/img/search.png')} alt='' />
 
         </div>
 
         <div className='texture'>
 
           <div className='label'>质地：</div>
 
           <Select
 
-            defaultValue='lucy'
 
+            defaultValue={textureFilter}
 
+            options={[
 
+              { value: 'all', label: '全部' },
 
+              ...Array.from(new Set(oreData.map(item => item.texture)))
 
+                .map(texture => ({ value: texture, label: texture }))
 
+            ]}
 
+            onChange={value => setTextureFilter(value)}
 
+          />
 
+        </div>
 
+        <div className='type'>
 
+          <div className='label'>文物类别：</div>
 
+          <Select
 
+            defaultValue={typeFilter}
 
             options={[
 
-              { value: 'lucy', label: 'Lucy' },
 
-              { value: 'jack', label: 'Jack' }
 
+              { value: 'all', label: '全部' },
 
+              ...Array.from(new Set(oreData.map(item => item.type)))
 
+                .map(type => ({ value: type, label: type }))
 
             ]}
 
+            onChange={value => setTypeFilter(value)}
 
           />
 
         </div>
 
-        <div className='total'>文物总数：25件</div>
 
+        <div className='total'>文物总数：{oreData.length}件</div>
 
       </div>
 
       <div className='content'>
 
         <div className="scroll">
 
-          {[1, 2, 3, 4, 5, 6, 7, 8].map((item, index) => (
 
+          {oreData1.map((item, index) => (
 
             <div
 
               className={`item ${currentIndex === index ? 'active' : ''}`}
 
               key={index}
 
               onClick={() => setCurrentIndex(index)}
 
             >
 
               <div className='img'>
 
-                <img src={require('@/assets/img/homeBg.png')} alt='' />
 
+                <img src={item.img} alt='' />
 
               </div>
 
-              <div className='txt'>掩护也会用户优化以后养护</div>
 
+              <div className='txt'>{item.title}</div>
 
             </div>
 
           ))}
 
         </div>
 
@@ -70,10 +100,10 @@ function Appreciate({
 
               <img src={require(`@/assets/img/${isMobileFu() ? 'up' : 'left'}.png`)} alt='' />
 
             </div>
 
             <div className="content">
 
-              <div className="title">鼻烟壶</div>
 
-              <div className="time">年代：清</div>
 
-              <div className="texture">质地：硬</div>
 
-              <div className="size">尺寸：长120cm，宽60cm，高40cm，长120cm，宽60cm，高40cm，长120cm，宽60cm，高40cm，长120cm，宽60cm，高40cm</div>
 
+              <div className="title">{oreData1[currentIndex]?.title}</div>
 
+              <div className="time">年代：{oreData1[currentIndex]?.year}</div>
 
+              <div className="texture">质地：{oreData1[currentIndex]?.texture}</div>
 
+              <div className="size">尺寸：{oreData1[currentIndex]?.size}</div>
 
             </div>
 
             <div className="arrow arrowR" onClick={() => { isMobileFu() ? setIsShowInfo(false) : setIsShowInfo(true) }}>
 
               <img src={require(`@/assets/img/${isMobileFu() ? 'down' : 'right'}.png`)} alt='' />

+ 10 - 12
src/pages/A2layout/components/VideoList/index.module.scss
Ver fichero 

@@ -8,15 +8,6 @@
 
   background: url('../../../../assets/img/layoutBg.png') no-repeat;
 
   background-size: 100% 100%;
 
   :global {
 
-    .name {
 
-      width: 100%;
 
-      height: 7%;
 
-      text-align: center;
 
-      font-weight: 600;
 
-      font-size: 30px;
 
-      color: #9d0800;
 
-      letter-spacing: 5px;
 
-    }
 
     .swiper_container {
 
       width: 100%;
 
       height: 70%;
 
@@ -42,13 +33,20 @@
 
         width: 70%;
 
         height: 100%;
 
         position: relative;
 
-        background-color: #ccc;
 
         cursor: pointer;
 
         transition: transform 0.3s ease;
 
-
 
+        .name {
 
+          width: 100%;
 
+          height: 7%;
 
+          text-align: center;
 
+          font-weight: 600;
 
+          font-size: 30px;
 
+          color: #9d0800;
 
+          letter-spacing: 5px;
 
+        }
 
         .itemImage {
 
           width: 100%;
 
-          height: 100%;
 
+          height: 93%;
 
           & > video {
 
             border-radius: 20px;
 
             width: 100%;

+ 15 - 14
src/pages/A2layout/components/VideoList/index.tsx
Ver fichero 

@@ -8,14 +8,14 @@ import 'swiper/css/pagination'
 
 import 'swiper/css/navigation'
 
 import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'
 
 
-function VideoList({ style }: { style?: React.CSSProperties }) {
 
+function VideoList({ style, data }: { style?: React.CSSProperties, data: any[] }) {
 
   const swiperRef = useRef<any>(null);
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const [currentVideoSrc, setCurrentVideoSrc] = useState('/myData/video/bgVideo.mp4');
 
+  const [currentVideoSrc, setCurrentVideoSrc] = useState(data[0]?.src || './myData/video/video1.mp4');
 
   const modalVideoRef = useRef<HTMLVideoElement>(null);
 
 
-  const handleVideoClick = (src: string) => {
 
-    setCurrentVideoSrc(src);
 
+  const handleVideoClick = (index: number) => {
 
+    setCurrentVideoSrc(data[index]?.src);
 
     setIsModalOpen(true);
 
     setTimeout(() => {
 
       if (modalVideoRef.current) {
 
@@ -33,10 +33,10 @@ function VideoList({ style }: { style?: React.CSSProperties }) {
 
 
   return (
 
     <div className={styles.VideoList} style={style}>
 
-      <div className="name">视频名称</div>
 
+
 
       <Swiper
 
         ref={swiperRef}
 
-        loop={true}
 
+        loop={data.length > 4 ? true : false}
 
         loopPreventsSliding={false}
 
         effect={'coverflow'}
 
         grabCursor={true}
 
@@ -51,21 +51,22 @@ function VideoList({ style }: { style?: React.CSSProperties }) {
 
         pagination={{ el: '.swiper-pagination', clickable: true }}
 
         modules={[EffectCoverflow, Pagination, Navigation]}
 
         className='swiper_container'
 
-      // onTransitionEnd={(swiper: unknown) => {
 
-      //   const swiperInternal = swiper as { loopFix: () => void }
 
-      //   swiperInternal.loopFix()
 
-      // }}
 
+        onTransitionEnd={(swiper: unknown) => {
 
+          const swiperInternal = swiper as { loopFix: () => void }
 
+          swiperInternal.loopFix()
 
+        }}
 
       >
 
-        {[1, 2, 3, 4, 5, 6, 7, 8].map((item: any, index: any) => (
 
+        {data.map((item: any, index: any) => (
 
           <SwiperSlide key={index}>
 
             <div
 
               className='itemCard'
 
               key={index}
 
-              onClick={() => handleVideoClick('/myData/video/bgVideo.mp4')}
 
-            >
 
+              onClick={() => handleVideoClick(index)}
 
+            > <div className="name">{item?.title}</div>
 
               <div className='itemImage'>
 
+
 
                 <video
 
-                  src='/myData/video/bgVideo.mp4'
 
+                  src={item?.src}
 
                   preload="metadata"
 
                 />
 
               </div>

+ 8 - 7
src/pages/A2layout/components/VideoListM/index.tsx
Ver fichero 

@@ -3,24 +3,25 @@ import styles from "./index.module.scss";
 
 import { PlayCircleOutlined } from '@ant-design/icons';
 
 import store from '@/store'
 
 
-function VideoListM() {
 
+function VideoListM({ data, type }: { data: any[], type: string }) {
 
   return (
 
     <div className={styles.VideoListM}>
 
-      <div className="title">数字视频</div>
 
+      <div className="title">{type === 'video' ? '数字视频' : '记录短片'}</div>
 
       <div className="content">
 
         <div className="scroll">
 
-          {[1, 2, 3, 4, 5, 6].map((item, index) => (
 
+          {data.map((item, index) => (
 
             <div className="item" key={index} onClick={() => {
 
               store.dispatch({
 
                 type: 'layout/lookDom',
 
                 payload: {
 
-                  src: '/myData/video/bgvideo.mp4',
 
-                  type: 'video'
 
+                  src: item.src,
 
+                  type: 'video',
 
+                  flag: true
 
                 }
 
               })
 
             }}>
 
-              <video src='/myData/video/bgvideo.mp4'></video>
 
-              <div className="text">视频名称</div>
 
+              <video src={item.src}></video>
 
+              <div className="text">{item.name}</div>
 
               <div className="playIcon"><PlayCircleOutlined style={{ fontSize: '50px', color: 'rgba(240, 225, 202, 0.7)' }} rev='' /></div>
 
             </div>
 
           ))}

+ 2 - 2
src/pages/A2layout/index.module.scss
Ver fichero 

@@ -142,8 +142,8 @@
 
         bottom: 0;
 
         width: 100%;
 
         height: 130px;
 
-        background: url('../../assets/img/siderBg_M.png') repeat 100% 100%;
 
-        background-size: contain;
 
+        background: url('../../assets/img/siderBg_M.png') no-repeat 50% 0%;
 
+        background-size: cover;
 
         display: flex;
 
         align-items: center;
 
         justify-content: center;

+ 4 - 4
src/pages/A2layout/index.tsx
Ver fichero 

@@ -26,11 +26,11 @@ function A2layout() {
 
           style={{ display: siderActive === 'look' ? 'flex' : 'none' }}
 
           setHidenComplete={setHidenComplete}
 
         />
 
-        {siderActive === 'video' && (isMobileFu() ? <VideoListM key={1} /> : (
 
-          <VideoList key={1} />
 
+        {siderActive === 'video' && (isMobileFu() ? <VideoListM key={1} type='video' data={videoData} /> : (
 
+          <VideoList key={1} data={videoData} />
 
         ))}
 
-        {siderActive === 'record' && (isMobileFu() ? <VideoListM key={2} /> : (
 
-          <VideoList key={2} />
 
+        {siderActive === 'record' && (isMobileFu() ? <VideoListM key={2} type='record' data={recordData} /> : (
 
+          <VideoList key={2} data={recordData} />
 
         ))}
 
 
       </div>

+ 0 - 24
src/pages/A3scene/index.module.scss
Ver fichero 

@@ -1,24 +0,0 @@
 
-.A3scene {
 
-  width: 100%;
 
-  height: 100%;
 
-  position: relative;
 
-  :global {
 
-    .back {
 
-      position: absolute;
 
-      top: 20px;
 
-      left: 0;
 
-      background: url('../../assets/img/back1.png') no-repeat;
 
-      background-size: 100% 100%;
 
-      width: 150px;
 
-      height: 35px;
 
-      line-height: 40px;
 
-      text-align: center;
 
-      color: #fffddc;
 
-    }
 
-    iframe {
 
-      width: 100%;
 
-      height: 100%;
 
-      border: none;
 
-    }
 
-  }
 
-}

+ 0 - 45
src/pages/A3scene/index.tsx
Ver fichero 

@@ -1,45 +0,0 @@
 
-import React, { useEffect, useState } from "react"; // 新增useState
 
-import styles from "./index.module.scss";
 
-import { useHistory } from 'react-router-dom'
 
-
 
-function A3scene() {
 
-  const history = useHistory()
 
-  const [showBack, setShowBack] = useState(true);
 
-
 
-  const code = history.location.search.split('code=')[1]
 
-
 
-  useEffect(() => {
 
-    const handleMessage = (event: MessageEvent) => {
 
-      console.log('Received message:', event.data);
 
-      if (event.origin !== 'https://houseoss.4dkankan.com') return;
 
-      if (event.data.type === 'HIDE_BACK_BUTTON') {
 
-        setShowBack(false);
 
-      } else if (event.data.type === 'SHOW_BACK_BUTTON') {
 
-        setShowBack(true);
 
-      } else if (event.data.type === 'GO_BACK') {
 
-        history.push('/layout?siderActive=scenes')
 
-      }
 
-    };
 
-
 
-    window.addEventListener('message', handleMessage);
 
-    return () => {
 
-      window.removeEventListener('message', handleMessage);
 
-    };
 
-  }, [history]);
 
-
 
-  return (
 
-    <div className={styles.A3scene}>
 
-      {showBack && (
 
-        <div className="back">科学广场</div>
 
-      )}
 
-      <iframe
 
-        src={`https://houseoss.4dkankan.com/project/ScientistEducationBase/scene/index.html#/home?m=${code}`}
 
-        allow="src"
 
-        title="scene"
 
-      />
 
-    </div>
 
-  )
 
-}
 
-
 
-const MemoA3scene = React.memo(A3scene);
 
-export default MemoA3scene;

+ 17 - 4
src/types/declaration.d.ts
Ver fichero 

@@ -8,13 +8,26 @@ declare module '*.svg'
 
 declare module 'js-export-excel'
 
 declare module 'braft-utils'
 
 
-declare const oreData
 
-declare const sceneData: {
 
+declare const oreData: {
 
   title: string
 
   img: string
 
-  code: string
 
-  region: string
 
+  modelSrc: string
 
+  year: string
 
+  texture: string
 
+  size: string
 
+  type: string
 
 }[]
 
+declare const videoData: {
 
+  title: string
 
+  src: string
 
+}[]
 
+
 
+declare const recordData: {
 
+  title: string
 
+  src: string
 
+}[]
 
+
 
+
 
 
 
 declare namespace JSX {

+ 0 - 22
src/utils/history.ts
Ver fichero 

@@ -13,25 +13,3 @@ export const isMobileFu = () => {
 
   } else return false
 
 }
 
 
-export type A1listType = {
 
-  id: number
 
-  name: string
 
-  partOf: string
 
-  link: string
 
-  code: string
 
-  oldNum: number
 
-  newNum: number
 
-  changeSta: boolean
 
-  loc: 1
 
-  isSW?: boolean
 
-  type?: 'x1' | 'x2'
 
-}
 
-
 
-type MyInfoType = [{
 
-  title: string
 
-  img: string
 
-  activeImg: string
 
-  text: string
 
-}]
 
-
 
-export const myInfo: MyInfoType = oreData