122 lines
2.1 KiB
Vue
122 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<transition name="bounce">
|
|
<div class="alert-wrap">
|
|
<div class="text">{{alertMsg}}</div>
|
|
<div class="hairline--top">
|
|
<button class="button--large" @click="onClose"><span>确认</span></button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition name="fade">
|
|
<div class="overlay"></div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
data () {
|
|
return {}
|
|
},
|
|
computed: mapState({
|
|
alertMsg: state => state.com.alertMsg
|
|
}),
|
|
methods: {
|
|
onClose () {
|
|
this.$store.dispatch('showAlert', false)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.bounce-enter {
|
|
opacity 0
|
|
transform translate3d(-50%, -50%, 0) scale(0.7)
|
|
}
|
|
.bounce-leave-active {
|
|
opacity 0
|
|
transform translate3d(-50%, -50%, 0) scale(0.9)
|
|
}
|
|
.fade-enter-active
|
|
animation 0.3s fade-in
|
|
.fade-leave-active
|
|
animation 0.3s fade-out
|
|
.overlay
|
|
position fixed
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
background-color rgba(0, 0, 0, 0.7)
|
|
z-index 2012
|
|
.alert-wrap
|
|
position fixed
|
|
top 50%
|
|
left 50%
|
|
width 40%
|
|
transition .3s
|
|
transform translate3d(-50%, -50%, 0)
|
|
overflow hidden
|
|
border-radius 4px
|
|
border 1px solid #ebeef5
|
|
background-color #fff
|
|
box-shadow 0 2px 12px 0 rgba(0,0,0,.3)
|
|
font-size .28rem
|
|
line-height .42rem
|
|
color #929292
|
|
z-index 2018
|
|
.text
|
|
padding 20px 50px
|
|
max-height 60%
|
|
min-height 80px
|
|
overflow-y auto
|
|
text-align center
|
|
-webkit-overflow-scrolling touch
|
|
white-space pre-wrap
|
|
font-size 30px
|
|
line-height 40px
|
|
color #606266
|
|
[class*='hairline']
|
|
position relative
|
|
padding 5px 0 0
|
|
[class*='hairline']::after
|
|
content ' '
|
|
position absolute
|
|
pointer-events none
|
|
box-sizing border-box
|
|
top -50%
|
|
left -50%
|
|
right -50%
|
|
bottom -50%
|
|
transform scale(0.5)
|
|
border 0 solid #ebedf0
|
|
.hairline--top::after
|
|
border-top-width 1px
|
|
.button--large
|
|
width 100%
|
|
height 80px
|
|
line-height 80px
|
|
font-size 30px
|
|
color #e74f1a
|
|
background-color #dadee2
|
|
</style>
|