Capital/pages/index.vue

65 lines
1.9 KiB
Vue
Raw Normal View History

2024-07-02 15:07:22 +00:00
<template>
<v-container class="flex flex-col my-2 gap-[4rem]">
2024-07-02 15:07:22 +00:00
<v-row class="content-section">
<v-col cols="12" md="4" class="flex justify-start">
<div class="flex flex-col items-start">
<h1 class="text-4xl font-bold">{{ t("brandName") }}</h1>
<p class="text-lg mt-3 max-w-2/3">
{{ t("indexIntroduce") }}
2024-07-02 15:07:22 +00:00
</p>
2024-08-10 05:47:34 +00:00
<p class="text-grey mt-2">
{{ t("indexProductListHint") }}
2024-08-10 05:47:34 +00:00
<v-icon icon="mdi-arrow-right" size="16" class="mb-0.5" />
2024-07-02 15:07:22 +00:00
</p>
2024-08-10 05:47:34 +00:00
</div>
2024-07-02 15:07:22 +00:00
</v-col>
2024-08-10 05:47:34 +00:00
<v-col cols="12" md="8">
<v-card>
<product-carousel class="carousel-section" :products="products as any[]" />
2024-07-02 15:07:22 +00:00
</v-card>
</v-col>
</v-row>
2024-08-11 16:54:49 +00:00
<v-row class="content-section">
<v-col cols="12" md="8">
<v-card class="max-h-[500px]">
2024-08-11 16:54:49 +00:00
<activity-carousel class="carousel-section" />
</v-card>
</v-col>
<v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">
<div class="text-right flex flex-col items-end">
<h1 class="text-4xl font-bold">{{ t("indexActivities") }}</h1>
<p class="text-lg mt-3 max-w-2/3">
{{ t("indexActivitiesCaption") }}
2024-08-11 16:54:49 +00:00
</p>
<p class="text-grey mt-2">
<v-icon icon="mdi-arrow-left" size="16" class="mb-0.5" />
{{ t("indexActivitiesHint") }}
2024-08-11 16:54:49 +00:00
</p>
</div>
</v-col>
</v-row>
2024-07-02 15:07:22 +00:00
</v-container>
</template>
<script setup lang="ts">
2024-08-13 14:44:36 +00:00
import { getLocale } from "~/utils/locale"
const { t } = useI18n()
2024-08-13 14:44:36 +00:00
const { data: products } = await useAsyncData("products", () => {
return queryContent("/products").where({ _locale: getLocale(), archived: { $ne: true } }).limit(5).find()
})
2024-07-02 15:07:22 +00:00
</script>
<style scoped>
.carousel-section {
height: 96rem;
}
.content-section {
height: calc(100vh - 80px);
display: flex;
place-items: center;
2024-07-02 15:07:22 +00:00
}
</style>