diff --git a/src/views/choujiang/hxl-cj/cj.vue b/src/views/choujiang/hxl-cj/cj.vue index aea345e..f1105b3 100644 --- a/src/views/choujiang/hxl-cj/cj.vue +++ b/src/views/choujiang/hxl-cj/cj.vue @@ -507,6 +507,11 @@ const initAll = async () => { }; const initCards = () => { + const screenWidth = window.innerWidth; + const isLaptop = screenWidth < 1600; // 判断 + const baseSpacingX = isLaptop ? 120 : 140; + const baseSpacingY = isLaptop ? 150 : 180; + let member = users.value.slice(), showCards = [], length = member.length; @@ -514,9 +519,14 @@ const initCards = () => { let isBold = false; let index = 0; let totalMember = member.length; + // let position = { + // x: (140 * COLUMN_COUNT - 20) / 2, + // y: (180 * ROW_COUNT - 20) / 2, + // }; + let position = { - x: (140 * COLUMN_COUNT - 20) / 2, - y: (180 * ROW_COUNT - 20) / 2, + x: (baseSpacingX * COLUMN_COUNT - 20) / 2, + y: (baseSpacingY * ROW_COUNT - 20) / 2, }; camera = new THREE.PerspectiveCamera( @@ -542,9 +552,17 @@ const initCards = () => { threeDCards.push(object); // + // 在initCards函数开始处添加 + + const cardSpacingX = isLaptop ? 130 : 155; + const cardSpacingY = isLaptop ? 160 : 195; + var object = new THREE.Object3D(); - object.position.x = j * 155 - position.x; - object.position.y = -(i * 195) + position.y; + // object.position.x = j * 155 - position.x; + // object.position.y = -(i * 195) + position.y; + // 使用动态间距 + object.position.x = j * cardSpacingX - position.x; + object.position.y = -(i * cardSpacingY) + position.y; targets.table.push(object); index++; } @@ -1389,8 +1407,8 @@ a { } .element { - width: 15vh; - height: 19vh; + width: 7.5vw; + height: 18.5vh; /* box-shadow: 0 0 12px rgba(0, 255, 255, 0.5); */ border: 1px solid rgba(127, 255, 255, 0.25); text-align: center; diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index aab0beb..7f87171 100644 --- a/src/views/zhongchou/index.vue +++ b/src/views/zhongchou/index.vue @@ -41,7 +41,7 @@
-

距美股实时数据

+

距{{ marketName }}实时数据

还剩{{ numberToChinese(usDisplayTime) }}分钟

@@ -170,45 +170,43 @@ async function fetchActivity() { } // 处理市场数据 - if (data && data.length > 0) { - // 遍历数据数组 - data.forEach(item => { - if (item.market === "美股" && item.marketId === 8) { - // 存储美股市场ID - usMarketId.value = item.marketId - - // 根据marketStatus设置助力状态 - if (item.marketStatus === '已助力') { - usBoostStatus.value = true - } else { - usBoostStatus.value = false - } - - // 根据marketCount计算进度和剩余时间 - if (item.marketCount !== undefined) { - const totalPeople = 1500 // 总人数1500人 - const currentCount = item.marketCount || 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)}分钟`) - - // 更新进度条高度 - nextTick(() => { - updateProgressDisplay() - }) - } - } - - // 如果需要处理港股数据，可以添加类似的逻辑 - // if (item.market === "港股" && item.marketId === 5) { ... } - }) + if (data && data.length > 1) { // 确保至少有两个元素 + // 使用数组中的第二个元素（索引为1） + const item = data[0] // 使用第二个数据 + + // 存储市场ID + usMarketId.value = item.marketId + + // 存储市场名称 + marketName.value = item.market + + // 根据marketStatus设置助力状态 + if (item.marketStatus === '已助力') { + usBoostStatus.value = true + } else { + usBoostStatus.value = false + } + + // 根据marketCount计算进度和剩余时间 + if (item.marketCount !== undefined) { + const totalPeople = 1500 // 总人数1500人 + const currentCount = item.marketCount || 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(`${marketName.value}助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`) + + // 更新进度条高度 + nextTick(() => { + updateProgressDisplay() + }) + } } } else { console.error('获取活动失败:', response.message) @@ -261,6 +259,7 @@ const showRulesModal = ref(false) // 添加助力成功提示状态 const showBoostSuccess = ref(false) // 剩余时间数据 - 从接口获取marketTwoCount计算 +const marketName = ref('美股') // 默认值为美股，将由API返回的数据更新 const usRemainingTime = ref(15) // 美股剩余分钟，初始值15分钟 // const hkRemainingTime = ref(6) // 港股剩余分钟 const usTotalTime = ref(15) // 美股总时间15分钟 @@ -332,6 +331,7 @@ const getQueryVariable = (variable) => { } // 组件挂载时初始化 onMounted(() => { + showRulesModal.value = true nextTick(() => { // 页面加载时自动获取活动数据 fetchActivity() @@ -374,26 +374,25 @@ const handleBoostClick = async (area) => { }); if (response.code === 200) { - console.log('美股助力成功：', response.message) + console.log(`${marketName.value}助力成功：`, response.message) // 显示助力成功提示 showBoostSuccess.value = true - //助力成功动画2s + //助力成功动画1s setTimeout(() => { showBoostSuccess.value = false - }, 2000) + }, 1000) // 重新获取活动数据以更新按钮状态和进度 await fetchActivity() - console.log('美股已助力状态：', usBoostStatus.value, '剩余时间：', usRemainingTime.value) + console.log(`${marketName.value}已助力状态：`, usBoostStatus.value, '剩余时间：', usRemainingTime.value) } else { - console.error('美股助力失败：', response.message) + console.error(`${marketName.value}助力失败：`, response.message) } } catch (error) { - console.error('美股助力请求失败：', error) + console.error(`${marketName.value}助力请求失败：`, error) } } - } const showRulesFunc = () => { @@ -1275,15 +1274,18 @@ const hideRules = () => { .rules-list { width: 100%; - line-height: 1.6; + line-height: 1.6; /* 增加行高 */ margin-top: 10%; - margin-left: 10%; + margin-left: 10%; /* 减少左边距 */ + padding-right: 5%; /* 添加右边距 */ } .rules-list p { margin: 10px 0; font-size: 16px; color: #fff; + font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; /* 使用更清晰的中文字体 */ + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); line-height: 1.7; }