diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue index 9aa6302b..26dc752a 100644 --- a/src/components/Countdown.vue +++ b/src/components/Countdown.vue @@ -1,20 +1,46 @@ <script lang="ts" setup> import Countdown from '@chenfengyuan/vue-countdown'; +import { ref } from 'vue'; const props = defineProps({ time: { type: Number }, css: { type: String }, }); + +const s = ref(0) + </script> <template> <Countdown v-if="time" :time="time > 0 ? time : 0" v-slot="{ days, hours, minutes, seconds }" + class="countdown-container justify-items-center " > - <span class="text-primary font-bold" :class="css">{{ days }}</span> days + <span class="text-primary font-bold " :class="css">{{ days }}</span> days <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours - <span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes - <span class="text-primary font-bold" :class="css">{{ seconds }}</span> seconds + <span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes + <span class="text-primary font-bold w-40" :class="css"> + <Transition name="slide-up"> + <span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span> + <span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span> + </Transition> + </span> + <span class="ml-10">seconds</span> </Countdown> </template> + +<style> +.countdown-container { + display: inline-flexbox; + position: relative; +} + +.countdown { + position: absolute; + width: 45%; + text-align: right; + float: right; +} + +</style> diff --git a/src/components/dynamic/TextElement.vue b/src/components/dynamic/TextElement.vue index a0c0704d..5e9ae150 100644 --- a/src/components/dynamic/TextElement.vue +++ b/src/components/dynamic/TextElement.vue @@ -70,7 +70,7 @@ const isConvertable = computed(() => { </div> </span> <span v-else class="flex"><span>{{ text }}</span> - <span v-if="isConvertable" @click="toHexOutput = !toHexOutput" class="ml-2"> + <span v-if="isConvertable" @click="toHexOutput = !toHexOutput" class="ml-2 cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /> </svg> diff --git a/src/style.css b/src/style.css index d710b6c0..98d838c1 100644 --- a/src/style.css +++ b/src/style.css @@ -36,4 +36,19 @@ html[data-theme='dark'] { .table th:first-child { position: relative; z-index: 2; +} + +.slide-up-enter-active, +.slide-up-leave-active { + transition: all 0.25s ease-out; +} + +.slide-up-enter-from { + opacity: 0; + transform: translateY(calc(80%)); +} + +.slide-up-leave-to { + opacity: 0; + transform: translateY(-calc(15%)); } \ No newline at end of file