feat(client): blur effect for modal

This commit is contained in:
syuilo
2020-07-12 18:14:59 +09:00
parent 426c2fa5d1
commit aae9bc4cf4
11 changed files with 64 additions and 76 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
<div class="ulveipgl">
<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="$emit('closed');">
<div class="bg" ref="bg" v-if="show" @click="close()"></div>
<div class="bg _modalBg" ref="bg" v-if="show" @click="close()"></div>
</transition>
<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
<transition :name="$store.state.device.animation ? 'form' : ''" appear
@@ -119,16 +119,9 @@ export default Vue.extend({
opacity: 0;
}
.ulveipglmagnxfgvitaxyszerjwiqmwl {
.ulveipgl {
> .bg {
display: block;
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#000, 0.7);
}
> .main {