<template>
    <div class="p-6">
        <!-- 提现信息 -->
        <div class="bg-white bg-opacity-90 shadow-lg rounded-xl p-6 mb-6">
            <div class="flex justify-between items-center">
                <span class="text-xl text-gray-900 font-semibold">提现到</span>
                <span class="text-lg text-blue-600">银行账户</span>
            </div>
            <div class="flex justify-between items-center mt-4">
                <span class="text-sm text-gray-600">银行卡号</span>
                <span class="text-sm text-blue-500">UPCash</span>
                <button class="text-sm text-blue-500">修改</button>
            </div>
        </div>

        <!-- 提现金额 -->
        <div class="bg-white bg-opacity-90 shadow-lg rounded-xl p-6 mb-6">
            <div class="flex justify-between items-center">
                <span class="text-xl text-gray-900 font-semibold">提现金额</span>
                <span class="text-3xl text-blue-600 font-bold">¥ 0.0</span>
            </div>
            <div class="mt-4 text-sm text-gray-600">
                <p>可提现金额 0.0 元</p>
                <p class="mt-2">每天最多提现2次，最低提现金额20元，提现金额超过1000元，会进行人工审核。</p>
            </div>
            <div class="mt-6 flex justify-end">
                <button class="bg-blue-600 hover:bg-blue-500 text-white py-2 px-6 rounded-lg shadow-md">
                    全部提现
                </button>
            </div>
        </div>

        <!-- 短信验证码 -->
        <div class="bg-white bg-opacity-90 shadow-lg rounded-xl p-6 mb-6">
            <div class="flex justify-between items-center">
                <span class="text-lg text-gray-900">短信验证码</span>
                <button class="text-sm text-blue-500">手机为优先查看注册号码</button>
            </div>
            <div class="mt-4">
                <input type="text" placeholder="请输入短信验证码"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
            </div>
            <div class="mt-4 flex justify-between items-center">
                <button class="bg-blue-600 text-white py-2 px-6 rounded-lg shadow-md flex items-center space-x-2">
                    <van-icon name="refresh" size="20" />
                    <span>获取验证码</span>
                </button>
            </div>
        </div>

        <!-- 确认提现 -->
        <div class="mt-6">
            <button class="bg-blue-600 hover:bg-blue-500 text-white py-3 px-6 rounded-lg w-full shadow-md">
                确认提现
            </button>
        </div>
    </div>
</template>

<script setup>
</script>

<style scoped>
/* 如果需要额外的样式，可以在这里添加 */
</style>