.tn-toast-box
  pointer-events none // 去除所有事件，只有浮层效果
  display flex
  position fixed
  top 0
  left 0
  z-index 10000
  width 100%
  height 100%
  justify-content center
  align-items center
  // pointer-events none // 去除所有事件，只有浮层效果
.tn-toast
  box-sizing border-box
  max-width 80%
  min-width 200px
  line-height 20px
  padding 10px 20px
  // transform translate(-50%, 0)
  text-align center
  z-index 10000
  font-size 15px
  color #fff
  border-radius 5px
  background rgba(0, 0, 0, 0.7)
  animation tn-show-toast 0.5s
  &&__hasType
    display flex
    min-height 120px
    padding 20px 20px
    flex-direction column
    justify-content center
  span  
    padding-top 8px
  &__mask
    pointer-events none // 去除所有事件，只有浮层效果
    position fixed
    margin 0
    top 0
    right 0
    bottom 0
    left 0
    z-index 10000

@keyframes tn-show-toast
  from
    opacity 0
  to
    opacity 1

@keyframes tn-show-toast
  from
    opacity 0
  to
    opacity 1