添加简介

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

@@ -161,7 +161,7 @@
         .intro {
           color: #330200;
           letter-spacing: 2px;
-          font-size: 14px;
+          font-size: 16px;
           line-height: 24px;
           overflow: auto;
           &::-webkit-scrollbar {

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

@@ -167,8 +167,7 @@ function Look({
               <div className='oreTitle'>
                 {selectIndex !== null ? oreData[selectIndex].title : ''}
               </div>
-              <div className='intro'>
-                {selectIndex !== null ? oreData[selectIndex].text : ''}
+              <div className='intro' dangerouslySetInnerHTML={{ __html: selectIndex !== null ? oreData[selectIndex].text : '' }}>
               </div>
             </div>
           </div>

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

@@ -20,7 +20,7 @@ function Scenes({ style }: { style: React.CSSProperties }) {
     <div className={styles.scenes} style={style}>
       <div className='top'>
         <div className='logo'><img src={require('@/assets/img/sceneLogo.png')} alt="" /></div>
-        <div className="title">十大场景</div>
+        <div className="title">九大场景</div>
         <div className="tab">
           <div className="label">区域：</div>
           <div className={`tabItem ${activeTab === '全部' ? 'active' : ''}`} onClick={() => setActiveTab('全部')}>全部</div>
@@ -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={() => window.open(`https://www.4dkankan.com/spg.html?m=${item.code}&app&lang=zh`, '_blank')}>
+        <div className="sceneCard" 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.tsx

@@ -92,7 +92,7 @@ function A2layout() {
               }.png`)}
             alt=''
           />
-          <div className='text'>十大场景</div>
+          <div className='text'>九大场景</div>
         </div>
         <div
           className={`look ${siderActive === 'look' ? 'active' : ''}`}

src/pages/A3scene/index.module.scss

@@ -11,14 +11,66 @@
       background-size: 100% 100%;
       width: 150px;
       height: 35px;
-      line-height: 40px;
+      line-height: 36px;
       text-align: center;
       color: #fffddc;
+
+      cursor: pointer;
+      & > img {
+        position: absolute;
+        top: 30%;
+        right: 10%;
+        width: 22px;
+        height: 11px;
+        object-fit: contain;
+        transition: all 0.3s ease-in-out;
+
+        transform: rotate(180deg);
+      }
+      .active {
+        transform: rotate(0);
+      }
     }
     iframe {
       width: 100%;
       height: 100%;
       border: none;
     }
+
+    .intro {
+      opacity: 0;
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-68%);
+      width: 340px;
+      height: 60%;
+      background: url(../../assets/img/introBg.png) no-repeat center;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      gap: 20px;
+      transition: all 0.3s ease-in-out;
+      &.introShow {
+        opacity: 1;
+      }
+
+      .text {
+        padding: 10px 20px;
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+        line-height: 24px;
+        color: rgba(255, 253, 220, 1);
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+      }
+    }
   }
 }

src/pages/A3scene/index.tsx

@@ -5,6 +5,7 @@ import { useHistory } from 'react-router-dom'
 function A3scene() {
   const history = useHistory()
   const [showBack, setShowBack] = useState(true);
+  const [isShowIntro, setIsShowIntro] = useState(false);
 
   const code = history.location.search.split('code=')[1]
 
@@ -27,16 +28,25 @@ function A3scene() {
     };
   }, [history]);
 
+  window.goBack = () => {
+    history.push('#/layout?siderActive=scenes')
+  }
+
   return (
     <div className={styles.A3scene}>
       {showBack && (
-        <div className="back">科学广场</div>
+        <div className="back" onClick={() => setIsShowIntro(!isShowIntro)}>{sceneData.find(item => item.code === code)?.title} <img className={`arrow ${isShowIntro ? 'active' : ''}`} src={require('@/assets/img/up.png')} alt="" /> </div>
       )}
       <iframe
         src={`https://houseoss.4dkankan.com/project/ScientistEducationBase/scene/index.html#/home?m=${code}`}
         allow="src"
         title="scene"
       />
+
+      <div className={`intro ${isShowIntro ? 'introShow' : ''}`}>
+        <div className="text" dangerouslySetInnerHTML={{ __html: sceneData.find(item => item.code === code)?.intro || '' }}></div>
+      </div>
+
     </div>
   )
 }

src/types/declaration.d.ts

@@ -20,4 +20,5 @@ declare const sceneData: {
   img: string
   code: string
   region: string
+  intro: string
 }[]

src/types/function.d.ts

@@ -0,0 +1,8 @@
+// 全局方法
+declare global {
+  interface Window {
+    goBack: () => void
+  }
+}
+
+export {}