更新数据

public/myData/data.js

@@ -19,6 +19,13 @@ const oreData = [
     activeImg: './myData/img/item3_ac.png',
     modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-yyy',
     text: '伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉'
+  },
+  {
+    title: '空铁黝银矿',
+    img: './myData/img/item4.png',
+    activeImg: './myData/img/item4_ac.png',
+    modelSrc: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HNKJ-ktyyk',
+    text: '伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉伊源玉'
   }
 ]
 
@@ -62,25 +69,25 @@ const sceneData = [
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-07',
+    code: '',
     region: '室外'
   },
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-08',
+    code: '',
     region: '室外'
   },
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-09',
+    code: '',
     region: '室内'
   },
   {
     title: '科学家精神教育基地',
     img: './myData/img/scenePic.png',
-    code: 'SG-eIO0OyK0Iuk-00',
+    code: '',
     region: '室内'
   }
 ]

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

@@ -40,10 +40,10 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      padding: 0 50px;
       padding-bottom: 50px;
       gap: 60px;
       .swiper_container {
-        display: none;
         width: 100%;
         height: 70%;
         perspective: 1500px;
@@ -196,11 +196,10 @@
         }
       }
       .content {
+        padding: 0;
         .swiper_container {
-          display: block;
-        }
-        .pcItem {
-          display: none;
+          height: 80%;
+          margin-top: 60px;
         }
       }
       .detail {

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

@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react'
 import styles from './index.module.scss'
+import { isMobileFu } from '@/utils/history'
 import { Swiper, SwiperSlide } from 'swiper/react'
 
 import 'swiper/css'
@@ -8,7 +9,13 @@ import 'swiper/css/pagination'
 import 'swiper/css/navigation'
 
 import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'
-function Look({ style, setIsHideSider }: { style: React.CSSProperties; 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)
@@ -24,18 +31,22 @@ function Look({ style, setIsHideSider }: { style: React.CSSProperties; setIsHide
     if (!document.fullscreenElement) {
       // 直接请求iframe元素全屏（而非内部文档）
       if (iframe.requestFullscreen) {
-        iframe.requestFullscreen().then(() => {
-        }).catch(err => {
-          console.error('进入全屏失败:', err)
-        })
+        iframe
+          .requestFullscreen()
+          .then(() => { })
+          .catch(err => {
+            console.error('进入全屏失败:', err)
+          })
       }
     } else {
       // 退出全屏
       if (document.exitFullscreen) {
-        document.exitFullscreen().then(() => {
-        }).catch(err => {
-          console.error('退出全屏失败:', err)
-        })
+        document
+          .exitFullscreen()
+          .then(() => { })
+          .catch(err => {
+            console.error('退出全屏失败:', err)
+          })
       }
     }
   }
@@ -52,70 +63,91 @@ function Look({ style, setIsHideSider }: { style: React.CSSProperties; setIsHide
       {selectIndex === null ? (
         <div className='content'>
           {/* 移动端 */}
-          <Swiper
-            ref={swiperRef}
-            loopPreventsSliding={false}
-            effect={'coverflow'}
-            grabCursor={true}
-            centeredSlides={true}
-            slidesPerView={'1'}
-            coverflowEffect={{
-              rotate: 0,
-              stretch: 0,
-              depth: 180,
-              modifier: 4,
-            }}
-            pagination={{ el: '.swiper-pagination', clickable: true }}
-            modules={[EffectCoverflow, Pagination, Navigation]}
-            className='swiper_container'
-          // onTransitionEnd={(swiper: unknown) => {
-          //   const swiperInternal = swiper as { loopFix: () => void }
-          //   swiperInternal.loopFix()
-          // }}
-          >
-            {oreData.map((item: any, index: any) => (
-              <SwiperSlide key={index}>
-                <div
-                  className='itemCard'
-                  key={index}
-                  // onMouseEnter={() => setHoveredIndex(index)}
-                  // onMouseLeave={() => setHoveredIndex(null)}
-                  onClick={() => { setSelectIndex(index); setIsHideSider(true) }}
-                >
-                  <div className='itemImage'>
-                    <img
-                      src={hoveredIndex === index ? item.activeImg : item.img}
-                      alt={item.title}
-                    />
+          {isMobileFu() && (
+            <Swiper
+              ref={swiperRef}
+              loopPreventsSliding={false}
+              effect={'coverflow'}
+              grabCursor={true}
+              centeredSlides={true}
+              slidesPerView={'1'}
+              coverflowEffect={{
+                rotate: 0,
+                stretch: 0,
+                depth: 180,
+                modifier: 4
+              }}
+              pagination={{ el: '.swiper-pagination', clickable: true }}
+              modules={[EffectCoverflow, Pagination, Navigation]}
+              className='swiper_container'
+              // 添加Swiper尺寸观察器
+              observer={true}
+              observeParents={true}
+              // 初始化后强制更新布局
+              onInit={(swiper: any) => {
+                setTimeout(() => {
+                  swiper.update()
+                }, 0)
+              }}
+            >
+              {/* 保持原有的slide渲染代码不变 */}
+              {oreData.map((item, index) => (
+                <SwiperSlide key={index}>
+                  <div
+                    className='itemCard'
+                    key={index}
+                    // onMouseEnter={() => setHoveredIndex(index)}
+                    // onMouseLeave={() => setHoveredIndex(null)}
+                    onClick={() => {
+                      setSelectIndex(index)
+                      setIsHideSider(true)
+                    }}
+                  >
+                    <div className='itemImage'>
+                      <img
+                        src={hoveredIndex === index ? item.activeImg : item.img}
+                        alt={item.title}
+                      />
+                    </div>
+                    <div className='viewButton'>查看详情</div>
                   </div>
-                  <div className='viewButton'>查看详情</div>
-                </div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          )}
 
           {/* pc端 */}
-          {oreData.map((item: any, index: any) => (
-            <div
-              className='itemCard pcItem'
-              key={index}
-              onMouseEnter={() => setHoveredIndex(index)}
-              onMouseLeave={() => setHoveredIndex(null)}
-              onClick={() => { setSelectIndex(index); setIsHideSider(true) }}
-            >
-              <div className='itemImage'>
-                <img
-                  src={hoveredIndex === index ? item.activeImg : item.img}
-                  alt={item.title}
-                />
+          {!isMobileFu() &&
+            oreData.map((item, index) => (
+              <div
+                className='itemCard pcItem'
+                key={index}
+                onMouseEnter={() => setHoveredIndex(index)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                onClick={() => {
+                  setSelectIndex(index)
+                  setIsHideSider(true)
+                }}
+              >
+                <div className='itemImage'>
+                  <img
+                    src={hoveredIndex === index ? item.activeImg : item.img}
+                    alt={item.title}
+                  />
+                </div>
+                <div className='viewButton'>查看详情</div>
               </div>
-              <div className='viewButton'>查看详情</div>
-            </div>
-          ))}
+            ))}
         </div>
       ) : (
         <>
-          <div className='back' onClick={() => { setSelectIndex(null); setIsHideSider(false) }}>
+          <div
+            className='back'
+            onClick={() => {
+              setSelectIndex(null)
+              setIsHideSider(false)
+            }}
+          >
             <img src={require('@/assets/img/back.png')} alt='' />
           </div>
 

src/types/declaration.d.ts

@@ -8,7 +8,13 @@ declare module '*.svg'
 declare module 'js-export-excel'
 declare module 'braft-utils'
 
-declare const oreData
+declare const oreData: {
+  title: string
+  img: string
+  activeImg: string
+  modelSrc: string
+  text: string
+}[]
 declare const sceneData: {
   title: string
   img: string

src/utils/history.ts

@@ -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