fix(transport) : tableau prix consultation — police/bordures/radius alignés MalioDataTable, colonne groupe en épine (ERP-170)
This commit is contained in:
@@ -102,17 +102,21 @@
|
|||||||
<!-- Prix : tableau présentationnel regroupé par contenant + export. -->
|
<!-- Prix : tableau présentationnel regroupé par contenant + export. -->
|
||||||
<template #prices>
|
<template #prices>
|
||||||
<div class="mt-12 flex flex-col gap-6">
|
<div class="mt-12 flex flex-col gap-6">
|
||||||
<table class="w-full border-collapse border border-m-muted/40 text-left text-sm">
|
<!-- Tailles de police alignées sur MalioDataTable (header 16px /
|
||||||
|
corps 14px). Colonne de groupe (Fond Mouvant / Benne) =
|
||||||
|
épine de gauche continue : son en-tête (coin) reste blanc,
|
||||||
|
pas dans le fond gris du header ; libellé fusionné (rowspan). -->
|
||||||
|
<table class="w-full border-separate border-spacing-0 overflow-hidden rounded-malio border border-black text-left text-black">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border-b border-black bg-m-muted/10">
|
<tr>
|
||||||
<th class="px-3 py-2"></th>
|
<th class="border-r border-black px-3 py-3"></th>
|
||||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.carrier') }}</th>
|
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.carrier') }}</th>
|
||||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.aproOrSite') }}</th>
|
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.aproOrSite') }}</th>
|
||||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.delivery') }}</th>
|
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.delivery') }}</th>
|
||||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.forfait') }}</th>
|
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.forfait') }}</th>
|
||||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.tonne') }}</th>
|
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.tonne') }}</th>
|
||||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.indexation') }}</th>
|
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.indexation') }}</th>
|
||||||
<th class="px-3 py-2 font-semibold">{{ t('transport.carriers.consultation.price.state') }}</th>
|
<th class="border-b border-black bg-m-surface px-3 py-3 align-middle text-[16px] font-semibold">{{ t('transport.carriers.consultation.price.state') }}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@@ -120,27 +124,28 @@
|
|||||||
<tr
|
<tr
|
||||||
v-for="(row, i) in group.rows"
|
v-for="(row, i) in group.rows"
|
||||||
:key="`${gi}-${i}`"
|
:key="`${gi}-${i}`"
|
||||||
:class="i === group.rows.length - 1 ? 'border-b border-black' : 'border-b border-m-muted/30'"
|
:class="i === group.rows.length - 1 ? '[&>td]:border-b [&>td]:border-black' : '[&>td]:border-b [&>td]:border-m-muted/30'"
|
||||||
>
|
>
|
||||||
<!-- Cellule de groupe fusionnée (rowspan), centrée verticalement. -->
|
<!-- Cellule de groupe fusionnée (rowspan), centrée verticalement,
|
||||||
|
toujours séparateur noir en bas (entre groupes). -->
|
||||||
<td
|
<td
|
||||||
v-if="i === 0"
|
v-if="i === 0"
|
||||||
:rowspan="group.rows.length"
|
:rowspan="group.rows.length"
|
||||||
class="border-r border-black px-3 py-2 text-center align-middle font-medium"
|
class="!border-b-black border-r border-black px-3 text-center align-middle text-[14px] font-medium"
|
||||||
>
|
>
|
||||||
{{ group.label }}
|
{{ group.label }}
|
||||||
</td>
|
</td>
|
||||||
<td class="px-3 py-2">{{ headerTitle }}</td>
|
<td class="px-3 py-4 text-[14px]">{{ headerTitle }}</td>
|
||||||
<td class="px-3 py-2">{{ row.apro }}</td>
|
<td class="px-3 py-4 text-[14px]">{{ row.apro }}</td>
|
||||||
<td class="px-3 py-2">{{ row.delivery }}</td>
|
<td class="px-3 py-4 text-[14px]">{{ row.delivery }}</td>
|
||||||
<td class="px-3 py-2">{{ row.forfait }}</td>
|
<td class="px-3 py-4 text-[14px]">{{ row.forfait }}</td>
|
||||||
<td class="px-3 py-2">{{ row.tonne }}</td>
|
<td class="px-3 py-4 text-[14px]">{{ row.tonne }}</td>
|
||||||
<td class="px-3 py-2">{{ row.indexation }}</td>
|
<td class="px-3 py-4 text-[14px]">{{ row.indexation }}</td>
|
||||||
<td class="px-3 py-2">{{ row.state }}</td>
|
<td class="px-3 py-4 text-[14px]">{{ row.state }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
<tr v-if="!hasPrices">
|
<tr v-if="!hasPrices">
|
||||||
<td colspan="8" class="px-3 py-4 text-center text-m-muted">
|
<td colspan="8" class="px-3 py-4 text-center text-[14px] text-m-muted">
|
||||||
{{ t('transport.carriers.consultation.price.empty') }}
|
{{ t('transport.carriers.consultation.price.empty') }}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
Reference in New Issue
Block a user