feat(views): 实现进度条动态高度计算和响应式布局优化

添加进度条动态高度计算逻辑，使用ref获取DOM实际高度
实现响应式布局适配不同屏幕尺寸，包括移动端优化
移除硬编码高度值，改为基于容器实际高度计算
添加窗口大小变化监听，实时更新布局

src/views/zhongchou/index.vue

@@ -70,7 +70,7 @@
               </div>
             </div>
             <!-- 进度条背景 -->
-            <div class="progress-bar">
+            <div class="progress-bar" ref="progressBarRef">
               <div class="progress-fill blue-progress"
                 :style="{ height: getProgressHeight(remainingMinutes.us) + '%' }"></div>
             </div>
@@ -100,7 +100,7 @@
           <!-- 优化后的进度条容器 -->
           <div class="rocket-container">
             <!-- 进度条背景 -->
-            <div class="progress-bar">
+            <div class="progress-bar" ref="progressBarRef">
               <div class="progress-fill red-progress" :style="{ height: getProgressHeight(remainingMinutes.hk) + '%' }">
               </div>
             </div>
@@ -125,7 +125,7 @@
   </div>
 </template>
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 
 // 剩余分钟数据 - 支持后端传入，可配置默认值
 const remainingMinutes = ref({
@@ -139,69 +139,73 @@ const stockNames = ref({
   hk: '港股'   // 港股名称，默认"港股"
 })
 
-// 从后端获取数据的函数 - 修改为使用默认数据
-// const fetchRemainingMinutes = async () => {
-//   // 注释掉原来的API调用
-//   // const response = await fetch('/api/remaining-minutes')
-//   // const data = await response.json()
-  
-//   // 使用默认测试数据
-//   const data = {
-//     us: 10,      // 美股剩余分钟
-//     hk: 8,       // 港股剩余分钟
-//     usName: '美股', // 美股名称
-//     hkName: '港股'  // 港股名称
-//   }
-
-//   // 更新剩余时间数据
-//   remainingMinutes.value = {
-//     us: data.us !== undefined ? data.us : remainingMinutes.value.us,
-//     hk: data.hk !== undefined ? data.hk : remainingMinutes.value.hk
-//   }
-
-//   // 更新股票名称数据
-//   stockNames.value = {
-//     us: data.usName !== undefined ? data.usName : stockNames.value.us,
-//     hk: data.hkName !== undefined ? data.hkName : stockNames.value.hk
-//   }
-// }
-
-// 组件挂载时获取数据
-// onMounted(() => {
-//   fetchRemainingMinutes()
-// })
+// 进度条高度动态获取
+const progressBarRef = ref(null)
+const progressBarHeight = ref(0)
+
+// 获取响应式兜底高度的函数
+const getResponsiveFallbackHeight = () => {
+  if (window.innerWidth <= 768) {
+    return 200
+  } else if (window.innerWidth <= 1200) {
+    return 250  
+  } else if (window.innerWidth <= 1600) {
+    return 300
+  }
+  return 400 // 基础分辨率兜底值
+}
+
+// 更新进度条高度的函数
+const updateProgressBarHeight = () => {
+  if (progressBarRef.value) {
+    progressBarHeight.value = progressBarRef.value.offsetHeight
+  }
+}
+
+onMounted(() => {
+  nextTick(() => {
+    updateProgressBarHeight()
+    
+    // 添加窗口大小改变监听
+    window.addEventListener('resize', () => {
+      nextTick(() => {
+        updateProgressBarHeight()
+      })
+    })
+  })
+})
 
 // 时间刻度标记 - 从小到大排列
 const timeMarkers = computed(() => {
   return [0, 3, 6, 9, 12, 15]
 })
 
-// 获取刻度标记位置 - 修正为从上到下从小到大
+// 获取刻度标记位置 - 基于容器实际高度
 const getMarkerPosition = (marker) => {
   const maxMinutes = 15
-  const progressHeight = 600 // 进度条总高度
-  // 修正计算：最大值在顶部，最小值在底部
-  return progressHeight - (marker / maxMinutes) * progressHeight
+  const height = progressBarHeight.value || getResponsiveFallbackHeight()
+  
+  // 使用bottom定位时的正确逻辑：
+  // 0分钟在顶部 -> bottom: height
+  // 15分钟在底部 -> bottom: 0
+  return height - (marker / maxMinutes) * height
 }
 
 // 获取进度条高度百分比 - 修正逻辑
 const getProgressHeight = (minutes) => {
   const maxMinutes = 15
   // 反向计算：剩余时间越多，进度条越空
-  // minutes = 15 时，返回 0%（空的）
+  // // minutes = 15 时，返回 0%（空的）
   // minutes = 0 时，返回 100%（满的）
   return Math.max(100 - (minutes / maxMinutes) * 100, 0)
 }
 
-// 获取火箭位置 - 与进度条填充高度对齐
+// 获取火箭位置 - 与进度条填充高度对齐，基于容器实际高度
 const getRocketPosition = (minutes) => {
   const maxMinutes = 15
-  const progressHeight = 600 // 进度条总高度
-  // 反向计算：剩余时间越多，火箭越低
-  // minutes = 15 时，火箭在底部（0px）
-  // minutes = 0 时，火箭在顶部（700px）
+  const height = progressBarHeight.value || getResponsiveFallbackHeight()
   const currentProgress = Math.max(1 - (minutes / maxMinutes), 0)
-  return currentProgress * progressHeight
+  return currentProgress * height
 }
 
 // 数字显示（直接返回数字）
@@ -209,17 +213,6 @@ const numberToChinese = (num) => {
   return num.toString()
 }
 
-// 暴露更新函数，供外部调用
-// defineExpose({
-//   updateRemainingMinutes: (data) => {
-//     remainingMinutes.value = {
-//       us: data.us || 5,
-//       hk: data.hk || 5
-//     }
-//   },
-//   fetchRemainingMinutes
-// })
-
 // 添加选中状态管理
 const selectedSection = ref(null) // 'us' | 'hk' | null
 
@@ -277,20 +270,15 @@ const handleSectionClick = (section) => {
 }
 
 .activity-title {
-  /* 增大字体尺寸，更加大气 */
-  font-size: 5.8em;
-
-  /* 使用更粗的字体权重 */
+  /* 使用vw单位实现响应式缩放，同时设置最小和最大值 */
+  font-size: clamp(2.5rem, 8vw, 5.8rem);
   font-weight: 900;
-
-  /* 选择更大气的字体 */
   font-family: 'Impact', 'Arial Black', 'Microsoft YaHei', sans-serif;
-
   margin-top: 39px;
   margin-bottom: -5px;
-
+  
   /* 按照指定颜色从下到上渐变 */
- background: linear-gradient(180deg, 
+  background: linear-gradient(180deg, 
     #87eefe 0%,     /* 顶部 - 最浅蓝 */
     #86e7fd 16.67%, /* 更浅蓝 */
     #80d7fd 33.33%, /* 浅蓝 */
@@ -302,17 +290,17 @@ const handleSectionClick = (section) => {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-
+  
   /* 精细的白色描边 */
   -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
   text-stroke: 1px rgba(255, 255, 255, 0.8);
-
+  
   /* 简单的立体阴影，不发光 */
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-
-  /* 增加字符间距，更加大气 */
-  letter-spacing: 4px;
-
+  
+  /* 字符间距也要响应式调整 */
+  letter-spacing: clamp(1px, 0.5vw, 4px);
+  
   /* 保持大写 */
   text-transform: uppercase;
 }
@@ -320,50 +308,43 @@ const handleSectionClick = (section) => {
 
 
 .activity-period {
-
   margin-top: 30px;
-  /* 增加上边距，向下移动 */
   margin-bottom: 10px;
-  /* 增加下边距 */
-  padding: 10px 87px;
+  /* 响应式padding */
+  padding: clamp(8px, 1.5vw, 10px) clamp(40px, 8vw, 87px);
+  
   /* 更透明的玻璃背景 */
   background: linear-gradient(135deg,
       rgba(255, 255, 255, 0.08),
       rgba(255, 255, 255, 0.03));
-
-  /* 更透明的边框 */
+  
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 35px;
-
-  /* 保持玻璃效果但降低强度 */
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-
-  /* 减弱阴影效果 */
+  
   box-shadow:
     0 8px 32px rgba(0, 0, 0, 0.1),
     0 2px 8px rgba(0, 0, 0, 0.05),
     inset 0 1px 0 rgba(255, 255, 255, 0.2),
     inset 0 -1px 0 rgba(255, 255, 255, 0.1);
-
+  
   display: inline-block;
-  font-size: 1.35rem;
+  /* 响应式字体大小 */
+  font-size: clamp(1rem, 2.5vw, 1.35rem);
   font-weight: 600;
   font-family: 'SF Pro Display', 'Microsoft YaHei', sans-serif;
-
-  /* 文字颜色和轻微发光效果 */
+  
   color: rgba(255, 255, 255, 0.95);
   text-shadow:
-    0 0 8px rgba(255, 255, 255, 0.4),   /* 主要白色发光 */
-    0 0 16px rgba(255, 255, 255, 0.2),  /* 扩散发光 */
-    0 0 24px rgba(255, 255, 255, 0.1),  /* 外围柔和发光 */
-    0 1px 2px rgba(0, 0, 0, 0.3);       /* 立体阴影 */
-
+    0 0 8px rgba(255, 255, 255, 0.4),
+    0 0 16px rgba(255, 255, 255, 0.2),
+    0 0 24px rgba(255, 255, 255, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.3);
+  
   position: relative;
   overflow: hidden;
   letter-spacing: 0.5px;
-
-  /* 平滑过渡 */
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -553,10 +534,6 @@ const handleSectionClick = (section) => {
   /* font-size: 24px; 移除字体大小 */
   filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
   animation: rocketFloat 2s ease-in-out infinite alternate;
-  width: 150px;
-  /* 设置图片宽度 */
-  height: 150px;
-  /* 设置图片高度 */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -579,17 +556,9 @@ const handleSectionClick = (section) => {
   }
 }
 
-/* 优化后的火箭容器：包含进度条和相关元素 */
-.rocket-container {
-  position: absolute;
-  width: 100px;
-
-  height: 600px;
-  margin: 30px 0;
-}
-
 /* 左侧容器定位 - 调整垂直偏移 */
 .left-section .rocket-container {
+  position: absolute;
   left: 80px;
   top: 50%;
   transform: translateY(calc(-50% - 50px));
@@ -598,6 +567,7 @@ const handleSectionClick = (section) => {
 
 /* 右侧容器定位 - 调整垂直偏移 */
 .right-section .rocket-container {
+  position: absolute;
   right: 80px;
   top: 50%;
   transform: translateY(calc(-50% - 50px));
@@ -611,12 +581,6 @@ const handleSectionClick = (section) => {
   /* 改回底部对齐，与填充部分一致 */
   left: 50%;
   transform: translateX(-50%);
-  width: 30px;
-  height: 600px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 15px;
-  overflow: hidden;
-  z-index: 5;
 }
 
 /* 优化后的时间刻度标记容器 - 改为顶部对齐 */
@@ -624,9 +588,6 @@ const handleSectionClick = (section) => {
   position: absolute;
   right: calc(50% + 15px);
   bottom: 0;
-  height: 600px;
-  width: 80px;
-  z-index: 15;
 }
 
 /* 右侧刻度标记也改回底部对齐 */
@@ -635,7 +596,6 @@ const handleSectionClick = (section) => {
   left: calc(50% + 15px);
   bottom: 0;
   /* 改回底部对齐 */
-  height: 600px;
 }
 
 /* 左侧刻度文字样式 */
@@ -733,31 +693,8 @@ const handleSectionClick = (section) => {
 
 
 
-/* 单个刻度标记 - 确保垂直居中对齐 */
-.marker {
-  position: absolute;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  height: 0px;
-  transform: translateY(-50%);
-}
-
-/* 左侧刻度文字对齐 */
-.time-markers .marker {
-  justify-content: flex-end;
-  /* 左侧刻度右对齐 */
-}
-
-/* 右侧刻度文字对齐 */
-.right-markers .marker {
-  justify-content: flex-start;
-  /* 右侧刻度左对齐 */
-}
-
 /* 优化后的刻度文字样式 */
 .marker-text {
-  font-size: 25px;
   font-weight: bold;
   font-family: 'Arial Black', sans-serif;
 
@@ -770,8 +707,8 @@ const handleSectionClick = (section) => {
   background-clip: text;
 
   /* 数字轮廓效果 */
-  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
-  text-stroke: 1px rgba(255, 255, 255, 0.6);
+  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.6);
+  text-stroke: 1.5px rgba(255, 255, 255, 0.6);
 
   /* 玻璃泡泡阴影效果 */
   text-shadow:
@@ -780,10 +717,6 @@ const handleSectionClick = (section) => {
     0 2px 4px rgba(255, 255, 255, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.2);
 
-  /* 玻璃质感
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px); */
-
   /* 轻微的发光边缘 */
   filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
 
@@ -795,14 +728,14 @@ const handleSectionClick = (section) => {
 }
 
 /* 左侧刻度文字样式 */
-.time-markers .marker-text {
-  padding-right: 10px;
+time-markers.time-markers .marker-text {
+  padding-right: 5px;
   /* 减少右边距，让刻度更靠近进度条 */
 }
 
 /* 右侧刻度文字样式 */
 .right-markers .marker-text {
-  padding-left: 10px;
+  padding-left: 5px;
   /* 减少左边距，让刻度更靠近进度条 */
 }
 
@@ -864,32 +797,254 @@ const handleSectionClick = (section) => {
   box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
 }
 
-/* 响应式设计 */
+/* 基础样式 - 1980x1080分辨率 */
+.rocket-container {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  width: 200px;
+  height: 60vh;
+  min-height: 400px;
+  margin: 30px auto;
+}
+
+.progress-bar {
+  
+  width: 30px;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 15px;
+  overflow: hidden;
+  z-index: 5;
+}
+
+.time-markers {
+  position: absolute;
+  right: calc(50% + 15px + 5px); /* 相对于rocket-container中心，进度条宽度的一半 + 间距 */
+  top: 0;
+  height: 100%;
+  width: 80px;
+  z-index: 15;
+}
+
+.right-markers {
+  position: absolute;
+  left: calc(50% + 15px + 5px); /* 相对于rocket-container中心，进度条宽度的一半 + 间距 */
+  top: 0;
+  height: 100%;
+  width: 80px;
+  z-index: 15;
+}
+
+.marker {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 0;
+  transform: translateY(-50%);
+}
+
+.time-markers .marker {
+  justify-content: flex-end;
+}
+
+.right-markers .marker {
+  justify-content: flex-start;
+}
+
+.marker-text {
+  font-size: 1.5vw;
+  min-font-size: 16px;
+  max-font-size: 24px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+  padding: 0 5px;
+  z-index: 17;
+  position: relative;
+}
+
+.rocket {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 20;
+  transition: bottom 0.5s ease;
+}
+
+.rocket-image {
+  width: 4vw;
+  height: 4vw;
+  min-width: 40px;
+  min-height: 40px;
+  max-width: 80px;
+  max-height: 80px;
+}
+
+/* 1600px以下分辨率适配 */
+@media (max-width: 1600px) {
+  .rocket-container {
+    width: 150px;
+    height: 50vh;
+    min-height: 300px;
+  }
+  
+  .progress-bar {
+    width: 24px;
+  }
+  
+  .time-markers,
+  .right-markers {
+    width: 60px;
+  }
+  
+  .marker-text {
+    font-size: 1.2vw;
+    min-font-size: 14px;
+    max-font-size: 20px;
+  }
+  
+  .rocket-image {
+    width: 3vw;
+    height: 3vw;
+    min-width: 30px;
+    min-height: 30px;
+    max-width: 60px;
+    max-height: 60px;
+  }
+}
+
+/* 1200px以下分辨率适配 */
+@media (max-width: 1200px) {
+  .rocket-container {
+    width: 120px;
+    height: 40vh;
+    min-height: 250px;
+  }
+  
+  .progress-bar {
+    width: 20px;
+  }
+  
+  .time-markers,
+  .right-markers {
+    width: 50px;
+  }
+  
+  .marker-text {
+    font-size: 14px;
+  }
+  
+  .rocket-image {
+    width: 35px;
+    height: 35px;
+  }
+}
+
+/* 768px以下移动端适配 */
 @media (max-width: 768px) {
-  .main-content {
-    gap: 50px;
-    padding: 0 20px;
+  .zhongchou-container {
+    padding: 0;
+    min-width: 320px;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  .activity-header {
+    padding: 20px 5px 10px;
   }
 
+  .activity-period {
+    font-size: 1rem;
+    padding: 6px 20px;
+    margin-top: 10px;
+    margin-bottom: 5px;
+  }
+  .main-content {
+    flex-direction: column;
+    gap: 20px;
+    padding: 0 5px;
+    height: auto;
+    min-height: 0;
+  }
+  .stock-section {
+    width: 100%;
+    height: auto;
+    margin: 0;
+    justify-content: center;
+    align-items: stretch;
+  }
   .stock-card {
-    max-width: 100%;
     width: 100%;
+    min-width: 0;
+    min-height: 200px;
+    padding: 20px 5px;
+    margin-top: 0;
+    box-sizing: border-box;
   }
-
-  .activity-title {
-    font-size: 1.8rem;
+  .rocket-container {
+    width: 100px;
+    height: 200px;
+    min-height: 200px;
   }
+  
+  .progress-bar {
+    width: 16px;
+  }
+  
+  .time-markers,
+  .right-markers {
+    width: 40px;
+  }
+  
+  .marker-text {
+    font-size: 12px;
+  }
+  
+  .rocket-image {
+    width: 25px;
+    height: 25px;
+  }
+  .boost-btn {
+    width: 90vw;
+    min-width: 120px;
+    max-width: 300px;
+    font-size: 1rem;
+    padding: 10px 0;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 10px;
+  }
+  .stock-header h3 {
+    font-size: 1rem;
+  }
+}
 
+/* 480px以下小屏幕适配 */
+@media (max-width: 480px) {
   .rocket-container {
-    height: 400px;
+    width: 80px;
+    height: 150px;
+    min-height: 150px;
   }
-
+  
   .progress-bar {
-    height: 400px;
+    width: 12px;
   }
-
-  .time-markers {
-    height: 400px;
+  
+  .time-markers,
+  .right-markers {
+    width: 30px;
+  }
+  
+  .marker-text {
+    font-size: 10px;
+  }
+  
+  .rocket-image {
+    width: 20px;
+    height: 20px;
   }
 }
 
@@ -1098,64 +1253,7 @@ const handleSectionClick = (section) => {
   }
 }
 
-/* 优化后的火箭容器：包含进度条和相关元素 */
-.rocket-container {
-  position: absolute;
-  width: 100px;
-
-  height: 600px;
-  margin: 30px 0;
-}
-
-/* 左侧容器定位 - 调整垂直偏移 */
-.left-section .rocket-container {
-  left: 80px;
-  top: 50%;
-  transform: translateY(calc(-50% - 50px));
-  /* 在居中基础上再向上移动50px */
-}
 
-/* 右侧容器定位 - 调整垂直偏移 */
-.right-section .rocket-container {
-  right: 80px;
-  top: 50%;
-  transform: translateY(calc(-50% - 50px));
-  /* 在居中基础上再向上移动50px */
-}
-
-/* 优化后的进度条背景 - 改为顶部对齐 */
-.progress-bar {
-  position: absolute;
-  bottom: 0;
-  /* 改回底部对齐，与填充部分一致 */
-  left: 50%;
-  transform: translateX(-50%);
-  width: 30px;
-  height: 600px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 15px;
-  overflow: hidden;
-  z-index: 5;
-}
-
-/* 优化后的时间刻度标记容器 - 改为顶部对齐 */
-.time-markers {
-  position: absolute;
-  right: calc(50% + 15px);
-  bottom: 0;
-  height: 600px;
-  width: 80px;
-  z-index: 15;
-}
-
-/* 右侧刻度标记也改回底部对齐 */
-.right-markers {
-  right: auto;
-  left: calc(50% + 15px);
-  bottom: 0;
-  /* 改回底部对齐 */
-  height: 600px;
-}
 
 /* 左侧刻度文字样式 */
 .time-markers .marker-text {
@@ -1252,66 +1350,7 @@ const handleSectionClick = (section) => {
 
 
 
-/* 单个刻度标记 - 确保垂直居中对齐 */
-.marker {
-  position: absolute;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  height: 0px;
-  transform: translateY(-50%);
-}
 
-/* 左侧刻度文字对齐 */
-.time-markers .marker {
-  justify-content: flex-end;
-  /* 左侧刻度右对齐 */
-}
-
-/* 右侧刻度文字对齐 */
-.right-markers .marker {
-  justify-content: flex-start;
-  /* 右侧刻度左对齐 */
-}
-
-/* 优化后的刻度文字样式 */
-.marker-text {
-  font-size: 25px;
-  font-weight: bold;
-  font-family: 'Arial Black', sans-serif;
-
-  /* 透明玻璃效果 */
-  color: transparent;
-  background: linear-gradient(135deg,
-      rgba(255, 255, 255, 0.1),
-      rgba(255, 255, 255, 0.05));
-  -webkit-background-clip: text;
-  background-clip: text;
-
-  /* 数字轮廓效果 */
-  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.6);
-  text-stroke: 1.5px rgba(255, 255, 255, 0.6);
-
-  /* 玻璃泡泡阴影效果 */
-  text-shadow:
-    0 0 10px rgba(255, 255, 255, 0.3),
-    0 0 20px rgba(255, 255, 255, 0.2),
-    0 2px 4px rgba(255, 255, 255, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-
-  /* 玻璃质感
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px); */
-
-  /* 轻微的发光边缘 */
-  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
-
-  /* 关键修复：创建独立的堆叠上下文，避免容器backdrop-filter影响 */
-  isolation: isolate;
-
-  z-index: 17;
-  position: relative;
-}
 
 /* 左侧刻度文字样式 */
 .time-markers .marker-text {
@@ -1385,34 +1424,7 @@ const handleSectionClick = (section) => {
   box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
 }
 
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .main-content {
-    gap: 50px;
-    padding: 0 20px;
-  }
-
-  .stock-card {
-    max-width: 100%;
-    width: 100%;
-  }
-
-  .activity-title {
-    font-size: 1.8rem;
-  }
 
-  .rocket-container {
-    height: 400px;
-  }
-
-  .progress-bar {
-    height: 400px;
-  }
-
-  .time-markers {
-    height: 400px;
-  }
-}
 
 /* 股票板块基础样式 */
 .stock-section {
@@ -1635,4 +1647,6 @@ const handleSectionClick = (section) => {
     padding: 15px;
   }
 }
+
+
 </style>