67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<script setup>
|
|
import { ref, onMounted, inject } from 'vue';
|
|
|
|
const jApi = inject('jApi');
|
|
|
|
const links = ref([]);
|
|
|
|
const getLinks = async () => {
|
|
try {
|
|
links.value = await jApi.query(
|
|
`SELECT image, name, description, link FROM link
|
|
ORDER BY name`
|
|
);
|
|
} catch (error) {
|
|
console.error('Error getting links:', error);
|
|
}
|
|
};
|
|
|
|
onMounted(async () => getLinks());
|
|
</script>
|
|
|
|
<template>
|
|
<QPage>
|
|
<QList class="flex justify-center q-gutter-md">
|
|
<QItem
|
|
v-for="(link, index) in links"
|
|
:key="index"
|
|
:href="link.link"
|
|
target="_blank"
|
|
class="flex no-padding"
|
|
>
|
|
<QCard class="card-container">
|
|
<QImg
|
|
:src="`http://cdn.verdnatura.es/image/link/full/${link.image}`"
|
|
width="60px"
|
|
height="60px"
|
|
/>
|
|
<span class="card-title q-mt-md">{{ link.name }}</span>
|
|
<p class="card-description">{{ link.description }}</p>
|
|
</QCard>
|
|
</QItem>
|
|
</QList>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-container {
|
|
width: 140px;
|
|
height: 170px;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 0.7rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-description {
|
|
font-size: 0.65rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|