<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 10001
    width 100%
    height 1rem
    line-height 1rem
    text-align center
    left 50%
    top 50%
    transform translate(-50%, -50%)
    .text
      display inline-block
      width auto
      text-align center
      padding 0 .5rem
      border-radius 10px
      background #858586
      font-size .32rem
      color #fff
</style>
