180 lines
3.1 KiB
Vue
180 lines
3.1 KiB
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>
|