修改一波

Code/public/myData/myData.js

@@ -3,7 +3,7 @@ window.isHH = document.documentElement.clientWidth >= document.documentElement.c
 const isPcTemp = document.documentElement.clientWidth >= 1200
 
 // 本地开发静态资源目录
-const baseUrlLoc = 'http://192.168.0.18:8080/staticData/'
+const baseUrlLoc = 'http://192.168.20.55:8080/staticData/'
 
 // 发送请求基地址
 const apiUrlTemp = 'https://sit-handaizy.4dage.com/api/'

Code/src/App.tsx

@@ -12,6 +12,7 @@ import AsyncSpinLoding from './components/AsyncSpinLoding'
 import { useSelector } from 'react-redux'
 import Zshare from './components/ZshareOrMsg/Zshare'
 import Zmsg from './components/ZshareOrMsg/Zmsg'
+import Zguide from './components/Zguide'
 
 // import Vconsole from 'vconsole'
 // new Vconsole()
@@ -163,7 +164,7 @@ export default function App() {
   }, [audioPlayFu, pageFullChangeFu])
 
   // 分享和点赞
-  const { shareShow, msgShow } = useSelector((state: RootState) => state.A0Layout)
+  const { shareShow, msgShow, guideVideo } = useSelector((state: RootState) => state.A0Layout)
 
   return (
     <>
@@ -203,6 +204,14 @@ export default function App() {
       {/* 分享、点赞 */}
       {shareShow ? <Zshare /> : null}
       {msgShow ? <Zmsg /> : null}
+
+      {/* 操作指引视频 */}
+      {guideVideo ? (
+        <Zguide
+          src={guideVideo}
+          closeFu={() => store.dispatch({ type: 'layout/guideVideo', payload: '' })}
+        />
+      ) : null}
     </>
   )
 }

Code/src/components/BaseImg/index.tsx

