upp

public/info/index.js

@@ -1,4 +1,6 @@
-// 看看的数据
+const WKID = 'WK1856238346562650112'
+
+// 看看的数据（室外）
 const KKlist1Temp = [
   {
     name: '空军静展区',
@@ -68,4 +70,60 @@ const KKobjTemp = {
   ]
 }
 
-const WKIDTEMP = 'WK1856238346562650112'
+// 看看的数据（室内）
+const KKlist1Temp2 = [
+  {
+    name: '海军静展区0',
+    id: 'kj2',
+    children: ['海军静展区0']
+  },
+  {
+    name: 'SU570',
+    id: 'kj3',
+    children: ['SU570']
+  }
+]
+
+const KKobjTemp2 = {
+  海军静展区0: [
+    {
+      id: 'SG-VZzjvTCyHV4',
+      sceneCode: 'SG-VZzjvTCyHV4',
+      sceneTitle: '海军静展区0-1',
+      type: 'kk'
+    },
+    {
+      id: 'SG-K6C0Sfl4zzu',
+      sceneCode: 'SG-K6C0Sfl4zzu',
+      sceneTitle: '海军静展区0-2',
+      type: 'kk'
+    }
+  ],
+  SU570: [
+    {
+      id: 'SG-2vQApDenbb8',
+      sceneCode: 'SG-2vQApDenbb8',
+      sceneTitle: 'SU570',
+      type: 'kk'
+    }
+  ]
+}
+
+// 简介
+const myText = `
+<p>
+第十五届中国国际航空航天博览会
+</p>
+<div>
+“中国国际航空航天博览会”（简称中国航展）是唯一由国务院批准的大型国际航展。自1996年举办首届以来，中国航展已成功举办了十四届，参观的专业观众累计达1116000人次，普通观众累计达3720000人次，展会期间成交额累计达1389亿美元。中国航展现已成为集贸易性、专业性、观赏性为一体，代表当今世界航空航天科技主流的国际盛会，已跻身于世界五大航展之列。
+</div>
+<div>
+作为“国家行为”，中国航展得到了党和国家领导人的高度重视。在第十二届中国航展开幕式上，习近平总书记为航展特致贺信，充分体现了习总书记和党中央对中国航展的高度重视、亲切关怀和大力支持，给中国航展指明了发展方向、提供了根本遵循。
+</div>
+<div>
+二十多年来，伴随着我国航空航天及国防事业的蓬勃发展，中国航展已发展成为促进世界航空航天科技发展、推动国际交流合作和世界各国人民共享航空航天技术发展成果的重要平台，也是“扬我国威、振我军威”的重要舞台和爱国主义、国防教育的重要载体，是一张闪亮的“国家名片”。
+</div>
+<div>
+第十五届中国航展将于2022年11月8日—13日在珠海国际航展中心举行。本届航展将深入学习贯彻习近平总书记致第十二届中国航展贺信的重要指示精神，全面推进航展各项筹办工作，办成一届更安全、更圆满、更精彩的蓝天盛会。
+</div>
+`

src/pages/A1home/Bottom/data.ts

@@ -11,9 +11,3 @@ export type MyObjRowType = {
   sceneTitle: string
   type?: 'kk'
 }
-
-// export const myList1: MyList1Type[] = myList1Temp
-
-// export const myObj: { any: MyObjRowType[] } = myObjTemp
-
-export const WKID: string = WKIDTEMP

src/pages/A1home/Bottom/index.tsx

@@ -57,15 +57,20 @@ function Bottom({ setTopObj, pageKey }: Props) {
   }, [])
 
   useEffect(() => {
-    // 待完善路径
-    fetch(`https://4dkk.4dage.com/720yun_fd_manage/${WKIDTEMP}/someData.json`)
-      .then(res => {
-        return res.json()
-      })
-      .then(data => {
-        getInfoFu(data)
-      })
-  }, [getInfoFu])
+    if (pageKey === '室外') {
+      // 待完善路径
+      fetch(`https://4dkk.4dage.com/720yun_fd_manage/${WKID}/someData.json`)
+        .then(res => {
+          return res.json()
+        })
+        .then(data => {
+          getInfoFu(data)
+        })
+    } else if (pageKey === '室内') {
+      setMyList1(KKlist1Temp2)
+      setMyObj(KKobjTemp2)
+    }
+  }, [getInfoFu, pageKey])
 
   const [isShow, setIsShow] = useState(true)
 

