serlis/src/App.vue

39 lines
940 B
Vue
Executable file

<script setup>
import { ref, onMounted } from 'vue'
import TitleHeader from './components/TitleHeader.vue'
import ServiceBox from './components/ServiceBox.vue'
import defaults from './assets/defaults.json'
onMounted(async () => {
const res = await fetch('assets/config.json')
const userConfig = await res.json()
config.value = {...defaults, ...userConfig}
})
const config = ref({})
</script>
<template>
<TitleHeader :title="config.title" :catchphrase="config.catchphrase" :subtitle="config.subtitle"></TitleHeader>
<main>
<template v-for="service in config.services">
<ServiceBox :service="service"></ServiceBox>
</template>
</main>
</template>
<style scoped lang="scss">
main {
margin-top: 2.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, 20rem) ;
gap: 2.5rem;
justify-content: center;
font-size: 1.15rem;
max-width: 90vw;
margin-right: auto;
margin-left: auto;
}
</style>