de-net/src/view/components/give-dialog.vue

<template>
    <div class="overlay" v-if="visible">
        <div
            class="content"
            :style="{
                height: dialogHeight + 'px',
                width: showComType != 'preview' ? '600px' : 'auto',
            }"
        >
            <div class="head" @click.self="showCurrencyPop = false">
                <div class="left">
                    <div class="close-btn" @click="close">
                        <img
                            class="icon-close"
                            v-if="showComType == 'default'"
                            :src="require('../../assets/svg/icon-close.svg')"
                        />
                        <img
                            class="icon-close"
                            v-else
                            :src="require('../../assets/svg/icon-back.svg')"
                        />
                    </div>
                    <div class="title">
                        {{ currentComData[showComType]["title"] }}
                    </div>
                </div>
                <div class="right">
                    <div class="transactions">
                        <img
                            :src="
                                require('../../assets/svg/icon-option-list.svg')
                            "
                        />
                        Transactions
                    </div>
                </div>
            </div>
            <div class="body">
                <!-- 充值组件 -->
                <top-up v-show="showComType == 'topUp'"></top-up>
                <!-- 表单填写容器 -->
                <div class="body-content" v-show="showComType != 'topUp'">
                    <!-- 货币列表  -->
                    <div class="currency-pop" v-if="showCurrencyPop">
                        <currency-list @selectCurrency="selectCurrency"></currency-list>
                    </div>

                    <div class="left" @click.self="showCurrencyPop = false">
                        <div class="gift-pack-wrapper">
                            <img
                                class="icon"
                                :src="
                                    require('../../assets/svg/icon-gift-pack.svg')
                                "
                            />
                        </div>
                        <div class="bottom">
                        </div>
                    </div>

                    <div class="right">
                        <template v-if="showComType == 'default'">
                            <div class="form-wrapper">
                                <img
                                    @click.stop="showCurrencyPop = false"
                                    class="img-mode"
                                    src="../../assets/img/img-mode.png"
                                />
                                <!-- 金额、数量 -->
                                <div class="form-base">
                                    <div class="item currency-select-wrapper">
                                        <div
                                            class="label currency-select"
                                            @click="showCurrencyPop = true"
                                        >
                                            <img
                                                class="icon"
                                                :src="
                                                    require('../../assets/svg/icon-usd.svg')
                                                "
                                            />
                                            USD
                                            <img
                                                class="arrow"
                                                :src="
                                                    require('../../assets/svg/icon-form-arrow-down.svg')
                                                "
                                            />
                                        </div>
                                        <el-input
                                            v-model="baseFormData.amountValue"
                                            placeholder="0"
                                            autofocus
                                            @input="onUsdInput"
                                            @blur="onUsdBlur"
                                            :input-style="{
                                                'box-shadow': 'none',
                                                padding: '1px',
                                                width: '110px',
                                                'text-align': 'right',
                                                'font-size': '15px',
                                                color: '#000',
                                                'margin-right': '14px',
                                            }"
                                        />
                                    </div>
                                    <div class="item"  @click.stop="showCurrencyPop = false">
                                        <div class="label">
                                            <img
                                                class="icon"
                                                :src="
                                                    require('../../assets/svg/icon-winners.svg')
                                                "
                                            />
                                            Winners
                                        </div>
                                        <el-input
                                            v-model="baseFormData.totalCount"
                                            placeholder="0"
                                            @input="onCountInput"
                                            @blur="onCountBlur"
                                            :input-style="{
                                                'box-shadow': 'none',
                                                padding: '1px',
                                                width: '120px',
                                                'text-align': 'right',
                                                'font-size': '15px',
                                                color: '#000',
                                            }"
                                        />
                                    </div>
                                </div>
                                <!-- 刷新按钮、充值 -->
                                <div class="form-base-help"  @click.stop="showCurrencyPop = false">
                                    <div class="currency-operation">
                                        <div class="balance">
                                            <img
                                                :src="
                                                    require('../../assets/svg/icon-balance.svg')
                                                "
                                            />
                                            Balance
                                        </div>
                                        <div class="amount">
                                            218
                                            <img
                                                :src="
                                                    require('../../assets/svg/icon-form-refresh.svg')
                                                "
                                            />
                                        </div>
                                        <div class="top-up" @click="goTopUp">Top UP</div>
                                    </div>
                                    <div class="msg">
                                        Recommend quantity 100～10000
                                    </div>
                                </div>
                                <div class="form-label">Tasks</div>
                                <!-- 转推、like、关注 -->
                                <div class="form-require"  @click.stop="showCurrencyPop = false">
                                    <div
                                        class="form-item"
                                        v-for="(item, index) in formList"
                                        :key="index"
                                    >
                                        <div class="label">
                                            <img
                                                class="icon"
                                                :src="item.icon"
                                            />
                                            {{ item.label }}
                                        </div>
                                        <div
                                            class="control"
                                            v-if="item.nodeType == 'textarea'"
                                        >
                                            <follow-input
                                                :isAddSelf="!isBack"
                                                :atUserList="atUserList"
                                                @addUser="addFollowUser"
                                                @setUser="setFollowUser"
                                                @delUser="delFollowUser"
                                            ></follow-input>
                                        </div>
                                        <el-switch
                                            v-if="item.type == 2"
                                            v-model="item.checked"
                                        />
                                        <img
                                            v-if="item.type == 3"
                                            :src="
                                                require('../../assets/svg/icon-option-checked.svg')
                                            "
                                        />
                                    </div>
                                </div>
                                <!-- 机器人 -->
                                <div class="anti-bot-wrapper">
                                    <div class="label">
                                        <img
                                            :src="
                                                require('../../assets/svg/icon-anti-bot.svg')
                                            "
                                            class="icon-bot"
                                        />
                                        Anti Bot
                                        <img
                                            :src="
                                                require('../../assets/svg/icon-beta.svg')
                                            "
                                            class="icon-beta"
                                        />
                                        <img
                                            :src="
                                                require('../../assets/svg/icon-question.svg')
                                            "
                                            class="icon-question"
                                        />
                                    </div>
                                    <el-switch v-model="openAntiBot" />
                                </div>
                                <!-- 提示 -->
                                <div class="tips-wrapper">
                                    <div class="title">TIPS</div>
                                    <div class="row">
                                        1. Only after the user completes the
                                        tasks you set, they can claim your red
                                        envelopes
                                    </div>
                                    <div class="row">
                                        2. Each user can only receive one red
                                        envelope
                                    </div>
                                    <div class="row">
                                        3. The red envelope issued is valid for
                                        7 days. Please promote your red envelope
                                        as much as possible within the validity
                                        period. After the red envelope expires,
                                        the red envelope will be returned to
                                        your DeNet wallet.
                                    </div>
                                    <div class="more">More</div>
                                </div>

                                <div class="submit-btn-wrapper">
                                    <div class="submit-btn" @click="confirm">
                                        <img
                                            class="icon-loading"
                                            v-if="submitIng"
                                            :src="
                                                require('../../assets/svg/icon-btn-loading.svg')
                                            "
                                        />
                                        NEXT
                                    </div>
                                </div>
                            </div>
                        </template>
                        <!-- 预览 -->
                        <template v-else-if="showComType == 'preview'">
                            <preview-card
                                :postData="publishRes"
                                :baseFormData="baseFormData"
                            ></preview-card>
                        </template>
                        <!-- paypal支付按钮 -->
                        <div v-show="showComType == 'preview'">
                            <paypal-button
                                :finalAmountData="finalAmountData"
                                :payConfig="{
                                    paypalClientId,
                                    paypalHtml,
                                }"
                                @payPalFinsh="payPalFinsh"
                            ></paypal-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 提示 -->
        <message-box
            :dialogVisible="showMessageBox"
            :title="messageBoxData.title"
            :content="messageBoxData.content"
            @cancel="messageBoxCancel"
            @confirm="messageBoxConfirm"
        ></message-box>
    </div>
