时间从接口获取；新需求去掉港股；

src/views/zhongchou/index.vue

@@ -4,8 +4,8 @@
         <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>
+                <img src="@/assets/img/zhongchou/助力美股享实时数据.png" alt="">
+                <div class="activity-period">活动时间：{{ activityPeriod }}</div>
             </div>
 
             <!-- 活动规则按钮 -->
@@ -18,8 +18,7 @@
         <!-- 主要交互区域 -->
         <div class="main-interactive-area">
             <!-- 左侧美股区域 -->
-            <div class="stock-area left-area" @click="handleAreaClick('us')"
-                :class="{ active: activeArea === 'us', 'side': activeArea === 'hk' }">
+            <div class="stock-area left-area" :class="{ active: activeArea === 'us', 'side': activeArea === 'hk' }">
                 <div class="stock-content">
                     <div class="stock-card us-card">
                         <div class="card-content us-content">
@@ -66,12 +65,11 @@
             </div>
 
             <!-- 右侧港股区域 -->
-            <div class="stock-area right-area" @click="handleAreaClick('hk')"
+            <!-- <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>还剩{{ numberToChinese(hkDisplayTime) }}分钟</h3>
@@ -81,7 +79,6 @@
                                 <div class="progress-bar">
                                     <div class="progress-fill"></div>
                                 </div>
-                                <!-- 港股区域刻度 -->
                                 <div class="time-markers">
                                     <div class="marker marker-text" v-for="time in timeMarkers" :key="time" :class="{
                                         'reached': (15 - hkUsedTime) <= time,
@@ -93,7 +90,6 @@
                             </div>
                         </div>
                     </div>
-                    <!-- 港股助力按钮和底座 -->
                     <div class="boost-section">
                         <div class="boost-btn hk-boost-btn" :class="{ 'boosted': hkBoostStatus }"
                             @click.stop="handleBoostClick('hk')"></div>
@@ -102,7 +98,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
         </div>
 
         <!-- 活动规则弹窗 -->
