|
|
@ -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; |
|
|
|