2d,3d展示

public/myData/data.js

@@ -1,59 +1,196 @@
 const oreData = [
   {
-    title: '牡丹石',
-    img: './myData/img/item1.png',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-mds',
+    title: '印章（臣林则徐少穆）',
+    img: './myData/img/lzx01.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx01',
     year: '清',
-    texture: '白银',
-    size: '高5.5、宽5厘米，底长2.1、底宽1.8厘米，重量100克。 ',
-    type: '二维'
+    texture: '质地：石',
+    size: '长40cm，宽2.7cm，厚1.2cm，重34g',
+    type: '三维'
   },
   {
-    title: '角砾岩型金矿',
-    img: './myData/img/item2.png',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-jlyxjk',
+    title: '印章（身行万里半天下）',
+    img: './myData/img/lzx02.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx02',
     year: '清',
-    texture: '青铜青铜青铜青铜青铜青铜青铜青铜青铜青铜青铜青铜',
-    size: '高5.5、宽5厘米，底长2.1、底宽1.8厘米，重量100克。 ',
+    texture: '质地：石',
+    size: '长10cm，宽3.2cm，厚3.1cm，重286.5g',
     type: '三维'
   },
   {
-    title: '伊源玉',
-    img: './myData/img/item3.png',
-    modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-yyy',
+    title: '吸大麻烟具（1号）',
+    img: './myData/img/lzx03-1.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx03',
     year: '清',
-    texture: '白银',
-    size: '高5.5、宽5厘米，底长2.1、底宽1.8厘米，重量100克。 ',
+    texture: '质地：木、陶',
+    size: '长27.3cm，重36g',
     type: '三维'
-  }
-]
-
-const videoData = [
+  },
+  {
+    title: '吸大麻烟具（2号）(XYL0087)',
+    img: './myData/img/lzx04.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx04',
+    year: '清',
+    texture: '质地：葫芦、塑料',
+    size: '长29cm，重54.5g',
+    type: '三维'
+  },
   {
-    title: '视频名称1',
-    src: './myData/video/video1.mp4'
+    title: '铁镐',
+    img: './myData/img/lzx05.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx05',
+    year: '清',
+    texture: '质地：铁',
+    size: '',
+    type: '三维'
   },
   {
-    title: '视频名称2',
-    src: './myData/video/video2.mp4'
+    title: '清高圈足黄釉饰陶灯',
+    img: './myData/img/lzx06.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx06',
+    year: '清',
+    texture: '质地：陶',
+    size: '高15.3，口径6.1，底径9.8cm；重650g',
+    type: '三维'
   },
   {
-    title: '视频名称3',
-    src: './myData/video/video3.mp4'
-  }
-]
-
-const recordData = [
+    title: '琉璃鼻烟壶',
+    img: './myData/img/lzx07.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx07',
+    year: '清',
+    texture: '质地：',
+    size: '',
+    type: '三维'
+  },
+  {
+    title: '清包铜骨质烟枪',
+    img: './myData/img/lzx08.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx08',
+    year: '清',
+    texture: '质地：骨、铜',
+    size: '长43.3cm,重 400.5g',
+    type: '三维'
+  },
+  {
+    title: '吸食鸦片铜灯（带玻璃罩）',
+    img: './myData/img/lzx09-2.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx09',
+    year: '清',
+    texture: '质地：铜',
+    size: '底径11.5cm，高20cm，重342g',
+    type: '三维'
+  },
+  {
+    title: '鸦片灯',
+    img: './myData/img/lzx10.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx10',
+    year: '清',
+    texture: '质地：铜',
+    size: '底径11.5cm，高20cm，重342g',
+    type: '三维'
+  },
+  {
+    title: '烟管',
+    img: './myData/img/lzx11-1.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx11',
+    year: '清',
+    texture: '质地：铜',
+    size: '长22.5cm；口径2.6cm；嘴径1.2cm；115g',
+    type: '三维'
+  },
+  {
+    title: '琉璃鼻烟壶',
+    img: './myData/img/lzx12.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx12',
+    year: '清',
+    texture: '质地：玻璃',
+    size: '通高6.5、宽5厘米，底长2.2、底宽1.4厘米，重量60克',
+    type: '三维'
+  },
+  {
+    title: '鎏金鼻烟壶',
+    img: './myData/img/lzx13.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx13',
+    year: '清',
+    texture: '质地：',
+    size: '通高6.2厘米，底长1.7、底宽1.2厘米，重量70克',
+    type: '三维'
+  },
+  {
+    title: '琉璃鼻烟壶',
+    img: './myData/img/lzx14.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx14',
+    year: '清',
+    texture: '质地：',
+    size: '通高5.8、宽3、厚2.1厘米，重量6克',
+    type: '三维'
+  },
+  {
+    title: '银鼻烟壶',
+    img: './myData/img/lzx15.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx15',
+    year: '清',
+    texture: '质地：铜',
+    size: '通高6.5、宽5厘米，底长2.2、底宽1.4厘米，重量60克',
+    type: '三维'
+  },
   {
-    title: '记录1',
-    src: './myData/video/video1.mp4'
+    title: '圆形铜鼻烟壶',
+    img: './myData/img/lzx16.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx16',
+    year: '清',
+    texture: '质地：铜',
+    size: '通高5.3、宽3.4、厚1.5厘米，重量25克',
+    type: '三维'
   },
   {
-    title: '记录2',
-    src: './myData/video/video2.mp4'
+    title: '珐琅彩鼻烟壶',
+    img: './myData/img/lzx17.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx17',
+    year: '清',
+    texture: '质地：铜',
+    size: '高5.5、宽5厘米，底长2.1、底宽1.8厘米，重量100克',
+    type: '三维'
   },
   {
-    title: '记录3',
-    src: './myData/video/video3.mp4'
+    title: '玛瑙鼻烟壶',
+    img: './myData/img/18-1.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx18',
+    year: '清',
+    texture: '质地：玛瑙',
+    size: '高6.4厘米，重量105克',
+    type: '三维'
+  },
+  {
+    title: '鼻烟壶',
+    img: './myData/img/19.jpg',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/YLLZXJNG/Model.html?m=lzx19',
+    year: '清',
+    texture: '质地：玛瑙',
+    size: '',
+    type: '三维'
+  },
+  {
+    title: '鼻烟壶',
+    img: './myData/img/lzx01.jpg',
+    imgList: ['./myData/img2d/lzx01.jpg', './myData/img2d/lzx02.jpg'],
+    year: '清',
+    texture: '质地：玛瑙',
+    size: '高6.4厘米，重量105克',
+    type: '二维'
+  }
+]
+
+const videoData = [
+  {
+    title: '“数字林公·天山回响”AI形象复原展示视频',
+    src: './myData/video/1.mp4'
+  }
+]
+
+const recordData = [
+  {
+    title: '红色记录短片',
+    src: './myData/video/2.mp4'
   }
 ]

