写不动了

Code/public/myData/myData.js

@@ -933,7 +933,7 @@ const myDataTemp = {
         txt: `
         <P>在汉代，农耕是农业生产的基础，而整地是其中至关重要的一个步骤。整地通常包括四个主要环节：耕地、耙地、耱地以及开沟起垄。</P>
         `,
-
+        // 热点
         hot: [
           {
             // 热点名字
@@ -1322,5 +1322,17 @@ const myDataTemp = {
         ]
       }
     ]
+  },
+  // 尾声(静态资源目录位置：staticData/end)
+  end: {
+    // 初始背景图路径+名字
+    baseImg: 'end/bg.jpg',
+    // 底部文字
+    txt: `
+    <p>《邀你至汉家》<b>展览策展人：</b>XX人</p>
+    <p><b>线上策展团队：</b></p>
+    <p>河南博物院：张先生 | 刘先生 | 李小姐 | 张小姐 | 詹先生</p>
+    <div>珠海市四维时代网络科技有限公司设计制作</div>
+    `
   }
 }

Code/src/App.tsx

@@ -27,6 +27,7 @@ const B4xian = React.lazy(() => import('./pages/B4xian'))
 
 // unity页面
 const C1unity = React.lazy(() => import('./pages/C1unity'))
+const C2unityEnd = React.lazy(() => import('./pages/C2unityEnd'))
 
 const Text = React.lazy(() => import('./pages/Text'))
 declare global {
@@ -138,6 +139,7 @@ export default function App() {
             <Route path='/yun' component={B3yun} exact />
             <Route path='/xian' component={B4xian} exact />
             <Route path='/unity/:id' component={C1unity} exact />
+            <Route path='/unend' component={C2unityEnd} exact />
             <Route path='/text' component={Text} exact />
             <Route path='*' component={NotFound} />
           </Switch>

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

@@ -18,7 +18,7 @@
         position: absolute;
         top: 56px;
         width: 280px;
-        left: 50%;
+        left: 51%;
         transform: translateX(-50%);
       }
       .A1loding {

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

@@ -1,4 +1,102 @@
 .A7end {
+  position: relative;
+  background-size: 100% 100%;
   :global {
+    .A7Vlogo {
+      position: absolute;
+      top: 40px;
+      width: 280px;
+      left: 51%;
+      transform: translateX(-50%);
+    }
+    .A7txt {
+      text-align: center;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 100px;
+      z-index: 10;
+      color: #fffddc;
+      & > div {
+        padding: 5px;
+        cursor: pointer;
+        font-size: 18px;
+        margin-bottom: 5px;
+        transition: all 0.3s;
+        &:hover {
+          background-image: url('../../assets/img/endAc.png');
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .A7floor {
+      position: absolute;
+      bottom: 10px;
+      font-size: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      pointer-events: none;
+      text-align: center;
+      color: rgba(149, 149, 149, 0.9);
+      b {
+        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;
+      }
+      div {
+        font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+          'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+        // text-align: justify;
+        text-align-last: justify;
+      }
+    }
+
+    // 蒙版
+    .A7model {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      pointer-events: none;
+      z-index: 10;
+      transition: all 0.3s;
+      background-color: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(6px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      font-size: 20px;
+      color: #fff;
+      .A7model1 {
+        margin-bottom: 20px;
+      }
+      .A7model2 {
+        width: 180px;
+        display: flex;
+        justify-content: space-between;
+        transition: all 0.3s;
+        color: #eacf60;
+        & > div {
+          padding: 5px;
+          cursor: pointer;
+          font-size: 18px;
+          &:hover {
+            color: rgba(255, 255, 255, 0.8);
+            background-image: url('../../assets/img/endAc.png');
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+    .A7modelShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

Code/src/pages/A7end/index.tsx

@@ -1,9 +1,38 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styles from './index.module.scss'
+import { baseURL, myData } from '@/utils/http'
+import classNames from 'classnames'
+import history from '@/utils/history'
+
 function A7end() {
+  const [isShow, setIsShow] = useState(false)
+
   return (
-    <div className={styles.A7end}>
-      <h1>A7end</h1>
+    <div
+      className={styles.A7end}
+      style={{ backgroundImage: `url(${baseURL}${myData.end.baseImg})` }}
+    >
+      {/* logo */}
+      <img className='A7Vlogo' src={`${baseURL}end/logo.png`} alt='' />
+
+      {/* 中间文字 */}
+      <div className='A7txt'>
+        <div onClick={() => history.push('/unend')}>陶庄园</div>
+        <div onClick={() => setIsShow(true)}>重新开始</div>
+        <div onClick={() => history.push('/more')}>内容导航</div>
+      </div>
+
+      {/* 底部文字 */}
+      <div className='A7floor' dangerouslySetInnerHTML={{ __html: myData.end.txt }}></div>
+
+      {/* 毛玻璃 */}
+      <div className={classNames('A7model', isShow ? 'A7modelShow' : '')}>
+        <div className='A7model1'>是否返回首页?</div>
+        <div className='A7model2'>
+          <div onClick={() => setIsShow(false)}>取消</div>
+          <div onClick={() => history.push('/')}>重新开始</div>
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -0,0 +1,18 @@
+.C2unityEnd {
+  :global {
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+    .unityBack {
+      position: absolute;
+      z-index: 10;
+      right: 25px;
+      bottom: 25px;
+      cursor: pointer;
+      width: 36px;
+      height: 36px;
+      background-size: 100% 100%;
+    }
+  }
+}

Code/src/pages/C2unityEnd/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { baseURL } from '@/utils/http'
+import history from '@/utils/history'
+function C2unityEnd() {
+  return (
+    // 待完善路径
+    <div className={styles.C2unityEnd}>
+      <iframe title='陶庄园' src='https://www.bilibili.com/' frameBorder='0'></iframe>
+      {/* 返回按钮 */}
+      <div
+        style={{ backgroundImage: `url(${baseURL}chef/back23.png)` }}
+        className='unityBack hoverD'
+        title='返回'
+        onClick={() => history.go(-1)}
+      ></div>
+    </div>
+  )
+}
+
+const MemoC2unityEnd = React.memo(C2unityEnd)
+
+export default MemoC2unityEnd

Code/src/types/declaration.d.ts

@@ -120,4 +120,8 @@ type MyDataType = {
       hot: PlowHotType[]
     }[]
   }
+  end: {
+    baseImg: string
+    txt: string
+  }
 }