堆区

src/components/JHeap.vue

@@ -1,13 +1,50 @@
 <template>
-  <div>堆区</div>
+  <div>
+    <h3>堆区</h3>
+    <v-btn v-for="item of mock" :key="item.id" block text :color="item.fresh ? 'red' : 'black'">
+      <div class="button-text">{{item.id}}</div>
+    </v-btn>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'JHeap'
+  name: 'JHeap',
+  data () {
+    return {
+      mock: [{
+        members: {
+          'int age': '0',
+          'int id': '0'
+        },
+        id: '0@viewexample/Student',
+        fresh: false
+      }, {
+        members: {
+          'int age': '0',
+          'int id': '0'
+        },
+        id: '0@viewexample/Student',
+        fresh: true
+      }, {
+        members: {
+          'int age': '0',
+          'int id': '0'
+        },
+        id: '0@viewexample/Student',
+        fresh: false
+      }]
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.button-text {
+  width: 100%;
+  text-transform: initial;
+  letter-spacing: 0;
+  // font-family: ;
+  text-align: left;
+}
 </style>