hotomoe/src/web/app/desktop/views/components/ui.header.clock.vue

<template>
<div class="clock">
	<div class="header">
		<time ref="time">
			<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
			<br>
			<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
		</time>
	</div>
	<div class="content">
		<mk-analog-clock/>
	</div>
</div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
	data() {
		return {
			now: new Date(),
			clock: null
		};
	},
	computed: {
		yyyy(): number {
			return this.now.getFullYear();
		},
		mm(): string {
			return ('0' + (this.now.getMonth() + 1)).slice(-2);
		},
		dd(): string {
			return ('0' + this.now.getDate()).slice(-2);
		},
		hh(): string {
			return ('0' + this.now.getHours()).slice(-2);
		},
		nn(): string {
			return ('0' + this.now.getMinutes()).slice(-2);
		}
	},
	mounted() {
		this.tick();
		this.clock = setInterval(this.tick, 1000);
	},
	beforeDestroy() {
		clearInterval(this.clock);
	},
	methods: {
		tick() {
			this.now = new Date();
		}
	}
});
</script>

<style lang="stylus" scoped>
.clock
	display inline-block
	overflow visible

	> .header
		padding 0 12px
		text-align center
		font-size 10px

		&, *
			cursor: default

		&:hover
			background #899492

			& + .content
				visibility visible

			> time
				color #fff !important

				*
					color #fff !important

		&:after
			content ""
			display block
			clear both

		> time
			display table-cell
			vertical-align middle
			height 48px
			color #9eaba8

			> .yyyymmdd
				opacity 0.7

	> .content
		visibility hidden
		display block
		position absolute
		top auto
		right 0
		z-index 3
		margin 0
		padding 0
		width 256px
		background #899492

</style>