Browse Source

更新一波

shaogen1995 11 months ago
parent
commit
0fcfb7546a

+ 120 - 1
Code/public/myData/myData.js

@@ -562,6 +562,62 @@ const banquetHotArr = [
         imgArr: ['banquet/hot/4.4dage']
       }
     ]
+  },
+  {
+    // 是否在更多模块中显示-true表示不显示
+    noShow: true,
+    // 热点名字
+    name: '宴饮礼节',
+    // 热点大小
+    size: 1,
+    // 垂直方向
+    atv: 2.37,
+    // 水平方向
+    ath: 10.3,
+    // pc鼠标移入显示的图片路径+名字
+    hoverSrc: 'banquet/hot/hot8.png',
+    // 热点定位百分比
+    loc: {
+      top: '-1%',
+      left: '-1%'
+    },
+    data: [
+      {
+        name: '宴饮礼节',
+        txt: `<p>《礼记·曲礼》中有详细记载:“凡进食之礼,左殽右胾。食居人之左,羹居人之右”。即饭要放在客人的左边,汤则置于客人的右边等。</p>`,
+        imgArr: ['banquet/hot/52.jpg']
+      }
+    ]
+  },
+  {
+    //是否是文物
+    isModel: true,
+    // 是否在更多模块中显示-true表示不显示
+    noShow: true,
+    // 热点名字
+    name: '“君幸食”小漆盘',
+    // 热点大小
+    size: 1,
+    // 垂直方向
+    atv: 8.37,
+    // 水平方向
+    ath: 10.3,
+    // pc鼠标移入显示的图片路径+名字
+    hoverSrc: 'banquet/hot/hot9.png',
+    // 热点定位百分比
+    loc: {
+      top: '-1%',
+      left: '-1%'
+    },
+    data: [
+      {
+        name: '“君幸食”小漆盘',
+        txt: `<p>西汉,1972年湖南省长沙市马王堆一号汉墓出土,口径18.3厘米,高3厘米。</p>
+        <p>盛食器。盘内涂红漆,中心部分黑漆底上朱绘卷云纹四组。卷云纹中间黑漆书写“君幸食”三字,意为“请您进餐”。盘外髹黑漆,近底部朱书“一升半升”四字。</p>
+        `,
+        imgArr: ['banquet/hot/53.png']
+      }
+    ]
   }
 ]
 
@@ -587,6 +643,7 @@ const danceHotArr = [
       left: '-1%'
     }
   },
+  //汉代乐舞百戏 --特殊热点,不用图标和定位
   {
     // 热点名字
     name: '汉代乐舞百戏',
@@ -794,6 +851,51 @@ const plowHotArr = [
         imgArr: ['plow/hot/57.png']
       }
     ]
+  },
+  // 汉代农具--特殊热点,不用图标和定位
+  {
+    // 一直存在
+    isChang: true,
+    // 是否在更多模块中显示-true表示不显示
+    noShow: true,
+    name: '汉代农具',
+    data: [
+      {
+        name: '铁锛',
+        txt: `<p>铁器,汉代,高19.9,刃宽5.7,銎口宽5,銎口长6.5,现藏河南博物院。</p>`,
+        imgArr: ['plow/hot/58.png']
+      },
+      {
+        name: '铁䦆',
+        txt: `<p>铁器,汉代,横8.5,纵11.4厘米,现藏河南博物院。</p>`,
+        imgArr: ['plow/hot/59.png']
+      },
+      {
+        name: '铁镢',
+        txt: `<p>铁器,汉代 ,銎口宽2.3,刃宽4.5,銎口长4.9,高10厘米,现藏河南博物院。</p>`,
+        imgArr: ['plow/hot/60.png']
+      },
+      {
+        name: '铁铲',
+        txt: `<p>铁器,汉,銎口宽2.8,刃宽12,銎口长6,高12厘米,现藏河南博物院。</p>`,
+        imgArr: ['plow/hot/61.png']
+      },
+      {
+        name: '铁钩',
+        txt: `<p>铁器,汉代,纵21.5厘米,现藏河南博物院。</p>`,
+        imgArr: ['plow/hot/62.png']
+      },
+      {
+        name: '铁犁铧',
+        txt: `<p>铁器,汉,横25.7,纵40 厘米,现藏河南博物院。</p>`,
+        imgArr: ['plow/hot/63.png']
+      },
+      {
+        name: '双齿铁镢',
+        txt: `<p>铁器,汉,上宽8.5,高21.6,齿长14.5厘米,现藏河南博物院。</p>`,
+        imgArr: ['plow/hot/64.png']
+      }
+    ]
   }
 ]
 
