แก้ไข popup layout จัดการเครื่องราช

src/components/Dialogs/Information.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -20,19 +22,18 @@ const props = defineProps({
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 500px; max-width: 500px">
-      <q-toolbar class="q-py-md">
-        <q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
-        <q-btn icon="close" unelevated round dense @click="clickClose" style="color: #ff8080; background-color: #ffdede" />
-      </q-toolbar>
+    <q-card style="width: 35vw; max-width: 35vw">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="props.title" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="row col-12">
 
-      <q-separator />
-      <q-card-section class="q-p-sm">
-        <div class="row col-12">
-          {{ props.desc }}
-        </div>
-      </q-card-section>
-      <q-separator />
+            {{ props.desc }}
+
+          </div>
+        </q-card-section>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>