diff --git a/src/assets/activity-sticker.png b/src/assets/activity-sticker.png
deleted file mode 100644
index ae3fe25..0000000
Binary files a/src/assets/activity-sticker.png and /dev/null differ
diff --git a/src/assets/bg.png b/src/assets/bg.png
deleted file mode 100644
index 474d589..0000000
Binary files a/src/assets/bg.png and /dev/null differ
diff --git a/src/assets/earth.jpg b/src/assets/earth.jpg
deleted file mode 100644
index f09da3f..0000000
Binary files a/src/assets/earth.jpg and /dev/null differ
diff --git a/src/assets/img/zhongchou/bg.png b/src/assets/img/zhongchou/bg.png
new file mode 100644
index 0000000..3e4f021
Binary files /dev/null and b/src/assets/img/zhongchou/bg.png differ
diff --git a/src/assets/img/zhongchou/blueBg.png b/src/assets/img/zhongchou/blueBg.png
new file mode 100644
index 0000000..fdebdbc
Binary files /dev/null and b/src/assets/img/zhongchou/blueBg.png differ
diff --git a/src/assets/img/zhongchou/redBg.png b/src/assets/img/zhongchou/redBg.png
new file mode 100644
index 0000000..c72d6d6
Binary files /dev/null and b/src/assets/img/zhongchou/redBg.png differ
diff --git a/src/assets/img/zhongchou/助力港股.png b/src/assets/img/zhongchou/助力港股.png
new file mode 100644
index 0000000..1e35422
Binary files /dev/null and b/src/assets/img/zhongchou/助力港股.png differ
diff --git a/src/assets/img/zhongchou/助力美股.png b/src/assets/img/zhongchou/助力美股.png
new file mode 100644
index 0000000..b7448e7
Binary files /dev/null and b/src/assets/img/zhongchou/助力美股.png differ
diff --git a/src/assets/img/zhongchou/大标题.png b/src/assets/img/zhongchou/大标题.png
new file mode 100644
index 0000000..06a6b9c
Binary files /dev/null and b/src/assets/img/zhongchou/大标题.png differ
diff --git a/src/assets/img/zhongchou/底座.png b/src/assets/img/zhongchou/底座.png
new file mode 100644
index 0000000..83b0b06
Binary files /dev/null and b/src/assets/img/zhongchou/底座.png differ
diff --git a/src/assets/img/zhongchou/时间边框.png b/src/assets/img/zhongchou/时间边框.png
new file mode 100644
index 0000000..1d76c2c
Binary files /dev/null and b/src/assets/img/zhongchou/时间边框.png differ
diff --git a/src/assets/img/zhongchou/框.png b/src/assets/img/zhongchou/框.png
new file mode 100644
index 0000000..9fa8501
Binary files /dev/null and b/src/assets/img/zhongchou/框.png differ
diff --git a/src/assets/img/zhongchou/活动需知.png b/src/assets/img/zhongchou/活动需知.png
new file mode 100644
index 0000000..21fba5c
Binary files /dev/null and b/src/assets/img/zhongchou/活动需知.png differ
diff --git a/src/assets/img/zhongchou/浮窗.png b/src/assets/img/zhongchou/浮窗.png
new file mode 100644
index 0000000..923dc5f
Binary files /dev/null and b/src/assets/img/zhongchou/浮窗.png differ
diff --git a/src/assets/img/zhongchou/港股.png b/src/assets/img/zhongchou/港股.png
new file mode 100644
index 0000000..26d9a23
Binary files /dev/null and b/src/assets/img/zhongchou/港股.png differ
diff --git a/src/assets/img/zhongchou/港股已助力.png b/src/assets/img/zhongchou/港股已助力.png
new file mode 100644
index 0000000..fbc4fd2
Binary files /dev/null and b/src/assets/img/zhongchou/港股已助力.png differ
diff --git a/src/assets/img/zhongchou/火箭.png b/src/assets/img/zhongchou/火箭.png
new file mode 100644
index 0000000..1723813
Binary files /dev/null and b/src/assets/img/zhongchou/火箭.png differ
diff --git a/src/assets/img/zhongchou/知道了.png b/src/assets/img/zhongchou/知道了.png
new file mode 100644
index 0000000..e65b36a
Binary files /dev/null and b/src/assets/img/zhongchou/知道了.png differ
diff --git a/src/assets/img/zhongchou/美股.png b/src/assets/img/zhongchou/美股.png
new file mode 100644
index 0000000..591eec2
Binary files /dev/null and b/src/assets/img/zhongchou/美股.png differ
diff --git a/src/assets/img/zhongchou/美股已助力.png b/src/assets/img/zhongchou/美股已助力.png
new file mode 100644
index 0000000..0c31526
Binary files /dev/null and b/src/assets/img/zhongchou/美股已助力.png differ
diff --git a/src/main.js b/src/main.js
index 7b19912..9c17b74 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import './style.css'
+// import './style.css'
 import App from './App.vue'
 import router from './router'
 
