hot

src/App.tsx

@@ -5,6 +5,9 @@ import { Router, Route, Switch } from 'react-router-dom'
 import history, { isMobileFu } from './utils/history'
 import SpinLoding from './components/SpinLoding'
 import AsyncSpinLoding from './components/AsyncSpinLoding'
+import { Image } from 'antd'
+import store, { RootState } from '@/store'
+import { useSelector } from 'react-redux'
 
 import UpAsyncLoding from './components/UpAsyncLoding'
 import MessageCom from './components/Message'
@@ -15,8 +18,7 @@ const A0base = React.lazy(() => import('./pages/A0base'))
 
 export default function App() {
   // 从仓库中获取查看图片的信息
-  // const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
-
+  const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
   const rootDomFu = useCallback(() => {
     const rootDom: HTMLDivElement = document.querySelector('#root')!
     if (rootDom) {
@@ -45,11 +47,11 @@ export default function App() {
       <AsyncSpinLoding />
 
       {/* 所有图片点击预览查看大图 */}
-      {/* <Image
+      <Image
         preview={{
           visible: lookBigImg.show,
           src: lookBigImg.url,
-          onVisibleChange: value => {
+          onVisibleChange: (value: boolean) => {
             // 清除仓库信息
             store.dispatch({
               type: 'layout/lookBigImg',
@@ -57,7 +59,7 @@ export default function App() {
             })
           }
         }}
-      /> */}
+      />
 
       {/* 上传附件的进度条元素 */}
       <UpAsyncLoding />

src/assets/styles/base.css

@@ -13,7 +13,14 @@ body {
     'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
   color: black;
+  font-family: syst;
 }
+
+@font-face {
+  font-family: 'syst';
+  src: url('./syst.OTF') format('opentype');
+}
+
 i {
   font-style: normal;
 }

src/pages/A0base/index.tsx

@@ -8,7 +8,7 @@ function A0base() {
   return (
     <div className={styles.A0base}>
       {/* 初始封面 */}
-      <A1home />
+      <A1home show={show} />
       <div className='initPic' style={{ display: show ? 'flex' : 'none' }}>
         <video
           autoPlay

src/pages/A1home/components/Background/index.tsx

@@ -4,7 +4,7 @@ import isMobile from '@/utils/isMobile'
 
 const Background = ({ activeIndex }: { activeIndex: number }) => {
   return (
-    <div className={styles.bg}>
+    <div className={styles.bg} id="bg">
       <img
         key="bg3 "
         className={`bgImg1 ${activeIndex === 2 ? 'enter' : 'leave'}`}

src/pages/A1home/components/Banner/banner.tsx

@@ -20,6 +20,9 @@ type BannerProps = {
 
 const VerticalBanner = forwardRef<Slider, BannerProps>(({ slides, activeIndex, setActiveIndex }, ref) => {
   const sliderRef = useRef<Slider>(null)
+  const containnerRef = useRef<HTMLDivElement>(null)
+
+
 
   // 暴露内部slider实例
   useImperativeHandle(ref, () => sliderRef.current as Slider)
@@ -74,23 +77,25 @@ const VerticalBanner = forwardRef<Slider, BannerProps>(({ slides, activeIndex, s
   // 注册滚轮事件
   useEffect(() => {
     const handleScroll = (e: WheelEvent) => {
-      // 仅在组件挂载时处理
-      if (sliderRef.current) {
-        handleWheel(e)
+      const hotPotsElement = document.querySelector('.hotPots');
+      if (hotPotsElement && e.target instanceof Node && hotPotsElement.contains(e.target)) {
+        return; // 排除 hotPots 区域
       }
-    }
 
-    // 添加滚轮事件监听器
-    window.addEventListener('wheel', handleScroll, { passive: false })
+      if (sliderRef.current) {
+        handleWheel(e);
+      }
+    };
+    document.addEventListener('wheel', handleScroll, { passive: false });
 
     return () => {
+      document.removeEventListener('wheel', handleScroll);
+    };
+  }, [handleWheel, setActiveIndex]);
 
-      window.removeEventListener('wheel', handleScroll)
-    }
-  }, [handleWheel, setActiveIndex])
 
   return (
-    <div className={styles.banner}>
+    <div className={styles.banner} ref={containnerRef} style={{ width: activeIndex === 0 ? '100%' : '' }}>
       <Slider ref={sliderRef} {...settings}>
         {slides.map((slide, index) => {
           const isActive = activeIndex === index

src/pages/A1home/components/Banner/index.module.scss

@@ -53,16 +53,32 @@
 
         // 图1
         .title1 {
-          width: 75%;
+          width: 40%;
           transform: translate(-50%, -30%);
           opacity: 0.3;
-          transition: all 1.5s ease-in-out 0.2s;
+          transition: all 0.1s;
         }
         .button1 {
+          width: 16%;
+          opacity: 0;
+          cursor: pointer;
+          transition: all 0.1s;
+          transform: translate(-50%, 230%);
+          object-fit: cover;
+        }
+
+        // 图2
+        .title2 {
+          width: 75%;
+          transform: translate(-50%, -30%);
+          opacity: 0;
+          transition: all 0.1s;
+        }
+        .button2 {
           width: 30%;
           opacity: 0;
           cursor: pointer;
-          transition: all 0.3s ease-in-out 0.4s;
+          transition: all 0.1s;
           transform: translate(-50%, 230%);
           object-fit: cover;
         }
@@ -72,14 +88,14 @@
           width: 37%;
           transform: translate(-60%, -20%);
           opacity: 0;
-          transition: all 1.5s ease-in-out;
+          transition: all 0.1s;
         }
 
         .button3 {
           width: 4%;
           opacity: 0;
           cursor: pointer;
-          transition: all 0.6s ease-in-out 0.4s;
+          transition: all 0.1s;
           transform: translate(230%, 30%);
           object-fit: cover;
         }
@@ -97,18 +113,32 @@
         .title1 {
           opacity: 1;
           transform: translate(-50%, -70%);
+          transition: all 1.2s;
         }
         .button1 {
           opacity: 1;
           transform: translate(-50%, 200%);
+          transition: all 1.2s;
+        }
+        .title2 {
+          opacity: 1;
+          transform: translate(-50%, -70%);
+          transition: all 1.2s;
+        }
+        .button2 {
+          opacity: 1;
+          transform: translate(-50%, 200%);
+          transition: all 1.2s;
         }
         .title3 {
           transform: translate(-60%, -60%);
           opacity: 1;
+          transition: all 1.2s;
         }
         .button3 {
           opacity: 1;
           transform: translate(260%, 30%);
+          transition: all 1.2s;
         }
       }
     }
@@ -190,12 +220,12 @@
           }
           .title3 {
             width: 50%;
-            transition: all 0.6s ease-in-out;
+            transition: all 0.6s ease-in-out 0.6s;
             transform: translate(-60%, -60%);
           }
           .button3 {
             width: 45%;
-            transition: all 0.3s ease-in-out;
+            transition: all 0.3s ease-in-out 0.6s;
             transform: translate(-60%, 380%);
           }
         } // 动画效果

src/pages/A1home/components/TabBar/index.module.scss

@@ -40,6 +40,7 @@
 @media screen and (max-width: 768px) {
   .tabBar {
     width: 90%;
+    top: 1%;
     :global {
       .tabBarBox {
         .tabItem {

src/pages/A1home/components/flipPic/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react'
 import styles from './index.module.scss'
+import { TitleData } from '../../index'
 
-const FlipPic = ({ activeIndex }: { activeIndex: number }) => {
+const FlipPic = ({ titleData, activeIndex, setCurrentData }: { titleData: Record<string, TitleData[]>, activeIndex: number, setCurrentData: (data: TitleData) => void }) => {
   const [prevIndex, setPrevIndex] = useState(activeIndex);
   const [isAnimating, setIsAnimating] = useState(true);
   const [displayIndex, setDisplayIndex] = useState(activeIndex);
@@ -40,38 +41,7 @@ const FlipPic = ({ activeIndex }: { activeIndex: number }) => {
     }
   }, [activeIndex, prevIndex]);
 
-  const title: Record<string, { name: string, link: string }[]> = {
-    pic1: [{
-      name: '元青花四爱图梅瓶',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts01'
-    }, {
-      name: '“太阳人”石刻',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts02'
-    }, {
-      name: '铜钺',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts03'
-    }],
-    pic2: [{
-      name: '《甘绩熙自述》',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts04'
-    }, {
-      name: '起义军占领武昌后制发的出入城门证',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts05'
-    }, {
-      name: '王汉烈士画像',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts06'
-    }],
-    pic3: [{
-      name: '战争年代李先念使用过的怀表',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts07'
-    }, {
-      name: '郭天民1955年荣获的八一、解放、独立一级勋章',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts08'
-    }, {
-      name: '123',
-      link: 'https://4dscene.4dage.com/culturalrelics/HBSBWG-TS/Model2.html?m=hbts09'
-    }],
-  }
+
 
   return (
     <div
@@ -79,9 +49,9 @@ const FlipPic = ({ activeIndex }: { activeIndex: number }) => {
       className={`${styles.flipPic} ${isAnimating ? 'active' : ''}`}
     >
       {[1, 2, 3].map((i) => (
-        <div className={`picBox picBox${i}`} key={`bg${i}-${activeIndex}`} onClick={() => window.open(title[`pic${displayIndex + 1}`][i - 1].link)}>
-          <div className="title">●{title[`pic${displayIndex + 1}`][i - 1].name as any}</div>
-          <div className='pic'>
+        <div className={`picBox picBox${i}`} key={`bg${i}-${activeIndex}`}>
+          <div className="title">●{titleData[`pic${displayIndex + 1}`][i - 1].name as any}</div>
+          <div className='pic' onClick={() => setCurrentData(titleData[`pic${displayIndex + 1}`][i - 1])}>
             <img
               className='front'
               src={require(`../../image/caro${isForward // 使用存储的方向状态

src/pages/A1home/index.module.scss

@@ -23,7 +23,92 @@
       }
     }
 
+    .hotPots {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      .containner {
+        width: 70%;
+        height: 80%;
+        background-color: rgba(0, 0, 0, 0.8);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-size: 100% 100%;
+        position: relative;
+        .logo {
+          position: fixed;
+          width: 8%;
+          top: 4%;
+          left: 2%;
+          object-fit: contain;
+        }
+        .imgBox {
+          width: 80%;
+          height: 60%;
+          padding: 0;
+          padding-top: 80px;
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .txtBox {
+          width: 80%;
+          height: 40%;
+          padding: 20px 0;
+          padding-top: 40px;
+          display: flex;
+          flex-direction: column;
+          .title {
+            font-size: 22px;
+            font-weight: 500;
+            color: #fff;
+            margin-bottom: 20px;
+          }
+          .text {
+            height: 75%;
+            overflow: auto;
+            font-size: 16px;
+            color: #f9f9f1;
+            letter-spacing: 2px;
+            text-indent: 2em;
+            line-height: 32px;
+            &::-webkit-scrollbar {
+              background-color: #dbacac;
+              width: 2px;
+            }
+            &::-webkit-scrollbar-thumb {
+              background-color: #f9f9f1;
+            }
+          }
+        }
+        .close {
+          position: absolute;
+          cursor: pointer;
+          width: 4%;
+          top: 4%;
+          right: 2%;
+          object-fit: contain;
+        }
+        .close1 {
+          right: 0;
+          top: 8px;
+        }
+      }
+    }
+
     @media screen and (max-width: 768px) {
+      .logo {
+        display: none;
+      }
       .arrowAnimation {
         .arror,
         .arrorBg {