ปรับ header

This commit is contained in:
Tanyalak 2023-12-15 14:58:12 +07:00
parent e305d7e907
commit 75da3daf71

View file

@ -52,11 +52,11 @@ const onScroll = (info: any) => { scrollInfo.value = info}
</script>
<!-- โครงเว -->
<template>
<q-layout view="hHh LpR fFr">
<q-scroll-observer @scroll="onScroll" />
<q-layout view="hHh LpR fFr" @scroll="onScroll" >
<!-- header -->
<q-header flat class="text-dark col-12 bg-transparent" height-hint="7">
<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
<q-header flat :class="scrollInfo.position >= 10 ? 'text-dark col-12 bgHeader': 'text-dark col-12 bg-transparent'" height-hint="7">
<q-toolbar class="items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
<div class="row items-center no-wrap cursor-pointer" @click="goHome" v-if="$q.screen.gt.xs">
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
<q-separator vertical inset class="q-ml-md" />
@ -130,7 +130,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
</div>
<div class="col-12 row" v-if="currentRouteName != 'contact'">
<q-page-scroller position="bottom-center" :scroll-offset="300" :offset="[18, 18]" >
<q-page-scroller :scroll-offset="300" :offset="[18, 18]" >
<q-tabs content-class="red" no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
@ -221,4 +221,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
overflow-y:auto;
}
.bgHeader{
background: #1e2234e5;
}
</style>