ปรับ responesive

src/modules/07_appealComplain/views/Main.vue

@@ -379,7 +379,7 @@ onMounted(async () => {
               class="col-xs-12 col-sm-3 col-md-2"
             />
           </div>
-          <q-table
+          <d-table
             flat
             bordered
             dense
@@ -436,7 +436,30 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-          </q-table>
+
+            <template #item="props">
+              <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                <q-card bordered flat>
+                  <q-list @click="editPage(props.row.id)">
+                    <q-item
+                      v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                      :key="col.name"
+                    >
+                      <q-item-section>
+                        <q-item-label caption>{{ col.label }}</q-item-label>
+
+                        <q-item-label v-if="col.name === 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </q-item-label>
+
+                        <q-item-label v-else>{{ col.value }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+          </d-table>
         </q-card>
       </div>
     </div>