fix

H5/src/App.tsx

@@ -13,7 +13,6 @@ import screenImg from '@/assets/img/landtip.png'
 
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A2details = React.lazy(() => import('./pages/A2details'))
-// const A3banner = React.lazy(() => import('./pages/A3banner'))
 
 // const scriptArr = [`${myUrl}videoJs/jsmpeg.min.js`, `${myUrl}videoJs/f-video.js`]
 
@@ -65,7 +64,6 @@ export default function App() {
               {/* <Route path='/codeSucc/:id' component={A3codeSucc} /> */}
               <Route path='/info/:id' component={A2details} />
               <Route path='/' component={A1home} exact />
-              {/* <Route path='/banner' component={A3banner} /> */}
             </Switch>
           </React.Suspense>
         </Router>

H5/src/pages/A1home/index.module.scss

@@ -38,9 +38,49 @@
       }
     }
 
-    .A1Text {
+    .swiper_container{
+      width: 100%;
       height: 30%;
-      background-color: green;
+      perspective:1000px;
+      .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;
+        }
+      }
+    }
+
+   .contentTxt{
+      width: 100%;
+      height: 30%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 30px;
+      padding: 0 20px;
+      opacity: 0;
+      transition: all 1.5s;
+      .title{
+        letter-spacing: 5px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #EFDBAC;
+      }
+      .txt{
+        text-indent: 2em;
+        font-size: 14px;
+        font-weight: 400;
+        color: #EFDBAC;
+      }
     }
 
     // 左右滑动盒子

H5/src/pages/A1home/index.tsx

@@ -5,7 +5,14 @@ import classNmaes from 'classnames'
 import A1info from './A1info'
 import { imgInitFu } from './data'
 import useMove from '@/components/useMove'
+import { Swiper, SwiperSlide } from 'swiper/react';
 
+import 'swiper/css';
+import 'swiper/css/effect-coverflow';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+
+import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
 declare global {
   //设置全局属性
   interface Window {
@@ -16,9 +23,31 @@ declare global {
 }
 
 function A1home() {
+
+  const [acId, setAcId] = useState(-1)
+
+  // useEffect(() => {
+  //   console.log('----', acId);
+
+  // }, [acId])
+
   // 当前索引
   const [index, setIndex] = useState(-1)
 
+  const timeRef = useRef(-1)
+
+  useEffect(() => {
+    if (index >= 0) {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setAcId(myData.homeData[index].id)
+        swiperRef.current.swiper.slideToLoop(myData.homeData.length - index - 1)
+        // console.log('当前索引', myData.homeData.length - index - 1);
+
+      }, 20)
+    }
+  }, [index])
+
   useEffect(() => {
     window.getIndexFu = index => {
       setIndex(index)
@@ -31,6 +60,7 @@ function A1home() {
   }, [])
 
   const moveRef = useRef<any>(null)
+  const swiperRef = useRef<any>(null)
 
   useEffect(() => {
     const urlAll = window.location.href
@@ -40,19 +70,13 @@ function A1home() {
         const id = Number(idArr[1])
         const index = myData.homeData.findIndex(v => v.id === id)
         // console.log('返回的索引', index)
+        swiperRef.current.swiper.slideToLoop(myData.homeData.length - index - 1)
         window.moveFu = val => {
           moveRef.current = val
-
           if ([1, 2, 3, 4, 5, 6].includes(index)) val.go(-index)
           else if ([7, 8, 9, 10, 11].includes(index)) {
-            const obj = {
-              11: 1,
-              10: 2,
-              9: 3,
-              8: 4,
-              7: 5
-            }
-            val.go(Reflect.get(obj, index))
+            const indexRes = myData.homeData.length - index
+            val.go(indexRes)
           }
         }
       }
@@ -68,6 +92,7 @@ function A1home() {
 
   const moveFu = useCallback((val: number) => {
     moveRef.current.go(val)
+    // val === 1 ? swiperRef.current.swiper.slideNext() : swiperRef.current?.swiper.slidePrev();
   }, [])
 
   // 点击进入详情页
@@ -76,20 +101,19 @@ function A1home() {
       const id = myData.homeData[index].id
       console.log(id)
 
-      // history.replace(`/info/${id}`)
+      history.replace(`/info/${id}`)
     }
   }, [index, isPcMoveFlag])
 
   // 打开详情
   const [open, setOpen] = useState({} as HomeDataRow)
-
   return (
     <div
       className={styles.A1home}
-      style={{ backgroundImage: `url(${myUrl + myData.homeBg})` }}
+      style={{ backgroundImage: `url(${myUrl + myData.homeBgDark})` }}
     >
       <div className='homeTitleImg'>
-        <img src={myUrl + myData.homeTitleImg} alt='' />
+        <img src={require('@/assets/img/title.png')} alt='' />
       </div>
 
       <div className='box11'>
@@ -111,8 +135,55 @@ function A1home() {
         <button className='left'>←</button>
         <button className='right'>→</button>
       </div> */}
-
-      <div className='A1Text'></div>
+      {/* {index >= 0 && <div className="contentTxt">
+        <div className="title">{myData.homeData[index].name}</div>
+        <div className="txt">{myData.homeData[index].txt}</div>
+      </div>} */}
+      <Swiper
+        ref={swiperRef}
+        loopPreventsSliding={false}
+        effect={'coverflow'}
+        grabCursor={true}
+        centeredSlides={true}
+        loop={true}
+        slidesPerView={'1'}
+        coverflowEffect={{
+          rotate: 0,
+          stretch: -60,
+          depth: 150,
+          modifier: 4,
+        }}
+        pagination={{ el: '.swiper-pagination', clickable: true }}
+        navigation={{
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+          clickable: true,
+        }}
+        modules={[EffectCoverflow, Pagination, Navigation]}
+        className="swiper_container"
+        onTransitionEnd={(swiper: unknown) => {
+          const swiperInternal = swiper as { loopFix: () => void }
+          swiperInternal.loopFix()
+        }}
+      >
+        {
+          myData.homeData.slice().reverse().map((item, index) => (
+            <SwiperSlide key={item.id}>
+              {/* <img
+                hidden={acId !== item.id}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'contain',
+                }} src={myUrl + item.cover} alt="slide_image" /> */}
+              {index >= 0 && <div className="contentTxt" style={{ opacity: acId === item.id ? '1' : '0' }} >
+                <div className="title">{myData.homeData[index].name}</div>
+                <div className="txt">{myData.homeData[index].txt}</div>
+              </div>}
+            </SwiperSlide>
+          ))
+        }
+      </Swiper>
 
       {/* 左右滑动 */}
       <div