后厨up

Code/public/myData/myData.js

@@ -10,9 +10,8 @@ const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
 
 // 一些动态配置的数据
 const myDataTemp = {
-  // HH:横屏  SS:竖屏
-
-  // 如果横屏竖屏用同样的数据，只需要在HH(横屏中放一份就可以了)
+  // 每次刷新页面都从首页开始/每次进页面都有加载中动画
+  isLdong: false,
 
   // 首页(静态资源目录位置：staticData/HH/home)
   home: {
@@ -780,13 +779,110 @@ const myDataTemp = {
       <p>壁画长4.15米，宽0.32米</p>
       <br />
       <p>它“讲述”了西汉一对夫妇死后升仙的“故事”。“壁画距今已2000多年了，是国内发现最完整的西汉壁画，被学术界和文物考古界誉为“国宝级文物”。</p>`
-    },
-    {
-      id: 3,
-      name: '汉代先民的神仙信仰',
-      tit: '墓室壁画',
-      txt: `
-      <p>资料待完善</p>`
     }
-  ]
+    // {
+    //   id: 3,
+    //   name: '汉代先民的神仙信仰',
+    //   tit: '墓室壁画',
+    //   txt: `
+    //   <p>资料待完善</p>`
+    // }
+  ],
+  // 后厨备宴(静态资源目录位置：staticData/HH/chef)
+  chef: {
+    // 初始背景图路径+名字
+    baseImg: 'chef/bg.jpg',
+    // 后厨群像图路径+名字
+    houChuImg: 'chef/houChu.jpg',
+    hot: [
+      {
+        // 热点名字
+        name: '㓥猪',
+        // 热点图片路径+名字
+        imgSrc: 'chef/hot1.png',
+        // 点击之后的播放动画路径+名字
+        videoSrc: 'chef/1.mp4',
+        // 里面展示的图片路径+名字
+        showImg: 'chef/show1.png',
+        // 里面展示的文本
+        txt: `
+        <p>将处理好的肉，按用途切割成条状、块状或薄片，</p>
+        <p>且常依照礼制或饮食习惯进行处理。</p>
+        `,
+        // 热点定位百分比
+        loc: {
+          top: '71%',
+          left: '9%'
+        },
+        // 点击热点之后放大的比例和位置
+        change: 'scale(3) translate(278px, -107px)'
+      },
+      {
+        // 热点名字
+        name: '割肉',
+        // 热点图片路径+名字
+        imgSrc: 'chef/hot2.png',
+        // 点击之后的播放动画路径+名字
+        videoSrc: 'chef/2.mp4',
+        // 里面展示的图片路径+名字
+        showImg: 'chef/show2.png',
+        // 里面展示的文本
+        txt: `
+        <p>割肉割肉将处理好的肉，按用途切割成条状、块状或薄片，</p>
+        <p>且常依照礼制或饮食习惯进行处理。</p>
+        `,
+        // 热点定位百分比
+        loc: {
+          top: '68%',
+          left: '44%'
+        },
+        // 点击热点之后放大的比例和位置
+        change: 'scale(3) translate(44px, -90px)'
+      },
+      {
+        // 热点名字
+        name: '淘洗',
+        // 热点图片路径+名字
+        imgSrc: 'chef/hot3.png',
+        // 点击之后的播放动画路径+名字
+        videoSrc: 'chef/3.mp4',
+        // 里面展示的图片路径+名字
+        showImg: 'chef/show3.png',
+        // 里面展示的文本
+        txt: `
+        <p>淘洗淘洗将处理好的肉，按用途切割成条状、块状或薄片，</p>
+        <p>且常依照礼制或饮食习惯进行处理。</p>
+        `,
+        // 热点定位百分比
+        loc: {
+          top: '65%',
+          left: '58%'
+        },
+        // 点击热点之后放大的比例和位置
+        change: 'scale(3) translate(-90px, -70px)'
+      },
+      {
+        // 热点名字
+        name: '烧灶',
+        // 热点图片路径+名字
+        imgSrc: 'chef/hot4.png',
+        // 点击之后的播放动画路径+名字
+        videoSrc: 'chef/4.mp4',
+        // 里面展示的图片路径+名字
+        showImg: 'chef/show4.png',
+        // 里面展示的文本
+        txt: `
+        <p>烧灶烧灶将处理好的肉，按用途切割成条状、块状或薄片，</p>
+        <p>且常依照礼制或饮食习惯进行处理。</p>
+        `,
+        // 热点定位百分比
+        loc: {
+          top: '63%',
+          left: '78%'
+        },
+        // 点击热点之后放大的比例和位置
+        change: 'scale(3) translate(-248px, -70px)'
+      }
+    ]
+  }
 }

Code/src/App.tsx

@@ -7,11 +7,13 @@ import SpinLoding from './components/SpinLoding'
 
 import NotFound from '@/components/NotFound'
 import store from './store'
+import { isLoc, myData } from './utils/http'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A2visit = React.lazy(() => import('./pages/A2visit'))
 const A3banquet = React.lazy(() => import('./pages/A3banquet'))
 const A4dance = React.lazy(() => import('./pages/A4dance'))
 const A5chef = React.lazy(() => import('./pages/A5chef'))
+const A6plow = React.lazy(() => import('./pages/A6plow'))
 const B1more = React.lazy(() => import('./pages/B1more'))
 
 // 云起图仙居 等热点集合页面
@@ -51,12 +53,12 @@ const planSize = {
 
 export default function App() {
   useEffect(() => {
-    // 打包环境 刷新页面从 首页 开始 --暂时关闭（待完善）
-    // if (!isLoc) {
-    //   if (window.location.hash !== '#/') {
-    //     window.location.href = window.location.origin
-    //   }
-    // }
+    // 打包环境 刷新页面从 首页 开始
+    if (!isLoc && myData.isLdong) {
+      if (window.location.hash !== '#/') {
+        window.location.href = window.location.origin
+      }
+    }
   }, [])
 
   // 根元素
@@ -126,6 +128,7 @@ export default function App() {
             <Route path='/banquet' component={A3banquet} exact />
             <Route path='/dance' component={A4dance} exact />
             <Route path='/chef' component={A5chef} exact />
+            <Route path='/plow' component={A6plow} exact />
             <Route path='/more' component={B1more} exact />
             <Route path='/hots' component={B2hots} exact />
             <Route path='/yun' component={B3yun} exact />

Code/src/pages/A1home/index.tsx

@@ -15,8 +15,7 @@ function A1home() {
   // 动画视频的ref
   const videoRef = useRef<HTMLVideoElement>(null)
 
-  // 待完善
-  const [loding, setLoding] = useState(100)
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
 

Code/src/pages/A2visit/index.tsx

@@ -28,8 +28,7 @@ function A2visit() {
   // 当前视频索引
   const [videoInd, setVideoInd] = useState(-1)
 
-  // 待完善
-  const [loding, setLoding] = useState(100)
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
 

Code/src/pages/A3banquet/index.tsx

@@ -28,8 +28,7 @@ function A3banquet() {
   // 当前视频索引
   const [videoInd, setVideoInd] = useState(-1)
 
-  // 待完善
-  const [loding, setLoding] = useState(100)
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
 

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

@@ -275,7 +275,7 @@
       opacity: 0;
       pointer-events: none;
       z-index: 30;
-      transition: all 0.5;
+      transition: all 0.5s;
       .A3videoLastBtn {
         position: absolute;
         width: 50px;

Code/src/pages/A4dance/index.tsx

@@ -11,8 +11,7 @@ import Hot2 from '../A2visit/PanoVideo/Hot2'
 function A4dance() {
   const { dataUrlSame } = useDataUrl()
 
-  // 待完善
-  const [loding, setLoding] = useState(100)
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
   const timeRR = useRef(-1)
 

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

@@ -1,4 +1,321 @@
 .A5chef {
   :global {
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+    .A5main {
+      background-size: 100% 100%;
+      width: 100%;
+      height: 100%;
+      transition: transform 1s;
+      // transform: scale(3) translate(44px, -90px);
+      // 初始
+      .A5base {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 11;
+        opacity: 1;
+        transition: opacity 0.5s;
+
+        .A5BIcon {
+          position: absolute;
+          top: -60px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 30px;
+          z-index: 10;
+          cursor: pointer;
+        }
+
+        & > img {
+          position: absolute;
+          top: 0;
+          width: 650px;
+          max-width: 90%;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        .A5baseBtn {
+          position: absolute;
+          bottom: 40px;
+          left: 50%;
+          transform: translateX(-50%);
+          cursor: pointer;
+          width: 100px;
+          height: auto;
+          z-index: 10;
+          & > img {
+            width: 100%;
+          }
+
+          .A5Btxt {
+            position: absolute;
+            top: 0;
+            left: 0;
+            color: #fffddc;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: all 0.5s;
+            &:hover {
+              color: #ead98f;
+            }
+          }
+          .A5Bxian {
+            position: absolute;
+            bottom: -10px;
+            left: 0;
+            width: 100%;
+            padding: 0 10px;
+            height: 2px;
+            & > div {
+              width: 100%;
+              height: 100%;
+              background-color: rgba(231, 214, 142, 0.6);
+              & > div {
+                width: 0%;
+                height: 100%;
+                background-color: #fffddc;
+              }
+            }
+          }
+        }
+      }
+      .A5baseHide {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      // 热点按钮页面
+      .A5hotBox {
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.5s;
+        position: relative;
+
+        // 每个热点
+        // 热点
+        .pvHot {
+          cursor: pointer;
+          position: absolute;
+          z-index: 9;
+          display: inline-block;
+          height: 30px;
+          width: auto;
+          & > img {
+            position: relative;
+            top: 0;
+            left: 0;
+            transition: all 0.3s;
+          }
+          .pvHotBase {
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+
+          .pvHotHover {
+            opacity: 0;
+          }
+          &:hover {
+            .pvHotBase {
+              opacity: 0;
+            }
+            .pvHotHover {
+              opacity: 1;
+            }
+          }
+        }
+
+        // 后厨群像
+        .A5chuBtn {
+          cursor: pointer;
+          position: absolute;
+          z-index: 10;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100px;
+          height: 36px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #fffddc;
+          background-size: 100% 100%;
+          transition: transform 0.3s;
+          &:hover {
+            transform: translateX(-50%) scale(1.1);
+          }
+        }
+
+        .A5chu {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 30;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.5s;
+          background-size: 100% 100%;
+          .A5hotBoxBack {
+            position: absolute;
+            z-index: 10;
+            right: 25px;
+            bottom: 25px;
+            cursor: pointer;
+            width: 36px;
+            height: 36px;
+            background-size: 100% 100%;
+          }
+        }
+        .A5chuShow {
+          opacity: 1;
+          pointer-events: auto;
+        }
+        // 跳到下一章 按钮
+        .pvBtn {
+          position: absolute;
+          right: 20px;
+          top: 50%;
+          transform: translateY(-50%);
+          cursor: pointer;
+          width: 120px;
+          height: auto;
+          z-index: 10;
+          & > img {
+            width: 100%;
+          }
+          & > div {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fffddc;
+            font-size: 16px;
+            transition: all 0.3s;
+            &:hover {
+              color: #ead98f;
+            }
+            & > span {
+              padding-left: 5px;
+              font-size: 14px;
+            }
+          }
+        }
+        .pvRRbtn {
+          position: absolute;
+          right: 25px;
+          bottom: 25px;
+          z-index: 10;
+          display: flex;
+
+          & > div {
+            background-size: 100% 100%;
+            transition: all 0.3s;
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+          }
+          .pvRRbtn2 {
+            background-image: url('../../assets/img/icon-more.png');
+            &:hover {
+              background-image: url('../../assets/img/icon-more1.png');
+            }
+          }
+        }
+      }
+      .A5hotBoxAc {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    // 点击热点之后出来的页面
+    .A5video {
+      position: absolute;
+      z-index: 30;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 1s;
+
+      // 热点里面的图文信息
+      .A5vTxt {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 50%;
+        height: 100%;
+        background-size: 100% 100%;
+        padding: 0px 20px 70px 100px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        & > img {
+          width: 50%;
+        }
+        & > div {
+          text-align: center;
+          margin-top: 20px;
+          color: #ead98f;
+          p {
+            margin-bottom: 10px;
+          }
+        }
+      }
+
+      // 热点里面的返回按钮
+      .A5vBack {
+        position: absolute;
+        z-index: 10;
+        right: 25px;
+        bottom: 25px;
+        cursor: pointer;
+        width: 36px;
+        height: 36px;
+        background-size: 100% 100%;
+      }
+    }
+    .A5videoAc {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    // 最后视频
+    .A5last {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 20;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 1s;
+    }
+    .A5lastAc {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

Code/src/pages/A5chef/index.tsx

@@ -1,9 +1,220 @@
-import React from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import useDataUrl from '@/components/ownUse/useDataUrl'
+import classNames from 'classnames'
+import { myData } from '@/utils/http'
+import { domDelOwnFu } from '@/utils/utilsSome'
+import history from '@/utils/history'
+import { ArrowRightOutlined } from '@ant-design/icons'
+
 function A5chef() {
+  const { dataUrlSame } = useDataUrl()
+
+  const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
+
+  const timeRR = useRef(-1)
+
+  useEffect(() => {
+    clearInterval(timeRR.current)
+    timeRR.current = window.setInterval(() => {
+      if (loding >= 100) {
+        clearInterval(timeRR.current)
+        return
+      }
+      setLoding(loding + 1)
+    }, 30)
+  }, [loding])
+
+  // 点击继续
+  const [baseFlag, setBaseFlag] = useState(true)
+
+  const btnStart = useCallback(() => {
+    if (loding >= 100) {
+      setBaseFlag(false)
+      // 0.5s之后删除初始盒子
+      setTimeout(() => {
+        domDelOwnFu('.A5base')
+      }, 500)
+    }
+  }, [loding])
+
+  // 点击 跳下一个章节
+  const [lastVideo, setLastVideo] = useState(false)
+  const videoRefLast = useRef<HTMLVideoElement>(null)
+
+  const lastVideoFu = useCallback(() => {
+    setLastVideo(true)
+
+    setTimeout(() => {
+      if (videoRefLast.current) {
+        videoRefLast.current.play()
+      }
+    }, 100)
+  }, [])
+
+  // 点击后厨群像
+  const [chuShow, setChuShow] = useState(false)
+
+  // 点击热点
+  const [hotInd, setHotInd] = useState(-1)
+  const hotTime = useRef(-1)
+  const hotIndFu = useCallback((index: number) => {
+    setBgMove(myData.chef.hot[index].change)
+    clearTimeout(hotTime.current)
+    hotTime.current = window.setTimeout(() => {
+      setHotInd(index)
+    }, 500)
+  }, [])
+
+  useEffect(() => {
+    if (hotInd === -1) setBgMove('')
+
+    setTimeout(() => {
+      const videoDomAll: any = document.querySelectorAll('.A5video video')
+      videoDomAll.forEach((v: HTMLVideoElement, index: number) => {
+        if (hotInd === index) {
+          v.currentTime = 0
+          v.play()
+        } else v.pause()
+      })
+    }, 100)
+  }, [hotInd])
+
+  const hotAcRef = useRef<HTMLVideoElement>(null)
+
+  // 热点位移
+  const [bgMove, setBgMove] = useState('')
+
   return (
     <div className={styles.A5chef}>
-      <h1>A5chef</h1>
+      {/* 整体盒子 */}
+      <div
+        className='A5main'
+        style={{ backgroundImage: `url(${dataUrlSame + myData.chef.baseImg})`, transform: bgMove }}
+      >
+        {/* 加载页面 */}
+        <div className={classNames('A5base', baseFlag ? '' : 'A5baseHide')}>
+          <img src={`${dataUrlSame}chef/mulu.png`} alt='' />
+          <div className='A5baseBtn' onClick={btnStart}>
+            {/* anpg动图 */}
+            <div className='A5BIcon'>
+              <img src={`${dataUrlSame}visit/arrow.png`} alt='' />
+            </div>
+
+            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+
+            <div className='A5Btxt'>{loding >= 100 ? '点击继续' : '加载中'}</div>
+            {loding >= 100 ? null : (
+              <div className='A5Bxian'>
+                <div>
+                  <div style={{ width: loding + '%' }}></div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 热点按钮页面 */}
+        <div className={classNames('A5hotBox', baseFlag ? '' : 'A5hotBoxAc')}>
+          {/* 循环渲染热点 */}
+          {myData.chef.hot.map((item, index) => (
+            <div
+              onClick={() => hotIndFu(index)}
+              key={index}
+              className='pvHot'
+              style={{
+                top: item.loc.top,
+                left: item.loc.left
+              }}
+            >
+              <img className='pvHotBase' src={`${dataUrlSame}visit/hot/hotBase.png`} alt='' />
+              <img className='pvHotHover' src={dataUrlSame + item.imgSrc} alt='' />
+            </div>
+          ))}
+
+          {/* 后厨群像 */}
+          <div
+            style={{ backgroundImage: `url(${dataUrlSame}chef/houChu.jpg)` }}
+            className={classNames('A5chu', chuShow ? 'A5chuShow' : '')}
+          >
+            {/* 返回按钮 */}
+            <div
+              style={{ backgroundImage: `url(${dataUrlSame}chef/back23.png)` }}
+              className='A5hotBoxBack hoverD'
+              title='返回'
+              onClick={() => setChuShow(false)}
+            ></div>
+          </div>
+          <div
+            onClick={() => setChuShow(true)}
+            className='A5chuBtn'
+            style={{ backgroundImage: `url(${dataUrlSame}chef/chuBtn.png)` }}
+          >
+            后厨群像
+          </div>
+
+          {/* 跳到下一章 */}
+          <div className='pvBtn'>
+            <img src={`${dataUrlSame}visit/btn.png`} alt='' />
+            <div onClick={lastVideoFu}>
+              田间耕作
+              <ArrowRightOutlined />
+            </div>
+          </div>
+          <div className='pvRRbtn'>
+            {/* 更多 跳新页面 */}
+            <div title='更多' className='pvRRbtn2' onClick={() => history.push('/more')}></div>
+          </div>
+        </div>
+      </div>
+
+      {/* 点击热点之后出来的视频 */}
+      {myData.chef.hot.map((item, index) => (
+        <div key={index} className={classNames('A5video', hotInd === index ? 'A5videoAc' : '')}>
+          <video
+            ref={hotInd === index ? hotAcRef : null}
+            playsInline
+            muted
+            webkit-playsinline='true'
+            x5-video-player-type='h5'
+            src={dataUrlSame + item.videoSrc}
+            loop
+          >
+            <source type='video/mp4' />
+            Your browser does not support the video tag.
+          </video>
+
+          {/* 热点右侧图文信息 */}
+          <div className='A5vTxt' style={{ backgroundImage: `url(${dataUrlSame}chef/hotBg.png)` }}>
+            <img src={dataUrlSame + item.showImg} alt='' />
+            <div dangerouslySetInnerHTML={{ __html: item.txt }}></div>
+          </div>
+
+          {/* 返回按钮 */}
+          <div
+            style={{ backgroundImage: `url(${dataUrlSame}chef/back22.png)` }}
+            className='A5vBack hoverD'
+            title='返回'
+            onClick={() => setHotInd(-1)}
+          ></div>
+        </div>
+      ))}
+
+      {/* 最后一个过长动画 */}
+      <div className={classNames('A5last', lastVideo ? 'A5lastAc' : '')}>
+        <video
+          ref={videoRefLast}
+          playsInline
+          muted
+          webkit-playsinline='true'
+          x5-video-player-type='h5'
+          src={dataUrlSame + myData.visit.lastVideo}
+          onEnded={() => history.push('/plow')}
+        >
+          <source type='video/mp4' />
+          Your browser does not support the video tag.
+        </video>
+      </div>
     </div>
   )
 }

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

@@ -0,0 +1,4 @@
+.A6plow {
+  :global {
+  }
+}

Code/src/pages/A6plow/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function A6plow() {
+  return (
+    <div className={styles.A6plow}>
+      <h1>A6plow</h1>
+    </div>
+  )
+}
+
+const MemoA6plow = React.memo(A6plow)
+
+export default MemoA6plow

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

@@ -33,6 +33,7 @@
             height: 100%;
             background-size: 100% 100%;
             opacity: 1;
+            transition: all 0.5s;
 
             // 闪光点
             .yunDian {
@@ -41,6 +42,10 @@
               width: 30px;
             }
           }
+          .yunll1AcHide {
+            opacity: 0;
+            pointer-events: none;
+          }
 
           // 二级高亮
           .yunAc2Box {

Code/src/pages/B3yun/index.tsx

@@ -76,10 +76,10 @@ function B3yun() {
             style={{ backgroundImage: `url(${dataUrlSame}yun/di.jpg)`, transform: imgChange }}
           >
             {/* 高亮白色盒子 */}
-            {ac1 > 0 && !ac2 ? (
+            {ac1 > 0 ? (
               <div
                 style={{ backgroundImage: `url(${dataUrlSame}yun/liang${ac1}.png)` }}
-                className='yunll1Ac'
+                className={classNames('yunll1Ac', ac2 ? 'yunll1AcHide' : '')}
               >
                 {/* 点 */}
                 {hotArr.map(v => (

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

@@ -1,4 +1,16 @@
 .B4xian {
+  overflow-x: auto;
+  overflow-y: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
   :global {
+    img {
+      pointer-events: none;
+      width: auto;
+      height: 100%;
+      max-width: 100000px;
+      object-fit: fill !important;
+    }
   }
 }

Code/src/pages/B4xian/index.tsx

@@ -1,9 +1,43 @@
-import React from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import useDataUrl from '@/components/ownUse/useDataUrl'
 function B4xian() {
+  const { dataUrlSame } = useDataUrl()
+
+  const [isFlag, setIsFlag] = useState(false)
+
+  const xianRef = useRef<HTMLDivElement>(null)
+
+  const mousemoveFu = useCallback(
+    (ev: any, flag?: boolean) => {
+      if (xianRef.current) {
+        const nowMove = xianRef.current.scrollLeft
+
+        if (flag && !isFlag) {
+          // 滚轮
+          let num = 50
+          if (ev.deltaY < 0) num = -num
+          xianRef.current.scrollLeft = nowMove + num
+        } else if (isFlag) {
+          // 鼠标按住移动
+          xianRef.current.scrollLeft = nowMove - ev.movementX
+        }
+      }
+    },
+    [isFlag]
+  )
   return (
-    <div className={styles.B4xian}>
-      <h1>B4xian</h1>
+    <div
+      className={styles.B4xian}
+      style={{ cursor: isFlag ? 'move' : 'default' }}
+      ref={xianRef}
+      onMouseDown={() => setIsFlag(true)}
+      onMouseUp={() => setIsFlag(false)}
+      onMouseLeave={() => setIsFlag(false)}
+      onMouseMove={e => mousemoveFu(e)}
+      onWheel={e => mousemoveFu(e, true)}
+    >
+      <img src={`${dataUrlSame}xian/chang.jpg`} alt='' />
     </div>
   )
 }

Code/src/pages/C1unity/index.tsx

@@ -34,7 +34,7 @@ function C1unity() {
     const res = Reflect.get(temp, isPc ? 'pc' : 'mo')
 
     // 待完善 设置 url
-    console.log(123, res)
+    setUrl(res)
 
     // 注册
     window.unityOpenHot = (index: number) => {

Code/src/types/declaration.d.ts

@@ -14,6 +14,7 @@ declare const myDataTemp: MyDataType
 declare const isPcTemp: boolean
 
 type MyDataType = {
+  isLdong: boolean
   home: {
     bgImg: string
     videos: string[]
@@ -88,4 +89,20 @@ type MyDataType = {
     tit: string
     txt: string
   }[]
+  chef: {
+    baseImg: string
+    houChuImg: string
+    hot: {
+      name: string
+      imgSrc: string
+      videoSrc: string
+      showImg: string
+      txt: string
+      loc: {
+        top: string
+        left: string
+      }
+      change: string
+    }[]
+  }
 }