你妹的

Code/public/myData/myData.js

@@ -12,7 +12,7 @@ const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
 const myDataTemp = {
   // 开发调试为 false  正式上线为  true
   // 开发调试的时候 取消所有加载进度条 所有的视频动画都加上跳过按钮
-  isLdong: false,
+  isLdong: true,
 
   // 首页(静态资源目录位置：staticData/home)
   home: {
@@ -767,7 +767,7 @@ const myDataTemp = {
       }
     ]
   },
-  // 仙居(静态资源目录位置：staticData/xian)
+  // 仙居世界(静态资源目录位置：staticData/xian)
   xian: [
     // 这里id不要自己修改！
     {
@@ -1336,17 +1336,7 @@ const myDataTemp = {
     <div>珠海市四维时代网络科技有限公司设计制作</div>
     `
   },
-
-  // more: [
-
-  //   {
-  //     name: '汉代风华',
-  //     info: {
-
-  //     }
-  //   },
-  // ]
-  // 尾声(静态资源目录位置：staticData/more)
+  // 更多(静态资源目录位置：staticData/more)
   more: {
     // 视频位置 more/
     // 从 探索庄园=》汉代风华 播放 1.mp4
@@ -1405,7 +1395,7 @@ const myDataTemp = {
           path: '/dance',
           // 热点定位百分比
           loc: {
-            top: '10%',
+            top: '20%',
             left: '20%'
           }
         },
@@ -1997,7 +1987,299 @@ const myDataTemp = {
     },
     文物欣赏: {
       // 背景图路径+名字
-      bg: 'more/bg3.jpg'
+      bg: 'more/bg3.jpg',
+      dataArr: [
+        {
+          name: '车骑拜谒',
+          info: [
+            {
+              name: '三层红釉陶望楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '釉陶乐俑群',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo2.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'video',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/2.mp4',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '铜鋞',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo3.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'model',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/3.4dage',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '收租图陶仓楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo4.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/4.jpg',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '绘彩人物舞蹈陶仓楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo5.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/5.jpg',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '三层红釉陶望楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '釉陶乐俑群',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo2.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'video',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/2.mp4',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '铜鋞',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo3.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'model',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/3.4dage',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '收租图陶仓楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo4.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/4.jpg',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '绘彩人物舞蹈陶仓楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo5.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/5.jpg',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '三层红釉陶望楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '釉陶乐俑群',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo2.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'video',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/2.mp4',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '铜鋞',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo3.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'model',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/3.4dage',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '收租图陶仓楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo4.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/4.jpg',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            },
+            {
+              name: '绘彩人物舞蹈陶仓楼',
+              // 下面的小图路径+名字
+              suoSrc: 'more/visit/suo5.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/visit/5.jpg',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            }
+          ]
+        },
+        {
+          name: '主客宴请',
+          info: [
+            {
+              name: '主客宴请1',
+              // 下面的小图路径+名字
+              suoSrc: 'more/banquet/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/banquet/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            }
+          ]
+        },
+        {
+          name: '乐舞百戏',
+          info: [
+            {
+              name: '乐舞百戏1',
+              // 下面的小图路径+名字
+              suoSrc: 'more/banquet/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/banquet/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            }
+          ]
+        },
+        {
+          name: '后厨备宴',
+          info: [
+            {
+              name: '后厨备宴1',
+              // 下面的小图路径+名字
+              suoSrc: 'more/banquet/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/banquet/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            }
+          ]
+        },
+        {
+          name: '田间耕作',
+          info: [
+            {
+              name: '田间耕作1',
+              // 下面的小图路径+名字
+              suoSrc: 'more/banquet/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/banquet/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            }
+          ]
+        },
+        {
+          name: '仙居世界',
+          info: [
+            {
+              name: '仙居世界1',
+              // 下面的小图路径+名字
+              suoSrc: 'more/banquet/suo1.png',
+              // 里面详情的类型 图片：img 视频：video 模型：model
+              type: 'img',
+              // 里面的大图/视频/模型 路径+名字
+              inSrc: 'more/banquet/1.png',
+              // 里面的文字介绍
+              inTxt: `
+              <p>这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物简介这是一段文物</p>
+              `
+            }
+          ]
+        }
+      ]
     }
   }
 }

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

@@ -0,0 +1,59 @@
+.HotInfo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20;
+  background-size: 100% 100%;
+  transition: all 0.3s;
+  display: flex;
+  padding: 80px 100px;
+  :global {
+    .S3Ileft {
+      width: calc(50% - 20px);
+      margin-right: 40px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain !important;
+        pointer-events: none;
+      }
+      video {
+        width: 100%;
+        height: 100%;
+      }
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .S3Iright {
+      width: calc(50% - 20px);
+      letter-spacing: 4px;
+
+      h3 {
+        font-size: 26px;
+        margin-bottom: 15px;
+        color: #eacf60;
+      }
+      & > div {
+        height: calc(100% - 60px);
+        overflow-y: auto;
+        color: #fff;
+        line-height: 22px;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        div {
+          font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+            'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+        }
+        p {
+          font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+            'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+        }
+      }
+    }
+  }
+}

Code/src/pages/B1more/S3goods/HotInfo/index.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import BtnRight from '@/components/BtnRight'
+import { GoodsType } from '@/types'
+import { baseURL } from '@/utils/http'
+
+type Props = {
+  closeFu: () => void
+  info: GoodsType
+}
+
+function HotInfo({ closeFu, info }: Props) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (info.type === 'video') {
+      setTimeout(() => {
+        if (videoRef.current) videoRef.current.play()
+      }, 100)
+    }
+  }, [info.type])
+
+  return (
+    <div id='HotOpCss' className={styles.HotInfo}>
+      {/* 左边主体 */}
+      <div className='S3Ileft'>
+        {info.type === 'img' ? (
+          <img src={baseURL + info.inSrc} alt='' />
+        ) : info.type === 'video' ? (
+          <video muted ref={videoRef} src={baseURL + info.inSrc} controls></video>
+        ) : (
+          <iframe
+            title={info.name}
+            src={`${baseURL}modelLoding/model.html?u=${info.inSrc}`}
+            frameBorder='0'
+          ></iframe>
+        )}
+      </div>
+
+      {/* 右边文字 */}
+      <div className='S3Iright'>
+        <h3 className='sizeNo'>{info.name}</h3>
+        <div dangerouslySetInnerHTML={{ __html: info.inTxt }}></div>
+      </div>
+
+      {/* 右下角的返回按钮 */}
+      <BtnRight imgName='back' clickSon={() => closeFu()} title='返回' />
+    </div>
+  )
+}
+
+const MemoHotInfo = React.memo(HotInfo)
+
+export default MemoHotInfo

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

@@ -3,6 +3,87 @@
   height: 100%;
   background-size: 100% 100%;
   position: relative;
+  padding: 40px 40px 80px;
   :global {
+    .S3main {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      .S3row {
+        width: 28px;
+        display: flex;
+        height: 100%;
+        transition: width 0.5s;
+        .S3rowTit {
+          cursor: pointer;
+          width: 28px;
+          height: 100%;
+          background-size: 100% 100%;
+          color: #3d2726;
+          font-size: 16px;
+          transition: color 0.3s;
+          padding-top: 84px;
+          & > div {
+            text-align: center;
+            height: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
+          &:hover {
+            color: #fff1a7;
+          }
+        }
+        .S3rowZhan {
+          width: 0;
+          height: 100%;
+          transition: width 0.5s;
+          overflow-x: auto;
+          overflow-y: hidden;
+          padding: 15px 0;
+          white-space: nowrap;
+          display: inline-block;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          .S3zRow {
+            display: inline-block;
+            width: 38px;
+            height: 100%;
+            background-size: 100% 100%;
+            overflow: hidden;
+            padding-top: 20px;
+            color: #664824;
+            writing-mode: vertical-lr;
+            font-size: 12px;
+            letter-spacing: 4px;
+            line-height: 38px;
+            position: relative;
+            .S3zRimg {
+              position: absolute;
+              right: 0;
+              bottom: 15px;
+              height: 70px;
+              width: auto;
+              object-fit: fill !important;
+            }
+          }
+        }
+      }
+      // 展开状态
+      .S3rowShow {
+        max-width: calc(100% - 168px);
+        width: auto;
+
+        .S3rowTit {
+          color: #fff1a7;
+        }
+
+        .S3rowZhan {
+          width: calc(100% - 28px);
+        }
+      }
+    }
   }
 }

Code/src/pages/B1more/S3goods/index.tsx

@@ -1,6 +1,19 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { baseURL, myData } from '@/utils/http'
+import { GoodsKeyType, GoodsType } from '@/types'
+import classNames from 'classnames'
+import HotInfo from './HotInfo'
+
+const txtBg = {
+  全部: 'more/txtBg/1quanbu.png',
+  车骑拜谒: 'more/txtBg/2cheqi.png',
+  主客宴请: 'more/txtBg/3zhuke.png',
+  乐舞百戏: 'more/txtBg/4yuewu.png',
+  后厨备宴: 'more/txtBg/5houchu.png',
+  田间耕作: 'more/txtBg/6tianjian.png',
+  仙居世界: 'more/txtBg/7xianju.png'
+}
 
 type Props = {
   hidden: boolean
@@ -8,13 +21,124 @@ type Props = {
 const data = myData.more['文物欣赏']
 
 function S3goods({ hidden }: Props) {
+  const [key, setKey] = useState<GoodsKeyType>('全部')
+
+  useEffect(() => {
+    if (sroolRef.current) {
+      sroolRef.current.scrollLeft = 0
+    }
+  }, [key])
+
+  const listAll = useMemo(() => {
+    let arr: {
+      name: GoodsKeyType
+      info: GoodsType[]
+    }[] = []
+
+    let temp: GoodsType[] = []
+
+    data.dataArr.forEach(v => {
+      arr.push(v)
+
+      v.info.forEach(c => {
+        temp.push(c)
+      })
+    })
+
+    arr.unshift({
+      name: '全部',
+      info: temp
+    })
+    return arr
+  }, [])
+
+  // 滚轮和拖动
+  const [isFlag, setIsFlag] = useState(false)
+
+  const sroolRef = useRef<HTMLDivElement>(null)
+
+  const mousemoveFu = useCallback(
+    (ev: any, flag?: boolean) => {
+      if (sroolRef.current) {
+        if (flag && !isFlag) {
+          const nowMove = sroolRef.current.scrollLeft
+
+          // 滚轮
+          let num = 50
+          if (ev.deltaY < 0) num = -num
+          sroolRef.current.scrollLeft = nowMove + num
+        } else if (isFlag) {
+          const nowMove = sroolRef.current.scrollLeft
+
+          // 鼠标按住移动
+          sroolRef.current.scrollLeft = nowMove - ev.movementX
+        }
+      }
+    },
+    [isFlag]
+  )
+
+  const row2Bac = useCallback((index2: number) => {
+    const num = index2 % 3
+    return `${baseURL}more/txtBg/ban${num + 1}.jpg`
+  }, [])
+
+  // 打开详情
+  const [openInfo, setOpenInfo] = useState({} as GoodsType)
+
   return (
     <div
       hidden={hidden}
       className={styles.S3goods}
-      style={{ backgroundImage: `url(${baseURL + data.bg})` }}
+      style={{ backgroundImage: `url(${baseURL + data.bg})`, zIndex: openInfo.name ? 50 : 1 }}
     >
-      <h1>S3goods</h1>
+      <div className='S3main' hidden={!!openInfo.name}>
+        {listAll.map((item1, index1) => (
+          <div className={classNames('S3row', key === item1.name ? 'S3rowShow' : '')} key={index1}>
+            {/* 一直有的 */}
+            <div
+              onClick={() => setKey(item1.name)}
+              className='S3rowTit'
+              style={{ backgroundImage: `url(${baseURL + Reflect.get(txtBg, item1.name)})` }}
+            >
+              <div>{item1.name}</div>
+            </div>
+            {/* 展开的 */}
+            <div
+              className='S3rowZhan'
+              style={{ cursor: isFlag ? 'move' : 'pointer' }}
+              ref={key === item1.name ? sroolRef : null}
+              onMouseDown={() => setIsFlag(true)}
+              onMouseUp={() => setIsFlag(false)}
+              onMouseLeave={() => setIsFlag(false)}
+              onMouseMove={e => mousemoveFu(e)}
+              onWheel={e => mousemoveFu(e, true)}
+            >
+              {item1.info.map((item2, index2) => (
+                <div
+                  onClick={() => setOpenInfo(item2)}
+                  className='S3zRow sizeNo'
+                  key={index2}
+                  style={{ backgroundImage: `url(${row2Bac(index2)})` }}
+                >
+                  {item2.name}
+                  {/* 上下的线 待完善 */}
+                  {/* <div className='S3zRxian'></div>
+                  <div className='S3zRxian S3zRxian2'></div> */}
+
+                  {/* 右下角图片 */}
+                  <img className='S3zRimg' src={baseURL + item2.suoSrc} alt='' />
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 打开热点详情 */}
+      {openInfo.name ? (
+        <HotInfo info={openInfo} closeFu={() => setOpenInfo({} as GoodsType)} />
+      ) : null}
     </div>
   )
 }

Code/src/pages/B1more/index.tsx

@@ -75,7 +75,7 @@ function B1more() {
       {/* 初始静态图 */}
       <BaseImg isShow={!isLoding} iconSrc={``} parentFu={() => setIsLoding(false)} moreSta={true} />
 
-      {/* 6个视频  待完善 调试的时候不显示 */}
+      {/* 6个视频 */}
       {myData.more.videos.map((src, index) => (
         <div
           className={classNames('A6videoBox', videoSrc === src ? 'A6videoBoxShow' : '')}

Code/src/pages/B4xian/index.tsx

@@ -10,14 +10,15 @@ function B4xian() {
   const mousemoveFu = useCallback(
     (ev: any, flag?: boolean) => {
       if (xianRef.current) {
-        const nowMove = xianRef.current.scrollLeft
-
         if (flag && !isFlag) {
+          const nowMove = xianRef.current.scrollLeft
           // 滚轮
           let num = 50
           if (ev.deltaY < 0) num = -num
           xianRef.current.scrollLeft = nowMove + num
         } else if (isFlag) {
+          const nowMove = xianRef.current.scrollLeft
+
           // 鼠标按住移动
           xianRef.current.scrollLeft = nowMove - ev.movementX
         }

Code/src/types/api/layot.d.ts

@@ -26,3 +26,20 @@ export type PlowHotType = {
   }
   data: VisitHotDataType
 }
+
+export type GoodsType = {
+  name: string
+  suoSrc: string
+  type: 'img' | 'video' | 'model'
+  inSrc: string
+  inTxt: string
+}
+
+export type GoodsKeyType =
+  | '全部'
+  | '车骑拜谒'
+  | '主客宴请'
+  | '乐舞百戏'
+  | '后厨备宴'
+  | '田间耕作'
+  | '仙居世界'

Code/src/types/declaration.d.ts

@@ -160,6 +160,10 @@ type MyDataType = {
     }
     文物欣赏: {
       bg: string
+      dataArr: {
+        name: GoodsKeyType
+        info: GoodsType[]
+      }[]
     }
   }
 }

资源/staticData/modelLoding/model.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="./4dage.js"></script>
+    <title>Document</title>
+    <style>
+      html {
+        overflow: hidden;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="ui"></div>
+    <script>
+      let src = getQueryVariable('u')
+    
+
+      // fdage.embed( number, {
+      fdage.embed(`../${src}`, {
+        transparentBackground: true,
+        width: 800,
+        height: 600,
+        autoStart: true,
+        fullFrame: true,
+        pagePreset: false
+      })
+    </script>
+  </body>
+</html>

资源/staticData/more/modelLoding/model.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="./4dage.js"></script>
+  <title>Document</title>
+  <style>
+    html {
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="ui"></div>
+  <script>
+    let number = getQueryVariable("m");
+    let num = getQueryVariable("n");
+    let type = getQueryVariable("r");
+    // console.log('ppppppppp',number);
+
+    // window.autoRotate = true; // 是否自动旋转
+
+    
+    // 打包配置(甲方没有https)
+    // let src = '/web/staticData'
+    let src = ''
+
+    if (window.location.href.includes('http://')) {
+      // 本地环境
+      src = 'http://127.0.0.1:8080/web/staticData'
+    } else {
+      // 正式环境
+      src = '/web/staticData'
+    }
+
+    // fdage.embed( number, {
+    fdage.embed(`${src}/${type}/${number}/${num}.4dage`, {
+      transparentBackground: true,
+      width: 800,
+      height: 600,
+      autoStart: true,
+      fullFrame: true,
+      pagePreset: false
+    });
+  </script>
+</body>
+
+</html>