src/App.tsx

@@ -8,7 +8,9 @@ import AsyncSpinLoding from './components/AsyncSpinLoding'
 import LookDom from './components/LookDom'
 import UpAsyncLoding from './components/UpAsyncLoding'
 import MessageCom from './components/Message'
-
+import { Image } from 'antd'
+import store, { RootState } from './store'
+import { useSelector } from 'react-redux'
 import screenImg from '@/assets/img/landtip.png'
 
 const A1home = React.lazy(() => import('./pages/A1home'))
@@ -16,7 +18,7 @@ const A2layout = React.lazy(() => import('./pages/A2layout'))
 
 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')!
@@ -47,7 +49,7 @@ export default function App() {
       <AsyncSpinLoding />
 
       {/* 所有图片点击预览查看大图 */}
-      {/* <Image
+      <Image
         preview={{
           visible: lookBigImg.show,
           src: lookBigImg.url,
@@ -59,7 +61,7 @@ export default function App() {
             })
           }
         }}
-      /> */}
+      />
 
       {/* 上传附件的进度条元素 */}
       <UpAsyncLoding />

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

@@ -14,7 +14,7 @@
       display: flex;
       align-items: end;
       padding-bottom: 30px;
-      gap: 60px;
+      gap: 20px;
       .search {
         width: 250px;
         height: 40px;
@@ -172,7 +172,7 @@
         left: 3%;
         display: flex;
         align-items: center;
-        width: 300px;
+        width: 350px;
         height: 280px;
         background-color: rgba(251, 242, 227, 1);
         border: 1px solid rgba(230, 203, 160, 1);
@@ -197,11 +197,10 @@
         }
 
         .content {
-          width: 260px;
+          width: 350px;
           height: 100%;
           display: flex;
           flex-direction: column;
-          align-items: center;
           gap: 10px;
           & > div {
             width: 100%;
@@ -210,6 +209,8 @@
             letter-spacing: 1px;
           }
           .title {
+            text-align: left;
+            width: fit-content;
             height: 20px;
             font-size: 18px;
             font-weight: bold;
@@ -218,14 +219,14 @@
               content: '';
               position: relative;
               bottom: 8px;
-              left: -10px;
+              left: -10%;
               display: block;
-              width: 100px;
+              width: 120%;
               height: 10px;
               background-color: rgba(159, 91, 44, 0.5);
             }
           }
-          .time {
+          .texture {
             margin-top: 20px;
           }
           .size {
@@ -296,6 +297,134 @@
         }
       }
     }
