src/components/JHeap.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
     <h3>堆区</h3>
-    <template v-if="objects !== null">
-      <v-btn v-for="item of objects" :key="item.id" block text :color="item.fresh ? 'red' : 'black'"
-             @click="handleClickDetail(item)">
-        <div class="button-text">{{item.id}}</div>
-        <v-icon v-if="item.id === itemNowId" color="blue" right>mdi-check</v-icon>
-      </v-btn>
-    </template>
+    <div class="j-container">
+      <template v-if="objects !== null">
+        <v-btn v-for="item of objects" :key="item.id" block text :color="item.fresh ? 'red' : 'black'"
+               @click="handleClickDetail(item)">
+          <div class="button-text">{{item.id}}</div>
+          <v-icon v-if="item.id === itemNowId" color="blue" right>mdi-check</v-icon>
+        </v-btn>
+      </template>
+    </div>
   </div>
 </template>
 

src/components/JMethod.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
     <h3>方法区</h3>
-    <template v-if="methods !== null">
-      <v-btn v-for="item of methods" :key="item.className" block text :color="item.fresh ? 'red' : 'black'"
-             @click="handleClickDetail(item)">
-        <div class="button-text">{{item.className}}</div>
-        <v-icon v-if="item.className === itemNowId" color="blue" right>mdi-check</v-icon>
-      </v-btn>
-    </template>
+    <div class="j-container">
+      <template v-if="methods !== null">
+        <v-btn v-for="item of methods" :key="item.className" block text :color="item.fresh ? 'red' : 'black'"
+               @click="handleClickDetail(item)">
+          <div class="button-text">{{item.className}}</div>
+          <v-icon v-if="item.className === itemNowId" color="blue" right>mdi-check</v-icon>
+        </v-btn>
+      </template>
+    </div>
   </div>
 </template>
 

src/components/JThread.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
     <h3>线程栈</h3>
-    <template v-if="threadStack !== null">
-      <v-btn v-for="item of threadStack" :key="item.methodName" block text :color="item.fresh ? 'red' : 'black'"
-             @click="handleClickDetail(item)">
-        <div class="button-text">{{item.methodName}}</div>
-        <v-icon v-if="item.methodName === itemNowId" color="blue" right>mdi-check</v-icon>
-      </v-btn>
-    </template>
+    <div class="j-container">
+      <template v-if="threadStack !== null">
+        <v-btn v-for="item of threadStack" :key="item.methodName" block text :color="item.fresh ? 'red' : 'black'"
+               @click="handleClickDetail(item)">
+          <div class="button-text">{{item.methodName}}</div>
+          <v-icon v-if="item.methodName === itemNowId" color="blue" right>mdi-check</v-icon>
+        </v-btn>
+      </template>
+    </div>
   </div>
 </template>
 

src/components/common.scss

@@ -5,3 +5,4 @@
 // font-family: ;
     text-align: left;
 }
+

src/views/JVVM.vue

@@ -126,6 +126,10 @@ export default {
 }
 
 @media (min-width: 720px) {
+  .heap, .method, .detail, .other-info {
+    overflow: auto;
+  }
+
   .heap {
     grid-area: heap;
     height: calc(33vh - 44px);