feat(*）：前海院校

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@ant-design/cssinjs": "^1.5.6",
-    "@dage/krpano": "^2.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

public/css/oldVer/main0.css

@@ -1,222 +1,285 @@
-.sidecontent{position:fixed;left:-750px;width:auto;display:none;background:rgba(0,0,0,0.8);top:70px;height: 100%;color: rgba(255,255,255,1);}
-.sidecontent h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:50px;line-height:50px;position:relative;}
-.sidecontent h1 span{font-size:12px;font-weight:normal;position:absolute;right:-10px;cursor:pointer;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
-#text
-{
-    float:left;
-	width:auto;
-	font-size:18px;
-	letter-spacing:2px;
-	margin:30px;
-	max-width:600px;
-	height:500px;
-	max-height:630px;
-	line-height:22px;
-	font-family:"宋体";
-}
-#sideimg{margin:5px 20px 30px 10px;float:left;}
-
-#gui-modes-map div img
-{
-	width:48px;
-	height:48px;
+.sidecontent {
+  position: fixed;
+  left: -750px;
+  width: auto;
+  display: none;
+  background: rgba(0, 0, 0, 0.8);
+  top: 70px;
+  height: 100%;
+  color: rgba(255, 255, 255, 1);
+}
+.sidecontent h1 {
+  font-size: 14px;
+  width: 90%;
+  margin: 0px auto;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+}
+.sidecontent h1 span {
+  font-size: 12px;
+  font-weight: normal;
+  position: absolute;
+  right: -10px;
+  cursor: pointer;
+  border: #ebebeb solid 1px;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 20px;
+  text-align: center;
+}
+#text {
+  float: left;
+  width: auto;
+  font-size: 18px;
+  letter-spacing: 2px;
+  margin: 30px;
+  max-width: 600px;
+  height: 500px;
+  max-height: 630px;
+  line-height: 22px;
+  font-family: '宋体';
+}
+#sideimg {
+  margin: 5px 20px 30px 10px;
+  float: left;
 }
 
- 
-
-iframe{
-	border: none;
+#gui-modes-map div img {
+  width: 48px;
+  height: 48px;
 }
 
+iframe {
+  border: none;
+}
 
 #popup {
- 
-	text-align: center;
-	padding: 0;
-	position: relative;
-	width: 100%;
-	height: 100%;
-	/* margin: 80px auto; */
-	display: none;
-	z-index: 999999;
-	background:  rgba(0,0,0,0.6);
-}
-.popup-content{
-	position: relative;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
-#id1{ width: 100%; height: 100%;}
-#popup.wait{
-	opacity:0.1; 
+  text-align: center;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /* margin: 80px auto; */
+  display: none;
+  z-index: 999999;
+  background: rgba(0, 0, 0, 0.6);
+}
+.popup-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#id1 {
+  width: 100%;
+  height: 100%;
+}
+#popup.wait {
+  opacity: 0.1;
 }
 #closepop {
