<template>
    <div class="datetime">
        <div class="date">
            <span>日期：</span>
            <span class="value">{{ datetime[0] }}</span>
            <span>年</span>
            <span class="value">{{ datetime[1] }}</span>
            <span>月</span>
            <span class="value">{{ datetime[2] }}</span>
            <span>日</span>
        </div>
        <div class="time">
            <span>时间：</span>
            <span class="value">{{ datetime[3] }}</span>
            <span>时</span>
            <span class="value">{{ datetime[4] }}</span>
            <span>分</span>
            <span class="value">{{ datetime[5] }}</span>
            <span>秒</span>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

const datetime = reactive([]);

const init = () => {
    let date = new Date();
    let year = date.getFullYear() + '';
    let month = date.getMonth() + 1;
    month = month < 10 ? '0' + month : month;
    let day = date.getDay();
    day = day < 10 ? '0' + day : day;

    let hour = date.getHours();
    hour = hour < 10 ? '0' + hour : hour;
    let minute = date.getMinutes();
    minute = minute < 10 ? '0' + minute : minute;
    let second = date.getSeconds();
    second = second < 10 ? '0' + second : second;

    datetime[0] = year;
    datetime[1] = month;
    datetime[2] = day;
    datetime[3] = hour;
    datetime[4] = minute;
    datetime[5] = second;
    requestAnimationFrame(init);
}
requestAnimationFrame(init);

</script>

<style lang="stylus" scoped>
.datetime
    div
        display inline-block
    .date
        width 202px
        .value
            padding 2px 5px
            background linear-gradient(rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.5))
    .time   
        white 120px
        margin-left 30px
        .value
            padding 2px 5px
            background linear-gradient(rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.5))
</style>