pc

code/src/pages/A7duiHua/A7arr/index.module.scss

@@ -8,6 +8,8 @@
       margin: 0 auto 30px;
       width: auto;
       display: inline-block;
+      position: relative;
+      z-index: 100;
 
       .A7Arow {
         display: inline-block;
@@ -66,31 +68,100 @@
     .A7A3 {
       width: auto;
       margin: 0 auto;
+      position: relative;
 
       .adm-swiper {
-        width: 958px;
-        margin: 0 auto;
+        // width: 958px;
+        // margin: 0 auto;
 
         .A7A3box {
-          width: 958px;
-          margin: 0 auto;
+          // width: 958px;
+          // margin: 0 auto;
 
           .A7A3_1 {
             color: #FFE2A9;
-            font-size: 36px;
+            font-size: 34px;
             text-align: center;
-            margin-bottom: 36px;
+            margin-bottom: 30px;
           }
 
-          .A7A3Img {
+          .adm-image-img {
+            margin: 0 auto;
             width: 985px;
-            height: 721px;
-            object-fit: contain;
+            height: 600px;
+            object-fit: contain !important;
+          }
+
+          .A7loding {
+            height: 600px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: 'kai';
+            font-size: 36px;
+            letter-spacing: 4px;
+            color: var(--themeColor2);
+          }
+
+          .adm-image-tip {
+            width: 600px;
+            margin: 0 auto;
+            height: 600px;
+          }
+
+
+        }
+
+        .A7A3IndBox {
+          margin: 20px 0;
+          display: flex;
+          justify-content: center;
+
+          .A7zRow {
+            cursor: pointer;
+            animation: yunShan 2s infinite linear;
+            width: 20px;
+            height: 20px;
+            margin: 0 10px;
+            border-radius: 10px;
+            background-color: var(--themeColor2);
+
+            &:hover {
+              animation: none
+            }
+          }
+
+          .A7zRowAc {
+            background-color: #fff;
+            animation: none
           }
         }
       }
 
 
+      // 左右按钮
+      .A2y1Left {
+        cursor: pointer;
+        pointer-events: auto;
+        position: absolute;
+        z-index: 10;
+        top: 50%;
+        left: 380px;
+        width: 38px;
+        height: 67px;
+        animation: yunShan 2s infinite linear;
+      }
+
+      .A2y1Right {
+        left: auto;
+        right: 380px;
+      }
+
+      .A2y1LeftNo {
+        pointer-events: none;
+        animation: none;
+        opacity: 0.2;
+      }
 
 
     }

code/src/pages/A7duiHua/A7arr/index.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { duiHuaSonType } from '@/types'
 import { baseUrl } from '@/utils/http'
 import classNames from 'classnames'
 import { Swiper } from 'antd-mobile'
+import { Image } from 'antd-mobile'
 
 type Props = {
   arr: duiHuaSonType[]
@@ -18,10 +19,16 @@ function A7arr({ arr }: Props) {
 
   const [imgInd, setImgInd] = useState(0)
 
+  useEffect(() => {
+    if (swiperRef.current) swiperRef.current.swipeTo(imgInd)
+  }, [imgInd])
+
   const info = useMemo(() => {
     return arr.find((v, i) => i === topInd)!
   }, [arr, topInd])
 
+  const swiperRef = useRef<any>(null)
+
   return (
     <div className={styles.A7arr}>
       <div className='A7A1' style={{ backgroundImage: `url(${baseUrl}main/duiHua/arrBg.jpg)` }}>
@@ -45,12 +52,17 @@ function A7arr({ arr }: Props) {
 
       <div className='A7A3'>
         <Swiper
-          style={{
-            '--track-padding': '0 0 16px'
-          }}
+          allowTouchMove={false}
+          ref={swiperRef}
           indicator={(total: number, current: number) => (
             <div className='A7A3IndBox'>
-              {total},{current}
+              {info.imgArr.map((_, ii) => (
+                <div
+                  key={ii}
+                  onClick={() => setImgInd(ii)}
+                  className={classNames('A7zRow', ii === current ? 'A7zRowAc' : '')}
+                ></div>
+              ))}
             </div>
           )}
         >
@@ -58,11 +70,32 @@ function A7arr({ arr }: Props) {
             <Swiper.Item key={index2}>
               <div className='A7A3box'>
                 <div className='A7A3_1'>{item.name}</div>
-                <img className='A7A3Img' src={baseUrl + item.url} alt='' />
+                <Image
+                  lazy={true}
+                  src={baseUrl + item.url}
+                  placeholder={<div className='A7loding'>加载中...</div>}
+                />
               </div>
             </Swiper.Item>
           ))}
         </Swiper>
+
+        {/* 左右按钮 */}
+        <img
+          onClick={() => setImgInd(imgInd - 1)}
+          className={classNames('A2y1Left', imgInd === 0 ? 'A2y1LeftNo' : '')}
+          src={`${baseUrl}main/diao/left.png`}
+          alt=''
+        />
+        <img
+          onClick={() => setImgInd(imgInd + 1)}
+          className={classNames(
+            'A2y1Left A2y1Right',
+            imgInd >= info.imgArr.length - 1 ? 'A2y1LeftNo' : ''
+          )}
+          src={`${baseUrl}main/diao/right.png`}
+          alt=''
+        />
       </div>
     </div>
   )

code/src/pages/A7duiHua/A7page1/index.module.scss

@@ -30,5 +30,21 @@
       text-align: justify;
       line-height: 36px;
     }
+
+    .A7top4 {
+      width: 1533px;
+      height: 204px;
+      background-size: 100% 100%;
+      margin: 45px auto 0px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 140px;
+
+      &>p {
+        font-size: 24px;
+        line-height: 36px;
+      }
+    }
   }
 }

