style(levitatedsphere): 样式修改

src/components/LevitatedSphere/index.vue

@@ -15,7 +15,7 @@
     <!-- 工具抽屉 -->
     <el-drawer title="工具箱"
       v-model="drawer"
-      size="20%"
+      size="300px"
       @click.native="drawer = false">
       <slot></slot>
     </el-drawer>
@@ -133,18 +133,15 @@ export default {
     align-items: center;
     transition: all 0.5s;
     font-size: 20px;
-
   }
 
   ::v-deep(.el-drawer__body) {
     padding: 10px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    /* 让元素两端对齐 */
-    justify-content: space-between;
-    align-items: start;
-    grid-gap: 5px;
-    /* 可以根据实际情况设置容器宽度等其他样式 */
+    grid-template-rows: repeat(auto-fill, 30px); /* 明确指定行高为100px */
+    grid-auto-rows: 30px; /* 自动生成的行高也为100px */
+    grid-gap: 20px 5px; /* 上下间距20px，左右间距5px */
     width: 100%;
   
     .el-button {
@@ -152,4 +149,11 @@ export default {
       margin: 0;
     }
   }
+  @media (max-width: 768px) {
+    .wrap {
+      width: 30px;
+      height: 30px;
+      font-size: 12px;
+    }
+  }
 </style>