0
1
Fork 0
hedera-web-mindshore/src/pages/Cms/HomeView.vue

103 lines
2.4 KiB
Vue

<script setup>
import { ref, onMounted, inject } from 'vue';
import VnImg from 'src/components/ui/VnImg.vue';
const jApi = inject('jApi');
const news = ref([]);
const showPreview = ref(false);
const selectedImageSrc = ref('');
const fetchData = async () => {
news.value = await jApi.query(
`SELECT title, text, image, id
FROM news
ORDER BY priority, created DESC`
);
};
onMounted(async () => await fetchData());
</script>
<template>
<div style="padding: 0">
<div class="q-pa-sm row items-start">
<div
class="new-card q-pa-sm"
v-for="myNew in news"
:key="myNew.id"
>
<QCard>
<VnImg
:id="myNew.image"
storage="news"
/>
<QCardSection>
<div class="text-h5">
{{ myNew.title }}
</div>
</QCardSection>
<QCardSection class="new-body">
<div
v-html="myNew.text"
class="card-text"
/>
</QCardSection>
</QCard>
</div>
</div>
<QPageSticky>
<QBtn
fab
icon="add_shopping_cart"
color="accent"
to="/ecomerce/catalog"
:title="$t('startOrder')"
/>
</QPageSticky>
</div>
<QDialog
v-model="showPreview"
@hide="selectedImageSrc = ''"
>
<QImg :src="selectedImageSrc" />
</QDialog>
</template>
<style lang="scss" scoped>
.new-card {
width: 100%;
@media screen and (min-width: 800px) and (max-width: 1400px) {
width: 50%;
}
@media screen and (min-width: 1401px) and (max-width: 1920px) {
width: 33.33%;
}
@media screen and (min-width: 19021) {
width: 25%;
}
}
.new-body {
font-family: 'Open Sans';
}
.card-text {
:deep(a) {
color: $accent;
}
}
</style>
<i18n lang="yaml">
en-US:
startOrder: Start order
es-ES:
startOrder: Empezar pedido
ca-ES:
startOrder: Començar comanda
fr-FR:
startOrder: Lancer commande
pt-PT:
startOrder: Comece uma encomenda
</i18n>