gx

src/pages/A2layout/index.module.scss

@@ -9,6 +9,7 @@
       background-image: url('../../assets/img/layoutBg.jpg');
       background-size: 100% 100%;
       position: relative;
+      overflow: hidden;
     }
     .tabBar {
       position: fixed;

src/pages/A2layout/index.tsx

@@ -15,7 +15,13 @@ function A2layout() {
     <div className={styles.A2layout}>
       <div className='bg'>
         {location.map((item) => (
-          <Dot key={item.name} name={item.name} transform={item.transform} />
+          <Dot
+            key={item.name}
+            name={item.name}
+            transform={item.transform}
+            text={item.text}
+            introPosition={item.introPosition}
+          />
         ))}
       </div>
       <div className='tabBar'>

src/pages/A2layout/location.ts

@@ -1,54 +1,79 @@
-export const location = [
+import type { IntroPosition } from '../components/Dot'
+
+export type LocationItem = {
+  name: string
+  transform: string
+  text?: string
+  introPosition?: IntroPosition
+}
+
+export const location: LocationItem[] = [
   {
-    name: '1',
+    name: '胜利广场',
     transform: 'translate(-374%, 337%)',
+    text: '胜利广场占地面积为3万平方米，胜利主雕上方是由三位手持红旗、手举步枪手捧鲜花的三位解放军战士组成。他们代表着集宁在解放的那一刻，战士们挥舞红旗，手举步枪庆祝胜利，老百姓把鲜花献给最可爱的人民解放军，军民共同庆祝胜利的场景。',
+    introPosition: 'right',
   },
   {
-    name: '4',
+    name: '游客服务中心',
     transform: 'translate(-167%, 733%)',
+    text: '集宁战役红色纪念园游客服务中心是园区配套的综合性游客服务枢纽，为国家AAAA级旅游景区、全国红色旅游经典景区提供一站式服务支撑。',    
   },
   {
-    name: '5',
+    name: '乌兰察布党史馆',
     transform: 'translate(-37%, 550%)',
+    text: '乌兰察布党史馆是园区重要的红色文化展示阵地与党史学习教育主阵地。展馆以察哈尔地区及乌兰察布地方党史为主线，结合革命发展历程、重大历史事件、英雄模范事迹进行系统展陈。 ',
   },
   {
-    name: '6',
+    name: '纪念广场',
     transform: 'translate(-39%, 129%)',
+    text: '纪念广场总占地面积2万平方米，广场中心矗立主题纪念雕塑，塑像再现七位指挥集宁战役的开国将帅风采，分别为贺龙、聂荣臻元帅，罗瑞卿、许光达大将，张宗逊、杨成武上将与姚喆中将。纪念雕塑的平面墙上刻有三次集宁战役示意图和毛泽东主席给集宁前线发的电文。',
   },
   {
-    name: '9',
+    name: '绥蒙政府纪念广场',
     transform: 'translate(-269%, -475%)',
+    text: '绥蒙政府纪念广场主体塑有乌兰夫、杨植霖两位革命先辈雕像。乌兰夫曾任绥蒙政府主席，杨植霖曾任绥蒙政府副主席，二人均为呼和浩特土默特左旗籍。他们在革命岁月中并肩作战，解放后分别担任内蒙古自治区政府主席、副主席，为地区发展作出巨大贡献。塑像后方的牵手雕塑，寓意蒙汉各族人民精诚团结、携手前行。',
   },
   {
-    name: '10',
+    name: '全国红色旅游书屋',
     transform: 'translate(-221%, -930%)',
+    text: '利用复原场景内的空间设置了全国红色旅游书屋。作为纪念园重要文化配套与研学教育阵地，书屋集文献查阅、红色阅读、研学授课、文化交流于一体，为游客与研学群体提供沉浸式红色文化体验，助力传承革命精神、赓续红色血脉。',
   },
   {
-    name: '11',
+    name: '场景复原展区',
     transform: 'translate(-178%, -1069%)',
+    text: '复原了当时集宁县政府的外貌和平地泉车站原貌。',
   },
   {
-    name: '12',
+    name: '国防教育展区',
     transform: 'translate(-179%, -825%)',
+    text: '园内陈列装备均由部队退役后捐赠，包含榴弹炮、加农炮、坦克、装甲车、防空火炮、运-5运输机、歼-6战机等多型号大中型军械装备。场馆现已获评国家级国防教育基地，是面向广大青少年开展爱国主义与国防科普教育的关键阵地。',
   },
   {
-    name: '13',
+    name: '国防教育展区',
     transform: 'translate(99%, -685%)',
+    text: '园内陈列装备均由部队退役后捐赠，包含榴弹炮、加农炮、坦克、装甲车、防空火炮、运-5运输机、歼-6战机等多型号大中型军械装备。场馆现已获评国家级国防教育基地，是面向广大青少年开展爱国主义与国防科普教育的关键阵地。',
   },
   {
-    name: '15',
+    name: '集宁战役纪念馆',
     transform: 'translate(-45%, -506%)',
+    text: '集宁战役纪念馆2010年建成开馆，总占地面积4710平方米。展馆设七大陈列板块，依托2300余份文献史料、历史照片与革命文物，系统还原解放战争时期三次集宁战役作战史实，是传承红色历史、开展爱国主义和国防教育的重要场所。',
   },
   {
-    name: '16',
+    name: '英烈墙',
     transform: 'translate(146%, -750%)',
+    text: '英烈墙铭记三次集宁战役牺牲先烈，共有11900名革命先烈壮烈殉国，墙体镌刻有名烈士5082位，数千无名英烈埋骨青山、姓名无存。这里是缅怀先烈、祭奠英魂，传承红色精神的重要场所。',
   },
   {
-    name: '18',
+    name: '名人园',
     transform: 'translate(328%, -575%)',
+    text: '园内矗立17尊高2.6米铸铜塑像，纪念曾指挥或参与三次集宁战役、建国后担任省部级以上职务的未授衔老一辈无产阶级革命家，包括周恩来、胡耀邦、李井泉、郑天翔等同志。',
+    introPosition: 'left',
   },
   {
-    name: '21',
+    name: '将军园',
     transform: 'translate(328%, 24%)',
+    text: '将军园内铸有141位将军半身塑像，塑像人物均亲身参与、指挥集宁三次战役，建国后分别在1955年到1964年被授予少将以上军衔的将领，其中有贺龙、聂荣臻、张宗逊、杨成武、姚喆等将领。他们在集宁战役中立下了不朽的功绩，为解放战争做出了卓越的贡献。',
+    introPosition: 'left',
   },
 ]

src/pages/A3Pano/index.module.scss

@@ -118,6 +118,10 @@
                   height: 20%;
                   width: 100%;
                   background-color: rgba(0, 0, 0, 1);
+                  line-height: 30px;
+                  color: #fff;
+                  font-weight: 500;
+                  text-align: center;
                 }
               }
             }

