114 lines
3.4 KiB
Vue
114 lines
3.4 KiB
Vue
<script setup>
|
|
const logisticData = ref([
|
|
{
|
|
icon: 'ri-car-line',
|
|
color: 'primary',
|
|
title: 'On route vehicles',
|
|
value: 42,
|
|
change: 18.2,
|
|
isHover: false,
|
|
},
|
|
{
|
|
icon: 'ri-alert-line',
|
|
color: 'warning',
|
|
title: 'Vehicles with errors',
|
|
value: 8,
|
|
change: -8.7,
|
|
isHover: false,
|
|
},
|
|
{
|
|
icon: 'ri-stackshare-line',
|
|
color: 'error',
|
|
title: 'Deviated from route',
|
|
value: 27,
|
|
change: 4.3,
|
|
isHover: false,
|
|
},
|
|
// {
|
|
// icon: 'ri-timer-line',
|
|
// color: 'info',
|
|
// title: 'Late vehicles',
|
|
// value: 13,
|
|
// change: -2.5,
|
|
// isHover: false,
|
|
// },
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
|
|
<VCol v-for="(data, index) in logisticData" :key="index" cols="12" md="4" sm="6">
|
|
<div>
|
|
<VCard class="logistics-card-statistics cursor-pointer"
|
|
:style="data.isHover ? `border-block-end-color: rgb(var(--v-theme-${data.color}))` : `border-block-end-color: rgba(var(--v-theme-${data.color}),0.7)`"
|
|
@mouseenter="data.isHover = true" @mouseleave="data.isHover = false">
|
|
<VCardText>
|
|
<div class="d-flex align-center gap-x-4 mb-2">
|
|
<VAvatar variant="tonal" :color="data.color" rounded>
|
|
<VIcon :icon="data.icon" size="24" />
|
|
</VAvatar>
|
|
<h4 class="text-h4">
|
|
{{ data.value }}
|
|
</h4>
|
|
</div>
|
|
<h6 class="text-body-1 mb-2">
|
|
{{ data.title }}
|
|
</h6>
|
|
<div class="d-flex gap-x-2 align-center">
|
|
<div class="text-body-1 font-weight-medium me-2">
|
|
{{ data.change }}%
|
|
</div>
|
|
<span class="text-sm text-disabled">than last week</span>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@core-scss/base/mixins" as mixins;
|
|
|
|
.text-h4 {
|
|
font-size: 1.5rem !important;
|
|
font-weight: 500;
|
|
line-height: 2.375rem;
|
|
letter-spacing: normal !important;
|
|
font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.text-body-1 {
|
|
font-size: .9375rem !important;
|
|
font-weight: 400;
|
|
line-height: 1.375rem;
|
|
letter-spacing: normal !important;
|
|
font-family: Public Sans, sans-serif, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.logistics-card-statistics {
|
|
border-block-end-style: solid;
|
|
border-block-end-width: 2px;
|
|
|
|
&:hover {
|
|
border-block-end-width: 3px;
|
|
margin-block-end: -1px;
|
|
|
|
@include mixins.elevation(10);
|
|
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
}
|
|
|
|
.skin--bordered {
|
|
.logistics-card-statistics {
|
|
&:hover {
|
|
margin-block-end: -2px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|