Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
lanxin
/
Chengzhebei
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

增加修改光源

shaogen1995 1 tydzień temu
rodzic
74997b70ed
commit
ecbd5b86cd
13 zmienionych plików z 414 dodań i 89 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 54 53
      public/index.html
  2. BIN
      public/myData/song.TTF
  3. 5 3
      public/unityMo/index.html
  4. 5 3
      public/unityPc/index.html
  5. BIN
      src/assets/sgImg/lightAc.png
  6. BIN
      src/assets/sgImg/lightBase.png
  7. BIN
      src/assets/sgImg/lightBs.png
  8. 55 0
      src/components/Zlight/index.module.scss
  9. 207 0
      src/components/Zlight/index.tsx
  10. 32 19
      src/pages/A2yblm/index.module.scss
  11. 34 9
      src/pages/A2yblm/index.tsx
  12. 8 1
      src/pages/A3beie/index.module.scss
  13. 14 1
      src/pages/A3beie/index.tsx

+ 54 - 53
public/index.html
Wyświetl plik 

@@ -1,62 +1,62 @@
 
 <!DOCTYPE html>
 
 <html lang="zh">
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <meta
 
-      name="viewport"
 
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 
-    />
 
-    <meta name="theme-color" content="#000000" />
 
-    <meta name="description" content="Web site created using create-react-app" />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
 
-    <script src="./myData/myData.js"></script>
 
-    <script src="./myData/myDataEN.js"></script>
 
-    <script src="./myData/jsmpeg.min.js"></script>
 
-    <script src="./myData/f-video.js"></script>
 
 
-    <style>
 
-      @font-face {
 
-        font-family: 'song';
 
-        src: url('./myData/song.TTF');
 
-      }
 
-      .fontLoding {
 
-        position: absolute;
 
-        top: 0;
 
-        left: 0;
 
-        opacity: 0;
 
-        pointer-events: none;
 
-        font-family: 'song';
 
-      }
 
-    </style>
 
-    <title>程哲碑</title>
 
-  </head>
 
-  <body>
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
 
-    <div id="root"></div>
 
-
 
-    <div id="panoramic-root"></div>
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+  <meta name="theme-color" content="#000000" />
 
+  <meta name="description" content="Web site created using create-react-app" />
 
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
 
+  <script src="./myData/myData.js"></script>
 
+  <script src="./myData/myDataEN.js"></script>
 
+  <script src="./myData/jsmpeg.min.js"></script>
 
+  <script src="./myData/f-video.js"></script>
 
 
-    <!-- 一进页面就加载字体 -->
 
-    <i class="fontLoding">123</i>
 
-  </body>
 
-
 
-  <script>
 
