vue.js 弹层
<div class="open-box" v-if="SystemShow" @click="ColseShow">
<div class="open-box-content">
<h3>系统提示</h3>
<p>系统检测到您是天下医家的医护人员
<br>可以通过APP进行点餐
<br>获得更多优惠</p>
<div class="open-box-btn">
<div class="open-box-btn-left">
<button>继续使用</button>
</div>
<div class="open-box-btn-right">
<button>下载天下医家</button>
</div>
</div>
</div>
</div>
<style>
.open-box {
position: fixed;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
left: 0; /**定位时需注意 不然ios找不到显示地方**/
top: 0; /**定位时需注意 不然ios找不到显示地方**/
z-index: 100;
color: #fff;
text-align: center;
}
.open-box-content {
background: #fff;
border-radius: 3px;
width: 305px;
margin: 0 auto;
margin-top: 35%;
}
.open-box-content h3 {
width: 100%;
color: #5089fc;
text-align: center;
border-bottom: solid 1px #5089fc;
height: 55px;
line-height: 55px;
font-size: 21px;
}
.open-box-content p {
width: 100%;
text-align: center;
line-height: 24px;
color: #333333;
font-size: 16px;
margin-top: 20px;
}
.open-box-btn {
width: 100%;
overflow: hidden;
padding: 25px 0 18px;
}
.open-box-btn-left {
width: 50%;
float: left;
}
.open-box-btn-left button {
width: 90%;
border-radius: 2px;
border: none;
background: #e6e6e6;
color: #656565;
height: 40px;
line-height: 38px;
font-size: 16px;
outline: none;
cursor: pointer;
}
.open-box-btn-right {
width: 50%;
float: right;
}
.open-box-btn-right button {
width: 90%;
border-radius: 2px;
border: none;
background: #5089fc;
color: #ffffff;
height: 40px;
line-height: 38px;
font-size: 16px;
outline: none;
cursor: pointer;
}
</style>
<script>
export default {
data() {
return {
OpenAppShwo: true
}
},
methods: {
//在哪调用 就在哪@click="方法名"
OpenApp() {
this.OpenAppShwo = !this.OpenAppShwo
},
CloseAp() {
this.OpenAppShwo = !this.OpenAppShwo
}
}
}
</script>
