portal/resources/assets/vue/components/shippingQueue/elements/shippingQueueComponents.vue

<template>
  <div class="row padding-15">
        <div class="col rounded p-l-20 p-r-20">
            <div class="row bg-master-light rounded align-items-center padding-20">
                <div class="col">
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 font-weight-normal">Package ID:</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0">9956665659-MY5568978458</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 font-weight-normal">Package Size:</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0">52x65x35 CM / 10KG</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 font-weight-normal">Delivery Address</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0">Home</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-5">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 font-weight-normal">Delivery Estimation</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0">05/05/2022</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <h5 class="m-b-0 m-t-0">Shipping Cost</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <h3 class="m-b-0 m-t-0">RM2800</h3>
                        </div>
                    </div>
                </div>
                <div class="col-auto pointer">
                    <div class="btn btn-lg btn-default btn-rounded"><i class="fa fa-check lightest lh-50"></i></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                expanded: false,
            }
        },
        mixins: [componentHandler]
    }
</script>