gypsy-crm-frontend-vu/components/cwg-SuccessPrompt.vue

<template>
  <view class="success-prompt-fullscreen" v-if="props.show">
    <image mode="widthFix" src="/static/images/vector.png" alt="success" />
    <view class="success-prompt-title">{{ props.title }}</view>
    <view class="success-prompt-desc">{{ props.desc }}</view>
    <view class="fixed-btn">
      <view class="cwg-button">
        <u-button type="primary" block @click="props.btnClick">{{ t('Custom.Settings.Title') }}</u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const props = withDefaults(
  defineProps<{
    title?: string;
    btnTitle?: string;
    desc?: string;
    btnClick?: () => void;
    show?: boolean;
  }>(),
  {
    title: "Retrive Successfully",
    btnTitle: "Done",
    desc: "You can now use your new password to make secure transactions.",
    btnClick: () => { },
  }
);
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.success-prompt-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.success-prompt-img {
  margin-bottom: px2rpx(62);
}

.success-prompt-title {
  text-align: center;
  font-size: px2rpx(24);
  font-weight: bold;
  color: #222;
  line-height: px2rpx(28);
  margin-bottom: px2rpx(31);
}

.success-prompt-desc {
  font-size: px2rpx(16);
  color: var(--bs-heading-color);
  text-align: center;
  max-width: px2rpx(620);
  line-height: px2rpx(30);
  padding: 0 px2rpx(20);
}
</style>