<template>
  <div class="toast">
    <div class="toast-wrap">
      <div class="text">
        {{toastMsg}}
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: mapState({
    toastMsg: state => state.com.toastMsg
  })
}
</script>

<style lang="stylus" scoped>
.toast
  .toast-wrap
    position fixed
    z-index 10000
    width 100%
    height .32rem
    line-height .32rem
    text-align center
    left 50%
    top 50%
    transform translate(-50%, -50%)
    .text
      display inline-block
      width auto
      padding 0 10px
      border-radius 10px
      background rgba(0, 0, 0, 0.6)
      font-size .16rem
      color #fff
</style>