src/pages/A1home/Share/index.module.scss

@@ -53,6 +53,51 @@
         }
       }
     }
+
+    // 介绍
+    .textBox {
+      color: #fff;
+      font-size: 16px;
+      padding: 30px;
+      width: 750px;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 20px;
+      .textBoxSon {
+        width: 100%;
+        height: 100%;
+        & > p {
+          font-size: 18px;
+          font-weight: 700;
+          text-align: center;
+        }
+        & > div {
+          margin: 30px 0 10px;
+          line-height: 1.5;
+          text-align: justify;
+          max-height: 80vh;
+          overflow-y: auto;
+          text-indent: 32px;
+        }
+      }
+
+      .textClose {
+        position: absolute;
+        top: 0;
+        width: 36px;
+        padding: 8px;
+        left: 0;
+        transform: translate(-40%, -40%);
+        border-radius: 30px;
+        box-shadow: 0 3px 6px #000000;
+        background-color: rgba(12, 91, 246, 0.8);
+        cursor: pointer;
+      }
+    }
+
     @media screen and (max-width: 1000px) {
       .sharBox {
         width: 100%;
@@ -62,6 +107,18 @@
           }
         }
       }
+      .textBox {
+        width: 90%;
+        height: 80%;
+        padding-right: 10px;
+        .textBoxSon {
+          padding-right: 20px;
+          overflow-y: auto;
+          & > p {
+            font-size: 16px;
+          }
+        }
+      }
     }
   }
 }

src/pages/A1home/Share/index.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { MessageFu } from '@/utils/message'
+import closeImg from '@/assets/img/close.png'
 
 type Props = {
-  isShow: boolean
+  isShowType: '分享' | '介绍' | ''
   closeFu: () => void
 }
 
