mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
edmondlang
132 lines
6.7 KiB
Vue
132 lines
6.7 KiB
Vue
<template>
|
|
<div class="row m-b-15 m-l-5 m-r-10">
|
|
<div class="col bg-master-lightest rounded" :class="{'b-gray': !selected, 'b-primary': selected, 'bg-primary-lighter': selected}">
|
|
<div class="row">
|
|
<div class="col padding-20">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto pointer align-items-center" @click="selected = !selected">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin">{{item.country.id}}05052021</h5>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin">Invoice Date Invoice Date</h5>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin">Status</h5>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin">Amount</h5>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="btn bg-grey no-border" @click="expanded = !expanded">
|
|
<i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t b-grey p-t-10" v-show="expanded">
|
|
<div class="col p-b-10">
|
|
<div class="row">
|
|
<div class="col p-l-20 p-r-20 p-t-10 p-b-10">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto invisible">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0">Carrier Tracking Number</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0">Due Date</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="semi-bold m-t-0 m-b-0 large-text">11.04.2021</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="semi-bold m-t-0 m-b-0 large-text">Outstanding</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="semi-bold m-t-0 m-b-0 large-text">RM0.00</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-l-20 p-r-20 p-t-10 p-b-10">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto invisible">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0 normal-text">This package was delivered by</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="m-b-0">Date Paid</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 class="semi-bold m-t-0 m-b-0 large-text">21.01.2021</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="btn btn-outline-complete btn-lg">
|
|
Invoice Detail
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
export default {
|
|
data(){
|
|
return {
|
|
expanded: false,
|
|
selected: false,
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script>
|