eiru_pos/src/components/CartItem.vue

<template lang="pug">
    .cart-item
        h3.item-name {{ data.name }}
        input.item-quantity(type="text" value="1")
        span.item-x x
        span.item-price Gs {{ data.price }}
        span.item-equals =
        span.item-subtotal Gs {{ data.price }}
</template>

<script>
    export default {
        props: {
            data: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        }
    }
</script>

<style lang="sass">
    .cart-item
        width: 98%
        height: 85px
        border-bottom: 1px solid #d3d3d3

        .item-name
            width: 100%
            height: 15px
            margin: 5px
            float: left
            font:
                size: 11pt

        .item-quantity
            width: 50px
            height: 30px
            margin-top: 6px
            text-align: right
            float: left   

        .item-x
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: center
            float: left

        .item-price
            width: 80px
            height: 20px
            margin-top: 12px
            text-align: right
            float: left

        .item-equals
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: center
            float: left

        .item-subtotal
            width: 100px
            height: 20px
            margin-top: 12px
            padding-right: 15px
            text-align: right
            float: right
            font-weight: bold
</style>