<script setup>
import {reactive} from "vue";
import Alipay from "../../../../../components/Pay/Alipay.vue";

const form = reactive({
    money: null,
});
</script>

<template>
    <!-- 我的充值 -->
    <div class="info-card mb-[40px]">
        <div>1.该金额将会充值到钱包，创建任务时，将优先使用钱包内的余额。</div>
        <div>2.若遇到充值未到账，请联系客服</div>
    </div>

    <a-form>
        <a-form-item label="立即充值">
            <a-input-number v-model:model-value="form.money" class="w-1/2" placeholder="输入金额"
                            :precision="2" :min="0.01"></a-input-number>
        </a-form-item>

        <a-form-item class="mt-[40px]">
            <Alipay :money="form.money"></Alipay>
        </a-form-item>
    </a-form>
</template>

<style lang="scss" scoped>
.info-card {
    background: rgb(247, 248, 250);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    div {
        color: rgb(134, 144, 156);
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
    }
}
</style>
