Merge branch 'dev/net' into develop
This commit is contained in:
Net
commit
ad930ecdff
3 changed files with 164 additions and 128 deletions
19
src/components/01_branch-management/StatCardComponet.vue
Normal file
19
src/components/01_branch-management/StatCardComponet.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
|
||||
defineProps<{
|
||||
amount: string;
|
||||
label: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<app-box class="bordered" style="width: 15%; min-width: 150px">
|
||||
<div class="column">
|
||||
<div class="col-4 text-h6 text-weight-bold">{{ amount }}</div>
|
||||
<div class="col-4 text-weight-bold">{{ label }}</div>
|
||||
</div>
|
||||
</app-box>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
136
src/components/TooltipComponet.vue
Normal file
136
src/components/TooltipComponet.vue
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
imgSrc: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
|
||||
<q-btn
|
||||
unelevated
|
||||
class="color-btn-icon"
|
||||
size="10px"
|
||||
round
|
||||
icon="mdi-exclamation"
|
||||
:class="{ 'dark-btn-icon': $q.dark.isActive }"
|
||||
></q-btn>
|
||||
|
||||
<div
|
||||
class="tooltip-text"
|
||||
:class="{ 'dark-tooltip-text': $q.dark.isActive }"
|
||||
>
|
||||
<q-img
|
||||
class="q-mt-md"
|
||||
:src="`/${imgSrc}${$q.dark.isActive ? 'dark' : 'light'}.png`"
|
||||
width="60%"
|
||||
/>
|
||||
<div
|
||||
class="box-content"
|
||||
:class="{ 'dack-box-content': $q.dark.isActive }"
|
||||
>
|
||||
<div class="column justify-center" style="height: 100%">
|
||||
<div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
|
||||
<div class="col-4 q-mb-md q-px-md">
|
||||
<div
|
||||
class="content-text q-pa-sm"
|
||||
:class="{ 'dack-content-text': $q.dark.isActive }"
|
||||
>
|
||||
{{ $t('branchClickToCreateMainOffice') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
background: var(--_bg-box-content);
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
|
||||
.content-text {
|
||||
color: var(--_color-box-content-text);
|
||||
background: var(--_bg-box-content-text);
|
||||
border-radius: 6px;
|
||||
|
||||
&.dack-content-text {
|
||||
border: 1px solid var(--brand-1);
|
||||
}
|
||||
}
|
||||
|
||||
&.dack-box-content {
|
||||
border: 1px solid var(--gray-7);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&.dark-tooltip {
|
||||
--_bg-box-content: var(--gray-9);
|
||||
--_bg-tooltip-branch: var(--gray-11);
|
||||
--_bg-tooltip-branch-arrow: var(--_bg-box-content);
|
||||
--_bg-box-content-text: var(--gray-11);
|
||||
--_color-box-content-text: var(--gray-0);
|
||||
--_main-page-branch-tooltip: 100.5%;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-text {
|
||||
&.dark-tooltip-text {
|
||||
border: 1px solid var(--gray-7);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text {
|
||||
visibility: hidden;
|
||||
width: 250px;
|
||||
height: 200px;
|
||||
background-color: var(--_bg-tooltip-branch);
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -165px;
|
||||
left: -265px;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text::after {
|
||||
content: '';
|
||||
z-index: -99;
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: var(--_main-page-branch-tooltip);
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
|
||||
transparent;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.color-btn-icon {
|
||||
--_bg-color-btn-icon: var(--blue-5-hsl);
|
||||
transform: rotate(180deg);
|
||||
color: var(--gray-0);
|
||||
background: hsl(var(--_bg-color-btn-icon));
|
||||
|
||||
&.dark-btn-icon {
|
||||
--_bg-color-btn-icon: var(--surface-0);
|
||||
border: 2px solid;
|
||||
border-color: var(--brand-1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
|
||||
import StatCardComponet from 'components/01_branch-management/StatCardComponet.vue';
|
||||
import TooltipComponet from 'src/components/TooltipComponet.vue';
|
||||
</script>
|
||||
<template>
|
||||
<div class="column">
|
||||
|
|
@ -8,47 +10,15 @@ import AppBox from 'components/app/AppBox.vue';
|
|||
{{ $t('branchManagement') }}
|
||||
</div>
|
||||
|
||||
<app-box>
|
||||
<stat-card-componet amount="10" label="สาขาใหญ่" />
|
||||
</app-box>
|
||||
|
||||
<app-box bordered style="width: 100%; height: 500px">
|
||||
<div class="column" style="height: 100%">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
<div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
|
||||
<q-btn
|
||||
unelevated
|
||||
class="color-btn-icon"
|
||||
size="10px"
|
||||
round
|
||||
icon="mdi-exclamation"
|
||||
:class="{ 'dark-btn-icon': $q.dark.isActive }"
|
||||
></q-btn>
|
||||
|
||||
<div
|
||||
class="tooltip-text"
|
||||
:class="{ 'dark-tooltip-text': $q.dark.isActive }"
|
||||
>
|
||||
<q-img
|
||||
class="q-mt-md"
|
||||
:src="`/img-table-${$q.dark.isActive ? 'dark' : 'light'}.png`"
|
||||
width="60%"
|
||||
/>
|
||||
<div
|
||||
class="box-content"
|
||||
:class="{ 'dack-box-content': $q.dark.isActive }"
|
||||
>
|
||||
<div class="column justify-center" style="height: 100%">
|
||||
<div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
|
||||
<div class="col-4 q-mb-md q-px-md">
|
||||
<div
|
||||
class="content-text q-pa-sm"
|
||||
:class="{ 'dack-content-text': $q.dark.isActive }"
|
||||
>
|
||||
{{ $t('branchClickToCreateMainOffice') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tooltip-componet imgSrc="img-table-" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -70,93 +40,4 @@ import AppBox from 'components/app/AppBox.vue';
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
background: var(--_bg-box-content);
|
||||
bottom: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
|
||||
.content-text {
|
||||
color: var(--_color-box-content-text);
|
||||
background: var(--_bg-box-content-text);
|
||||
border-radius: 6px;
|
||||
|
||||
&.dack-content-text {
|
||||
border: 1px solid var(--brand-1);
|
||||
}
|
||||
}
|
||||
|
||||
&.dack-box-content {
|
||||
border: 1px solid var(--gray-7);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&.dark-tooltip {
|
||||
--_bg-box-content: var(--gray-9);
|
||||
--_bg-tooltip-branch: var(--gray-11);
|
||||
--_bg-tooltip-branch-arrow: var(--_bg-box-content);
|
||||
--_bg-box-content-text: var(--gray-11);
|
||||
--_color-box-content-text: var(--gray-0);
|
||||
--_main-page-branch-tooltip: 100.5%;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-text {
|
||||
&.dark-tooltip-text {
|
||||
border: 1px solid var(--gray-7);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text {
|
||||
visibility: hidden;
|
||||
width: 250px;
|
||||
height: 200px;
|
||||
background-color: var(--_bg-tooltip-branch);
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -165px;
|
||||
left: -265px;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text::after {
|
||||
content: '';
|
||||
z-index: -99;
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: var(--_main-page-branch-tooltip);
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
|
||||
transparent;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.color-btn-icon {
|
||||
--_bg-color-btn-icon: var(--blue-5-hsl);
|
||||
transform: rotate(180deg);
|
||||
color: var(--gray-0);
|
||||
background: hsl(var(--_bg-color-btn-icon));
|
||||
|
||||
&.dark-btn-icon {
|
||||
--_bg-color-btn-icon: var(--surface-0);
|
||||
border: 2px solid;
|
||||
border-color: var(--brand-1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue