crypto.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <v-container>
  3. <v-row dense>
  4. <v-col
  5. v-for="card in cards"
  6. :key="card.title"
  7. :lg="4"
  8. :sm="12"
  9. >
  10. <v-card height="100%">
  11. <v-card-title>
  12. {{ card.title }}
  13. </v-card-title>
  14. <v-card-text style="height: 80px">
  15. {{ card.address }}
  16. </v-card-text>
  17. <v-img
  18. :src="card.img"
  19. :contain=true
  20. height="400px"
  21. position="top"
  22. >
  23. </v-img>
  24. </v-card>
  25. </v-col>
  26. </v-row>
  27. </v-container>
  28. </template>
  29. <script>
  30. export default {
  31. transition (to, from) {
  32. return to.name == 'crypto' ? 'swoop-in' : 'swoop-out';
  33. },
  34. data: () => ({
  35. cards: [{
  36. title: 'Bitcoin',
  37. address: 'bitcoin:bc1q90v030fu4z2hzz3x6a4zcwxuzauxkt8gjv8pws',
  38. img: '/qrs/bitcoin.jpg'
  39. }, {
  40. title: 'Monero',
  41. address: 'monero:431SM1vExRbdiq5jArCMkhey1g8kYhLYkbgkXYU4kgL6UrXNRzcXtz3HJDayph6Dcb3ErTg8ZAVqJGtS1Ya7Rr9URJ24Tbe',
  42. img: '/qrs/monero.jpg'
  43. }, {
  44. title: 'Ethereum',
  45. address: 'ethereum:0x981A99cDE3f4E1Ad49Ad84FB62Eca3606007eBEc',
  46. img: '/qrs/ethereum.jpg'
  47. }]
  48. })
  49. };
  50. </script>
  51. <style>
  52. </style>