From dfc1677baacd0211af271298dcfbc3feff11c755 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= Date: Sun, 20 Jul 2025 18:37:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=8E=A5=E5=8F=A3=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E7=9A=84=E6=95=B0=E6=8D=AE=E7=A1=AE=E5=AE=9A=E5=8A=A9?= =?UTF-8?q?=E5=8A=9B=E7=8A=B6=E6=80=81=EF=BC=8C=E8=AE=A1=E7=AE=97=E8=BF=9B?= =?UTF-8?q?=E5=BA=A6=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/zhongchou/index.vue | 147 +++++++++++++++++++++++++----------------- 1 file changed, 87 insertions(+), 60 deletions(-) diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index 1adbdba..a248a82 100644 --- a/src/views/zhongchou/index.vue +++ b/src/views/zhongchou/index.vue @@ -145,7 +145,7 @@ async function fetchActivity() { if (response.code === 200) { console.log('活动数据:', response.data) // 处理返回的数据 - const { startTime, endTime } = response.data + const { startTime, endTime, marketTwoStatus, marketTwoCount } = response.data if (startTime && endTime) { const formattedStartTime = formatDate(startTime) const formattedEndTime = formatDate(endTime) @@ -153,6 +153,29 @@ async function fetchActivity() { } else { activityPeriod.value = '时间待定' } + + // 根据marketTwoStatus设置助力状态 + if (marketTwoStatus === '已助力') { + usBoostStatus.value = true + } else { + usBoostStatus.value = false + } + + // 根据marketTwoCount计算进度和剩余时间 + if (marketTwoCount !== undefined) { + const totalPeople = 1500 // 总人数1500人 + const currentCount = marketTwoCount || 0 // 当前助力人数 + + // 计算进度百分比 (0-100) + const progressPercent = Math.min((currentCount / totalPeople) * 100, 100) + + // 根据进度计算剩余时间 (15分钟对应100%进度) + const usedTime = (progressPercent / 100) * 15 + const remainingTime = Math.max(0, 15 - usedTime) + + usRemainingTime.value = Math.round(remainingTime) + console.log(`助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`) + } } else { console.error('获取活动失败:', response.message) activityPeriod.value = '获取失败' @@ -200,8 +223,8 @@ const usBoostStatus = ref(false) // const hkBoostStatus = ref(false) const showRulesModal = ref(false) -// 剩余时间数据 - 可控制的初始值 -const usRemainingTime = ref(9) // 美股剩余分钟 +// 剩余时间数据 - 从接口获取marketTwoCount计算 +const usRemainingTime = ref(15) // 美股剩余分钟，初始值15分钟 // const hkRemainingTime = ref(6) // 港股剩余分钟 const usTotalTime = ref(15) // 美股总时间15分钟 // const hkTotalTime = ref(15) // 港股总时间15分钟 @@ -272,17 +295,6 @@ 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) - // } -} - - // const handleAreaClick = (area) => { // if (activeArea.value === area) { @@ -297,15 +309,14 @@ const handleBoostClick = async (area) => { try { // 调用助力API const response = await addRecordAPI({ - "activityId": 1, - "marketSign": 5 + "activityId": 40, + "marketSign": 8 }); if (response.code === 200) { - usBoostStatus.value = true - // 助力后减少1分钟时间 - simulateTimeDecrease('us') console.log('美股助力成功：', response.message) + // 重新获取活动数据以更新按钮状态和进度 + await fetchActivity() console.log('美股已助力，剩余时间：', usRemainingTime.value) } else { console.error('美股助力失败：', response.message) @@ -458,6 +469,13 @@ const hideRules = () => { display: inline-block; padding: 10px 20px; min-width: fit-content; + /* 确保文字始终在容器内 */ + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + box-sizing: border-box; + max-width: 100%; } @@ -477,12 +495,12 @@ const hideRules = () => { /* 股票区域基础样式 */ .stock-area { position: absolute; - width: 35vw; - height: 28vw; - min-width: 400px; - min-height: 350px; - max-width: 650px; - max-height: 600px; + width: 48vw; + height: 38vw; + min-width: 560px; + min-height: 480px; + max-width: 900px; + max-height: 800px; display: flex; justify-content: center; align-items: center; @@ -500,9 +518,9 @@ const hideRules = () => { -webkit-backface-visibility: hidden; transform: translateZ(0); } */ -/* 美股卡片默认位置 - 居中显示 */ +/* 美股卡片默认位置 - 居中显示，移除放大效果 */ .left-area { - transform: translateX(0) rotateY(0deg) scale(1.5); + transform: translateX(0) rotateY(0deg); } /* 港股卡片默认位置 - 火箭右侧，向内倾斜 */ @@ -510,9 +528,9 @@ const hideRules = () => { transform: translateX(25vw) rotateY(-25deg) scale(1.5); } */ -/* 美股hover效果 - 在居中位置基础上轻微上移 */ +/* 美股hover效果 - 移除放大效果，仅保持轻微上移 */ .left-area:hover:not(.active):not(.side) { - transform: translateX(0) rotateY(0deg) translateY(-10px) scale(1.55); + transform: translateX(0) rotateY(0deg) translateY(-10px); transition: transform 0.3s ease; } @@ -522,9 +540,9 @@ const hideRules = () => { transition: transform 0.3s ease; } */ -/* 美股激活时 - 移动到页面中心并取消倾斜 */ +/* 美股激活时 - 移动到页面中心并取消倾斜，移除放大效果 */ .left-area.active { - transform: translateX(0) rotateY(0deg) scale(1.6); + transform: translateX(0) rotateY(0deg); z-index: 20; } @@ -568,7 +586,7 @@ const hideRules = () => { /* 股票卡片样式 */ .stock-card { width: 100%; - height: 345px; + height: 475px; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; @@ -583,19 +601,16 @@ const hideRules = () => { /* .hk-card { background-image: url('@/assets/img/zhongchou/港股.png') !important; } */ - + .card-content { width: 100%; height: auto; display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: flex-start; gap: 20px; padding: 20px 20px 20px 20px; box-sizing: border-box; - /* 确保padding不会增加总宽度 */ - overflow: hidden; - /* 防止内容溢出 */ } /* 港股内容布局 - 进度条在右边 */ @@ -610,19 +625,12 @@ const hideRules = () => { flex: 1; display: flex; flex-direction: column; - justify-content: flex-start; - /* 从 flex-start 改为 center */ - align-items: center; - min-width: 0; - /* 允许flex项目收缩到内容以下 */ - max-width: 150px; - /* 限制最大宽度 */ } /* 股票信息标题样式 */ .stock-info h3 { margin: 5px 0; - font-size: 1.33rem; + font-size: 2rem; line-height: 1.2; word-wrap: break-word; /* 允许长单词换行 */ @@ -665,11 +673,13 @@ const hideRules = () => { /* 默认进度条容器样式 */ .progress-bar { - width: 20px; - height: 350px; + width: 100%; + height: auto; border-radius: 10px; position: relative; overflow: visible; + min-width: 20px; + min-height: 30rem; } /* 美股进度条容器 - 蓝色主题背景 */ @@ -695,9 +705,10 @@ const hideRules = () => { .time-markers { display: flex; flex-direction: column; - height: 350px; + height: auto; justify-content: space-between; align-items: center; + min-height: 30rem; } /* 股票内容容器 */ @@ -807,10 +818,11 @@ const hideRules = () => { font-size: 1.4rem; font-weight: 700; font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; - text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3); transition: all 0.5s ease; letter-spacing: 0.5px; text-rendering: optimizeLegibility; + text-align: center; + min-width: 30px; } /* 为刻度数字添加连接线 */ @@ -827,7 +839,7 @@ const hideRules = () => { /* 美股刻度连接线 - 从右侧连接到进度条 */ .us-content .marker::before { - right: -20px; + right: -13px; background-color: #00BFFF; /* 蓝色 */ box-shadow: 0 0 4px rgba(0, 191, 255, 0.5); @@ -844,7 +856,6 @@ const hideRules = () => { /* 美股激活刻度 */ .us-content .marker.reached { color: #00BFFF !important; - text-shadow: 0 0 10px rgba(0, 191, 255, 0.8) !important; } /* 港股激活刻度 */ @@ -966,15 +977,15 @@ const hideRules = () => { } .stock-area { - width: 45vw; - height: 40vw; - min-width: 350px; - min-height: 320px; + width: 58vw; + height: 50vw; + min-width: 480px; + min-height: 440px; margin: 0; } .left-area { - transform: translateX(0) rotateY(0deg) scale(1.3); + transform: translateX(0) rotateY(0deg); } /* 移动端火箭位置调整 - 确保不覆盖卡片 */ @@ -986,7 +997,7 @@ const hideRules = () => { /* 移动端规则按钮适配 */ .rules-btn img { - height: 35px; + height: 35%; /* 移动端适当缩小图片尺寸 */ } @@ -995,16 +1006,32 @@ const hideRules = () => { /* 移动端适当缩小文字尺寸 */ } + /* 移动端活动时间容器适配 */ + .activity-period { + font-size: 1.1rem; + padding: 8px 15px; + max-width: 90vw; + /* 确保在小屏幕上不会超出视口 */ + } + /* .right-area { transform: translateX(40vw) rotateY(-25deg) scale(1.3); } */ } -/* @media (max-width: 480px) { +@media (max-width: 480px) { .main-title img { max-height: 50px; } -} */ + + /* 极小屏幕活动时间容器适配 */ + .activity-period { + font-size: 0.9rem; + padding: 6px 12px; + max-width: 85vw; + /* 在极小屏幕上进一步缩小 */ + } +} /* 弹窗样式 */ .modal-overlay { @@ -1031,7 +1058,7 @@ const hideRules = () => { .modal-background { width: 100%; - height: 100%; + height: auto; background-image: url('@/assets/img/zhongchou/框.png'); background-size: 100% 100%; background-repeat: no-repeat;