<template>
<div class="plLoading">
<div class="plLoadingContent">
<div class="plLoadingLogo">
<div style="padding-right:50px">
<img src="/static/xxxx.jpg" style="height:80px;80px;border-radius: 50%;">
</div>
<div>
<h1 style="color:white">亿信互联智能划控平台</h1>
</div>
</div>
<div class="plLoadingCon">
<el-progress :text-inside="true" :stroke-width="15" :percentage="count" status="success" />
</div>
<div ref="plLoadingNum" class="plLoadingNum">{{ count }}/100条</div>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
show: true,
count: '',
timer: null
}
},
created() {
this.getCode()
},
methods: {
getCode() {
const TIME_COUNT = 100
if (!this.timer) {
this.count = 0
this.show = false
this.timer = setInterval(() => {
if (this.count >= 0 && this.count !== TIME_COUNT) {
this.count = this.count + 10
} else {
this.show = true
clearInterval(this.timer)
this.timer = null
const self = this
this.$notify({
title: '成功',
duration: 1000,
message: '智能划控成功!',
type: 'success'
})
setInterval(function() {
self.$emit('fun', 'success')
}, 1000)
}
}, 1000)
}
}
}
}
</script>
<style>
.plLoading{
100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 100;
background-color: #00101d;
}
.plLoadingContent{
500px;
height: 220px;
position: absolute;
margin: 0 auto;
top: 50%;
left: 50%;
margin-top: -110px;
margin-left: -250px;
}
.plLoadingLogo{
display: flex;
align-items: center;
height: 60px;
}
.plLoadingCon{
500px;
height: 16px;
margin-top: 100px;
border-radius: 8px;
background-color: #222222;
}
.plLoadingShow{
transition: width .5s;
height: 16px;
border-radius: 8px;
background-color: #0062b2;
position: absolute;
}
.plLoCir{
transition: left .5s;
position: absolute;
16px;
height: 16px;
border-radius: 8px;
background-color: #0062b2;
box-shadow: 0 0 20px #008cff;
}
.plLoadingNum{
font-size: 14px;
color: #0062b2;
margin-top: 20px;
}
.displayNone{
display: none;
}
</style>
效果