diff --git a/src/style.css b/src/style.css
index 2df1ab1..ce380ee 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,4 +1,4 @@
-:root {
+/* :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -25,7 +25,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  /* place-items: center; */
+  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -59,10 +59,10 @@ button:focus-visible {
 }
 
 #app {
-  /* max-width: 1280px; */
-  /* margin: 0 auto; */
-  /* padding: 2rem; */
-  /* text-align: center; */
+  margin: 0 auto;
+  display: flex;
+  width: 100%;
+  height: auto;
 }
 
 @media (prefers-color-scheme: light) {
@@ -76,4 +76,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+} */
diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue
index 687e529..065385e 100644
--- a/src/views/zhongchou/index.vue
+++ b/src/views/zhongchou/index.vue
@@ -1,1414 +1,757 @@
 <template>
-  <div class="zhongchou-container">
-    <!-- 活动规则按钮 - 右上角 -->
-    <div class="activity-rules-btn" @click="showRules = true">
-      <img src="/src/assets/activity-sticker.png" alt="活动规则" />
-    </div>
-    
-    <!-- 活动规则弹窗 -->
-    <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 class="interactive-container">
+        <!-- 顶部区域 -->
+        <div class="top-section">
+            <!-- 主标题 -->
+            <div class="main-title">
+                <img src="@/assets/img/zhongchou/大标题.png" alt="">
+                <div class="activity-period">活动时间：2025/07/26~2025/08/05</div>
+            </div>
+
+            <!-- 活动规则按钮 -->
+            <div class="rules-btn" @click="showRules">
+                <img src="@/assets/img/zhongchou/活动需知.png" alt="活动规则" />
+                <span class="rules-text">活动规则</span>
+            </div>
         </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 class="main-interactive-area">
+            <!-- 左侧美股区域 -->
+            <div class="stock-area left-area" @click="handleAreaClick('us')"
+                :class="{ active: activeArea === 'us', 'side': activeArea === 'hk' }">
+                <div class="stock-content">
+                    <div class="stock-card us-card">
+                        <div class="card-content us-content">
+                            <div class="progress-section">
+                                <div class="progress-bar">
+                                    <div class="progress-fill"></div>
+                                </div>
+                                <div class="time-markers">
+                                    <div class="marker" v-for="time in [0, 3, 6, 9, 12, 15]" :key="time">
+                                        {{ time }}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="stock-info">
+                                <h3>距美股实时数据</h3>
+                                <h3>还剩15分钟</h3>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 美股助力按钮和底座 -->
+                    <div class="boost-section">
+                        <div class="boost-btn us-boost-btn" :class="{ 'boosted': usBoostStatus }"
+                            @click.stop="handleBoostClick('us')"></div>
+                        <div class="base-image">
+                            <img src="@/assets/img/zhongchou/底座.png" alt="底座" />
+                        </div>
+                    </div>
+                </div>
             </div>
-            <!-- 进度条背景 -->
-            <div class="progress-bar" ref="progressBarRef">
-              <div class="progress-fill blue-progress"
-                :style="{ height: getProgressHeight(remainingMinutes.us) + '%' }"></div>
+
+            <!-- 中央火箭区域 -->
+            <div class="rocket-area" :class="{ hidden: activeArea !== null }">
+                <div class="rocket-container">
+                    <div class="rocket-body">
+                        <img src="@/assets/img/zhongchou/火箭.png" alt="火箭" />
+                    </div>
+                </div>
             </div>
