Home.vue 840 Bytes

Edit Raw Blame History

<template>
  <v-container class="mx-auto content">
    <v-carousel cycle height="360" hide-delimiter-background show-arrows="hover" class="tw-mb-16">
      <v-carousel-item src="/banner1.png" cover> </v-carousel-item>
      <v-carousel-item src="/banner2.jpeg" cover> </v-carousel-item>
      <v-carousel-item src="/banner3.jpeg" cover> </v-carousel-item>
    </v-carousel>
    <div v-for="item in store.list" :key="item.categoryDisplayName" class="tw-mb-[64px]">
      <HomeProductList :title="item.categoryDisplayName" :list="item.list" />
    </div>
  </v-container>
</template>

<script setup lang="ts">
import HomeProductList from '@/components/HomeCategoryList.vue'
import { useCategoryStore } from '@/stores/category'

const store = useCategoryStore()
</script>

<style lang="scss" scoped>
.content {
  max-width: 1200px;
}
</style>