gx

scene/public/css/oldVer/main0.css

@@ -96,10 +96,10 @@ iframe {
   height: 52px;
   cursor: pointer;
   text-indent: -999em;
-  background-size: 100% 100%;
+  background-size: contain;
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 42px;
+  right: 55px;
 }
 .specialTitle {
   bottom: 65%;
@@ -224,11 +224,11 @@ a {
 }
 @media screen and (max-width: 1000px) {
   #closepop {
-    width: 62px;
+    width: 87px;
     height: 30px;
     position: absolute;
-    top: 10px;
-    left: 10px;
+    top: 27px;
+    right: 28px;
   }
 
   #title-toggle {

scene/src/assets/styles/base.css

@@ -9,15 +9,9 @@ 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%;
 }
-@font-face {
-  font-family: 'fzFont';
-  /* 自定义字体名称 */
-  src: url('../font/fzFont.TTF') format('truetype');
-}
 a {
   text-decoration: none;
   outline: none;
@@ -144,9 +138,6 @@ body,
 .likeMoveAc {
   animation: likeMoveAc 2s linear forwards;
 }
-.room-label p {
-  color: #FDFBB2;
-}
 @keyframes likeMoveAc {
   0% {
     opacity: 1;
@@ -169,4 +160,26 @@ body,
   html .cad {
     top: 20px;
   }
-}
+}
+@keyframes chengzhebei1 {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes chengzhebei2 {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

scene/src/assets/styles/base.less

@@ -200,4 +200,27 @@ body,
   html .cad {
     top: 20px;
   }
+}
+
+@keyframes chengzhebei1 {
+  0% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
+@keyframes chengzhebei2 {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
 }

scene/src/pages/A2main/index.module.scss

@@ -232,6 +232,102 @@
       }
     }
 
+    .chengzhebei {
+      position: absolute;
+      top: 37%;
+      right: 2%;
+      width: 100px;
+      height: 100px;
+      z-index: 100;
+      cursor: pointer;
+      .c1 {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        animation: chengzhebei1 4s linear infinite;
+      }
+      .c2 {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        animation: chengzhebei2 4s linear infinite;
+      }
+    }
+
+    .chengzhebeiD {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) translateZ(0);
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(10px);
+      z-index: 30000;
+
+      padding: 20px 50px 20px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      .IntroClose {
+        position: absolute;
+        top: 42px;
+        right: 55px;
+        width: 113px;
+        height: 52px;
+        cursor: pointer;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .titleLogo {
+        font-size: 22px;
+        font-weight: 700;
+        margin-bottom: 20px;
+        padding: 0 30px;
+        letter-spacing: 4px;
+        color: #ffe9b6;
+      }
+      .modalC {
+        position: relative;
+        border-radius: 6px;
+        overflow: hidden;
+        width: 60%;
+        height: 70%;
+        & > iframe {
+          width: 100%;
+          height: 100%;
+          border: 0;
+        }
+      }
+      .IntroD {
+        width: 60%;
+        height: 30%;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: column;
+        gap: 30px;
+        .infoD {
+          width: 100%;
+          .contentD {
+            height: fit-content;
+            text-align: justify;
+            font-size: 16px;
+            color: #f9f9f1;
+            letter-spacing: 3px;
+            line-height: 32px;
+          }
+        }
+      }
+    }
+
     // 移动端
     @media screen and (max-width: 1000px) {
       .pinBottom.left {
@@ -262,6 +358,33 @@
       .rightViewContainer {
         display: none;
       }
+
+      .chengzhebeiD {
+        .IntroClose {
+          position: absolute;
+          top: 20px;
+          right: 20px;
+          width: 87px;
+          height: 30px;
+          cursor: pointer;
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .titleLogo {
+          font-size: 16px;
+          margin: 8px 0;
+        }
+        .IntroD {
+          .infoD {
+            .contentD {
+              font-size: 14px;
+            }
+          }
+        }
+      }
     }
   }
 }

scene/src/pages/A2main/index.tsx

@@ -13,10 +13,15 @@ import { message } from 'antd'
 const imgArrTemp = ['like.png', 'likeAc.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
 
+declare global {
+  interface Window {
+    backczbClick: (state: boolean) => void;
+  }
+}
 function A2main() {
   // 漫游的状态
   const { state3d } = useSelector((state: RootState) => state.three)
-
+  const [isIntroShow, setIsIntroShow] = useState(false)
   const [hotListShow, setHotListShow] = useState(false)
   const hiddenMap = (isShow: boolean) => {
     const cad: any = document.querySelector('.cad')
@@ -76,7 +81,7 @@ function A2main() {
             </div>
 
             {/* 新的热点列表 */}
-            <div
+            {/* <div
               className='A2hotIcon'
               rel='tooltip'
               onClick={() => {
@@ -87,9 +92,8 @@ function A2main() {
               }}
             >
               <img src={`images/hotlist${hotListShow ? '_active' : ''}.png`} alt='' />
-              {/* 鼠标移入 */}
               <div className='hoveImg'>热点列表</div>
-            </div>
+            </div> */}
 
             <div data-original-title='全景漫游' id='gui-modes-inside' rel='tooltip'>
               <img className='icon icon-inside' src={`images/inside${state3d === 'panorama' ? '_active' : ''}.png`} alt='' />
@@ -188,6 +192,41 @@ function A2main() {
           hiddenMap(false)
         }}
       />
+
+      <div className="chengzhebei" onClick={() => {
+        setIsIntroShow(true)
+        if (window.parent !== window) {
+          window.parent.backczbClick(true);
+        }
+      }}>
+        <img className='c1' src={require('@/assets/img/chengzhebei1.png')} alt="" />
+        <img className='c2' src={require('@/assets/img/chengzhebei2.png')} alt="" />
+      </div>
+
+      {isIntroShow && (
+        <div className="chengzhebeiD">
+          <div className="titleLogo">
+            程哲碑
+          </div>
+          <div className="modalC">
+            <iframe title='czbMODEL' src="https://4dscene.4dage.com/culturalrelics/demo2/Model2.html?m=chengzhebei" />
+          </div>
+          <div className="IntroD">
+            <div className="IntroClose" onClick={() => {
+              setIsIntroShow(false)
+              if (window.parent !== window) {
+                window.parent.backczbClick(false);
+              }
+            }}><img src={require('@/assets/img/closeWithTxt.png')} alt="" draggable="false" /></div>
+
+
+            <div className="infoD" >
+
+              <div className="contentD" >据当地村民介绍，程哲碑在迁往太原之前一直保存于古佛堂檐下。</div>
+            </div>
+
+          </div>
+        </div>)}
     </div>
   )
 }