|
@@ -1,74 +0,0 @@
|
|
|
-import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
-import styles from './index.module.scss'
|
|
|
-import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
|
|
|
-import classNmaes from 'classnames'
|
|
|
-
|
|
|
-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';
|
|
|
-function A3banner() {
|
|
|
- const imgArr = myData.homeData.map((item) => myUrl + item.cover)
|
|
|
-
|
|
|
- console.log(imgArr, 'imgArr')
|
|
|
- const [curIndex, setCurIndex] = useState(0)
|
|
|
- return (
|
|
|
- <div className={styles.A3banner} style={{ backgroundImage: `url(${myUrl + myData.homeBgDark})` }}>
|
|
|
- <div className="topPic"><img src={require('@/assets/img/title.png')} alt="" /></div>
|
|
|
- <Swiper
|
|
|
- effect={'coverflow'}
|
|
|
- grabCursor={true}
|
|
|
- centeredSlides={true}
|
|
|
- loop={true}
|
|
|
- slidesPerView={'auto'}
|
|
|
- coverflowEffect={{
|
|
|
- rotate: 0,
|
|
|
- stretch: 0,
|
|
|
- depth: 150,
|
|
|
- modifier: 4,
|
|
|
- }}
|
|
|
- spaceBetween={-100}
|
|
|
- pagination={{ el: '.swiper-pagination', clickable: true }}
|
|
|
- navigation={{
|
|
|
- nextEl: '.swiper-button-next',
|
|
|
- prevEl: '.swiper-button-prev',
|
|
|
- clickable: true,
|
|
|
- }}
|
|
|
- modules={[EffectCoverflow, Pagination, Navigation]}
|
|
|
- className="swiper_container"
|
|
|
- onActiveIndexChange={(swiper: any) => {
|
|
|
- if (swiper.activeIndex !== undefined) {
|
|
|
- setCurIndex(swiper.realIndex); // 使用realIndex处理loop模式下的真实索引
|
|
|
- }
|
|
|
- }}
|
|
|
-
|
|
|
- >
|
|
|
- {
|
|
|
- imgArr.map((item, index) => (
|
|
|
- <SwiperSlide key={index}>
|
|
|
- <img style={{
|
|
|
- width: '100%',
|
|
|
- height: '100%',
|
|
|
- objectFit: 'contain',
|
|
|
- }} src={item} alt="slide_image" />
|
|
|
- </SwiperSlide>
|
|
|
- ))
|
|
|
- }
|
|
|
- <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>
|
|
|
- </Swiper>
|
|
|
- <div className="contentTxt">
|
|
|
- <div className="title">{myData.homeData[curIndex].name}</div>
|
|
|
- <div className="txt">{myData.homeData[curIndex].txt}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-const MemoA3banner = React.memo(A3banner)
|
|
|
-
|
|
|
-export default MemoA3banner
|