</template>

<script setup>
import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
import { postPublish, verifyPaypalResult } from "../../http/publishApi";
import { payCalcFee, getPayConfig } from "../../http/pay";
import { getFrontConfig } from "../../http/account";
import { ElMessage, ElLoading } from "element-plus";
import "element-plus/es/components/message/style/css";

import previewCard from "./preview-card";
import paypalButton from "./paypal-button";
import followInput from "./follow-input";
import messageBox from "./message-box.vue";
import currencyList from "./currency-list.vue";
import topUp from "./top-up.vue";

let paypalClientId = ref("");
let paypalHtml = ref("");

let publishRes = reactive({});

let currentComData = {
    default: {
        title: "Giveaways",
    },
    preview: {
        title: "Preview",
    },
    topUp: {
        title: "Top Up",
    },
};

let visible = ref(false);
let showComType = ref("default"); // default(表单)  preview(预览)  topUp(充值)
let openAntiBot = ref(false);
let dialogHeight = ref(680);
let submitIng = ref(false);
let atUserList = ref([]);
let iptErrMsgTxt = ref("");
let isBack = ref(false);
let showMessageBox = ref(false);
let showCurrencyPop = ref(false);

let messageBoxData = ref({
    title: "",
    content: "",
});

let finalAmountData = ref({
    currencyCode: "USD",
    feeAmountValue: 0,
    finalAmountValue: 0,
    requestAmountValue: 0,
});

