eiru_payments/src/components/moveLine/MoveLineCard.vue

<template lang="pug">
    .card-move-line(@click='onClick' :class="{ 'selected-move': isSelected }")
        h2.move-date Vencimiento {{ dateMaturity }}
        .move-amount
            .move-total
                h2.move-amount-label Total
                h2.move-total-value {{ debit | currency(currencyCompany.symbol)}}
            .move-total
                h2.move-amount-label  Saldo
                h2.move-saldo-value {{ amountResidual | currency(currencyCompany.symbol)}}
</template>

<script>
    export default {
        props: {
            dateMaturity: {
                type: String,
                default: ''
            },
            debit: {
                type: Number,
                default: 0
            },
            amountResidual: {
                type: Number,
                default: 0
            },
            isSelected: {
                type: Boolean,
                default: true
            },
            currencyCompany: {
                type: Object,
                default: {
                    name: '',
                    symbol: '₲',
                    rateSilent: 0,
                    thousandsSeparator: '.',
                    decimalSeparator: ',',
                    decimalPlaces: 0
                }
            }
        },
        methods: {
            onClick() {
                this.$emit('onClick')
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .card-move-line
        width: 245px
        height: 125px
        margin: 5px
        border: 1px solid #d3d3d3
        display: inline-block
        position: relative
        &.selected-move
            transition-duration: 300ms
            border-bottom: 3px solid $app-main-color
        &:hover
            cursor: pointer
        .move-date
            width: 100%
            height: 30px
            font-size: 12pt
            text-align: center
            margin-top: 25px
            position: absolute
            top: 0
        .move-amount
            width: 100%
            height: 70px
            padding-top: 5px
            margin: 0px
            position: absolute
            bottom: 0px
            .move-total
                width: calc(100% - 10px)
                height: 30px
                border-bottom: 1px solid $app-main-color
                margin-left: 5px
                margin-right: 5px
                .move-amount-label
                    width: 75px
                    height: 30px
                    float: left
                    // text-align: right
                    font-size: 10pt
                    font-weight: bold
                    margin: 0px
                    padding: 10px
                    color: #ccc
                .move-total-value, .move-saldo-value
                    width: calc(100% - 75px)
                    float: right
                    text-align: right
                    font-size: 10pt
                    font-weight: bold
                    margin: 0px
                    padding: 10px
                .move-total-value
                    bottom: 23px
                .move-saldo-value
                    bottom: 0
</style>