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/choujiang/index.vue b/src/views/choujiang/index.vue index bad391e..f0d53d7 100644 --- a/src/views/choujiang/index.vue +++ b/src/views/choujiang/index.vue @@ -333,9 +333,10 @@ async function handleLotteryClick() { break; case "rotating": + setTimeout(() => { isDisabled.value = false; - }, 2000); + }, 2700); // toggleMusic(); @@ -344,13 +345,12 @@ async function handleLotteryClick() { await lottery3DRef.value?.rotateBallStop?.(); toggleMusic(); playMusic1(); - + lotteryState.value = "result"; await lotteryEngine.executeLottery(); await nextTick(); showLotteryQipao(); console.log("lotteryState 变更前:", lotteryState.value, "-> idle"); - lotteryState.value = "result"; console.log("lotteryState 变更后:", lotteryState.value); @@ -413,8 +413,8 @@ function handleNextPrize() { left: 0; overflow: hidden; /* 添加背景图片 */ - background: url("../../assets/bg@2x.png"); - background-size: 1920px 980px; + background: url("../../assets/bg@2x.png") ; + background-size: 100% 100%; } /* 透明弹窗样式 */ diff --git a/src/views/choujiang/lottery/Lottery3D.vue b/src/views/choujiang/lottery/Lottery3D.vue index 464d930..bfbe84a 100644 --- a/src/views/choujiang/lottery/Lottery3D.vue +++ b/src/views/choujiang/lottery/Lottery3D.vue @@ -756,7 +756,7 @@ onMounted(async () => { const length = member.length; const showTable = true; const position = { - x: (100 * config.COLUMN_COUNT - 20) / 2, + x: (115 * config.COLUMN_COUNT - 20) / 2, y: (120 * config.ROW_COUNT - 20) / 2, }; createCards(member, length, showTable, position, config); // 3. 传递高亮配置 diff --git a/src/views/choujiang/lottery/PrizePanel.vue b/src/views/choujiang/lottery/PrizePanel.vue index 2cfa917..cac316c 100644 --- a/src/views/choujiang/lottery/PrizePanel.vue +++ b/src/views/choujiang/lottery/PrizePanel.vue @@ -147,7 +147,7 @@ > {{ user.jwcode }} - {{ user.prizeName }} + {{ user.gradeName }}