@@ -805,7 +907,7 @@ moreHotArr = moreHotArr.filter(v => !v.noShow)
 const myDataTemp = {
   // 开发调试为 false  正式上线为  true
   // 开发调试的时候 取消所有加载进度条 所有的视频动画都加上跳过按钮
-  isLdong: false,
+  isLdong: true,
 
   // 首页(静态资源目录位置:staticData/home)
   home: {
@@ -1740,6 +1842,23 @@ const myDataTemp = {
               type: 'video',
               inSrc: 'more/banquet/054.mp4',
               inTxt: ``
+            },
+            {
+              name: '绿釉陶龟座博山炉',
+              suoSrc: 'more/banquet/suo54.png',
+              type: 'video',
+              inSrc: 'more/banquet/054.mp4',
+              inTxt: ``
+            },
+            {
+              name: '“君幸食”小漆盘',
+              suoSrc: 'more/banquet/suo55.png',
+              type: 'img',
+              inSrc: 'more/banquet/055.png',
+              inTxt: `
+              <p>西汉,1972年湖南省长沙市马王堆一号汉墓出土,口径18.3厘米,高3厘米。</p>
+              <p>盛食器。盘内涂红漆,中心部分黑漆底上朱绘卷云纹四组。卷云纹中间黑漆书写“君幸食”三字,意为“请您进餐”。盘外髹黑漆,近底部朱书“一升半升”四字。</p>
+              `
             }
           ]
         },

BIN
Code/src/assets/img/icon-jianguwu.png


BIN
Code/src/assets/img/icon-jianguwu1.png


BIN
Code/src/assets/img/icon-nonggen.png


BIN
Code/src/assets/img/icon-nonggen1.png


BIN
Code/src/assets/img/icon-qiguwu.png


BIN
Code/src/assets/img/icon-qiguwu1.png


+ 7 - 0
Code/src/components/FloorBtn/index.module.scss

@@ -34,6 +34,13 @@
         background-image: url('../../assets/img/icon-more1.png');
       }
     }
+
+    .FloorBtn3 {
+      background-image: url('../../assets/img/icon-nonggen.png');
+      &:hover {
+        background-image: url('../../assets/img/icon-nonggen1.png');
+      }
+    }
     @media screen and (min-width: 1200px) {
       div {
         width: 35px;

+ 3 - 1
Code/src/components/FloorBtn/index.tsx

@@ -5,12 +5,14 @@ import history from '@/utils/history'
 type Props = {
   unityId?: '1' | '2'
   gameFu?: () => void
+  plowFu?: () => void
 }
 
-function FloorBtn({ unityId, gameFu }: Props) {
+function FloorBtn({ unityId, gameFu, plowFu }: Props) {
   return (
     <div className={styles.FloorBtn}>
       {gameFu ? <div title='游戏' className='FloorBtn0' onClick={gameFu}></div> : null}
+      {plowFu ? <div title='汉代庄园田耕记' className='FloorBtn3' onClick={plowFu}></div> : null}
 
       <div
         className='FloorBtn1'

+ 1 - 0
Code/src/pages/A2visit/PanoVideo/Hot2/index.module.scss

@@ -177,6 +177,7 @@
             .h2FlooRow {
               line-height: 28px;
               font-size: 10px;
+              padding: 0 8px;
             }
           }
         }

+ 41 - 3
Code/src/pages/A4dance/index.module.scss

@@ -7,6 +7,16 @@
       object-fit: fill;
     }
 
+    // 左下角2个舞蹈的层级
+    #VideoModel {
+      z-index: 50;
+      #BtnRight {
+        bottom: 100px;
+        right: 25px;
+        z-index: 10;
+      }
+    }
+
     .pvBoxShow {
       opacity: 1;
       pointer-events: auto;
@@ -25,10 +35,10 @@
         cursor: pointer;
         position: absolute;
         z-index: 10;
-        bottom: 25px;
-        left: 56px;
+        bottom: 12px;
+        left: 12px;
         width: 100px;
-        height: 36px;
+        height: 32px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -39,6 +49,34 @@
           transform: scale(1.1);
         }
       }