code/src/pages/A7duiHua/A7page1/index.tsx

@@ -19,6 +19,12 @@ function A7page1({ info }: Props) {
       <div className='A7top3' dangerouslySetInnerHTML={{ __html: info.txt }}></div>
 
       <A7arr arr={info.arr} />
+
+      {info.endTxt ? (
+        <div className='A7top4' style={{ backgroundImage: `url(${baseUrl}main/l2.png)` }}>
+          <p className='kaiFont' dangerouslySetInnerHTML={{ __html: info.endTxt }}></p>
+        </div>
+      ) : null}
     </div>
   )
 }

code/src/pages/A7duiHua/A7page2/index.module.scss

@@ -0,0 +1,56 @@
+.A7page2 {
+  width: 100%;
+  height: 3105px;
+  background-size: 100% 100%;
+  position: relative;
+  padding-top: 1400px;
+
+  :global {
+    .A7top1 {
+      width: 640px;
+      height: auto;
+      position: absolute;
+      top: 207px;
+      right: 319px;
+    }
+
+    .A7top2 {
+      position: absolute;
+      top: 136px;
+      left: 196px;
+    }
+
+    .A7top3 {
+      padding: 0 150px;
+      height: 500px;
+      display: flex;
+      margin-bottom: 140px;
+
+      .A7top3_1 {
+        width: 536px;
+        margin-right: 68px;
+        font-size: 30px;
+        line-height: 44px;
+        font-family: 'kai';
+        text-align: justify;
+      }
+
+      .A7top3_2 {
+        width: calc(100% - 604px);
+        display: flex;
+        justify-content: space-between;
+        align-content: space-between;
+        flex-wrap: wrap;
+
+        &>img {
+          display: block;
+          width: 300px;
+          height: 220px;
+          object-fit: cover;
+        }
+      }
+    }
+
+
+  }
+}

code/src/pages/A7duiHua/A7page2/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { duiHuaPageType } from '@/types'
+import { baseUrl } from '@/utils/http'
+import A7arr from '../A7arr'
+
+type Props = {
+  info: duiHuaPageType
+}
+
+function A7page2({ info }: Props) {
+  return (
+    <div
+      className={styles.A7page2}
+      style={{ backgroundImage: `url(${baseUrl}main/duiHua/${info.id}bg.jpg)` }}
+    >
+      <img className='A7top1' src={`${baseUrl}main/duiHua/${info.id}.png`} alt='' />
+      <img className='A7top2' src={`${baseUrl}main/duiHua/tit${info.id}.png`} alt='' />
+
+      <div className='A7top3'>
+        <div className='A7top3_1' dangerouslySetInnerHTML={{ __html: info.txt }}></div>
+        <div className='A7top3_2'>
+          {info.topImgArr ? (
+            <>
+              {info.topImgArr.map(url => (
+                <img key={url} src={baseUrl + url} alt='' />
+              ))}
+            </>
+          ) : null}
+        </div>
+      </div>
+
+      {/* <div className='A7top3' ></div> */}
+
+      <A7arr arr={info.arr} />
+    </div>
+  )
+}
+
+const MemoA7page2 = React.memo(A7page2)
+
+export default MemoA7page2

code/src/pages/A7duiHua/A7page3/index.module.scss

@@ -0,0 +1,33 @@
+.A7page3 {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  position: relative;
+
+  :global {
+
+
+    .A7top2 {
+      position: absolute;
+      top: 172px;
+      left: 208px;
+    }
+
+    .A7top3 {
+      position: absolute;
+      width: 587px;
+      top: 247px;
+      left: 427px;
+
+      &>p {
+        font-size: 30px;
+        line-height: 36px;
+        margin-bottom: 30px;
+        text-align: justify;
+        font-family: 'kai';
+      }
+    }
+
+
+  }
+}

code/src/pages/A7duiHua/A7page3/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { duiHuaPageType } from '@/types'
+import { baseUrl } from '@/utils/http'
+
+type Props = {
+  info: duiHuaPageType
+}
+
+function A7page3({ info }: Props) {
+  return (
+    <div
+      className={styles.A7page3}
+      style={{ backgroundImage: `url(${baseUrl}main/duiHua/${info.id}bg.jpg)` }}
+    >
+      <img className='A7top2' src={`${baseUrl}main/duiHua/tit${info.id}.png`} alt='' />
+      <div className='A7top3' dangerouslySetInnerHTML={{ __html: info.txt }}></div>
+    </div>
+  )
+}
+
+const MemoA7page3 = React.memo(A7page3)
+
+export default MemoA7page3

code/src/pages/A7duiHua/index.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames'
 import { myData } from '@/utils/http'
 import A7page1 from './A7page1'
 import Ztop from '@/components/Ztop'
+import A7page2 from './A7page2'
+import A7page3 from './A7page3'
 
 type Props = {
   ind: number
@@ -20,6 +22,8 @@ function A7duiHua({ ind, closeFu }: Props) {
       <Ztop backFu={closeFu} />
 
       {ind === 0 ? <A7page1 info={info} /> : null}
+      {ind === 1 ? <A7page2 info={info} /> : null}
+      {ind === 2 ? <A7page3 info={info} /> : null}
     </div>
   )
 }