layout
This commit is contained in:
setthawutttty
parent
6b32212df8
commit
74ceceb5e9
1 changed files with 136 additions and 68 deletions
|
|
@ -280,11 +280,7 @@ function defaultOpen(index: number) {
|
|||
<div
|
||||
v-if="menuItem.children && menuItem.children.length > 0"
|
||||
>
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
v-if="subMenu.key == 4.1 || subMenu.key == 4.2"
|
||||
>
|
||||
<q-item dense clickable v-if="subMenu.children">
|
||||
<q-item-section>{{ subMenu.label }} </q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right" />
|
||||
|
|
@ -297,26 +293,77 @@ function defaultOpen(index: number) {
|
|||
style="background: #273238; z-index: 9000"
|
||||
>
|
||||
<q-list class="text-white q-py-sm">
|
||||
<q-item
|
||||
<div
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.label"
|
||||
:to="subMenu2.path"
|
||||
:active="
|
||||
$route.path === subMenu2.path ||
|
||||
($route.path !== '/' &&
|
||||
subMenu2.path?.includes($route.path))
|
||||
"
|
||||
dense
|
||||
class="q-pl-md text-body2"
|
||||
active-class="text-primary active-item text-weight-medium"
|
||||
clickable
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{
|
||||
subMenu2.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
v-if="subMenu2.children"
|
||||
>
|
||||
<q-item-section
|
||||
>{{ subMenu2.label }}
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right" />
|
||||
</q-item-section>
|
||||
|
||||
<q-menu
|
||||
anchor="top end"
|
||||
self="top start"
|
||||
:offset="[5, 0]"
|
||||
style="background: #273238; z-index: 9000"
|
||||
>
|
||||
<q-list class="text-white q-py-sm">
|
||||
<div
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.label"
|
||||
>
|
||||
<q-item
|
||||
:to="subMenu2.path"
|
||||
:active="
|
||||
$route.path === subMenu2.path ||
|
||||
($route.path !== '/' &&
|
||||
subMenu2.path?.includes(
|
||||
$route.path
|
||||
))
|
||||
"
|
||||
dense
|
||||
class="q-pl-md text-body2"
|
||||
active-class="text-primary active-item text-weight-medium"
|
||||
clickable
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{
|
||||
subMenu2.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="q-pl-md q-pr-xl text-body2"
|
||||
active-class="text-primary active-item text-weight-medium"
|
||||
clickable
|
||||
:to="subMenu2.path"
|
||||
:active="
|
||||
$route.path === subMenu2.path ||
|
||||
($route.path !== '/' &&
|
||||
subMenu2.path?.includes($route.path))
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{
|
||||
subMenu2.label
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
|
|
@ -428,65 +475,75 @@ function defaultOpen(index: number) {
|
|||
</template>
|
||||
|
||||
<!-- เมนูย่อย 1 ชั้น -->
|
||||
<div v-if="menuItem.children && menuItem.children.length > 0">
|
||||
<div v-for="(subMenu, i) in menuItem.children" :key="i">
|
||||
<q-expansion-item
|
||||
switch-toggle-side
|
||||
dense-toggle
|
||||
:label="subMenu.label"
|
||||
v-if="subMenu.children && subMenu.children.length > 0"
|
||||
class="expan2"
|
||||
dense
|
||||
>
|
||||
<div v-for="(subMenu, i) in menuItem.children" :key="i">
|
||||
<q-expansion-item
|
||||
switch-toggle-side
|
||||
dense-toggle
|
||||
:label="subMenu.label"
|
||||
v-if="subMenu.children && subMenu.children.length > 0"
|
||||
class="expan2"
|
||||
dense
|
||||
>
|
||||
<div v-for="(subMenu2, i) in subMenu.children" :key="i">
|
||||
<q-expansion-item
|
||||
switch-toggle-side
|
||||
dense-toggle
|
||||
:label="subMenu2.label"
|
||||
v-if="subMenu2.children && subMenu2.children.length > 0"
|
||||
class="expan3"
|
||||
dense
|
||||
>
|
||||
<div class="bg-greenC">
|
||||
<q-item
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="subMenu3 in subMenu2.children"
|
||||
:key="subMenu3.path"
|
||||
:to="subMenu3.path"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400 subLabel"
|
||||
>{{ subMenu3.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.path"
|
||||
:to="subMenu2.path"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400 subLabel"
|
||||
>{{ subMenu2.label }}
|
||||
<q-item-label class="font-400">
|
||||
{{ subMenu2.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
:key="subMenu.path"
|
||||
:to="subMenu.path"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">
|
||||
{{ subMenu.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
:key="subMenu.path"
|
||||
:to="subMenu.path"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">
|
||||
{{ subMenu.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<q-item
|
||||
v-else
|
||||
dense
|
||||
class="menuSubHover"
|
||||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="child in menuItem.children"
|
||||
:key="child.path"
|
||||
:to="child.path"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">
|
||||
{{ child.label }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
<q-item
|
||||
v-else
|
||||
|
|
@ -561,6 +618,14 @@ function defaultOpen(index: number) {
|
|||
padding: 8px;
|
||||
padding-left: 11%;
|
||||
}
|
||||
.expan3 .q-item {
|
||||
padding: 8px;
|
||||
padding-left: 16%;
|
||||
}
|
||||
.expan3 .menuSubHover {
|
||||
padding-left: 30%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.subLabel {
|
||||
white-space: nowrap;
|
||||
width: 160px;
|
||||
|
|
@ -606,6 +671,9 @@ function defaultOpen(index: number) {
|
|||
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
||||
}
|
||||
|
||||
.bg-greenC {
|
||||
background-color: #2c3337;
|
||||
}
|
||||
.toptitle {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue