From 0643c8cd8497e589e0526145587929cae523af8e Mon Sep 17 00:00:00 2001
From: songtongtong <123456@163.com>
Date: Sat, 19 Jul 2025 09:25:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/zhongchou/index.vue | 291 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 263 insertions(+), 28 deletions(-)

diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue
index 065385e..7dcdc8d 100644
--- a/src/views/zhongchou/index.vue
+++ b/src/views/zhongchou/index.vue
@@ -24,19 +24,28 @@
                     <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">
+                                    <div class="marker" 
+                                         v-for="time in [15, 12, 9, 6, 3, 0]" 
+                                         :key="time"
+                                         :class="{
+                                             'marker-orange': time <= 3,
+                                             'marker-blue': time >= 6
+                                         }">
                                         {{ time }}
                                     </div>
                                 </div>
+                                <div class="progress-bar">
+                                    <div class="progress-fill" :style="{ height: (100 - usProgress) + '%' }"></div>
+                                    <div class="mini-rocket us-mini-rocket" :style="{ bottom: (100 - usProgress - 20) + '%' }">
+                                        <img src="@/assets/img/zhongchou/rocket.gif" alt="小火箭" />
+                                    </div>
+                                </div>
                             </div>
 
                             <div class="stock-info">
                                 <h3>距美股实时数据</h3>
-                                <h3>还剩15分钟</h3>
+                                <h3>还剩6分钟</h3>
                             </div>
                         </div>
                     </div>
@@ -68,15 +77,24 @@
                         <div class="card-content hk-content">
                             <div class="stock-info">
                                 <h3>距港股实时数据</h3>
-                                <h3>还剩6分钟</h3>
+                                <h3>还剩9分钟</h3>
                             </div>
 
                             <div class="progress-section">
                                 <div class="progress-bar">
-                                    <div class="progress-fill"></div>
+                                    <div class="progress-fill" :style="{ height: (100 - hkProgress) + '%' }"></div>
+                                    <div class="mini-rocket hk-mini-rocket" :style="{ bottom: (100 - hkProgress - 20) + '%' }">
+                                        <img src="@/assets/img/zhongchou/rocket.gif" alt="小火箭" />
+                                    </div>
                                 </div>
                                 <div class="time-markers">
-                                    <div class="marker" v-for="time in [0, 3, 6, 9, 12, 15]" :key="time">
+                                    <div class="marker" 
+                                         v-for="time in [15, 12, 9, 6, 3, 0]" 
+                                         :key="time"
+                                         :class="{
+                                             'marker-orange': time <= 3,
+                                             'marker-red': time >= 6
+                                         }">
                                         {{ time }}
                                     </div>
                                 </div>
@@ -103,11 +121,10 @@
                         <div class="rules-list">
                             <p>1. 活动时间为2025年7月26日-2025年8月5日。</p>
                             <p>2. 每人每天有3个活动助力参与机会。</p>
-                            <p>3. 助力时间为15分钟，每一个人参与助力，即可时间</p>
-                            <p> 分钟！</p>
+                            <p>3. 助力时间为15分钟，每一个人参与助力，即可时间分钟！</p>
                             <p>4. 助力成功后，平台服务市场将获取实时数据！</p>
-                            <p>5. 平台对数据众筹上线后，您的方案数据将优化成对应</p>
-                            <p> 大数据的实时数据优化参考。</p>
+                            <p>5. 平台对数据众筹上线后，您的方案数据将优化成对应大数据的实时数据优化</p>
+                            <p>参考。</p>
                         </div>
                     </div>
                     <div class="close-btn" @click="hideRules"></div>
@@ -125,6 +142,10 @@ const usBoostStatus = ref(false) // 美股助力状态
 const hkBoostStatus = ref(false) // 港股助力状态
 const showRulesModal = ref(false) // 活动规则弹窗显示状态
 
+// 进度状态 - 倒计时逻辑：数值越小，温度计越高
+const usProgress = ref(40) // 美股进度 (40% = 还剩9分钟)
+const hkProgress = ref(60) // 港股进度 (60% = 还剩6分钟)
+
 const handleAreaClick = (area) => {
     if (activeArea.value === area) {
         activeArea.value = null
@@ -151,6 +172,13 @@ const showRules = () => {
 const hideRules = () => {
     showRulesModal.value = false
 }
+
+// 测试进度变化函数（可以删除）
+const testProgressChange = () => {
+    // 模拟倒计时进度变化：数值增加，温度计升高
+    usProgress.value = Math.min(100, usProgress.value + 10)
+    hkProgress.value = Math.min(100, hkProgress.value + 10)
+}
 </script>
 
 <style scoped>
@@ -200,6 +228,7 @@ const hideRules = () => {
     justify-content: center;
     flex: 1;
     gap: 10px;
+    margin-left: 70px; /* 往右移动大标题 */
 }
 
 /* 主标题图片响应式样式 */
@@ -227,8 +256,8 @@ const hideRules = () => {
 
 .rules-text {
     color: #fff;
-    font-size: 12px;
-    font-weight: 500;
+    font-size: 16px;
+    font-weight: 600;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     white-space: nowrap;
 }
@@ -253,11 +282,26 @@ const hideRules = () => {
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
-    font-size: 1.2rem;
-    color: rgba(255, 255, 255, 0.9);
+    font-size: 1.4rem;
+    font-weight: 600;
+    color: #fff;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3);
     display: inline-block;
-    padding: 10px 20px;
+    padding: 12px 25px;
     min-width: fit-content;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+    from {
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3);
+    }
+    to {
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
+    }
 }
 
 
@@ -434,10 +478,86 @@ const hideRules = () => {
 .progress-bar {
     width: 20px;
     height: 200px;
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.8);
     border-radius: 10px;
     position: relative;
-    overflow: hidden;
+    overflow: visible;
+}
+
+/* 美股进度条 - 蓝色发光效果 */
+.us-content .progress-bar {
+    box-shadow: 0 0 20px rgba(0, 150, 255, 0.8), 0 0 40px rgba(0, 100, 255, 0.4);
+    position: relative;
+}
+
+/* 美股刻度线容器 */
+.us-content .progress-bar::before {
+    content: '';
+    position: absolute;
+    left: -10px;
+    top: 0;
+    width: 10px;
+    height: 200px;
+    background-image: 
+        linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%),
+        linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%),
+        linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%),
+        linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%),
+        linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%),
+        linear-gradient(to right, rgba(0, 150, 255, 0.9) 0%, rgba(0, 150, 255, 0.9) 100%);
+    background-size: 
+        10px 2px,
+        10px 2px,
+        10px 2px,
+        10px 2px,
+        10px 2px,
+        10px 2px;
+    background-position: 
+        0 5px,    /* 15分钟刻度 */
+        0 40px,   /* 12分钟刻度 */
+        0 80px,   /* 9分钟刻度 */
+        0 120px,  /* 6分钟刻度 */
+        0 160px,  /* 3分钟刻度 */
+        0 195px;  /* 0分钟刻度 */
+    background-repeat: no-repeat;
+}
+
+/* 港股进度条 - 红色发光效果 */
+.hk-content .progress-bar {
+    box-shadow: 0 0 20px rgba(255, 100, 100, 0.8), 0 0 40px rgba(255, 50, 50, 0.4);
+    position: relative;
+}
+
+/* 港股刻度线容器 */
+.hk-content .progress-bar::before {
+    content: '';
+    position: absolute;
+    right: -10px;
+    top: 0;
+    width: 10px;
+    height: 200px;
+    background-image: 
+        linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%),
+        linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%),
+        linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%),
+        linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%),
+        linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%),
+        linear-gradient(to right, rgba(255, 100, 100, 0.9) 0%, rgba(255, 100, 100, 0.9) 100%);
+    background-size: 
+        10px 2px,
+        10px 2px,
+        10px 2px,
+        10px 2px,
+        10px 2px,
+        10px 2px;
+    background-position: 
+        0 5px,    /* 15分钟刻度 */
+        0 40px,   /* 12分钟刻度 */
+        0 80px,   /* 9分钟刻度 */
+        0 120px,  /* 6分钟刻度 */
+        0 160px,  /* 3分钟刻度 */
+        0 195px;  /* 0分钟刻度 */
+    background-repeat: no-repeat;
 }
 
 /* 股票内容容器 */