-            <!-- 火箭图标 - 与进度条填充高度对齐 -->
-            <div class="rocket" :style="{ bottom: getRocketPosition(remainingMinutes.us) + 'px' }">
-              <div class="rocket-image">
-                <img src="/src/assets/rocket.gif" alt="火箭" />
-              </div>
+
+            <!-- 右侧港股区域 -->
+            <div class="stock-area right-area" @click="handleAreaClick('hk')"
+                :class="{ active: activeArea === 'hk', 'side': activeArea === 'us' }">
+                <div class="stock-content">
+                    <div class="stock-card hk-card">
+                        <div class="card-content hk-content">
+                            <div class="stock-info">
+                                <h3>距港股实时数据</h3>
+                                <h3>还剩6分钟</h3>
+                            </div>
+
+                            <div class="progress-section">
+                                <div class="progress-bar">
+                                    <div class="progress-fill"></div>
+                                </div>
+                                <div class="time-markers">
+                                    <div class="marker" v-for="time in [0, 3, 6, 9, 12, 15]" :key="time">
+                                        {{ time }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 港股助力按钮和底座 -->
+                    <div class="boost-section">
+                        <div class="boost-btn hk-boost-btn" :class="{ 'boosted': hkBoostStatus }"
+                            @click.stop="handleBoostClick('hk')"></div>
+                        <div class="base-image">
+                            <img src="@/assets/img/zhongchou/底座.png" alt="底座" />
+                        </div>
+                    </div>
+                </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" ref="progressBarRef">
-              <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 v-if="showRulesModal" class="modal-overlay" @click="hideRules">
+            <div class="modal-content" @click.stop>
+                <div class="modal-background">
+                    <div class="modal-text">
+                        <div class="rules-list">
+                            <p>1. 活动时间为2025年7月26日-2025年8月5日。</p>
+                            <p>2. 每人每天有3个活动助力参与机会。</p>
+                            <p>3. 助力时间为15分钟，每一个人参与助力，即可时间</p>
+                            <p> 分钟！</p>
+                            <p>4. 助力成功后，平台服务市场将获取实时数据！</p>
+                            <p>5. 平台对数据众筹上线后，您的方案数据将优化成对应</p>
+                            <p> 大数据的实时数据优化参考。</p>
+                        </div>
+                    </div>
+                    <div class="close-btn" @click="hideRules"></div>
+                </div>
             </div>
-          </div>
-          <button class="boost-btn red-btn">点击助力</button>
         </div>
-      </div>
     </div>
-  </div>
 </template>
-<script setup>
-import { ref, computed, onMounted, nextTick } from 'vue'
-
-// 剩余分钟数据 - 支持后端传入，可配置默认值
-const remainingMinutes = ref({
-  us: 15,  // 美股剩余分钟，可修改默认值
-  hk: 0    // 港股剩余分钟，可修改默认值
-})
-
-// 股票名称数据 - 支持后端传入，默认值为美股港股
-const stockNames = ref({
-  us: '美股',  // 美股名称，默认"美股"
-  hk: '港股'   // 港股名称，默认"港股"
-})
-
-// 进度条高度动态获取
-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 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 = 0 时，返回 100%（满的）
-  return Math.max(100 - (minutes / maxMinutes) * 100, 0)
-}
-
-// 获取火箭位置 - 与进度条填充高度对齐，基于容器实际高度
-const getRocketPosition = (minutes) => {
-  const maxMinutes = 15
-  const height = progressBarHeight.value || getResponsiveFallbackHeight()
-  const currentProgress = Math.max(1 - (minutes / maxMinutes), 0)
-  return currentProgress * height
-}
-
-// 数字显示（直接返回数字）
-const numberToChinese = (num) => {
-  return num.toString()
-}
-
-// 添加选中状态管理
-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;
-  background-image:
-    url('../../assets/bg.png');
-  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 {
-  /* 使用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, 
-    #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: clamp(1px, 0.5vw, 4px);
-  
-  /* 保持大写 */
-  text-transform: uppercase;
-}
-
-
-
-.activity-period {
-  margin-top: 30px;
-  margin-bottom: 10px;
-  /* 响应式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: 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);
-  
-  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;
-}
-
-
-
-
-
-/* 股票卡片容器样式 */
-.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;
-  /* 确保主容器也允许内容溢出 */
-}
+<script setup>
+import { ref } from 'vue'
 
