upp

Code/public/myData/myData.js

@@ -755,12 +755,12 @@ const plowHotArr = [
       }
     ]
   },
-  // 收货
+  // 收获
   {
     // 是否在更多模块中显示-true表示不显示
     noShow: true,
     // 用于分类
-    type: '收货',
+    type: '收获',
     // 热点名字
     name: '簸糠',
     // 热点图片路径+名字
@@ -795,7 +795,7 @@ moreHotArr = moreHotArr.filter(v => !v.noShow)
 const myDataTemp = {
   // 开发调试为 false  正式上线为  true
   // 开发调试的时候 取消所有加载进度条 所有的视频动画都加上跳过按钮
-  isLdong: false,
+  isLdong: true,
 
   // 首页(静态资源目录位置：staticData/home)
   home: {
@@ -1218,7 +1218,7 @@ const myDataTemp = {
         hot: plowHotArr.filter(v => v.type === '施肥' || v.isChang)
       },
       {
-        name: '收货',
+        name: '收获',
         // 视频路径+名字
         videoSrc: 'plow/5.mp4',
         // 文本信息
@@ -1226,7 +1226,7 @@ const myDataTemp = {
         <p>汉代非常重视及时收获。《沦胜之书》 在谈到各种作物的收获时都强调“早获”，粟“获不可不速，常以急疾为务”，“获豆之法，英黑而茎苍，橄收无疑”，“获麻之法，霜下实成，速祈之。”</p>
         `,
 
-        hot: plowHotArr.filter(v => v.type === '收货' || v.isChang)
+        hot: plowHotArr.filter(v => v.type === '收获' || v.isChang)
       }
     ]
   },

Code/src/App.tsx

@@ -112,6 +112,15 @@ export default function App() {
     store.dispatch({ type: 'layout/isHH', payload: isHHTemp })
   }, [])
 
+  const audioPlayFu = useCallback(() => {
+    // 播放背景音乐
+    const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
+    if (audioDom) {
+      if (audioDom.paused) audioDom.play()
+      else rootRef.current.removeEventListener('click', audioPlayFu)
+    }
+  }, [])
+
   useEffect(() => {
     rootRef.current = document.querySelector('#root')
     rootRef.current.style.width = planSize.width + 'px'
@@ -119,7 +128,10 @@ export default function App() {
 
     pageFullChangeFu()
     window.addEventListener('resize', pageFullChangeFu, false)
-  }, [pageFullChangeFu])
+
+    // 全局点击都播放背景音乐
+    rootRef.current.addEventListener('click', audioPlayFu)
+  }, [audioPlayFu, pageFullChangeFu])
 
   return (
     <>

Code/src/assets/styles/base.css

@@ -156,6 +156,17 @@ textarea {
     opacity: 1;
   }
 }
+#xuanQuan {
+  animation: xuanQuan 2s infinite linear;
+}
+@keyframes xuanQuan {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
 #bgImgBox {
   position: absolute;
   top: 0;

Code/src/assets/styles/base.less

@@ -191,6 +191,20 @@ textarea {
   }
 }
 
+// base页面的圈圈转动
+#xuanQuan {
+  animation: xuanQuan 2s infinite linear;
+}
+@keyframes xuanQuan {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
 #bgImgBox {
   position: absolute;
   top: 0;

Code/src/pages/A1_1base/index.module.scss

@@ -34,6 +34,17 @@
           & > img {
             width: 60px;
             height: auto;
+            position: relative;
+          }
+          & > div {
+            width: 100%;
+            text-align: center;
+          }
+          &:hover {
+            & > div {
+              transition: all 0.3s;
+              transform: scale(1.1);
+            }
           }
         }
       }

Code/src/pages/A1_1base/index.tsx

@@ -31,9 +31,9 @@ function A11base() {
 
         {/* 按钮 */}
         <div className='A11btn'>
-          <div className='hoverD' onClick={btnStartFu}>
-            <img onLoad={imgNumFu} src={`${baseURL}base/quan.png`} alt='' />
-            点击开始
+          <div onClick={btnStartFu}>
+            <img id='xuanQuan' onLoad={imgNumFu} src={`${baseURL}base/quan.png`} alt='' />
+            <div>点击开始</div>
           </div>
         </div>
       </div>

Code/src/pages/A1home/index.tsx

@@ -40,10 +40,6 @@ function A1home() {
   const btnStartFu = useCallback(() => {
     // 播放长视频
     setLastVideo(true)
-
-    // 播放背景音乐
-    const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
-    if (audioDom) audioDom.play()
   }, [])
 
   // 最后一个过长动画

Code/src/pages/A2visit/index.module.scss

@@ -10,11 +10,9 @@
       width: 100%;
       height: 100%;
       position: relative;
-      // opacity: 0;
-      // pointer-events: none;
+      opacity: 0;
+      pointer-events: none;
       transition: opacity 1s;
-      opacity: 1;
-      pointer-events: auto;
     }
     .pvBoxShow {
       opacity: 1;

Code/src/pages/A2visit/index.tsx

@@ -8,6 +8,7 @@ import NextPage from '@/components/NextPage'
 import FloorBtn from '@/components/FloorBtn'
 import BaseImg from '@/components/BaseImg'
 import useLoding from '@/components/ownUse/useLoding'
+import CatVideo from '@/components/CatVideo'
 
 function A2visit() {
   // 过度动画
@@ -18,10 +19,10 @@ function A2visit() {
     setCutVideoShow(true)
   }, [])
 
-  // // 过度动画播放完毕或者点击跳过
-  // const cutEndFu = useCallback(() => {
-  //   setCutVideoShow(false)
-  // }, [])
+  // 过度动画播放完毕或者点击跳过
+  const cutEndFu = useCallback(() => {
+    setCutVideoShow(false)
+  }, [])
 
   // 点击 跳下一个章节
   const [lastVideo, setLastVideo] = useState(false)
@@ -42,19 +43,18 @@ function A2visit() {
       />
 
       {/* 过度动画页面 */}
-      {/* {imgNow ? (
+      {imgNow ? (
         <CatVideo
           isShow={cutVideoShow}
           src={baseURL + myData.visit.videos[0]}
           parentFu={() => cutEndFu()}
           noBtn={true}
         />
-      ) : null} */}
+      ) : null}
 
       {/* 全景视频 */}
       {imgNow ? (
-        // <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
-        <div className={classNames('pvBox')}>
+        <div className={classNames('pvBox', cutVideoShow ? '' : 'pvBoxShow')}>
           <PanoVideo />
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='行拜谒礼' />