@@ -34,6 +34,7 @@ type Props = {
   hidden?: boolean
   lastNum?: number
   bird?: string //鸟图，时辰图
+  isGuide?: string //操作指引
 }
 
 function BaseImg({
@@ -47,7 +48,8 @@ function BaseImg({
   imgNow,
   hidden = false,
   lastNum = 100,
-  bird
+  bird,
+  isGuide
 }: Props) {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
@@ -102,7 +104,9 @@ function BaseImg({
       ) : null}
 
       {/* 右下角按钮 */}
-      {loding >= 100 && bird ? <FloorBtn unityEnd={() => history.push('unend/end')} /> : null}
+      {loding >= 100 && bird ? (
+        <FloorBtn isGuide={isGuide} unityEnd={() => history.push('unend/end')} />
+      ) : null}
 
       <div
         className='BIbaseBtn'

Code/src/components/FloorBtn/index.module.scss

@@ -48,6 +48,12 @@
         background-image: url('../../assets/img/icon-mol1.png');
       }
     }
+    .FloorBtn5 {
+      background-image: url('../../assets/img/Zguide/icon-caozuo.png');
+      &:hover {
+        background-image: url('../../assets/img/Zguide/icon-caozuo1.png');
+      }
+    }
 
     // 新加的3个按钮
     .leftBtn {

Code/src/components/FloorBtn/index.tsx

@@ -16,9 +16,10 @@ type Props = {
   unityEnd?: () => void
   // 左上角的3个按钮是否显示,为true表示显示，默认为true
   leftBtnShow?: boolean
+  isGuide?: string //操作指引
 }
 
-function FloorBtn({ unityId, gameFu, plowFu, unityEnd, leftBtnShow = true }: Props) {
+function FloorBtn({ unityId, gameFu, plowFu, unityEnd, isGuide, leftBtnShow = true }: Props) {
   // 获取点赞数量
   const { likeNum } = useSelector((state: RootState) => state.A0Layout)
 
@@ -70,6 +71,15 @@ function FloorBtn({ unityId, gameFu, plowFu, unityEnd, leftBtnShow = true }: Pro
 
   return (
     <div className={styles.FloorBtn} id='FloorBtn'>
+      {/* 操作指引 */}
+      {isGuide ? (
+        <div
+          title='操作指引'
+          className='FloorBtn5'
+          onClick={() => store.dispatch({ type: 'layout/guideVideo', payload: isGuide })}
+        ></div>
+      ) : null}
+
       {gameFu ? <div title='游戏' className='FloorBtn0' onClick={gameFu}></div> : null}
       {plowFu ? <div title='汉代庄园田耕记' className='FloorBtn3' onClick={plowFu}></div> : null}
 

Code/src/components/Zguide/index.module.scss

@@ -0,0 +1,23 @@
+.Zguide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+  padding: 6% 15% 9%;
+  background-color: rgba(0, 0, 0, 0.6);
+  :global {
+    video {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+    }
+    #BtnRight {
+      right: auto;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 10px;
+    }
+  }
+}

Code/src/components/Zguide/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { baseURL } from '@/utils/http'
+import BtnRight from '../BtnRight'
+
+type Props = {
+  src: string
+  closeFu: () => void
+}
+
+function Zguide({ src, closeFu }: Props) {
+  return (
+    <div className={styles.Zguide}>
+      <video
+        autoPlay
+        playsInline
+        muted={true}
+        webkit-playsinline='true'
+        x5-video-player-type='h5'
+        controls={true}
+      >
+        <source type='video/mp4' src={baseURL + src} />
+        Your browser does not support the video tag.
+      </video>
+
+      {/* 右下角的返回按钮 */}
+      <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
+    </div>
+  )
+}
+
+const MemoZguide = React.memo(Zguide)
+
+export default MemoZguide

Code/src/pages/A2visit/index.tsx

@@ -54,6 +54,7 @@ function A2visit() {
         imgNow={imgNow}
         imgNumFu={imgNumFu}
         bird='cheQi'
+        isGuide='Zguide/visit.mp4'
       />
 
       {/* 过度动画页面 */}
@@ -79,7 +80,7 @@ function A2visit() {
 
           {/* 右下角按钮 */}
           {/* <FloorBtn unityId='1' /> */}
-          <FloorBtn unityEnd={() => history.push('unend/end')} />
+          <FloorBtn isGuide='Zguide/visit.mp4' unityEnd={() => history.push('unend/end')} />
         </div>
       ) : null}
 

Code/src/pages/A2visit2/index.tsx

@@ -173,6 +173,7 @@ function A2visit2() {
             : undefined
         }
         unityEnd={() => history.push('unend/end')}
+        isGuide={panoShow ? 'Zguide/visit2.mp4' : undefined}
       />
 
       {window.location.href.includes('?v=v2') ? null : (

Code/src/pages/A4dance/index.tsx

@@ -65,6 +65,7 @@ function A4dance() {
         imgNow={imgNow}
         imgNumFu={imgNumFu}
         bird='yueWu'
+        isGuide='Zguide/dance.mp4'
       />
       {/* 右上角地图 */}
       {baseSta ? <Zmap src='dance' /> : null}
@@ -115,7 +116,7 @@ function A4dance() {
           <NextPage clickSon={() => setLastVideo(true)} txt='后厨备宴' />
 
           {/* 右下角按钮 */}
-          <FloorBtn unityEnd={() => history.push('unend/end')} />
+          <FloorBtn isGuide='Zguide/dance.mp4' unityEnd={() => history.push('unend/end')} />
 
           {/* 中间的8个动画视频*/}
           <div

Code/src/pages/A5chef/index.tsx

@@ -76,6 +76,7 @@ function A5chef() {
           imgNow={imgNow}
           imgNumFu={imgNumFu}
           bird='houCu'
+          isGuide='Zguide/chef.mp4'
         />
 
         {/* 右上角地图 */}
@@ -168,7 +169,7 @@ function A5chef() {
             <NextPage clickSon={() => setLastVideo(true)} txt='田间耕作' />
 
             {/* 右下角按钮 */}
-            <FloorBtn unityEnd={() => history.push('unend/end')} />
+            <FloorBtn unityEnd={() => history.push('unend/end')} isGuide='Zguide/chef.mp4' />
           </div>
         ) : null}
       </div>

Code/src/pages/A6plow/index.tsx

@@ -100,6 +100,7 @@ function A6plow() {
         imgNumFu={imgNumFu}
         bird='tianJian'
         num={50}
+        isGuide='Zguide/plow.mp4'
       />
 
       {/* 右上角地图 */}
@@ -263,6 +264,7 @@ function A6plow() {
             leftBtnShow={staCut === '庄稼' ? false : true}
             plowFu={() => setCode(true)}
             unityEnd={() => history.push('unend/end')}
+            isGuide='Zguide/plow.mp4'
           />
         </div>
       ) : null}

Code/src/pages/A6xian/index.tsx

@@ -137,6 +137,7 @@ function A6xian() {
         imgNumFu={imgNumFu}
         num={70}
         bird='xianJu'
+        isGuide='Zguide/xianJu.mp4'
       />
 
       {/* 二级静态图 */}
@@ -155,7 +156,7 @@ function A6xian() {
         />
 
         {/* 右下角按钮 */}
-        <FloorBtn unityEnd={() => history.push('unend/end')} />
+        <FloorBtn unityEnd={() => history.push('unend/end')} isGuide='Zguide/xianJu.mp4' />
       </div>
 
       {/* 过度动画页面 */}
@@ -187,7 +188,7 @@ function A6xian() {
             升仙之途
           </div>
 
-          <FloorBtn unityEnd={() => history.push('unend/end')} />
+          <FloorBtn unityEnd={() => history.push('unend/end')} isGuide='Zguide/xianJu.mp4' />
         </div>
       ) : null}
 
@@ -242,7 +243,7 @@ function A6xian() {
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='结束冥想' />
           {/* 右下角按钮 */}
-          <FloorBtn unityEnd={() => history.push('unend/end')} />
+          <FloorBtn unityEnd={() => history.push('unend/end')} isGuide='Zguide/xianJu.mp4' />
 
           {/* 底部按钮 */}
           <div className='A6XimgBoxBtn'>

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

@@ -81,6 +81,13 @@
           background-image: url('../../assets/img/icon-xuanju1.png');
         }
       }
+      .A6rBtn3 {
+        background-image: url('../../assets/img/Zguide/icon-caozuo.png');
+        margin-right: 5px;
+        &:hover {
+          background-image: url('../../assets/img/Zguide/icon-caozuo1.png');
+        }
+      }
     }
 
     // 6个视频

Code/src/pages/B1more/index.tsx

@@ -12,6 +12,7 @@ import useLoding from '@/components/ownUse/useLoding'
 import { domDelOwnFu } from '@/utils/utilsSome'
 import VideoModel from '@/components/VideoModel'
 import { renClickPageFu } from './data'
+import store from '@/store'
 
 const videoObj = {
   探索庄园: {
@@ -175,6 +176,13 @@ function B1more() {
           className='A6rBtn'
           style={{ opacity: isLoding ? 0 : 1, zIndex: videoSrc ? 10 : 30 }}
         >
+          <div
+            className='A6rBtn3'
+            title='操作指引'
+            onClick={() =>
+              store.dispatch({ type: 'layout/guideVideo', payload: 'Zguide/more.mp4' })
+            }
+          ></div>
           <div className='A6rBtn1' title='陶庄园' onClick={() => history.push('/unend/end')}></div>
           <div className='A6rBtn2' title='仙居世界' onClick={() => history.push('/hots')}></div>
         </div>

Code/src/store/reducer/layout.ts

@@ -7,7 +7,9 @@ const initState = {
   // 打开分享
   shareShow: false,
   // 打开留言板
-  msgShow: false
+  msgShow: false,
+  // 操作指引视频
+  guideVideo: ''
 }
 
 // 定义 action 类型
@@ -17,6 +19,7 @@ type LayoutActionType =
   | { type: 'layout/likeNum'; payload: number }
   | { type: 'layout/shareShow'; payload: boolean }
   | { type: 'layout/msgShow'; payload: boolean }
+  | { type: 'layout/guideVideo'; payload: string }
 
 // 频道 reducer
 export default function layoutReducer(state = initState, action: LayoutActionType) {
@@ -32,6 +35,8 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
       return { ...state, shareShow: action.payload }
     case 'layout/msgShow':
       return { ...state, msgShow: action.payload }
+    case 'layout/guideVideo':
+      return { ...state, guideVideo: action.payload }
     default:
       return state
   }