131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
<script setup>
|
|
|
|
const props = defineProps(['unitydate', 'gregdate']);
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.todayblock {
|
|
display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
|
|
margin-left: auto; margin-right: 1.2rem;
|
|
}
|
|
|
|
.todayis{
|
|
font-size: 2.4rem;
|
|
text-align: right;
|
|
margin-left: auto;
|
|
|
|
}
|
|
|
|
.datewrap {
|
|
display: flex;
|
|
}
|
|
|
|
.dateblock {
|
|
display: grid;
|
|
grid-template-columns: 6rem repeat(2, auto) 2.4rem repeat(2, auto);
|
|
row-gap: .6rem;
|
|
}
|
|
|
|
.gregblock, .unityblock, .labelblock {
|
|
display: grid; grid-template-columns: subgrid;
|
|
grid-column: 1 / 7;
|
|
text-align: center;
|
|
gap: .6rem;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.unityblock {
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
.unitylabel, .greglabel {
|
|
font-size: 1rem;
|
|
text-align: right;
|
|
margin-right: .6rem;
|
|
}
|
|
|
|
.labelspan {
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.monthlabel {
|
|
width: fit-content;
|
|
justify-self: center;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
|
|
.unitylabel, .greglabel {
|
|
margin: 0;
|
|
font-size: .9rem;
|
|
}
|
|
|
|
.gregblock, .unityblock, .labelblock {
|
|
gap: .3rem;
|
|
|
|
}
|
|
|
|
.blockspan {
|
|
margin-left: .3rem; margin-right: .3rem;
|
|
}
|
|
|
|
.todayblock {
|
|
margin: 0;
|
|
}
|
|
|
|
.todayis {
|
|
margin-left: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.datewrap::after {
|
|
content: '';
|
|
width: 6rem;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<template>
|
|
|
|
<div class="todayblock">
|
|
<span class="todayis">Today's date is</span>
|
|
<div class="datewrap">
|
|
<div class="dateblock">
|
|
<div class="gregblock">
|
|
<span class="greglabel">Gregorian</span>
|
|
<span class="blockspan">{{ gregdate.getFullYear() }}</span>
|
|
<span class="blockspan"></span>
|
|
<span class="blockspan">{{ gregdate.getMonth() + 1 }}</span>
|
|
<span class="blockspan"></span>
|
|
<span class="blockspan">{{ gregdate.getDate() }}</span>
|
|
</div>
|
|
<div class="unityblock">
|
|
<span class="unitylabel">Unity</span>
|
|
<span class="unityyear">{{ unitydate.year }}</span>
|
|
<span class="blockspan">/</span>
|
|
<span class="blockspan">{{ unitydate.month + 1 }}</span>
|
|
<span class="blockspan">/</span>
|
|
<span class="blockspan">{{ unitydate.day + 1 }}</span>
|
|
</div>
|
|
<div class="labelblock">
|
|
<span></span>
|
|
<span class="labelspan">Year</span>
|
|
<span></span>
|
|
<div class="monthlabel">Month</div>
|
|
<span></span>
|
|
<span class="labelspan">Day</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template> |