featv1

package.json

@@ -12,6 +12,7 @@
     "@types/node": "^16.18.3",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
+    "@types/react-slick": "^0.23.13",
     "antd": "^5.8.3",
     "antd-mobile": "^5.30.0",
     "axios": "^1.1.3",
@@ -21,11 +22,13 @@
     "react-redux": "^8.0.4",
     "react-router-dom": "5.3",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.3",
     "react-sortablejs": "^6.1.4",
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
     "sass": "^1.55.0",
+    "slick-carousel": "^1.8.1",
     "swiper": "^9.1.0",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
@@ -62,4 +65,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

public/css/oldVer/main0.css

@@ -90,9 +90,12 @@ iframe {
   opacity: 0.1;
 }
 #closepop {
+  position: fixed;
+  top: 13%;
+  right: 18%;
   background: url(../../images/close1.png) no-repeat;
-  width: 30px;
-  height: 30px;
+  width: 48px;
+  height: 48px;
   cursor: pointer;
   text-indent: -999em;
   background-size: 100% 100%;
@@ -229,6 +232,7 @@ a {
 }
 @media screen and (max-width: 667px) {
   #closepop {
+    position: initial;
     width: 45px;
     height: 45px;
   }
@@ -289,4 +293,4 @@ a {
   .pinTop {
     top: 0px;
   }
-}
+}

public/index.html

@@ -8,7 +8,7 @@
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <title>武汉博物馆-琬琰英华</title>
+    <title>布达拉宫——来自高原的世界文化遗产</title>
 
     <!-- 大场景相关 -->
     <link rel="stylesheet" href="./css/oldVer/main0.css" />

public/js/Hot.js

@@ -53,9 +53,9 @@ window.initHot = function (model) {
     var src = ''
     var r = link.substring(link.indexOf('html') + 4),
       o = 'en' == manage.number('lang') ? '&lang=' + manage.number('lang') : ''
-      ; -1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
+    ;-1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
 
-    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/WuhanMuseum/hot')
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/BDLG/hot')
     // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
     // return src
   }
