更新数据

public/beiyingzhihui/index.js

@@ -24,7 +24,7 @@ window.onCancelDownload = function() {
 }
 
 window.isMobile = function () {
-    return navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
+    return /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i.test(navigator.userAgent);
 }
 
 

src/App.tsx

@@ -66,6 +66,7 @@ export default function App() {
 
   const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
+  const isAutoRotating = useRef(false)
   // 根元素
   const rootRef = useRef<any>(null)
 
@@ -199,6 +200,64 @@ export default function App() {
     }
   }, [])
 
+
+
+  useEffect(() => {
+    // 添加状态跟踪自动旋转
+    let timer: NodeJS.Timeout;
+
+    window.onModelControlled = () => {
+      callIframeFu('setModelAutoRotation', 0);
+      resetTimer()
+    }
+
+    const resetTimer = () => {
+      // 清除现有计时器
+      if (timer) clearTimeout(timer);
+
+      // 重置计时器并检查旋转状态
+      timer = setTimeout(() => {
+        if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
+          console.log(window.currentChangePanelIndex);
+          callIframeFu('setModelAutoRotation', -0.5);
+          isAutoRotating.current = true;
+        }
+      }, 3000);
+
+      // 如果正在旋转则取消
+      if (isAutoRotating.current) {
+        callIframeFu('setModelAutoRotation', 0);
+        isAutoRotating.current = false;
+      }
+    };
+
+    // 初始化计时器
+    resetTimer();
+
+    // 操作事件监听
+    const handleUserAction = () => {
+      resetTimer();
+    };
+
+    document.addEventListener('click', handleUserAction);
+    document.addEventListener('touchstart', handleUserAction);
+
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('click', handleUserAction);
+      document.removeEventListener('touchstart', handleUserAction);
+    };
+  }, []);
+
+  document.addEventListener('click', () => {
+    if (window.currentChangePanelIndex === 0 || window.currentChangePanelIndex === 4) {
+      console.log(window.currentChangePanelIndex)
+      callIframeFu('setModelAutoRotation', 0)
+    }
+  })
+
+
+
   // 更新unity页面
   // useEffect(() => {
   //   if (envFlag) {

src/components/MenuSider/index.tsx