let baseFormData = reactive({
    amountCurrencyCode: "USD",
    amountValue: "",
    totalCount: "",
});

let formList = reactive([
    {
        label: "Follow",
        icon: require("../../assets/svg/icon-follow.svg"),
        nodeType: "textarea",
        type: 1,
        text: [],
        checked: true,
    },
    {
        label: "Retweet",
        icon: require("../../assets/svg/icon-retweet.svg"),
        nodeType: "div",
        type: 3,
        checked: true,
    },
    {
        label: "Like tweet",
        icon: require("../../assets/svg/icon-like.svg"),
        nodeType: "div",
        type: 2,
        checked: true,
    },
]);

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
});

watch(
    () => props.dialogVisible,
    (newVal) => {
        console.log("watch", newVal);
        if (newVal) {
            setTimeout(() => {
                setDialogHeight();
            }, 300);
        }
        visible.value = newVal;
    }
);

const emits = defineEmits(["close", "confirm", "payPalFinsh"]);

const close = () => {
    if (showComType.value != "default") {
        showComType.value = "default";
        isBack.value = true;
    } else {
        initParams();
        emits("close", false);
    }
};

/**
 * 设置弹窗高度
 */
const setDialogHeight = () => {
    let clientHeight = window.innerHeight;
    let gapSafe = 40;

    if (dialogHeight.value > clientHeight - gapSafe) {
        dialogHeight.value = clientHeight - gapSafe;
    }
};

/**
 * 获取实际支付金额
 */
const getPayAmount = (amountValue, cb) => {
    payCalcFee({
        params: {
            amountValue,
            currencyCode: "USD",
            payChannel: 1,
        },
    }).then((res) => {
        if (res.code == 0) {
            cb && cb(res.data);
            let { finalAmountValue } = res.data;
            if (finalAmountValue >= 100) {
                res.data.finalAmountValue = finalAmountValue / 100;
                finalAmountData.value = res.data;
            }
        }
    });
};

const confirm = () => {
    if (submitIng.value) {
        return;
    }
    let { totalCount = 0 } = baseFormData;
    if (!totalCount) {
        return;
    }
    if (!calcIptValue()) {
        return;
    }
    submitRequest();
};

const selectCurrency = (params) => {
    console.log(params);
    messageBoxBlock({
        title: "是否要充值 USDT",
        content: "USDT 可用余额为0，是否要去充值？",
    });
};

const messageBoxBlock = ({ title = "", content = "" }) => {
    showMessageBox.value = true;
    messageBoxData.value.title = title;
    messageBoxData.value.content = content;
};

const messageBoxCancel = () => {
    showMessageBox.value = false;
};

const messageBoxConfirm = () => {
    showMessageBox.value = false;
    // showCurrencyPop.value = false;
    showComType.value = "topUp";
};

/**
 * 去充值
 */
const goTopUp = () => {
    showComType.value = 'topUp';
}

/**
 * 提交表单请求
 */
