<template>
|
<div class="scan" v-if="$route.name == 'start'" ref="scan">
|
<transition name="maskAnimate">
|
<div v-show="modelFlag == true" class="scan-box">
|
<transition name="zoomAnimate">
|
<div v-show="modelFlag == true" class="scan-dialog">
|
<div class="line"></div>
|
<div class="content">
|
<i class="iconfont icon-saoma" />
|
<span>{{ modelContent }}</span>
|
</div>
|
</div>
|
</transition>
|
</div>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "Scan",
|
data() {
|
return {
|
modelFlag: false, //false为消失，true为显示
|
modelContent: '',//弹窗内容
|
scanType: ''
|
}
|
},
|
watch: {
|
// 通过事件总线发送弹窗状态
|
modelFlag: function (newVal) {
|
this.$bus.$emit('isScaning', newVal)
|
},
|
},
|
methods: {
|
//显示弹窗，记性复制
|
show(options) {
|
this.close();
|
if (this.modelFlag == true) { return };
|
this.modelContent = options.modelContent;
|
this.scanType = options.scanType;
|
this.modelFlag = true;
|
},
|
//关闭弹窗，数据重置
|
close() {
|
this.modelFlag = false;
|
this.modelContent = '';
|
},
|
},
|
mounted() {
|
},
|
destroyed() {
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.scan-box {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
background-color: rgba(0, 0, 0, .5);
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.scan-dialog {
|
width: 500px;
|
height: 400px;
|
background-color: #002244;
|
border-radius: 10px;
|
overflow: hidden;
|
position: relative;
|
}
|
.line {
|
height: calc(100% - 2px);
|
width: 100%;
|
background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #0089ff 211%);
|
border-bottom: 1px solid #0089ff;
|
transform: translateY(-100%);
|
animation: radar-beam 2s infinite;
|
animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
|
opacity: .5;
|
}
|
|
@keyframes radar-beam {
|
0% {
|
transform: translateY(-100%);
|
}
|
|
100% {
|
transform: translateY(0);
|
}
|
}
|
|
.content {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
i {
|
font-size: 180px;
|
margin-bottom: 50px;
|
color: #0089ff;
|
}
|
|
span {
|
font-size: 30px;
|
color: #fff;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.zoomAnimate-enter-active {
|
animation: bounceIn 0.5s;
|
}
|
|
.zoomAnimate-leave-active {
|
animation: bounceOut 0.2s;
|
}
|
|
.maskAnimate-enter-active {
|
animation: fadeIn 0.5s;
|
}
|
|
.maskAnimate-leave-active {
|
animation: fadeOut 0.2s;
|
}
|
</style>
|