+      // 左下角2个舞蹈
+      .A4leftVideo {
+        position: absolute;
+        z-index: 10;
+        bottom: 10px;
+        left: 120px;
+        display: flex;
+        & > div {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          background-size: 100% 100%;
+          transition: all 0.3s;
+        }
+        .A4leftVideo1 {
+          margin-right: 5px;
+          background-image: url('../../assets/img/icon-qiguwu.png');
+          &:hover {
+            background-image: url('../../assets/img/icon-qiguwu1.png');
+          }
+        }
+        .A4leftVideo2 {
+          background-image: url('../../assets/img/icon-jianguwu.png');
+          &:hover {
+            background-image: url('../../assets/img/icon-jianguwu1.png');
+          }
+        }
+      }
 
       // 底部
       .pvfloor {

+ 28 - 0
Code/src/pages/A4dance/index.tsx

@@ -10,6 +10,7 @@ import NextPage from '@/components/NextPage'
 import useLoding from '@/components/ownUse/useLoding'
 import history from '@/utils/history'
 import BtnRight from '@/components/BtnRight'
+import VideoModel from '@/components/VideoModel'
 
 function A4dance() {
   const [baseSta, setBaseSta] = useState(false)
@@ -54,10 +55,14 @@ function A4dance() {
   // 先加载背景图 序列帧等 在加载视频
   const { imgNow, imgNumFu } = useLoding(2)
 
+  // 左下角的视频
+  const [leftVideo, setLeftVideo] = useState(0)
+
   return (
     <div className={styles.A4dance} style={{ backgroundImage: `url(${baseURL}dance/bj.jpg)` }}>
       {/* 初始页面 */}
       <BaseImg
+        num={50}
         isShow={baseSta}
         iconSrc={`${baseURL}dance/mulu.png`}
         parentFu={() => btnStart()}
@@ -159,9 +164,32 @@ function A4dance() {
               ))}
             </div>
           </div>
+
+          {/* 左下角2个舞蹈 */}
+          <div className='A4leftVideo'>
+            <div className='A4leftVideo1' onClick={() => setLeftVideo(1)}></div>
+            <div className='A4leftVideo2' onClick={() => setLeftVideo(2)}></div>
+          </div>
         </div>
       ) : null}
 
+      {/* 左下角视频 */}
+      {imgNow ? (
+        <VideoModel
+          isShow={leftVideo === 1}
+          src={baseURL + 'dance/left1.mp4'}
+          closeFu={() => setLeftVideo(0)}
+        />
+      ) : null}
+
+      {imgNow ? (
+        <VideoModel
+          isShow={leftVideo === 2}
+          src={baseURL + 'dance/left2.mp4'}
+          closeFu={() => setLeftVideo(0)}
+        />
+      ) : null}
+
       {/* 点击四神云气图的动画 */}
       {/* {imgNow ? (
         <EndVideo

+ 1 - 0
Code/src/pages/A5chef/index.tsx

@@ -77,6 +77,7 @@ function A5chef() {
       <div className='A5main' style={{ backgroundImage: `url(${baseURL + myData.chef.baseImg})` }}>
         {/* 初始页面 */}
         <BaseImg
+          num={50}
           isShow={!baseFlag}
           iconSrc={`${baseURL}chef/mulu.png`}
           parentFu={() => btnStart()}

+ 58 - 0
Code/src/pages/A6plow/index.module.scss

@@ -87,5 +87,63 @@
       opacity: 1;
       pointer-events: auto;
     }
+
+    // 汉代庄园田耕记
+    .A6codeBox {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 50;
+      background-color: rgba(70, 4, 1, 0.4);
+      backdrop-filter: blur(4px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding-bottom: 50px;
+
+      .A6cimg {
+        width: 150px;
+      }
+      & > p {
+        font-size: 20px;
+        color: #fff;
+        margin-top: 8px;
+      }
+
+      #BtnRight {
+        bottom: 100px;
+        right: 25px;
+        z-index: 10;
+      }
+    }
+    .A6codeBoxShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    // 左下角按钮
+    .A6leftBtn {
+      cursor: pointer;
+      position: absolute;
+      z-index: 10;
+      bottom: 12px;
+      left: 28px;
+      width: 100px;
+      height: 36px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fffddc;
+      background-size: 100% 100%;
+      transition: transform 0.3s;
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
   }
 }

+ 42 - 15
Code/src/pages/A6plow/index.tsx