+    .detail2 {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background-color: rgba(255, 251, 244, 1);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .swiper_container {
+        width: 50%;
+        height: 60%;
+        perspective: 1500px;
+        .swiper-slide-shadow-coverflow {
+          background-image: none;
+        }
+        .swiper-button-arr-custom {
+          width: 50px;
+          height: 65px;
+          &:after {
+            content: '';
+          }
+          & > img {
+            width: 50px;
+            height: 55px;
+            object-fit: cover;
+          }
+        }
+        .itemCard {
+          border-radius: 20px;
+          margin: 0 auto;
+          width: 90%;
+          height: 100%;
+          position: relative;
+          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: 93%;
+            background-color: rgba(241, 229, 208, 1);
+            border-radius: 20px;
+            & > img {
+              border-radius: 20px;
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              transition: all 0.3s ease;
+            }
+          }
+        }
+      }
+      .swiper-button-arr-custom {
+        left: 50%;
+        transform: translateX(-50%);
+        &:after {
+          content: '' !important;
+        }
+        &.swiper-button-prev {
+          transform: translate(-550px, -100px);
+        }
+        &.swiper-button-next {
+          transform: translate(550px, -100px);
+        }
+      }
+      .detail2Info {
+        width: 40%;
+        height: 20%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        & > div {
+          width: 100%;
+          font-size: 17px;
+          color: rgba(159, 91, 44, 1);
+          letter-spacing: 1px;
+        }
+        .title {
+          text-align: center;
+          width: fit-content;
+          height: 20px;
+          font-size: 20px;
+          font-weight: bold;
+          color: rgba(159, 91, 44, 1);
+          &::after {
+            content: '';
+            position: relative;
+            bottom: 8px;
+            left: -10%;
+            display: block;
+            width: 120%;
+            height: 10px;
+            background-color: rgba(159, 91, 44, 0.5);
+          }
+        }
+        .texture {
+          margin-top: 20px;
+        }
+        .size {
+          height: fit-content;
+        }
+      }
+      .close {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        width: 35px;
+        height: 35px;
+        background: url('../../../../assets/img/close.png') no-repeat center center;
+        background-size: 100% 100%;
+        cursor: pointer;
+        & > img {
+          width: 100%;
+          object-fit: contain;
+        }
+      }
+    }
   }
 }
 

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

@@ -1,8 +1,17 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import Select from 'antd/es/select'
 import Pagination from 'antd/es/pagination'
 import { isMobileFu } from '@/utils/history'