@@ -128,6 +124,20 @@
 <script setup>
 import { addRecordAPI, getActivity1API } from '../../api/API'
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
+
+// 活动时间显示
+const activityPeriod = ref('加载中...')
+
+// 格式化日期函数
+const formatDate = (dateString) => {
+    if (!dateString) return ''
+    const date = new Date(dateString)
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}/${month}/${day}`
+}
+
 // 在组件中使用
 async function fetchActivity() {
     try {
@@ -135,12 +145,21 @@ async function fetchActivity() {
         if (response.code === 200) {
             console.log('活动数据:', response.data)
             // 处理返回的数据
-            // response.data 包含：marketOne, marketTwo, startTime, endTime 等字段
+            const { startTime, endTime } = response.data
+            if (startTime && endTime) {
+                const formattedStartTime = formatDate(startTime)
+                const formattedEndTime = formatDate(endTime)
+                activityPeriod.value = `${formattedStartTime}~${formattedEndTime}`
+            } else {
+                activityPeriod.value = '时间待定'
+            }
         } else {
             console.error('获取活动失败:', response.message)
+            activityPeriod.value = '获取失败'
         }
     } catch (error) {
         console.error('请求错误:', error)
+        activityPeriod.value = '网络错误'
     }
 }
 const numberToChinese = (num) => {
@@ -178,44 +197,44 @@ const showRules = ref(false)
 // 原有的组件状态
 const activeArea = ref(null)
 const usBoostStatus = ref(false)
-const hkBoostStatus = ref(false)
+// const hkBoostStatus = ref(false)
 const showRulesModal = ref(false)
 
 // 剩余时间数据 - 可控制的初始值
 const usRemainingTime = ref(9) // 美股剩余分钟
-const hkRemainingTime = ref(6)  // 港股剩余分钟
+// const hkRemainingTime = ref(6)  // 港股剩余分钟
 const usTotalTime = ref(15)     // 美股总时间15分钟
-const hkTotalTime = ref(15)     // 港股总时间15分钟
+// const hkTotalTime = ref(15)     // 港股总时间15分钟
 
 // 计算属性：根据剩余时间计算进度条高度
 const usProgressHeight = computed(() => {
     return getProgressHeight(usRemainingTime.value, usTotalTime.value)
 })
 
-const hkProgressHeight = computed(() => {
-    return getProgressHeight(hkRemainingTime.value, hkTotalTime.value)
-})
+// const hkProgressHeight = computed(() => {
+//     return getProgressHeight(hkRemainingTime.value, hkTotalTime.value)
+// })
 
 // 计算属性：显示的剩余时间
 const usDisplayTime = computed(() => {
     return Math.max(0, usRemainingTime.value)
 })
 
-const hkDisplayTime = computed(() => {
-    return Math.max(0, hkRemainingTime.value)
-})
+// const hkDisplayTime = computed(() => {
+//     return Math.max(0, hkRemainingTime.value)
+// })
 
 // 计算已使用时间用于刻度显示
 const usUsedTime = computed(() => {
     return usTotalTime.value - usRemainingTime.value
 })
 
-const hkUsedTime = computed(() => {
-    return hkTotalTime.value - hkRemainingTime.value
-})
+// const hkUsedTime = computed(() => {
+//     return hkTotalTime.value - hkRemainingTime.value
+// })
 
 // 监听剩余时间变化，更新进度条
-watch([usRemainingTime, hkRemainingTime], () => {
+watch([usRemainingTime], () => {
     nextTick(() => {
         updateProgressDisplay()
     })
@@ -230,10 +249,10 @@ const updateProgressDisplay = () => {
     }
 
     // 更新港股进度条
-    const hkFill = document.querySelector('.hk-content .progress-fill')
-    if (hkFill) {
-        hkFill.style.height = `${hkProgressHeight.value}%`
-    }
+    // const hkFill = document.querySelector('.hk-content .progress-fill')
+    // if (hkFill) {
+    //     hkFill.style.height = `${hkProgressHeight.value}%`
+    // }
 }
 
 // 组件挂载时初始化
@@ -257,20 +276,21 @@ onMounted(() => {
 const simulateTimeDecrease = (area) => {
     if (area === 'us' && usRemainingTime.value > 0) {
         usRemainingTime.value = Math.max(0, usRemainingTime.value - 1)
-    } else if (area === 'hk' && hkRemainingTime.value > 0) {
-        hkRemainingTime.value = Math.max(0, hkRemainingTime.value - 1)
     }
+    // else if (area === 'hk' && hkRemainingTime.value > 0) {
+    //     hkRemainingTime.value = Math.max(0, hkRemainingTime.value - 1)
+    // }
 }
 
 
 
-const handleAreaClick = (area) => {
-    if (activeArea.value === area) {
-        activeArea.value = null
-    } else {
-        activeArea.value = area
-    }
-}
+// const handleAreaClick = (area) => {
+//     if (activeArea.value === area) {
+//         activeArea.value = null
+//     } else {
+//         activeArea.value = area
+//     }
+// }
 
 const handleBoostClick = async (area) => {
     if (area === 'us' && !usBoostStatus.value) {
@@ -278,7 +298,7 @@ const handleBoostClick = async (area) => {
             // 调用助力API
             const response = await addRecordAPI({
                 "activityId": 1,
-                "marketSign": "usa"
+                "marketSign": 5
             });
 
             if (response.code === 200) {
@@ -293,27 +313,28 @@ const handleBoostClick = async (area) => {
         } catch (error) {
             console.error('美股助力请求失败：', error)
         }
-    } else if (area === 'hk' && !hkBoostStatus.value) {
-        try {
-            // 调用助力API
-            const response = await addRecordAPI({
-                "activityId": 1,
-                "marketSign": "hk"
-            });
-
-            if (response.code === 200) {
-                hkBoostStatus.value = true
-                // 助力后减少1分钟时间
-                simulateTimeDecrease('hk')
-                console.log('港股助力成功：', response.message)
-                console.log('港股已助力，剩余时间：', hkRemainingTime.value)
-            } else {
-                console.error('港股助力失败：', response.message)
-            }
-        } catch (error) {
-            console.error('港股助力请求失败：', error)
-        }
     }
+    // else if (area === 'hk' && !hkBoostStatus.value) {
+    //     try {
+    //         // 调用助力API
+    //         const response = await addRecordAPI({
+    //             "activityId": 1,
+    //             "marketSign": 5
+    //         });
+
+    //         if (response.code === 200) {
+    //             hkBoostStatus.value = true
+    //             // 助力后减少1分钟时间
+    //             simulateTimeDecrease('hk')
+    //             console.log('港股助力成功：', response.message)
+    //             console.log('港股已助力，剩余时间：', hkRemainingTime.value)
+    //         } else {
+    //             console.error('港股助力失败：', response.message)
+    //         }
+    //     } catch (error) {
+    //         console.error('港股助力请求失败：', error)
+    //     }
+    // }
 }
 
 const showRulesFunc = () => {
@@ -359,8 +380,6 @@ const hideRules = () => {
 .top-section {
     display: flex;
     width: 100%;
-    margin-top: -7%;
-    margin-bottom: 10%;
 }
 
 /* 主标题样式 */
@@ -389,12 +408,20 @@ const hideRules = () => {
     flex-direction: column;
     margin-right: 3%;
     cursor: pointer;
+    /* 确保按钮在屏幕缩放时保持比例 */
+    transform-origin: center;
+    transition: transform 0.2s ease;
 }
 
 .rules-btn img {
     width: auto;
     height: 45px;
     margin-bottom: 5px;
+    object-fit: contain;
+    /* 确保图片在屏幕缩放时保持比例 */
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+    transform-origin: center;
 }
 
 .rules-text {
@@ -441,20 +468,20 @@ const hideRules = () => {
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: 400px;
+    height: 700px;
     position: relative;
-    perspective: 1200px;
+    /* perspective: 1200px; */
     transform-style: preserve-3d;
 }
 
 /* 股票区域基础样式 */
 .stock-area {
     position: absolute;
-    width: 25vw;
+    width: 35vw;
     height: 28vw;
-    min-width: 300px;
+    min-width: 400px;
     min-height: 350px;
-    max-width: 500px;
+    max-width: 650px;
     max-height: 600px;
     display: flex;
     justify-content: center;
@@ -473,27 +500,27 @@ const hideRules = () => {
     -webkit-backface-visibility: hidden;
     transform: translateZ(0);
 } */
-/* 美股卡片默认位置 - 火箭左侧，向内倾斜 */
+/* 美股卡片默认位置 - 居中显示 */
 .left-area {
-    transform: translateX(-25vw) rotateY(25deg) scale(1.5);
+    transform: translateX(0) rotateY(0deg) scale(1.5);
 }
 
 /* 港股卡片默认位置 - 火箭右侧，向内倾斜 */
-.right-area {
+/* .right-area {
     transform: translateX(25vw) rotateY(-25deg) scale(1.5);
-}
+} */
 
-/* 美股hover效果 - 在原有倾斜基础上轻微上移 */
+/* 美股hover效果 - 在居中位置基础上轻微上移 */
 .left-area:hover:not(.active):not(.side) {
-    transform: translateX(-25vw) rotateY(35deg) translateY(-10px) scale(1.55);
+    transform: translateX(0) rotateY(0deg) translateY(-10px) scale(1.55);
     transition: transform 0.3s ease;
 }
 
 /* 港股hover效果 - 在原有倾斜基础上轻微上移 */
-.right-area:hover:not(.active):not(.side) {
+/* .right-area:hover:not(.active):not(.side) {
     transform: translateX(25vw) rotateY(-35deg) translateY(-10px) scale(1.55);
     transition: transform 0.3s ease;
-}
+} */
 
 /* 美股激活时 - 移动到页面中心并取消倾斜 */
 .left-area.active {
@@ -502,37 +529,36 @@ const hideRules = () => {
 }
 
 /* 港股激活时 - 移动到页面中心并取消倾斜 */
-.right-area.active {
+/* .right-area.active {
     transform: translateX(0) rotateY(0deg) scale(1.6);
     z-index: 20;
-}
+} */
 
 /* 美股在港股激活时 - 移动到后面并保持倾斜 */
-.left-area.side {
+/* .left-area.side {
     transform: translateX(-35vw) rotateY(25deg) scale(0.9) !important;
     z-index: 1 !important;
     opacity: 0.4;
-}
+} */
 
 /* 港股在美股激活时 - 移动到后面并保持倾斜 */
-.right-area.side {
+/* .right-area.side {
     transform: translateX(35vw) rotateY(-25deg) scale(0.9) !important;
     z-index: 1 !important;
     opacity: 0.4;
-}
+} */
 
-/* 火箭区域 - 始终在圆筒中心 */
+/* 火箭区域 - 位于美股卡片右边，不覆盖卡片 */
 .rocket-area {
     position: absolute;
     z-index: 10;
-    transform: translateZ(0);
-    /* 新增位置调整 */
-    top: 80%;
-    /* 垂直居中，可调整为具体像素值如 100px */
-    left: 50%;
-    /* 水平居中，可调整为具体像素值如 200px */
-    transform: translate(-50%, -50%) translateZ(0);
-    /* 居中偏移 */
+    /* 位置调整到美股卡片右边，确保不覆盖 */
+    top: 50%;
+    /* 垂直居中 */
+    left: calc(50% + 25vw);
+    /* 美股卡片右边位置，增加间距 */
+    transform: translate(0, -50%) translateZ(0);
+    /* 左对齐，垂直居中 */
 }
 
 .rocket-area.hidden {
@@ -554,11 +580,9 @@ const hideRules = () => {
 }
 
 /* 港股卡片背景 */
-.hk-card {
+/* .hk-card {
     background-image: url('@/assets/img/zhongchou/港股.png') !important;
-}
-
-
+} */
  
 .card-content {
     width: 100%;
@@ -574,15 +598,10 @@ const hideRules = () => {
     /* 防止内容溢出 */
 }
 
-/* 美股内容布局 - 进度条在左边 */
-.us-content {
-    flex-direction: row;
-}
-
 /* 港股内容布局 - 进度条在右边 */
-.hk-content {
+/* .hk-content {
     flex-direction: row;
-}
+} */
 
 /* 股票信息 */
 .stock-info {
@@ -621,11 +640,6 @@ const hideRules = () => {
     gap: 15px;
 }
 
-/* 美股内容布局 - 进度条在右边，刻度在左边 */
-.us-content {
-    flex-direction: row;
-}
-
 .us-content .progress-section {
     display: flex;
     align-items: center;
@@ -636,7 +650,7 @@ const hideRules = () => {
 }
 
 /* 港股内容布局 - 进度条在左边，刻度在右边 */
-.hk-content {
+/* .hk-content {
     flex-direction: row;
 }
 
@@ -647,7 +661,7 @@ const hideRules = () => {
     gap: 15px;
     flex-direction: row;
     /* 进度条在左，刻度在右 */
-}
+/* } */
 
 /* 默认进度条容器样式 */
 .progress-bar {
@@ -669,14 +683,14 @@ const hideRules = () => {
 }
 
 /* 港股进度条容器 - 红色主题背景 */
-.hk-content .progress-bar {
+/* .hk-content .progress-bar {
     background: linear-gradient(to top,
             rgba(255, 138, 128, 0.2),
             rgba(255, 87, 34, 0.3),
             rgba(211, 47, 47, 0.4));
     border: 1px solid rgba(255, 87, 34, 0.5);
     box-shadow: 0 0 10px rgba(255, 87, 34, 0.3);
-}
+} */
 
 .time-markers {
     display: flex;
@@ -729,14 +743,14 @@ const hideRules = () => {
 }
 
 /* 港股助力按钮 */
-.hk-boost-btn {
+/* .hk-boost-btn {
     background-image: url('@/assets/img/zhongchou/助力港股.png');
 }
 
 /* 港股已助力状态 */
-.hk-boost-btn.boosted {
+/* .hk-boost-btn.boosted {
     background-image: url('@/assets/img/zhongchou/港股已助力.png');
-}
+} */
 
 /* 底座样式 */
 .base-image {
@@ -765,9 +779,9 @@ const hideRules = () => {
 }
 
 /* 港股进度条填充 - 红色系渐变 */
-.hk-content .progress-fill {
+/* .hk-content .progress-fill {
     background: linear-gradient(to top, #FF8A80, #FF5722, #D32F2F);
-}
+} */
 
 /* 在进度条填充部分顶部添加火箭gif */
 .progress-fill::after {
@@ -820,12 +834,12 @@ const hideRules = () => {
 }
 
 /* 港股刻度连接线 - 从左侧连接到进度条 */
-.hk-content .marker::before {
+/* .hk-content .marker::before {
     left: -20px;
     background-color: #FF4444;
     /* 红色 */
-    box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
-}
+/* box-shadow: 0 0 4px rgba(255, 68, 68, 0.5);
+} */
 
 /* 美股激活刻度 */
 .us-content .marker.reached {
@@ -834,10 +848,10 @@ const hideRules = () => {
 }
 
 /* 港股激活刻度 */
-.hk-content .marker.reached {
+/* .hk-content .marker.reached {
     color: #FF4444 !important;
     text-shadow: 0 0 10px rgba(255, 68, 68, 0.8) !important;
-}
+} */
 
 /* 刻度字体增强样式 */
 /* .marker-text {
@@ -861,11 +875,11 @@ const hideRules = () => {
     box-shadow: 0 5px 15px rgba(0, 100, 255, 0.4);
 }
 
-.hk-btn {
+/* .hk-btn {
     background: linear-gradient(45deg, #cc3333, #ff6666);
     color: white;
     box-shadow: 0 5px 15px rgba(255, 50, 50, 0.4);
-}
+} */
 
 .boost-btn:hover {
     background-size: 110%;
@@ -952,20 +966,38 @@ const hideRules = () => {
     }
 
     .stock-area {
-        width: 35vw;
+        width: 45vw;
         height: 40vw;
-        min-width: 280px;
+        min-width: 350px;
         min-height: 320px;
         margin: 0;
     }
 
     .left-area {
-        transform: translateX(-40vw) rotateY(25deg) scale(1.3);
+        transform: translateX(0) rotateY(0deg) scale(1.3);
     }
 
-    .right-area {
-        transform: translateX(40vw) rotateY(-25deg) scale(1.3);
+    /* 移动端火箭位置调整 - 确保不覆盖卡片 */
+    .rocket-area {
+        left: calc(50% + 30vw);
+        top: 50%;
+        transform: translate(0, -50%) translateZ(0);
+    }
+
+    /* 移动端规则按钮适配 */
+    .rules-btn img {
+        height: 35px;
+        /* 移动端适当缩小图片尺寸 */
+    }
+
+    .rules-text {
+        font-size: 0.9rem;
+        /* 移动端适当缩小文字尺寸 */
     }
+
+    /* .right-area {
+        transform: translateX(40vw) rotateY(-25deg) scale(1.3);
+    } */
 }
 
 /* @media (max-width: 480px) {