const submitRequest = () => {
    let { amountValue = 0, totalCount = 0, amountCurrencyCode } = baseFormData;
    formList[0]["text"] = atUserList.value;
    amountValue = amountValue * 100; // 元转分

    let finishConditions = [];
    for (let i = 0; i < formList.length; i++) {
        let item = {};
        item.type = formList[i]["type"];
        if (item.type == 1 && formList[i]["text"]) {
            // follow 参数
            let relatedUsers = formList[i]["text"];
            item.relatedUsers = relatedUsers;
            finishConditions.push(item);
        } else if (formList[i]["checked"]) {
            finishConditions.push(item);
        }
    }
    let receiveConditions = openAntiBot.value ? "" : [];
    let formData = {
        amountCurrencyCode,
        amountValue,
        totalCount,
        finishConditions,
        receiveConditions,
    };
    submitIng.value = true;
    getPayAmount(amountValue, (res) => {
        formData["payAmountValue"] = res.finalAmountValue;
        let data = {
            params: {
                postBizData: JSON.stringify(formData),
                postSrc: 1, //1 twitter
                postType: 1, //1 红包
            },
        };
        postPublish(data)
            .then((res) => {
                submitIng.value = false;
                if (res.code == 0) {
                    publishRes = res.data;
                    // setPreviewDialogHeight();
                    showComType.value = "preview";
                    isBack.value = false;
                } else {
                    console.log(res);
                }
            })
            .catch((err) => {
                console.log(err);
            });
    });
};

/**
 * 输入结果计算、校验
 */
const calcIptValue = (cb) => {
    let amountValue = baseFormData.amountValue;
    let totalCount = baseFormData.totalCount;
    let flag = true;

    if (!amountValue || !totalCount) {
        return flag;
    }

    //每人平均要分到大于 0.01美元（1美分)
    if ((amountValue * 100) / totalCount < 1) {
        flag = false;
    }
    cb && cb(flag);
    return flag;
};

/**
 * 初始化提交参数
 */
const initParams = () => {
    baseFormData.amountValue = "";
    baseFormData.totalCount = "";
    formList[0].text = [];
    atUserList.value = [];
    submitIng.value = false;
    isBack.value = false;
};

/**
 * 支付完成回调
 */
const payPalFinsh = (params) => {
    let transaction = params.transaction;
    console.log("transaction", transaction);
    let loadingInstance = ElLoading.service({
        background: "rgba(0,0,0,.3)",
    });
    verifyPaypalResult({
        params: {
            paypalTransactionId: transaction.id,
            postId: publishRes.postId,
            paypalClientId: paypalClientId.value,
        },
    })
        .then((res) => {
            loadingInstance.close();
            if (res.code == 0) {
                //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
                if (res.data) {
                    let payStatus = res.data.payStatus;
                    switch (payStatus) {
                        case 1:
                            emits("payPalFinsh", { publishRes });
                            showComType.value = "default";
                            initParams();
                            break;
                        case 2:
                            ElMessage({
                                message: "Pay Fail",
                                type: "warning",
                            });
                            break;
                        case 3:
                            ElMessage({
                                message: "Pay Exceptions",
                                type: "warning",
                            });
                            break;
                        case 4:
                            ElMessage({
                                message: "Pay Exceptions",
                                type: "warning",
                            });
                            break;
                    }
                }
            }
        })
        .catch(() => {
            loadingInstance.close();
        });
};

/**
 * follow组件触发新增关注人
 */
const addFollowUser = (params) => {
    atUserList.value.push(params);
};

const setFollowUser = (params) => {
    atUserList.value[params.index]["name"] = params.name;
};

const delFollowUser = (params) => {
    atUserList.value.splice(params.index, 1);
};

const onUsdInput = (val) => {
    val = val.replace(/[^\d]/g, "");
    baseFormData.amountValue = val;

    setIptAmountErrorMsg();

    return val;
};

const onCountInput = (val) => {
    if (val == 0) {
        val = "";
    }
    val = val.replace(/[^\d]/g, "");
    if (val > 9999) {
        val = 9999;
    }
    baseFormData.totalCount = val;
    setIptAmountErrorMsg();
    return val;
};

/**
 * 金额输入失焦
 */
const onUsdBlur = () => {
    if (!baseFormData.amountValue) {
        iptErrMsgTxt.value =
            "Please enter the giveaways amount in USD input box.";
    } else {
        setIptAmountErrorMsg((res) => {
            if (res) {
                iptErrMsgTxt.value = "";
            }
        });
    }
};

