gx

src/pages/A0base/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import isMobile from '../../utils/isMobile'
 // import A5Mobile from '../A5Mobile'
 import A1home from '../A1home'
@@ -16,11 +16,16 @@ function A0base() {
       return
     }
   }
+  useEffect(() => {
+    if (isMobile()) {
+      setShow(false)
+    }
+  }, [])
   return (
     <div className={styles.A0base}>
       {/* 初始封面 */}
       <A1home show={show} />
-      <div className='initPic' style={{ display: show ? 'flex' : 'none' }} onClick={handleClick}>
+      {!isMobile() && <div className='initPic' style={{ display: show ? 'flex' : 'none' }} onClick={handleClick}>
         <video
           ref={videoRef}
           autoPlay
@@ -34,7 +39,7 @@ function A0base() {
         </video>
         <img className='title' src={require('../../assets/img/title.png')} alt='' />
         <img className='button' onClick={() => setShow(false)} src={require('../../assets/img/button.png')} alt='' />
-      </div>
+      </div>}
     </div>
   )
 }

src/pages/A1home/components/Background/index.module.scss

@@ -7,6 +7,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  background-color: rgba(200, 202, 165, 1);
   & > img {
     width: 100%;
     height: 100%;

src/pages/A1home/components/Background/index.tsx

@@ -1,8 +1,14 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import isMobile from '@/utils/isMobile'
 
 const Background = ({ activeIndex }: { activeIndex: number }) => {
+  const [firstStyle, setFirstStyle] = useState(true)
+  useEffect(() => {
+    setTimeout(() => {
+      setFirstStyle(false)
+    }, 1000);
+  }, [activeIndex])
   return (
     <div className={styles.bg} id="bg">
       <img
@@ -21,6 +27,7 @@ const Background = ({ activeIndex }: { activeIndex: number }) => {
       />
       <img
         key="bg1"
+        style={firstStyle ? { opacity: 1 } : undefined}
         className={`bgImg3 ${activeIndex === 0 ? 'enter' : 'leave'}`}
         src={require(`../../image/caro1/${isMobile() ? 'bg1_M' : 'bg1'}.png`)}
         alt=''

src/pages/A1home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback } from 'react'
+import React, { useRef, useState, useCallback, useEffect } from 'react'
 import styles from './index.module.scss'
 import VerticalBanner from './components/Banner/banner'
 import Background from './components/Background'
@@ -29,6 +29,10 @@ function A1home({ show }: { show: boolean }) {
     closeSrc: ''
   })
 
+  useEffect(() => {
+    setActiveIndex(0)
+  }, [])
+
   const goTo = (index: number) => {
     sliderRef.current?.slickGoTo(index)
   }