Discover: sidebarTraces layout done.
This commit is contained in:
chiayin
277
src/components/Discover/sidebarTraces.vue
Normal file
277
src/components/Discover/sidebarTraces.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
|
||||
<template #header>
|
||||
<p class="h1">Traces</p>
|
||||
</template>
|
||||
<div class="pt-4 h-full flex items-center justify-start">
|
||||
<!-- Trace List -->
|
||||
<section class="w-80 h-full pr-4 border-r border-neutral-300">
|
||||
<p class="h2 px-2 mb-2">Trace List (25)</p>
|
||||
<p class="text-primary h2 px-2 mb-2">
|
||||
<span class="material-symbols-outlined text-base align-[-10%] mr-2">info</span>Click trace number to see more.
|
||||
</p>
|
||||
<div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
|
||||
<table class="border-separate border-spacing-x-2">
|
||||
<thead class="sticky top-0 z-10 bg-neutral-10">
|
||||
<tr>
|
||||
<th class="h2 px-2 border-b border-neutral-500">Trace</th>
|
||||
<th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-xs p-2">#365</td>
|
||||
<td class="text-xs p-2 w-24">
|
||||
<ProgressBar :value="80" :showValue="false" class="!h-4"></ProgressBar>
|
||||
</td>
|
||||
<td class="text-xs py-2">1,234,567,890</td>
|
||||
<td class="text-xs p-2">100%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Trace item Table -->
|
||||
<section class="pl-4 h-full w-[calc(100%_-_320px)]">
|
||||
<p class="h2 mb-2">Trace #501</p>
|
||||
<div class="h-52 px-2 mb-2 border border-neutral-300 rounded">
|
||||
<div class="h-full scrollbar overflow-x-auto">
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
|
||||
<DataTable :value="products" showGridlines>
|
||||
<Column field="code" header="Code" sortable></Column>
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
<Column field="category" header="Category" sortable></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
sidebarTraces: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
products: [
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 進度條顏色 */
|
||||
:deep .p-progressbar .p-progressbar-value {
|
||||
@apply bg-primary
|
||||
}
|
||||
/* Table set */
|
||||
:deep .p-datatable-thead th {
|
||||
@apply sticky top-0 left-0 z-10 bg-neutral-10
|
||||
}
|
||||
:deep .p-datatable .p-datatable-thead > tr > th {
|
||||
@apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500
|
||||
}
|
||||
:deep .p-datatable .p-datatable-tbody > tr > td {
|
||||
@apply border-neutral-500 !border-t-0
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user