@@ -10,7 +10,7 @@ function MenuSider({ activeTab }: { activeTab: number }) {
   const [isShowMenu, setIsShowMenu] = useState(false)
 
   const byzhClick = (activeTab: number) => {
-    window.location.replace(activeTab === 0 ? '#/byzh?fromPath=yblm' : activeTab === 1 ? '#/byzh?fromPath=yblm' : '#/byzh?fromPath=yblm')
+    window.location.replace(activeTab === 0 ? '#/byzh?fromPath=yblm' : activeTab === 1 ? '#/byzh?fromPath=ybwx' : '#/byzh?fromPath=wjwj')
   }
   return (
     <>

src/pages/A6ybwx/A6_2_zxzgh/index.module.scss

@@ -19,7 +19,7 @@
 }
 
 .Sinicize1 {
-  width: 840px;
+  width: 737px;
   height: 100%;
   position: relative;
   background: url('../../../assets/img/A6_sinicize_bg.png') no-repeat center center;
@@ -34,7 +34,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -44,11 +44,11 @@
       position: absolute;
       top: 13%;
       left: 50%;
-      transform: translateX(-140%);
+      transform: translateX(-122%);
       height: 100px;
       width: 275px;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -58,7 +58,7 @@
       position: absolute;
       top: 36%;
       left: 50%;
-      transform: translateX(-133%);
+      transform: translateX(-117%);
       height: 60px;
       width: 287px;
       display: flex;
@@ -71,7 +71,7 @@
         width: 100%;
         height: 25px;
 
-        &>img {
+        & > img {
           height: 100%;
           object-fit: contain;
         }
@@ -91,8 +91,8 @@
       left: 50%;
       transform: translate(-50%, -50%);
       opacity: 0.6;
-
-      &>img {
+      transition: all 0.3s ease-in-out;
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -105,7 +105,7 @@
     .zhufo {
       height: 335px;
       width: 280px;
-      transform: translate(-31%, -50%);
+      transform: translate(-12%, -50%);
 
       .name {
         font-size: 10px;
@@ -116,9 +116,18 @@
     }
 
     .pusha {
-      height: 305px;
-      width: 100px;
-      transform: translate(195%, -50%);
+      height: 325px;
+      width: 120px;
+      transform: translate(45%, -50%);
+      & > img {
+        width: 100%;
+      }
+      .name {
+        font-size: 10px;
+        font-weight: 500;
+        color: rgba(170, 105, 77, 1);
+        text-align: center;
+      }
     }
 
     .sinicizeBtn1,
@@ -136,7 +145,7 @@
       font-size: 13px;
       font-weight: 500;
       color: rgba(255, 233, 182, 1);
-
+      transition: all 0.3s ease-in-out;
       &.active {
         color: rgba(93, 30, 32, 1);
         background: url('../../../assets/img/btn_tabAc.png') no-repeat center center;
@@ -176,34 +185,53 @@
       position: relative;
       height: 0;
       border-bottom: 1px dashed rgba(124, 75, 54, 1);
+      .dot {
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        background-color: rgba(124, 75, 54, 1);
+        border-radius: 50%;
+      }
     }
-
     .arrowL {
-      &::after {
-        content: '';
-        position: absolute;
-        left: -6px;
-        top: 50%;
-        transform: translateY(-1px);
-        // 箭头三角形（向左）
-        border-right: 4px solid rgb(124, 75, 54);
-        border-top: 3px solid transparent;
-        border-bottom: 3px solid transparent;
+      .dot {
+        left: -5px;
+        top: -1px;
       }
     }
-
     .arrowR {
-      &::after {
-        content: '';
-        position: absolute;
+      .dot {
         right: -5px;
-        top: 50%;
-        transform: translateY(-1px);
-        border-left: 4px solid rgb(124, 75, 54);
-        border-top: 3px solid transparent;
-        border-bottom: 3px solid transparent;
+        top: -1px;
       }
     }
+
+    // .arrowL {
+    //   &::after {
+    //     content: '';
+    //     position: absolute;
+    //     left: -6px;
+    //     top: 50%;
+    //     transform: translateY(-1px);
+    //     // 箭头三角形（向左）
+    //     border-right: 4px solid rgb(124, 75, 54);
+    //     border-top: 3px solid transparent;
+    //     border-bottom: 3px solid transparent;
+    //   }
+    // }
+
+    // .arrowR {
+    //   &::after {
+    //     content: '';
+    //     position: absolute;
+    //     right: -5px;
+    //     top: 50%;
+    //     transform: translateY(-1px);
+    //     border-left: 4px solid rgb(124, 75, 54);
+    //     border-top: 3px solid transparent;
+    //     border-bottom: 3px solid transparent;
+    //   }
+    // }
   }
 }
 
@@ -316,7 +344,7 @@
               width: 100%;
               height: 65%;
 
-              &>img {
+              & > img {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
@@ -344,7 +372,7 @@
                 width: 14px;
                 height: 14px;
 
-                &>img {
+                & > img {
                   width: 100%;
                   height: 100%;
                   object-fit: contain;
@@ -402,7 +430,7 @@
       font-weight: 500;
       color: #fff;
 
-      &>img {
+      & > img {
         width: 60px;
         height: 50px;
         object-fit: contain;
@@ -470,8 +498,6 @@
   }
 }
 
-
-
 // ----------移动端
 .Sinicize1 {
   :global {
@@ -484,5 +510,4 @@
       }
     }
   }
-
-}
+}

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -4,7 +4,7 @@ import { myData } from '@/utils/http'
 function Sinicize() {
   const [currentTab, setCurrentTab] = useState(0)
   const [selectedTime, setSelectedTime] = useState(0)
-  const [isShowTip, setIsShowTip] = useState(true)
+  const [isShowTip, setIsShowTip] = useState(false)
   const [currentImgIndex, setCurrentImgIndex] = useState(0)
 
   const originRef = useRef<HTMLDivElement>(null)
@@ -25,9 +25,9 @@ function Sinicize() {
   }) => {
     return (
       <div className={styles.label} style={{ inset: inset }}>
-        {direct === 'left' ? <div className='arrowL' style={{ width: width + 'px' }} /> : null}
+        {direct === 'left' ? <div className='arrowL' style={{ width: width + 'px' }} ><div className="dot"></div></div> : null}
         <div className='btn'>{name}</div>
-        {direct === 'right' ? <div className='arrowR' style={{ width: width + 'px' }} /> : null}
+        {direct === 'right' ? <div className='arrowR' style={{ width: width + 'px' }} ><div className="dot"></div></div> : null}
       </div>
     )
   }
@@ -97,13 +97,14 @@ function Sinicize() {
                 {myData.sinicizeDataStatic.desc}
               </div>
             </div>
-            <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
+            {currentTab === 0 && <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
               <img src={require('@/assets/img/A6_sinicize_zhufo.png')} draggable='false' alt='' />{' '}
-              <div className='name'>主尊佛像</div>{' '}
-            </div>
-            <div className={`pusha ${currentTab === 1 ? 'active' : ''}`}>
+              <div className='name'>主尊佛像</div>
+            </div>}
+            {currentTab === 1 && <div className={`pusha ${currentTab === 1 ? 'active' : ''}`}>
               <img src={require('@/assets/img/A6_sinicize_pusha.png')} draggable='false' alt='' />
-            </div>
+              <div className='name'>胁侍菩萨</div>
+            </div>}
             {currentTab === 0 && (
               <>
                 <Label width={70} inset={'53px auto auto 360px'} name={'肉髻'} direct={'right'} />
@@ -120,6 +121,21 @@ function Sinicize() {
               </>
             )}
 
+            {currentTab === 1 && (
+              <>
+                <Label width={70} inset={'83px auto auto 360px'} name={'头光'} direct={'right'} />
+                <Label
+                  width={93}
+                  inset={'181px auto auto 318px'}
+                  name={'披帛'}
+                  direct={'right'}
+                />
+                <Label width={68} inset={'272px auto auto 345px'} name={'天衣'} direct={'right'} />
+                <Label width={40} inset={'93px auto auto 506px'} name={'头冠'} direct={'left'} />
+                <Label width={36} inset={'129px auto auto 512px'} name={'宝缯'} direct={'left'} />
+              </>
+            )}
+
             <div
               className={`sinicizeBtn1 ${currentTab === 0 ? 'active' : ''}`}
               onClick={() => setCurrentTab(0)}

src/types/function.d.ts

@@ -1,6 +1,8 @@
 // 全局方法
 declare global {
   interface Window {
+    // 记录changePannel的index
+    currentChangePanelIndex: number
     WjwjScene: boolean
     onModelControlled: () => void
     openPoem: () => void

src/utils/history.ts

@@ -33,6 +33,10 @@ export const backPageFu = (path: string) => {
 export const callIframeFu = (fuName: string, params: any,type?:string) => {
   const dom = document.getElementById('modalIframe') as HTMLIFrameElement | null;
   const iframeWindow = dom?.contentWindow as Window & { [key: string]: (...args: any[]) => void } | undefined;
+  // 记录changePannel的index
+  if(fuName === 'changePanel'){
+    window.currentChangePanelIndex = params
+  }
   if (iframeWindow && typeof iframeWindow[fuName] === 'function') {
     if (params === 0) {
       // 直接传递 0（参数为 0 时执行）
@@ -53,6 +57,3 @@ export const callIframeFu = (fuName: string, params: any,type?:string) => {
   }
 };
 
-window.onModelControlled = ()=>{
-  console.log('模型被控制');
-}