<template>
    <div class="error" v-show="visibility">
      <slot></slot>
      <i class="closeX" @click="close">&times;</i>
    </div>
</template>
<script>
  export default {
    name: "error",
    props:['visible'],
    data(){
      return{
        visibility: this.visible
      }
    },
    methods:{
      close(){
        this.visibility = false
      }
    }
  }
</script>
<style scoped>
  .error{
    padding: .2rem .32rem;
    background: linear-gradient(bottom,#f7ebec,#faeeef);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    font-size: .24rem;
    color: #ee3852;
  }
  .closeX{
    float: right;
    font-size: .36rem;
    color: #ee3852;
    margin-top: -0.08rem;
  }
</style>
