You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.9 KiB
114 lines
2.9 KiB
3 years ago
|
<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>
|