gx

src/App.tsx

@@ -1,6 +1,6 @@
 import '@/assets/styles/base.css'
 // 关于路由
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { Router, Route, Switch } from 'react-router-dom'
 import history, { isMobileFu } from './utils/history'
 import SpinLoding from './components/SpinLoding'
@@ -14,22 +14,111 @@ import screenImg from '@/assets/img/landtip.png'
 const A1home = React.lazy(() => import('./pages/A1home'))
 const A2layout = React.lazy(() => import('./pages/A2layout'))
 const A3scene = React.lazy(() => import('./pages/A3scene'))
+const LookScene = React.lazy(() => import('./pages/A2layout/components/Look/LookScene'))
+
+let tempW = document.documentElement.clientWidth
+
+let tempH = document.documentElement.clientHeight
+
+let tempMax = tempW >= tempH ? tempW : tempH
+let tempMin = tempW >= tempH ? tempH : tempW
+
+const pageBi = Math.round(Number((tempMax / tempMin).toFixed(2)))
+
+// 设计图按照 1920 X 960 来开发
+const planSize = {
+  width: 1920,
+  height: Math.round(Number((1920 / pageBi).toFixed(0)))
+}
 
 export default function App() {
+  const rootRef = useRef<any>(null)
+
+  const timeRef = useRef(0)
   // 从仓库中获取查看图片的信息
   // const lookBigImg = useSelector((state: RootState) => state.A0Layout.lookBigImg)
 
-  const rootDomFu = useCallback(() => {
-    const rootDom: HTMLDivElement = document.querySelector('#root')!
-    if (rootDom) {
-      rootDom.style.height = window.innerHeight + 'px'
+  const getViewportSize = () => {
+    if (window.visualViewport) {
+      return {
+        width: window.visualViewport.width,
+        height: window.visualViewport.height
+      }
+    }
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    }
+  }
+
+  const applyPageScale = useCallback(() => {
+    if (!rootRef.current || isMobileFu()) return
+
+    const run = () => {
+      const { width, height } = getViewportSize()
+
+      if (width >= height) {
+        document.body.style.overflow = 'hidden'
+
+        const sizeW = width / planSize.width
+        const sizeH = height / planSize.height
+
+        let moveX = (planSize.width - width) / 2
+        const moveY = (planSize.height - height) / 2
+        // if (width >= planSize.width) moveX = 0
+
+        rootRef.current.style.left = '0'
+        rootRef.current.style.transform = `translate3d(${-moveX}px,${-moveY}px,0px) scale(${sizeW},${sizeH}) rotate(0deg)`
+        rootRef.current.style.transformOrigin = 'center'
+      } else {
+        document.body.style.overflow = 'auto'
+        rootRef.current.style.transform = 'none'
+      }
+    }
+
+    const { width, height } = getViewportSize()
+    if (width >= height) {
+      document.body.style.overflow = 'hidden'
+      requestAnimationFrame(run)
+    } else {
+      run()
     }
   }, [])
 
+  const pageFullChangeFu = useCallback(
+    (delay: number = 200) => {
+      if (isMobileFu()) return
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(applyPageScale, delay)
+    },
+    [applyPageScale]
+  )
+
   useEffect(() => {
-    window.addEventListener('resize', rootDomFu, true)
-    rootDomFu()
-  }, [rootDomFu])
+    rootRef.current = document.querySelector('#root')
+
+    // 移动端保持 CSS 默认 100vw/100vh 响应式布局，不做 PC 端缩放
+    if (isMobileFu()) return
+
+    rootRef.current.style.width = planSize.width + 'px'
+    rootRef.current.style.height = planSize.height + 'px'
+
+    const onResize = () => pageFullChangeFu()
+
+    applyPageScale()
+    requestAnimationFrame(() => {
+      requestAnimationFrame(applyPageScale)
+    })
+
+    window.addEventListener('resize', onResize, false)
+    window.visualViewport?.addEventListener('resize', onResize)
+
+    return () => {
+      clearTimeout(timeRef.current)
+      window.removeEventListener('resize', onResize, false)
+      window.visualViewport?.removeEventListener('resize', onResize)
+    }
+  }, [applyPageScale, pageFullChangeFu])
 
   return (
     <>
@@ -41,6 +130,7 @@ export default function App() {
             <Route exact path='/' component={A1home} />
             <Route path='/layout' component={A2layout} />
             <Route path='/scene' component={A3scene} />
+            <Route path='/look/:id' component={LookScene} />
           </Switch>
         </React.Suspense>
       </Router>

src/assets/styles/base.css

@@ -9,8 +9,7 @@ html {
   user-select: none;
 }
 body {
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
-    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
   color: black;
 }
@@ -26,8 +25,7 @@ ul {
   list-style: none;
 }
 body {
-  overflow: auto;
-  overflow-y: overlay;
+  overflow: hidden;
 }
 /* 文本域取消下拉 */
 textarea {
@@ -55,11 +53,10 @@ textarea {
   width: 240px;
 }
 #root {
-  margin: 0 auto;
+  position: relative;
   width: 100vw;
   height: 100vh;
-  overflow: auto;
-  overflow-y: hidden;
+  overflow: hidden;
   /* 普通文字按钮的颜色 */
   /* 按钮的危险颜色 */
   /* antd分页器样式 */
@@ -221,4 +218,4 @@ textarea {
     opacity: 1;
     pointer-events: auto;
   }
-}
+}

src/assets/styles/base.less

@@ -33,8 +33,7 @@ ul {
 }
 
 body {
-  overflow: auto;
-  overflow-y: overlay;
+  overflow: hidden;
 }
 
 /* 文本域取消下拉 */
@@ -72,11 +71,11 @@ textarea {
 // 重置antd样式
 #root {
   // max-width: 500px;
-  margin: 0 auto;
+  // margin: 0 auto;
+  position: relative;
   width: 100vw;
   height: 100vh;
-  overflow: auto;
-  overflow-y: overlay;
+  overflow: hidden;
 
   & > div {
     width: 100%;

src/components/EmptyModal/index.module.scss

@@ -0,0 +1,30 @@
+.EmptyModal{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+  :global{
+    .mainContent{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 30%;
+      height: 38%;
+      background: url('../../assets/img/emptyModalBg.png') no-repeat center center;
+      background-size: contain;
+    }
+    .close{
+      position: absolute;
+      top: -10px;
+      right: -20px;
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+    }
+  }
+}

src/components/EmptyModal/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function EmptyModal({onClose}: {onClose: () => void}) {
+  
+  return (
+    <div className={styles.EmptyModal}>
+      <div className="mainContent">
+        <div className="close" onClick={onClose}><img src={require('@/assets/img/close.png')} alt="" /></div>
+      </div>
+    </div>
+  )
+}
+
+const MemoEmptyModal = React.memo(EmptyModal);
+
+export default MemoEmptyModal;

src/components/EmptyModal2/index.module.scss

@@ -0,0 +1,34 @@
+.EmptyModal2{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:#F8F2E8;
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+  :global{
+    .mainContent{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      & >img{
+        width: 100%;
+        height: 90%;
+        object-fit: contain;
+      }
+      .text{
+        color: #9D0800;
+        font-weight: bold;
+        font-size: 18px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 150%);
+      }
+    }
+  }
+}

src/components/EmptyModal2/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function EmptyModal2() {
+  
+  return (
+    <div className={styles.EmptyModal2}>
+      <div className="mainContent">
+        <img src={require('@/assets/img/emptyModalIcon.png')} alt="" />
+        <div className="text">
+          功能待上线
+          </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoEmptyModal2 = React.memo(EmptyModal2);
+
+export default MemoEmptyModal2;

src/pages/A1home/index.module.scss

@@ -29,27 +29,26 @@
     }
     .button {
       position: absolute;
-      bottom: 140px;
-      left: 50%;
-      width: 230px;
-      height: 100px;
-      transform: translateX(-270%);
-      background: url('../../assets/img/textShadow.png') repeat;
-      background-size: 100% 100%;
-      font-weight: bold;
-      font-size: 24px;
-      color: #fffddc;
-      line-height: 100px;
-      text-align: center;
-      letter-spacing: 3px;
-      cursor: pointer;
+    top: 57%;
+    left: 14%;
+    width: 280px;
+    height: 130px;
+    background: url('../../assets/img/textShadow.png') repeat;
+    background-size: 100% 100%;
+    font-weight: bold;
+    font-size: 38px;
+    color: #fffddc;
+    line-height: 130px;
+    text-align: center;
+    letter-spacing: 10px;
+    cursor: pointer;
     }
   }
 }
 
 @media (max-width: 768px) {
   .A1home {
-    background: url('../../assets/img/homeBg_M.png') no-repeat 100% 100%;
+    background: url('../../assets/img/homeBg_M.png') no-repeat center center;
     background-size: cover;
     :global {
       .logo {
@@ -65,7 +64,9 @@
       .button {
         width: 60%;
         height: 80px;
+        top: auto;
         bottom: 10%;
+        left: 50%;
         transform: translateX(-50%);
         font-size: 20px;
         line-height: 80px;

src/pages/A2layout/components/Look/LookScene/index.module.scss

@@ -0,0 +1,93 @@
+.lookScene{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .model{
+    width: 100vw;
+    height: 100vh;
+    border: none;
+  }
+  .title{
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: fit-content;
+    height: 140px;
+    &>img{
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .closeBtn{
+    position: absolute;
+    top: 30px;
+    right: 50px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    &>img{
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .text{
+    position: absolute;
+    bottom: 40px;
+    right: 40px;
+    width: 35%;
+    height: 34%;
+    
+    .content{
+      padding: 25px 20px;
+      width: 100%;
+      height: 100%;
+      background-image: url(../../../../../assets/img/textBg1.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      display: flex;
+      flex-direction: column;
+      .oreTitle{
+        background-image: url(../../../../../assets/img/look_title_bg.png);
+        background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+        height: 30px;
+        line-height: 30px;
+        letter-spacing: 3px;
+        font-size: 24px;
+        font-weight: bold;
+        color: #FFFBC4;
+        margin-bottom: 10px;
+        text-align: center;
+      }
+      .intro{
+        padding: 0 5px;
+        text-align: justify;
+        font-size: 20px;
+        color: #FFFFF0;
+        height: 0;
+        line-height: 38px;
+        flex: 1;
+        overflow: auto;
+        &::-webkit-scrollbar-thumb{
+          background-color: #FFFFF0;
+        }
+        &::-webkit-scrollbar{
+          width: 4px;
+        }
+      }
+      
+    }
+    .music{
+      position: absolute;
+      bottom: -20px;
+      right: -20px;
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+    }
+  }
+}

src/pages/A2layout/components/Look/LookScene/index.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import history from '@/utils/history'
+function LookScene() {
+  const [currentId, setCurrentId] = useState(0)
+  const [isMusicPlay, setIsMusicPlay] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+  useEffect(() => {
+    const id = window.location.href.split('look/').pop()
+    id && setCurrentId(parseInt(id))
+  }, [])
+
+  useEffect(() => {
+    if (isMusicPlay) {
+      audioRef.current?.play()
+    } else {
+      audioRef.current?.pause()
+    }
+  }, [isMusicPlay])
+
+  return (
+    <div className={styles.lookScene}>
+      <div className={styles.title}>
+        <img src={require(`@/assets/img/look_${currentId}.png`)} alt='' />
+      </div>
+      <div
+        className={styles.closeBtn}
+        onClick={() => history.push('/layout?siderActive=look')}
+      >
+        <img src={require(`@/assets/img/close.png`)} alt='' />
+      </div>
+      <iframe
+        className={styles.model}
+        title='model'
+        src={oreData[currentId].modelSrc}
+      ></iframe>
+      <div className={styles.text}>
+        <div className={styles.content}>
+          <div className={styles.oreTitle}>{oreData[currentId].title}</div>
+          <div
+            className={styles.intro}
+            dangerouslySetInnerHTML={{ __html: oreData[currentId].text }}
+          ></div>
+        </div>
+        <div className={styles.music} onClick={() => setIsMusicPlay(!isMusicPlay)}>
+          <img src={require(`@/assets/img/look_scene_audio${isMusicPlay ? '' : 'x'}.png`)} alt='' />
+          <audio style={{ display: 'none' }} src={oreData[currentId].musicSrc} ref={audioRef} loop />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoLookScene = React.memo(LookScene)
+
+export default MemoLookScene

src/pages/A2layout/components/Look/index.module.scss

@@ -289,6 +289,7 @@
           }
           .intro {
             color: #ffffff;
+            text-align: justify;
           }
         }
       }

src/pages/A2layout/components/Look/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import styles from './index.module.scss'
-import { isMobileFu } from '@/utils/history'
+import history, { isMobileFu } from '@/utils/history'
 import { Swiper, SwiperSlide } from 'swiper/react'
 
 import 'swiper/css'
@@ -138,8 +138,7 @@ function Look({
                 onMouseEnter={() => setHoveredIndex(index)}
                 onMouseLeave={() => setHoveredIndex(null)}
                 onClick={() => {
-                  setSelectIndex(index)
-                  setIsHideSider(true)
+                  history.push(`/look/${item.id}`)
                 }}
               >
                 <div className='itemImage'>
@@ -152,7 +151,9 @@ function Look({
               </div>
             ))}
         </div>
-      ) : (
+      ) : 
+      // 以下pc端已废弃，移动端正常使用
+      (
         <>
           <div
             className='back'

src/pages/A2layout/components/Scenes/index.module.scss

@@ -57,18 +57,19 @@
       height: 0;
       flex: 1;
       width: 100%;
-      padding: 0 130px 50px 130px;
-      display: flex;
-      align-items: center;
+      padding: 0 0 50px;
+      display: grid;
+      grid-template-columns: repeat(3, 360px);
+      grid-auto-rows: 220px;
+      gap:20px 40px;
       justify-content: center;
-      flex-wrap: wrap;
-      gap: 20px;
-      align-content: flex-start;
+      align-content: center;
+      box-sizing: border-box;
       .sceneCard {
-        width: 23.5%;
-        height: 32%;
+        width: 360px;
+        height: 220px;
         background-color: #fff;
-        border-radius: 10px;
+        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
         cursor: pointer;
         .pic {
           width: 100%;
@@ -81,12 +82,38 @@
           }
         }
         .text {
+          font-size: 16px;
           width: 100%;
           height: 15%;
           color: #666666;
           display: flex;
           align-items: center;
-          margin-left: 10px;
+          justify-content: center;
+        }
+      }
+      .itemCenter{
+        background-image: url('../../../../assets/img/imgBorder.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
+        padding: 5px;
+        background-color: transparent;
+        .pic{
+          height: 100%;
+        }
+        .text{
+          position: relative;
+          top: -20%;
+          height: 20%;
+        background-image: url('../../../../assets/img/textBg.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
+        color: #FFFDDC;
+        font-weight: bold;
+        font-size: 20px;
+        letter-spacing: 7px;
+        text-shadow: 0px 1px 6px rgba(255,210,79,0.8);
         }
       }
     }
@@ -134,39 +161,86 @@
         height: 0;
         flex: 1;
         width: 100%;
-        padding: 10px 0;
-        margin-top: 105px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-        gap: 10px;
-        overflow: auto;
+        padding: 12px 16px 20px;
+        margin-top: 95px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-auto-rows: 155px;
+        gap: 12px;
+        align-content: flex-start;
+        overflow-y: auto;
+        box-sizing: border-box;
 
         .sceneCard {
-          width: 46%;
-          height: 21%;
+          width: 100%;
+          height: auto;
           background-color: #fff;
-          border-radius: 10px;
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
           cursor: pointer;
+
           .pic {
             width: 100%;
-            height: 85%;
-            border-radius: 10px 10px 0 0;
+            height: 125px;
+            border-radius: 0;
+
             & > img {
               width: 100%;
               height: 100%;
               object-fit: cover;
+              border-radius: 8px 8px 0 0;
             }
           }
+
           .text {
             width: 100%;
-            height: 15%;
-            color: #666666;
+            height: 30px;
+            color: #333;
             display: flex;
             align-items: center;
-            margin-left: 10px;
-            font-size: 12px;
+            justify-content: center;
+            margin-left: 0;
+            font-size: 14px;
+            background-color: #fff;
+          }
+        }
+
+        .itemCenter {
+          order: -1;
+          grid-column: 1 / -1;
+          position: relative;
+          height: 155px;
+          padding: 0;
+          background: transparent;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          border-radius: 8px;
+          overflow: hidden;
+
+          .pic {
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+
+            & > img {
+              border-radius: 8px;
+            }
+          }
+
+          .text {
+            position: absolute;
+            top: 120px;
+            left: 0;
+            width: 100%;
+            height: 36px;
+            padding: 0;
+            color: #FFFDDC;
+            font-size: 16px;
+            font-weight: bold;
+            letter-spacing: 2px;
+            text-shadow: none;
+            border-radius: 0 0 8px 8px;
+            background-color: transparent
           }
         }
       }

src/pages/A2layout/components/Scenes/index.tsx

@@ -29,7 +29,7 @@ function Scenes({ style }: { style: React.CSSProperties }) {
         </div>
       </div>
       <div className='content'>{sceneData2.map((item) => (
-        <div className="sceneCard" key={item.code} onClick={() => goToScene(item.code)}>
+        <div className={`sceneCard ${item.title==='地质展馆' ? 'itemCenter' : ''}`} key={item.code} onClick={() => goToScene(item.code)}>
           <div className="pic"><img src={item.img} alt="" /></div>
           <div className="text">{item.title}</div>
         </div>

src/pages/A2layout/index.module.scss

@@ -48,15 +48,16 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 50px;
-      padding-top: 50px;
+      gap: 18px;
       .logo {
         position: absolute;
         top: 50px;
       }
       .videoIntro,
       .scenes,
-      .look {
+      .look,
+      .study,
+      .question {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -196,7 +197,9 @@
         }
         .videoIntro,
         .scenes,
-        .look {
+        .look,
+        .study,
+        .question {
           width: 100%;
           height: 100%;
           display: flex;

src/pages/A2layout/index.tsx

@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import Scenes from './components/Scenes'
 import Look from './components/Look'
 import { useLocation } from 'react-router-dom'
 import { useHistory } from 'react-router-dom'
+import EmptyModal from '@/components/EmptyModal'
+import { isMobileFu } from '@/utils/history'
+import EmptyModal2 from '@/components/EmptyModal2'
 
 
 function A2layout() {
@@ -12,6 +15,8 @@ function A2layout() {
   const [isHideSider, setIsHideSider] = useState(false)
   const [siderActive, setSiderActive] = useState('videoIntro')
   const history = useHistory()
+
+  const [isEmpty,setIsEmpty] = useState(false)
   const handlePlayClick = () => {
     setIsPlaying(!isPlaying)
   }
@@ -66,15 +71,16 @@ function A2layout() {
 
         <Scenes style={{ display: siderActive === 'scenes' ? 'flex' : 'none' }} />
         <Look style={{ display: siderActive === 'look' ? 'flex' : 'none' }} setIsHideSider={setIsHideSider} />
+      {isEmpty && (isMobileFu() ? <EmptyModal2 /> : <EmptyModal onClose={() => setIsEmpty(false)}/>)}
       </div>
 
       <div className='sider' style={{ display: isHideSider ? 'none' : 'flex' }}>
-        <div className='logo'>
+        {/* <div className='logo'>
           <img src={require('@/assets/img/smallLogo.png')} alt='' />
-        </div>
+        </div> */}
         <div
           className={`videoIntro ${siderActive === 'videoIntro' ? 'active' : ''}`}
-          onClick={() => setSiderActive('videoIntro')}
+          onClick={() => {setSiderActive('videoIntro');setIsEmpty(false)}}
         >
           <img
             src={require(`@/assets/img/${siderActive === 'videoIntro' ? 'videoIntroActive' : 'videoIntro'
@@ -85,7 +91,7 @@ function A2layout() {
         </div>
         <div
           className={`scenes ${siderActive === 'scenes' ? 'active' : ''}`}
-          onClick={() => setSiderActive('scenes')}
+          onClick={() => {setSiderActive('scenes');setIsEmpty(false)}}
         >
           <img
             src={require(`@/assets/img/${siderActive === 'scenes' ? 'scenesActive' : 'scenes'
@@ -96,7 +102,7 @@ function A2layout() {
         </div>
         <div
           className={`look ${siderActive === 'look' ? 'active' : ''}`}
-          onClick={() => setSiderActive('look')}
+          onClick={() => {setSiderActive('look');setIsEmpty(false)}}
         >
           <img
             src={require(`@/assets/img/${siderActive === 'look' ? 'appreciateActive' : 'appreciate'
@@ -105,6 +111,28 @@ function A2layout() {
           />
           <div className='text'>矿石赏析</div>
         </div>
+        <div
+          className={`study ${siderActive === 'study' ? 'active' : ''}`}
+          onClick={() => {setIsEmpty(true)}}
+        >
+          <img
+            src={require(`@/assets/img/${siderActive === 'study' ? 'appreciateActive' : 'appreciate'
+              }.png`)}
+            alt=''
+          />
+          <div className='text'>线上研学</div>
+        </div>
+        <div
+          className={`question ${siderActive === 'question' ? 'active' : ''}`}
+          onClick={() => {setIsEmpty(true)}}
+        >
+          <img
+            src={require(`@/assets/img/${siderActive === 'question' ? 'appreciateActive' : 'appreciate'
+              }.png`)}
+            alt=''
+          />
+          <div className='text'>科普答疑</div>
+        </div>
       </div>
     </div>
   )

src/pages/A3scene/index.module.scss

@@ -9,12 +9,13 @@
       left: 0;
       background: url('../../assets/img/back1.png') no-repeat;
       background-size: 100% 100%;
-      width: 150px;
-      height: 35px;
+      width: 160px;
+      height: 45px;
       line-height: 36px;
       text-align: center;
       color: #fffddc;
-
+      font-size: 18px;
+      line-height: 45px;
       cursor: pointer;
       & > img {
         position: absolute;
@@ -42,9 +43,9 @@
       position: absolute;
       left: 12px;
       top: 50%;
-      transform: translateY(-68%);
+      transform: translateY(-52%);
       width: 340px;
-      height: 60%;
+      height: 80%;
       background: url(../../assets/img/introBg.png) no-repeat center;
       background-size: 100% 100%;
       display: flex;
@@ -54,24 +55,43 @@
       border-radius: 5px;
       gap: 20px;
       transition: all 0.3s ease-in-out;
+      padding: 10px 4px;
       pointer-events: none;
       &.introShow {
         opacity: 1;
+        pointer-events: auto;
       }
 
       .text {
-        padding: 10px 20px;
+        padding: 0px 16px;
         width: 100%;
         height: 100%;
-        font-size: 14px;
-        line-height: 24px;
+        font-size: 16px;
+        line-height: 28px;
         color: rgba(255, 253, 220, 1);
         overflow: auto;
         &::-webkit-scrollbar {
-          width: 0;
+          width:6px;
           height: 0;
         }
+        &::-webkit-scrollbar-thumb {
+          background: rgba(255, 253, 220, 1);
+        }
       }
     }
   }
 }
+
+
+@media screen and (max-width: 1200px) {
+  .A3scene {
+    :global {
+      .back{
+        width: 130px;
+      height: 35px;
+      font-size: 16px;
+      line-height: 35px;
+      }
+    }
+  }
+}

src/pages/A3scene/index.tsx

@@ -31,6 +31,9 @@ function A3scene() {
   window.goBack = () => {
     history.push('#/layout?siderActive=scenes')
   }
+  window.setShowBack = (show: boolean) => {
+    setShowBack(show);
+  }
 
   return (
     <div className={styles.A3scene}>

src/types/declaration.d.ts

@@ -9,6 +9,7 @@ declare module 'js-export-excel'
 declare module 'braft-utils'
 
 declare const oreData: {
+  id: number
   title: string
   img: string
   activeImg: string

src/types/function.d.ts

@@ -2,6 +2,7 @@
 declare global {
   interface Window {
     goBack: () => void
+    setShowBack: (show: boolean) => void
   }
 }