-function Share({ isShow, closeFu }: Props) {
+function Share({ isShowType, closeFu }: Props) {
   const [url, setUrl] = useState('')
   useEffect(() => {
     setUrl(window.location.href.replace('index.html', 'show.html').replace('#/', ''))
@@ -29,19 +30,26 @@ function Share({ isShow, closeFu }: Props) {
   return (
     <div
       className={styles.Share}
-      style={{ opacity: isShow ? '1' : '0', pointerEvents: isShow ? 'auto' : 'none' }}
+      style={{ opacity: isShowType ? '1' : '0', pointerEvents: isShowType ? 'auto' : 'none' }}
     >
-      <div className='sharBox'>
-        <p>分享链接给好友</p>
-        <div className='sharLink'>{url}</div>
-
-        <div className='sharBtn'>
-          <span onClick={closeFu}>取消</span>
-          <span className='sharBtnOk' onClick={btnOk}>
-            一键复制
-          </span>
+      {isShowType === '分享' ? (
+        <div className='sharBox'>
+          <p>分享链接给好友</p>
+          <div className='sharLink'>{url}</div>
+
+          <div className='sharBtn'>
+            <span onClick={closeFu}>取消</span>
+            <span className='sharBtnOk' onClick={btnOk}>
+              一键复制
+            </span>
+          </div>
         </div>
-      </div>
+      ) : isShowType === '介绍' ? (
+        <div className='textBox'>
+          <div className='textBoxSon' dangerouslySetInnerHTML={{ __html: myText }}></div>
+          <img onClick={closeFu} className='textClose' src={closeImg} alt='' />
+        </div>
+      ) : null}
     </div>
   )
 }

src/pages/A1home/index.module.scss

@@ -59,13 +59,13 @@
     .v_aside {
       font-size: 16px;
       top: 50%;
+      transform: translateY(-50%);
       position: absolute;
       right: 20px;
       color: #fff;
       text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
       z-index: 2004;
       & > ul {
-        transform: translateY(-50%);
         & > li {
           cursor: pointer;
           background: rgba(0, 0, 0, 0.4);
@@ -155,8 +155,31 @@
         font-size: 14px;
         top: 10px;
         right: 10px;
+        transform: translateY(0);
+
+        .mTopIcon {
+          transition: all 0.3s;
+          position: relative;
+          left: 1px;
+          top: 2px;
+          background: rgba(0, 0, 0, 0.4);
+          border-radius: 50%;
+          margin-top: 10px;
+          width: 34px;
+          height: 34px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          & > img {
+            width: 24px;
+          }
+        }
+
         & > ul {
-          transform: translateY(0);
+          transition: all 0.3s;
+          height: auto;
+          max-height: 0;
+          overflow: hidden;
           & > li {
             cursor: pointer;
             background: rgba(0, 0, 0, 0.4);
@@ -171,6 +194,15 @@
           }
         }
       }
+      .v_asideShow {
+        .mTopIcon {
+          transform: rotate(-180deg);
+        }
+        & > ul {
+          max-height: 130px;
+        }
+      }
+
       .A1title {
         width: calc(100% - 80px);
       }

src/pages/A1home/index.tsx

@@ -10,7 +10,10 @@ import top4Img from '@/assets/img/top4.png'
 import bgmMp3 from '@/assets/img/bgm.mp3'
 import Share from './Share'
 import Bottom from './Bottom'
-import { MyObjRowType, WKID } from './Bottom/data'
+import { MyObjRowType } from './Bottom/data'
+import { isMobileFu } from '@/utils/history'
+
+import xiaImg from '@/assets/img/jiantou_w.png'
 
 function A1home() {
   const audioRef = useRef<HTMLAudioElement>(null)
@@ -35,8 +38,8 @@ function A1home() {
     if (audioRef.current) audioSta ? audioRef.current.play() : audioRef.current.pause()
   }, [audioSta])
 
-  // 分享页面
-  const [share, setShare] = useState(false)
+  // 分享、介绍
+  const [sonPageShow, setSonPageShow] = useState<'分享' | '介绍' | ''>('')
 
   // 选中的对象数据
 
@@ -66,6 +69,9 @@ function A1home() {
     }
   }, [acObj.sceneCode])
 
+  // 手机端icon的显示和隐藏
+  const [iconShow, setIconShow] = useState(false)
+
   return (
     <div className={styles.A1home}>
       <audio ref={audioRef} src={bgmMp3} loop />
@@ -88,10 +94,16 @@ function A1home() {
       ) : null}
 
       {/* 右侧按钮 */}
-      <div className='v_aside'>
+      <div className={classNames('v_aside', iconShow ? 'v_asideShow' : '')}>
+        {isMobileFu() ? (
+          <div className='mTopIcon' onClick={() => setIconShow(!iconShow)}>
+            <img src={xiaImg} alt='' />
+          </div>
+        ) : null}
+
         <ul>
           {/* 待完善 */}
-          <li hidden>
+          <li onClick={() => setSonPageShow('介绍')} hidden>
             <i className='iconfont icon-jianjie'></i>
           </li>
           <li onClick={() => setAudioSta(!audioSta)}>
@@ -99,13 +111,13 @@ function A1home() {
               className={classNames('iconfont', audioSta ? 'icon-yinlekai' : 'icon-yinleguan')}
             ></i>
           </li>
-          <li onClick={() => setShare(true)}>
+          <li onClick={() => setSonPageShow('分享')}>
             <i className='iconfont icon-fenxiang'></i>
           </li>
         </ul>
       </div>
       {/* 分享页面 */}
-      <Share isShow={share} closeFu={() => setShare(false)} />
+      <Share isShowType={sonPageShow} closeFu={() => setSonPageShow('')} />
       {/* 底部页面 */}
       <Bottom setTopObj={val => setAcObj(val)} pageKey={pageKey} />
       {/* 顶部title */}

src/types/declaration.d.ts

@@ -9,10 +9,20 @@ declare module 'js-export-excel'
 declare module 'braft-utils'
 
 // public/info/index.js 里面的自定义数据类型
+
+// 看看id
+declare const WKID: string
+
+// 室外列表信息
 declare const KKlist1Temp
 declare const KKobjTemp
-declare const WKIDTEMP
 
-// 全国图加载数据
+// 室内列表信息
+declare const KKlist1Temp2
+declare const KKobjTemp2
 
+// 介绍
+declare const myText: string
+
+// 全国图加载数据
 declare const embedpano: any