src/pages/A3Pano/index.tsx

@@ -110,7 +110,7 @@ function A3Pano() {
                     key={index}
                   >
                     <img draggable={false} src={item.thumbUrl} alt='' />
-                    <div className='mood'></div>
+                    <div className='mood'>{item.sceneName}</div>
                   </div>
                 ))}
               </div>

src/pages/components/Dot/index.module.scss

@@ -14,6 +14,12 @@
   left: 50%;
   transform: translate(-50%, -50%);
   scale: 0.8;
+  z-index: 1;
+
+  &:hover {
+    z-index: 10;
+  }
+
   & > img {
     width: 13%;
     height: 60%;
@@ -27,6 +33,7 @@
       width: 68%;
       height: 82%;
       padding-bottom: 5px;
+      white-space: nowrap;
       align-self: flex-end;
       font-size: 22px;
       font-weight: 500;
@@ -36,3 +43,47 @@
     }
   }
 }
+
+.introContent {
+  position: absolute;
+  top: 50%;
+  width: 520px;
+  max-height: 420px;
+  padding: 36px 0;
+  padding-left: 30px;
+  padding-right: 60px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background: url('../../../assets/img/introBg.png') no-repeat center center;
+  background-size: 100% 100%;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+  display: none;
+
+  &_visible {
+    display: block;
+  }
+
+  &_right {
+    left: calc(100% - 35px);
+    transform: translateY(-50%);
+  }
+
+  &_left {
+    right: calc(100% - 16px);
+    transform: translateY(-50%);
+  }
+}
+
+.introContentText {
+  max-height: 360px;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 1px;
+  color: rgba(255, 255, 255, 1);
+  overflow-y: auto;
+  text-indent: 2em;
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+}

src/pages/components/Dot/index.tsx

@@ -1,20 +1,44 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styles from './index.module.scss'
 import { useNavigate } from 'react-router-dom'
+
+export type IntroPosition = 'left' | 'right'
+
 type DotType = {
   name?: string
   transform?: string
+  text?: string
+  introPosition?: IntroPosition
 }
