mirror of https://github.com/lissy93/dashy
64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
|
<div class="home">
|
|
<h1>{{title}}</h1>
|
|
<span class="subtitle">{{subtitle}}</span>
|
|
<div class="item-group-container">
|
|
<ItemGroup
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
:title="item.name"
|
|
:items="item.items"
|
|
/>
|
|
<ItemGroup title="External Infrastructure"/>
|
|
<ItemGroup title="Utilities"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import ItemGroup from '@/components/ItemGroup.vue'
|
|
import * as linkData from './../data/item-data.json'
|
|
|
|
export default {
|
|
name: 'home',
|
|
components: {
|
|
ItemGroup
|
|
},
|
|
data: () => {
|
|
return {
|
|
items: linkData.default
|
|
}
|
|
},
|
|
props: {
|
|
title: { default: 'Panel', type: String },
|
|
subtitle: { default: 'All your server management tools in one place', type: String }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
h1 {
|
|
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
|
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 3em;
|
|
margin: 0;
|
|
display: inline;
|
|
}
|
|
span.subtitle {
|
|
color: #9F86FF;
|
|
margin: 10px;
|
|
font-style: italic;
|
|
text-shadow: 1px 1px 2px #130f23;
|
|
}
|
|
.item-group-container {
|
|
display: flex;
|
|
margin: 2em 0;
|
|
.item-group-outer {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
</style>
|