@@ -1,7 +1,7 @@
 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 { baseURL, isPc, myData } from '@/utils/http'
 import EndVideo from '@/components/EndVideo'
 import NextPage from '@/components/NextPage'
 import classNames from 'classnames'
@@ -10,6 +10,7 @@ import HotIcon from '@/components/HotIcon'
 import Hot2 from '../A2visit/PanoVideo/Hot2'
 import { PlowHotType } from '@/types'
 import useLoding from '@/components/ownUse/useLoding'
+import BtnRight from '@/components/BtnRight'
 
 function A6plow() {
   // 初始显示和隐藏
@@ -73,6 +74,9 @@ function A6plow() {
   // 先加载背景图 序列帧等 在加载视频
   const { imgNow, imgNumFu } = useLoding(3)
 
+  // 汉代庄园田耕记二维码
+  const [code, setCode] = useState(false)
+
   return (
     <div className={styles.A6plow}>
       {/* 初始静态图 */}
@@ -129,19 +133,30 @@ function A6plow() {
                 </video>
 
                 {/* 热点 */}
-                {item.hot.map((v: PlowHotType, i) => (
-                  <HotIcon
-                    isModel={v.isModel ? true : false}
-                    style={{
-                      top: v.locPage.top,
-                      left: v.locPage.left
-                    }}
-                    key={i}
-                    index={i}
-                    clickSon={val => setHotInd(val)}
-                    hoverSrc={v.hoverSrc}
-                  />
-                ))}
+                {item.hot.map((v: PlowHotType, i) =>
+                  v.name === '汉代农具' ? (
+                    <div
+                      onClick={() => setHotInd(i)}
+                      key={i}
+                      className='A6leftBtn'
+                      style={{ backgroundImage: `url(${baseURL}chef/chuBtn.png)` }}
+                    >
+                      汉代农具
+                    </div>
+                  ) : (
+                    <HotIcon
+                      isModel={v.isModel ? true : false}
+                      style={{
+                        top: v.locPage.top,
+                        left: v.locPage.left
+                      }}
+                      key={i}
+                      index={i}
+                      clickSon={val => setHotInd(val)}
+                      hoverSrc={v.hoverSrc}
+                    />
+                  )
+                )}
               </div>
             ))}
           </div>
@@ -149,7 +164,7 @@ function A6plow() {
           {/* 跳到下一章 */}
           <NextPage clickSon={() => setLastVideo(true)} txt='结束' />
           {/* 右下角按钮 */}
-          <FloorBtn />
+          <FloorBtn plowFu={() => setCode(true)} />
         </div>
       ) : null}
 
@@ -157,6 +172,18 @@ function A6plow() {
         <Hot2 data={hotInfo.data} closeFu={() => setHotInd(-1)} name={hotInfo.name} />
       ) : null}
 
+      {/* 二维码弹窗 */}
+      {imgNow ? (
+        <div className={classNames('A6codeBox', code ? 'A6codeBoxShow' : '')}>
+          <img className='A6cimg' src={baseURL + 'plow/code.png'} alt='' />
+          <p>{isPc ? '扫码二维码,体验小游戏' : '长按图片,保存二维码'}</p>
+          <p>{isPc ? '' : '体验小游戏'}《汉代庄园田耕记》</p>
+
+          {/* 右下角的返回按钮 */}
+          <BtnRight imgName='back' clickSon={() => setCode(false)} title='返回' />
+        </div>
+      ) : null}
+
       {/* 结尾动画 */}
       {imgNow ? (
         <EndVideo

BIN
资源/staticData/banquet/hot/52.jpg


BIN
资源/staticData/banquet/hot/53.png


BIN
资源/staticData/banquet/hot/hot8.png


BIN
资源/staticData/banquet/hot/hot9.png


BIN
资源/staticData/dance/left1.mp4


BIN
资源/staticData/dance/left2.mp4


BIN
资源/staticData/more/banquet/055.png


BIN
资源/staticData/more/banquet/suo55.png


BIN
资源/staticData/plow/code.png


BIN
资源/staticData/plow/hot/58.png


BIN
资源/staticData/plow/hot/59.png


BIN
资源/staticData/plow/hot/60.png


BIN
资源/staticData/plow/hot/61.png


BIN
资源/staticData/plow/hot/62.png


BIN
资源/staticData/plow/hot/63.png


BIN
资源/staticData/plow/hot/64.png