fission-star-applet-250304/components/home/popupAuditMsg.vue

<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0.8"
    :customStyle="{
      backgroundColor: 'transparent',
    }"
  >
    <view class="popup">
      <image class="popup-bg" src="@/static/image/home/bg-audit-pass.png"></image>
      <view class="popup-content flex">
        <text class="value">{{ count }}</text>
        <image class="unit" src="@/static/image/home/text-share.png"></image>
      </view>
      <view class="flex popup-btns">
        <button plain class="btn-simple" @click="close">
          <image class="popup-btn" src="@/static/image/home/cancel.png"></image>
        </button>
        <button plain class="btn-simple" @click="go">
          <image class="popup-btn" src="@/static/image/home/go.png"></image>
        </button>
      </view>
    </view>
  </uv-popup>
</template>

<script>
	export default {
    props: {
      count: {
        type: Number,
        default: 15
      }
    },
		data() {
			return {
      }
    },
    methods: {
      open() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      go() {
				uni.navigateTo({
					url: `/pages/index/record`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
.popup {
  position: relative;
  width: 578rpx;

  &-bg {
    width: 578rpx; height: 317rpx;
  }

  &-content {
    position: absolute;
    top: 123rpx;
    left: 50%;
    transform: translateX(-50%);

    .value {
      color: #FF2323;
      font-size: 102rpx;
      font-weight: 700;
      line-height: 125rpx;
    }

    .unit {
      width: 299rpx;
      height: 77rpx;
      margin-left: 9rpx;
    }
  }

  &-btns {
    justify-content: space-between; 
    margin-top: 56rpx;
  }

  &-btn {
    width: 265rpx; 
    height: 84rpx;
  }
}
</style>