36 lines
1.0 KiB
Vue
36 lines
1.0 KiB
Vue
|
<script>
|
||
|
|
import axios from "axios";
|
||
|
|
export default {
|
||
|
|
name: "Links",
|
||
|
|
data: () => ({
|
||
|
|
links: []
|
||
|
|
}),
|
||
|
|
mounted() {
|
||
|
|
axios
|
||
|
|
.get('/api/v1/links')
|
||
|
|
.then(response => (this.links = response.data));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="w-100 d-flex justify-center">
|
||
|
|
<v-list class="w-66">
|
||
|
|
<v-list-item class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<v-avatar :image="link.image" rounded="0"></v-avatar>
|
||
|
|
</template>
|
||
|
|
<v-list-item-title>{{ link.link_name }}</v-list-item-title>
|
||
|
|
</v-list-item>
|
||
|
|
</v-list>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.bg-gradient-noh {
|
||
|
|
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
|
||
|
|
background-size: 200% 200%;
|
||
|
|
animation: gradient 15s ease infinite;
|
||
|
|
}
|
||
|
|
</style>
|