v1.3.1

1、更换播放按钮、首页文案，loading背景使用回原有的。同时加入定位属性，用于不同商圈的定位
2、商圈交互区域加入热点动画提示
3、王府井、隆福寺热点加入文字说明
4、舞狮动画在开始时先进行一次播放用于加载图片，然后再跟随鼓声进行播放
5、

components/ChongwenScene.vue

@@ -141,6 +141,13 @@ onMounted(() => {
       @click="openWebview"
     />
     
+    <!-- 热点点击区域 -->
+    <div class="hotspot-area">
+      <div class="pulse-indicator">
+        <div class="pulse-circle"></div>
+      </div>
+    </div>
+    
     <!-- 视频播放按钮 -->
     <VideoPlayButton @play="openVideoPlayer" />
     
@@ -214,7 +221,7 @@ onMounted(() => {
   width: 479rpx;
   height: 84rpx;
   cursor: pointer;
-  z-index: 25;
+  z-index: 26;
   transition: all 0.3s ease;
 }
 
@@ -227,4 +234,49 @@ onMounted(() => {
   from { opacity: 0; transform: translateY(-20px); }
   to { opacity: 1; transform: translateY(0); }
 }
+
+/* 热点点击区域 */
+.hotspot-area {
+  position: absolute;
+  left: 321rpx; 
+  top: 570rpx;
+  width: 150rpx;
+  height: 150rpx;
+  cursor: pointer;
+  z-index: 25;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 脉冲动效 */
+.pulse-indicator {
+  position: relative;
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.pulse-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(255, 215, 0, 0.4);
+  border: 3rpx solid rgba(255, 215, 0, 0.8);
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(2);
+    opacity: 0;
+  }
+}
 </style>

components/DongzhimenScene.vue

@@ -611,6 +611,13 @@ onUnmounted(() => {
       @touchstart="startDrag"
     ></view>
     
+    <!-- 热点点击区域 -->
+    <div v-if="showGuideElements" class="hotspot-area">
+      <div class="pulse-indicator">
+        <div class="pulse-circle"></div>
+      </div>
+    </div>
+    
     <!-- 视频播放按钮 -->
     <VideoPlayButton @play="openVideoPlayer" />
     
@@ -724,5 +731,49 @@ onUnmounted(() => {
   z-index: 30;
 }
 
+/* 热点点击区域 */
+.hotspot-area {
+  position: absolute;
+  right: 80rpx; 
+  top: 1750rpx;
+  width: 150rpx;
+  height: 150rpx;
+  cursor: pointer;
+  z-index: 25;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 脉冲动效 */
+.pulse-indicator {
+  position: relative;
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.pulse-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(255, 215, 0, 0.4);
+  border: 3rpx solid rgba(255, 215, 0, 0.8);
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(2);
+    opacity: 0;
+  }
+}
 
 </style>

components/LoadingComponent.vue

@@ -17,9 +17,6 @@ const emit = defineEmits(['loaded', 'start'])
 const loadingProgress = ref(0)
 // 是否加载完成
 const isLoadingComplete = ref(false)
-// 是否显示开始按钮
-const showStartButton = ref(false)
-
 // 生成带时间戳的图片URL（避免缓存）
 const generateImageUrl = (name) => {
   const url = new URL(`/static/bg/${name}.jpg`, import.meta.url)
@@ -27,11 +24,6 @@ const generateImageUrl = (name) => {
   return url.href
 }
 
-// 计算开始按钮是否可见
-const startButtonVisible = computed(() => {
-  return isLoadingComplete.value && showStartButton.value
-})
-
 // 加载图片函数
 const loadImages = async () => {
   // 图片名称数组
@@ -74,12 +66,16 @@ const loadImages = async () => {
   isLoadingComplete.value = true
   loadingProgress.value = 100
   
-  // 延迟显示开始按钮，让用户看到100%的进度
+  // 延迟后自动开始，让用户看到100%的进度
   setTimeout(() => {
-    showStartButton.value = true
     // 通知父组件加载完成
     emit('loaded')
-  }, 500)
+    // 自动开始，进入首页
+    // 等待100ms确保进度条完全显示
+    setTimeout(() => {
+      emit('start')
+    }, 500)
+  }, 100)
 }
 
 // 单个图片加载函数
@@ -92,10 +88,7 @@ const loadImage = (src) => {
   })
 }
 
-// 点击开始按钮
+
-const handleStart = () => {
-  emit('start')
-}
 
 // 组件挂载后开始加载图片
 onMounted(() => {
@@ -111,17 +104,12 @@ onMounted(() => {
     </div>
     
     <!-- 进度条区域 -->
-    <div v-if="!startButtonVisible" class="progress-container">
+    <div class="progress-container">
       <div class="progress-bar">
         <div class="progress-fill" :style="{ width: `${loadingProgress}%` }"></div>
       </div>
       <div class="progress-text">{{ loadingProgress }}%</div>
     </div>
-    
-    <!-- 开始按钮 -->
-    <div v-if="startButtonVisible" class="start-button" @click="handleStart">
-      <img src="/static/loading/btn_start.png" alt="开始" class="start-btn-image" />
-    </div>
   </div>
 </template>
 

components/LongfusiScene.vue

@@ -156,10 +156,11 @@ onMounted(() => {
     </div> -->
     
     <!-- 热点点击区域2 - 右下方 -->
-    <div class="hotspot-area" style="left: 450rpx; top: 900rpx;" @click="openGallery(1)">
+    <div class="hotspot-area" style="left: 450rpx; top: 900rpx;" @click="openGallery(0)">
       <div class="pulse-indicator">
         <div class="pulse-circle"></div>
       </div>
+      <div class="hotspot-text">点击查看隆福寺新年照片</div>
     </div>
     
     <!-- 热点点击区域3 - 上方 -->
@@ -222,142 +223,7 @@ onMounted(() => {
   object-fit: contain;
 }
 
-/* 增强动效层 */
-.enhancement-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
 
-/* 灯笼增强动效 */
-.lanterns {
-  position: absolute;
-  top: 15%;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 0 30px;
-  box-sizing: border-box;
-}
-
-.lantern {
-  font-size: 2.5rem;
-  animation: swing 3s infinite ease-in-out;
-  opacity: 1;
-  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
-  color: #ffd700;
-}
-
-.left-lantern {
-  animation-delay: 0s;
-}
-
-.right-lantern {
-  animation-delay: 1.5s;
-}
-
-@keyframes swing {
-  0%, 100% { transform: rotate(-10deg); }
-  50% { transform: rotate(10deg); }
-}
-
-/* 福字增强动效 */
-.fu-word {
-  position: absolute;
-  top: 30%;
-  left: 65%;
-  transform: translateX(-50%) rotate(15deg);
-  font-size: 2rem;
-  color: #ffd700;
-  text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.9);
-  animation: float 4s infinite ease-in-out;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateX(-50%) rotate(15deg) translateY(0); }
-  50% { transform: translateX(-50%) rotate(15deg) translateY(-15px); }
-}
-
-/* 点击指示器 */
-.click-indicator {
-  position: absolute;
-  top: 55%;
-  left: 75%;
-  transform: translate(-50%, -50%);
-  width: 60px;
-  height: 60px;
-  pointer-events: none;
-}
-
-.pulse-circle {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: rgba(255, 215, 0, 0.3);
-  border: 2px solid rgba(255, 215, 0, 0.6);
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.click-indicator.animate-pulse {
-  display: block;
-}
-
-/* 交互区域 */
-.interaction-area {
-  position: absolute;
-  top: 55%;
-  right: 15%;
-  width: 120px;
-  height: 100px;
-  cursor: pointer;
-  z-index: 20;
-}
-
-/* 响应式调整交互区域位置 */
-@media (max-width: 640px) {
-  .interaction-area {
-    top: 52%;
-    right: 10%;
-    width: 100px;
-    height: 80px;
-  }
-}
-
-/* 福印收集标记 */
-.seal-collected-mark {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background-color: rgba(255, 107, 53, 0.9);
-  color: #fff;
-  padding: 10px 15px;
-  border-radius: 20px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  animation: fadeIn 0.5s ease;
-  z-index: 30;
-}
-
-.seal-icon {
-  font-size: 20px;
-}
 
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(-20px); }
@@ -429,4 +295,20 @@ onMounted(() => {
   }
 }
 
+/* 热点文字提示 */
+.hotspot-text {
+  position: absolute;
+  bottom: -40rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 24rpx;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  white-space: nowrap;
+  z-index: 30;
+  text-align: center;
+}
+
 </style>

components/QianmenScene.vue

@@ -51,6 +51,9 @@ const isDrumPlaying = ref(false)
 const drumPlayer = ref(null)
 const wasBgPlayingBeforeDrum = ref(false)
 
+// 舞狮动画一次性播放状态
+const isPlayingOnce = ref(false)
+
 // 福字点击区域状态
 const sq1ImageVisible = ref(false)
 // 视频播放状态
@@ -192,6 +195,13 @@ onMounted(() => {
     container.classList.add('animate-in')
   }
   
+  // 进入页面后自动播放一次舞狮动画
+  isPlayingOnce.value = true
+  // 动画播放一次后停止（动画时长约0.9秒）
+  setTimeout(() => {
+    isPlayingOnce.value = false
+  }, 900)
+  
   // 等待图片加载完成后测量高度
   const img = backgroundLayerRef.value ? backgroundLayerRef.value.querySelector('.background-image') : null
   if (img) {
@@ -276,16 +286,21 @@ onUnmounted(() => {
     </div>
   
     <!-- 音乐控制按钮 -->
-    <div class="music-control" @click="toggleMusic">
+    <!-- <div class="music-control" @click="toggleMusic">
       <img 
         :src="isDrumPlaying ? '/static/images/icon_music2.png' : '/static/images/icon_music1.png' " 
         alt="音乐控制" 
         class="music-icon"
         :class="{ 'playing': isDrumPlaying }"
       />
-    </div>
+    </div> -->
     
-
+    <!-- 热点点击区域 -->
+    <div class="hotspot-area" @click="toggleMusic">
+      <div class="pulse-indicator">
+        <div class="pulse-circle"></div>
+      </div>
+    </div>
     
     <!-- sq1图片 -->
     <img 
@@ -296,10 +311,10 @@ onUnmounted(() => {
     />
     
     <!-- 舞狮动画 -->
-    <div class="lion-dance" :class="{ 'playing': isDrumPlaying }"></div>
+    <div class="lion-dance" :class="{ 'playing': isDrumPlaying, 'play-once': isPlayingOnce }"></div>
     
     <!-- 视频播放按钮 -->
-    <VideoPlayButton @play="openVideoPlayer" />
+    <VideoPlayButton :position="{ bottom: '30rpx', right: '11rpx' }" @play="openVideoPlayer" />
     
     <!-- 视频播放器弹窗 -->
     <VideoPlayerModal :video-url="props.videoUrl" :visible="showVideoPlayer" @close="closeVideoPlayer" />
@@ -336,190 +351,6 @@ onUnmounted(() => {
   object-fit: contain;
 }
 
-/* 增强动效层 */
-.enhancement-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-/* 灯笼增强动效 */
-.lanterns {
-  position: absolute;
-  top: 15%;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 0 30px;
-  box-sizing: border-box;
-}
-
-.lantern {
-  font-size: 2.5rem;
-  animation: swing 3s infinite ease-in-out;
-  opacity: 0.9;
-  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
-  color: #ffd700;
-}
-
-.left-lantern {
-  animation-delay: 0s;
-}
-
-.right-lantern {
-  animation-delay: 1.5s;
-}
-
-@keyframes swing {
-  0%, 100% { transform: rotate(-10deg); }
-  50% { transform: rotate(10deg); }
-}
-
-/* 福字增强动效 */
-.fu-word {
-  position: absolute;
-  top: 30%;
-  left: 65%;
-  transform: translateX(-50%) rotate(15deg);
-  font-size: 2rem;
-  color: #ffd700;
-  text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.9);
-  animation: float 4s infinite ease-in-out;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateX(-50%) rotate(15deg) translateY(0); }
-  50% { transform: translateX(-50%) rotate(15deg) translateY(-15px); }
-}
-
-/* 点击指示器 */
-.click-indicator {
-  position: absolute;
-  top: 55%;
-  left: 75%;
-  transform: translate(-50%, -50%);
-  width: 60px;
-  height: 60px;
-  pointer-events: none;
-}
-
-.pulse-circle {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: rgba(255, 215, 0, 0.3);
-  border: 2px solid rgba(255, 215, 0, 0.6);
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.click-indicator.animate-pulse {
-  display: block;
-}
-
-/* 大鼓交互区域 */
-.drum-interactive-area {
-  position: absolute;
-  top: 55%;
-  right: 15%;
-  width: 120px;
-  height: 100px;
-  cursor: pointer;
-  z-index: 20;
-}
-
-/* 响应式调整交互区域位置 */
-@media (max-width: 640px) {
-  .drum-interactive-area {
-    top: 52%;
-    right: 10%;
-    width: 100px;
-    height: 80px;
-  }
-}
-
-/* 人物元素 */
-.character {
-  position: absolute;
-  font-size: 3rem;
-  pointer-events: none;
-  z-index: 20;
-  transition: top 0.1s linear;
-  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
-  animation: walk 1s infinite alternate;
-}
-
-@keyframes walk {
-  0% {
-    transform: translate(-50%, -50%) scale(1);
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1.1);
-  }
-}
-
-/* 烟花效果 */
-.fireworks {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 20;
-  animation: fadeIn 0.5s ease;
-}
-
-.firework {
-  position: absolute;
-  font-size: 2rem;
-  opacity: 0;
-  animation: firework 3s infinite;
-}
-
-.firework-1 {
-  top: 10%;
-  left: 20%;
-  animation-delay: 0s;
-}
-
-.firework-2 {
-  top: 15%;
-  right: 25%;
-  animation-delay: 1s;
-}
-
-.firework-3 {
-  top: 8%;
-  right: 15%;
-  animation-delay: 2s;
-}
-
-.firework-4 {
-  top: 12%;
-  left: 25%;
-  animation-delay: 3s;
-}
-
-@keyframes firework {
-  0%, 100% { opacity: 0; transform: scale(0); }
-  50% { opacity: 1; transform: scale(1.5); }
-}
-
 /* 音乐控制按钮 */
 .music-control {
   position: absolute;
@@ -565,27 +396,6 @@ onUnmounted(() => {
   animation: fadeIn 0.5s ease;
 }
 
-/* 福印收集标记 */
-.seal-collected-mark {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background-color: rgba(255, 107, 53, 0.9);
-  color: #fff;
-  padding: 10px 15px;
-  border-radius: 20px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  animation: fadeIn 0.5s ease;
-  z-index: 30;
-}
-
-.seal-icon {
-  font-size: 20px;
-}
-
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(-20px); }
   to { opacity: 1; transform: translateY(0); }
@@ -619,6 +429,10 @@ onUnmounted(() => {
   animation: lionDance 0.9s infinite;
 }
 
+.lion-dance.play-once {
+  animation: lionDance 0.9s;
+}
+
 @keyframes lionDance {
   0%, 16.66% { background-image: url('/static/animate/lion/lion1.png'); }
   16.67%, 33.33% { background-image: url('/static/animate/lion/lion2.png'); }
@@ -628,19 +442,49 @@ onUnmounted(() => {
   83.34%, 100% { background-image: url('/static/animate/lion/lion6.png'); }
 }
 
-/* 响应式设计 */
+/* 热点点击区域 */
-@media (max-width: 640px) {
+.hotspot-area {
-  .fu-word {
+  position: absolute;
-    font-size: 1.5rem;
+  left: 465rpx; 
+  top: 780rpx;
+  width: 150rpx;
+  height: 150rpx;
+  cursor: pointer;
+  z-index: 25;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 脉冲动效 */
+.pulse-indicator {
+  position: relative;
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.pulse-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(255, 215, 0, 0.4);
+  border: 3rpx solid rgba(255, 215, 0, 0.8);
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0.8;
   }
-  
+  100% {
-  .lantern {
+    transform: translate(-50%, -50%) scale(2);
-    font-size: 2rem;
+    opacity: 0;
-  }
-  
-  .drum-interactive-area {
-    width: 100px;
-    height: 80px;
   }
 }
+
 </style>

components/SinglePageContainer.vue

@@ -1182,7 +1182,7 @@ onUnmounted(() => {
 
 .new-year-text {
   display: inline-block;
-  width: 598rpx;
+  width: 515rpx;
   height: auto;
   object-fit: contain;
 }

components/VideoPlayButton.vue

@@ -1,24 +1,30 @@
 <script setup>
-import { defineEmits } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+
+// 组件属性
+const props = defineProps({
+  // 按钮位置
+  position: {
+    type: Object,
+    default: () => ({
+      bottom: '150rpx',
+      right: '11rpx'
+    })
+  }
+})
 
 // 组件事件
 const emit = defineEmits(['play'])
 
-// 处理播放按钮点击
+// 点击播放按钮
-const handlePlayClick = () => {
+const handlePlay = () => {
   emit('play')
 }
 </script>
 
 <template>
-  <div class="video-play-button-container" @click="handlePlayClick">
+  <div class="video-play-button-container" :style="position" @click="handlePlay">
-    <!-- 背景层，单独进行呼吸动画 -->
+    <img src="/static/images/btn_video.png" alt="播放视频" class="video-button" />
-    <div class="video-play-button-bg"></div>
-    <!-- 内容层，保持静态 -->
-    <div class="video-play-button-content">
-      <img src="/static/images/icon_music1.png" alt="播放视频" class="video-icon" />
-      <span class="video-text">观看视频</span>
-    </div>
   </div>
 </template>
 
@@ -26,69 +32,20 @@ const handlePlayClick = () => {
 /* 视频播放按钮容器 */
 .video-play-button-container {
   position: absolute;
-  bottom: 100rpx;
+  width: 146rpx;
-  right: 5rpx;
+  height: 174rpx;
-  width: 120rpx;
-  height: 120rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   z-index: 50;
   cursor: pointer;
 }
 
-/* 背景层，单独进行呼吸动画 */
+.video-button {
-.video-play-button-bg {
+  width: 146rpx;
-  position: absolute;
+  height: 174rpx;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.3);
-  transition: all 0.3s ease;
-  animation: breathe 2s infinite ease-in-out;
-}
-
-/* 内容层，保持静态 */
-.video-play-button-content {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
 }
 
 /* 鼠标悬停效果 */
-.video-play-button-container:hover .video-play-button-bg {
+.video-play-button-container:hover .video-button {
-  background-color: rgba(0, 0, 0, 0.4);
   transform: scale(1.05);
-  animation: none;
+  transition: transform 0.3s ease;
-}
-
-.video-icon {
-  width: 40rpx;
-  height: 40rpx;
-  margin-bottom: 10rpx;
-}
-
-.video-text {
-  font-size: 24rpx;
-  color: white;
-  text-align: center;
-}
-
-/* 呼吸动画 */
-@keyframes breathe {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 0.8;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 1;
-  }
 }
 </style>

components/WangfujingScene.vue

@@ -147,10 +147,11 @@ onMounted(() => {
     />
     
     <!-- 热点点击区域1 -->
-    <div class="hotspot-area" style="right:20rpx; top: 950rpx;" @click="openGallery(0)">
+    <div class="hotspot-area" @click="openGallery(0)">
       <div class="pulse-indicator">
         <div class="pulse-circle"></div>
       </div>
+      <div class="hotspot-text">点击查看王府井新年照片</div>
     </div>
     
     <!-- 图片浏览器弹窗 -->
@@ -232,22 +233,13 @@ onMounted(() => {
   animation: fadeIn 0.5s ease;
 }
 
-/* 响应式设计 */
+
-@media (max-width: 640px) {
-  .hotspot-area {
-    width: 120rpx;
-    height: 120rpx;
-  }
-  
-  .pulse-indicator {
-    width: 80rpx;
-    height: 80rpx;
-  }
-}
 
 /* 热点点击区域 */
 .hotspot-area {
   position: absolute;
+  right:100rpx; 
+  top: 950rpx;
   width: 150rpx;
   height: 150rpx;
   cursor: pointer;
@@ -288,4 +280,20 @@ onMounted(() => {
   }
 }
 
+/* 热点文字提示 */
+.hotspot-text {
+  position: absolute;
+  bottom: -40rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 24rpx;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  white-space: nowrap;
+  z-index: 30;
+  text-align: center;
+}
+
 </style>