更新首页

H5/package.json

@@ -30,6 +30,7 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
+    "swiper": "^11.2.10",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },

H5/public/myData.js

@@ -1,11 +1,13 @@
 // 自己电脑的路径地址
-const myUrlTemp1 = 'http://192.168.20.55:8080/myData/'
+const myUrlTemp1 = 'http://192.168.0.68:8080/myData/'
 // 打包到服务器的路径地址
 const myUrlTemp2 = '/zuan/myData/'
 
 const myDataTemp = {
   // 首页封面图
   homeBg: 'img/homeBg.jpg',
+  // 背景图深色
+  homeBgDark: 'img/homeBgDark.png',
   // 首页顶部图
   homeTitleImg: 'img/homeTitleImg.png',
   // 名字背景图
@@ -176,7 +178,7 @@ const myDataTemp = {
       age: '', //年代
       level: '' //级别
     },
-   {
+    {
       id: 7, // id唯一值，不重复
       name: '三牙轮钻头', //钻头名称
       cover: 'model/klmy56-4.png', //外面的封面图地址
@@ -204,7 +206,7 @@ const myDataTemp = {
       age: '', //年代
       level: '' //级别
     },
- {
+    {
       id: 8, // id唯一值，不重复
       name: '三牙轮钻头', //钻头名称
       cover: 'model/klmy56-7.png', //外面的封面图地址
@@ -232,7 +234,7 @@ const myDataTemp = {
       age: '', //年代
       level: '' //级别
     },
-	 {
+    {
       id: 9, // id唯一值，不重复
       name: '三牙轮钻头', //钻头名称
       cover: 'model/klmy56-8.png', //外面的封面图地址
@@ -288,7 +290,7 @@ const myDataTemp = {
       age: '', //年代
       level: '' //级别
     },
-	    {
+    {
       id: 11, // id唯一值，不重复
       name: '三牙轮钻头', //钻头名称
       cover: 'model/klmy56-11.png', //外面的封面图地址
@@ -316,7 +318,7 @@ const myDataTemp = {
       age: '', //年代
       level: '' //级别
     },
-	{
+    {
       id: 12, // id唯一值，不重复
       name: 'PDC钻头', //钻头名称
       cover: 'model/klmy56-5.png', //外面的封面图地址

H5/src/App.tsx

@@ -13,6 +13,7 @@ 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`]
 
@@ -64,6 +65,7 @@ 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/A3banner/index.module.scss

@@ -0,0 +1,60 @@
+.A3banner {
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+
+  :global {
+    .topPic{
+      width: 100%;
+      height: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      & >img{
+        width: 75%;
+        object-fit: contain;  
+      }
+    }
+    .swiper_container{
+      width: 100%;
+      height: 50%;
+      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;
+        }
+      }
+    }
+    .contentTxt{
+      width: 100%;
+      height: 30%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 30px;
+      padding: 0 20px;
+      .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/A3banner/index.tsx

@@ -0,0 +1,74 @@
+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

H5/src/utils/history.ts

@@ -30,6 +30,7 @@ export type HomeDataRow = {
 
 export const myData: {
   homeBg: string
+  homeBgDark: string
   homeTitleImg: string
   nameImg: string
   infoImg: string

H5/yarn.lock

@@ -9325,6 +9325,11 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^11.2.10:
+  version "11.2.10"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-11.2.10.tgz#ed0b17286b56f7fe8d4b46ed61e6e0bd8daaccad"
+  integrity sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz"