添加资讯

Scene/public/index.html

@@ -9,7 +9,7 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <title>共和国印记——侨心共筑中国梦</title>
-
+    <script src="./myData/data.js"></script>
     <!-- 大场景相关 -->
     <link rel="stylesheet" href="./css/oldVer/main0.css" />
     <link rel="stylesheet" href="./css/main.css?v=2.25" />

Scene/public/myData/data.js

@@ -0,0 +1,58 @@
+const newsInfo = {
+  title1: '新闻报道',
+  news: [
+    {
+      img: 'myData/img/new1.png',
+      text: '四海同心 共筑华章',
+      path: 'http://epaper.cnnb.com.cn/nbrb/pc/content/202511/17/content_246388.html'
+    },
+    {
+      img: 'myData/img/new2.png',
+      text: '宁波这场华侨文物联展，带你读懂侨胞的赤子之心与家国情怀',
+      path: 'https://ypstatic.cnnb.com.cn/yppage-share/news/share/news_detail?newsId=691ada5ee4b046406b399ad1&modeType=0'
+    },
+    {
+      img: 'myData/img/new3.png',
+      text: '侨心共筑中国梦！华侨文物联展明天开展',
+      path: 'https://ypstatic.cnnb.com.cn/yppage-share/news/share/news_detail?newsId=691ae82fe4b0308804f87807&modeType=0'
+    },
+    {
+      img: 'myData/img/new4.png',
+      text: '“共和国印记——侨心共筑中国梦”华侨文物联展明天在甬开展',
+      path: 'https://h5.nj.nbtv.cn/news-videos.html?column_id=2&day=1763308800&content_id=40344819'
+    },
+    {
+      img: 'myData/img/new5.png',
+      text: '这场展览带你读懂侨胞的赤子之心',
+      path: 'http://epaper.cnnb.com.cn/nbwb/pc/content/202511/18/content_246479.html'
+    },
+    {
+      img: 'myData/img/new6.png',
+      text: '侨心共筑中国梦！“共和国印记”华侨文物联展在宁波开展',
+      path: 'https://tidenews.com.cn/news.html?id=3302824&source=weixin'
+    },
+    {
+      img: 'myData/img/new7.png',
+      text: '3件展品背后的“宁波力量”',
+      path: 'https://ypstatic.cnnb.com.cn/yppage-share/news/share/news_detail?newsId=691a7edfe4b059ed1ba8077c&modeType=0'
+    },
+    {
+      img: 'myData/img/new8.png',
+      text: '侨心共筑中国梦！华侨文物联展在宁波帮博物馆开幕',
+      path: 'https://appshare.zhxww.net/webDetails/news?id=17916189&tenantId=86&uid=64cc792b81336f4298a170f7'
+    }
+  ],
+  title2: '宣传活动',
+  actiInfo: [
+    {
+      title: '解码共和国华侨文物中的赤子担当（2025年11月18日）',
+      img: 'myData/img/acti1.png',
+      text: '通过“观展解码、故事共鸣、纪念品创作”的形式，组织庄市兴庄路社区银辉党支部,在30分钟沉浸式观展中触摸文物背后的时代温度，在交流中感悟华侨“根在中华、志在四方”的担当，最终以手工定格家国情怀，感受跨越山海的华侨爱国基因。'
+    },
+    {
+      title: '少年寻侨记（2025年12月7日）',
+      img: 'myData/img/acti2.png',
+      text: '本次活动，带领青少年体验爱国主题非遗“螺钿画”。此作品仿佛一个温暖的比喻：那些源自四海的螺钿，经过悉心镶嵌，汇聚成熠熠生辉的完整画面。正如天涯海角的华侨华人，虽身处各方，但共同的家国情怀始终是连接彼此的精神纽带。'
+    }
+  ]
+}

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

@@ -62,6 +62,7 @@
       gap: 38px;
       .likeBox,
       .videoBox,
+      .newsBox,
       #volume,
       #gui-fullscreen,
       #gui-fullscreen-exit,
@@ -107,7 +108,8 @@
 
     // 点赞
     .likeBox,
-    .videoBox {
+    .videoBox,
+    .newsBox {
       float: left;
       cursor: pointer;
 
@@ -358,6 +360,7 @@
         margin-bottom: -30px;
         .likeBox,
         .videoBox,
+        .newsBox,
         #volume,
         #gui-fullscreen,
         #gui-fullscreen-exit,

Scene/src/pages/A2main/index.tsx

@@ -10,6 +10,8 @@ import classNames from 'classnames'
 import A3hotList from '../A3hotList'
 import { message } from 'antd'
 import http from '@/utils/http'
+import A6news from '../A6news'
+import { isMobileFu } from '@/utils/history'
 const imgArrTemp = ['like.png', 'likeAc.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
 
@@ -23,6 +25,7 @@ function A2main() {
   const [likeNum, setLikeNum] = useState(1)
   const [viewNum, setViewNum] = useState(1)
   const [isShowVideo, setIsShowVideo] = useState(false)
+  const [isShowNews, setIsShowNews] = useState(false)
 
   useEffect(() => {
     http.get(`https://count.4dage.com/api/count/detail/${SCENE_CODE}`).then(res => {
@@ -222,6 +225,12 @@ function A2main() {
               <div className='hoveImg'>布展视频</div>
             </div>
 
+            <div className='newsBox' onClick={() => setIsShowNews(true)} style={{ display: isMobileFu() ? 'none' : 'block' }}>
+              <img src={require('@/assets/img/news.png')} alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>资讯</div>
+            </div>
+
             <div className='A2_share_box' onClick={handleShareClick}>
               <img src={require('@/assets/img/share.png')} alt='' />
               <div className='hoveImg'>分享</div>
@@ -298,6 +307,8 @@ function A2main() {
         <video src='data/1.mp4' autoPlay muted></video>
         <div className="closeV" onClick={() => setIsShowVideo(false)}><img src={require('@/assets/img/close.png')} alt="" draggable="false" /></div>
       </div>}
+
+      {isShowNews && <A6news setIsShowNews={setIsShowNews} />}
     </div>
   )
 }

Scene/src/pages/A6news/index.module.scss

@@ -0,0 +1,174 @@
+.A6news {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 31000;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(248, 248, 248, 1);
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0;
+  }
+
+  :global {
+    .back {
+      position: fixed;
+      top: 20px;
+      left: 20px;
+      width: 48px;
+      height: 48px;
+      cursor: pointer;
+    }
+    .scroll {
+      height: fit-content;
+      width: 100%;
+      .top {
+        width: 100%;
+        height: 460px;
+        background-image: url('../../assets/img/topBg.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .newsContent {
+        width: 100%;
+        height: 1110px;
+        .newsTitle {
+          margin: 70px auto 20px;
+          width: 100%;
+          height: 50px;
+          color: rgba(135, 25, 30, 1);
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          letter-spacing: 1px;
+          &::after {
+            content: '';
+            position: relative;
+            z-index: -1;
+            top: -17px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-radius: 10px;
+            display: block;
+            width: 130px;
+            height: 18px;
+            background-color: rgba(251, 205, 161, 1);
+          }
+        }
+
+        .newsInfo {
+          width: calc(100% - 460px);
+          margin: 0 auto;
+          height: fit-content;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr;
+          grid-gap: 40px 60px;
+          .newsItem {
+            height: 470px;
+            width: 320px;
+            cursor: pointer;
+            .imgBox {
+              height: 420px;
+              width: 100%;
+              border-radius: 5px;
+              & > img {
+                border-radius: 5px;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+              }
+            }
+            .title {
+              margin-top: 20px;
+              height: 30px;
+              width: 100%;
+              color: rgba(79, 79, 79, 1);
+              font-size: 18px;
+              text-align: center;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+
+      .Bottom {
+        width: 100%;
+        height: 840px;
+        background-color: #fff;
+        .botTitle {
+          position: relative;
+          z-index: 1;
+          padding: 70px 0 20px 0;
+          width: 100%;
+          height: 135px;
+          color: rgba(135, 25, 30, 1);
+          font-size: 24px;
+          font-weight: bold;
+          text-align: center;
+          letter-spacing: 1px;
+          &::after {
+            content: '';
+            position: relative;
+            z-index: -1;
+            top: -17px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-radius: 10px;
+            display: block;
+            width: 130px;
+            height: 18px;
+            background-color: rgba(251, 205, 161, 1);
+          }
+        }
+        .botInfo {
+          width: calc(100% - 460px);
+          margin: 0 auto;
+          height: fit-content;
+          display: flex;
+          justify-content: center;
+          gap: 60px;
+          .botitem {
+            height: 600px;
+            width: 700px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            .title {
+              width: 100%;
+              height: 30px;
+              text-align: center;
+              color: rgba(58, 58, 58, 1);
+              font-weight: bold;
+              font-size: 24px;
+            }
+            .imgBox {
+              height: 420px;
+              width: 100%;
+              border-radius: 10px;
+              background-color: rgba(255, 157, 157, 1);
+              & > img {
+                border-radius: 10px;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+              }
+            }
+            .text {
+              color: rgba(79, 79, 79, 1);
+              font-size: 23px;
+              text-align: justify;
+              height: 110px;
+              width: 100%;
+              text-indent: 2em;
+            }
+          }
+        }
+      }
+    }
+  }
+}

Scene/src/pages/A6news/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styles from "./index.module.scss";
+function A6news({ setIsShowNews }: { setIsShowNews: (isShowNews: boolean) => void }) {
+  const goToLink = (url: string) => {
+    window.open(url, "_blank");
+  }
+  return (
+    <div className={styles.A6news}>
+      <div className="back" onClick={() => setIsShowNews(false)}><img src={require('@/assets/img/back.png')} alt="" /></div>
+      <div className="scroll">
+        <div className="top" />
+        <div className="newsContent">
+          <div className="newsTitle">{newsInfo.title1}</div>
+          <div className="newsInfo">
+            {newsInfo.news.map((item, index) => (
+              <div className="newsItem" key={index} onClick={() => goToLink(item.path)}>
+                <div className="imgBox"><img src={item.img} alt="" /></div>
+                <div className="title">{item.text}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="Bottom">
+          <div className="botTitle">{newsInfo.title2}</div>
+          <div className="botInfo">
+            {newsInfo.actiInfo.map((item, index) => (
+              <div className="botitem" key={index} >
+                <div className="title">{item.title}</div>
+                <div className="imgBox"><img src={item.img} alt="" /></div>
+                <div className="text">{item.text}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const MemoA6news = React.memo(A6news);
+
+export default MemoA6news;

Scene/src/types/declaration.d.ts

@@ -6,3 +6,26 @@ declare module '*.gif'
 declare module '*.svg'
 declare module 'js-export-excel'
 declare module 'braft-utils'
+
+interface NewsInfo {
+  title1: string
+  news: {
+    img: string
+    text: string
+    path: string
+  }[]
+  title2: string
+  actiInfo: {
+    title: string
+    img: string
+    text: string
+  }[]
+}
+
+const newsInfo: NewsInfo
+
+declare global {
+  interface Window {
+    newsInfo: NewsInfo
+  }
+}