update

src/pages/A0base/index.module.scss

@@ -7,12 +7,20 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      background: #ccc;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 30%;
+      .background-video {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        z-index: -1;
+      }
       .title {
         height: 20%;
         object-fit: contain;
@@ -20,6 +28,7 @@
       .button {
         height: 5%;
         object-fit: contain;
+        cursor: pointer;
       }
     }
   }

src/pages/A0base/index.tsx

@@ -10,6 +10,16 @@ function A0base() {
       {/* 初始封面 */}
       <A1home />
       <div className='initPic' style={{ display: show ? 'flex' : 'none' }}>
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="background-video"
+        >
+          <source src={require('../../assets/video/bgVideo.mp4')} type="video/mp4" />
+          您的浏览器不支持视频播放
+        </video>
         <img className='title' src={require('../../assets/img/title.png')} alt='' />
         <img className='button' onClick={() => setShow(false)} src={require('../../assets/img/button.png')} alt='' />
       </div>

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

@@ -13,6 +13,7 @@
     .picBox {
       display: flex;
       flex-direction: column;
+      cursor: pointer;
       .title {
         font-size: 16px;
         color: #fff;

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

@@ -40,10 +40,37 @@ const FlipPic = ({ activeIndex }: { activeIndex: number }) => {
     }
   }, [activeIndex, prevIndex]);
 
-  const title: Record<string, string[]> = {
-    pic1: ['元青花四爱图梅瓶', '“太阳人”石刻', '铜钺'],
-    pic2: ['《甘绩熙自述》', '起义军占领武昌后制发的出入城门证', '王汉烈士画像'],
-    pic3: ['战争年代李先念使用过的怀表', `郭天民1955年荣获的八一、解放、独立一级勋章`, '123']
+  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 (
@@ -52,8 +79,8 @@ const FlipPic = ({ activeIndex }: { activeIndex: number }) => {
       className={`${styles.flipPic} ${isAnimating ? 'active' : ''}`}
     >
       {[1, 2, 3].map((i) => (
-        <div className={`picBox picBox${i}`} key={`bg${i}-${activeIndex}`}>
-          <div className="title">●{title[`pic${displayIndex + 1}`][i - 1] as any}</div>
+        <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'>
             <img
               className='front'