-function Dot({ name = '点位名称', transform = 'translate(-50%, -50%)' }: DotType) {
+
+function Dot({
+  name = '点位名称',
+  transform = 'translate(-50%, -50%)',
+  text = '点位介绍',
+  introPosition = 'right',
+}: DotType) {
   const navigate = useNavigate()
+  const [hovered, setHovered] = useState(false)
+
   return (
     <div
       className={styles.dot}
       style={{ transform }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
       onClick={() => navigate(`/pano?name=${name}`)}
     >
       <img src={require('@/assets/img/dot.png')} alt='' />
       <div className='dotName'>{name}</div>
+      <div
+        className={`${styles.introContent} ${styles[`introContent_${introPosition}`]} ${
+          hovered ? styles.introContent_visible : ''
+        }`}
+        onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      >
+        <div className={styles.introContentText}>{text}</div>
+      </div>
     </div>
   )
 }

src/pages/components/Look/index.tsx

@@ -220,14 +220,14 @@ function Look({ setCurrentActive }: { setCurrentActive: (active: string) => void
                     <img onClick={() => {
                       setCurrentIndex(index)
                       setShowDetail(true)
-                    }} src={item.pic !== '' ? item.pic : item.otherPic[0]} alt='' />
+                    }} draggable={false} src={item.pic !== '' ? item.pic : item.otherPic[0]} alt='' />
                   </>
                 ) : (
                   <>
                     <img onClick={() => {
                       setCurrentIndex(index)
                       setShowDetail(true)
-                    }} src={item.pic !== '' ? item.pic : item.otherPic[0]} alt='' />
+                    }} draggable={false} src={item.pic !== '' ? item.pic : item.otherPic[0]} alt='' />
                     <div className='text'>
                       <div className='top'>{item.title}</div>
                       <div className='txt'>{item.text}</div>

src/pages/components/Panoramic/index.tsx

@@ -595,7 +595,7 @@ const Panoramic = ({
         ]
       },
       {
-        name: '1',
+        name: '胜利广场',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/1.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/1.tiles/preview.jpg',
         imageTagAttributes: {
@@ -627,7 +627,7 @@ const Panoramic = ({
         ]
       },
       {
-        name: '10',
+        name: '全国红色旅游书屋',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/10.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/10.tiles/preview.jpg',
         imageTagAttributes: {
@@ -659,7 +659,7 @@ const Panoramic = ({
         ]
       },
       {
-        name: '11',
+        name: '场景复原展区',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/11.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/11.tiles/preview.jpg',
         imageTagAttributes: {
@@ -692,7 +692,7 @@ const Panoramic = ({
       },
 
       {
-        name: '12',
+        name: '国防教育展区',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/12.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/12.tiles/preview.jpg',
         imageTagAttributes: {
@@ -723,7 +723,7 @@ const Panoramic = ({
           },
         ]
       }, {
-        name: '13',
+        name: '国防教育展区',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/13.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/13.tiles/preview.jpg',
         imageTagAttributes: {
@@ -785,7 +785,7 @@ const Panoramic = ({
           }
         ]
       }, {
-        name: '15',
+        name: '集宁战役纪念馆',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/15.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/15.tiles/preview.jpg',
         imageTagAttributes: {
@@ -816,7 +816,7 @@ const Panoramic = ({
           },
         ]
       }, {
-        name: '16',
+        name: '英烈墙',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/16.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/16.tiles/preview.jpg',
         imageTagAttributes: {
@@ -878,7 +878,7 @@ const Panoramic = ({
           },
         ]
       }, {
-        name: '18',
+        name: '名人园',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/18.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/18.tiles/preview.jpg',
         imageTagAttributes: {
@@ -1002,7 +1002,7 @@ const Panoramic = ({
           },
         ]
       }, {
-        name: '21',
+        name: '将军园',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/21.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/21.tiles/preview.jpg',
         imageTagAttributes: {
@@ -1343,7 +1343,7 @@ const Panoramic = ({
           },
         ]
       }, {
-        name: '4',
+        name: '游客服务中心',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/4.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/4.tiles/preview.jpg',
         imageTagAttributes: {
@@ -1374,7 +1374,7 @@ const Panoramic = ({
           }
         ]
       }, {
-        name: '5',
+        name: '乌兰察布党史馆',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/5.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/5.tiles/preview.jpg',
         imageTagAttributes: {
@@ -1405,7 +1405,7 @@ const Panoramic = ({
           }
         ]
       }, {
-        name: '6',
+        name: '纪念广场',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/6.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/6.tiles/preview.jpg',
         imageTagAttributes: {
@@ -1498,7 +1498,7 @@ const Panoramic = ({
           },
         ]
       }, {
-        name: '9',
+        name: '绥蒙政府纪念广场',
         thumbUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/9.tiles/thumb.jpg',
         previewUrl: 'https://houseoss.4dkankan.com/project/jining/test/panos/9.tiles/preview.jpg',
         imageTagAttributes: {