/**
 * count失焦，校验输入结果
 */
const onCountBlur = () => {
    if (!baseFormData.totalCount) {
        iptErrMsgTxt.value =
            "Please enter the number of giveaways in Quantity input box.";
    } else {
        setIptAmountErrorMsg((res) => {
            if (res) {
                iptErrMsgTxt.value = "";
            }
        });
    }
};

/**
 * 输入金额提示语
 */
const setIptAmountErrorMsg = (cb) => {
    let res = calcIptValue();
    if (!res) {
        iptErrMsgTxt.value = `If you wish to send ${
            baseFormData.totalCount
        } red packets, please send USD amount > $${
            baseFormData.totalCount * 0.01
        }`;
    } else {
        iptErrMsgTxt.value = "";
    }
    cb && cb(res);
};

/**
 * 获取支付配置（paypalClientId）
 */
const setPayConfig = () => {
    getPayConfig({
        params: {},
    }).then((res) => {
        if (res.code == 0) {
            paypalClientId.value = res.data.paypalClientId;
        }
    });
};

/**
 * 获取配置
 */
const setFrontConfig = () => {
    getFrontConfig({
        params: {},
    }).then((res) => {
        if (res.code == 0) {
            paypalHtml.value = res.data.paypalHtml;
        }
    });
};

onMounted(() => {
    setFrontConfig();
    setPayConfig();
    document.onkeydown = function (e) {
        var keyNum = window.event ? e.keyCode : e.which;
        let escKey = 27;
        if (keyNum == escKey) {
            if (visible.value) {
                close();
            }
        }
    };
    // document.addEventListener('click',e => { 
    //     let btn = document.querySelector('.currency-select');
    //     let box = document.querySelector('.msg-box-overlay')
    //     let dom = document.querySelector('.currency-pop');
    //     if(btn && !btn.contains(e.target) || box && !box.contains(e.target)) {
    //         if (dom && !dom.contains(e.target)) {
    //             showCurrencyPop.value = false;
    //         }
    //     }
    // })
});
</script>

