decoration

src/views/FinderBoard.vue

@@ -36,7 +36,6 @@
       </v-flex>
       <v-flex md12>
         <material-card color="green" title="발견 게시판" text="제목을 클릭하여 게시글을 확인하세요.">
-        </material-card>
           <v-data-table
             :headers="headers" 
             :items="items" 
@@ -49,21 +48,28 @@
               <span class="subheading font-weight-light text-success text--darken-3" v-text="header.text"/>
             </template>
             <template slot="items" slot-scope="{item}" v-if="items">
-              <td>
+              <td class="text-xs-center">
                 <img v-bind:src="item.image" id="image" width="100px" height="100px" />
               </td>
-              <td>
-                <!-- <v-btn class="v-btn--simple" @click="showPost(item._id)" value="item.title" >{{item.title}}</v-btn> -->
+              <td class="text-xs-center"> 
                 <v-btn 
-                  color="blue" 
+                  color="success"
+                  small
                   @click="showPost(item._id)" 
                   value="item.title" 
-                  >{{item.title}}</v-btn>
+                  >
+                  <strong class="title right">{{item.title}}</strong>
+                </v-btn>
+              </td>
+              <td class="text-xs-right">
+                <strong class="title right">{{item.writer}}</strong>
+              </td>
+              <td class="text-xs-right">
+                <strong class="title right">{{ item.created }}</strong>
               </td>
-              <td>{{ item.writer }}</td>
-              <td class="text-xs-right">{{ item.created }}</td>
             </template>
           </v-data-table>
+        </material-card>
       </v-flex>
     </v-layout>
   </v-container>
@@ -73,9 +79,9 @@
 export default {
   data: () => ({
     headers: [
-      { text: '사진', value: 'img', sortable: false, filterable: false},
-      { text: '제목', value: 'title', sortable: false},
-      { text: '작성자', value: 'writer', sortable: false},
+      { text: '사진', value: 'img', sortable: false, filterable: false, align: 'center'},
+      { text: '제목', value: 'title', sortable: false, align: 'center'},
+      { text: '작성자', value: 'writer', sortable: false, align: 'right'},
       { text: '작성날짜', value: 'created', sortable: false, align: 'right'}
     ],
     items: [],

src/views/LosterBoard.vue

@@ -48,14 +48,25 @@
               <span class="subheading font-weight-light text-success text--darken-3" v-text="header.text"/>
             </template>
             <template slot="items" slot-scope="{item}" v-if="items">
-              <td>
+              <td class="text-xs-center">
                 <img v-bind:src="item.image" id="image" width="100px" height="100px" />
               </td>
-              <td>
-                <v-btn text color="blue" @click="showPost(item._id)" value="item.title">{{item.title}}</v-btn>
+              <td class="text-xs-center"> 
+                <v-btn 
+                  color="success"
+                  small
+                  @click="showPost(item._id)" 
+                  value="item.title" 
+                  >
+                  <strong class="title right">{{item.title}}</strong>
+                </v-btn>
+              </td>
+              <td class="text-xs-right">
+                <strong class="title right">{{item.writer}}</strong>
+              </td>
+              <td class="text-xs-right">
+                <strong class="title right">{{ item.created }}</strong>
               </td>
-              <td>{{ item.writer }}</td>
-              <td class="text-xs-right">{{ item.created }}</td>
             </template>
           </v-data-table>
         </material-card>