mrr.sj.front/components/tips-popup/tips-popup.vue

121 lines
2.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="tips-popup" v-if="show">
<view class="mask" @click="handleClose"></view>
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">提现规则</text>
<view class="close-btn" @click="handleClose">
<image src="/static/images/close.png" mode="aspectFit" class="close-icon"></image>
</view>
</view>
<view class="popup-body">
<view class="rule-item">
<text class="rule-text">发起提现申请后台审核通过线下进行打款</text>
</view>
<view class="rule-item">
<text class="rule-text">请您确认绑定的支付宝微信号的准确性</text>
</view>
<view class="rule-item">
<text class="rule-text">后台将按照您绑定的提现账户进行进行转账</text>
</view>
<view class="rule-item">
<text class="rule-text">如因提交的信息有误导致的转账失败或转错账户将由用户自行承担平台不承担任何责任</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'tips-popup',
props: {
show: {
type: Boolean,
default: false
}
},
methods: {
handleClose() {
this.$emit('close-popup', false)
}
}
}
</script>
<style>
.tips-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.popup-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 600rpx;
background: #FFFFFF;
border-radius: 24rpx;
overflow: hidden;
}
.popup-header {
position: relative;
height: 112rpx;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.popup-title {
font-size: 32rpx;
color: #333333;
font-weight: 500;
}
.close-btn {
position: absolute;
right: 24rpx;
top: 50%;
transform: translateY(-50%);
padding: 16rpx;
}
.close-icon {
width: 32rpx;
height: 32rpx;
}
.popup-body {
padding: 32rpx 40rpx 48rpx;
}
.rule-item {
margin-bottom: 24rpx;
}
.rule-item:last-child {
margin-bottom: 0;
}
.rule-text {
font-size: 28rpx;
color: #333333;
line-height: 1.6;
}
</style>