重写初始页面

public/myData/myData.js

@@ -971,7 +971,7 @@ const myDataTemp = {
     },
     {
       type: '中西融合',
-      name: '护法狮子、飞天',
+      name: '护法狮子丶飞天',
       intro:
         '碑侧所刻护法狮子，则融合了中亚装饰风格，形态威猛，结构紧凑。佛龛两侧的飞天形象灵动，衣纹流畅如行云流水，线条疏密有致，技艺高超。',
       imgItems: [

src/AppTemp.tsx

@@ -10,7 +10,7 @@ import SpinLoding from './components/SpinLoding'
 // import MessageCom from './components/Message'
 // import LookDom from './components/LookDom'
 import NotFound from '@/components/NotFound'
-const A1home = React.lazy(() => import('./pages/A1home'))
+const A1home = React.lazy(() => import('./pages/A1home2'))
 
 // 设计图按照 1920 X 919 来开发
 const planSize = {

src/assets/styles/base.css

@@ -363,3 +363,17 @@ textarea {
   font-family: 'SimSun' !important;
   font-weight: 700;
 }
+.opacityChange {
+  animation: opacityChange 2s infinite linear;
+}
+@keyframes opacityChange {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/assets/styles/base.less

@@ -471,4 +471,23 @@ textarea {
 .myFont {
   font-family:'SimSun' !important;
   font-weight: 700;
+}
+
+
+// 热点图标闪动
+.opacityChange{
+  animation: opacityChange 2s infinite linear;
+}
+@keyframes opacityChange {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }

src/pages/A0base/index.module.scss

@@ -146,13 +146,16 @@
       position: absolute;
       z-index: 1;
       top: 3%;
-      left: 2%;
+      left: 5%;
       cursor: pointer;
       color: rgba(255, 233, 182, 1);
     }
 
     /* 先导片 */
     .guideVideo {
+
+      display: none !important;
+
       width: 50px;
       height: 50px;
       position: absolute;
@@ -217,7 +220,7 @@
         color: black;
         font-size: 18px;
         line-height: 24px;
-        letter-spacing: 2px;
+        letter-spacing: 1px;
         text-align: justify;
       }
       .btn{

src/pages/A1home/index.module.scss

@@ -3,62 +3,99 @@
   height: 100%;
   position: relative;
   z-index: 1;
+
   :global {
-    .loadingP {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+    .A1baseVideo {
       width: 100%;
       height: 100%;
-      background: url(../../assets/img/bg_home.png) no-repeat center center;
+    }
+
+    .btn {
+      position: absolute;
+      bottom: 10%;
+      left: 58%;
+      width: 60px;
+      height: 60px;
+      background: url(../../assets/img/btn_home.png) no-repeat center center;
       background-size: 100% 100%;
+      cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      flex-direction: column;
-      color: rgba(166, 118, 67, 1);
-      .progress {
-        width: 200px;
+      z-index: 10;
+
+
+      .txt {
+        width: 35px;
         height: 30px;
-        line-height: 30px;
+        color: rgba(255, 233, 182, 1);
+        font-size: 15px;
+        line-height: 15px;
         text-align: center;
-        transform: translate(70px, 155px);
+        animation: zhiti 2s infinite linear;
       }
-      .btn {
-        width: 60px;
-        height: 60px;
-        background: url(../../assets/img/btn_home.png) no-repeat center center;
-        background-size: 100% 100%;
-        transform: translate(66px, 155px);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        & > img {
-          width: 60%;
-          height: 60%;
-          object-fit: contain;
-          animation: yunShan 3s infinite linear;
-        }
-        .txt {
-          width: 35px;
-          height: 30px;
-          color: rgba(255, 233, 182, 1);
-          font-size: 15px;
-          line-height: 15px;
-          text-align: center;
-          animation: zhiti 2s infinite linear;
+    }
+
+    // 加载进度条
+    .Aloding {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 11;
+      background-color: rgba(0, 0, 0, .6);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .AlodingT {
+        width: 80%;
+        height: 20px;
+        border: 1px solid #fff;
+        border-radius: 10px;
+        overflow: hidden;
+
+        &>div {
+          width: 0%;
+          height: 100%;
+          background-color: #fff;
         }
       }
     }
-    .A1videoBox {
+
+    // 第二个视频
+    .A1video {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
-      .A1video {
-        width: 100%;
-        height: 100%;
+      z-index: 12;
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s;
+
+      .A1videoBtn {
+        position: absolute;
+        bottom: 15px;
+        right: 15px;
       }
     }
+
+    .A1videoShow {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }
+
+
+// --------------移动端
+// .A1homeMo {
+//   :global {
+//      .btn {
+
+//       }
+//   }
+// }

src/pages/A1home/index.tsx

@@ -1,94 +1,112 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import classNames from 'classnames'
+import { isPc } from '@/utils/http'
 
 function A1home() {
-  const [videoOk, setVideoOk] = useState(false)
-  const [loadOk, setLoadOk] = useState(false)
-  const [progress, setProgress] = useState(0)
+  // 点击进入
+  const [baseFlag, setBaseFlag] = useState(false)
 
-  useEffect(() => {
-    const modalIframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
-    if (modalIframe) {
-      modalIframe.style.display = 'block'
-      modalIframe.src = 'Chenzhebei-ShanxiMuseum/index.html'
-    }
-  }, [])
-
-  const playerRef = useRef<any>(null)
+  // 初始视频
   useEffect(() => {
     const params = {
       objectFit: 'cover', // 视频的object-fit样式, 默认 cover
-      loop: false, // 是否循环, 默认false
-      autoplay: false, // 自动播放, 默认false
-      onPlay: () => { }, // 触发播放事件
-      onPause: () => { }, // 触发暂停事件
-      onEnded: () => {
-        window.location.replace('#/base')
-      }, // 触发播放结束事件
-      onSourceEstablished: () => {
-        setVideoOk(true)
-      } //有足够的数据可以播放了
+      loop: true, // 是否循环, 默认false
+      autoplay: true, // 自动播放, 默认false
+      onSourceEstablished: () => {} //有足够的数据可以播放了
     }
-    playerRef.current = F_Video('./myData/home.ts', params)
-    const dom = document.querySelector('.A1video')!
-    dom.append(playerRef.current.domElement)
+    const videoInit = F_Video('./myData/base.ts', params)
+    const dom = document.querySelector('.A1baseVideo')!
+    dom.append(videoInit.domElement)
   }, [])
 
-  const timeRR = useRef(-1)
+  // 进度条
+  const [loding, setLoding] = useState(0)
+  const lodingRef = useRef(0)
+
   useEffect(() => {
-    if (videoOk) {
-      if (progress === 98) setProgress(100)
-      clearInterval(timeRR.current)
-      timeRR.current = window.setInterval(() => {
-        if (loadOk) {
-          console.log('播放视频')
-          playerRef.current.play()
-          clearInterval(timeRR.current)
-          return
-        }
-      }, 50)
+    lodingRef.current = loding
+  }, [loding])
+
+  const timeRef = useRef(-1)
+
+  useEffect(() => {
+    if (baseFlag) {
+      timeRef.current = window.setInterval(() => {
+        if (lodingRef.current >= 100) clearInterval(timeRef.current)
+        else setLoding(lodingRef.current + 1)
+      }, 100)
+      return () => {
+        clearInterval(timeRef.current)
+      }
     }
-  }, [loadOk, progress, videoOk])
+  }, [baseFlag])
 
-  const enter = useCallback(() => {
-    if (progress === 100) setLoadOk(true)
-  }, [progress])
+  // 第二个视频 是否准备完毕
+  const [video2Flag, setVideo2Flag] = useState(false)
+  const playerRef = useRef<any>(null)
+  useEffect(() => {
+    if (baseFlag) {
+      const params = {
+        objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+        loop: false, // 是否循环, 默认false
+        autoplay: false, // 自动播放, 默认false
+        onPlay: () => {}, // 触发播放事件
+        onPause: () => {}, // 触发暂停事件
+        onEnded: () => {
+          window.location.replace('#/base')
+        }, // 触发播放结束事件
+        onSourceEstablished: () => {
+          setVideo2Flag(true)
+        } //有足够的数据可以播放了
+      }
+      playerRef.current = F_Video('./myData/home.ts', params)
+      const dom = document.querySelector('.A1videoBox')!
+      dom.append(playerRef.current.domElement)
+    }
+  }, [baseFlag])
 
   useEffect(() => {
-    // 1-10
-    window.unityLoading = (progress: number) => {
-      console.log('当前进度', progress * 100 + '%')
-      if (progress * 100 >= 98) {
-        setProgress(98)
-        return
+    if (video2Flag) {
+      const modalIframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
+      if (modalIframe) {
+        modalIframe.style.display = 'block'
+        modalIframe.src = 'Chenzhebei-ShanxiMuseum/index.html'
+        modalIframe.loading = 'lazy'
+      }
+      window.unityLoading = (progress: number) => {
+        clearInterval(timeRef.current)
+        const num = Math.round(Number(progress * 100))
+        setLoding(num)
       }
-      setProgress(Number((progress * 100).toFixed(0)))
     }
-  }, [setProgress])
+  }, [video2Flag])
 
-  // 判断是否已经加载好了iframe和视频,如果已经加载好了设置对应进度为100
+  // 第二个视频自动播放
   useEffect(() => {
-    const iframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
-    if (iframe && iframe.contentWindow && videoOk) {
-      setProgress(100)
+    if (loding >= 100) {
+      playerRef.current.play()
     }
-  }, [loadOk, videoOk])
+  }, [loding])
 
   return (
-    <div className={styles.A1home}>
-      <div className='loadingP' style={{ display: loadOk ? 'none' : 'flex' }}>
-        <div className='btn' onClick={() => enter()}>
-          {progress !== 100 ? (
-            <img src={require('@/assets/img/home_loading.png')} alt='' draggable='false' />
-          ) : (
-            <div className="txt">点击进入</div>
-          )}
-        </div>
-        <div className='progress'>加载{progress}%...</div>
+    <div className={classNames(styles.A1home, isPc ? '' : styles.A1homeMo)}>
+      <div className='A1baseVideo'></div>
+      <div className='btn' onClick={() => setBaseFlag(true)}>
+        <div className='txt'>点击进入</div>
       </div>
-      {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
-      <div className='A1videoBox'>
-        <div className='A1video' style={{ opacity: 1 }}></div>
+
+      {baseFlag ? (
+        <div className='Aloding'>
+          <div className='AlodingT'>
+            <div style={{ width: `${loding}%` }}></div>
+          </div>
+        </div>
+      ) : null}
+
+      <div className={classNames('A1video', loding >= 100 ? 'A1videoShow' : '')}>
+        <div className='A1videoBox'></div>
+        <div className='A1videoBtn' onClick={()=>window.location.replace('#/base')}>跳过</div>
       </div>
     </div>
   )

src/pages/A1home2/index.module.scss

@@ -0,0 +1,112 @@
+.A1home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+
+  :global {
+    .loadingP {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      // background: url(../../assets/img/bg_home.png) no-repeat center center;
+      // background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      color: rgba(166, 118, 67, 1);
+      z-index: 10;
+
+    //----------新加的初始视频
+    .A1baseVideo{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+
+      .progress {
+        width: 200px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        transform: translate(70px, 155px);
+        position: relative;
+        z-index: 10;
+      }
+
+      .btn {
+        width: 60px;
+        height: 60px;
+        background: url(../../assets/img/btn_home.png) no-repeat center center;
+        background-size: 100% 100%;
+        transform: translate(66px, 155px);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        z-index: 10;
+
+        &>img {
+          width: 60%;
+          height: 60%;
+          object-fit: contain;
+          animation: yunShan 3s infinite linear;
+        }
+
+        .txt {
+          width: 35px;
+          height: 30px;
+          color: rgba(255, 233, 182, 1);
+          font-size: 15px;
+          line-height: 15px;
+          text-align: center;
+          animation: zhiti 2s infinite linear;
+        }
+      }
+    }
+
+    .A1videoBox {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .A1video {
+        width: 100%;
+        height: 100%;
+      }
+      .A1videoBtn{
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+      }
+    }
+
+
+
+  }
+}
+
+
+// --------------移动端
+.A1homeMo {
+  :global {
+    .loadingP {
+      .btn {
+        transform: translate(90px, 155px);
+      }
+
+      .progress {
+        transform: translate(100px, 155px);
+        font-weight: 700;
+      }
+    }
+  }
+}

src/pages/A1home2/index.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import { isPc } from '@/utils/http'
+
+function A1home() {
+  // 开场视频-------------
+  const [baseFlag, setBaseFlag] = useState(false)
+  useEffect(() => {
+    const params = {
+      objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+      loop: true, // 是否循环, 默认false
+      autoplay: true, // 自动播放, 默认false
+      onSourceEstablished: () => {
+        setBaseFlag(true)
+      } //有足够的数据可以播放了
+    }
+    playerRef.current = F_Video('./myData/base.ts', params)
+    const dom = document.querySelector('.A1baseVideo')!
+    dom.append(playerRef.current.domElement)
+  }, [])
+
+  // 开场视频-------------
+
+  const [videoOk, setVideoOk] = useState(false)
+  const [loadOk, setLoadOk] = useState(false)
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    console.log('xxxxxxxx', progress)
+  }, [progress])
+
+  useEffect(() => {
+    if (baseFlag) {
+      const modalIframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
+      if (modalIframe) {
+        modalIframe.style.display = 'block'
+        modalIframe.src = 'Chenzhebei-ShanxiMuseum/index.html'
+        modalIframe.loading = 'lazy'
+      }
+    }
+  }, [baseFlag])
+
+  const playerRef = useRef<any>(null)
+  useEffect(() => {
+    if (baseFlag) {
+      const params = {
+        objectFit: 'cover', // 视频的object-fit样式, 默认 cover
+        loop: false, // 是否循环, 默认false
+        autoplay: false, // 自动播放, 默认false
+        onPlay: () => {}, // 触发播放事件
+        onPause: () => {}, // 触发暂停事件
+        onEnded: () => {
+          window.location.replace('#/base')
+        }, // 触发播放结束事件
+        onSourceEstablished: () => {
+          setVideoOk(true)
+        } //有足够的数据可以播放了
+      }
+      playerRef.current = F_Video('./myData/home.ts', params)
+      const dom = document.querySelector('.A1video')!
+      dom.append(playerRef.current.domElement)
+    }
+  }, [baseFlag])
+
+  const timeRR = useRef(-1)
+  useEffect(() => {
+    if (videoOk) {
+      if (progress === 98) setProgress(100)
+      clearInterval(timeRR.current)
+      timeRR.current = window.setInterval(() => {
+        if (loadOk) {
+          console.log('播放视频')
+          playerRef.current.play()
+          clearInterval(timeRR.current)
+          return
+        }
+      }, 50)
+    }
+  }, [loadOk, progress, videoOk])
+
+  const enter = useCallback(() => {
+    if (progress === 100) setLoadOk(true)
+  }, [progress])
+
+  useEffect(() => {
+    // 1-10
+    window.unityLoading = (progress: number) => {
+      console.log('当前进度', progress * 100 + '%')
+      if (progress * 100 >= 98) {
+        setProgress(98)
+        return
+      }
+      setProgress(Number((progress * 100).toFixed(0)))
+    }
+  }, [setProgress])
+
+  // 判断是否已经加载好了iframe和视频,如果已经加载好了设置对应进度为100
+  useEffect(() => {
+    const iframe = document.getElementById('modalIframe') as HTMLIFrameElement | null
+    if (iframe && iframe.contentWindow && videoOk && baseFlag) {
+      console.log('sadasdasdsadas')
+
+      setProgress(100)
+    }
+  }, [baseFlag, loadOk, videoOk])
+
+  return (
+    <div className={classNames(styles.A1home, isPc ? '' : styles.A1homeMo)}>
+      <div className='loadingP' style={{ display: loadOk ? 'none' : 'flex' }}>
+        <div className='A1baseVideo'></div>
+
+        <div className='btn' onClick={() => enter()}>
+          {progress !== 100 ? (
+            <img src={require('@/assets/img/home_loading.png')} alt='' draggable='false' />
+          ) : (
+            <div className='txt'>点击进入</div>
+          )}
+        </div>
+        <div className='progress' style={{ opacity: progress === 100 ? 0 : 1 }}>
+          加载{progress}%...
+        </div>
+      </div>
+      {/* ------------微信浏览器不让视频自动播放，用ts的方式*/}
+      {baseFlag ? (
+        <div className='A1videoBox'>
+          <div className='A1video' style={{ opacity: 1 }}></div>
+          <div className='A1videoBtn' onClick={() => window.location.replace('#/base')}>
+            跳过
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+const MemoA1home = React.memo(A1home)
+
+export default MemoA1home

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

@@ -4,6 +4,7 @@
   position: relative;
   background: url('../../../assets/img/A6_zaoxiang_bg.png') no-repeat center center;
   background-size: 100% 100%;
+
   :global {
     .back {
       width: 60px;
@@ -12,11 +13,13 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .title {
       position: absolute;
       top: 15%;
@@ -24,11 +27,13 @@
       transform: translateX(-115%);
       height: 60px;
       width: 330px;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .zaoxiang_text {
       position: absolute;
       top: 30%;
@@ -41,21 +46,26 @@
       gap: 10px;
       color: rgba(255, 233, 182, 1);
       font-weight: lighter;
+
       .t1 {
         font-size: 16px;
       }
+
       .line1 {
         width: 100%;
         height: 25px;
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: contain;
         }
       }
+
       .t2 {
-        width: 87%;
+        width: 90%;
         font-size: 13px;
         letter-spacing: 0.5px;
+        text-align: justify;
       }
     }
 
@@ -69,29 +79,35 @@
       display: flex;
       justify-content: center;
       align-items: center;
+
       .addtxt {
         width: 2px;
         line-height: 9px;
         font-size: 8px;
       }
-      & > img {
+
+      &>img {
         height: 60px;
         width: 60px;
         object-fit: contain;
       }
     }
+
     .ft {
       cursor: pointer;
       transform: translate(-66%, 50%);
     }
+
     .fd {
       cursor: pointer;
       transform: translate(189%, 243%);
     }
+
     .yx {
       cursor: pointer;
       transform: translate(493%, 90%);
     }
+
     .gy {
       cursor: pointer;
       transform: translate(523%, -139%);
@@ -109,11 +125,13 @@
       width: 100%;
       height: 12%;
     }
+
     .detailpageContent {
       height: 88%;
       width: 100%;
       background: url('../../../assets/img/A6_zaoxiang_detail_bg.png') no-repeat center top;
       background-size: 100% 94%;
+
       .back {
         width: 60px;
         height: 30px;
@@ -121,11 +139,13 @@
         top: 3%;
         left: 4%;
         cursor: pointer;
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: contain;
         }
       }
+
       .title,
       .txtcontent,
       .preview,
@@ -135,23 +155,27 @@
         top: 50%;
         transform: translate(-50%, -50%);
       }
+
       .detailTitle {
         transform: translate(86%, -5%);
         width: 65px;
         height: 168px;
         display: flex;
         justify-content: center;
+
         .name {
           width: 50%;
-          height: 150px;
+          height: 240px;
           background: url('../../../assets/img/A6_zaoxiang_name_bg.png') no-repeat center center;
           background-size: 100% 100%;
-          color: rgba(255, 233, 182, 1);
+          color: #ffe8b5;
           font-size: 17px;
           font-weight: lighter;
           padding-top: 25px;
           text-align: center;
+          font-weight: 700;
         }
+
         .txt {
           width: 20px;
           height: 100%;
@@ -162,15 +186,18 @@
           font-size: 12px;
           color: rgba(124, 75, 54, 1);
           margin-left: 6px;
+
           .icon1,
           .icon2 {
             width: 20px;
             height: 20px;
-            & > img {
+
+            &>img {
               height: 100%;
               object-fit: contain;
             }
           }
+
           .text {
             width: 100%;
             height: fit-content;
@@ -179,6 +206,7 @@
           }
         }
       }
+
       .txtcontent {
         width: 280px;
         height: fit-content;
@@ -187,7 +215,9 @@
         font-size: 13px;
         color: rgba(93, 96, 96, 1);
         line-height: 22px;
+        text-align: justify;
       }
+
       .preview {
         transform: translate(-94%, 27%);
         width: 400px;
@@ -195,6 +225,7 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
+
         .previewItem {
           width: 180px;
           height: 100%;
@@ -202,27 +233,32 @@
           align-items: center;
           justify-content: center;
           position: relative;
+
           .pic {
             width: 120px;
             height: 120px;
             border-radius: 50%;
             background-color: #ccc;
-            & > img {
+
+            &>img {
               border-radius: 50%;
               width: 120px;
               height: 120px;
               object-fit: cover;
             }
           }
+
           .txt {
+            margin-left: 20px;
             width: 25px;
             height: 80px;
             font-size: 10px;
-            line-height: 11px;
+            line-height: 18px;
             color: rgba(175, 135, 100, 1);
             text-align: center;
             writing-mode: vertical-rl;
           }
+
           .icon3 {
             width: 30px;
             height: 30px;
@@ -234,7 +270,8 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            & > img {
+
+            &>img {
               height: 20px;
               width: 20px;
               object-fit: contain;
@@ -242,11 +279,13 @@
           }
         }
       }
+
       .foxiang {
         transform: translate(5%, -41%);
         width: 400px;
         height: 150%;
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: cover;
         }
@@ -254,3 +293,131 @@
     }
   }
 }
+
+
+
+//--------移动端
+.ZaoxiangMo {
+  :global {
+    .back {
+      width: 80px;
+      height: 40px;
+
+      img {
+        object-fit: fill !important;
+      }
+    }
+
+    .zaoxiang_text {
+      .t1 {
+        font-size: 18px;
+      }
+
+      .t2 {
+        font-size: 16px;
+      }
+    }
+
+    .dot {
+      width: 70px;
+      height: 72px;
+
+      img {
+        width: 70px;
+        height: 70px;
+      }
+
+      .addtxt {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+
+    .ft {
+      transform: translate(-68%, 34%);
+    }
+
+    .fd {
+      transform: translate(160%, 170%);
+    }
+
+    .yx {
+      transform: translate(430%, 65%);
+    }
+
+    .gy {
+      transform: translate(459%, -131%);
+    }
+  }
+}
+
+.detailPageMo {
+  :global {
+
+    .detailpageContent {
+      .back {
+        width: 80px;
+        height: 40px;
+
+        img {
+          object-fit: fill !important;
+        }
+      }
+
+      .detailTitle {
+        transform: translate(30%, 0%);
+        width: 80px;
+        height: auto;
+        display: flex;
+        justify-content: center;
+        position: relative;
+
+        .name {
+          height: auto;
+          font-size: 18px;
+          padding: 23px 10px 46px 10px;
+
+        }
+
+        .txt {
+          position: absolute;
+          top: 10px;
+          left: 60px;
+          padding-top: 14px;
+          width: 30px;
+          height: auto;
+
+          .icon1,
+          .icon2 {
+            width: 30px;
+            height: 30px;
+
+          }
+
+          .text {
+            font-size: 16px;
+            line-height: 28px;
+            writing-mode: vertical-lr;
+          }
+        }
+      }
+
+
+      .txtcontent{
+        font-size: 16px;
+        letter-spacing: 2px;
+        line-height: 24px;
+      }
+
+      .preview .previewItem{
+        .txt{
+          height: auto;
+          font-size: 14px;
+          letter-spacing: 2px;
+        }
+      }
+    }
+
+
+  }
+}

src/pages/A6ybwx/A6_1_zxys/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { isPc, myData } from '@/utils/http'
+import classNames from 'classnames'
 
 function Zaoxiang() {
   const [currentType, setCurrentType] = useState('')
@@ -13,7 +14,7 @@ function Zaoxiang() {
     setIsShowDetail(true)
   }
   return (
-    <div className={styles.Zaoxiang}>
+    <div className={classNames(styles.Zaoxiang,isPc?'':styles.ZaoxiangMo)}>
       <div className='back' onClick={() => window.location.replace('#/ybwx?tab=1')}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
@@ -49,7 +50,7 @@ function Zaoxiang() {
 
       {/* 高浮雕 */}
       {isShowDetail && (
-        <div className={styles.detailPage}>
+        <div className={classNames(styles.detailPage,isPc?'':styles.detailPageMo)}>
           <div className='detailpageTop'></div>
           <div className='detailpageContent'>
             <div className='back' onClick={() => setIsShowDetail(false)}>

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

@@ -2,9 +2,11 @@
   width: 100%;
   overflow-x: auto;
   transition: all 0.3s ease-in-out;
+
   &::-webkit-scrollbar {
     height: 0;
   }
+
   :global {
     .SinicizeScroll {
       width: fit-content;
@@ -22,6 +24,7 @@
   position: relative;
   background: url('../../../assets/img/A6_sinicize_bg.png') no-repeat center center;
   background-size: 100% 100%;
+
   :global {
     .back {
       width: 60px;
@@ -30,11 +33,13 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .title {
       position: absolute;
       top: 13%;
@@ -42,11 +47,13 @@
       transform: translateX(-140%);
       height: 100px;
       width: 275px;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .text {
       position: absolute;
       top: 36%;
@@ -59,20 +66,24 @@
       gap: 10px;
       color: rgba(93, 96, 96, 1);
       font-weight: lighter;
+
       .line1 {
         width: 100%;
         height: 25px;
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: contain;
         }
       }
+
       .t2 {
         width: 87%;
         font-size: 13px;
         letter-spacing: 0.5px;
       }
     }
+
     .zhufo,
     .pusha {
       position: absolute;
@@ -80,18 +91,22 @@
       left: 50%;
       transform: translate(-50%, -50%);
       opacity: 0.6;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
+
       &.active {
         opacity: 1;
       }
     }
+
     .zhufo {
       height: 335px;
       width: 280px;
       transform: translate(-31%, -50%);
+
       .name {
         font-size: 10px;
         font-weight: 500;
@@ -99,6 +114,7 @@
         text-align: center;
       }
     }
+
     .pusha {
       height: 305px;
       width: 100px;
@@ -127,6 +143,7 @@
         background-size: 100% 100%;
       }
     }
+
     .sinicizeBtn1 {
       bottom: 35%;
     }
@@ -142,6 +159,7 @@
   color: rgba(124, 75, 54, 1);
   font-weight: 500;
   font-size: 9px;
+
   :global {
     .btn {
       width: 40px;
@@ -151,6 +169,7 @@
       text-align: center;
       line-height: 17px;
     }
+
     .arrowL,
     .arrowR {
       width: 10px;
@@ -199,11 +218,13 @@
       height: 100%;
       display: flex;
       align-items: center;
+
       .yearItem {
         width: fit-content;
         height: 100%;
         display: flex;
         align-items: center;
+
         .year {
           width: 100px;
           height: 100%;
@@ -222,6 +243,7 @@
             background-image: linear-gradient(to bottom, #7d3807 0%, rgba(232, 205, 149, 0) 100%);
           }
         }
+
         .detailShow,
         .detailHide {
           height: 100%;
@@ -231,6 +253,7 @@
           transition: all 0.7s ease-in-out;
           display: flex;
           align-items: center;
+
           .left {
             width: 38%;
             height: 100%;
@@ -239,6 +262,7 @@
             flex-direction: column;
             align-items: center;
             gap: 20px;
+
             .desc {
               color: rgba(93, 96, 96, 1);
               font-size: 12px;
@@ -246,6 +270,7 @@
               max-height: 60%;
               height: fit-content;
             }
+
             .txtItem {
               width: 100%;
               height: fit-content;
@@ -253,17 +278,20 @@
               display: flex;
               flex-direction: column;
               gap: 5px;
+
               .title {
                 font-size: 12px;
                 font-weight: 500;
                 color: rgba(124, 75, 54, 1);
               }
+
               .txt {
                 color: rgba(93, 96, 96, 1);
                 font-size: 12px;
               }
             }
           }
+
           .right {
             width: 60%;
             height: 100%;
@@ -274,6 +302,7 @@
             justify-content: center;
             gap: 10px;
             position: relative;
+
             .title {
               width: 100%;
               height: 20px;
@@ -282,21 +311,25 @@
               color: rgba(124, 75, 54, 1);
               text-align: center;
             }
+
             .pic {
               width: 100%;
               height: 65%;
-              & > img {
+
+              &>img {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
               }
             }
+
             .txt {
               width: 90%;
               height: 20%;
               font-size: 11px;
               color: rgba(93, 96, 96, 1);
             }
+
             .iconContainner {
               align-self: flex-end;
               width: 100%;
@@ -305,11 +338,13 @@
               align-items: center;
               justify-content: center;
               gap: 10px;
+
               .icon {
                 cursor: pointer;
                 width: 14px;
                 height: 14px;
-                & > img {
+
+                &>img {
                   width: 100%;
                   height: 100%;
                   object-fit: contain;
@@ -318,16 +353,20 @@
             }
           }
         }
+
         .detailShow {
           width: 700px;
+
           .left,
           .right {
             transition: all 0.3s ease-in-out 0.5s;
             opacity: 1;
           }
         }
+
         .detailHide {
           width: 0;
+
           .left,
           .right {
             transition: all 0.3s ease-in-out;
@@ -346,6 +385,7 @@
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.5);
+
   :global {
     .gesture {
       position: absolute;
@@ -361,11 +401,13 @@
       font-size: 10px;
       font-weight: 500;
       color: #fff;
-      & > img {
+
+      &>img {
         width: 60px;
         height: 50px;
         object-fit: contain;
       }
+
       .txt {
         text-align: center;
         width: 100%;
@@ -375,6 +417,7 @@
         color: #fff;
       }
     }
+
     .t1,
     .t2 {
       width: 77px;
@@ -389,21 +432,25 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
+
       .txt {
         width: 60px;
         height: 22px;
       }
+
       .lineContainer {
         width: 100%;
         height: 5px;
         display: flex;
         align-items: center;
         justify-content: flex-end;
+
         .line {
           width: 60px;
           height: 0;
           border-bottom: 1px dashed #fff;
         }
+
         .ball {
           width: 5px;
           height: 5px;
@@ -412,11 +459,30 @@
         }
       }
     }
+
     .t1 {
       transform: translate(317%, 34%);
     }
+
     .t2 {
       transform: translate(317%, 371%);
     }
   }
 }
+
+
+
+// ----------移动端
+.Sinicize1 {
+  :global {
+    .back {
+      width: 80px;
+      height: 40px;
+
+      img {
+        object-fit: fill !important;
+      }
+    }
+  }
+
+}

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useRef } from 'react'
 import styles from './index.module.scss'
-import { myData } from '@/utils/http'
+import { isPc, myData } from '@/utils/http'
+import classNames from 'classnames'
+
 function Sinicize() {
   const [currentTab, setCurrentTab] = useState(0)
   const [selectedTime, setSelectedTime] = useState(0)
@@ -24,7 +26,10 @@ function Sinicize() {
     direct: string
   }) => {
     return (
-      <div className={styles.label} style={{ inset: inset }}>
+      <div
+        className={classNames(styles.label, isPc ? '' : styles.labelMo)}
+        style={{ inset: inset }}
+      >
         {direct === 'left' ? <div className='arrowL' style={{ width: width + 'px' }} /> : null}
         <div className='btn'>{name}</div>
         {direct === 'right' ? <div className='arrowR' style={{ width: width + 'px' }} /> : null}
@@ -59,7 +64,7 @@ function Sinicize() {
 
   // 处理触摸移动事件
   const handleOriTouchMove = (e: any) => {
-    e.preventDefault()
+    // e.preventDefault()
     const deltaX = e.touches[0].clientY - ori_touchStartX.current
     if (originRef.current) {
       originRef.current.scrollLeft -= deltaX
@@ -76,13 +81,16 @@ function Sinicize() {
     <>
       <div
         ref={originRef}
-        className={styles.Sinicize}
+        className={classNames(styles.Sinicize, isPc ? '' : styles.SinicizeMo)}
         onWheel={handleWheel}
         onTouchMove={handleOriTouchMove}
         onTouchStart={handleTouchStart}
       >
         <div className='SinicizeScroll'>
-          <div ref={sinicize1Ref} className={styles.Sinicize1}>
+          <div
+            ref={sinicize1Ref}
+            className={classNames(styles.Sinicize1, isPc ? '' : styles.Sinicize1Mo)}
+          >
             <div className='back' onClick={() => window.location.replace('#/ybwx?tab=1')}>
               <img src={require('@/assets/img/btn_back.png')} alt='' />
             </div>
@@ -93,9 +101,7 @@ function Sinicize() {
               <div className='line1'>
                 <img src={require('@/assets/img/A6_sinicize_line2.png')} draggable='false' alt='' />
               </div>
-              <div className='t2'>
-                {myData.sinicizeDataStatic.desc}
-              </div>
+              <div className='t2'>{myData.sinicizeDataStatic.desc}</div>
             </div>
             <div className={`zhufo ${currentTab === 0 ? 'active' : ''}`}>
               <img src={require('@/assets/img/A6_sinicize_zhufo.png')} draggable='false' alt='' />{' '}
@@ -138,7 +144,7 @@ function Sinicize() {
             </div>
           </div>
 
-          <div className={styles.Sinicize2}>
+          <div className={classNames(styles.Sinicize2, isPc ? '' : styles.Sinicize2Mo)}>
             <div className='scroll'>
               {myData.sinicizeData.map((item, index) => (
                 <div className='yearItem' key={index}>
@@ -151,9 +157,7 @@ function Sinicize() {
                   </div>
                   <div className={`${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
                     <div className='left'>
-                      <div className='desc'>
-                        {item.desc}
-                      </div>
+                      <div className='desc'>{item.desc}</div>
                       {item.items.map((item, index) => (
                         <div className='txtItem' key={index}>
                           <div className='title'>{item.title}</div>
@@ -162,19 +166,39 @@ function Sinicize() {
                       ))}
                     </div>
                     <div className='right'>
-                      <div className='title'>{myData.sinicizeData[index].imgItems[currentImgIndex].title}</div>
-                      <div className='pic'><img src={myData.sinicizeData[index].imgItems[currentImgIndex].src} alt="" /></div>
-                      <div className="txt">{myData.sinicizeData[index].imgItems[currentImgIndex].txt}</div>
-                      <div className="iconContainner">
+                      <div className='title'>
+                        {myData.sinicizeData[index].imgItems[currentImgIndex].title}
+                      </div>
+                      <div className='pic'>
+                        <img
+                          src={myData.sinicizeData[index].imgItems[currentImgIndex].src}
+                          alt=''
+                        />
+                      </div>
+                      <div className='txt'>
+                        {myData.sinicizeData[index].imgItems[currentImgIndex].txt}
+                      </div>
+                      <div className='iconContainner'>
                         {item.imgItems.map((i, index) => {
                           return (
-                            <div className='icon' key={index} onClick={() => { setCurrentImgIndex(index) }}>
-                              <img src={require(`@/assets/img/A6_sincize_detailIcon${currentImgIndex === index ? '_ac' : ''}.png`)} draggable='false' alt='' />
+                            <div
+                              className='icon'
+                              key={index}
+                              onClick={() => {
+                                setCurrentImgIndex(index)
+                              }}
+                            >
+                              <img
+                                src={require(`@/assets/img/A6_sincize_detailIcon${
+                                  currentImgIndex === index ? '_ac' : ''
+                                }.png`)}
+                                draggable='false'
+                                alt=''
+                              />
                             </div>
                           )
                         })}
                       </div>
-
                     </div>
                   </div>
                 </div>
@@ -184,11 +208,14 @@ function Sinicize() {
         </div>
       </div>
       {isShowTip && (
-        <div className={styles.tip} onClick={() => {
-          setTimeout(() => {
-            setIsShowTip(false)
-          }, 1500);
-        }}>
+        <div
+          className={classNames(styles.tip, isPc ? '' : styles.tipMo)}
+          onClick={() => {
+            setTimeout(() => {
+              setIsShowTip(false)
+            }, 1500)
+          }}
+        >
           <div className='gesture'>
             <img src={require('@/assets/img/A6_sinicize_gesture.png')} draggable='false' alt='' />{' '}
             <div className='txt'>向右滑动查看造像中国化的演变</div>{' '}

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

@@ -42,13 +42,14 @@
     }
 
     .text {
-      width: 150px;
-      height: 200px;
+      width: 200px;
+      height: 300px;
       font-size: 11px;
       line-height: 22px;
       font-weight: lighter;
-      color: rgba(255, 255, 255, 0.8);
-      transform: translate(-95%, -55%);
+      color: #fff;
+      transform: translate(-86%, -46%);
+      text-align: justify;
     }
 
     .ffhybtn1 {
@@ -75,8 +76,7 @@
       width: 120px;
     }
     .text {
-      width: 177px;
-      font-size: 15px;
+      font-size: 18px;
     }
     .back {
       width: 80px;
@@ -89,9 +89,9 @@
 
     .ffhybtn1,
     .ffhybtn2 {
-      left: 40%;
-      width: 323px;
-      height: 50px;
+      left: 49%;
+      width: 300px;
+      height: 45px;
       & > img {
         object-fit: cover !important;
       }