hrms-bangkok/web-faq
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

edit ui

Browse source
This commit is contained in:
kanyarat2001 2023-12-14 16:46:24 +07:00
parent bbfaeb74ab
commit 749c79dfd4
4 changed files with 96 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/modules/00_contact/views/Main.vue Normal file
View file

@ -0,0 +1,28 @@
<script setup lang="ts">
</script>
<template>
<div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
ติดต่อเรา
</div>
</template>
<style>
.card1{
margin-top:15px;
background-color:#F8F8F8;
border-color: #EDEDED !important;
}
.iconQA {
color: #016987;
font-size: 20px;
margin-right: 1%;
}
</style>

3
src/modules/01_metadata/views/Main.vue
View file

@ -135,10 +135,10 @@
</q-card> </q-card>
</div> </div>
</div> </div>
</template> </template>
<style> <style>
@ -153,6 +153,5 @@
font-size: 20px; font-size: 20px;
margin-right: 1%; margin-right: 1%;
} }
</style> </style>

13
src/router/index.ts
View file

@ -4,6 +4,9 @@ const MainLayout = () => import("@/views/MainLayout.vue");
const Metadata = () => import("@/modules/01_metadata/views/Main.vue"); const Metadata = () => import("@/modules/01_metadata/views/Main.vue");
const Organizational = () => import("@/modules/02_organizational/views/Main.vue"); const Organizational = () => import("@/modules/02_organizational/views/Main.vue");
const Contact = () => import("@/modules/00_contact/views/Main.vue");
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
@ -20,8 +23,14 @@ const router = createRouter({
{ {
path: "/organizational", path: "/organizational",
name: "organizational", name: "organizational",
component: Organizational component: Organizational,
} },
{
path: "/contact",
name: "contact",
component: Contact,
},
] ]
}, },
] ]

86
src/views/MainLayout.vue
View file

@ -7,7 +7,9 @@ const router = useRouter();
const $q = useQuasar(); const $q = useQuasar();
const currentRouteName = ref('home'); const tab = ref('')
const currentRouteName = ref('');
const text = ref(''); const text = ref('');
const menuList = [ const menuList = [
{text:'ข้อมูลหลัก',path: 'metadata'}, {text:'ข้อมูลหลัก',path: 'metadata'},
@ -32,12 +34,19 @@ const mainmenu = [
const clickMain = (val: string) => { const clickMain = (val: string) => {
router.push(val) router.push(val)
currentRouteName.value = val currentRouteName.value = val
tab.value=val
}; };
const goHome = () => { const goHome = () => {
router.push('/') router.push('/')
currentRouteName.value = 'home' currentRouteName.value = ''
}; };
const click = () => {
router.push('/contact')
currentRouteName.value = 'contact'
};
</script> </script>
<!-- โครงเว็บ --> <!-- โครงเว็บ -->
<template> <template>
@ -45,22 +54,33 @@ const goHome = () => {
<!-- header --> <!-- header -->
<q-header flat class="text-dark col-12 bg-header bg-transparent" height-hint="7"> <q-header flat class="text-dark col-12 bg-header 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-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
<div class="row items-center no-wrap" v-if="$q.screen.gt.xs"> <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" class=" cursor-pointer" @click="goHome" /> <q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
<q-separator vertical inset class="q-ml-md" /> <q-separator vertical inset class="q-ml-md" />
<div class="row q-ml-md items-center q-pt-xs"> <div class="row q-ml-md items-center q-pt-xs">
<div <div
style="color: #ffffff; letter-spacing: 1px; line-height:10px;" style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
class="text-body2 text-weight-bolder col-12" class="text-body2 text-weight-bolder col-12"
> >
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span> ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
</div> </div>
<div class="text-caption text-white">SUPPORT</div> <div class="text-caption text-white">SUPPORT</div>
</div> </div>
</div> </div>
<div v-else class="row items-center"> <div v-else class="row items-center">
<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" /> <img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
</div> </div>
<q-space></q-space>
<div>
<q-btn flat color="primary" label="หน้าแรก" @click="goHome"/>
<q-btn color="white" text-color="black" label="ติดต่อเรา" @click="click()"/>
</div>
</q-toolbar> </q-toolbar>
</q-header> </q-header>
@ -79,45 +99,43 @@ const goHome = () => {
</template> </template>
</q-input> </q-input>
</div> </div>
<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == 'home'"> <div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == ''">
<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div> <div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
<div class="col-12"><q-separator color="grey-4" /></div> <div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12 row q-col-gutter-lg"> <div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div class="col-xs-12 col-sm-4" <div class="col-xs-12 col-sm-4"
v-for="(menu , index) in mainmenu" v-for="(menu , index) in mainmenu"
:key="index" :key="index"
> >
<q-card class="q-pa-md row col-12 items-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) --> <q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
<q-icon size="20px" :name="`${menu.icon}`" /> <q-icon class="col-12 items-center" size="20px" :name="`${menu.icon}`"/>
<div class="q-pl-md">{{ menu.text }}</div> <div class="q-pt-md">{{ menu.text }} </div>
</q-card> </q-card>
</div> </div>
</div>
</div> </div>
</div> </div>
<div class="col-11 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
<div class="col-3 row"> <div class="col-9 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
<q-card class="q-px-sm col-12"> <div class="col-12 content-heigt">
<q-list dense bordered padding class="rounded-borders text-grey-8">
<q-item
v-for="(menuItem, index) in menuList" :key="index" <div class="col-12 row ">
class="rounded-borders text-weight-light" <q-card class="col-12">
clickable
v-ripple
:to="{ name: `${menuItem.path}`}"
active-class="text-blue-7 text-weight-medium bg-blue-1"
>
<q-item-section class="q-py-sm">
{{ menuItem.text }}
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-9 row ">
<q-card class="col-12 content-heigt">
<router-view :key="$route.fullPath" /> <router-view :key="$route.fullPath" />
</q-card> </q-card>
</div> </div>
<div class="col-12 row " v-if="currentRouteName != 'contact'">
<q-tabs 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' })" />
<q-tab name="articles" label="Articles" />
</q-tabs>
</div>
</div>
</div> </div>
</div> </div>
</q-page> </q-page>
@ -184,8 +202,14 @@ const goHome = () => {
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important; box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
} }
.cardmenu{
padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
}
.content-heigt{ .content-heigt{
height: 57vh !important; height: 55vh !important;
overflow-y:auto; overflow-y:auto;
} }
</style> </style>