eiru_purchases/src/components/supplier/SupplierDetails.vue

<template lang="pug">
    .supplier-details
        form.supplier-form
            .form-separator
                h3 Detalles Generales
                hr
            .form-item
                label.form-label Nombre
                input.form-input(:value="supplierSelected.name || ''" readonly)
            .form-item
                label.form-label Celular
                input.form-input(:value="supplierSelected.mobile || ''" readonly)
            .form-item
                label.form-label Teléfono
                input.form-input(:value="supplierSelected.phone || ''" readonly)
            .form-item
                label.form-label Email
                input.form-input(:value="supplierSelected.email || ''" readonly)
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        computed: mapGetters([
            'supplierSelected'
        ])
    }
</script>

<style lang="sass">
    .supplier-details
        width: 100%
        height: 100%
        .supplier-form
            width: 100%
            height: 100%
            .form-separator
                h3
                    color: #9e9e9e
                    font-size: 8pt
                hr
                    margin-top: 5px
            .form-item
                width: 100%
                height: 35px
                margin-bottom: 5px
                .form-label
                    width: 65px
                    height: 35px
                .form-input
                    width: 210px
                    height: 35px
                    border-radius: 0
</style>