-    window.showA7Back = function () {
 
-      const back = document.getElementById('A7Back')
 
-      back.style.display = 'block'
 
-      back.style.pointerEvents = 'none'
 
-      setTimeout(() => {
 
-        back.style.pointerEvents = 'auto'
 
-      }, 500)
 
+  <style>
 
+    @font-face {
 
+      font-family: 'song';
 
+      src: url('./myData/song.OTF');
 
     }
 
-    window.hideA7Back = function () {
 
-      document.getElementById('A7Back').style.display = 'none'
 
+
 
+    .fontLoding {
 
+      position: absolute;
 
+      top: 0;
 
+      left: 0;
 
+      opacity: 0;
 
+      pointer-events: none;
 
+      font-family: 'song';
 
     }
 
-  </script>
 
+  </style>
 
+  <title>程哲碑</title>
 
+</head>
 
 
-  <script src="./echarts-v5.4.3.js"></script>
 
-  <!-- <script>
 
+<body>
 
+  <noscript>You need to enable JavaScript to run this app.</noscript>
 
+  <div id="root"></div>
 
+
 
+  <div id="panoramic-root"></div>
 
+
 
+  <!-- 一进页面就加载字体 -->
 
+  <i class="fontLoding">123</i>
 
+</body>
 
+
 
+<script>
 
+  window.showA7Back = function () {
 
+    const back = document.getElementById('A7Back')
 
+    back.style.display = 'block'
 
+    back.style.pointerEvents = 'none'
 
+    setTimeout(() => {
 
+      back.style.pointerEvents = 'auto'
 
+    }, 500)
 
+  }
 
+  window.hideA7Back = function () {
 
+    document.getElementById('A7Back').style.display = 'none'
 
+  }
 
+</script>
 
+
 
+<script src="./echarts-v5.4.3.js"></script>
 
+<!-- <script>
 
     window.onload = function () {
 
       var script = document.createElement('script')
 
       script.src = 'https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js'
 
@@ -66,4 +66,5 @@
 
       }
 
     }
 
   </script> -->
 
-</html>
 
+
 
+</html>

BIN
public/myData/song.TTF
Wyświetl plik


+ 5 - 3
public/unityMo/index.html
Wyświetl plik 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>

 <html lang="zh-CN">

+

 <head>

     <meta charset="utf-8">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

@@ -12,6 +13,7 @@
 
     <script src="./export_roomScene.js"></script>

     <script src="./export_drawingBoard.js"></script>

 </head>

+

 <body>

     <div id="unity-container">

         <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>

@@ -69,7 +71,7 @@
 
         frameworkUrl: buildUrl + "/Build.framework.js.unityweb",

         codeUrl: buildUrl + "/Build.wasm.unityweb",

         streamingAssetsUrl: "StreamingAssets",

-        devicePixelRatio: window.isMobile() ? 1 : 0,

+        devicePixelRatio: 2,

         companyName: "FDage",

         productName: "Chenzhebei-ShanxiMuseum",

         productVersion: "0.1",

@@ -99,7 +101,7 @@
 
 

 

 

-loadingBar.style.display = "block";

+    loadingBar.style.display = "block";

     var script = document.createElement("script");

     script.src = loaderUrl;

     script.onload = () => {

@@ -122,4 +124,4 @@ loadingBar.style.display = "block";
 
     document.body.appendChild(script);

 </script>

 

-</html>
 
+</html>

+ 5 - 3
public/unityPc/index.html
Wyświetl plik 

@@ -1,5 +1,6 @@
 
 <!DOCTYPE html>

 <html lang="zh-CN">

+

 <head>

     <meta charset="utf-8">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

@@ -12,6 +13,7 @@
 
     <script src="./export_roomScene.js"></script>

     <script src="./export_drawingBoard.js"></script>

 </head>

+

 <body>

     <div id="unity-container">

         <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>

@@ -69,7 +71,7 @@
 
         frameworkUrl: buildUrl + "/Build.framework.js.unityweb",

         codeUrl: buildUrl + "/Build.wasm.unityweb",

         streamingAssetsUrl: "StreamingAssets",

-        devicePixelRatio: window.isMobile() ? 1 : 0,

+        devicePixelRatio: 2,

         companyName: "FDage",

         productName: "Chenzhebei-ShanxiMuseum",

         productVersion: "0.1",

@@ -99,7 +101,7 @@
 
 

 

 

-loadingBar.style.display = "block";

+    loadingBar.style.display = "block";

     var script = document.createElement("script");

     script.src = loaderUrl;

     script.onload = () => {

@@ -122,4 +124,4 @@ loadingBar.style.display = "block";
 
     document.body.appendChild(script);

 </script>

 

-</html>
 
+</html>

BIN
src/assets/sgImg/lightAc.png
Wyświetl plik


BIN
src/assets/sgImg/lightBase.png
Wyświetl plik


BIN
src/assets/sgImg/lightBs.png
Wyświetl plik


+ 55 - 0
src/components/Zlight/index.module.scss
Wyświetl plik 

@@ -0,0 +1,55 @@
 
+.Zlight {
 
+  position: absolute;
 
+  bottom: 0px;
 
+  right: 203px;
 
+  z-index: 99;
 
+  width: 296px;
 
+  height: 90px;
 
+
 
+  img {
 
+    pointer-events: none;
 
+  }
 
+
 
+  :global {
 
+    .Zlbox {
 
+      .Zlimg2 {
 
+        position: absolute;
 
+        top: 39%;
 
+        left: 50%;
 
+        transform: translate(-50%, -50%);
 
+        width: 73%;
 
+
 
+        &>img {
 
+          width: 100%;
 
+          height: auto;
 
+        }
 
+
 
+        .Zlkuai {
 
+          border-radius: 4px;
 
+          position: absolute;
 
+          // top: -3px;
 
+          // left: 50%;
 
+          transform: translateX(-50%);
 
+          width: 4px;
 
+          height: 14px;
 
+          background-color: #ffe9b6;
 
+        }
 
+      }
 
+
 
+      .Zlimg3 {
 
+        height: 44px;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        font-size: 14px;
 
+        color: #ffe9b6;
 
+
 
+        &>img {
 
+          display: inline-block;
 
+          // margin-right: 6px;
 
+          width: 20px;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 207 - 0
src/components/Zlight/index.tsx
Wyświetl plik 

@@ -0,0 +1,207 @@
 
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 
+import styles from './index.module.scss'
 
+import { callIframeFu } from '@/utils/history'
 
+import { isPc } from '@/utils/http'
 
+
 
+// 圆弧参数
 
+const arcRadius = 80 // 圆弧半径
 
+const arcPercentage = 0.263 // 26.3% 完整圆
 
+const totalArcAngle = arcPercentage * 2 * Math.PI // 1.653 弧度
 
+const arcStartAngle = -Math.PI / 2 - totalArcAngle / 2 // 起始角度（从左侧水平开始）
 
+
 
+function Zlight() {
 
+  const [flag, setFlag] = useState(false)
 
+  const [num, setNum] = useState(30)
 
+  const [numPage, setNumPage] = useState(0)
 
+  const [baiHeight, setBaiHeight] = useState(0)
 
+  const startXRef = useRef(0) // 记录拖动起始位置
 
+  const startNumRef = useRef(30) // 记录拖动起始数值
 
+
 
+  useEffect(() => {
 
+    // 将num的范围[-60,60]映射到[0,100]
 
+    const mappedValue = (num + 60) * (100 / 120)
 
+    setNumPage(mappedValue)
 
+    callIframeFu('setLightRotationY', num)
 
+  }, [num])
 
+
 
+  useEffect(() => {
 
+    // 将numPage映射到圆弧角度范围
 
+    const currentAngle = arcStartAngle + (numPage / 100) * totalArcAngle
 
+
 
+    // 计算滑块的垂直位置（相对于圆心）
 
+    const yOffset = arcRadius * Math.sin(currentAngle)
 
+
 
+    // 由于已知numPage=0时top=-3，numPage=50时top=10
 
+    // 我们需要将yOffset映射到正确的范围
 
+    const minYOffset = arcRadius * Math.sin(arcStartAngle)
 
+    const maxYOffset = arcRadius * Math.sin(arcStartAngle + totalArcAngle / 2)
 
+
 
+    // 线性映射到目标范围
 
+    const topValue = -3 + ((yOffset - minYOffset) * (10 - -3)) / (maxYOffset - minYOffset)
 
+
 
+    setBaiHeight(topValue)
 
+  }, [numPage])
 
+
 
+  // --------------------电脑端拖动
 
+  const onMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
 
+    setFlag(true)
 
+  }, [])
 
+
 
+  const onMouseMove = useCallback(
 
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
 
+      if (flag) {
 
+        const numTemp = e.movementX / 4
 
+        let numRes = num + numTemp
 
+        if (numTemp < 0 && numRes <= -60) numRes = -60
 
+        if (numTemp > 0 && numRes >= 60) numRes = 60
 
+        setNum(numRes)
 
+      }
 
+    },
 
+    [flag, num]
 
+  )
 
+
 
+  const onMouseUp = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
 
+    setFlag(false)
 
+  }, [])
 
+
 
+  // ---------------------手机端拖动--------------------------
 
+  const handleDragStart = useCallback(
 
+    (clientY: number) => {
 
+      setFlag(true)
 
+      startXRef.current = clientY
 
+      startNumRef.current = num
 
+    },
 
+    [num]
 
+  )
 
+
 
+  const handleDragMove = useCallback(
 
+    (clientY: number) => {
 
+      if (!flag) return
 
+
 
+      // 计算移动距离（转换为与movementX类似的效果）
 
+      const movementX = clientY - startXRef.current
 
+      const numTemp = movementX / 2 // 保持与原有逻辑一致的灵敏度
 
+
 
+      let numRes = startNumRef.current + numTemp
 
+      if (numTemp < 0 && numRes <= -60) numRes = -60
 
+      if (numTemp > 0 && numRes >= 60) numRes = 60
 
+
 
+      setNum(numRes)
 
+    },
 
+    [flag]
 
+  )
 
+
 
+  // 触摸事件处理[1,3](@ref)
 
+  const onTouchStart = useCallback(
 
+    (e: React.TouchEvent<HTMLDivElement>) => {
 
+      if (e.touches.length > 1) return // 避免多点触控干扰[4](@ref)
 
+      const touch = e.touches[0]
 
+      handleDragStart(touch.clientY)
 
+      // e.preventDefault() // 防止页面滚动
 
+    },
 
+    [handleDragStart]
 
+  )
 
+
 
+  const onTouchMove = useCallback(
 
+    (e: React.TouchEvent<HTMLDivElement>) => {
 
+      if (e.touches.length > 1) return
 
+      const touch = e.touches[0]
 
+      handleDragMove(touch.clientY)
 
+      // e.preventDefault() // 防止页面滚动
 
+    },
 
+    [handleDragMove]
 
+  )
 
+
 
+  const onTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
 
+    setFlag(false)
 
+    // e.preventDefault()
 
+  }, [])
 
+
 
+  // 添加全局事件处理以确保拖动流畅性[3](@ref)
 
+  useEffect(() => {
 
+    if (!isPc) {
 
+      const handleGlobalMouseMove = (e: MouseEvent) => {
 
+        if (flag) {
 
+          handleDragMove(e.clientY)
 
+        }
 
+      }
 
+
 
+      const handleGlobalMouseUp = () => {
 
+        if (flag) {
 
+          setFlag(false)
 
+        }
 
+      }
 
+
 
+      const handleGlobalTouchMove = (e: TouchEvent) => {
 
+        if (flag && e.touches.length === 1) {
 
+          handleDragMove(e.touches[0].clientY)
 
+        }
 
+      }
 
+
 
+      const handleGlobalTouchEnd = () => {
 
+        if (flag) {
 
+          setFlag(false)
 
+        }
 
+      }
 
+
 
+      // 注册全局事件[3](@ref)
 
+      document.addEventListener('mousemove', handleGlobalMouseMove)
 
+      document.addEventListener('mouseup', handleGlobalMouseUp)
 
+      document.addEventListener('touchmove', handleGlobalTouchMove, { passive: false })
 
+      document.addEventListener('touchend', handleGlobalTouchEnd)
 
+
 
+      return () => {
 
+        // 清理事件监听[3](@ref)
 
+        document.removeEventListener('mousemove', handleGlobalMouseMove)
 
+        document.removeEventListener('mouseup', handleGlobalMouseUp)
 
+        document.removeEventListener('touchmove', handleGlobalTouchMove)
 
+        document.removeEventListener('touchend', handleGlobalTouchEnd)
 
+      }
 
+    }
 
+  }, [flag, handleDragMove])
 
+
 
+  return (
 
+    <div
 
+      id='Zlight'
 
+      className={styles.Zlight}
 
+      // 鼠标事件
 
+      onMouseDown={onMouseDown}
 
+      onMouseMove={onMouseMove}
 
+      onMouseUp={onMouseUp}
 
+      onMouseLeave={() => setFlag(false)}
 
+      // 触摸事件[1,4](@ref)
 
+      onTouchStart={onTouchStart}
 
+      onTouchMove={onTouchMove}
 
+      onTouchEnd={onTouchEnd}
 
+      style={{
 
+        cursor: flag ? 'move' : 'pointer',
 
+        // 改善移动端触摸体验
 
+        touchAction: 'none', // 阻止浏览器默认的触摸行为（如滚动）
 
+        WebkitUserSelect: 'none', // 防止文本选择
 
+        userSelect: 'none'
 
+      }}
 
+    >
 
+      <div className='Zlbox'>
 
+        <img className='Zlimg1' src={require('@/assets/sgImg/lightBase.png')} alt='' />
 
+        <div className='Zlimg2'>
 
+          <img src={require('@/assets/sgImg/lightAc.png')} alt='' />
 
+          <div
 
+            className='Zlkuai'
 
+            style={{
 
+              left: numPage + '%',
 
+              top: baiHeight + 'px',
 
+              // 添加平滑过渡效果
 
+              transition: flag ? 'none' : 'all 0.1s ease'
 
+            }}
 
+          ></div>
 
+        </div>
 
+        <div className='Zlimg3 songFont'>
 
+          <img id='opacityChange' src={require('@/assets/sgImg/lightBs.png')} alt='' />
 
+        </div>
 
+      </div>
 
+    </div>
 
+  )
 
+}
 
+
 
+const MemoZlight = React.memo(Zlight)
 
+export default MemoZlight

+ 32 - 19
src/pages/A2yblm/index.module.scss
Wyświetl plik 

@@ -53,7 +53,7 @@
 
       width: 70px;
 
       height: 70px;
 
 
-      & > img {
 
+      &>img {
 
         height: 100%;
 
         object-fit: contain;
 
       }
 
@@ -79,7 +79,7 @@
 
         width: 28px;
 
         height: 100%;
 
 
-        & > img {
 
+        &>img {
 
           height: 100%;
 
           object-fit: contain;
 
         }
 
@@ -127,7 +127,7 @@
 
           height: 80px;
 
           cursor: pointer;
 
 
-          & > img {
 
+          &>img {
 
             height: 100%;
 
             object-fit: contain;
 
           }
 
@@ -143,12 +143,13 @@
 
         padding-top: 40px;
 
         color: rgba(255, 255, 255, 1);
 
         overflow: auto;
 
+
 
         &::-webkit-scrollbar {
 
           width: 0px;
 
           height: 0px;
 
         }
 
 
-        & > p {
 
+        &>p {
 
           padding-bottom: 15px;
 
         }
 
       }
 
@@ -265,7 +266,7 @@
 
             font-size: 10px;
 
           }
 
 
-          & > img {
 
+          &>img {
 
             width: 100%;
 
             height: 100%;
 
             object-fit: contain;
 
@@ -279,24 +280,23 @@
 
         width: 100%;
 
         padding: 0 10px;
 
         overflow-y: auto;
 
-        mask-image: linear-gradient(
 
-          to bottom,
 
-          rgba(0, 0, 0, 1) 0%,
 
-          rgba(0, 0, 0, 1) 80%,
 
-          /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
 
-        );
 
-        -webkit-mask-image: linear-gradient(
 
-          to bottom,
 
-          rgba(0, 0, 0, 1) 0%,
 
-          rgba(0, 0, 0, 1) 80%,
 
-          rgba(0, 0, 0, 0) 100%
 
-        );
 
+        mask-image: linear-gradient(to bottom,
 
+            rgba(0, 0, 0, 1) 0%,
 
+            rgba(0, 0, 0, 1) 80%,
 
+            /* 保留顶部70%不透明 */
 
+            rgba(0, 0, 0, 0) 100%
 
+            /* 底部30%完全透明 */
 
+          );
 
+        -webkit-mask-image: linear-gradient(to bottom,
 
+            rgba(0, 0, 0, 1) 0%,
 
+            rgba(0, 0, 0, 1) 80%,
 
+            rgba(0, 0, 0, 0) 100%);
 
 
         &::-webkit-scrollbar {
 
           width: 0px;
 
         }
 
 
-        & > div {
 
+        &>div {
 
           text-align: justify;
 
           width: 100%;
 
           height: 100%;
 
@@ -338,10 +338,23 @@
 
         }
 
       }
 
 
-      .content > div {
 
+      .content>div {
 
         letter-spacing: 0;
 
         text-align: start;
 
       }
 
     }
 
   }
 
 }
 
+
 
+// 控制调整光源
 
+.A2yblmLight {
 
+  :global {
 
+
 
+    // 重置亮度滚动位置
 
+    #Zlight {
 
+      right: auto;
 
+      left: 70px;
 
+      z-index: 2;
 
+    }
 
+  }
 
+}

+ 34 - 9
src/pages/A2yblm/index.tsx
Wyświetl plik 

@@ -11,6 +11,7 @@ import { RootState } from '@/store'
 
 import Zback from '@/components/Zback'
 
 import { cutUnityFu } from '../A0base/data'
 
 import Zloding from '@/components/Zloding'
 
+import Zlight from '@/components/Zlight'
 
 
 function A2yblm() {
 
   const [loding, setLoding] = useState(false)
 
@@ -18,7 +19,6 @@ function A2yblm() {
 
   useEffect(() => {
 
     // 切换场景
 
     cutUnityFu('TombstoneView', () => setLoding(true))
 
-
 
   }, [])
 
 
   const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
 
@@ -26,6 +26,18 @@ function A2yblm() {
 
   const [currentTab, setCurrentTab] = useState('tab1')
 
 
   useEffect(() => {
 
+    // currentTab===tab2的时候显示光源控件
 
+    //  进页面默认给光源30
 
+
 
+    // 离开页面默认给光源30
 
+    callIframeFu('setLightRotationY', 30)
 
+
 
+    return () => {
 
+      callIframeFu('setLightRotationY', 30)
 
+    }
 
+  }, [currentTab])
 
+
 
+  useEffect(() => {
 
     const urlAll = window.location.href
 
 
     if (urlAll.includes('?m=')) {
 
@@ -87,6 +99,7 @@ function A2yblm() {
 
       callIframeFu('showInscription', -1)
 
     }
 
     if (bottomTxt) {
 
+      callIframeFu('setLightRotationY', 30)
 
       setBottomTxt('')
 
       rightTopTabRef.current?.sonSetStaFu()
 
     } else window.location.replace('#/base')
 
@@ -96,7 +109,13 @@ function A2yblm() {
 
   const rightTopTabRef = useRef<any>(null)
 
 
   return (
 
-    <div className={classNames(myLangue === 'ZH' ? '' : styles.A2yblmEn, styles.A2yblm)}>
 
+    <div
 
+      className={classNames(
 
+        myLangue === 'ZH' ? '' : styles.A2yblmEn,
 
+        styles.A2yblm,
 
+        isShowMzmTitle ? styles.A2yblmLight : ''
 
+      )}
 
+    >
 
       <Zloding isShow={loding} bacNum={3} callBackFu={modelChange} />
 
 
       {/* 左侧边 */}
 
@@ -151,12 +170,14 @@ function A2yblm() {
 
 
       {/* 墓志铭体制之变例 */}
 
       {isShowMzmTitle && (
 
-        <div className='extra' onClick={() => setIsOpenMzm(true)}>
 
-          <div className='icon'>
 
-            <img src={require('@/assets/img/tip.png')} alt='' />
 
+        <>
 
+          <div className='extra' onClick={() => setIsOpenMzm(true)}>
 
+            <div className='icon'>
 
+              <img src={require('@/assets/img/tip.png')} alt='' />
 
+            </div>
 
+            <div className='txt'>{bottomTxt}</div>
 
           </div>
 
-          <div className='txt'>{bottomTxt}</div>
 
-        </div>
 
+        </>
 
       )}
 
 
       {isOpenMzm && (
 
@@ -217,8 +238,9 @@ function A2yblm() {
 
       {/* 文物鉴赏，全文鉴赏  */}
 
       <div className='wenwu' onClick={gotoQuanwenOrWenwu}>
 
         <img
 
-          src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}${myLangue === 'EN' ? 'En' : ''
 
-            }.png`)}
 
+          src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}${
 
+            myLangue === 'EN' ? 'En' : ''
 
+          }.png`)}
 
           alt=''
 
         />
 
       </div>
 
@@ -251,6 +273,9 @@ function A2yblm() {
 
           ></div>
 
         </div>
 
       </div>
 
+
 
+      {/* 调整光线 */}
 
+      {currentTab === 'tab2' || isShowMzmTitle ? <Zlight /> : null}
 
     </div>
 
   )
 
 }

+ 8 - 1
src/pages/A3beie/index.module.scss
Wyświetl plik 

@@ -4,6 +4,13 @@
 
   position: relative;
 
 
   :global {
 
+
 
+    // 重置亮度滚动位置
 
+    #Zlight {
 
+      right: auto;
 
+      left: 70px;
 
+    }
 
+
 
     .container {
 
       width: 380px;
 
       height: 100%;
 
@@ -65,7 +72,7 @@
 
       width: 70px;
 
       height: 70px;
 
       position: absolute;
 
-      z-index: 1;
 
+      z-index: 100;
 
       cursor: pointer;
 
 
       &>img {

+ 14 - 1
src/pages/A3beie/index.tsx
Wyświetl plik 

@@ -1,4 +1,4 @@
 
-import React from 'react'
 
+import React, { useEffect } from 'react'
 
 import styles from './index.module.scss'
 
 import { callIframeFu } from '@/utils/history'
 
 import classNames from 'classnames'
 
@@ -6,8 +6,19 @@ import MenuSider from '@/components/MenuSider'
 
 import { useSelector } from 'react-redux'
 
 import { RootState } from '@/store'
 
 import Zback from '@/components/Zback'
 
+import Zlight from '@/components/Zlight'
 
 
 function A3beie() {
 
+  useEffect(() => {
 
+    //  进页面默认给光源30
 
+    callIframeFu('setLightRotationY', 30)
 
+
 
+    // 离开页面默认给光源30
 
+    return () => {
 
+      callIframeFu('setLightRotationY', 30)
 
+    }
 
+  }, [])
 
+
 
   const { myLangue } = useSelector((state: RootState) => state.A0Layout)
 
 
   const handleBack = () => {
 
@@ -22,6 +33,8 @@ function A3beie() {
 
 
   return (
 
     <div className={classNames(styles.A3beie, myLangue === 'ZH' ? '' : styles.A3beieEn)}>
 
+      <Zlight />
 
+
 
       <Zback clickFu={() => handleBack()} />
 
 
       <div className='wenwu' onClick={() => gotoQuanwen()}>