zhusen / kelude-outside-web · Files

<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 v-for="(slide, i) in slides" :key="i" :src="slide" 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 slides = ['src/assets/banner1.png', 'src/assets/banner2.jpeg', 'src/assets/banner3.jpeg']

const store = useCategoryStore()
</script>

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