index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <div class="md-layout md-aligment-center">
  3. <!-- App Content -->
  4. <div class="md-layout-item md-size-95">
  5. <md-content class="md-layout md-gutter" style="background: #007998; padding: 1em;">
  6. <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">
  7. <md-card style="margin-top: 1em;" md-width-hover>
  8. <md-ripple>
  9. <md-card-media md-ratio="16:9">
  10. <img :src="headline.urlToImage" :alt="headlines.title">
  11. </md-card-media>
  12. <md-card-header>
  13. <div class="md-title">
  14. <a :href="headline.url" target="_blank">{{ headline.title }}</a>
  15. </div>
  16. <div>
  17. {{ headline.source.name }}
  18. <md-icon class="small-icon">
  19. book
  20. </md-icon>
  21. </div>
  22. <div v-if="headline.author" class="md-subhead">
  23. {{ headline.author }}
  24. <md-icon class="small-icon">
  25. face
  26. </md-icon>
  27. </div>
  28. <div class="md-subhead">
  29. {{ headline.publishedAt }}
  30. <md-icon class="small-icon">
  31. alarm
  32. </md-icon>
  33. </div>
  34. </md-card-header>
  35. <md-card-content>
  36. {{ headline.description }}
  37. </md-card-content>
  38. <md-card-actions>
  39. <md-button class="md-icon-button">
  40. <md-icon>bookmark</md-icon>
  41. </md-button>
  42. <md-button class="md-icon-button">
  43. <md-icon>message</md-icon>
  44. </md-button>
  45. </md-card-actions>
  46. </md-ripple>
  47. </md-card>
  48. </ul>
  49. </md-content>
  50. </div>
  51. </div>
  52. </template>
  53. <script>
  54. export default {
  55. async asyncData ({ app }) {
  56. const topHeadlines = await app.$axios.$get('/api/top-headlines?country=us')
  57. return { headlines: topHeadlines.articles }
  58. }
  59. }
  60. </script>
  61. <style scoped>
  62. .small-icon {
  63. font-size: 18px !important;
  64. }
  65. </style>