feat2

BDLGHot/src/views/Home.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="home">
+    <div class="logo">
+      <img src="../assets/images/pc/logo.png" alt="" draggable="false" />
+    </div>
     <div :class="['main']">
       <div class="myTitle" style="display: none">{{ myTitle }}</div>
 
@@ -61,14 +64,17 @@
             </div>
           </div>
 
-          <div class="swiper-pagination" v-show="data[myType]?.length > 1"></div>
+          <div
+            class="swiper-pagination"
+            v-show="data[myType]?.length > 1"
+          ></div>
         </div>
       </div>
 
       <div class="main-info">
         <div class="myTitle">{{ myTitle }}</div>
         <!-- 下面的文字介绍 -->
-        <img class="split" :src="require(`@/assets/images/split.png`)" alt="" />
+        <!-- <img class="split" :src="require(`@/assets/images/split.png`)" alt="" /> -->
         <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
           <div class="flooTxtBox">
             <!-- <div class="myTitle">{{ myTitle }}</div> -->
@@ -322,6 +328,17 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  .logo {
+    position: fixed;
+    width: 450px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-510px, -255px);
+    & > img {
+      object-fit: contain;
+      width: 100%;
+    }
+  }
   .swiper-pagination {
     display: flex;
     align-items: center;
@@ -366,11 +383,13 @@ export default {
     justify-content: center;
     &-info {
       flex: 1;
-      margin-bottom: 22%;
+      height: 310px;
     }
     .myTitle {
-      font-size: 24px;
-      color: rgba(168, 46, 43, 1);
+      font-size: 28px;
+      padding-bottom: 20px;
+      text-align: center;
+      color: #e6aa4a;
       font-family: "fzFont", sans-serif;
     }
 
@@ -486,8 +505,9 @@ export default {
         //   display: none;
         // }
         .myTxt {
-          font-size: 13px;
-          color: rgba(0, 0, 0, 1);
+          text-indent: 2em;
+          font-size: 18px;
+          color: #e6aa4a;
           line-height: 26px;
         }
         &::-webkit-scrollbar {
@@ -555,6 +575,13 @@ export default {
   .home {
     background: url("../assets/images/hot_bgM.png") no-repeat;
     background-size: 100% 100%;
+    .logo {
+      position: fixed;
+      top:20px;
+      right: 50%;
+      width: 300px;
+      transform: translate(-50%, 0);
+    }
     #myAudio {
       width: 90vw;
       max-width: 500px;
@@ -569,7 +596,8 @@ export default {
         margin-top: -5px;
         width: 100%;
         padding: 10px 15px 0px 15px;
-        max-height: 98px;
+        max-height: calc(100% - 460px);
+        margin-bottom: 100px;
       }
       .myTitle {
         font-size: 24px;
@@ -582,14 +610,15 @@ export default {
       .is-mobile {
         display: block;
       }
-      .split{
+      .split {
         margin: 10px 0;
       }
       .mainCon {
         border-radius: 0;
         margin: 0;
         width: 100%;
-        height: calc(100% - 235px);
+        padding-top: 50px;
+        height: 310px;
         .contenBox {
           .videoBox {
             padding: 0 30px;
@@ -631,8 +660,9 @@ export default {
         overflow-y: auto;
         .flooTxtBox {
           .myTxt {
-            font-size: 14px;
-            line-height: 22px;
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 300;
           }
         }
       }

BDLGScene/public/css/oldVer/main0.css

@@ -91,11 +91,11 @@ iframe {
 }
 #closepop {
   position: fixed;
-  top: 13%;
-  right: 18%;
+  top: 6%;
+  right: 3%;
   background: url(../../images/close1.png) no-repeat;
-  width: 48px;
-  height: 48px;
+  width: 30px;
+  height: 30px;
   cursor: pointer;
   text-indent: -999em;
   background-size: 100% 100%;
@@ -207,7 +207,7 @@ a {
 @media screen and (max-width: 1000px) {
   .popup-content {
     width: 90%;
-    height: 80%;
+    height: 95%;
   }
 }
 @media screen and (max-width: 768px) {
@@ -232,9 +232,11 @@ a {
 }
 @media screen and (max-width: 667px) {
   #closepop {
-    position: initial;
     width: 45px;
     height: 45px;
+    top: 90%;
+    right: 50%;
+    transform: translateX(50%);
   }
 
   #title-toggle {
@@ -293,4 +295,4 @@ a {
   .pinTop {
     top: 0px;
   }
-}
+}

BDLGScene/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" />

BDLGScene/public/js/Hot.js

@@ -55,7 +55,7 @@ window.initHot = function (model) {
       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)
 
-    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', 'https://houseoss.4dkankan.com/project/shandongMuseum/changhegongyin/hot')
     // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
     // return src
   }

BDLGScene/src/pages/A2main/index.module.scss

@@ -12,7 +12,7 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 38px;
+      top: 48px;
       width: 80px;
       height: 37px;
       line-height: 30px;
@@ -23,21 +23,35 @@
 
     // 样式重置
     .pinBottom.left {
-      width: 70%;
-      height: 90px;
-      background: url(../../assets/img/bottomBar.png) no-repeat center;
+      width: 1400px;
+      margin-right: 350px;
+      height: 80px;
+      border-radius: 0 40px 40px 0;
+      left: 50%;
+      transform: translateX(-50%);
       background-size: contain;
-      background-color: transparent;
+      background-color: #23362f;
       display: flex;
       align-items: center;
       padding-bottom: 20px;
       justify-content: center;
 
+      .logo {
+        position: relative;
+        bottom: -10px;
+        left: 20px;
+        height: 75px;
+        & img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
       .splitImg {
         width: 10px;
         height: 100%;
         object-fit: cover;
-        margin: 20px 0px 0px 40px;
+        margin: 20px 0px 0px 58px;
       }
     }
 
@@ -53,7 +67,7 @@
       #gui-modes-floorplan {
         width: var(--pcIconWidth);
         height: var(--pcIconWidth);
-        margin-left: 38px;
+        margin-left: 58px;
         background-color: transparent !important;
         position: relative;
 
@@ -74,7 +88,7 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      gap: 38px;
+      gap: 58px;
       .likeBox,
       .A2_map_box,
       #volume,
@@ -111,7 +125,8 @@
     // 只有在全景漫游下其他按钮才能点
     .pinBottom-containerNo {
       #play,
-      #pause {
+      #pause,
+      .A2hotIcon {
         opacity: 0.5 !important;
         pointer-events: none !important;
       }
@@ -217,8 +232,8 @@
 
     .sectionIndex {
       position: fixed;
-      bottom: 20px;
-      right: 10px;
+         top: 200px;
+    right: 10px;
       .sectionIndexImg {
         width: 170px;
         height: 100%;
@@ -238,14 +253,35 @@
       align-items: center;
       justify-content: center;
       z-index: 30000;
+      .arrL{
+        position: absolute;
+        left: 2%;
+        cursor: pointer;
+      }
+      .arrR{
+        position: absolute;
+        right: 2%;
+        cursor: pointer;
+      }
       .sectionBox {
-        width: 100%;
+        padding: 0 20px;
+        width: fit-content;
+        overflow: auto;
         height: 85%;
         display: flex;
-        justify-content: center;
+        flex-wrap: nowrap;
+        scroll-behavior: smooth;
+        justify-content: flex-start;
         gap: 20px;
+        ::-webkit-scrollbar {
+          display: none; /* Chrome, Safari, Edge */
+        }
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+
         & > div {
-          width: 20%;
+          flex: 0 0 auto;
+          width: 420px;
           height: 100%;
           background-size: contain;
           p {
@@ -259,21 +295,32 @@
         }
         .section1 {
           background: url(../../assets/img/section1.png) no-repeat;
+          background-size: 100% 100%;
           p {
             color: rgba(255, 244, 223, 1);
           }
         }
         .section2 {
           background: url(../../assets/img/section2.png) no-repeat;
+          background-size: 100% 100%;
         }
         .section3 {
           background: url(../../assets/img/section3.png) no-repeat;
+          background-size: 100% 100%;
           p {
             color: rgba(247, 232, 207, 1);
           }
         }
         .section4 {
           background: url(../../assets/img/section4.png) no-repeat;
+          background-size: 100% 100%;
+          p {
+            color: #fff;
+          }
+        }
+        .section5 {
+          background: url(../../assets/img/section5.png) no-repeat;
+          background-size: 100% 100%;
           p {
             color: #fff;
           }
@@ -282,7 +329,7 @@
       .sectionClose {
         position: fixed;
         top: 25px;
-        right: 90px;
+        right: 25px;
         cursor: pointer;
       }
     }
@@ -298,12 +345,14 @@
         text-shadow: 0 0 5px rgba(253, 251, 178, 0.8), 0 0 10px rgba(253, 251, 178, 0.6);
       }
       #gui-modes-map {
+        background-color:#23362F ;
+        border-radius: 25px;
         display: flex;
         justify-content: flex-end;
         align-items: center;
         flex-direction: column;
         gap: 30px;
-        margin: 0;
+        margin-left: 10px;
         padding: 30px 0px;
         width: 55px;
         #play,
@@ -333,13 +382,19 @@
         background: transparent !important;
         right: 20px;
         padding: 0 !important;
+        .logo{
+          display: none;
+        }
         .splitImg {
           display: none;
         }
       }
 
       .rightViewContainer {
-        width: 65px;
+        background-color:#23362F ;
+        border-radius: 25px;
+        margin-right: 10px;
+        width: 55px;
         display: flex;
         justify-content: flex-end;
         flex-direction: column;

BDLGScene/src/pages/A3hotList/index.module.scss

@@ -20,10 +20,9 @@
       height: 100%;
       background: url('../../assets/img/hotlist_bg.png') no-repeat;
       background-size: 100% 100%;
-      color: rgba(43, 31, 23, 0.9);
+      color: #e6aa4a;
       font-size: 17px;
       font-weight: 500;
-      overflow: auto;
       padding-bottom: 70px;
       // 隐藏滚动条
       &::-webkit-scrollbar {
@@ -31,19 +30,30 @@
       }
       .A3title {
         padding: 40px 0 10px 0;
-        font-size: 24px;
-        font-weight: 400;
-        color: rgba(43, 31, 23, 0.9);
+        font-size: 30px;
+        font-weight: 500;
+        color: #e6aa4a;
       }
-      .A3item {
+      .itemBox{
+        width: 93%;
+        height: 86%;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        &::-webkit-scrollbar {
+            display: none;
+          }
+        .A3item {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 93%;
+        width: 100%;
         height: fit-content;
         padding: 4px 10px;
         cursor: pointer;
         min-width: 0; // 保持这个重要属性
+        font-size: 20px;
         span {
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -54,16 +64,18 @@
         }
 
         &:hover {
-          background-color: rgb(192, 174, 154);
+          background-color: rgba(44, 43, 42, 0.5);
         }
       }
+      }
+      
       .A3close {
         position: fixed;
         bottom: 0;
         width: 90%;
         height: 60px;
         margin: 10px;
-        background-color: rgba(235, 219, 202, 1);
+        background-color: transparent;
         border-top: 1px solid rgba(43, 31, 23, 0.1);
         display: flex;
         align-items: center;
@@ -73,8 +85,8 @@
           opacity: 1;
         }
         img {
-          width: 48px;
-          height: 48px;
+          width: 38px;
+          height: 38px;
           opacity: 0.6;
         }
       }
@@ -84,9 +96,10 @@
 
 @media screen and (max-width: 1000px) {
   .A3hotList {
-    width: 100%;
-    height: 50%;
-    transform: translate(0, -100%);
+    width: 94%;
+    height: 98%;
+    top: 0%;
+    transform: translateX(-3%);
     :global {
       html .cad {
         z-index: -1;
@@ -97,17 +110,21 @@
         padding-bottom: 20px;
         .A3title {
           padding: 20px 0 10px 0;
-          font-size: 16px;
+          font-size: 26px;
         }
-        .A3item {
-          font-size: 14px;
+        .itemBox {
+          height: 84%;
+          .A3item {
+          font-size: 18px;
           padding: 10px 3px;
           &:touch {
             background-color: rgba(163, 143, 116, 1);
           }
         }
+        }
+        
         .A3close {
-          bottom: -50px;
+          bottom: 10px;
           background-color: transparent;
           height: 40px;
           & img {

BDLGScene/src/pages/A3hotList/index.tsx

@@ -28,18 +28,20 @@ function A3hotList({ show, setShow, closeFu }: Props) {
     <div className={styles.A3hotList} style={{ opacity: show ? '1' : '0', pointerEvents: show ? 'auto' : 'none' }}>
       <div className='A3main'>
         <div className='A3title'>热点列表</div>
-        {list.map((item, index) => (
-          <div
-            className='A3item'
-            onClick={() => {
-              openHot(item)
-              setShow(false)
-            }}
-            key={index}
-          >
-            <span>{item.info.title || '热点'}</span>
-          </div>
-        ))}
+        <div className='itemBox'>
+          {list.map((item, index) => (
+            <div
+              className='A3item'
+              onClick={() => {
+                openHot(item)
+                setShow(false)
+              }}
+              key={index}
+            >
+              <span>{item.info.title || '热点'}</span>
+            </div>
+          ))}
+        </div>
         <div className='A3close' onClick={closeFu}>
           <img className='A3close' src={imgArr[0]} alt='' />
         </div>

BDLGScene/src/pages/A4base/components/banner.tsx

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

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

@@ -1,202 +0,0 @@
-.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%;
-          opacity: 0;
-          transform: translate(45%, -95%);
-          transition: all 1.2s ease-in-out;
-        }
-        .item2 {
-          width: 30%;
-          opacity: 0;
-          transform: translate(-110%, -39%);
-          transition: all 1s ease-in-out;
-        }
-        .date2 {
-          width: 92px;
-          opacity: 0;
-          transform: translate(-1050px, -79%);
-          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%;
-          opacity: 0;
-          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 {
-          opacity: 1;
-          transform: translate(45%, -50%);
-        }
-        .item2 {
-          opacity: 1;
-          transform: translate(-110%, -44%);
-        }
-        .date2 {
-          opacity: 1;
-          transform: translate(-900px, -79%);
-        }
-        .top3 {
-          opacity: 1;
-        }
-        .item5 {
-          opacity: 1;
-          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;
-          background-size: cover;
-          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;
-      }
-    }
-  }
-}

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

@@ -1,6 +1,72 @@
 .A4base {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
   width: 100%;
   height: 100%;
-  // :global {
-  // }
+  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 {
+      height: 500px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      transform: translate(-130%, -325px);
+      .A4base-title2 {
+        width: 68%;
+        height: 100%;
+      }
+      .A4base-title1 {
+        width: 100%;
+        height: 100%;
+      }
+      .A4base-other {
+        width: 78%;
+        height: 100%;
+      }
+    }
+
+    .A4base-pic1 {
+     transform: translate(172%, 350px);
+    width: 325px;
+    }
+    .A4base-pic2 {
+      transform: translate(-870px, 340px);
+    width: 400px;
+    }
+     .A4base-pic3 {
+      transform: translate(-870px, -415px);
+    width: 450px;
+    }
+    .A4base-button {
+      transform: translate(-350%, 220px);
+    width: 250px;
+    cursor: pointer;
+    }
+  }
 }

BDLGScene/src/pages/A4base/index.tsx

@@ -1,107 +1,34 @@
 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' }}>
-      <VerticalBanner slides={slides} />
+      <div className='A4base-content'>
+        <div className='A4base-title1'>
+          <img src={require('./image/title.png')} alt='' />
+        </div>
+      </div>
+      <div className="A4base-pic1">
+        <img src={require('./image/other.png')} alt='' />
+      </div>
+      <div className="A4base-pic2">
+        <img src={require('./image/time.png')} alt='' />
+      </div>
+      <div className="A4base-pic3">
+        <img src={require('./image/title_2.png')} alt='' />
+      </div>
+      <div
+        className='A4base-button'
+        onClick={() => {
+          setShow(false)
+          history.push('/home?m=SG-BJIIlnvvguG-02')
+          window.location.reload()
+        }}
+      >
+        <img src={require('./image/button.png')} alt='' />
+      </div>
     </div>
   )
 }

BDLGScene/src/pages/A5Mobile/components/banner.tsx

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

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

@@ -1,192 +0,0 @@
-.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(-45%, -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;
-      }
-    }
-  }
-}