<template>
    <div class="container">
        <div class="center_box" v-loading="loading" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0)">
            <div class="top_box">
                <div class="top_txt">加载中...</div>
                <div class="bot_txt">请耐心等待</div>
            </div>
            <div class="bot_box"><span class="txt">{{date}} {{time}}</span></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            date:'',
            time:'',
            loading:true
        }
    },
    created() {
       this.getTime() 
    },
    methods: {
        getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
        // this.speedValue = Math.floor(Math.random() * 90) + 10;
      }, 1000);
    },
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    },
}
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("@/assets/img/stop_bag.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;

    .center_box{
        width: 529px;
        height: 642px;
        background: url("@/assets/img/wait_bag.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top_box{
            margin-top: 25%;
        }   

        .top_txt{
            font-size: 48px;
            color: #c47516;
            font-weight: bold;
        }

        .bot_txt{
            font-size: 28px;
            color: #c47516;
            margin-top: 10px;
        }

        .bot_box{
            width: 100%;
            height: 17%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #fff7cc;
            font-weight: 300;
            .txt{
                text-shadow: 2px 2px 4px #390910;
            }
        }

        ::v-deep .el-loading-spinner{
            top: 5% !important;
            i{
                color: #fff;
                font-size: 85px;
            }
        }
    }
}
</style>