+import store from '@/store'
+
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'media-chrome';
+import 'swiper/css'
+import 'swiper/css/effect-coverflow'
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
+import { EffectCoverflow, Pagination as SwiperPagination, Navigation } from 'swiper/modules'
 function Appreciate({
   style,
   setHidenComplete
@@ -16,6 +25,7 @@ function Appreciate({
   const [searchText, setSearchText] = useState('')
   const [textureFilter, setTextureFilter] = useState('all')
   const [typeFilter, setTypeFilter] = useState('all')
+  const swiperRef = useRef<any>(null);
 
   useEffect(() => {
     if (currentIndex !== undefined) {
@@ -23,57 +33,67 @@ function Appreciate({
     } else {
       setHidenComplete(false)
     }
-
   }, [currentIndex, setHidenComplete])
 
   useEffect(() => {
-    let filteredData = oreData;
+    let filteredData = oreData
     if (textureFilter !== 'all') {
-      filteredData = filteredData.filter(item => item.texture === textureFilter);
+      filteredData = filteredData.filter(item => item.texture === textureFilter)
     }
     if (typeFilter !== 'all') {
-      filteredData = filteredData.filter(item => item.type === typeFilter);
+      filteredData = filteredData.filter(item => item.type === typeFilter)
     }
-    filteredData = filteredData.filter(item => item.title.includes(searchText));
-    setOreData1(filteredData);
-  }, [searchText, textureFilter, 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>}
+        {isMobileFu() && <div className='txt_A'>文物赏析</div>}
         <div className='search'>
-          <input type='text' value={searchText} onChange={e => setSearchText(e.target.value)} 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>
+
+        <div className='type'>
+          <div className='label'>文物类别：</div>
           <Select
-            defaultValue={textureFilter}
+            defaultValue={typeFilter}
             options={[
               { value: 'all', label: '全部' },
-              ...Array.from(new Set(oreData.map(item => item.texture)))
-                .map(texture => ({ value: texture, label: texture }))
+              ...Array.from(new Set(oreData.map(item => item.type))).map(type => ({
+                value: type,
+                label: type
+              }))
             ]}
-            onChange={value => setTextureFilter(value)}
+            onChange={value => setTypeFilter(value)}
           />
         </div>
-        <div className='type'>
-          <div className='label'>文物类别：</div>
+        <div className='texture'>
+          <div className='label'>质地：</div>
           <Select
-            defaultValue={typeFilter}
+            defaultValue={textureFilter}
             options={[
               { value: 'all', label: '全部' },
-              ...Array.from(new Set(oreData.map(item => item.type)))
-                .map(type => ({ value: type, label: type }))
+              ...Array.from(new Set(oreData.map(item => item.texture))).map(texture => ({
+                value: texture,
+                label: texture
+              }))
             ]}
-            onChange={value => setTypeFilter(value)}
+            onChange={value => setTextureFilter(value)}
           />
         </div>
+
         <div className='total'>文物总数：{oreData.length}件</div>
       </div>
       <div className='content'>
-        <div className="scroll">
+        <div className='scroll'>
           {oreData1.map((item, index) => (
             <div
               className={`item ${currentIndex === index ? 'active' : ''}`}
@@ -87,34 +107,125 @@ function Appreciate({
             </div>
           ))}
         </div>
-
       </div>
       <div className='page'>
         <Pagination defaultCurrent={1} total={50} />
       </div>
-      {currentIndex !== undefined && (
+      {currentIndex !== undefined && (oreData1[currentIndex].type === '三维' ? (
         <div className='detail'>
-          <iframe title='文物展示' src="https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=JN-RMYXjinianbei" allow="fullscreen" />
+          <iframe
+            title='文物展示'
+            src='https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=JN-RMYXjinianbei'
+            allow='fullscreen'
+          />
           <div className={`info ${isShowInfo ? 'showInfo' : 'hideInfo'}`}>
-            <div className='arrow' onClick={() => { isMobileFu() ? setIsShowInfo(true) : setIsShowInfo(false) }}>
-              <img src={require(`@/assets/img/${isMobileFu() ? 'up' : 'left'}.png`)} alt='' />
+            <div
+              className='arrow'
+              onClick={() => {
+                isMobileFu() ? setIsShowInfo(true) : setIsShowInfo(false)
+              }}
+            >
+              <img
+                src={require(`@/assets/img/${isMobileFu() ? 'up' : 'left'}.png`)}
+                alt=''
+              />
             </div>
-            <div className="content">
-              <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 className='content'>
+              <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='' />
+            <div
+              className='arrow arrowR'
+              onClick={() => {
+                isMobileFu() ? setIsShowInfo(false) : setIsShowInfo(true)
+              }}
+            >
+              <img
+                src={require(`@/assets/img/${isMobileFu() ? 'down' : 'right'}.png`)}
+                alt=''
+              />
             </div>
           </div>
           <div className='close' onClick={() => setCurrentIndex(undefined)}></div>
           {/* <div className='bigger' onClick={handleScrollLeft}></div>
           <div className='smaller' onClick={handleScrollRight}></div> */}
         </div>
-      )}
-    </div>
+      ) : (
+        <div className='detail2'>
+          <div className='close' onClick={() => setCurrentIndex(undefined)}></div>
+          <Swiper
+            ref={swiperRef}
+            loop={false}
+            loopPreventsSliding={false}
+            effect={'slide'}
+            grabCursor={true}
+            centeredSlides={true}
+            slidesPerView={'1'}
+            coverflowEffect={{
+              rotate: 0,
+              stretch: 0,
+              depth: 0,
+              modifier: 1,
+            }}
+            pagination={{ el: '.swiper-pagination', clickable: true }}
+            navigation={{
+              prevEl: '.swiper-button-prev.swiper-button-arr-custom',
+              nextEl: '.swiper-button-next.swiper-button-arr-custom',
+            }}
+            modules={[EffectCoverflow, SwiperPagination, Navigation]}
+            className='swiper_container'
+            onTransitionEnd={(swiper: unknown) => {
+              const swiperInternal = swiper as { loopFix: () => void }
+              swiperInternal.loopFix()
+            }}
+          >
+            {currentIndex !== undefined && oreData1[currentIndex].imgList?.map((item: string, index: number) => (
+              <SwiperSlide key={index}>
+                <div
+                  className='itemCard'
+                  key={index}
+                >
+                  <div className='itemImage'>
+
+                    <img
+                      onClick={() =>
+                        store.dispatch({
+                          type: 'layout/lookBigImg',
+                          payload: {
+                            url: item,
+                            show: true
+                          }
+                        })
+                      }
+                      src={item}
+                      alt=''
+                    />
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          {/* 添加左右箭头元素 */}
+          <div className="swiper-button-prev swiper-button-arr-custom">
+            <img src={require('@/assets/img/left.png')} alt="上一张" />
+          </div>
+          <div className="swiper-button-next swiper-button-arr-custom">
+            <img src={require('@/assets/img/right.png')} alt="下一张" />
+          </div>
+
+          <div className="detail2Info">
+            <div className="title">{oreData1[currentIndex]?.title}</div>
+            <div className="text">
+              <div className="texture">质地：{oreData1[currentIndex]?.texture}</div>
+              <div className="size">尺寸：{oreData1[currentIndex]?.size}</div>
+            </div>
+          </div>
+        </div>
+      ))
+      }
+    </div >
   )
 }
 

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

@@ -8,7 +8,7 @@ import 'swiper/css/pagination'
 import 'swiper/css/navigation'
 import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'
 
-function VideoList({ style, data }: { style?: React.CSSProperties, data: any[] }) {
+function VideoList({ style, data }: { style?: React.CSSProperties, data: { title: string, src: string }[] }) {
   const swiperRef = useRef<any>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [currentVideoSrc, setCurrentVideoSrc] = useState(data[0]?.src || './myData/video/video1.mp4');
@@ -56,7 +56,7 @@ function VideoList({ style, data }: { style?: React.CSSProperties, data: any[] }
           swiperInternal.loopFix()
         }}
       >
-        {data.map((item: any, index: any) => (
+        {data.map((item, index) => (
           <SwiperSlide key={index}>
             <div
               className='itemCard'

src/types/declaration.d.ts

@@ -11,7 +11,8 @@ declare module 'braft-utils'
 declare const oreData: {
   title: string
   img: string
-  modelSrc: string
+  modelSrc?: string
+   imgList?: string[]
   year: string
   texture: string
   size: string