yihuo/pages/pull_new_user/rule_dialog.vue

<template>
    <view class="cu-modal" :class="{ show: visible }">
        <view class="rule-mask" @click="close"></view>
        <view class="cu-dialog" style="background-color: transparent; width: 100%">
            <view
                class="relative wrapper"
                :style="'background-image:url(' + ossurl.mine.pulluser.ruleBg + ')'"
            >
                <view class="rule_text">
                    <view>
                        <view class="title-top">1.推广步骤</view>
                        <p>(1).点击下方分享链接分享好友;</p>
                        <p>(2).好友点击链接注册登录即完成绑定;</p>
                        <p>(3).好友在宝箱消费，邀请人获得现金礼包;</p>
                        <view class="title-top">2.拉新规则</view>
                        <view class="column">
                            <p>
                                (1).邀请人邀请的所有新用户消费总金额＜30000元，邀请人可获得邀请新用户消费总金额
                            </p>
                            <p>1%的现金奖励;</p>
                            <p>(2).新用户消费总金额≥30000元，邀请人可获得邀请的新用户消费流水2%</p>
                            <p>的现金奖励(超出30000元的部分为2%);</p>
                            <p>
                                (3).分享链接至新用户后，新用户需在该链接直接注册登录，如新用户点开链接后
                            </p>
                            <p>未注册且退出链接，则需要重新点击链接注册方可完成绑定;</p>
                        </view>
                        <view class="title-top">3.注意事项</view>
                        <view class="column">
                            <p>(1).燚火漫域有权调整和修改邀请规则，并通知用户;</p>
                            <p>
                                (2).APP有权监控和限制用户的邀请行为，违规行为将取消奖励并可能受到惩罚;
                            </p>
                            <p>
                                (3).使用邀请好友功能时，用户信息将被收集和记录以确保真实性和合法性;
                            </p>
                            <p>
                                (4).使用邀请好友功能需遵守法律法规和APP规定不得存在刷小号等违规行为;
                            </p>
                            <p>(5).在邀请过程中有任何问题可咨询燚火漫域客服。</p>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="doll_close">
            <view class="close" @click="close">
                <text class="cuIcon-close"></text>
            </view>
        </view>
    </view>
</template>

<script>
    import ossurl from '@/utils/ossurl'
    export default {
        data() {
            return {
                ossurl,
                visible: false
            }
        },
        methods: {
            show() {
                this.visible = true
            },
            close() {
                this.visible = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    p {
        font-size: 12px;
        line-height: 20px;
    }
    .rule-mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    .wrapper {
        z-index: 1001;
        width: 638rpx;
        height: 772rpx;
        margin: 0 auto;
        background-size: 100% 100%;
        .rule {
            width: 100%;
            height: 100%;
        }

        .rule_text {
            position: absolute;
            top: 157rpx;
            left: 62rpx;
            width: 500rpx;
            height: 522rpx;
            overflow-y: scroll;
            padding-bottom: 42rpx;
            .title-top {
                width: 157rpx;
                height: 48rpx;
                background-color: #000;
                border-radius: 48rpx;
                color: #fec433;
                text-align: center;
                line-height: 48rpx;
                margin: 10rpx 0;
            }
        }
    }
    .doll_close {
        position: fixed;
        bottom: 300rpx;
        left: 50%;
        transform: translateX(-50%);
        height: 64rpx;
        width: 64rpx;
        background: #d8d8d8;

        border-radius: 50%;
        .close {
            width: 64rpx;
            font-size: 32rpx;
            height: 64rpx;
            color: #444444;
            text-align: center;
            line-height: 64rpx;
        }
    }
</style>