102 lines
4.5 KiB
Vue
102 lines
4.5 KiB
Vue
<template>
|
|
<section class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)]">
|
|
<!-- status content -->
|
|
<ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700" :class="isPanel?'':'hidden'">
|
|
<li class="bg-neutral-10 rounded p-3 w-full">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="font-bold text-sm leading-8">Cases</p>
|
|
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="mr-2 w-full">
|
|
<span class="block text-sm mb-2">1.9K / 98.3K</span>
|
|
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
|
</div>
|
|
<span class="block text-2xl font-medium">100%</span>
|
|
</div>
|
|
</li>
|
|
<li class="bg-neutral-10 rounded p-3 w-full">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="font-bold text-sm leading-8">Traces</p>
|
|
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="mr-2 w-full">
|
|
<span class="block text-sm mb-2">1.9K / 98.3K</span>
|
|
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
|
</div>
|
|
<span class="block text-2xl font-medium">100%</span>
|
|
</div>
|
|
</li>
|
|
<li class="bg-neutral-10 rounded p-3 w-full">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="font-bold text-sm leading-8">Activity Instances</p>
|
|
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="mr-2 w-full">
|
|
<span class="block text-sm mb-2">1.9K / 98.3K</span>
|
|
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
|
</div>
|
|
<span class="block text-2xl font-medium">100%</span>
|
|
</div>
|
|
</li>
|
|
<li class="bg-neutral-10 rounded p-3 w-full">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<p class="font-bold text-sm leading-8">Activities</p>
|
|
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="mr-2 w-full">
|
|
<span class="block text-sm mb-2">1.9K / 98.3K</span>
|
|
<ProgressBar :value="80" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
|
</div>
|
|
<span class="block text-2xl font-medium">100%</span>
|
|
</div>
|
|
</li>
|
|
<li class="bg-neutral-10 rounded p-3 w-full">
|
|
<p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
|
|
<div class="px-2 space-y-2 min-w-[140px] h-[40px]">
|
|
<span class="inline-block">2018.01.01 12:03 </span>
|
|
<span class="inline-block">~ 2022.08.05 02:53</span>
|
|
</div>
|
|
</li>
|
|
<li class="bg-neutral-10 rounded p-3 w-full">
|
|
<p class="font-bold text-sm leading-8">Case Duration</p>
|
|
<div class="flex justify-between items-center space-x-2 min-w-[272px]">
|
|
<div class="space-y-2">
|
|
<p><Tag value="MAX" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>11.34 mths</p>
|
|
<p><Tag value="MIN" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>instant</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<p><Tag value="MED" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>25.71 yrs</p>
|
|
<p><Tag value="AVG" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>6.00 days</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- control button -->
|
|
<div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
|
|
<span class="material-symbols-outlined block px-8 text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isPanel: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.isPanel = true;
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
:deep(.p-progressbar .p-progressbar-value) {
|
|
@apply bg-neutral-900
|
|
}
|
|
</style>
|