<template>
<div id="kickPage" v-show="mainKicked">
<div class="kickModal">
<div class="kickHead"><span class="el-icon-warning"> 下线通知</span></div>
<div class="kickContent">
<p>账号在其他地点登录,您已下线</p>
<p v-show="streamType">直播仍在进行</p>
<button @click="loginIn">重新登录</button>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "kickPage",
data() {
return {};
},
computed: {
...mapGetters({
mainKicked: 'getMainKicked', //获取是否被踢状态
streamType:'getStreamType',//当前谁在推流
})
},
methods:{
loginIn:function(){
this.$router.push("/");
}
}
};
</script>
<style lang="less" scoped>
#kickPage {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
box-sizing: border-box;
}
.kickModal {
width: 300px;
height: 300px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.03);
}
.kickHead {
width: 100%;
height: 40px;
background-color: #363f57;
border-radius: 2px;
text-align: center;
span {
color: #f25f5c;
line-height: 40px;
font-size: 16px;
}
}
.kickContent {
height: calc(100% - 60px); //减号左右有空格
padding: 10px;
text-align: center;
p {
margin: 30px 0;
}
button {
width: 120px;
height: 35px;
border-radius: 20px;
font-size: 16px;
color: #fff;
border: none;
outline: none;
margin-top: 10px;
background-color: #66b1ff;
box-shadow: 0 4px 12px 0 rgba(36, 85, 112, 0.3);
cursor: pointer;
}
button:hover {
background-color: #66b1ffd1;
}
}
</style>
模态框实现下线通知
最新推荐文章于 2021-02-21 22:51:34 发布