diff --git a/src/assets/activity-sticker.png b/src/assets/activity-sticker.png
new file mode 100644
index 0000000..ae3fe25
Binary files /dev/null and b/src/assets/activity-sticker.png differ
diff --git a/src/assets/earth.jpg b/src/assets/earth.jpg
new file mode 100644
index 0000000..f09da3f
Binary files /dev/null and b/src/assets/earth.jpg differ
diff --git a/src/assets/rocket.gif b/src/assets/rocket.gif
new file mode 100644
index 0000000..d684c9c
Binary files /dev/null and b/src/assets/rocket.gif differ
diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue
index 6b7a9b8..9e749d4 100644
--- a/src/views/zhongchou/index.vue
+++ b/src/views/zhongchou/index.vue
@@ -1,13 +1,1631 @@
 <template>
-    <div>
-        众筹
+  <div class="zhongchou-container">
+    <!-- 活动规则按钮 - 右上角 -->
+    <div class="activity-rules-btn" @click="showRules = true">
+      <img src="/src/assets/activity-sticker.png" alt="活动规则" />
     </div>
-</template>
+    
+    <!-- 活动规则弹窗 -->
+    <div v-if="showRules" class="rules-modal" @click="showRules = false">
+      <div class="rules-content" @click.stop>
+        <div class="rules-header">
+          <h2>活动规则</h2>
+          <button class="close-btn" @click="showRules = false">×</button>
+        </div>
+        <div class="rules-body">
+          <div class="rule-item">
+            <span class="rule-number">1、</span>
+            <span class="rule-text">活动时间为2025年7月26日-2025年8月5日。</span>
+          </div>
+          <div class="rule-item">
+            <span class="rule-number">2、</span>
+            <span class="rule-text">每人每天最多1次活动可以参与一次。</span>
+          </div>
+          <div class="rule-item">
+            <span class="rule-number">3、</span>
+            <span class="rule-text">开盘时间为15分钟，每一个人参与助力，即可扣减1分钟。</span>
+          </div>
+          <div class="rule-item">
+            <span class="rule-number">4、</span>
+            <span class="rule-text">助力成功后，对应股票市场开启实时行情数据！</span>
+          </div>
+          <div class="rule-item">
+            <span class="rule-number">5、</span>
+            <span class="rule-text">若时间倒计时结束后，活动助力次数未达到对应的开启实时数据的次数，则该次活动失败。</span>
+          </div>
+        </div>
+        <div class="rules-footer">
+          <button class="confirm-btn" @click="showRules = false">我知道了</button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 活动标题 -->
+    <div class="activity-header">
+      <h1 class="activity-title">助力美/港股 享实时数据</h1>
+      <div class="activity-period" :class="{ 'hidden': selectedSection }">活动时间：2025/07/26~2025/08/05</div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content" :class="{ 'section-selected': selectedSection }">
+      <!-- 左侧美股区域 -->
+      <div class="stock-section left-section" :class="{
+        'selected': selectedSection === 'us',
+        'dimmed': selectedSection && selectedSection !== 'us'
+      }" @click="handleSectionClick('us')">
+        <div class="stock-card blue-card">
+          <div class="stock-header">
+            <h3>距{{ stockNames.us }}实时数据<br>还剩{{ remainingMinutes.us }}分钟</h3>
+          </div>
+          <div class="flag-container">
+            <!-- <div class="us-flag"></div> -->
+          </div>
+          <!-- 优化后的进度条容器 -->
+          <div class="rocket-container">
+            <!-- 时间刻度标记容器 -->
+            <div class="time-markers">
+              <div v-for="(marker, index) in timeMarkers" :key="index" class="marker"
+                :style="{ bottom: getMarkerPosition(marker) + 'px' }">
+                <span class="marker-text">{{ numberToChinese(marker) }}</span>
+              </div>
+            </div>
+            <!-- 进度条背景 -->
+            <div class="progress-bar">
+              <div class="progress-fill blue-progress"
+                :style="{ height: getProgressHeight(remainingMinutes.us) + '%' }"></div>
+            </div>
+            <!-- 火箭图标 - 与进度条填充高度对齐 -->
+            <div class="rocket" :style="{ bottom: getRocketPosition(remainingMinutes.us) + 'px' }">
+              <div class="rocket-image">
+                <img src="/src/assets/rocket.gif" alt="火箭" />
+              </div>
+            </div>
+          </div>
+          <button class="boost-btn blue-btn">点击助力</button>
+        </div>
+      </div>
 
