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;