@@ -499,7 +619,7 @@ const hideRules = () => {
 
 .base-image img {
     width: auto;
-    height: 40px;
+    height: 60px;
     display: block;
 }
 
@@ -507,17 +627,79 @@ const hideRules = () => {
     position: absolute;
     bottom: 0;
     width: 100%;
-    background: linear-gradient(to top, #00ff00, #ffaa00, #ff4444);
     border-radius: 10px;
     transition: height 0.8s ease;
 }
 
 .us-card .progress-fill {
-    height: 20%;
+    background: linear-gradient(to top, #00ccff, #0099ff, #0066cc);
+    box-shadow: 0 0 15px rgba(0, 150, 255, 0.9), 0 0 30px rgba(0, 100, 255, 0.6);
 }
 
 .hk-card .progress-fill {
-    height: 60%;
+    background: linear-gradient(to top, #ff9999, #ff6666, #cc3333);
+    box-shadow: 0 0 15px rgba(255, 100, 100, 0.9), 0 0 30px rgba(255, 50, 50, 0.6);
+}
+
+/* 小火箭样式 */
+.mini-rocket {
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    z-index: 20;
+    transition: bottom 0.8s ease;
+    pointer-events: none;
+}
+
+.mini-rocket img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1));
+}
+
+/* 美股小火箭位置 - 动态定位，在温度计右侧 */
+.us-mini-rocket {
+    right: -25px;
+    animation: us-rocket-hover 3s ease-in-out infinite;
+}
+
+/* 港股小火箭位置 - 动态定位，在温度计左侧 */
+.hk-mini-rocket {
+    left: -25px;
+    animation: hk-rocket-hover 3s ease-in-out infinite;
+}
+
+/* 美股小火箭悬停动画 */
+@keyframes us-rocket-hover {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    25% {
+        transform: translateY(-3px) rotate(2deg);
+    }
+    50% {
+        transform: translateY(-6px) rotate(0deg);
+    }
+    75% {
+        transform: translateY(-3px) rotate(-2deg);
+    }
+}
+
+/* 港股小火箭悬停动画 */
+@keyframes hk-rocket-hover {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    25% {
+        transform: translateY(-3px) rotate(-2deg);
+    }
+    50% {
+        transform: translateY(-6px) rotate(0deg);
+    }
+    75% {
+        transform: translateY(-3px) rotate(2deg);
+    }
 }
 
 .time-markers {
@@ -528,10 +710,58 @@ const hideRules = () => {
     align-items: center;
 }
 
+/* 美股数字刻度在左边 */
+.us-content .time-markers {
+    align-items: flex-start;
+}
+
+/* 港股数字刻度在右边 */
+.hk-content .time-markers {
+    align-items: flex-end;
+}
+
 .marker {
     color: #fff;
     font-size: 0.9rem;
-    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+    font-weight: 700;
+    text-shadow: 
+        0 0 5px rgba(255, 255, 255, 0.8),
+        0.5px 0.5px 0 #fff,
+        -0.5px -0.5px 0 #fff,
+        0.5px -0.5px 0 #fff,
+        -0.5px 0.5px 0 #fff;
+}
+
+/* 数字标记颜色类 */
+.marker-orange {
+    color: #ffff00 !important;
+    font-size: 1.4rem !important;
+    text-shadow: 
+        0 0 5px rgba(255, 255, 0, 0.8),
+        0.5px 0.5px 0 #fff,
+        -0.5px -0.5px 0 #fff,
+        0.5px -0.5px 0 #fff,
+        -0.5px 0.5px 0 #fff !important;
+}
+
+.marker-blue {
+    color: #00aaff !important;
+    text-shadow: 
+        0 0 5px rgba(0, 170, 255, 0.8),
+        0.5px 0.5px 0 #fff,
+        -0.5px -0.5px 0 #fff,
+        0.5px -0.5px 0 #fff,
+        -0.5px 0.5px 0 #fff !important;
+}
+
+.marker-red {
+    color: #ff6666 !important;
+    text-shadow: 
+        0 0 5px rgba(255, 102, 102, 0.8),
+        0.5px 0.5px 0 #fff,
+        -0.5px -0.5px 0 #fff,
+        0.5px -0.5px 0 #fff,
+        -0.5px 0.5px 0 #fff !important;
 }
 
 .us-btn {
@@ -669,8 +899,8 @@ const hideRules = () => {
 
 .modal-content {
     position: relative;
-    width: 500px;
-    height: 400px;
+    width: 600px;
+    height: 390px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -706,12 +936,17 @@ const hideRules = () => {
     line-height: 1.6;
     margin-top: 10%;
     margin-left: 10%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 .rules-list p {
     margin: 8px 0;
     font-size: 0.9rem;
     color: #fff;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
 }
 
 .close-btn {
@@ -719,8 +954,8 @@ const hideRules = () => {
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
-    width: 120px;
-    height: 40px;
+    width: 150px;
+    height: 50px;
     cursor: pointer;
     transition: transform 0.2s ease;
 }