756 lines
23 KiB
Vue
756 lines
23 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import { useRouter } from "vue-router";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type {
|
|
DataOption,
|
|
DataOptioninfo,
|
|
} from "@/modules/05_placement/interface/index/ProfileType";
|
|
import type {
|
|
InformationOps,
|
|
FormAddPerson,
|
|
} from "@/modules/05_placement/interface/index/ProfileType";
|
|
|
|
const retireDate = ref<Date>();
|
|
const router = useRouter();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
date2Thai,
|
|
success,
|
|
dateToISO,
|
|
messageError,
|
|
dialogMessageNotify,
|
|
showLoader,
|
|
hideLoader,
|
|
dialogConfirm,
|
|
} = mixin;
|
|
|
|
const age = ref<string | null>("");
|
|
const defaultCitizenData = ref<string>("");
|
|
const informaData = ref<FormAddPerson>({
|
|
prefix: "",
|
|
firstName: "",
|
|
lastName: "",
|
|
citizenId: "",
|
|
birthDate: null,
|
|
age: null,
|
|
genderId: null,
|
|
bloodId: null,
|
|
nationality: null,
|
|
ethnicity: null,
|
|
statusId: null,
|
|
religionId: null,
|
|
tel: null,
|
|
employeeType: null,
|
|
employeeClass: null,
|
|
profileType: null,
|
|
});
|
|
|
|
// รายการข้อมูลทั้งหมด
|
|
const Ops = ref<InformationOps>({
|
|
prefixOps: [],
|
|
prefixOldOps: [],
|
|
genderOps: [],
|
|
bloodOps: [],
|
|
statusOps: [],
|
|
religionOps: [],
|
|
employeeClassOps: [],
|
|
employeeTypeOps: [],
|
|
});
|
|
// ข้อมูลเมื่อเลือกแล้ว
|
|
const OpsFilter = ref<InformationOps>({
|
|
prefixOps: [],
|
|
prefixOldOps: [],
|
|
genderOps: [],
|
|
bloodOps: [],
|
|
statusOps: [],
|
|
religionOps: [],
|
|
employeeClassOps: [],
|
|
employeeTypeOps: [],
|
|
});
|
|
|
|
// รูป profile
|
|
const inputImage = ref<any>(null);
|
|
const image = ref<any>(null);
|
|
const fileData = ref<any>(null);
|
|
|
|
/**
|
|
* ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)
|
|
*/
|
|
async function fetchPerson() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.profileNewMetaMain)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let optionbloodGroups: DataOption[] = [];
|
|
data.bloodGroups.map((r: DataOptioninfo) => {
|
|
optionbloodGroups.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.bloodOps = optionbloodGroups;
|
|
OpsFilter.value.bloodOps = optionbloodGroups;
|
|
|
|
let optiongenders: DataOption[] = [];
|
|
data.genders.map((r: DataOptioninfo) => {
|
|
optiongenders.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.genderOps = optiongenders;
|
|
OpsFilter.value.genderOps = optiongenders;
|
|
|
|
let optionprefixs: DataOption[] = [];
|
|
optionprefixs = data.prefixs.map((v: any) => ({
|
|
id: v.id,
|
|
name: v.name,
|
|
}));
|
|
|
|
Ops.value.prefixOps = optionprefixs;
|
|
OpsFilter.value.prefixOps = optionprefixs;
|
|
|
|
let optionrelationships: DataOption[] = [];
|
|
data.relationships.map((r: DataOptioninfo) => {
|
|
optionrelationships.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.statusOps = optionrelationships;
|
|
OpsFilter.value.statusOps = optionrelationships;
|
|
|
|
let optionreligions: DataOption[] = [];
|
|
data.religions.map((r: DataOptioninfo) => {
|
|
optionreligions.push({
|
|
id: r.id.toString(),
|
|
name: r.name.toString(),
|
|
});
|
|
});
|
|
Ops.value.religionOps = optionreligions;
|
|
OpsFilter.value.religionOps = optionreligions;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function uploadImage(e: any) {
|
|
const input = e.target.files;
|
|
if (input.length > 0) {
|
|
const url = URL.createObjectURL(input[0]);
|
|
image.value = url;
|
|
fileData.value = input[0];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันคลิกแก้ไขรูป profile
|
|
*/
|
|
function addNewImage() {
|
|
inputImage.value.click();
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
|
* @param val คำค้นหา
|
|
* @param update ฟังก์ชัน
|
|
* @param refData ประเภทของตัวเลือก
|
|
*/
|
|
function filterSelector(val: string, update: Function, refData: string) {
|
|
const newVal = val.toLowerCase();
|
|
switch (refData) {
|
|
case "prefixOps":
|
|
update(() => {
|
|
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
|
|
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "genderOps":
|
|
update(() => {
|
|
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
|
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "bloodOps":
|
|
update(() => {
|
|
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
|
|
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "statusOps":
|
|
update(() => {
|
|
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
|
|
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "religionOps":
|
|
update(() => {
|
|
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
|
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันเช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
|
|
*/
|
|
function calculateMaxDate() {
|
|
const today = new Date();
|
|
today.setFullYear(today.getFullYear() - 18);
|
|
return today;
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันยืนยันการบันทึกข้อมูล
|
|
*/
|
|
function onSubmit() {
|
|
const formData = new FormData();
|
|
if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
|
if (informaData.value.citizenId != undefined)
|
|
formData.append("citizenId", informaData.value.citizenId);
|
|
if (informaData.value.prefix != undefined)
|
|
formData.append("prefix", informaData.value.prefix);
|
|
if (informaData.value.firstName != undefined)
|
|
formData.append("firstName", informaData.value.firstName);
|
|
if (informaData.value.lastName != undefined)
|
|
formData.append("lastName", informaData.value.lastName);
|
|
if (informaData.value.genderId != undefined)
|
|
formData.append("gender", informaData.value.genderId);
|
|
if (informaData.value.nationality != undefined)
|
|
formData.append("nationality", informaData.value.nationality);
|
|
if (informaData.value.ethnicity != undefined)
|
|
formData.append("race", informaData.value.ethnicity);
|
|
if (informaData.value.religionId != undefined)
|
|
formData.append("religion", informaData.value.religionId);
|
|
if (informaData.value.birthDate != undefined)
|
|
formData.append(
|
|
"birthDate",
|
|
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
|
|
);
|
|
if (informaData.value.bloodId != undefined)
|
|
formData.append("bloodGroup", informaData.value.bloodId);
|
|
if (informaData.value.statusId != undefined)
|
|
formData.append("relationship", informaData.value.statusId);
|
|
if (informaData.value.tel != undefined)
|
|
formData.append("telephoneNumber", informaData.value.tel);
|
|
if (informaData.value.employeeType != undefined)
|
|
formData.append("employeeType", informaData.value.employeeType);
|
|
if (informaData.value.employeeClass != undefined)
|
|
formData.append("employeeClass", informaData.value.employeeClass);
|
|
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.receiveData(), formData)
|
|
.then(async () => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
clickBack();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันกลับไปหน้ารายการรายการรับโอน
|
|
*/
|
|
function clickBack() {
|
|
router.push("/placement/receive");
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันคำนวนอายุ
|
|
* @param birthDate วันเดือยปีเกิด
|
|
* @returns อายุ แบบ ปี เดือน วัน
|
|
*/
|
|
function calculateAge(birthDate: Date | null) {
|
|
if (!birthDate) return null;
|
|
const birthDateTimeStamp = new Date(birthDate).getTime();
|
|
const now = new Date();
|
|
const diff = now.getTime() - birthDateTimeStamp;
|
|
|
|
const ageDate = new Date(diff);
|
|
const years = ageDate.getUTCFullYear() - 1970;
|
|
const months = ageDate.getUTCMonth();
|
|
const days = ageDate.getUTCDate() - 1;
|
|
const retire = new Date(birthDate);
|
|
retire.setFullYear(retire.getFullYear() + 60);
|
|
retireDate.value = retire;
|
|
|
|
if (years > 60) {
|
|
return "อายุเกิน 60 ปี";
|
|
}
|
|
|
|
return `${years} ปี ${months} เดือน ${days} วัน`;
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันอัปเดทวันเดือนปีเกิด
|
|
* @param v วันเดือยปีเกิด
|
|
*/
|
|
function updateBirthDate(v: Date) {
|
|
age.value = calculateAge(v);
|
|
}
|
|
|
|
/**
|
|
* ทำงานเมื่อมีการเรียกใช้ Components
|
|
*/
|
|
onMounted(async () => {
|
|
await fetchPerson();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-12 row">
|
|
<div class="row col-12" style="padding-top: 80px">
|
|
<div id="information" name="1" class="row col-12 information q-mt-sm">
|
|
<!-- Header -->
|
|
<q-page-sticky
|
|
position="top"
|
|
expand
|
|
class="bg-grey-2 text-white"
|
|
style="z-index: 99; padding: 0% 1% 0% 1%"
|
|
>
|
|
<div
|
|
class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
|
|
>
|
|
<q-btn
|
|
flat
|
|
round
|
|
class="bg-teal-1 full-height"
|
|
color="primary"
|
|
icon="mdi-chevron-left"
|
|
dense
|
|
@click="router.push(`/placement/receive`)"
|
|
>
|
|
</q-btn>
|
|
<q-avatar size="65px" rounded class="containerimage">
|
|
<img
|
|
v-if="image == null"
|
|
src="@/assets/avatar_user.jpg"
|
|
class="bg-grey-3"
|
|
style="object-fit: cover"
|
|
/>
|
|
<img :src="image" class="bg-grey-3" style="object-fit: cover" />
|
|
<div
|
|
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
|
@click="addNewImage()"
|
|
>
|
|
<q-icon name="mdi-camera" size="18px" color="blue">
|
|
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
|
</q-icon>
|
|
|
|
<input
|
|
type="file"
|
|
style="display: none"
|
|
ref="inputImage"
|
|
accept="image/*"
|
|
@change="uploadImage"
|
|
/>
|
|
</div>
|
|
</q-avatar>
|
|
|
|
<div class="row items-center text-dark q-ml-md">
|
|
<div class="column">
|
|
<div class="text-bold q-pb-xs text-name">
|
|
เพิ่มข้อมูลทะเบียนประวัติ
|
|
</div>
|
|
<div class="text-bold q-pb-xs text-sub">
|
|
ข้าราชการกทม. สามัญ
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-space />
|
|
</div>
|
|
</q-page-sticky>
|
|
|
|
<q-card flat bordered class="col-12 q-pa-sm">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
|
<!-- <HeaderTop
|
|
header="ข้อมูลส่วนตัว"
|
|
icon="mdi-account"
|
|
class="q-px-lg q-pt-md"
|
|
/> -->
|
|
<div class="flex items-center">
|
|
<div class="flex items-center">
|
|
<q-icon
|
|
name="mdi-account"
|
|
size="1.5em"
|
|
color="grey-5"
|
|
class="q-mr-md"
|
|
/>
|
|
<div class="text-bold text-subtitle2 col-12 row items-center">
|
|
ข้อมูลส่วนตัว
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-card-section class="q-px-lg">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-3">
|
|
<q-input
|
|
bg-color="white"
|
|
outlined
|
|
v-model="informaData.citizenId"
|
|
label="เลขประจำตัวประชาชน"
|
|
class="inputgreen"
|
|
dense
|
|
lazy-rules
|
|
borderless
|
|
:rules="[
|
|
(val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
|
|
(val: string) =>
|
|
val.length >= 13 ||
|
|
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
|
]"
|
|
maxlength="13"
|
|
hide-bottom-space
|
|
mask="#############"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<q-select
|
|
bg-color="white"
|
|
v-model="informaData.prefix"
|
|
label="คำนำหน้าชื่อ"
|
|
outlined
|
|
dense
|
|
lazy-rules
|
|
class="inputgreen"
|
|
:options="Ops.prefixOps"
|
|
option-label="name"
|
|
option-value="name"
|
|
map-options
|
|
hide-bottom-space
|
|
:rules="[
|
|
(val:string) => {
|
|
return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
|
|
},
|
|
]"
|
|
emit-value
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
@filter="(inputValue:string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<q-input
|
|
bg-color="white"
|
|
outlined
|
|
v-model="informaData.firstName"
|
|
label="ชื่อ"
|
|
dense
|
|
lazy-rules
|
|
class="inputgreen"
|
|
borderless
|
|
:rules="[(val:string) => val.length > 0 || 'กรุณากรอกชื่อ']"
|
|
hide-bottom-space
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<q-input
|
|
bg-color="white"
|
|
outlined
|
|
v-model="informaData.lastName"
|
|
label="นามสกุล"
|
|
class="inputgreen"
|
|
dense
|
|
lazy-rules
|
|
borderless
|
|
:rules="[(val:string) => val.length > 0 || 'กรุณากรอกนามสกุล']"
|
|
hide-bottom-space
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-2">
|
|
<datepicker
|
|
autoApply
|
|
borderless
|
|
week-start="0"
|
|
:max-date="calculateMaxDate()"
|
|
:enableTimePicker="false"
|
|
v-model="informaData.birthDate"
|
|
:locale="'th'"
|
|
@update:model-value="updateBirthDate"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
for="inputDatereceive"
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
:model-value="
|
|
informaData.birthDate != null
|
|
? date2Thai(informaData.birthDate)
|
|
: null
|
|
"
|
|
label="วัน/เดือน/ปี เกิด"
|
|
:rules="[
|
|
(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
|
|
]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer"
|
|
color="primary"
|
|
>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
readonly
|
|
class="inputgreen"
|
|
v-model="age"
|
|
label="อายุ"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
clearable
|
|
lazy-rules
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
input-debounce="0"
|
|
option-label="name"
|
|
option-value="name"
|
|
v-model="informaData.genderId"
|
|
class="inputgreen"
|
|
:options="Ops.genderOps"
|
|
label="เพศ"
|
|
@filter="(inputValue:string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
clearable
|
|
lazy-rules
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
option-value="name"
|
|
option-label="name"
|
|
input-debounce="0"
|
|
class="inputgreen"
|
|
v-model="informaData.statusId"
|
|
:options="Ops.statusOps"
|
|
label="สถานภาพ"
|
|
@filter="(inputValue:string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="informaData.nationality"
|
|
label="สัญชาติ"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="informaData.ethnicity"
|
|
label="เชื้อชาติ"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
clearable
|
|
lazy-rules
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
option-value="name"
|
|
option-label="name"
|
|
input-debounce="0"
|
|
v-model="informaData.religionId"
|
|
class="inputgreen"
|
|
:options="Ops.religionOps"
|
|
label="ศาสนา"
|
|
@filter="(inputValue:string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
use-input
|
|
hide-selected
|
|
fill-input
|
|
clearable
|
|
lazy-rules
|
|
emit-value
|
|
map-options
|
|
hide-bottom-space
|
|
option-value="name"
|
|
option-label="name"
|
|
input-debounce="0"
|
|
v-model="informaData.bloodId"
|
|
class="inputgreen"
|
|
:options="Ops.bloodOps"
|
|
label="หมู่เลือด"
|
|
@filter="(inputValue:string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
mask="##########"
|
|
class="inputgreen"
|
|
v-model="informaData.tel"
|
|
label="เบอร์โทร"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.image-size-default {
|
|
height: 150px;
|
|
max-width: 15vw;
|
|
}
|
|
|
|
.image-size-full {
|
|
height: 160px;
|
|
max-width: 15vw;
|
|
}
|
|
|
|
.border-green {
|
|
border: 5px solid #52c688;
|
|
}
|
|
|
|
.area-div {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.text-header {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.containerimage {
|
|
position: relative;
|
|
}
|
|
|
|
.containerimage:hover .overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.overlay {
|
|
background-color: #e4f2ffd2 !important;
|
|
opacity: 0;
|
|
padding: 2px !important;
|
|
}
|
|
|
|
.information:target {
|
|
padding-top: 84px;
|
|
}
|
|
|
|
.border-custom {
|
|
border: 0.5px solid #c3c3c3;
|
|
}
|
|
|
|
.bg-active-image {
|
|
background-color: #52c688;
|
|
}
|
|
|
|
.text-name {
|
|
font-size: 1.3em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.text-sub {
|
|
font-size: 1.2em;
|
|
overflow: hidden;
|
|
color: var(--q-primary);
|
|
}
|
|
</style>
|