<template>
<div class="wzhalertcode" :style="{visibility:txqrcodeFlag?'visible':'hidden'}">
<div class="qrcodeBox">
<div class="qrcodeBoxtitle">{{wzhtopstr}}</div>
<img :src="txqrcodeImg" />
<p class="qrcodeBoxMsg">-{{short_name}}-</p>
<slot></slot>
<div @click="txqrcodetap" class="qrcodeclose">关闭</div>
</div>
</div>
</template>
<script>
export default {
name:'wzhalertcode',
props: {
txqrcodeFlag:{
type:Boolean,
default:false
},
short_name: {
type: 'string',
},
txqrcodeImg:{
type: 'string',
},
wzhtopstr:{
type: 'string',
},
},
data(){
return {
};
},
created(){
},
methods:{
txqrcodetap:function(){
this.$emit('update:txqrcodeFlag',false);
},
},
mounted(){
}
}
</script>
<style scoped lang="less">
.wzhalertcode{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
align-items: center;
visibility: hidden;
z-index: 10000;
background-color: rgba(0,0,0,0.4);
.qrcodeBox{
display: block;
width: 450px;
background-color: #fff;
border-radius: 20px;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, 0%);
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 20;
max-height: 90%;
-webkit-box-direction: normal;
-ms-user-select: none;
max-width: 100%;
-webkit-box-orient: vertical;
.qrcodeBoxtitle{
font-size: 16px;/*no*/
text-align: center;
height: 60px;
line-height: 60px;
font-weight: bold;
padding-top: 8px;/*no*/
padding-bottom: 15px;/*no*/
}
img{
display: block;
width:380px;
margin:0 auto;
max-width: 380px;
}
.qrcodeBoxMsg{
font-size: 12px;/*no*/
text-align: center;
padding-top: 10px;/*no*/
margin-bottom: 20px;
}
.qrcodeclose{
display: block;
width: 100%;
text-align: center;
height:60px;
line-height: 60px;
font-size: 14px;/*no*/
color: #999;
border-top: 1px solid #ccc;/*no*/
}
}
}
</style>
我用的是vue,这是个组件