material 스타일 적용

pages/index.vue

@@ -1,9 +1,55 @@
 <template>
   <div>
-    <p>Nuxt News</p>
-    <ul v-for="headline in headlines" :key="headline.id">
-      <li>{{ headline }}</li>
-    </ul>
+    <div class="md-layout md-aligment-center">
+      <!-- App Content -->
+      <div class="md-layout-item md-size-95">
+        <md-content class="md-layout md-gutter" style="background: #007998; padding: 1em;">
+          <ul v-for="headline in headlines" :key="headline.id" class="md-layout-item md-large-size-25 md-medium-size-33 md-small-size-50 md-xsmall-size-100">
+            <md-card style="margin-top: 1em;" md-width-hover>
+              <md-card-media md-ratio="16:9">
+                <img :src="headline.urlToImage" :alt="headlines.title">
+              </md-card-media>
+              <md-card-header>
+                <div class="md-title">
+                  <a :href="headline.url" target="_blank">{{ headline.title }}</a>
+                </div>
+                <div>
+                  {{ headline.source.name }}
+                  <md-icon class="small-icon">
+                    book
+                  </md-icon>
+                </div>
+                <div v-if="headline.author" class="md-subhead">
+                  {{ headline.author }}
+                  <md-icon class="small-icon">
+                    face
+                  </md-icon>
+                </div>
+                <div class="md-subhead">
+                  {{ headline.publishedAt }}
+                  <md-icon class="small-icon">
+                    alarm
+                  </md-icon>
+                </div>
+              </md-card-header>
+
+              <md-card-content>
+                {{ headline.description }}
+              </md-card-content>
+
+              <md-card-actions>
+                <md-button class="md-icon-button">
+                  <md-icon>bookmark</md-icon>
+                </md-button>
+                <md-button class="md-icon-button">
+                  <md-icon>message</md-icon>
+                </md-button>
+              </md-card-actions>
+            </md-card>
+          </ul>
+        </md-content>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -15,3 +61,9 @@ export default {
   }
 }
 </script>
+
+<style  scoped>
+  .small-icon {
+    font-size: 18px !important;
+  }
+</style>