From 933df9b6ff426ff7ecc52120497f627d068a8af8 Mon Sep 17 00:00:00 2001 From: no99 <17663930442@163.com> Date: Fri, 25 Jul 2025 14:10:15 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/choujiang/hxl-cj/cj.vue | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) 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;