<template>
  <view class="top-tip" v-if="visible">
      <view class="title">{{ title }}</view>
      <view class="content">
         {{ content }}
      </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    content: {
        type: String,
        default: ''
    }
})

const open = () => {
    visible.value = true
}
const close = () => {
    visible.value = false
}

defineExpose({
    open,
    close
})

</script>

<style scoped lang="scss">
.top-tip{
    position: fixed;
    top: 180rpx;
    left: 40rpx;
     right:40rpx;
    padding: 20rpx;
    border-radius: 16rpx;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999999999;
    .title{
        font-size: 32rpx;
        color: #fff;
        text-align: left;
        
    }
    .content{
        font-size: 28rpx;
        color: #fff;
        text-align: left;
        margin-top: 25rpx;
        line-height: 1.5;
    }
}
</style>