@@ -341,7 +341,7 @@ window.initHot = function (model) {
         if (media) {
           this.changeShineTex(media)
         } else {
-          this.styleImg = /* this.styleImg || */[]
+          this.styleImg = /* this.styleImg || */ []
           if (this.info.styleImg) {
             this.styleImg = this.info.styleImg.map(src => {
               return { src: /* manage.dealURL( */ src } //如果要dealURL,在predeal里
@@ -429,7 +429,7 @@ window.initHot = function (model) {
         {
           let action = CloneObject(settings.hotClickEvent.shine)
           if (info.actionType == 'noAction' || info.noAction) {
-            ; (action.examine = false), (action.openHot = false)
+            ;(action.examine = false), (action.openHot = false)
           } else if (info.actionType == 'dontExam') {
             action.examine = false
           }
@@ -1135,29 +1135,29 @@ window.initHot = function (model) {
       var popup = document.getElementById('popup')
 
       if (openHot) {
-        ; (g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
+        ;(g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
         var n = document.createElement('iframe')
 
         SoundManager.play('hot')
 
         var src = getLink(this.info.link)
         n.src = src
-          ; (n.id = 'id1'), (n.allowTransparency = 'true')
+        ;(n.id = 'id1'), (n.allowTransparency = 'true')
         var a = document.getElementById('id1')
         if (void 0 === a || null == a) {
           document.querySelector('.popup-content').appendChild(n)
           var s = !1
-            ; (window.loaddingSuccess = function () {
-              s = !0
-            }),
-              setTimeout(function e() {
-                if (s) {
-                  var t = document.querySelector('#id1').contentWindow.document
-                  t.querySelector('video') &&
-                    (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
-                    t.querySelector('audio') && t.querySelector('audio').play()
-                } else setTimeout(e, 300)
-              }, 800)
+          ;(window.loaddingSuccess = function () {
+            s = !0
+          }),
+            setTimeout(function e() {
+              if (s) {
+                var t = document.querySelector('#id1').contentWindow.document
+                t.querySelector('video') &&
+                  (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
+                  t.querySelector('audio') && t.querySelector('audio').play()
+              } else setTimeout(e, 300)
+            }, 800)
         }
       }
 
@@ -1203,7 +1203,7 @@ window.initHot = function (model) {
           var f = new THREE.Matrix4().lookAt(c.position, h, new THREE.Vector3(0, 1, 0))
           p.quaternion = new THREE.Quaternion().setFromRotationMatrix(f)
         }
-        ; (p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
+        ;(p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
         player.flyToNewMode(p)
       }
     }

public/showa/js/loadCAD.js

@@ -42,11 +42,12 @@ window.grendCAD = (function grendCAD() {
         position: absolute;
         right: 20px;
         top: 16px;
-        width: 200px;
+        width: 320px;
         height: 200px;
         background: rgba(0, 0, 0, .3);
         border-radius: 5px; 
         background-image: url('./images/map_1.png');
+        background-size: cover;
         path {
           opacity: 0;
         }

src/assets/styles/base.css

@@ -9,14 +9,14 @@ html {
   user-select: none;
 }
 body {
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
-    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
+  font-family: 'fzFont' !important;
 }
+/* 自定义字体名称 */
 @font-face {
   font-family: 'fzFont';
-  /* 自定义字体名称 */
-  src: url('../font/fzFont.TTF') format('truetype');
+  src: url('../font/ssxz.ttf') format('truetype');
 }
 a {
   text-decoration: none;
@@ -145,7 +145,7 @@ body,
   animation: likeMoveAc 2s linear forwards;
 }
 .room-label p {
-  color: #FDFBB2;
+  color: #fdfbb2;
 }
 @keyframes likeMoveAc {
   0% {
@@ -169,4 +169,4 @@ body,
   html .cad {
     top: 20px;
   }
-}
+}

src/pages/A2main/index.module.scss

@@ -12,23 +12,38 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 45px;
+      top: 38px;
       width: 80px;
       height: 37px;
       line-height: 30px;
       text-align: center;
       font-size: 14px;
-      color: #fff;
+      color: rgba(243, 230, 153, 1);
     }
 
     // 样式重置
     .pinBottom.left {
-      width: fit-content;
+      width: 70%;
+      height: 90px;
+      background: url(../../assets/img/bottomBar.png) no-repeat center;
+      background-size: contain;
       background-color: transparent;
       left: 20px;
+      display: flex;
+      align-items: center;
+      padding-bottom: 20px;
+      justify-content: center;
+
+      .splitImg {
+        width: 10px;
+        height: 100%;
+        object-fit: cover;
+        margin: 20px 0px 0px 40px;
+      }
     }
 
     #gui-modes-map {
+      margin-left: 85px;
       #play,
       #pause,
       #next,
@@ -42,6 +57,7 @@
         margin-left: 38px;
         background-color: transparent !important;
         position: relative;
+
         img {
           width: 48px;
           height: 48px;
@@ -80,7 +96,7 @@
 
     // 底部的位置
     .pinBottom {
-      bottom: 34px;
+      bottom: 26px;
     }
     .pinBottom.playing {
       bottom: 50px !important;
@@ -197,6 +213,78 @@
       }
     }
 
+    .sectionIndex {
+      position: fixed;
+      bottom: 20px;
+      right: 10px;
+      .sectionIndexImg {
+        width: 170px;
+        height: 100%;
+        object-fit: cover;
+        cursor: pointer;
+      }
+    }
+    .section {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 30000;
+      .sectionBox {
+        width: 100%;
+        height: 85%;
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        & > div {
+          width: 20%;
+          height: 100%;
+          background-size: contain;
+          p {
+            margin-top: 220px;
+            padding: 28px;
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 25px;
+            text-indent: 2em;
+          }
+        }
+        .section1 {
+          background: url(../../assets/img/section1.png) no-repeat;
+          p {
+            color: rgba(255, 244, 223, 1);
+          }
+        }
+        .section2 {
+          background: url(../../assets/img/section2.png) no-repeat;
+        }
+        .section3 {
+          background: url(../../assets/img/section3.png) no-repeat;
+          p {
+            color: rgba(247, 232, 207, 1);
+          }
+        }
+        .section4 {
+          background: url(../../assets/img/section4.png) no-repeat;
+          p {
+            color: #fff;
+          }
+        }
+      }
+      .sectionClose {
+        position: fixed;
+        top: 25px;
+        right: 90px;
+        cursor: pointer;
+      }
+    }
+
     // 移动端
 
     @media screen and (max-width: 1000px) {
@@ -206,11 +294,16 @@
         font-size: 10px;
       }
       #gui-modes-map {
+        background: url(../../assets/img/border-left.png) no-repeat;
+        background-size: 100% 100%;
         display: flex;
         justify-content: flex-end;
         align-items: center;
         flex-direction: column;
         gap: 30px;
+        margin: 0;
+        padding: 47px 0px;
+        width: 55px;
         #play,
         #pause,
         #next,
@@ -232,16 +325,27 @@
       }
 
       .pinBottom {
+        width: calc(100% - 35px) !important;
+        align-items: flex-end !important;
+        justify-content: space-between !important;
+        background: transparent !important;
         right: 20px;
+        padding: 0 !important;
+        .splitImg {
+          display: none;
+        }
       }
 
       .rightViewContainer {
+        width: 55px;
+        padding: 17px 0;
+        background: url(../../assets/img/border-right.png) no-repeat;
+        background-size: 100% 100%;
         display: flex;
         justify-content: flex-end;
         flex-direction: column;
         align-items: center;
         gap: 30px;
-        margin-bottom: -30px;
         .likeBox,
         #volume,
         #gui-fullscreen,
@@ -264,6 +368,10 @@
         }
       }
 
+      .sectionIndex {
+        display: none;
+      }
+
       .darkGlass {
         background-color: rgba(0, 0, 0, 0.5);
       }

src/pages/A3hotList/index.module.scss

@@ -18,8 +18,8 @@
       gap: 10px;
       width: 250px;
       height: 100%;
-      background: url('../../assets/img/hotlist_bg.png') center center;
-      background-size: cover;
+      background: url('../../assets/img/hotlist_bg.png') no-repeat;
+      background-size: 100% 100%;
       color: rgba(43, 31, 23, 0.9);
       font-size: 17px;
       font-weight: 500;
@@ -39,32 +39,32 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 100%;
+        width: 93%;
         height: fit-content;
-        padding: 4px 3px;
+        padding: 4px 10px;
         cursor: pointer;
         &:hover {
-          background-color: rgb(182, 154, 117);
+          background-color: rgb(192, 174, 154);
         }
       }
       .A3close {
         position: fixed;
         bottom: 0;
-        width: 250px;
-        height: 40px;
-        background-color: rgba(157, 135, 106, 0.9);
+        width: 90%;
+        height: 60px;
+        margin: 10px;
+        background-color: rgba(235, 219, 202, 1);
         border-top: 1px solid rgba(43, 31, 23, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
         &:hover {
           opacity: 1;
         }
         img {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 24px;
-          height: 24px;
+          width: 48px;
+          height: 48px;
           opacity: 0.6;
         }
       }
@@ -84,8 +84,6 @@
       .A3main {
         width: 100%;
         height: 100%;
-        background: url('../../assets/img/hotlist_bg.png') no-repeat center center;
-        background-size: cover;
         padding-bottom: 20px;
         .A3title {
           padding: 20px 0 10px 0;
@@ -99,13 +97,11 @@
           }
         }
         .A3close {
-          width: 100%;
+          bottom: -50px;
+          background-color: transparent;
           height: 40px;
-          background-color: rgba(157, 135, 106, 0.9);
-          border-top: 1px solid rgba(43, 31, 23, 0.1);
-          img {
-            width: 16px;
-            height: 16px;
+          & img {
+            opacity: 1;
           }
         }
       }

src/pages/A4base/components/banner.tsx

@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import Slider from 'react-slick'
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import classNames from 'classnames'
+import styles from './index.module.scss' // 自定义样式
+
+type Slide = {
+  id: number
+  background: string
+  content: React.ReactNode
+}
+
+const VerticalBanner: React.FC<{ slides: Slide[] }> = ({ slides }) => {
+  const sliderRef = useRef<Slider>(null)
+  const isScrolling = useRef(false)
+  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined)
+
+  // 垂直轮播配置
+  const settings = {
+    vertical: true,
+    verticalSwiping: true,
+    dots: true,
+    dotsClass: 'slick-dots vertical-dots', // 自定义垂直dots样式
+    infinite: true,
+    speed: 800,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    arrows: false,
+    autoplay: false,
+    adaptiveHeight: true,
+    initialSlide: 0,
+    afterChange: (index: number) => {
+      setActiveIndex(index)
+    }
+  }
+
+  // 处理滚轮事件
+  const handleWheel = useCallback((e: WheelEvent) => {
+    if (isScrolling.current) return
+
+    // 阻止页面默认滚动
+    e.preventDefault()
+
+    // 设置滚动锁定，避免连续触发
+    isScrolling.current = true
+    setTimeout(() => {
+      isScrolling.current = false
+    }, 1000) // 滚动动画期间锁定
+
+    // 根据滚轮方向切换幻灯片
+    if (e.deltaY > 0) {
+      sliderRef.current?.slickNext()
+    } else {
+      sliderRef.current?.slickPrev()
+    }
+  }, [])
+
+  // 注册滚轮事件
+  useEffect(() => {
+    setTimeout(() => {
+      setActiveIndex(0)
+    }, 300)
+    const handleScroll = (e: WheelEvent) => {
+      // 仅在组件挂载时处理
+      if (sliderRef.current) {
+        handleWheel(e)
+      }
+    }
+
+    // 添加滚轮事件监听器
+    window.addEventListener('wheel', handleScroll, { passive: false })
+
+    return () => {
+      // 组件卸载时移除监听器
+      window.removeEventListener('wheel', handleScroll)
+    }
+  }, [handleWheel])
+
+  return (
+    <div className={styles.banner}>
+      <Slider ref={sliderRef} {...settings}>
+        {slides.map((slide, index) => {
+          const isActive = activeIndex === index
+          return (
+            <div key={slide.id} className='fullscreen-slide'>
+              <div className={classNames('slide-content', { animate: isActive })} style={{ background: `url(${slide.background}) no-repeat center center/cover` }}>
+                {slide.content}
+              </div>
+            </div>
+          )
+        })}
+      </Slider>
+    </div>
+  )
+}
+
+export default VerticalBanner

src/pages/A4base/components/index.module.scss

@@ -0,0 +1,193 @@
+.banner {
+  height: 100vh;
+  overflow: hidden;
+  :global {
+    .fullscreen-slide {
+      height: 100vh !important;
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+      background-size: cover;
+      background-position: center;
+
+      .slide-content {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background-size: 100% 100% !important;
+        text-align: center;
+        color: white;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+        & img {
+          width: 100%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          object-fit: contain;
+        }
+
+        // 图1
+        .title1 {
+          width: 75%;
+          opacity: 0.5;
+          transition: all 0.6s ease-in-out;
+        }
+        .item1 {
+          transform: translate(-50%, 21px);
+          object-fit: cover;
+          height: 450px;
+        }
+        .date1 {
+          width: 92px;
+          transform: translate(-900px, -59%);
+          transition: all 0.8s ease-in-out;
+        }
+
+        // 图2
+        .top2 {
+          width: 90%;
+          opacity: 0.5;
+          transform: translate(-50%, -165%);
+          transition: all 0.6s ease-in-out;
+        }
+        .title2 {
+          width: 24%;
+          transform: translate(45%, -80%);
+          transition: all 0.6s ease-in-out;
+        }
+        .item2 {
+          width: 30%;
+          transform: translate(-110%, -39%);
+          transition: all 1s ease-in-out;
+        }
+        .date2 {
+          width: 92px;
+          transform: translate(-900px, -59%);
+          transition: all 0.8s ease-in-out;
+        }
+
+        // 图3
+        .top3 {
+          width: 85%;
+          opacity: 0.5;
+          transform: translate(-50%, -165%);
+          transition: all 0.6s ease-in-out;
+        }
+        .item5 {
+          width: 37%;
+          transform: translate(-110%, -36%);
+          transition: all 1s ease-in-out;
+        }
+        .top7 {
+          width: 80%;
+          opacity: 0.5;
+          transform: translate(-50%, -98%);
+          transition: all 0.6s ease-in-out;
+        }
+        .date7 {
+          width: 22%;
+          transform: translate(82%, -70%);
+          transition: all 0.8s ease-in-out;
+        }
+        .btn7 {
+          width: 12%;
+          transform: translate(193%, 130%);
+          transition: all 0.8s ease-in-out;
+          cursor: pointer;
+          z-index: 1;
+        }
+        .item7 {
+          transform: translate(-50%, 71px);
+          object-fit: cover;
+          height: 400px;
+        }
+      }
+
+      // 动画效果
+      .animate {
+        .title1 {
+          opacity: 1;
+        }
+        .date1 {
+          transform: translate(-900px, -79%);
+        }
+        .top2 {
+          opacity: 1;
+        }
+        .title2 {
+          transform: translate(45%, -50%);
+        }
+        .item2 {
+          transform: translate(-110%, -44%);
+        }
+        .date2 {
+          transform: translate(-900px, -79%);
+        }
+        .top3 {
+          opacity: 1;
+        }
+        .item5 {
+          transform: translate(-110%, -40%);
+        }
+        .top7 {
+          opacity: 1;
+        }
+        .date7 {
+          transform: translate(82%, -79%);
+        }
+        .btn7 {
+          transform: translate(193%, 110%);
+        }
+      }
+    }
+
+    /* 垂直dots样式 */
+    .vertical-dots {
+      position: fixed;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex !important;
+      flex-direction: column;
+      align-items: center;
+      width: auto;
+      gap: 16px;
+      & li {
+        margin: 0 !important;
+        &:not(:last-child) {
+          background: url('../image/scroll2.png') no-repeat center bottom;
+        }
+        width: 22px;
+        height: 62px;
+      }
+      & .slick-active {
+        width: 40px;
+        height: 80px !important;
+        & button {
+          background: url('../image/scroll3.png') no-repeat center center;
+          width: 40px;
+          height: 40px;
+        }
+      }
+      & li button {
+        width: 22px;
+        height: 22px;
+        background: url('../image/scroll1.png') no-repeat center center;
+        background-size: cover;
+        font-size: 12px !important;
+        color: transparent !important;
+        border: none;
+        opacity: 1 !important;
+      }
+      & li button::before {
+        width: 22px;
+        height: 22px;
+        font-size: 12px !important;
+        color: transparent !important;
+        border: none;
+        opacity: 0 !important;
+      }
+    }
+  }
+}

src/pages/A4base/index.module.scss

@@ -1,72 +1,6 @@
 .A4base {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 99999;
   width: 100%;
   height: 100%;
-  transition: all 0.5s;
-  background: url('./image/bg.png') repeat center center;
-  // background-size: 100% 100%;
-  > div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
-  }
-  :global {
-    .A4base-title3 {
-      transform: translate(-50%, -420px);
-      width: 1728px;
-      height: 50px;
-    }
-    .A4base-logo {
-      transform: translate(-865px, -350px);
-      width: 100px;
-      height: 150px;
-    }
-    .A4base-content {
-      width: 1150px;
-      height: 500px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      transform: translate(-50%, -280px);
-      .A4base-title2 {
-        width: 68%;
-        height: 100%;
-      }
-      .A4base-title1 {
-        width: 100%;
-        height: 100%;
-      }
-      .A4base-other {
-        width: 78%;
-        height: 100%;
-      }
-    }
-
-    .A4base-pic1 {
-      transform: translate(650px, -70px);
-      width: 202px;
-      height: 316px;
-    }
-    .A4base-pic2 {
-      transform: translate(-50%, 50%);
-      width: 1920px;
-      height: 325px;
-    }
-    .A4base-button {
-      transform: translate(-50%, 345px);
-      width: 164px;
-      height: 41px;
-      cursor: pointer;
-    }
-  }
+  // :global {
+  // }
 }

src/pages/A4base/index.tsx

@@ -1,25 +1,107 @@
 import React from 'react'
 import styles from './index.module.scss'
 import { useHistory } from 'react-router-dom'
+import VerticalBanner from './components/banner'
 function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
   const history = useHistory()
+  const slides = [
+    {
+      id: 1,
+      background: require('./image/caro1/bg1.png'),
+      content: (
+        <>
+          <img className='title1' src={require('./image/caro1/title1.png')} alt='' draggable='false' />
+          <img className='item1' src={require('./image/caro1/item1.png')} alt='' draggable='false' />
+          <img className='date1' src={require('./image/caro1/date1.png')} alt='' draggable='false' />
+        </>
+      )
+    },
+    {
+      id: 2,
+      background: require('./image/caro2/bg2.png'),
+      content: (
+        <>
+          <img className='top2' src={require('./image/caro2/top2.png')} alt='' draggable='false' />
+          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
+          <img className='item2' src={require('./image/caro2/item2.png')} alt='' draggable='false' />
+          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
+        </>
+      )
+    },
+    {
+      id: 3,
+      background: require('./image/caro3/bg3.png'),
+      content: (
+        <>
+          <img className='top3' src={require('./image/caro3/top3.png')} alt='' draggable='false' />
+          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
+          <img className='item2' src={require('./image/caro3/item3.png')} alt='' draggable='false' />
+          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
+        </>
+      )
+    },
+    {
+      id: 4,
+      background: require('./image/caro4/bg4.png'),
+      content: (
+        <>
+          <img className='top3' src={require('./image/caro4/top4.png')} alt='' draggable='false' />
+          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
+          <img className='item2' src={require('./image/caro4/item4.png')} alt='' draggable='false' />
+          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
+        </>
+      )
+    },
+    {
+      id: 5,
+      background: require('./image/caro5/bg5.png'),
+      content: (
+        <>
+          <img className='top3' src={require('./image/caro5/top5.png')} alt='' draggable='false' />
+          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
+          <img className='item5' src={require('./image/caro5/item5.png')} alt='' draggable='false' />
+          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
+        </>
+      )
+    },
+    {
+      id: 6,
+      background: require('./image/caro4/bg4.png'),
+      content: (
+        <>
+          <img className='top3' src={require('./image/caro4/top4.png')} alt='' draggable='false' />
+          <img className='title2' src={require('./image/caro2/title2.png')} alt='' draggable='false' />
+          <img className='item2' src={require('./image/caro6/item6.png')} alt='' draggable='false' />
+          <img className='date2' src={require('./image/caro2/date2.png')} alt='' draggable='false' />
+        </>
+      )
+    },
+    {
+      id: 7,
+      background: require('./image/caro7/bg7.png'),
+      content: (
+        <>
+          <img className='top7' src={require('./image/caro7/top7.png')} alt='' draggable='false' />
+          <img
+            className='btn7'
+            src={require('./image/caro7/btn7.png')}
+            onClick={() => {
+              setShow(false)
+              history.push('/home?m=SG-Hu9rVKJBQHt')
+              window.location.reload()
+            }}
+            alt=''
+            draggable='false'
+          />
+          <img className='item7' src={require('./image/caro7/item7.png')} alt='' draggable='false' />
+          <img className='date7' src={require('./image/caro7/date7.png')} alt='' draggable='false' />
+        </>
+      )
+    }
+  ]
   return (
     <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
-      <div className='A4base-content'>
-        <div className='A4base-title1'>
-          <img src={require('./image/title.png')} alt='' />
-        </div>
-      </div>
-      <div
-        className='A4base-button'
-        onClick={() => {
-          setShow(false)
-          history.push('/home?m=SG-zeRFYMaTE9F')
-          window.location.reload()
-        }}
-      >
-        <img src={require('./image/button.png')} alt='' />
-      </div>
+      <VerticalBanner slides={slides} />
     </div>
   )
 }

src/pages/A5Mobile/components/banner.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import Slider from 'react-slick'
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import classNames from 'classnames'
+import styles from './index.module.scss' // 自定义样式
+
+type Slide = {
+  id: number
+  background: string
+  content: React.ReactNode
+}
+
+const VerticalBanner: React.FC<{ slides: Slide[] }> = ({ slides }) => {
+  const sliderRef = useRef<Slider>(null)
+  const isScrolling = useRef(false)
+  const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined)
+
+  // 垂直轮播配置
+  const settings = {
+    dots: true,
+    dotsClass: 'slick-dots vertical-dots', // 自定义垂直dots样式
+    infinite: true,
+    speed: 800,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    arrows: false,
+    autoplay: false,
+    adaptiveHeight: true,
+    initialSlide: 0,
+    afterChange: (index: number) => {
+      setActiveIndex(index)
+    }
+  }
+
+  // 处理滚轮事件
+  const handleWheel = useCallback((e: WheelEvent) => {
+    if (isScrolling.current) return
+
+    // 阻止页面默认滚动
+    e.preventDefault()
+
+    // 设置滚动锁定，避免连续触发
+    isScrolling.current = true
+    setTimeout(() => {
+      isScrolling.current = false
+    }, 1000) // 滚动动画期间锁定
+
+    // 根据滚轮方向切换幻灯片
+    if (e.deltaY > 0) {
+      sliderRef.current?.slickNext()
+    } else {
+      sliderRef.current?.slickPrev()
+    }
+  }, [])
+
+  // 注册滚轮事件
+  useEffect(() => {
+    setTimeout(() => {
+      setActiveIndex(0)
+    }, 300)
+    const handleScroll = (e: WheelEvent) => {
+      // 仅在组件挂载时处理
+      if (sliderRef.current) {
+        handleWheel(e)
+      }
+    }
+
+    // 添加滚轮事件监听器
+    window.addEventListener('wheel', handleScroll, { passive: false })
+
+    return () => {
+      // 组件卸载时移除监听器
+      window.removeEventListener('wheel', handleScroll)
+    }
+  }, [handleWheel])
+
+  return (
+    <div className={styles.banner}>
+      <Slider ref={sliderRef} {...settings}>
+        {slides.map((slide, index) => {
+          const isActive = activeIndex === index
+          return (
+            <div key={slide.id} className='fullscreen-slide'>
+              <div className={classNames('slide-content', { animate: isActive })} style={{ background: `url(${slide.background}) no-repeat center center/cover` }}>
+                {slide.content}
+              </div>
+            </div>
+          )
+        })}
+      </Slider>
+    </div>
+  )
+}
+
+export default VerticalBanner

src/pages/A5Mobile/components/index.module.scss

@@ -0,0 +1,192 @@
+.banner {
+  height: 100vh;
+  overflow: hidden;
+  :global {
+    .fullscreen-slide {
+      height: 100vh !important;
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+      background-size: cover;
+      background-position: center;
+
+      .slide-content {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background-size: 100% 100% !important;
+        text-align: center;
+        color: white;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+        & img {
+          width: 100%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          object-fit: contain;
+        }
+
+        // 图1
+        .title1 {
+          width: 88%;
+          opacity: 0.5;
+          transform: translate(-50%, -74%);
+          transition: all 0.6s ease-in-out;
+        }
+        .top1 {
+          width: 95%;
+          opacity: 0.5;
+          transform: translate(-50%, -600%);
+          transition: all 0.6s ease-in-out;
+        }
+        .item1 {
+          transform: translate(-50%, 0);
+          bottom: 0;
+          top: auto;
+          object-fit: cover;
+          height: 250px;
+        }
+        .date1 {
+          width: 15%;
+          transform: translate(196%, -27%);
+          transition: all 0.8s ease-in-out;
+        }
+
+        // 图2
+        .top2 {
+          width: 90%;
+          opacity: 0.5;
+          transform: translate(-50%, -600%);
+          transition: all 0.6s ease-in-out;
+        }
+        .title2 {
+          width: 57%;
+          transform: translate(-50%, -85%);
+          transition: all 0.6s ease-in-out;
+        }
+        .item2 {
+          width: 40%;
+          transform: translate(0%, -24%);
+          left: 0;
+          transition: all 1s ease-in-out;
+        }
+        .date2 {
+          width: 15%;
+          transform: translate(166%, -25%);
+          transition: all 1.2s ease-in-out;
+        }
+        .top7 {
+          width: 90%;
+          opacity: 0.5;
+          transform: translate(-50%, -165%);
+          transition: all 0.6s ease-in-out;
+        }
+        .date7 {
+          width: 65%;
+          transform: translate(-78%, -93%);
+          transition: all 0.8s ease-in-out;
+        }
+        .btn7 {
+          width: 30%;
+          opacity: 0;
+          transform: translate(-50%, 130%);
+          transition: all 0.8s ease-in-out;
+          cursor: pointer;
+          z-index: 1;
+        }
+        .item7 {
+          transform: translate(-50%, 71px);
+          object-fit: cover;
+          height: 400px;
+        }
+      }
+
+      // 动画效果
+      .animate {
+        .title1 {
+          opacity: 1;
+        }
+        .top1 {
+          opacity: 1;
+        }
+        .date1 {
+          transform: translate(196%, -47%);
+        }
+        .top2 {
+          opacity: 1;
+        }
+        .title2 {
+          transform: translate(-50%, -105%);
+        }
+        .item2 {
+          transform: translate(0%, -33%);
+          left: 0;
+        }
+        .date2 {
+          transform: translate(166%, -5%);
+        }
+        .top7 {
+          opacity: 1;
+        }
+        .date7 {
+          transform: translate(-65%, -93%);
+        }
+        .btn7 {
+          transform: translate(-50%, 110%);
+          opacity: 1;
+        }
+      }
+    }
+
+    /* 垂直dots样式 */
+    .vertical-dots {
+      position: fixed;
+      top: 5%;
+      left: 16px;
+      transform: translateY(-50%);
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 80px;
+      gap: 8px;
+      & li {
+        margin: 0 !important;
+        &:not(:last-child) {
+          background: url('../image/scroll2.png') no-repeat center right;
+        }
+        width: 52px;
+        height: 12px;
+      }
+      & .slick-active {
+        width: 70px;
+        height: 30px !important;
+        & button {
+          background: url('../image/scroll3.png') no-repeat;
+          background-size: 100% 100%;
+          width: 30px;
+          height: 30px;
+        }
+      }
+      & li button {
+        width: 12px;
+        height: 12px;
+        background: url('../image/scroll1.png') no-repeat center center;
+        background-size: cover;
+        font-size: 12px !important;
+        color: transparent !important;
+        border: none;
+        opacity: 1 !important;
+      }
+      & li button::before {
+        width: 12px;
+        height: 12px;
+        font-size: 12px !important;
+        color: transparent !important;
+        border: none;
+        opacity: 0 !important;
+      }
+    }
+  }
+}