upp

Code/public/myData/myData.js

@@ -3472,7 +3472,7 @@ const myDataTemp = {
           name: '仙居世界',
           info: [
             {
-              name: '绿釉陶都树',
+              name: '褐绿釉陶桃都树',
               suoSrc: 'more/xian/suo123.png',
               type: 'img',
               inSrc: 'more/xian/123.png',
@@ -3815,7 +3815,7 @@ const myDataTemp = {
         // 是否在更多模块中显示-true表示不显示
         noShow: true,
         // 热点名字
-        name: '绿釉陶都树',
+        name: '褐绿釉陶桃都树',
         // pc鼠标移入显示的图片路径+名字
         hoverSrc: 'xianJu/hot/tag_dushu.png',
         // 热点定位百分比
@@ -3827,7 +3827,7 @@ const myDataTemp = {
           {
             // 为模型的情况
             type: 'model',
-            name: '绿釉陶都树',
+            name: '褐绿釉陶桃都树',
             txt: `
             <p>陶器，西汉晚期，1969年11月于济源轵城泗涧沟西汉墓出土。</p>
             <p>红陶胎，全树有树身，树座与树枝三部分组成。树身参天其顶有昂首挺立的天鸡，其身有三层树枝，枝端均有翘为90度的桃形叶片，每枝各有一猿 猴与乌鸦之类动物。树座塑为桃都山呈三角锥状，表面塑有裸体人，羽人，奔獐飞蝉等。全树施红绿釉。</p>

Code/src/components/BaseImg/index.module.scss

@@ -8,6 +8,7 @@
   opacity: 1;
   transition: opacity 1s;
   background-color: rgba(0, 0, 0, 0.4);
+
   :global {
     .BIcon {
       position: absolute;
@@ -63,27 +64,87 @@
         background-image: url('../../assets/img/btnAc.png');
         color: #b67150;
       }
+    }
 
-      .BIBxian {
-        position: absolute;
-        bottom: -10px;
-        left: 0;
+    // 进度条
+    .BIBxian {
+      position: absolute;
+      bottom: 7%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 120px;
+      padding: 0 10px;
+      height: 2px;
+      & > div {
         width: 100%;
-        padding: 0 10px;
-        height: 2px;
+        height: 100%;
+        background-color: rgba(231, 214, 142, 0.6);
         & > div {
-          width: 100%;
+          width: 0%;
           height: 100%;
-          background-color: rgba(231, 214, 142, 0.6);
-          & > div {
-            width: 0%;
-            height: 100%;
 
-            background-color: #fffddc;
-          }
+          background-color: #fffddc;
+        }
+      }
+    }
+    .birdBox {
+      position: absolute;
+      bottom: -140px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 100;
+      width: 320px;
+      height: 296px;
+      transition: all 0.5s;
+      .bird1 {
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        width: 320px;
+        height: 296px;
+        object-fit: fill !important;
+      }
+      .bird2 {
+        position: absolute;
+        bottom: 86px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-image: url('../../assets/img/bird/quan.png');
+        background-size: 100% 100%;
+        z-index: 2;
+        cursor: pointer;
+        width: 104px;
+        height: 104px;
+        color: #fffddc;
+        text-align: center;
+        font-size: 16px;
+        padding-top: 18px;
+        transition: all 0.3s;
+        &:hover {
+          color: #a55b41;
+          background-image: url('../../assets/img/bird/quanAc.png');
+        }
+      }
+      .bird3 {
+        cursor: pointer;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: -55px;
+        width: 33px;
+        height: 55px;
+        background-image: url('../../assets/img/bird/ji.png');
+        background-size: 100% 100%;
+        transition: all 0.3s;
+        &:hover {
+          background-image: url('../../assets/img/bird/jiAc.png');
         }
       }
     }
+    #HotOpCss {
+      z-index: 1000;
+    }
   }
 }
 

Code/src/components/BaseImg/index.tsx

@@ -3,6 +3,7 @@ import styles from './index.module.scss'
 import classNames from 'classnames'
 import { baseURL, myData } from '@/utils/http'
 import { domDelOwnFu } from '@/utils/utilsSome'
+import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
 
 type Props = {
   isShow: boolean //是否显示
@@ -15,6 +16,7 @@ type Props = {
   imgNow: boolean
   hidden?: boolean
   lastNum?: number
+  bird?: string //鸟图，时辰图
 }
 
 function BaseImg({
@@ -27,7 +29,8 @@ function BaseImg({
   imgNumFu,
   imgNow,
   hidden = false,
-  lastNum = 100
+  lastNum = 100,
+  bird
 }: Props) {
   const [loding, setLoding] = useState(myData.isLdong ? 0 : 100)
 
@@ -58,6 +61,10 @@ function BaseImg({
     }
   }, [btnStartFu, imgNow, lastNum, loding, moreSta, num])
 
+  // 点击 小鸡 出来的热点信息
+
+  const [jiAc, setJiAc] = useState(false)
+
   return (
     <div
       id='BaseImg'
@@ -68,28 +75,56 @@ function BaseImg({
 
       {moreSta ? null : <img onLoad={imgNumFu} className='BIlogo' src={iconSrc} alt='' />}
 
-      <div
-        className='BIbaseBtn'
-        onClick={btnStartFu}
-        style={{ pointerEvents: loding >= 100 ? 'auto' : 'none' }}
-      >
-        {moreSta ? null : (
-          <div className='BIcon'>
-            <img onLoad={imgNumFu} src={`${baseURL}visit/arrow.png`} alt='' />
+      {bird ? (
+        <div
+          className='birdBox'
+          style={{
+            opacity: loding >= 100 ? '1' : '0',
+            pointerEvents: loding >= 100 ? 'auto' : 'none'
+          }}
+        >
+          {/* 鸟图 */}
+          <img className='bird1' onLoad={imgNumFu} src={`${baseURL}bird/${bird}.png`} alt='' />
+          <div className='bird2' onClick={btnStartFu}>
+            点击继续
           </div>
-        )}
-
-        <div className={classNames('BIBtxt', loding >= 100 && !moreSta ? 'BIBtxtFont' : '')}>
-          {loding >= 100 ? (moreSta ? '加载中' : '点击继续') : '加载中'}
+          <div className='bird3' onClick={() => setJiAc(true)}></div>
         </div>
-        {loding >= 100 ? null : (
-          <div className='BIBxian'>
-            <div>
-              <div style={{ width: loding + '%' }}></div>
+      ) : (
+        <div
+          className='BIbaseBtn'
+          onClick={btnStartFu}
+          style={{ pointerEvents: loding >= 100 ? 'auto' : 'none' }}
+        >
+          {moreSta ? null : (
+            <div className='BIcon'>
+              <img onLoad={imgNumFu} src={`${baseURL}visit/arrow.png`} alt='' />
             </div>
+          )}
+          <div className={classNames('BIBtxt', loding >= 100 && !moreSta ? 'BIBtxtFont' : '')}>
+            {loding >= 100 ? (moreSta ? '加载中' : '点击继续') : '加载中'}
+          </div>
+        </div>
+      )}
+
+      {/* 进度条 */}
+      {loding >= 100 ? null : (
+        <div className='BIBxian'>
+          <div>
+            <div style={{ width: loding + '%' }}></div>
           </div>
-        )}
-      </div>
+        </div>
+      )}
+
+      {/* 点击小鸡 */}
+      {jiAc ? (
+        <Hot2
+          data={myData.xianJu.imgHot.find(v => v.name === '褐绿釉陶桃都树')!.data}
+          name='褐绿釉陶桃都树'
+          closeFu={() => setJiAc(false)}
+          isJi={true}
+        />
+      ) : null}
     </div>
   )
 }

Code/src/components/CatVideo/index.tsx

@@ -9,9 +9,10 @@ type Props = {
   src: string
   parentFu: () => void
   noBtn?: boolean //没有跳过按钮
+  openYin?: boolean //打开声音播放
 }
 
-function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
+function CatVideo({ isShow, src, parentFu, noBtn, openYin }: Props) {
   const videoRef = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
@@ -35,7 +36,7 @@ function CatVideo({ isShow, src, parentFu, noBtn }: Props) {
       <video
         ref={videoRef}
         playsInline
-        muted
+        muted={!openYin}
         webkit-playsinline='true'
         x5-video-player-type='h5'
         onEnded={playEndFu}

Code/src/pages/A1home/index.tsx

@@ -99,6 +99,7 @@ function A1home() {
           </div>
 
           <CatVideo
+            openYin={true}
             isShow={baseVshow}
             src={baseURL + 'home/baseVideo.mp4'}
             parentFu={() => setBaseVideo(false)}

Code/src/pages/A2visit/PanoVideo/Hot2/index.module.scss

@@ -8,6 +8,8 @@
   transition: all 0.3s;
   display: flex;
   background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+
   :global {
     .h2Main {
       width: 50%;
@@ -195,6 +197,18 @@
           }
         }
       }
+      .h2Right {
+        width: 60%;
+      }
     }
   }
 }
+
+.Hot2Ji {
+  background: linear-gradient(
+    to right,
+    rgba(43, 16, 16, 1),
+    rgba(43, 16, 16, 0.9),
+    rgba(43, 16, 16, 0.2)
+  );
+}

Code/src/pages/A2visit/PanoVideo/Hot2/index.tsx

@@ -12,9 +12,10 @@ type Props = {
   closeFu: () => void
   data: VisitHotDataType
   name: string
+  isJi?: boolean
 }
 
-function Hot2({ closeFu, data, name }: Props) {
+function Hot2({ closeFu, data, name, isJi }: Props) {
   // 底部选中
   const [flooInd, setFlooInd] = useState(0)
 
@@ -87,7 +88,7 @@ function Hot2({ closeFu, data, name }: Props) {
   )
 
   return (
-    <div id='HotOpCss' className={styles.Hot2}>
+    <div id='HotOpCss' className={classNames(styles.Hot2, isJi ? styles.Hot2Ji : '')} style={{}}>
       <div className='h2Main' style={{ backgroundImage: `url(${baseURL}visit/hot2bj.png)` }}>
         {/* 标题 */}
         <div className='h2Titele'>

Code/src/pages/A2visit/PanoVideo/index.tsx

@@ -27,11 +27,11 @@ function PanoVideo({ lodingOk }: Propr) {
   }, [ind])
 
   useEffect(() => {
-    const readyEvent = videoSceneModel.event.on('Event.videoScene.ready', () => {
+    const readyEvent = videoSceneModel.event.on('Event.videoScene.play', () => {
       console.log('加载完成')
       setTimeout(() => {
         lodingOk()
-      }, 200)
+      }, 4000)
     })
 
     return () => {

Code/src/pages/A2visit/index.tsx

@@ -46,6 +46,7 @@ function A2visit() {
         bgImg={`${baseURL}${myData.visit.bgImg}`}
         imgNow={imgNow}
         imgNumFu={imgNumFu}
+        bird='cheQi'
       />
 
       {/* 过度动画页面 */}

Code/src/pages/A3banquet/index.tsx

@@ -46,6 +46,7 @@ function A3banquet() {
           bgImg={`${baseURL}${myData.banquet.bgImg}`}
           imgNow={imgNow}
           imgNumFu={imgNumFu}
+          bird='yanYing'
         />
       )}
 

Code/src/pages/A4dance/index.tsx

@@ -68,6 +68,7 @@ function A4dance() {
         parentFu={() => btnStart()}
         imgNow={imgNow}
         imgNumFu={imgNumFu}
+        bird='yueWu'
       />
 
       {/* 主要内容 */}

Code/src/pages/A5chef/index.tsx

@@ -83,6 +83,7 @@ function A5chef() {
           parentFu={() => btnStart()}
           imgNow={imgNow}
           imgNumFu={imgNumFu}
+          bird='houCu'
         />
         {/* 热点按钮页面 */}
         {imgNow ? (

Code/src/pages/A6plow/index.tsx

@@ -97,6 +97,7 @@ function A6plow() {
         bgImg={`${baseURL}${myData.plow.baseImg}`}
         imgNow={imgNow}
         imgNumFu={imgNumFu}
+        bird='tianJian'
       />
 
       {/* 蔬菜的盒子 */}

Code/src/pages/A6xian/index.tsx

@@ -93,6 +93,7 @@ function A6xian() {
         imgNow={imgNow}
         imgNumFu={imgNumFu}
         num={50}
+        bird='xianJu'
       />
 
       {/* 二级静态图 */}