<template>
    <div :class="$style.root">
        <u-linear-layout type="flex" justify="space-around" :class="$style.linear">
            <s-dashboard-link type="index" to="/dashboard"></s-dashboard-link>
            <s-dashboard-link type="video" to="/video"></s-dashboard-link>
            <s-dashboard-link type="device" to="/device"></s-dashboard-link>
            <s-dashboard-link type="list" to="/list"></s-dashboard-link>
        </u-linear-layout>
    </div>
</template>

<script>
import SDashboardLink from './s-dashboard-link.vue';

export default {
    components: {
        SDashboardLink,
    },
}
</script>

<style module>
.root {
    width: 100vw;
    height: 100vh;
    background: url(./blue.jpg) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.linear {
    width: 100%;
}
</style>
