42 lines
No EOL
1,022 B
Vue
42 lines
No EOL
1,022 B
Vue
<template>
|
|
<v-toolbar color="primary" prominent dark>
|
|
<v-container class="d-flex pa-0" fluid fill-height>
|
|
<div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
|
|
|
|
<div class="d-flex justify-center text-center mx-auto thw-heading-font">
|
|
<slot> <h1>TITLE</h1> </slot>
|
|
</div>
|
|
|
|
<div class="d-flex justify-end slim text-right text-no-wrap">
|
|
<div class="flex-column">
|
|
<Clock
|
|
class="d-flex justify-end font-weight-light text-h6 text-md-h5"
|
|
format="DDD"
|
|
/>
|
|
<Clock
|
|
class="d-flex justify-end font-weight-bold text-h5 text-md-h4"
|
|
format="T"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</v-container>
|
|
</v-toolbar>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import Clock from "./Clock.vue";
|
|
|
|
@Component({
|
|
components: {
|
|
Clock,
|
|
},
|
|
})
|
|
export default class TitleBar extends Vue {}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.slim {
|
|
max-width: 0;
|
|
}
|
|
</style> |