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

แก้ไขหน้า support user

Browse source
This commit is contained in:
puri-ph4tt 2024-01-29 18:08:27 +07:00
parent 659e508a92
commit 666fb8e4d9
1 changed files with 173 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

176
src/modules/00_support/views/MainPage.vue
View file

@ -1,7 +1,177 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref } from "vue";
const search = ref("");
const items = ref<any>([
{
icon: "mdi-account-settings-outline",
title: "ข้อมูลหลัก",
},
{
icon: "mdi-account-group-outline",
title: "โครงสร้างอัตรากำลัง",
},
{
icon: "mdi-file-account-outline",
title: "ทะเบียนประวัติ",
},
{
icon: "mdi-magnify",
title: "สรรหา",
},
{
icon: "mdi-account-check",
title: "บรรจุแต่งตั้ง",
},
]);
</script>
<template>
<div>support user</div>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">ถาม - ตอบ</div>
<div class="col-12">
<q-card bordered>
<div class="row">
<!-- Left -->
<div class="col-3">
<div class="q-px-md q-py-md">
<q-input
rounded
outlined
dense
placeholder="ค้นหา"
debounce="300"
v-model="search"
id="inputSearch"
>
<template v-slot:prepend
><q-icon name="mdi-magnify" class="pointer" />
</template>
</q-input>
</div>
<div v-for="(item, j) in items">
<div
class="noactive row q-py-md justify-between items-center q-px-md"
>
<div class="col-11 row items-center">
<div class="noactive-avatar">
<q-avatar color="grey-2" text-color="white" size="40px">
<q-icon :name="item.icon" size="24px" color="teal" />
</q-avatar>
</div>
<div class="col column q-ml-md">
<span class="col text-weight-bold">
{{ item.title }}
</span>
<!-- <span class="col">ขอสอบถาม</span> -->
</div>
</div>
<div class="col-1">
<q-icon name="mdi-send" size="xs" color="teal" />
</div>
</div>
<q-separator v-if="j < items.length - 1" inset />
</div>
</div>
<q-separator vertical />
<!-- Right -->
<div class="col-grow">
<div class="row q-py-md q-px-lg justify-between items-center">
<div class="col row">
<div style="border-radius: 50%; border: 1px solid teal">
<q-avatar color="teal-1" text-color="white" size="40px">
<q-icon :name="items[0].icon" size="24px" color="teal" />
</q-avatar>
</div>
<div class="col column q-ml-md">
<span class="col text-weight-bold">
{{ items[0].title }}
</span>
<span>
<q-icon name="mdi-circle" size="10px" color="green" />
ออนไลน์
</span>
</div>
</div>
<div class="col-2 text-right q-gutter-x-md">
<q-icon
class="col"
name="mdi-video-outline"
size="24px"
color="teal"
/>
<q-icon
class="col"
name="mdi-information-outline"
size="24px"
color="grey"
/>
</div>
</div>
<q-separator />
<div class="row" style="background-color: #f5f4f4; height: 400px;">asas</div>
<q-separator />
<div class="row q-py-md q-px-lg justify-between items-center">
<div class="col-1 text-left">
<q-btn flat>
<q-icon
name="mdi-paperclip"
size="20px"
style="transform: rotate(-125deg)"
color="grey"
/>
</q-btn>
</div>
<div class="col-grow">
<q-input
outlined
dense
placeholder="Aa"
v-model="search"
id="message"
>
</q-input>
</div>
<div class="col-2">
<q-btn flat style="color: #009789" label="ส่งข้อความ" />
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
</div>
</template>
<style scoped></style>
<style scoped lang="scss">
.noactive {
transition: 0.1s ease;
opacity: 1;
cursor: pointer;
&:hover {
background: #ebf9f7;
.noactive-avatar {
border-radius: 50%;
border: 1px solid teal;
}
}
}
.noactive-avatar {
border-radius: 50%;
border: 1px solid #f5f4f4;
}
</style>