de-net/src/view/components/payment-info-usd.vue

<template>
    <div class="card-list">
        <div class="item">
            <div class="l">Giveaway Amount</div>
            <div class="r order-amount">
                ${{ finalAmountData.orderAmountValue }}
            </div>
        </div>
        <div class="item">
            <div class="l">Balance</div>
            <div class="r txt">${{ finalAmountData.balance }}</div>
        </div>
        <div class="item">
            <div class="l">
                Paypal charges fee ({{ finalAmountData.feeDesc }})
            </div>
            <div class="r txt">${{ finalAmountData.feeAmountValue }}</div>
        </div>
        <div class="item">
            <div class="l">Deposit Amount</div>
            <div class="r deposit-amount">
                ${{ finalAmountData.rechargeAmountValue }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
    finalAmountData: {
        type: Object,
        default: () => {
            return {
                currencyCode: '',
                feeAmountValue: 0,
                finalAmountValue: 0,
                requestAmountValue: 0,
            }
        }
    },
})
</script>

<style scoped lang="scss">
.card-list {
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid #e6e6e6;

    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 47px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: inset 0px -1px 0px #eaeaea;

        .order-amount {
            font-weight: 600;
            font-size: 20px;
        }

        .txt {
            font-weight: 500;
            font-size: 16px;
            color: #9a9a9a;
        }

        .deposit-amount {
            font-weight: 600;
            font-size: 20px;
            color: #1d9bf0;
        }
    }

    .item:last-child {
        box-shadow: none;
    }
}
</style>