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