65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
 
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
import { formatMeterage } from '@/utils/format'
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
current: number
|
|||
|
|
max: number
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const remaining = computed(() => Math.max(0, props.max - props.current))
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="capacity-summary">
|
|||
|
|
<div class="capacity-summary__row">
|
|||
|
|
<span class="capacity-summary__label">جمع متراژ</span>
|
|||
|
|
<span class="capacity-summary__value">{{ formatMeterage(current) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="capacity-summary__row">
|
|||
|
|
<span class="capacity-summary__label">حداکثر مجاز</span>
|
|||
|
|
<span class="capacity-summary__value">{{ formatMeterage(max) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="capacity-summary__row">
|
|||
|
|
<span class="capacity-summary__label">باقیمانده</span>
|
|||
|
|
<span class="capacity-summary__value capacity-summary__value--accent">
|
|||
|
|
{{ formatMeterage(remaining) }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.capacity-summary {
|
|||
|
|
background: var(--color-summary-bg);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
padding: 14px 16px;
|
|||
|
|
border: 1px solid var(--color-border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capacity-summary__row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 6px 0;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capacity-summary__row:not(:last-child) {
|
|||
|
|
border-bottom: 1px solid var(--color-border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capacity-summary__label {
|
|||
|
|
color: var(--color-text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capacity-summary__value {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--color-text);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capacity-summary__value--accent {
|
|||
|
|
color: var(--color-primary);
|
|||
|
|
}
|
|||
|
|
</style>
|