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
<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> |