-	background: url(../../images/close1.png) no-repeat;
-	width: 60px;
-	height: 60px;
-	cursor: pointer;
-	position: absolute;
-	right: 30px;
-	top: 30px;
-	text-indent: -999em;
-	background-size: 100% 100%;
-}
-.specialTitle{bottom:65%;
-    width: 100%;
-    padding: 0 25px;
-    display: block;
-    font-family: OpenSans,'Helvetica Neue',sans-serif;
-    text-align: center;
-    font-size: 40px;
-    font-weight: 100;
-    letter-spacing: .75px;
-    text-shadow: 0 0 10px rgba(15,16,17,1);
-    color: rgba(255,255,255,1);
-    margin: 0;
-    position: absolute;
-    hyphens: auto;
-    word-wrap: break-word;
-    line-height: 45px;}
-	.dropdown {position: relative;display: inline-block;float: right;height: 40px;line-height: 40px;right: 10px;}
-    .floor{ width: 100px;text-align: center;display: block;height: 30px;background: rgba(0,0,0,0.4);line-height: 30px;margin-top: 10px;cursor: pointer;}
-    .dropdown-content {display: none;position: absolute;background: rgba(0,0,0,0.6);min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);text-align:center;}
-    .dropdown:hover .dropdown-content {display: block;}
-    a{text-decoration:none;}
-	#YY,#SZZ{display:none;}
- @media only screen and (max-width:487px){
-           .dropdown {height: 30px;line-height: 30px;right:5px;}
-           .floor {width: 80px;height: 20px;line-height: 20px;margin-top: 5px;}
-          .dropdown-content{min-width: 80px;}	
-           }
+  background: url(../../images/close1.png) no-repeat;
+  width: 27px;
+  height: 27px;
+  cursor: pointer;
+  position: absolute;
+  right: 30px;
+  top: 30px;
+  text-indent: -999em;
+  background-size: 100% 100%;
+}
+.specialTitle {
+  bottom: 65%;
+  width: 100%;
+  padding: 0 25px;
+  display: block;
+  font-family: OpenSans, 'Helvetica Neue', sans-serif;
+  text-align: center;
+  font-size: 40px;
+  font-weight: 100;
+  letter-spacing: 0.75px;
+  text-shadow: 0 0 10px rgba(15, 16, 17, 1);
+  color: rgba(255, 255, 255, 1);
+  margin: 0;
+  position: absolute;
+  hyphens: auto;
+  word-wrap: break-word;
+  line-height: 45px;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+  float: right;
+  height: 40px;
+  line-height: 40px;
+  right: 10px;
+}
+.floor {
+  width: 100px;
+  text-align: center;
+  display: block;
+  height: 30px;
+  background: rgba(0, 0, 0, 0.4);
+  line-height: 30px;
+  margin-top: 10px;
+  cursor: pointer;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.6);
+  min-width: 100px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+a {
+  text-decoration: none;
+}
+#YY,
+#SZZ {
+  display: none;
+}
+@media only screen and (max-width: 487px) {
+  .dropdown {
+    height: 30px;
+    line-height: 30px;
+    right: 5px;
+  }
+  .floor {
+    width: 80px;
+    height: 20px;
+    line-height: 20px;
+    margin-top: 5px;
+  }
+  .dropdown-content {
+    min-width: 80px;
+  }
+}
 @media screen and (max-width: 1600px) {
- 
-	/*#popup {
+  /*#popup {
 		width: 816px;
 		height: 510px;
 		margin: -255px auto auto -408px;
 	}*/
-	.specialTitle{
-	bottom:65%;
+  .specialTitle {
+    bottom: 65%;
     font-size: 34px;
-	}
+  }
 }
 
 @media screen and (max-width: 1400px) {
- 
-	/*#popup {
+  /*#popup {
 		width: 714px;
 		height: 446px;
 		margin: -223px auto auto -357px;
 	}*/
-	.specialTitle {
+  .specialTitle {
     bottom: 65%;
     font-size: 30px;
-    }
+  }
 }
 
 @media screen and (max-width: 1200px) {
- 
-	#closepop{
-		width: 40px;
-		height: 40px;
-		top: 20px;
-		right: 20px;
-	}
-	.specialTitle {
+  #closepop {
+    width: 40px;
+    height: 40px;
+    top: 20px;
+    right: 20px;
+  }
+  .specialTitle {
     bottom: 66%;
     font-size: 26px;
-    }
+  }
 }
- 
-@media screen and (max-width: 768px) {
- 
-	.specialTitle {
-     bottom: 62%;
-     font-size: 26px;
-	 line-height:40px;
-    }
-	#special-gui-name{display:none;}
-}
-@media screen and  (max-width: 736px){
-
-	
-	#title-toggle{
-		padding-top: 18px;
-		height: 42px;
-	}
-
-
-	.pinTop{top:8px;}
-}
-@media screen and  (max-width:667px){
-	#closepop{
-		width: 36px;
-		height: 36px;
-		top: 0px;
-		right: 0px;
-	}
-
-	#title-toggle{
-		padding-top: 17px;
-		height: 40px;
-	}
-
-	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
 
+@media screen and (max-width: 768px) {
+  .specialTitle {
+    bottom: 62%;
+    font-size: 26px;
+    line-height: 40px;
+  }
+  #special-gui-name {
+    display: none;
+  }
 }
-@media screen and  (max-width:568px){
-
-	
-	#title-toggle{
-		padding-top: 17px;
-		height: 38px;
-	}
-	
-	#musicImg .fa-2x {
-        font-size: 1.5em;
-    }
-	.pinTop{top:8px;}
+@media screen and (max-width: 736px) {
+  #title-toggle {
+    padding-top: 18px;
+    height: 42px;
+  }
 
+  .pinTop {
+    top: 8px;
+  }
 }
-@media screen and (max-width:414px) {
+@media screen and (max-width: 667px) {
+  #closepop {
+    width: 36px;
+    height: 36px;
+    top: 0px;
+    right: 0px;
+  }
 
-	
-	#title-toggle{
-		padding-top: 17px;
-		height: 40px;
-	}
-	
+  #title-toggle {
+    padding-top: 17px;
+    height: 40px;
+  }
 
+  #musicImg .fa-2x {
+    font-size: 1.5em;
+  }
+  .pinTop {
+    top: 8px;
+  }
 }
-@media screen and (max-width:375px) {
+@media screen and (max-width: 568px) {
+  #title-toggle {
+    padding-top: 17px;
+    height: 38px;
+  }
 
-	
-	#title-toggle{
-		padding-top: 17px;
-		height: 38px;
-	}
+  #musicImg .fa-2x {
+    font-size: 1.5em;
+  }
+  .pinTop {
+    top: 8px;
+  }
+}
+@media screen and (max-width: 414px) {
+  #title-toggle {
+    padding-top: 17px;
+    height: 40px;
+  }
+}
+@media screen and (max-width: 375px) {
+  #title-toggle {
+    padding-top: 17px;
+    height: 38px;
+  }
 
