笔记本适配

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;