forked from juan/hedera-web
61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div class="q-pa-sm">
|
|
<div
|
|
class="row justify-center"
|
|
style="max-width: 60em; margin: 0 auto;">
|
|
<a
|
|
v-for="link in links"
|
|
:key="link.id"
|
|
:href="link.link"
|
|
class="link q-ma-sm">
|
|
<q-card
|
|
class="clickable"
|
|
style="width: 11em;">
|
|
<q-card-section class="row justify-center">
|
|
<img
|
|
:src="`${$imageBase}/link/full/${link.image}`"
|
|
style="width: 5em;">
|
|
</q-card-section>
|
|
<q-card-section style="height: 7em; overflow: hidden;">
|
|
<div class="text-subtitle1 ellipsis">{{link.name}}</div>
|
|
<div class="text-caption">{{link.description}}</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="stylus" scoped>
|
|
a
|
|
display block
|
|
text-decoration inherit
|
|
color: inherit
|
|
.q-card.clickable
|
|
transition background 300ms ease-out
|
|
&:hover
|
|
background rgba(255, 255, 255, .2)
|
|
|
|
</style>
|
|
|
|
<script>
|
|
import Page from 'components/Page'
|
|
|
|
export default {
|
|
name: 'Panel',
|
|
mixins: [Page],
|
|
data () {
|
|
return {
|
|
links: []
|
|
}
|
|
},
|
|
mounted () {
|
|
let filter = {
|
|
order: 'name'
|
|
}
|
|
this.$axios.get('Links', { params: { filter } })
|
|
.then(res => (this.links = res.data))
|
|
}
|
|
}
|
|
</script>
|