Clean up
This commit is contained in:
parent
172ebab7bd
commit
0e40d4e796
@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="eqryymyo">
|
|
||||||
<div class="header">
|
|
||||||
<time ref="time" class="_ghost">
|
|
||||||
<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 _panel _ghost">
|
|
||||||
<MkClock/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import MkClock from './analog-clock.vue';
|
|
||||||
import * as os from '@/os';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
MkClock
|
|
||||||
},
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
clearInterval(this.clock);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
tick() {
|
|
||||||
this.now = new Date();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.eqryymyo {
|
|
||||||
display: inline-block;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
> .header {
|
|
||||||
padding: 0 12px;
|
|
||||||
padding-top: 4px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: Lucida Console, Courier, monospace;
|
|
||||||
|
|
||||||
&:hover + .content {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
> time {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
> .yyyymmdd {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .content {
|
|
||||||
opacity: 0;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: auto;
|
|
||||||
right: 0;
|
|
||||||
margin: 16px 0 0 0;
|
|
||||||
padding: 16px;
|
|
||||||
width: 230px;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
Reference in New Issue
Block a user