-	
-	.pinTop{top:5px;}	
-	
+  .pinTop {
+    top: 5px;
+  }
 }
-@media screen and (max-width:320px) {
-	/*#popup {
+@media screen and (max-width: 320px) {
+  /*#popup {
 		width: 200px;
         height: 380px;
         margin: -200px auto auto -100px;
 	}*/
-	
-	#title-toggle{
-		padding-top: 16px;
-		height: 36px;
-	}
 
-	
-	.pinTop{top:0px;}
-	
-}
+  #title-toggle {
+    padding-top: 16px;
+    height: 36px;
+  }
+
+  .pinTop {
+    top: 0px;
+  }
+}

public/js/Hot.js

@@ -56,8 +56,8 @@ window.initHot = function (model) {
     ;-1 == r.indexOf('?')
       ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o)
       : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
-
-    return src
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1/', 'http://localhost:8080/')
+    // return src
   }
   var removeSrcPostMark = function (url) {
     //去除texture.load时自动加上的'?'

src/components/RouterOrder.tsx

@@ -12,6 +12,13 @@ const routerArr = [
     name: '首页',
     path: '/',
     exact: true,
+    Com: React.lazy(() => import('@/pages/A0base'))
+  },
+  {
+    id: 2,
+    name: '主页',
+    path: '/home',
+    exact: true,
     Com: A1home
   },
 

src/index.tsx

@@ -1,6 +1,6 @@
 // import 'default-passive-events';
 import App from './App'
-import AppM from './AppM'
+// import AppM from './AppM'
 
 import store from './store/index'
 import { Provider } from 'react-redux'
@@ -37,7 +37,7 @@ root.render(
     <Provider store={store}>
       <StyleProvider hashPriority='high' transformers={[legacyLogicalPropertiesTransformer]}>
         {/* 渲染 移动端 或 pc端 */}
-        {isMobileFu() ? <AppM /> : <App />}
+        {isMobileFu() ? <App /> : <App />}
       </StyleProvider>
     </Provider>
   </ConfigProvider>

src/pages/A0base/component/Preview.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+import { SliderList } from './Slider'
+import store from '@/store'
+
+const TextContainer = ({ type }: { type: string }) => {
+  const textListBao = [
+    {
+      label: '核心功能：',
+      content:
+        '科学研究、成果转化、高端培训、干部教育基地，旨在建设成为中国人民大学建构中国自主的知识体系新引擎。'
+    },
+    {
+      label: '入驻机构：',
+      content:
+        '人才战略与治理研究中心、数据要素与社会发展研究中心、应用数学研究中心(深圳)、数字经济研究中心、全球政策协同研究中心、政府统计现代化研究中心等。'
+    },
+    {
+      label: '空间分布：',
+      content:
+        '有1间报告厅，7间会议室，5间智慧教室，2间研讨室以及阅读室和近25间共亭独立办公室，满足师生研究及办公。'
+    },
+    {
+      label: '承载人数：',
+      content: '教室分别可容纳40人、60人、80人上课，多功能报告厅最大可容纳200人同时使用。'
+    }
+  ]
+  const textListNan = [
+    {
+      label: '核心功能：',
+      content: '人才培养、高端培训、校友活动，旨在打造成为中国人民大学继续教育与人才培养新标杆。'
+    },
+    {
+      label: '入驻机构：',
+      content: '深圳研究院[社会科学高等研究院(深圳)]继续教育培训基地等。'
+    },
+    {
+      label: '空间分布：',
+      content:
+        '共有2个公共办公区、3 个专家工作室、2 个会议室、1个大教室和1个贵宾，满足师生进行学术研究及办公。'
+    },
+    {
+      label: '承载人数：',
+      content: '可同时满足 20人以上人员办公和 100 人以上学员上课和培训。'
+    }
+  ]
+  const textList = type === 'baoan' ? textListBao : textListNan
+  return (
+    <div className='preview-base-text-container'>
+      {textList.map((item, index) => (
+        <div className='preview-base-text' key={index}>
+          <div className='preview-base-text-label'>{item.label}</div>
+          <div className='preview-base-text-content'>{item.content}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function Preview({
+  imgArr,
+  setIsPreview,
+  type
+}: {
+  imgArr: { title: string; src: string }[]
+  setIsPreview: (isPreview: [boolean, string]) => void
+  type: string
+}) {
+  console.log(imgArr, type)
+  // 滚轮让x轴滚动
+  const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    const container = document.querySelector('#A0PreviewScroll')
+    if (container) {
+      container.scrollLeft += event.deltaY
+    }
+  }
+
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const handleArrowLeftClick = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1)
+    }
+  }
+  const handleArrowRightClick = () => {
+    if (currentIndex < imgArr.length - 1) {
+      setCurrentIndex(currentIndex + 1)
+    }
+  }
+  const handleCloseClick = () => {
+    setCurrentIndex(0)
+    setIsPreview([false, ''])
+  }
+
+  return (
+    <>
+      <div className={styles.preview}>
+        <div className='preview-close' onClick={handleCloseClick}>
+          <img src={require('../image/close_white.png')} alt='' />
+        </div>
+        <div className='preview-container'>
+          <div className='preview-content'>
+            <div
+              className='preview-arrow-left'
+              onClick={handleArrowLeftClick}
+              style={currentIndex === 0 ? { opacity: 0.4, cursor: 'not-allowed' } : {}}
+            ></div>
+            <div
+              className='preview-arrow-right'
+              onClick={handleArrowRightClick}
+              style={
+                currentIndex === imgArr.length - 1 ? { opacity: 0.4, cursor: 'not-allowed' } : {}
+              }
+            ></div>
+            <div className='preview-title'>{imgArr[currentIndex].title}</div>
+            <div className='preview-base-container'>
+              <div
+                className='preview-base'
+                onClick={() => {
+                  store.dispatch({
+                    type: 'layout/lookBigImg',
+                    payload: {
+                      url: require(`../image/${type}/${imgArr[currentIndex].src}`),
+                      show: true
+                    }
+                  })
+                }}
+              >
+                <img src={require(`../image/${type}/${imgArr[currentIndex].src}`)} alt='' />
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* index为0，特殊处理 */}
+        {currentIndex === 0 && <TextContainer type={type} />}
+        {currentIndex !== 0 && (
+          <div id='A0PreviewScroll' className={styles.sliderScroll} onWheel={handleWheel}>
+            <SliderList
+              type={type}
+              imgArr={imgArr}
+              onSliderClick={setCurrentIndex}
+              selectedIndex={currentIndex}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

src/pages/A0base/component/Slider.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+
+export function Slider({
+  imgIndex,
+  src,
+  title,
+  selectedIndex,
+  onSliderClick,
+  type
+}: {
+  imgIndex: number
+  src: string
+  title: string
+  selectedIndex: number
+  onSliderClick: (index: number) => void
+  type: string
+}) {
+  return (
+    <div
+      className={styles.slider}
+      onClick={() => onSliderClick(imgIndex)}
+      style={{ border: imgIndex === selectedIndex ? '3px solid #0081fa' : 'none' }}
+    >
+      <div className='img-name'>{title}</div>
+      <div className='img-container'>
+        <img src={require(`../image/${type}/${src}`)} alt='' />
+      </div>
+    </div>
+  )
+}
+
+export const SliderList = ({
+  imgArr,
+  onSliderClick,
+  selectedIndex,
+  type
+}: {
+  imgArr: { src: string; title: string }[]
+  onSliderClick: (index: number) => void
+  selectedIndex: number
+  type: string
+}) => {
+  return (
+    <div className={styles.sliderList}>
+      {imgArr.map((item, index) => (
+        <Slider
+          key={index}
+          imgIndex={index}
+          selectedIndex={selectedIndex}
+          src={item.src}
+          title={item.title}
+          onSliderClick={() => onSliderClick(index)}
+          type={type}
+        />
+      ))}
+    </div>
+  )
+}

src/pages/A0base/component/index.module.scss

@@ -0,0 +1,284 @@
+.intro {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  :global {
+    .intro-content {
+      width: 1200px;
+      height: 750px;
+      background-color: rgba(255, 255, 255, 0.8);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .intro-title {
+        width: 100%;
+        font-size: 16px;
+        color: #000;
+        font-weight: 600;
+        padding: 12px 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #a0a0a0;
+      }
+      .intro-base {
+        width: 70%;
+        height: 450px;
+        margin: 0 auto;
+        margin-top: 12px;
+
+        img {
+          object-fit: none;
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .intro-base-text-container {
+        padding-top: 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+        .intro-base-text {
+          width: 70%;
+          margin: 0 auto;
+          display: flex;
+
+          align-items: center;
+          gap: 24px;
+          .intro-base-text-label {
+            align-self: flex-start;
+            width: 110px;
+            font-size: 16px;
+            color: #0081fa;
+            font-weight: 600;
+          }
+          .intro-base-text-content {
+            width: 100%;
+            font-size: 16px;
+            line-height: 16px;
+            color: #000;
+          }
+        }
+      }
+    }
+  }
+}
+
+.mapIntro {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  :global {
+    .mapIntro-content {
+      position: relative;
+      width: 1000px;
+      height: 550px;
+      background-color: rgba(255, 255, 255, 0.8);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .mapIntro-close {
+        position: absolute;
+        top: 8px;
+        right: 16px;
+        cursor: pointer;
+      }
+      .mapIntro-text {
+        margin-top: 16px;
+        padding: 16px;
+        font-size: 16px;
+        text-align: left;
+        color: #000;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        div {
+          text-indent: 2em;
+        }
+      }
+    }
+  }
+}
+
+.preview {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+  :global {
+    .preview-close {
+      cursor: pointer;
+      position: fixed;
+      top: 20px;
+      right: 20px;
+    }
+    .preview-container {
+      width: 1400px;
+      height: 750px;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .preview-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        .preview-arrow-left {
+          cursor: pointer;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: 10px;
+          width: 37px;
+          height: 37px;
+          background-image: url('../image/arrow_left.png');
+          background-size: 100% 100%;
+        }
+        .preview-arrow-right {
+          cursor: pointer;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: auto;
+          right: 10px;
+          width: 37px;
+          height: 37px;
+          background-image: url('../image/arrow_right.png');
+          background-size: 100% 100%;
+        }
+        .preview-title {
+          margin-top: 12px;
+          padding: 20px;
+          width: 80%;
+          margin: 0 auto;
+          color: #fff;
+          text-align: center;
+          font-size: 24px;
+        }
+        .preview-base-container {
+          width: 80%;
+          margin: 0 auto;
+          .preview-base {
+            width: 100%;
+            height: 650px;
+            margin: 0 auto;
+
+            img {
+              object-fit: contain;
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+    .preview-base-text-container {
+      width: 1120px;
+      margin: 0 auto;
+      padding-top: 12px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      .preview-base-text {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 0 24px;
+        gap: 24px;
+        .preview-base-text-label {
+          align-self: flex-start;
+          width: 110px;
+          font-size: 17px;
+          color: #fff;
+          font-weight: 600;
+        }
+        .preview-base-text-content {
+          width: 100%;
+          font-size: 17px;
+          line-height: 20px;
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
+}
+
+.slider {
+  position: relative;
+  width: 200px;
+  height: 140px;
+  margin: 12px;
+  &:hover {
+    border: 3px solid #0081fa;
+  }
+  :global {
+    .img-name {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, 0.7);
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 16px;
+      &:hover {
+        opacity: 0;
+      }
+    }
+    .img-container {
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s ease-in-out;
+      }
+    }
+  }
+}
+
+.sliderScroll {
+  width: 100%;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.sliderList {
+  height: 180px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: nowrap;
+  min-width: fit-content;
+
+  :global {
+    flex: 0 0 auto;
+  }
+}

src/pages/A0base/index.module.scss

@@ -0,0 +1,139 @@
+.A0base {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  :global {
+    .A0_iconBar {
+      position: fixed;
+      top: 89%;
+      left: 88%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      .A0_icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        gap: 4px;
+        &:hover {
+          img {
+            filter: brightness(0.9);
+          }
+        }
+        div {
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.8);
+          font-family: Arial, '微软雅黑', sans-serif;
+        }
+        .addLike {
+          position: absolute;
+          z-index: 100;
+          left: -18px;
+          bottom: 0px;
+          text-shadow: 1px 1px 1px #fcda99;
+          opacity: 1;
+          pointer-events: none;
+        }
+        .addLikeAc {
+          opacity: 0;
+          transform: translateY(-60px);
+          transition: all 2s ease-out;
+        }
+      }
+    }
+  }
+}
+
+.diagram {
+  position: relative;
+  width: 355px;
+  height: 355px;
+  :global {
+    .diagram-img {
+      cursor: pointer;
+      object-fit: none;
+      width: 100%;
+      height: 100%;
+      &:hover {
+        scale: 1.1;
+      }
+    }
+    .diagram-address {
+      position: fixed;
+      img {
+        width: 56px;
+      }
+    }
+    .diagram-text {
+      display: inline-block;
+      font-size: 24px;
+      line-height: 24px;
+      width: 177px;
+      position: absolute;
+      left: 95%;
+      top: 60%;
+    }
+  }
+}
+
+.layout {
+  :global {
+    .back {
+      position: fixed;
+      top: 16px;
+      left: 16px;
+      cursor: pointer;
+    }
+    .layout-container {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      width: 300px;
+      gap: 4px;
+      top: 46.5%;
+      left: 46%;
+      .floor-1 {
+        width: 140px;
+        height: 35px;
+        background-color: rgba(255, 255, 255, 0.8);
+        font-size: 16px;
+        font-weight: 600;
+        color: #007bff;
+        background: linear-gradient(to right top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4));
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+        clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transform: translateX(21.5%);
+      }
+      .floor-2 {
+        width: 140px;
+        height: 35px;
+        background-color: rgba(255, 255, 255, 0.8);
+        font-size: 16px;
+        font-weight: 600;
+        color: #007bff;
+        background: linear-gradient(to right top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4));
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+        clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+      .arrow {
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        left: -0.8%;
+      }
+    }
+  }
+}

src/pages/A0base/index.tsx

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import http from '@/utils/http'
+import { useHistory } from 'react-router-dom'
+import taohuanyuan from './image/D_taohuayuan.png'
+import xingtong from './image/D_xingtong.png'
+import xuni from './image/D_xuni.png'
+import address from './image/D_address.png'
+import like from './image/icon_like.png'
+import share from './image/icon_share.png'
+import intro from './image/icon_intro.png'
+import floor from './image/bg_floor.png'
+import map from './image/bg_map.png'
+import arrow from './image/arrow.png'
+
+import { message } from 'antd'
+import { Intro, MapIntro } from './component/Intro'
+import { Preview } from './component/Preview'
+
+const imgArrTemp = [
+  { src: 'Bao-0.png', title: '基本情况' },
+  { src: 'Bao-1.jpg', title: '休息洽谈区' },
+  { src: 'Bao-2.jpg', title: '汇报展示厅' },
+  { src: 'Bao-3.jpg', title: '会议室' },
+  { src: 'Bao-4.jpg', title: '智慧教室' },
+  { src: 'Bao-5.jpg', title: '共享工作室' },
+  { src: 'Bao-6.jpg', title: '共享办公区' },
+  { src: 'Bao-7.jpg', title: '贵宾接待室' },
+  { src: 'Bao-8.jpg', title: '茶憩文印室' },
+  { src: 'Bao-9.jpg', title: '休闲展览区' },
+  { src: 'Bao-10.jpg', title: '走廊' }
+]
+
+const imgArrTemp2 = [
+  { src: 'nan-0.png', title: '基本情况' },
+  { src: 'nan-1.jpg', title: '校史走廊' },
+  { src: 'nan-2.jpg', title: '校友之家' },
+  { src: 'nan-3.jpg', title: '专家办公室' },
+  { src: 'nan-4.jpg', title: '智慧教室' },
+  { src: 'nan-5.jpg', title: '开放办公区' },
+  { src: 'nan-6.jpg', title: '会议室' }
+]
+
+function Diagram({
+  imgSrc,
+  left,
+  top,
+  addressLeft,
+  addressTop,
+  text,
+  handleClick
+}: {
+  imgSrc: any
+  left: number
+  top: number
+  addressLeft: number
+  addressTop: number
+  text: string
+  handleClick: () => void
+}) {
+  console.log(imgSrc)
+  console.log(taohuanyuan)
+  return (
+    <div className={styles.diagram} style={{ left: `${left}%`, top: `${top}%` }}>
+      <img className='diagram-img' src={imgSrc} onClick={handleClick} alt='' />
+      <div className='diagram-address' style={{ left: `${addressLeft}%`, top: `${addressTop}%` }}>
+        <img src={address} alt='' />
+        <div className='diagram-text'>{text}</div>
+      </div>
+    </div>
+  )
+}
+
+function Layout({ setIsFloor }: { setIsFloor: (isFloor: boolean) => void }) {
+  const history = useHistory()
+  return (
+    <div className={styles.layout}>
+      <div className='back' onClick={() => setIsFloor(false)}>
+        <img src={require('./image/back.png')} alt='' />
+      </div>
+      <div className='layout-container'>
+        <div className='floor-1' onClick={() => history.push('/home?m=SG-dwRgbFq7Fiz')}>
+          楼层23
+        </div>
+        <div className='floor-2'>楼层22</div>
+        <img src={arrow} alt='' className='arrow' />
+      </div>
+    </div>
+  )
+}
+
+function A0Base() {
+  const [showIntro, setShowIntro] = useState(false)
+  const [isFloor, setIsFloor] = useState(false)
+  const [isPreview, setIsPreview] = useState<[boolean, string]>([false, ''])
+  const [likeCount, setLikeCount] = useState(0)
+  const [isLike, setIsLike] = useState(false)
+  const floor22sceneCode = 'SG-dwRgbFq7Fiz'
+  // const floor23sceneCode = 'SG-NqtcxoVBj5C'
+
+  useEffect(() => {
+    http.get(`https://count.4dage.com/api/count/detail/${floor22sceneCode}`).then(res => {
+      setLikeCount(res.data.starSum)
+    })
+  }, [])
+
+  const handleIntroClick = (isShow: boolean) => {
+    setShowIntro(isShow)
+  }
+  const handleShareClick = () => {
+    navigator.clipboard.writeText(window.location.href)
+    message.success('链接已复制到剪贴板')
+  }
+  const handleLikeClick = () => {
+    if (isLike) return
+    setIsLike(true)
+    setTimeout(() => {
+      http.get(`https://count.4dage.com/api/count/saveStar/${floor22sceneCode}`).then(res => {
+        setLikeCount(likeCount + 1)
+        setIsLike(false)
+      })
+    }, 2000)
+  }
+  return (
+    <div
+      className={styles.A0base}
+      style={{ backgroundImage: isFloor ? `url(${floor})` : `url(${map})` }}
+    >
+      {showIntro &&
+        (isFloor ? (
+          <Intro handleIntroClick={handleIntroClick} />
+        ) : (
+          <MapIntro handleIntroClick={handleIntroClick} />
+        ))}
+      {isFloor && !showIntro && <Layout setIsFloor={setIsFloor} />}
+
+      {!isFloor && !showIntro && !isPreview[0] && (
+        <>
+          <Diagram
+            imgSrc={taohuanyuan}
+            left={13.6}
+            top={8.2}
+            addressLeft={30.4}
+            addressTop={6}
+            text='桃花园科技创新生态园'
+            handleClick={() => setIsPreview([true, 'baoan'])}
+          />
+          <Diagram
+            imgSrc={xingtong}
+            left={9.6}
+            top={5}
+            addressLeft={25.6}
+            addressTop={73}
+            text='星通大厦'
+            handleClick={() => setIsFloor(true)}
+          />
+          <Diagram
+            imgSrc={xuni}
+            left={47.5}
+            top={-22}
+            addressLeft={55.5}
+            addressTop={85}
+            text='深圳虚拟大学园'
+            handleClick={() => setIsPreview([true, 'nanshang'])}
+          />
+        </>
+      )}
+
+      {isPreview[0] && (
+        <Preview
+          imgArr={isPreview[1] === 'baoan' ? imgArrTemp : imgArrTemp2}
+          setIsPreview={setIsPreview}
+          type={isPreview[1]}
+        />
+      )}
+      <div className='A0_iconBar' style={{ display: isPreview[0] ? 'none' : 'flex' }}>
+        <div className='A0_icon' onClick={() => handleLikeClick()}>
+          <div
+            className={classNames(isLike ? 'addLikeAc' : '', 'addLike')}
+            style={{ opacity: !isLike ? 0 : 1 }}
+          >
+            +1
+          </div>
+          <img className='A0_icon_like' src={like} alt='' />
+          <div>{likeCount}次赞</div>
+        </div>
+        <div className='A0_icon'>
+          <img className='A0_icon_intro' onClick={() => setShowIntro(true)} src={intro} alt='' />
+          <div>简介1</div>
+        </div>
+        <div className='A0_icon' onClick={() => handleShareClick()}>
+          <img className='A0_icon_share' src={share} alt='' />
+          <div>分享</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoA0Base = React.memo(A0Base)
+
+export default MemoA0Base

src/pages/A2main/index.module.scss

@@ -8,19 +8,12 @@
     // 鼠标移入按钮
     .hoveImg {
       pointer-events: none;
-      transition: all 0.5s;
-      opacity: 0;
       position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: -40px;
-      width: 80px;
-      height: 37px;
-      line-height: 30px;
+      bottom: -16px;
+      width: 100%;
       text-align: center;
-      background-image: url('../../assets/img/hoverTit.png');
-      background-size: 100% 100%;
-      font-size: 14px;
+      text-shadow: 1px 1px 1px #fcda99;
+      font-size: 12px;
       color: #fff;
     }
 
@@ -75,6 +68,7 @@
     }
 
     .likeBox,
+    .A2_share_box,
     #volume,
     #gui-fullscreen,
     #gui-fullscreen-exit {
@@ -138,6 +132,7 @@
       }
 
       .likeNum {
+        font-size: 12px;
         position: absolute;
         bottom: -16px;
         width: 100%;
@@ -163,34 +158,85 @@
       }
     }
 
+    // 分享
+    .A2_share_box {
+      float: left;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      .A2_share_text {
+        font-size: 12px;
+        position: absolute;
+        bottom: -16px;
+        width: 100%;
+        text-align: center;
+        text-shadow: 1px 1px 1px #fcda99;
+      }
+    }
+
     .pinBottom-container.drawerOpen {
       bottom: 0;
     }
 
     // 展开的导览样式
     .darkGlass {
-      background-color: red;
+      background-color: rgba(0, 0, 0, 0.5);
     }
     #drawer.open {
       height: 140px !important;
       #scrollFrame {
-        height: 107px;
+        height: 130px;
       }
     }
     #thumb-container {
+      width: 100% !important;
+      display: flex;
+      align-items: center;
+      justify-content: left;
+      gap: 12px;
       .thumbImg {
-        width: 122px;
+        width: 200px;
+        height: 120px;
+        margin: 0;
         & > img {
-          height: 86px;
-          &:hover {
-            border-color: yellow;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        &:hover {
+          border: 3px solid #0081fa;
+        }
+        &.active {
+          border: 3px solid #0081fa;
+          .overlay {
+            top: 85%;
+            height: 30%;
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
           }
         }
         .overlay {
-          background-color: transparent;
-          bottom: -24px;
-          font-weight: 700;
-          color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-color: rgba(0, 0, 0, 0.7);
+          color: rgba(255, 255, 255, 0.8);
+          font-size: 12px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          line-height: 16px;
+          white-space: pre-wrap;
+          &:hover {
+            opacity: 0;
+          }
         }
       }
       .active > img {

src/pages/A2main/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useEffect } from 'react'
 import styles from './index.module.scss'
 import A21vrOff from './components/A21vrOff'
 import A22hotListWrap from './components/A22hotListWrap'
@@ -8,11 +8,19 @@ import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import classNames from 'classnames'
 import A3hotList from '../A3hotList'
-
+import shareImg from '@/assets/img/share.png'
+import { message } from 'antd'
+import http from '@/utils/http'
 const imgArrTemp = ['like.png', 'likeAc.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
 
 function A2main() {
+  const sceneCode = 'SG-dwRgbFq7Fiz'
+  useEffect(() => {
+    http.get(`https://count.4dage.com/api/count/detail/${sceneCode}`).then(res => {
+      setLikeNum(res.data.starSum)
+    })
+  }, [])
   // 漫游的状态
   const { state3d } = useSelector((state: RootState) => state.three)
 
@@ -25,11 +33,19 @@ function A2main() {
     if (like) return
     setLike(true)
     setTimeout(() => {
-      setLikeNum(likeNum + 1)
-      setLike(false)
+      http.get(`https://count.4dage.com/api/count/saveStar/${sceneCode}`).then(res => {
+        setLikeNum(likeNum + 1)
+        setLike(false)
+      })
     }, 2000)
   }, [like, likeNum])
 
+  // 点击分享
+  const handleShareClick = () => {
+    navigator.clipboard.writeText(window.location.href)
+    message.success('链接已复制到剪贴板')
+  }
+
   // 点击热点列表
   const [hotListShow, setHotListShow] = useState(false)
 
@@ -169,7 +185,7 @@ function A2main() {
               </div>
 
               {/* 新的热点列表 */}
-              <div
+              {/* <div
                 className='A2hotIcon'
                 rel='tooltip'
                 onClick={() => {
@@ -179,9 +195,8 @@ function A2main() {
                 }}
               >
                 <img src='images/hotlist.png' alt='' />
-                {/* 鼠标移入 */}
                 <div className='hoveImg'>热点列表</div>
-              </div>
+              </div> */}
             </div>
           </div>
         </div>
@@ -194,6 +209,16 @@ function A2main() {
               </div>
               <div className='container'></div>
             </div>
+
+            {/* 点赞 */}
+            <div className='likeBox' onClick={likeFu}>
+              <img src={imgArr[0]} alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>{likeNum}点赞</div>
+              {/* <div className='likeNum'>{likeNum}</div> */}
+              <div className={classNames('likeMove', like ? 'likeMoveAc' : '')}>+1</div>
+            </div>
+
             <div id='volume' className='ui-icon wide'>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
@@ -203,13 +228,9 @@ function A2main() {
               <div className='hoveImg'>音乐开关</div>
             </div>
 
-            {/* 点赞 */}
-            <div className='likeBox' onClick={likeFu}>
-              <img src={like ? imgArr[1] : imgArr[0]} alt='' />
-              {/* 鼠标移入 */}
-              <div className='hoveImg'>点赞</div>
-              <div className='likeNum'>{likeNum}</div>
-              <div className={classNames('likeMove', like ? 'likeMoveAc' : '')}>+1</div>
+            <div className='A2_share_box' onClick={handleShareClick}>
+              <img src={shareImg} alt='' />
+              <div className='A2_share_text'>分享</div>
             </div>
 
             <div id='vr' className='ui-icon wide hidden' style={{ display: 'none' }}>
@@ -224,7 +245,13 @@ function A2main() {
                 <i rel='tooltip' title='{[{ SOCIAL_SHARING }]}' className='icon icon-share'></i>
               </a>
             </div>
-            <div id='gui-fullscreen' className='ui-icon wide' data-placement='top' rel='tooltip'>
+            <div
+              id='gui-fullscreen'
+              className='ui-icon wide'
+              style={{ display: 'none' }}
+              data-placement='top'
+              rel='tooltip'
+            >
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
                 <img src='images/full.png' alt='' />

src/pages/A4base/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
 
 function A4base() {
-  const [show, setShow] = useState(true)
+  const [show, setShow] = useState(false)
 
   const baseStart = useCallback(() => {
     window.manage.switchBgmState(true)

yarn.lock

@@ -1315,13 +1315,6 @@
   resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
-"@dage/krpano@^2.2.0":
-  version "2.2.0"
-  resolved "http://192.168.20.245:4873/@dage/krpano/-/krpano-2.2.0.tgz#33651a7d99e9072fdbc5277b9ca5f9dc63cd7042"
-  integrity sha512-wuxl59g5OAozx/OXpJVQeCGreho3LVPzwJSnmnyxXG0pAfhN4+4r9r9w3oxY5EjPjEhT5Fnc8tnj8bxdGS/WiA==
-  dependencies:
-    escape-html "^1.0.3"
-
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -4553,7 +4546,7 @@ escalade@^3.1.1:
   resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-html@^1.0.3, escape-html@~1.0.3:
+escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==