GPU_Web/src/views/saleActive/invite.vue

<template>
    <div class="active_body">
        <div class="active_banner">
            <img src="@/assets/222.png" alt="" srcset="" width="100%">
        </div>
        <div class="active_content">
            <div style="margin-top: 20px;width: 80%;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div style="font-size: 24px;font-weight: bold;">丰厚奖励与回报</div>
                    <!-- <div style="font-size: 14px;color:#1677ff;cursor: pointer;" @click="router.push('/active/newUserDetail')">活动详情 ></div> -->
                </div>
                <div style="display: flex;align-items: center;gap: 30px;justify-content: space-between;">
                    <div
                        style="background-color: #ffffff;margin: 20px 0;padding: 30px;flex: 1;border-radius: 10px;border: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
                        <div>
                            <div>新用户可获得50算力券</div>
                            <div style="color: rgba(16, 80, 244, 1);margin-top: 20px;cursor: pointer;"
                                @click="router.push({path: '/active/newUserDetail',query: {type: 'invite'}})">规则详情
                            </div>
                        </div>
                        <div> <img src="@/assets/123.png" alt="" srcset="" width="50px"></div>
                    </div>
                    <div
                        style="background-color: #ffffff;margin: 20px 0;padding: 30px;flex: 1;border-radius: 10px;border: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
                        <div>
                            <div>老用户获得该笔首次购买金额 3% 的账户余额奖励</div>
                            <div style="color: rgba(16, 80, 244, 1);margin-top: 20px;cursor: pointer;"
                                 @click="router.push({path: '/active/newUserDetail',query: {type: 'invite'}})">规则详情
                            </div>
                        </div>
                        <div> <img src="@/assets/124.png" alt="" srcset="" width="50px"></div>

                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;width: 80%;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div style="font-size: 24px;font-weight: bold;margin-bottom: 20px;">邀请流程</div>
                    <!-- <div style="font-size: 14px;color:#1677ff;cursor: pointer;">活动详情 ></div> -->
                </div>
                <div style="">
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div class="step">
                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 1</div>
                            <div>加入邀约优算友计划</div>
                            <div style="font-size: 14px;color: #666666;">注册Fast亼算云账号并完成个人实名认证的新老用户均可加入</div>
                        </div>
                        <div style="width: 200px;text-align: center;"><img src="@/assets/arrow-right.png" alt=""
                                width="30px"></div>
                        <div class="step">
                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 2</div>
                            <div>获取邀请链接/邀请码并分享</div>
                            <div>复制邀请链接/邀请码，分享给新客户</div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;align-items: center;margin: 20px 0;">
                        <div style="width: calc((100% - 200px)/2);text-align: center;"><img
                                src="@/assets/arrow-down.png" alt="" width="30px"></div>
                    </div>
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div class="step">
                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 4</div>
                            <div>佣金到账</div>
                            <div>Fast亼算云核算返利金额，入账至绑定账户</div>
                        </div>
                        <div style="width: 200px;text-align: center;margin-bottom: 20px;"><img
                                src="@/assets/arrow-right1.png" alt="" width="30px"></div>

                        <div class="step">
                            <div style="color:rgba(16, 80, 244, 1);font-size: 18px;">step 3</div>
                            <div>客户注册后完成实名认证、调查问卷并购买</div>
                            <div style="font-size: 14px;color: #666666;">客户通过推广链接注册建立关联，并购买产品</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="three"></div>
    <div class="footer">
        <div class="footer_contain">
            <div>
                <div style="color: #000000;">服务热线:</div>
                <div style="font-size: 36px;font-weight: bold;padding: 20px 0;">400-110-6993</div>
                <div>邮箱:service@hzzxxd.com</div>
                <div>地址:江苏省南通市崇川区紫琅科技城3号楼</div>
            </div>
            <div>
                <div style="color: #000000;">快速导航</div>
                <div>算力中心</div>
                <div>云主机</div>
                <div>用户文档</div>
            </div>
            <div style="display: flex;align-items: center;gap: 60px;">
                <div style="display: flex;flex-direction: column;align-items: center;">
                    <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
                    <div>公众号</div>
                </div>
                <div style="display: flex;flex-direction: column;align-items: center;">
                    <img src="@/assets/qr.jpg" alt="" srcset="" width="100">
                    <div>企业微信</div>
                </div>
            </div>
        </div>
        <div
            style="border-top: 1px solid #ebe4e4;height: 45px;text-align: center;line-height: 45px;color: #666666;font-size: 14px;">
            苏备案号20251124号</div>
    </div>

</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
</script>
<style scoped>
.active_body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.active_banner {
    width: 100%;
    height: auto;
}

.active_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(246, 250, 254);
    padding-bottom: 50px;
}

.step {
    flex: 1;
    height: 120px;
    border-radius: 8px;
    border: 1px solid rgba(219, 219, 219, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    gap: 5px;
    padding: 0 20px;
}

.three {

    width: 100%;
    height: 180px;
    background: url('@/assets/bottom.png') no-repeat center / 100% 100%;
}

.footer {
    height: 260px;
    background-color: #ffffff;
    width: 100%;

    .footer_contain {
        width: 1200px;
        margin: 0 auto;
        height: calc(100% - 45px);
        display: flex;
        justify-content: space-around;
        align-items: self-start;
        padding: 20px 0;

        &>div {
            line-height: 30px;
            color: #3a3939;
        }
    }
}
</style>