+      <!-- 右侧港股区域 -->
+      <div class="stock-section right-section" :class="{
+        'selected': selectedSection === 'hk',
+        'dimmed': selectedSection && selectedSection !== 'hk'
+      }" @click="handleSectionClick('hk')">
+        <div class="stock-card red-card">
+          <div class="stock-header">
+            <h3>距{{ stockNames.hk }}实时数据<br>还剩{{ remainingMinutes.hk }}分钟</h3>
+          </div>
+          <div class="flag-container">
+            <!-- <div class="hk-flag"></div> -->
+          </div>
+          <!-- 优化后的进度条容器 -->
+          <div class="rocket-container">
+            <!-- 进度条背景 -->
+            <div class="progress-bar">
+              <div class="progress-fill red-progress" :style="{ height: getProgressHeight(remainingMinutes.hk) + '%' }">
+              </div>
+            </div>
+            <!-- 火箭图标 - 与进度条填充高度对齐 -->
+            <div class="rocket" :style="{ bottom: getRocketPosition(remainingMinutes.hk) + 'px' }">
+              <div class="rocket-image">
+                <img src="/src/assets/rocket.gif" alt="火箭" />
+              </div>
+            </div>
+            <!-- 时间刻度标记容器 -->
+            <div class="time-markers right-markers">
+              <div v-for="(marker, index) in timeMarkers" :key="index" class="marker"
+                :style="{ bottom: getMarkerPosition(marker) + 'px' }">
+                <span class="marker-text">{{ numberToChinese(marker) }}</span>
+              </div>
+            </div>
+          </div>
+          <button class="boost-btn red-btn">点击助力</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 <script setup>
+import { ref, computed, onMounted } from 'vue'
+
+// 剩余分钟数据 - 支持后端传入，可配置默认值
+const remainingMinutes = ref({
+  us: 15,  // 美股剩余分钟，可修改默认值
+  hk: 0    // 港股剩余分钟，可修改默认值
+})
+
+// 股票名称数据 - 支持后端传入，默认值为美股港股
+const stockNames = ref({
+  us: '美股',  // 美股名称，默认"美股"
+  hk: '港股'   // 港股名称，默认"港股"
+})
+
+// 从后端获取数据的函数
+const fetchRemainingMinutes = async () => {
+  const response = await fetch('/api/remaining-minutes')
+  const data = await response.json()
+
+  // 更新剩余时间数据
+  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 timeMarkers = computed(() => {
+  return [0, 3, 6, 9, 12, 15]
+})
+
+// 获取刻度标记位置 - 修正为从上到下从小到大
+const getMarkerPosition = (marker) => {
+  const maxMinutes = 15
+  const progressHeight = 600 // 进度条总高度
+  // 修正计算：最大值在顶部，最小值在底部
+  return progressHeight - (marker / maxMinutes) * progressHeight
+}
+
+// 获取进度条高度百分比 - 修正逻辑
+const getProgressHeight = (minutes) => {
+  const maxMinutes = 15
+  // 反向计算：剩余时间越多，进度条越空
+  // 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 currentProgress = Math.max(1 - (minutes / maxMinutes), 0)
+  return currentProgress * progressHeight
+}
+
+// 数字显示（直接返回数字）
+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
+
+// 添加活动规则弹窗状态
+const showRules = ref(false)
+
+// 点击板块的处理函数
+const handleSectionClick = (section) => {
+  if (selectedSection.value === section) {
+    // 如果点击的是已选中的板块，则取消选中
+    selectedSection.value = null
+  } else {
+    // 选中新的板块
+    selectedSection.value = section
+  }
+}
 </script>
 
 <style scoped>
+.zhongchou-container {
+  width: 100vw;
+  height: 100vh;
+  /* 添加earth.jpg作为背景图片 */
+  background-image:
+    linear-gradient(135deg, rgba(10, 26, 58, 0.8) 0%, rgba(26, 43, 90, 0.8) 50%, rgba(10, 26, 58, 0.8) 100%),
+    url('/src/assets/earth.jg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  color: white;
+  padding: 0;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.zhongchou-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.activity-header {
+  text-align: center;
+  padding: 40px 20px 20px;
+  position: relative;
+  z-index: 2;
+}
+
+.activity-title {
+  /* 增大字体尺寸，更加大气 */
+  font-size: 5.8em;
+
+  /* 使用更粗的字体权重 */
+  font-weight: 900;
+
+  /* 选择更大气的字体 */
+  font-family: 'Impact', 'Arial Black', 'Microsoft YaHei', sans-serif;
+
+  margin-top: 39px;
+  margin-bottom: -5px;
+
+  /* 按照指定颜色从下到上渐变 */
+ background: linear-gradient(180deg, 
+    #87eefe 0%,     /* 顶部 - 最浅蓝 */
+    #86e7fd 16.67%, /* 更浅蓝 */
+    #80d7fd 33.33%, /* 浅蓝 */
+    #7cc7fd 50%,    /* 亮蓝 */
+    #77b6fb 66.67%, /* 中蓝 */
+    #789dec 83.33%, /* 蓝紫过渡 */
+    #6e8bf7 100%    /* 底部 - 深蓝紫 */
+  );
+  -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;
+
+  /* 保持大写 */
+  text-transform: uppercase;
+}
+
+
+
+.activity-period {
+
+  margin-top: 30px;
+  /* 增加上边距，向下移动 */
+  margin-bottom: 10px;
+  /* 增加下边距 */
+  padding: 10px 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-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);       /* 立体阴影 */
+
+  position: relative;
+  overflow: hidden;
+  letter-spacing: 0.5px;
+
+  /* 平滑过渡 */
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.activity-period:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.25),
+    0 4px 12px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.activity-period::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.05),
+      transparent 50%,
+      rgba(255, 255, 255, 0.02));
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.main-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 80px;
+  width: 100%;
+  height: calc(100vh - 200px);
+  padding: 0 40px;
+  perspective: 2000px;
+  position: relative;
+  z-index: 2;
+  box-sizing: border-box;
+
+}
+
+.stock-section {
+  flex: 0 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 股票卡片容器样式 */
+.stock-card {
+  /* 半透明白色背景，营造玻璃质感 */
+  background: rgba(255, 255, 255, 0.1);
+
+  /* 圆角边框，增加现代感 */
+  border-radius: 20px;
+
+  /* 内边距，为内容提供合适的空间 */
+  padding: 50px 40px;
+
+  /* 背景模糊效果，增强玻璃质感 */
+  backdrop-filter: blur(10px);
+
+  /* 半透明边框，与背景呼应 */
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  /* 相对定位，为子元素绝对定位提供参考 */
+  position: relative;
+
+  /* 允许内容溢出显示，确保进度条和刻度完全可见 */
+  overflow: visible;
+
+  /* 固定宽度，保持布局一致性 */
+  width: 650px;
+
+  /* 最小高度，确保卡片有足够的显示空间 */
+  min-height: 320px;
+
+  /* 3D变换效果，创建立体视觉 */
+  transform: perspective(1500px) rotateY(0deg) rotateX(-2deg) translateZ(10px);
+
+  /* 保持3D变换样式 */
+  transform-style: preserve-3d;
+
+  /* 多层阴影效果，增强立体感和深度 */
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.3),
+    /* 主要阴影 */
+    0 10px 20px rgba(0, 0, 0, 0.2),
+    /* 次要阴影 */
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  /* 内部高光 */
+
+  /* 平滑过渡动画，提升交互体验 */
+  transition: transform 0.3s ease;
+  margin-top: -270px;
+  /* 负值向上移动，正值向下移动 */
+}
+
+/* 主要内容区域也需要允许溢出 */
+.main-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 280px;
+  width: 100%;
+  height: calc(100vh - 200px);
+  padding: 0 20px;
+  perspective: 2000px;
+  position: relative;
+  z-index: 2;
+  box-sizing: border-box;
+  overflow: visible;
+  /* 确保主容器也允许内容溢出 */
+}
+
+/* 股票区域容器 */
+.stock-section {
+  flex: 0 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+  margin-top: 0px;
+  margin-bottom: 0px;
+
+  /* 设置固定高度 */
+  height: 600px;
+  /* 根据需要调整高度值 */
+}
+
+/* 左侧美股卡片特殊3D效果 */
+.left-section .stock-card {
+  transform: perspective(1500px) rotateY(20deg) rotateX(2deg) translateZ(-10px);
+}
+
+/* 右侧港股卡片特殊3D效果 */
+.right-section .stock-card {
+  transform: perspective(1500px) rotateY(-20deg) rotateX(-2deg) translateZ(10px);
+}
+
+/* 卡片悬停效果 */
+.stock-card:hover {
+  transform: perspective(1500px) rotateY(0deg) rotateX(0deg) translateZ(20px) scale(1.02);
+}
+
+.left-section .stock-card:hover {
+  transform: perspective(500px) rotateY(2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+}
+
+.right-section .stock-card:hover {
+  transform: perspective(500px) rotateY(-2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+}
+
+.blue-card {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.red-card {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.stock-header h3 {
+  font-size: 1.2rem;
+  margin: 0 0 20px 0;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.flag-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.rocket {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(50%);
+  z-index: 20;
+  transition: bottom 0.5s ease;
+}
+
+/* 火箭图标样式 */
+.rocket-image {
+  /* 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;
+}
+
+.rocket-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 火箭浮动动画 */
+@keyframes rocketFloat {
+  0% {
+    transform: translateY(0px) rotate(-2deg);
+  }
+
+  100% {
+    transform: translateY(-3px) rotate(2deg);
+  }
+}
+
+/* 优化后的火箭容器：包含进度条和相关元素 */
+.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 {
+  padding-right: 15px;
+  /* 适当距离进度条 */
+}
+
+/* 右侧刻度文字样式 */
+.right-markers .marker-text {
+  padding-left: 15px;
+  /* 适当距离进度条 */
+}
+
+/* 横线效果 - 精确连接到进度条边缘 */
+.marker-text::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 15px;
+  height: 3px;
+  background: linear-gradient(to right,
+      #ff6b6b 0%,
+      #4ecdc4 50%,
+      #45b7d1 100%);
+  transform: translateY(-50%);
+  border-radius: 10px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+  z-index: 18;
+}
+
+/* 左侧横线位置 */
+.time-markers .marker-text::after {
+  right: 0px;
+  /* 连接线从文字右侧延伸到进度条 */
+}
+
+/* 右侧横线位置 */
+.right-markers .marker-text::after {
+  left: 0px;
+  /* 连接线从文字左侧延伸到进度条 */
+}
+
+/* 进度条底部装饰图片 */
+.progress-bottom-image {
+  position: absolute;
+  bottom: -60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  width: 80%;
+  height: 80px;
+}
+
+.progress-bottom-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+
+
+/* 优化后的进度条填充部分：统一渐变效果 */
+.progress-fill {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 6;
+  border-radius: 15px;
+  transition: height 0.5s ease;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+.blue-progress {
+  background: linear-gradient(to top,
+      #16a34a 0%,
+      #22c55e 15%,
+      #fbbf24 35%,
+      #f97316 55%,
+      #84cc16 75%,
+      #ef4444 90%,
+      #dc2626 100%) !important;
+}
+
+.red-progress {
+  background: linear-gradient(to top,
+      #16a34a 0%,
+      #22c55e 15%,
+      #fbbf24 35%,
+      #f97316 55%,
+      #84cc16 75%,
+      #ef4444 90%,
+      #dc2626 100%) !important;
+}
+
+
+
+/* 单个刻度标记 - 确保垂直居中对齐 */
+.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: 1px rgba(255, 255, 255, 0.6);
+  text-stroke: 1px 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 {
+  padding-right: 10px;
+  /* 减少右边距，让刻度更靠近进度条 */
+}
+
+/* 右侧刻度文字样式 */
+.right-markers .marker-text {
+  padding-left: 10px;
+  /* 减少左边距，让刻度更靠近进度条 */
+}
+
+/* 横线效果 - 精确连接到进度条边缘 */
+.marker-text::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 15px;
+  /* 缩短连接线长度 */
+  height: 3px;
+  background: linear-gradient(to right,
+      #ff6b6b 0%,
+      #4ecdc4 50%,
+      #45b7d1 100%);
+  transform: translateY(-50%);
+  border-radius: 10px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+  z-index: 18;
+}
+
+
+.boost-btn {
+  position: fixed;  /* 改为固定定位，不受父容器变换影响 */
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 25px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-transform: none;
+  z-index: 1001;  /* 确保按钮在最上层 */
+}
+
+.blue-btn {
+  background: linear-gradient(45deg, #3b82f6, #1d4ed8);
+  color: white;
+  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+}
+
+.blue-btn:hover {
+  background: linear-gradient(45deg, #2563eb, #1e40af);
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
+}
+
+.red-btn {
+  background: linear-gradient(45deg, #ef4444, #dc2626);
+  color: white;
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+}
+
+.red-btn:hover {
+  background: linear-gradient(45deg, #dc2626, #b91c1c);
+  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 {
+  cursor: pointer;
+  transition: all 0.8s ease-out;
+  /* 简化为单一缓动 */
+  transform-origin: center;
+}
+
+/* 左侧板块选中时 - 简单飘移 */
+.left-section.selected {
+  transform: translateX(200px) scale(1.5);
+  /* 直接向右飘移 */
+  z-index: 1000;
+  transition: all 0.8s ease-out;
+}
+
+/* 右侧板块选中时 - 简单飘移 */
+.right-section.selected {
+  transform: translateX(-200px) scale(1.5);
+  /* 直接向左飘移 */
+  z-index: 1000;
+  transition: all 0.8s ease-out;
+}
+
+/* 选中状态的卡片样式 - 增强视觉效果 */
+.stock-section.selected .stock-card {
+  transform: scale(1.1);  /* 卡片本身也稍微放大 */
+  box-shadow: 
+    0 25px 50px rgba(0, 0, 0, 0.4),  /* 增强阴影 */
+    0 15px 30px rgba(0, 0, 0, 0.3);
+  transition: all 0.8s ease-out;
+}
+
+/* 未选中板块简单淡化 */
+.stock-section.dimmed {
+  opacity: 0.2;
+  transform: scale(0.8);
+  transition: all 0.8s ease-out;
+}
+
+/* 移除复杂的悬浮和点击效果 */
+.stock-section.selected:hover .stock-card {
+  transform: none;
+}
+
+.stock-section.selected:active {
+  transform: translateX(200px) scale(1.45);
+  /* 左侧 */
+}
+
+.right-section.selected:active {
+  transform: translateX(-200px) scale(1.45);
+  /* 右侧 */
+}
+
+/* 活动时间隐藏状态 */
+.activity-period.hidden {
+  opacity: 0;
+  transform: translateY(-20px);
+  pointer-events: none;
+  transition: all 0.4s ease-out;
+}
+
+/* 活动时间正常状态 */
+.activity-period {
+  transition: all 0.4s ease-out;
+}
+
+.activity-period:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.25),
+    0 4px 12px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.activity-period::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.1),
+      transparent 50%,
+      rgba(255, 255, 255, 0.05));
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.main-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 80px;
+  width: 100%;
+  height: calc(100vh - 200px);
+  padding: 0 40px;
+  perspective: 2000px;
+  position: relative;
+  z-index: 2;
+  box-sizing: border-box;
+
+}
+
+.stock-section {
+  flex: 0 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+  margin-top: 0px;
+  margin-bottom: 0px;
+
+  /* 设置固定高度 */
+  height: 600px;
+  /* 根据需要调整高度值 */
+}
+
+/* 左侧美股卡片特殊3D效果 */
+.left-section .stock-card {
+  transform: perspective(1500px) rotateY(20deg) rotateX(2deg) translateZ(-10px);
+}
+
+/* 右侧港股卡片特殊3D效果 */
+.right-section .stock-card {
+  transform: perspective(1500px) rotateY(-20deg) rotateX(-2deg) translateZ(10px);
+}
+
+/* 卡片悬停效果 */
+.stock-card:hover {
+  transform: perspective(1500px) rotateY(0deg) rotateX(0deg) translateZ(20px) scale(1.02);
+}
+
+.left-section .stock-card:hover {
+  transform: perspective(500px) rotateY(2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+}
+
+.right-section .stock-card:hover {
+  transform: perspective(500px) rotateY(-2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+}
+
+.blue-card {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.1) 100%);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.red-card {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.stock-header h3 {
+  font-size: 1.2rem;
+  margin: 0 0 20px 0;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.flag-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.rocket {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(50%);
+  z-index: 20;
+  transition: bottom 0.5s ease;
+}
+
+/* 火箭图标样式 */
+.rocket-image {
+  /* 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;
+}
+
+.rocket-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 火箭浮动动画 */
+@keyframes rocketFloat {
+  0% {
+    transform: translateY(0px) rotate(-2deg);
+  }
+
+  100% {
+    transform: translateY(-3px) rotate(2deg);
+  }
+}
+
+/* 优化后的火箭容器：包含进度条和相关元素 */
+.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 {
+  padding-right: 15px;
+  /* 适当距离进度条 */
+}
+
+/* 右侧刻度文字样式 */
+.right-markers .marker-text {
+  padding-left: 15px;
+  /* 适当距离进度条 */
+}
+
+/* 横线效果 - 精确连接到进度条边缘 */
+.marker-text::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 15px;
+  height: 3px;
+  background: linear-gradient(to right,
+      #ff6b6b 0%,
+      #4ecdc4 50%,
+      #45b7d1 100%);
+  transform: translateY(-50%);
+  border-radius: 10px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+  z-index: 18;
+}
+
+/* 左侧横线位置 */
+.time-markers .marker-text::after {
+  right: 0px;
+  /* 连接线从文字右侧延伸到进度条 */
+}
+
+/* 右侧横线位置 */
+.right-markers .marker-text::after {
+  left: 0px;
+  /* 连接线从文字左侧延伸到进度条 */
+}
+
+/* 进度条底部装饰图片 */
+.progress-bottom-image {
+  position: absolute;
+  bottom: -60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  width: 80%;
+  height: 80px;
+}
+
+.progress-bottom-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+
+
+/* 优化后的进度条填充部分：统一渐变效果 */
+.progress-fill {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 6;
+  border-radius: 15px;
+  transition: height 0.5s ease;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+.blue-progress {
+  background: linear-gradient(to top,
+      #16a34a 0%,
+      #22c55e 15%,
+      #fbbf24 35%,
+      #f97316 55%,
+      #84cc16 75%,
+      #ef4444 90%,
+      #dc2626 100%) !important;
+}
+
+.red-progress {
+  background: linear-gradient(to top,
+      #16a34a 0%,
+      #22c55e 15%,
+      #fbbf24 35%,
+      #f97316 55%,
+      #84cc16 75%,
+      #ef4444 90%,
+      #dc2626 100%) !important;
+}
+
+
+
+/* 单个刻度标记 - 确保垂直居中对齐 */
+.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 {
+  padding-right: 10px;
+  /* 减少右边距，让刻度更靠近进度条 */
+}
+
+/* 右侧刻度文字样式 */
+.right-markers .marker-text {
+  padding-left: 10px;
+  /* 减少左边距，让刻度更靠近进度条 */
+}
+
+/* 横线效果 - 精确连接到进度条边缘 */
+.marker-text::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 15px;
+  /* 缩短连接线长度 */
+  height: 3px;
+  background: linear-gradient(to right,
+      #ff6b6b 0%,
+      #4ecdc4 50%,
+      #45b7d1 100%);
+  transform: translateY(-50%);
+  border-radius: 10px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+  z-index: 18;
+}
+
+
+.boost-btn {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  /* 固定宽度而不是100% */
+  padding: 12px 24px;
+  border: none;
+  border-radius: 25px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-transform: none;
+}
+
+.blue-btn {
+  background: linear-gradient(45deg, #3b82f6, #1d4ed8);
+  color: white;
+  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+}
+.blue-btn:hover {
+  background: linear-gradient(45deg, #2563eb, #1e40af);
+  /* 移除 transform: translateY(-2px); */
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
+}
+
+.red-btn {
+  background: linear-gradient(45deg, #ef4444, #dc2626);
+  color: white;
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+}
+
+
+.red-btn:hover {
+  background: linear-gradient(45deg, #dc2626, #b91c1c);
+  /* 移除 transform: translateY(-2px); */
+  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 {
+  cursor: pointer;
+  transition: all 0.8s ease-out;
+  /* 简化为单一缓动 */
+  transform-origin: center;
+}
+
+/* 左侧板块选中时 - 简单飘移 */
+.left-section.selected {
+  transform: translateX(200px) scale(1.2);
+  /* 直接向右飘移 */
+  z-index: 1000;
+  transition: all 0.8s ease-out;
+}
+
+/* 右侧板块选中时 - 简单飘移 */
+.right-section.selected {
+  transform: translateX(-200px) scale(1.2);
+  /* 直接向左飘移 */
+  z-index: 1000;
+  transition: all 0.8s ease-out;
+}
+
+/* 选中状态的卡片样式 - 去掉复杂3D效果 */
+.stock-section.selected .stock-card {
+  transform: none;
+  /* 移除复杂的3D变换 */
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  /* 简化阴影 */
+}
+
+/* 未选中板块简单淡化 */
+.stock-section.dimmed {
+  opacity: 0.2;
+  transform: scale(0.8);
+  transition: all 0.8s ease-out;
+}
+
+/* 移除复杂的悬浮和点击效果 */
+.stock-section.selected:hover .stock-card {
+  transform: none;
+}
+
+.stock-section.selected:active {
+  transform: translateX(200px) scale(1.18);
+  /* 左侧 */
+}
+
+.right-section.selected:active {
+  transform: translateX(-200px) scale(1.18);
+  /* 右侧 */
+}
+
+/* 活动头部隐藏状态 */
+.activity-header.hidden {
+  opacity: 0;
+  transform: translateY(-50px);
+  pointer-events: none;
+  transition: all 0.5s ease-out;
+}
+
+/* 活动头部正常状态 */
+.activity-header {
+  transition: all 0.5s ease-out;
+}
+
+/* 当有板块被选中时，调整主内容区域布局 */
+.zhongchou-container:has(.activity-header.hidden) .main-content {
+  height: 100vh;
+  /* 占满整个视口高度 */
+  padding-top: 0;
+}
+
+/* 活动规则按钮样式 - 简化版 */
+.activity-rules-btn {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  cursor: pointer;
+}
+
+.activity-rules-btn img {
+  width: 80px;
+  height: auto;
+  border-radius: 5px;
+}
+
+/* 活动规则弹窗样式 - 简化版 */
+.rules-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+
+.rules-content {
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 0;
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+  border: 1px solid #ddd;
+}
+
+.rules-header {
+  background: #f5f5f5;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ddd;
+}
+
+.rules-header h2 {
+  color: #333;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #666;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #333;
+}
+
+.rules-body {
+  padding: 20px;
+  color: #333;
+  line-height: 1.5;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.rule-item {
+  display: flex;
+  margin-bottom: 12px;
+  align-items: flex-start;
+}
+
+.rule-number {
+  color: #666;
+  font-weight: bold;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.rule-text {
+  color: #333;
+  font-size: 0.9rem;
+}
+
+.rules-footer {
+  padding: 15px 20px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+}
+
+.confirm-btn {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 25px;
+  border-radius: 5px;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.confirm-btn:hover {
+  background: #0056b3;
+}
 
-</style>
\ No newline at end of file
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .rules-content {
+    width: 95%;
+    margin: 20px;
+  }
+  
+  .rules-header {
+    padding: 15px;
+  }
+  
+  .rules-header h2 {
+    font-size: 1.1rem;
+  }
+  
+  .rules-body {
+    padding: 15px;
+  }
+  
+  .rule-text {
+    font-size: 0.85rem;
+  }
+  
+  .rules-footer {
+    padding: 15px;
+  }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index bbcf80c..ea0cfd0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(process.cwd(), 'src')
+    }
+  }
 })