<style lang="scss" scoped>
.ql-container {
    height: 100px;
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;

    .content {
        height: 620px;
        background: #ffffff;
        border-radius: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;

        .head {
            border-bottom: 1px solid #ececec;
            height: 48px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px;

            .left {
                display: flex;
                align-items: center;
                .title {
                    font-size: 16px;
                    font-weight: 500;
                }

                .close-btn {
                    display: flex;
                    align-items: center;
                    width: max-content;
                    margin-right: 12px;
                    cursor: pointer;
                }
            }

            .right {
                .transactions {
                    color: #a0a0a0;
                    font-weight: 400;
                    font-size: 13px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    img {
                        margin-right: 5px;
                    }
                }
            }
        }

        .body {
            box-sizing: border-box;
            height: calc(100% - 48px);
            display: flex;
            position: relative;

            .body-content {
                display:flex;
                width:100%;
            }

            .currency-pop {
                position: absolute;
                width: 375px;
                height: 480px;
                top: 85px;
                left: 88px;
                z-index: 1000;
                box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                background-color: #fff;
                border-radius: 20px;
                overflow-y: scroll;
            }

            .left,
            .right {
                height: 100%;
            }

            .left {
                width: 50px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                .gift-pack-wrapper {
                    width: 100%;
                    height: 54px;
                    background: #f5f5f5;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .bottom {
                    .icon {
                        display: block;
                        margin-bottom: 26px;
                    }
                }
            }

            .right {
                width: calc(100% - 50px);
                box-sizing: border-box;
                position: relative;
                border-left: 1px solid #ececec;

                .form-wrapper {
                    padding: 0px 18px 18px 18px;
                    height: calc(100% - 80px);
                    overflow-y: scroll;
                    box-sizing: border-box;

                    .img-mode {
                        width: 553px;
                        margin-left: -20px;
                    }

                    .form-base-help {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 10px;

                        .currency-operation {
                            width: 217px;
                            height: 45px;
                            background: url("../../assets/svg/icon-form-bg-border.svg");
                            box-sizing: border-box;
                            padding: 14px 10px 10px 10px;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;

                            .balance,
                            .amount {
                                display: flex;
                                align-items: center;
                            }

                            .balance {
                                font-weight: 400;
                                font-size: 13px;
                                img {
                                    width: 16px;
                                    height: 16px;
                                    margin-right: 3px;
                                }
                            }

                            .amount {
                                font-weight: 500;
                                font-size: 13px;
                                color: #4e4e4e;
                                img {
                                    margin-left: 5px;
                                    cursor: pointer;
                                }
                            }

                            .top-up {
                                font-weight: 500;
                                font-size: 12px;
                                color: #ff9839;
                                cursor: pointer;
                            }
                        }

                        .msg {
                            font-weight: 400;
                            font-size: 12px;
                            color: #acacac;
                        }
                    }

                    .form-base {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 14px;

                        .item {
                            width: 250px;
                            height: 50px;
                            box-sizing: border-box;
                            border-radius: 12px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 16px 14px;
                            box-shadow: 0px 3px 27px 0px #0000001a;

                            .label {
                                font-weight: 500;
                                font-size: 15px;
                                display: flex;
                                align-items: center;

                                .icon {
                                    width: 20px;
                                    height: 20px;
                                    margin-right: 8px;
                                }
                            }
                        }

                        .currency-select-wrapper {
                            padding: 0 !important;
                            .currency-select {
                                box-shadow: 3px 0 10px 2px #ececec;
                                padding: 16px 14px;
                                border-bottom-left-radius: 12px;
                                border-top-left-radius: 12px;
                                cursor: pointer;
                                .arrow {
                                    margin-left: 5px;
                                }
                            }
                        }
                    }

                    .form-label {
                        margin-top: 14px;
                        margin-bottom: 10px;
                        font-weight: 500;
                        font-size: 14px;
                    }

                    .form-require {
                        box-sizing: border-box;
                        border-radius: 15px;
                        margin-top: 12px;
                        box-shadow: 0px 3px 27px 0px #0000001a;

                        .form-item {
                            min-height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin: 0 16px;
                            border-bottom: 1px solid #ececec;

                            .label {
                                min-width: 88px;
                                display: flex;
                                align-items: center;
                                font-size: 15px;
                                font-weight: 500;

                                .icon {
                                    margin-right: 10px;
                                }
                            }

                            .control {
                                width: 100%;
                                min-height: 50px;
                                margin-left: 18px;
                                box-sizing: border-box;
                            }
                        }
                    }
                }

                .anti-bot-wrapper {
                    width: 100%;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    border-radius: 15px;
                    padding: 0 18px;
                    margin-top: 14px;
                    box-shadow: 0px 3px 27px 0px #0000001a;

                    .label {
                        display: flex;
                        align-items: center;
                        font-size: 15px;
                        font-weight: 500;

                        .icon-bot {
                            margin-right: 8px;
                        }

                        .icon-beta {
                            margin-left: 5px;
                            margin-right: 8px;
                        }

                        .icon-question {
                            cursor: pointer;
                        }
                    }
                }

                .tips-wrapper {
                    margin-top: 23px;
                    .title,
                    .row {
                        font-weight: 400;
                        font-size: 13px;
                        color: rgba(0, 0, 0, 0.3);
                    }

                    .row {
                        box-sizing: border-box;
                        padding-left: 4px;
                    }

                    .more {
                        color: #389aff;
                        font-size: 13px;
                        padding-left: 4px;
                        cursor: pointer;
                    }
                }

                .submit-btn-wrapper {
                    width: 96%;
                    background: #fff;
                    position: absolute;
                    bottom: 18px;
                    left: 0;
                    box-sizing: border-box;
                    padding-top: 16px;

                    .submit-btn {
                        width: calc(100% - 36px);
                        height: 46px;
                        text-align: center;
                        line-height: 46px;
                        background: #4a99e9;
                        border-radius: 100px;
                        color: #fff;
                        margin-left: 18px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-weight: 500;
                        cursor: pointer;

                        .icon-loading {
                            width: 20px;
                            height: 20px;
                            margin-right: 3px;
                        }
                    }
                }
            }
        }
    }
}
</style>