ovdashboard/ui/src/components/TitleBar.vue

42 lines
1,022 B
Vue
Raw Normal View History

2022-09-09 22:41:50 +00:00
<template>
2022-09-10 02:11:36 +00:00
<v-toolbar color="primary" prominent dark>
2022-09-11 22:24:48 +00:00
<v-container class="d-flex pa-0" fluid fill-height>
<div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
2022-09-09 22:41:50 +00:00
2022-09-12 00:39:19 +00:00
<div class="d-flex justify-center text-center mx-auto thw-heading-font">
2022-09-11 23:28:37 +00:00
<slot> <h1>TITLE</h1> </slot>
2022-09-11 22:44:27 +00:00
</div>
2022-09-10 13:11:48 +00:00
2022-09-11 22:24:48 +00:00
<div class="d-flex justify-end slim text-right text-no-wrap">
2022-09-10 13:11:48 +00:00
<div class="flex-column">
2022-09-11 22:59:44 +00:00
<Clock
2022-09-11 23:28:37 +00:00
class="d-flex justify-end font-weight-light text-h6 text-md-h5"
2022-09-11 22:59:44 +00:00
format="DDD"
/>
<Clock
2022-09-11 23:28:37 +00:00
class="d-flex justify-end font-weight-bold text-h5 text-md-h4"
2022-09-11 22:59:44 +00:00
format="T"
/>
2022-09-10 13:11:48 +00:00
</div>
2022-09-11 22:24:48 +00:00
</div>
</v-container>
2022-09-10 02:11:36 +00:00
</v-toolbar>
2022-09-09 22:41:50 +00:00
</template>
2022-09-11 23:28:37 +00:00
<script lang="ts">
2022-09-09 23:14:03 +00:00
import { Component, Vue } from "vue-property-decorator";
2022-09-10 02:19:45 +00:00
import Clock from "./Clock.vue";
2022-09-09 22:41:50 +00:00
2022-09-09 23:14:03 +00:00
@Component({
2022-09-09 22:41:50 +00:00
components: {
2022-09-10 02:19:45 +00:00
Clock,
2022-09-09 22:41:50 +00:00
},
2022-09-09 23:14:03 +00:00
})
export default class TitleBar extends Vue {}
2022-09-09 22:41:50 +00:00
</script>
2022-09-12 00:39:19 +00:00
<style scoped>
2022-09-11 22:24:48 +00:00
.slim {
max-width: 0;
}
2022-09-09 22:41:50 +00:00
</style>