-/* 股票区域容器 */
-.stock-section {
-  flex: 0 1 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: visible;
-  margin-top: 0px;
-  margin-bottom: 0px;
+const activeArea = ref(null)
+const usBoostStatus = ref(false) // 美股助力状态
+const hkBoostStatus = ref(false) // 港股助力状态
+const showRulesModal = ref(false) // 活动规则弹窗显示状态
 
-  /* 设置固定高度 */
-  height: 600px;
-  /* 根据需要调整高度值 */
+const handleAreaClick = (area) => {
+    if (activeArea.value === area) {
+        activeArea.value = null
+    } else {
+        activeArea.value = area
+    }
 }
 
-/* 左侧美股卡片特殊3D效果 */
-.left-section .stock-card {
-  transform: perspective(1500px) rotateY(20deg) rotateX(2deg) translateZ(-10px);
+const handleBoostClick = (area) => {
+    if (area === 'us' && !usBoostStatus.value) {
+        usBoostStatus.value = true
+        console.log('美股已助力');
+    } else if (area === 'hk' && !hkBoostStatus.value) {
+        hkBoostStatus.value = true
+        console.log('港股已助力');
+    }
+    // 这里可以添加助力相关的业务逻辑
 }
 
-/* 右侧港股卡片特殊3D效果 */
-.right-section .stock-card {
-  transform: perspective(1500px) rotateY(-20deg) rotateX(-2deg) translateZ(10px);
+const showRules = () => {
+    showRulesModal.value = true
 }
 
-/* 卡片悬停效果 */
-.stock-card:hover {
-  transform: perspective(1500px) rotateY(0deg) rotateX(0deg) translateZ(20px) scale(1.02);
+const hideRules = () => {
+    showRulesModal.value = false
 }
+</script>
 
-.left-section .stock-card:hover {
-  transform: perspective(500px) rotateY(2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+<style scoped>
+/* 禁用页面滚动 */
+:global(html, body) {
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
 }
 
-.right-section .stock-card:hover {
-  transform: perspective(500px) rotateY(-2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+:global(#app) {
+    overflow: hidden;
+    height: 100vh;
+    width: 100vw;
 }
 
-.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);
+.interactive-container {
+    width: 100vw;
+    height: 100vh;
+    background: url('@/assets/img/zhongchou/bg.png') no-repeat center center;
+    background-size: 100% 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
-.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);
+/* 顶部区域样式 */
+.top-section {
+    display: flex;
+    width: 100%;
+    margin-top: -7%;
+    margin-bottom: 10%;
 }
 
-.stock-header h3 {
-  font-size: 1.2rem;
-  margin: 0 0 20px 0;
-  text-align: center;
-  line-height: 1.4;
+/* 主标题样式 */
+.main-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    gap: 10px;
 }
 
-.flag-container {
-  display: flex;
-  justify-content: center;
-  margin: 20px 0;
+/* 主标题图片响应式样式 */
+.main-title img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    max-height: 80px;
+    object-fit: contain;
 }
 
-.rocket {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%) translateY(50%);
-  z-index: 20;
-  transition: bottom 0.5s ease;
+/* 活动规则按钮样式 */
+.rules-btn {
+    display: flex;
+    flex-direction: column;
+    margin-right: 3%;
+    cursor: pointer;
 }
 
-/* 火箭图标样式 */
-.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;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.rules-btn img {
+    width: auto;
+    height: 40px;
+    margin-bottom: 5px;
 }
 
-.rocket-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+.rules-text {
+    color: #fff;
+    font-size: 12px;
+    font-weight: 500;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    white-space: nowrap;
 }
 
-/* 火箭浮动动画 */
-@keyframes rocketFloat {
-  0% {
-    transform: translateY(0px) rotate(-2deg);
-  }
-
-  100% {
-    transform: translateY(-3px) rotate(2deg);
-  }
+.rules-btn:hover {
+    transform: scale(1.1);
 }
 
-/* 左侧容器定位 - 调整垂直偏移 */
-.left-section .rocket-container {
-  position: absolute;
-  left: 80px;
-  top: 50%;
-  transform: translateY(calc(-50% - 50px));
-  /* 在居中基础上再向上移动50px */
+.main-title h1 {
+    font-size: 3rem;
+    color: #fff;
+    margin: 0;
+    text-shadow: 0 0 20px rgba(0, 150, 255, 0.8);
+    background: linear-gradient(45deg, #00aaff, #0066cc);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
-/* 右侧容器定位 - 调整垂直偏移 */
-.right-section .rocket-container {
-  position: absolute;
-  right: 80px;
-  top: 50%;
-  transform: translateY(calc(-50% - 50px));
-  /* 在居中基础上再向上移动50px */
+.activity-period {
+    background-image: url("@/assets/img/zhongchou/时间边框.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    display: inline-block;
+    padding: 10px 20px;
+    min-width: fit-content;
 }
 
-/* 优化后的进度条背景 - 改为顶部对齐 */
-.progress-bar {
-  position: absolute;
-  bottom: 0;
-  /* 改回底部对齐，与填充部分一致 */
-  left: 50%;
-  transform: translateX(-50%);
-}
 
-/* 优化后的时间刻度标记容器 - 改为顶部对齐 */
-.time-markers {
-  position: absolute;
-  right: calc(50% + 15px);
-  bottom: 0;
-}
 
-/* 右侧刻度标记也改回底部对齐 */
-.right-markers {
-  right: auto;
-  left: calc(50% + 15px);
-  bottom: 0;
-  /* 改回底部对齐 */
+/* 主要交互区域 */
+.main-interactive-area {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 400px;
+    position: relative;
+    perspective: 1200px;
+    transform-style: preserve-3d;
+}
+
+/* 股票区域基础样式 */
+.stock-area {
+    position: absolute;
+    width: 25vw;
+    height: 28vw;
+    min-width: 300px;
+    min-height: 350px;
+    max-width: 500px;
+    max-height: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 1s ease;
+    transform-style: preserve-3d;
+    transform-origin: center center;
 }
 
-
-/* 进度条底部装饰图片 */
-.progress-bottom-image {
-  position: absolute;
-  bottom: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-  width: 80%;
-  height: 80px;
+/* 美股卡片默认位置 - 火箭左侧，向内倾斜 */
+.left-area {
+    transform: translateX(-25vw) rotateY(25deg) scale(1.5);
 }
 
-.progress-bottom-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+/* 港股卡片默认位置 - 火箭右侧，向内倾斜 */
+.right-area {
+    transform: translateX(25vw) rotateY(-25deg) scale(1.5);
 }
 
-
-.blue-progress {
-  background: linear-gradient(to top,
-      #16a34a 0%,
-      #22c55e 15%,
-      #fbbf24 35%,
-      #f97316 55%,
-      #84cc16 75%,
-      #ef4444 90%,
-      #dc2626 100%) !important;
+/* 美股hover效果 - 在原有倾斜基础上轻微上移 */
+.left-area:hover:not(.active):not(.side) {
+    transform: translateX(-25vw) rotateY(35deg) translateY(-10px) scale(1.55);
+    transition: transform 0.3s ease;
 }
 
-.red-progress {
-  background: linear-gradient(to top,
-      #16a34a 0%,
-      #22c55e 15%,
-      #fbbf24 35%,
-      #f97316 55%,
-      #84cc16 75%,
-      #ef4444 90%,
-      #dc2626 100%) !important;
+/* 港股hover效果 - 在原有倾斜基础上轻微上移 */
+.right-area:hover:not(.active):not(.side) {
+    transform: translateX(25vw) rotateY(-35deg) translateY(-10px) scale(1.55);
+    transition: transform 0.3s ease;
 }
 
-
-
-/* 统一的刻度文字样式 */
-.marker-text {
-  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);
-  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
-  isolation: isolate;
-  z-index: 17;
-  position: relative;
+/* 美股激活时 - 移动到页面中心并取消倾斜 */
+.left-area.active {
+    transform: translateX(0) rotateY(0deg) scale(1.6);
+    z-index: 20;
 }
 
-/* 左侧刻度文字间距 */
-.time-markers .marker-text {
-  padding-right: 15px;
+/* 港股激活时 - 移动到页面中心并取消倾斜 */
+.right-area.active {
+    transform: translateX(0) rotateY(0deg) scale(1.6);
+    z-index: 20;
 }
 
-/* 右侧刻度文字间距 */
-.right-markers .marker-text {
-  padding-left: 15px;
+/* 美股在港股激活时 - 移动到后面并保持倾斜 */
+.left-area.side {
+    transform: translateX(-35vw) rotateY(25deg) scale(0.9) !important;
+    z-index: 1 !important;
+    opacity: 0.4;
 }
 
-
-
-.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;
+/* 港股在美股激活时 - 移动到后面并保持倾斜 */
+.right-area.side {
+    transform: translateX(35vw) rotateY(-25deg) scale(0.9) !important;
+    z-index: 1 !important;
+    opacity: 0.4;
 }
 
-.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);
+/* 火箭区域 - 始终在圆筒中心 */
+.rocket-area {
+    position: absolute;
+    z-index: 10;
+    transform: translateZ(0);
+    transition: opacity 0.5s ease;
 }
 
-.red-btn {
-  background: linear-gradient(45deg, #ef4444, #dc2626);
-  color: white;
-  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+.rocket-area.hidden {
+    opacity: 0.3;
 }
 
-
-.red-btn:hover {
-  background: linear-gradient(45deg, #dc2626, #b91c1c);
-  /* 移除 transform: translateY(-2px); */
-  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
+/* 股票卡片样式 */
+.stock-card {
+    width: 100%;
+    height: auto;
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
-
-/* 基础样式 - 1980x1080分辨率 */
-.rocket-container {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  width: 200px;
-  height: 60vh;
-  min-height: 400px;
-  margin: 30px auto;
+/* 美股卡片背景 */
+.us-card {
+    background-image: url('@/assets/img/zhongchou/美股.png');
 }
 
-.progress-bar {
-  
-  width: 30px;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 15px;
-  overflow: hidden;
-  z-index: 5;
+/* 港股卡片背景 */
+.hk-card {
+    background-image: url('@/assets/img/zhongchou/港股.png') !important;
 }
 
-.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;
-}
-
-
-
-.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) {
-  .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 {
+.card-content {
     width: 100%;
     height: auto;
-    margin: 0;
-    justify-content: center;
-    align-items: stretch;
-  }
-  .stock-card {
-    width: 100%;
-    min-width: 0;
-    min-height: 200px;
-    padding: 20px 5px;
-    margin-top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 20px 20px 20px 20px;
     box-sizing: border-box;
-  }
-  .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 {
-    width: 80px;
-    height: 150px;
-    min-height: 150px;
-  }
-  
-  .progress-bar {
-    width: 12px;
-  }
-  
-  .time-markers,
-  .right-markers {
-    width: 30px;
-  }
-  
-  .marker-text {
-    font-size: 10px;
-  }
-  
-  .rocket-image {
-    width: 20px;
-    height: 20px;
-  }
-}
-
-/* 股票板块基础样式 */
-.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;
+    /* 确保padding不会增加总宽度 */
+    overflow: hidden;
+    /* 防止内容溢出 */
 }
 
-.stock-section.selected:active {
-  transform: translateX(200px) scale(1.45);
-  /* 左侧 */
+/* 美股内容布局 - 进度条在左边 */
+.us-content {
+    flex-direction: row;
 }
 
-.right-section.selected:active {
-  transform: translateX(-200px) scale(1.45);
-  /* 右侧 */
+/* 港股内容布局 - 进度条在右边 */
+.hk-content {
+    flex-direction: row;
 }
 
-/* 活动时间隐藏状态 */
-.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;
+/* 股票信息 */
+.stock-info {
+    text-align: center;
+    color: #fff;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    min-width: 0;
+    /* 允许flex项目收缩到内容以下 */
+    max-width: 150px;
+    /* 限制最大宽度 */
 }
 
-.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);
+/* 股票信息标题样式 */
+.stock-info h3 {
+    margin: 5px 0;
+    font-size: 1rem;
+    line-height: 1.2;
+    word-wrap: break-word;
+    /* 允许长单词换行 */
+    overflow-wrap: break-word;
+    /* 现代浏览器支持 */
+    hyphens: auto;
+    /* 自动断字 */
 }
 
-.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;
+/* 进度条区域 */
+.progress-section {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
 }
 
-
-/* 左侧美股卡片特殊3D效果 */
-.left-section .stock-card {
-  transform: perspective(1500px) rotateY(20deg) rotateX(2deg) translateZ(-10px);
+.progress-bar {
+    width: 20px;
+    height: 200px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
 }
 
-/* 右侧港股卡片特殊3D效果 */
-.right-section .stock-card {
-  transform: perspective(1500px) rotateY(-20deg) rotateX(-2deg) translateZ(10px);
+/* 股票内容容器 */
+.stock-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: auto
 }
 
-/* 卡片悬停效果 */
-.stock-card:hover {
-  transform: perspective(1500px) rotateY(0deg) rotateX(0deg) translateZ(20px) scale(1.02);
+/* 助力按钮区域样式 */
+.boost-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    width: 100%;
 }
 
-.left-section .stock-card:hover {
-  transform: perspective(500px) rotateY(2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+/* 助力按钮样式 */
+.boost-btn {
+    border: none;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    z-index: 2;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 200px;
+    height: 60px;
 }
 
-.right-section .stock-card:hover {
-  transform: perspective(500px) rotateY(-2deg) rotateX(-1deg) translateZ(25px) scale(1.02);
+/* 美股助力按钮 */
+.us-boost-btn {
+    background-image: url('@/assets/img/zhongchou/助力美股.png');
 }
 
-.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);
+/* 美股已助力状态 */
+.us-boost-btn.boosted {
+    background-image: url('@/assets/img/zhongchou/美股已助力.png');
 }
 
-.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);
+/* 港股助力按钮 */
+.hk-boost-btn {
+    background-image: url('@/assets/img/zhongchou/助力港股.png');
 }
 
-.stock-header h3 {
-  font-size: 1.2rem;
-  margin: 0 0 20px 0;
-  text-align: center;
-  line-height: 1.4;
+/* 港股已助力状态 */
+.hk-boost-btn.boosted {
+    background-image: url('@/assets/img/zhongchou/港股已助力.png');
 }
 
-.flag-container {
-  display: flex;
-  justify-content: center;
-  margin: 20px 0;
+/* 底座样式 */
+.base-image {
+    margin-top: -10px;
+    z-index: 1;
 }
 
-.rocket {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%) translateY(50%);
-  z-index: 20;
-  transition: bottom 0.5s ease;
+.base-image img {
+    width: auto;
+    height: 40px;
+    display: block;
 }
 
-/* 火箭图标样式 */
-.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;
+.progress-fill {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: linear-gradient(to top, #00ff00, #ffaa00, #ff4444);
+    border-radius: 10px;
+    transition: height 0.8s ease;
 }
 
-.rocket-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+.us-card .progress-fill {
+    height: 20%;
 }
 
-/* 火箭浮动动画 */
-@keyframes rocketFloat {
-  0% {
-    transform: translateY(0px) rotate(-2deg);
-  }
-
-  100% {
-    transform: translateY(-3px) rotate(2deg);
-  }
+.hk-card .progress-fill {
+    height: 60%;
 }
 
-/* 横线效果 - 精确连接到进度条边缘 */
-.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 {
+    display: flex;
+    flex-direction: column-reverse;
+    height: 200px;
+    justify-content: space-between;
+    align-items: center;
 }
 
-
-/* 左侧横线位置 */
-.time-markers .marker-text::after {
-  right: 0px;
-  /* 连接线从文字右侧延伸到进度条 */
+.marker {
+    color: #fff;
+    font-size: 0.9rem;
+    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
 }
 
-/* 右侧横线位置 */
-.right-markers .marker-text::after {
-  left: 0px;
-  /* 连接线从文字左侧延伸到进度条 */
+.us-btn {
+    background: linear-gradient(45deg, #0066cc, #0099ff);
+    color: white;
+    box-shadow: 0 5px 15px rgba(0, 100, 255, 0.4);
 }
 
-/* 进度条底部装饰图片 */
-.progress-bottom-image {
-  position: absolute;
-  bottom: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-  width: 80%;
-  height: 80px;
+.hk-btn {
+    background: linear-gradient(45deg, #cc3333, #ff6666);
+    color: white;
+    box-shadow: 0 5px 15px rgba(255, 50, 50, 0.4);
 }
 
-.progress-bottom-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+.boost-btn:hover {
+    background-size: 110%;
 }
 
 
 
-/* 优化后的进度条填充部分：统一渐变效果 */
-.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;
+.rocket-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
+/* .rocket-glow {
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    background: radial-gradient(circle,
+            rgba(0, 150, 255, 0.3) 0%,
+            rgba(0, 100, 255, 0.2) 30%,
+            transparent 70%);
+    animation: pulse 2s ease-in-out infinite;
+} */
 
-/* 左侧板块选中时 - 简单飘移 */
-.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;
+.rocket-body {
+    position: relative;
+    z-index: 2;
+    animation: float 3s ease-in-out infinite;
 }
 
-/* 选中状态的卡片样式 - 去掉复杂3D效果 */
-.stock-section.selected .stock-card {
-  transform: none;
-  /* 移除复杂的3D变换 */
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-  /* 简化阴影 */
+.rocket-body img {
+    width: 12vw;
+    height: auto;
+    min-width: 80px;
+    max-width: 200px;
 }
 
-/* 未选中板块简单淡化 */
-.stock-section.dimmed {
-  opacity: 0.2;
-  transform: scale(0.8);
-  transition: all 0.8s ease-out;
-}
+/* 动画效果 */
+@keyframes pulse {
 
-/* 移除复杂的悬浮和点击效果 */
-.stock-section.selected:hover .stock-card {
-  transform: none;
-}
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.7;
+    }
 
-.stock-section.selected:active {
-  transform: translateX(200px) scale(1.18);
-  /* 左侧 */
+    50% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
 }
 
-.right-section.selected:active {
-  transform: translateX(-200px) scale(1.18);
-  /* 右侧 */
-}
+@keyframes float {
 
-/* 活动头部隐藏状态 */
-.activity-header.hidden {
-  opacity: 0;
-  transform: translateY(-50px);
-  pointer-events: none;
-  transition: all 0.5s ease-out;
-}
+    0%,
+    100% {
+        transform: translateY(0px);
+    }
 
-/* 活动头部正常状态 */
-.activity-header {
-  transition: all 0.5s ease-out;
+    50% {
+        transform: translateY(-10px);
+    }
 }
 
-/* 当有板块被选中时，调整主内容区域布局 */
-.zhongchou-container:has(.activity-header.hidden) .main-content {
-  height: 100vh;
-  /* 占满整个视口高度 */
-  padding-top: 0;
-}
+/* 响应式设计 - 针对不同屏幕尺寸优化 */
+/* @media (max-width: 1200px) {
+    .main-title img {
+        max-height: 70px;
+    }
+} */
 
-/* 活动规则按钮样式 - 简化版 */
-.activity-rules-btn {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-  cursor: pointer;
+@media (max-width: 768px) {
+    .main-title img {
+        max-height: 60px;
+    }
+
+    .main-interactive-area {
+        flex-direction: column;
+        gap: 30px;
+    }
+
+    .stock-area {
+        width: 35vw;
+        height: 40vw;
+        min-width: 280px;
+        min-height: 320px;
+        margin: 0;
+    }
+
+    .left-area {
+        transform: translateX(-40vw) rotateY(25deg) scale(1.3);
+    }
+
+    .right-area {
+        transform: translateX(40vw) rotateY(-25deg) scale(1.3);
+    }
+}
+
+/* @media (max-width: 480px) {
+    .main-title img {
+        max-height: 50px;
+    }
+} */
+
+/* 弹窗样式 */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
 }
 
-.activity-rules-btn img {
-  width: 80px;
-  height: auto;
-  border-radius: 5px;
+.modal-content {
+    position: relative;
+    width: 500px;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-/* 活动规则弹窗样式 - 简化版 */
-.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;
+.modal-background {
+    width: 100%;
+    height: 100%;
+    background-image: url('@/assets/img/zhongchou/框.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 40px 30px 30px 30px;
+    box-sizing: border-box;
 }
 
-.rules-content {
-  background: #ffffff;
-  border-radius: 10px;
-  padding: 0;
-  max-width: 500px;
-  width: 90%;
-  max-height: 80vh;
-  overflow: hidden;
-  border: 1px solid #ddd;
+.modal-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #fff;
+    text-align: left;
+    width: 100%;
 }
 
-.rules-header {
-  background: #f5f5f5;
-  padding: 15px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #ddd;
+.rules-list {
+    width: 100%;
+    line-height: 1.6;
+    margin-top: 10%;
+    margin-left: 10%;
 }
 
-.rules-header h2 {
-  color: #333;
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: bold;
+.rules-list p {
+    margin: 8px 0;
+    font-size: 0.9rem;
+    color: #fff;
 }
 
 .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;
+    background-image: url('@/assets/img/zhongchou/知道了.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 120px;
+    height: 40px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
 }
 
 .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;
+    transform: scale(1.05);
 }
 
-.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;
-}
-
-/* 响应式设计 */
+/* 
 @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;
-  }
-}
-
-
+    .main-interactive-area {
+        flex-direction: column;
+        gap: 30px;
+    }
+
+    .stock-area {
+        width: 300px;
+        height: 400px;
+        margin: 0;
+    }
+
+    .rocket-area {
+        order: -1;
+    }
+
+    .main-title {
+        top: 30px;
+    }
+
+    .main-title h1 {
+        font-size: 2rem;
+    }
+} */
 </style>