liveh5-nuxt/app/pages/liveRoom/components/PaymentResults/index.vue

<script setup>
import successImg from '@/static/images/zu5554@2x.png'
import errorImg from '@/static/images/zu5561@2x.png'
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'success'
  },
  price: {
    type: Number,
    default: 1000
  }
})
const emit = defineEmits(['cancel','update:show'])
const cancel= () => {
  emit('update:show', false)
}
</script>

<template>
  <div>
    <van-dialog style="overflow: visible" :show="show"  show-cancel-button :show-confirm-button="false" :cancelButtonText="$t('login.back')" cancelButtonColor="#2B53AC" @cancel="cancel">
      <div class="h-145px relative flex justify-center">
        <img :src="type==='success' ? successImg : errorImg" class="w-119px h-120px absolute top--74px z-9999 left-1/2 transform translate-x--1/2" alt="">
        <div class="mt-94px text-#A9A9A9 text-16px">{{price}}</div>
      </div>
    </van-dialog>
  </div>
</template>

<style scoped>

:deep(.van-hairline--top.van-dialog__footer){
  border-top: 1px solid #E7E7E7;
  border-bottom-left-radius:8px ;
  border-bottom-right-radius:8px ;
}
</style>