buddhism/pages/future/components/goToCertification.vue

<script>
import CommonEnum from "../../../enum/common";

export default {
  name: "goToCertification",
  props: {
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    CommonEnum() {
      return CommonEnum;
    },
  },
  data() {
    return {
      iconUrl: {
        close: "https://api.ccttiot.com/image-1758006069513.png",
      },
    };
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
    goToCertification() {
      this.$emit("goToCertification");
    },
  },
};
</script>

<template>
  <view v-if="visible" class="page">
    <view class="box">
      <view class="title"> 善举需记 福报有凭</view>
      <view class="tip">实名认证，留存您的慈悲痕迹</view>
      <image :src="CommonEnum.LotusMeditation" class="flower"></image>
      <view class="tip2">烦请完成实名认证，留存您的慈悲痕迹</view>
      <button @click="goToCertification">
        <text>前去认证</text>
      </button>
      <view class="close" @click="handleClose">
        <image
          :src="iconUrl.close"
          mode="widthFix"
          style="width: 56rpx; height: 56rpx"
        ></image>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色，50% 透明度 */
}

.box {
  position: absolute;
  left: 56rpx;
  top: 522rpx;
  width: 638rpx;
  height: 494rpx;
  border-radius: 32rpx;
  opacity: 1;

  background: #ffffff;
}

.title {
  position: absolute;
  left: 44rpx;
  top: 88rpx;
  width: 370rpx;
  height: 60rpx;
  opacity: 1;

  font-family: AlibabaPuHuiTi;
  font-size: 44rpx;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0em;

  font-feature-settings: "kern" on;
  color: #c7a26d;
}

.tip {
  position: absolute;
  left: 44rpx;
  top: 170rpx;

  height: 38rpx;
  opacity: 1;

  font-family: AlibabaPuHuiTi;
  font-size: 28rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  font-feature-settings: "kern" on;
  color: #c7a26d;
}

.tip2 {
  position: absolute;
  left: 44rpx;
  top: 262rpx;

  height: 36rpx;
  opacity: 1;

  font-family: AlibabaPuHuiTi;
  font-size: 26rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  font-feature-settings: "kern" on;
  color: #522510;
}

button {
  position: absolute;
  left: 44rpx;
  top: 352rpx;
  width: 548rpx;
  height: 86rpx;
  border-radius: 47rpx;
  opacity: 1;

  background: #c7a26d;

  text {
    width: 126rpx;
    height: 44rpx;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}

.flower {
  position: absolute;
  left: 428rpx;
  top: 24rpx;
  width: 30.72%;
  height: 29.53%;
  opacity: 1;
}

.close {
  position: absolute;
  left: 292rpx;
  bottom: -102rpx;
  width: 56rpx;
  height: 56rpx;
  //background-color: #c7a26d;

  image {
    width: 56rpx;
    height: 56rpx;
  }
}
</style>