耕作

Code/public/myData/myData.js

@@ -11,7 +11,7 @@ const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
 // 一些动态配置的数据
 const myDataTemp = {
   // 每次进页面都有加载中动画
-  isLdong: true,
+  isLdong: false,
 
   // 首页(静态资源目录位置：staticData/home)
   home: {
@@ -787,14 +787,14 @@ 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/chef)
   chef: {
@@ -916,5 +916,411 @@ const myDataTemp = {
         change: 'scale(3) translate(-143px, -106px)'
       }
     ]
+  },
+  // 田间耕作(静态资源目录位置：staticData/plow)
+  plow: {
+    // 最后的过场动画路径+名字
+    lastVideo: 'plow/end.mp4',
+    // 初始背景图路径+名字
+    baseImg: 'plow/bg.jpg',
+    // 主要信息
+    info: [
+      {
+        name: '整地',
+        // 视频路径+名字
+        videoSrc: 'plow/1.mp4',
+        // 文本信息
+        txt: `
+        <P>在汉代，农耕是农业生产的基础，而整地是其中至关重要的一个步骤。整地通常包括四个主要环节：耕地、耙地、耱地以及开沟起垄。</P>
+        `,
+
+        hot: [
+          {
+            // 热点名字
+            name: '整地1',
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '20%',
+              left: '30%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          },
+          {
+            // 热点名字
+            name: '整地2',
+
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot2.png',
+            // 热点定位百分比
+            loc: {
+              top: '40%',
+              left: '50%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          }
+        ]
+      },
+      {
+        name: '播种',
+        // 视频路径+名字
+        videoSrc: 'plow/2.mp4',
+        // 文本信息
+        txt: `
+        <p>汉代对播种的时间、用种量、行株距以及覆土深度等都有了切实的要求。汉代的播种方法有撒播、点播 穴播、和条播三种。西汉赵过发明的耧车将开沟和播种结合在一起，可一次播三行，一天可播种一顷一百汉亩。</p>
+        `,
+
+        hot: [
+          {
+            // 热点名字
+            name: '播种1',
+
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '20%',
+              left: '30%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          },
+          {
+            // 热点名字
+            name: '播种2',
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot2.png',
+            // 热点定位百分比
+            loc: {
+              top: '40%',
+              left: '50%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          }
+        ]
+      },
+      {
+        name: '中耕',
+        // 视频路径+名字
+        videoSrc: 'plow/3.mp4',
+        // 文本信息
+        txt: `
+        <p>中耕是我国传统农业生产技术体系中的重要环节。汉代继承这一优良传统，《沦胜之书》把“旱锄”作为“凡耕之本”中的一个重要环节，对各种作物都要求“有草锄之，不厌数多”。汉代农具中有专门用除草松土的铁锄。</p>
+        `,
+
+        hot: [
+          {
+            // 热点名字
+            name: '中耕1',
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '20%',
+              left: '30%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          },
+          {
+            // 热点名字
+            name: '中耕2',
+
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot2.png',
+            // 热点定位百分比
+            loc: {
+              top: '40%',
+              left: '50%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          }
+        ]
+      },
+      {
+        name: '施肥',
+        // 视频路径+名字
+        videoSrc: 'plow/4.mp4',
+        // 文本信息
+        txt: `
+        <p>通过施肥来提高地力也是我国农业的优良传统。汉代，泥胜之把“务粪泽”，王充把“厚加粪壤”作为“助地力”的重要措施。汉代已创造施用基肥、种肥和追肥等技术。</p>
+        `,
+
+        hot: [
+          {
+            // 热点名字
+            name: '施肥',
+
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '20%',
+              left: '30%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          },
+          {
+            // 热点名字
+            name: '施肥2',
+
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot2.png',
+            // 热点定位百分比
+            loc: {
+              top: '40%',
+              left: '50%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          }
+        ]
+      },
+      {
+        name: '收货',
+        // 视频路径+名字
+        videoSrc: 'plow/5.mp4',
+        // 文本信息
+        txt: `
+        <p>汉代非常重视及时收获。《沦胜之书》 在谈到各种作物的收获时都强调“早获”，粟“获不可不速，常以急疾为务”，“获豆之法，英黑而茎苍，橄收无疑”，“获麻之法，霜下实成，速祈之。”</p>
+        `,
+
+        hot: [
+          {
+            // 热点名字
+            name: '收货1',
+
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot1.png',
+            // 热点定位百分比
+            loc: {
+              top: '20%',
+              left: '30%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          },
+          {
+            // 热点名字
+            name: '收货2',
+            // 热点图片路径+名字
+            imgSrc: 'plow/hot2.png',
+            // 热点定位百分比
+            loc: {
+              top: '40%',
+              left: '50%'
+            },
+            data: [
+              {
+                name: '001',
+                txt: `
+              <h3>坐1</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              },
+              {
+                name: '002',
+                txt: `
+              <h3>坐2</h3>
+              <p>坐 两膝相并，双足在后，脚心在上，臀部落在脚根上为坐。跽即两膝相并，双足在后，脚心在上，膝以上身体直起是一种由坐到站的过渡状态。
+              <br/>
+              666666666666666666</p>
+              `,
+                imgArr: ['plow/hot/1.png']
+              }
+            ]
+          }
+        ]
+      }
+    ]
   }
 }

Code/src/App.tsx

@@ -15,6 +15,7 @@ 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 A7end = React.lazy(() => import('./pages/A7end'))
 const B1more = React.lazy(() => import('./pages/B1more'))
 
 // 云起图仙居 等热点集合页面
@@ -131,6 +132,7 @@ export default function App() {
             <Route path='/dance' component={A4dance} exact />
             <Route path='/chef' component={A5chef} exact />
             <Route path='/plow' component={A6plow} exact />
+            <Route path='/end' component={A7end} exact />
             <Route path='/more' component={B1more} exact />
             <Route path='/hots' component={B2hots} exact />
             <Route path='/yun' component={B3yun} exact />

Code/src/assets/styles/base.css

@@ -8,8 +8,8 @@
 }
 /* 全局css变量 */
 :root {
-  --themeColor: #cc1424;
-  --themeColor2: #272727;
+  --themeColor: #733c00;
+  --themeColor2: #ead98f;
   --fontNum: 16px;
 }
 html {
@@ -55,10 +55,10 @@ textarea {
   opacity: 0;
   transition: opacity 0.5s;
   text-align: center;
+  transform: scale(0.6);
 }
 .noFindPage .ant-result {
   padding: 20px !important;
-  transform: scale(0.8);
 }
 .noFindPage .ant-result .ant-result-subtitle {
   font-size: 20px;

Code/src/assets/styles/base.less

@@ -9,8 +9,8 @@
 
 /* 全局css变量 */
 :root {
-  --themeColor: #cc1424;
-  --themeColor2: #272727;
+  --themeColor: #733c00;
+  --themeColor2: #ead98f;
   --fontNum: 16px;
 }
 
@@ -67,9 +67,9 @@ textarea {
   opacity: 0;
   transition: opacity 0.5s;
   text-align: center;
+  transform: scale(0.6);
   .ant-result {
     padding: 20px !important;
-    transform: scale(0.8);
     .ant-result-subtitle {
       font-size: 20px;
     }

Code/src/components/HotIcon/index.tsx

@@ -6,7 +6,7 @@ type Props = {
   index: number
   clickSon: (index: number) => void
   hoverSrc: string
-  style?: any
+  style?: { top: string; left: string }
 }
 
 function HotIcon({ index, clickSon, hoverSrc, style }: Props) {

Code/src/index.tsx

@@ -1,41 +1,35 @@
 // import 'default-passive-events';
 
-import App from "./App";
-import store from "./store/index";
+import App from './App'
+import store from './store/index'
 
-import { Provider } from "react-redux";
-import { createRoot } from "react-dom/client";
+import { Provider } from 'react-redux'
+import { createRoot } from 'react-dom/client'
 
-import { ConfigProvider } from "antd";
+import { ConfigProvider } from 'antd'
 
 // 兼容360浏览器
-import {
-  StyleProvider,
-  legacyLogicalPropertiesTransformer,
-} from "@ant-design/cssinjs";
+import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs'
 
-import "dayjs/locale/zh-cn";
-import locale from "antd/locale/zh_CN";
+import 'dayjs/locale/zh-cn'
+import locale from 'antd/locale/zh_CN'
 
-const container = document.getElementById("root") as HTMLElement;
-const root = createRoot(container);
+const container = document.getElementById('root') as HTMLElement
+const root = createRoot(container)
 
 root.render(
   <ConfigProvider
     locale={locale}
     theme={{
       token: {
-        colorPrimary: " #CC1424",
-      },
+        colorPrimary: '#733c00'
+      }
     }}
   >
     <Provider store={store}>
-      <StyleProvider
-        hashPriority="high"
-        transformers={[legacyLogicalPropertiesTransformer]}
-      >
+      <StyleProvider hashPriority='high' transformers={[legacyLogicalPropertiesTransformer]}>
         <App />
       </StyleProvider>
     </Provider>
   </ConfigProvider>
-);
+)

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

@@ -90,12 +90,12 @@
       // 热点里面的图文信息
       .A5vTxt {
         position: absolute;
-        right: 0;
+        left: 0;
         top: 0;
         width: 50%;
         height: 100%;
         background-size: 100% 100%;
-        padding: 0px 20px 70px 100px;
+        padding: 0px 100px 70px 20px;
         display: flex;
         flex-direction: column;
         align-items: center;

Code/src/pages/A5chef/index.tsx

@@ -125,7 +125,7 @@ function A5chef() {
             Your browser does not support the video tag.
           </video>
 
-          {/* 热点右侧图文信息 */}
+          {/* 热点左侧图文信息 */}
           <div className='A5vTxt' style={{ backgroundImage: `url(${baseURL}chef/hotBg.png)` }}>
             <img src={baseURL + item.showImg} alt='' />
             <div dangerouslySetInnerHTML={{ __html: item.txt }}></div>

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

@@ -1,4 +1,91 @@
 .A6plow {
   :global {
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+    // 主要内容
+    .A6main {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.5s;
+
+      // 左侧按钮
+      .A6Lbtn {
+        position: absolute;
+        z-index: 10;
+        left: 0px;
+        top: 0;
+        width: 180px;
+        height: 100%;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 30px;
+        .A6LbtnRow {
+          width: 50px;
+          height: 50px;
+          background-size: 100% 100%;
+          cursor: pointer;
+          transition: all 0.3s;
+          margin-bottom: 5px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 14px;
+          padding-bottom: 3px;
+          &:hover {
+            background-image: url('../../assets/img/leftAc.png') !important;
+            color: #bd7656 !important;
+          }
+        }
+      }
+
+      // 底部文字
+      .A6txt {
+        position: absolute;
+        z-index: 11;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 66%;
+        background-size: 100% 100%;
+        padding: 10px 60px;
+        font-size: 14px;
+        color: #fffddc;
+      }
+
+      // 视频加热点
+      .A6videoBox {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        & > div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          opacity: 0;
+          pointer-events: none;
+          width: 100%;
+          height: 100%;
+          transition: all 0.5s;
+        }
+        .A6vShow {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+    .A6mainShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

Code/src/pages/A6plow/index.tsx

@@ -1,9 +1,161 @@
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import BaseImg from '@/components/BaseImg'
+import { baseURL, myData } from '@/utils/http'
+import EndVideo from '@/components/EndVideo'
+import NextPage from '@/components/NextPage'
+import classNames from 'classnames'
+import FloorBtn from '@/components/FloorBtn'
+import HotIcon from '@/components/HotIcon'
+import Hot2 from '../A2visit/PanoVideo/Hot2'
+import { PlowHotType } from '@/types'
+
 function A6plow() {
+  // 初始显示和隐藏
+  const [cutVideoShow, setCutVideoShow] = useState(false)
+
+  // 控制视频播放的方法
+  const videoPlayFu = useCallback((index: number) => {
+    setTimeout(() => {
+      const domAll: any = document.querySelectorAll('.A6video')
+      if (domAll && domAll.length) {
+        domAll.forEach((v: HTMLVideoElement, i: number) => {
+          if (index === i) v.play()
+          else {
+            v.pause()
+            v.currentTime = 0
+          }
+        })
+      }
+    }, 100)
+  }, [])
+
+  // 点击继续
+  const btnStart = useCallback(() => {
+    setCutVideoShow(true)
+    // 播放第一个整地的视频
+    videoPlayFu(0)
+  }, [videoPlayFu])
+
+  // 点击 跳下一个章节
+  const [lastVideo, setLastVideo] = useState(false)
+
+  // 左侧按钮的选中
+  const [leftAc, setLeftAc] = useState(0)
+
+  const leftAcFu = useCallback(
+    (index: number) => {
+      videoPlayFu(index)
+      setLeftAc(index)
+    },
+    [videoPlayFu]
+  )
+
+  // 底部文字
+  const floorTxt = useMemo(() => {
+    return myData.plow.info[leftAc].txt
+  }, [leftAc])
+
+  // 打开热点
+  const [hotInd, setHotInd] = useState(-1)
+
+  const hotInfo = useMemo(() => {
+    let info = {} as PlowHotType
+    const temp = myData.plow.info[leftAc].hot
+    if (temp && temp[hotInd]) {
+      info = temp[hotInd]
+    }
+
+    return info
+  }, [hotInd, leftAc])
+
   return (
     <div className={styles.A6plow}>
-      <h1>A6plow</h1>
+      {/* 初始静态图 */}
+      <BaseImg
+        isShow={cutVideoShow}
+        iconSrc={`${baseURL}plow/mulu.png`}
+        parentFu={() => btnStart()}
+        bgImg={`${baseURL}/${myData.plow.baseImg}`}
+      />
+
+      {/* 主要内容 */}
+      <div className={classNames('A6main', cutVideoShow ? 'A6mainShow' : '')}>
+        {/* 左侧title */}
+        <div className='A6Lbtn' style={{ backgroundImage: `url(${baseURL}plow/leftBg.png)` }}>
+          {myData.plow.info.map((item, index) => (
+            <div
+              key={index}
+              className='A6LbtnRow'
+              onClick={() => leftAcFu(index)}
+              style={{
+                backgroundImage: `url(${baseURL}plow/left${leftAc === index ? 'Ac' : ''}.png)`,
+                color: leftAc === index ? '#BD7656' : '#DACB8B'
+              }}
+            >
+              {item.name}
+            </div>
+          ))}
+        </div>
+
+        {/* 底部文字 */}
+        <div
+          className='A6txt'
+          style={{ backgroundImage: `url(${baseURL}plow/txtBg.png)` }}
+          dangerouslySetInnerHTML={{ __html: floorTxt }}
+        ></div>
+
+        {/* 视频加热点 */}
+        <div className='A6videoBox'>
+          {myData.plow.info.map((item, index) => (
+            <div className={classNames(leftAc === index ? 'A6vShow' : '')} key={index}>
+              <video
+                className='A6video'
+                playsInline
+                muted
+                webkit-playsinline='true'
+                x5-video-player-type='h5'
+                loop
+              >
+                <source type='video/mp4' src={baseURL + item.videoSrc} />
+                Your browser does not support the video tag.
+              </video>
+
+              {/* 热点 */}
+              {item.hot.map((v, i) => (
+                <HotIcon
+                  style={{
+                    top: v.loc.top,
+                    left: v.loc.left
+                  }}
+                  key={i}
+                  index={i}
+                  clickSon={val => setHotInd(val)}
+                  hoverSrc={v.imgSrc}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+
+        {/* 跳到下一章 */}
+        <NextPage clickSon={() => setLastVideo(true)} txt='结束耕作' />
+        {/* 右下角按钮 */}
+        <FloorBtn />
+      </div>
+
+      {hotInd >= 0 && hotInfo.name ? (
+        <Hot2 data={hotInfo.data} closeFu={() => setHotInd(-1)} name={hotInfo.name} />
+      ) : null}
+
+      {/* 结尾动画 */}
+      <EndVideo
+        lastVideo={lastVideo}
+        delDom='.A6main'
+        src={baseURL + myData.plow.lastVideo}
+        path='/end'
+        noBtn={true}
+      />
     </div>
   )
 }

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

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

Code/src/pages/A7end/index.tsx

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

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

@@ -16,3 +16,13 @@ export type VisitHotDataType = {
   txt: string
   imgArr: string[]
 }[]
+
+export type PlowHotType = {
+  name: string
+  imgSrc: string
+  loc: {
+    top: string
+    left: string
+  }
+  data: VisitHotDataType
+}

Code/src/types/declaration.d.ts

@@ -110,4 +110,14 @@ type MyDataType = {
       change: string
     }[]
   }
+  plow: {
+    lastVideo: string
+    baseImg: string
+    info: {
+      name: string
+      videoSrc: string
+      txt: string
+      hot: PlowHotType[]
+    }[]
+  }
 }