ปรับหน้า ui เช็คอิน ในส่วนของมือถือ

src/components/AscGISMap.vue

@@ -198,23 +198,52 @@ onMounted(async () => {
 
 <template>
   <!-- Loading skeleton -->
-  <div v-if="!poiPlaceName" class="col-12">
-    <q-skeleton height="35vh" width="100%" class="bg-grey-4" />
+  <div v-if="!poiPlaceName" class="col-12 ">
+    <q-skeleton :height="$q.screen.gt.xs? '35vh': '45px'" width="100%" :style="$q.screen.gt.xs? ';':'border-radius: 20px'" class="bg-grey-4" />
   </div>
 
-  <q-card v-show="poiPlaceName" bordered flat class="col-12 bg-grey-2 shadow-0">
-    <div id="mapViewDisplay" style="height: 35vh"></div>
+  <q-card v-show="poiPlaceName" bordered flat class="col-12 bg-grey-2 shadow-0" :style="$q.screen.gt.xs? ';':'border-radius: 20px'" >
+    <div v-if="$q.screen.gt.xs" >
+      <div id="mapViewDisplay" style="height: 35vh;"></div>
 
-    <div
-      :class="
-        $q.screen.gt.xs
-          ? 'q-pa-xs text-weight-medium text-grey-8'
-          : 'q-pa-xs text-weight-medium text-grey-8'
-      "
-    >
-      พื้นที่ใกล้เคียง
-      <span class="q-px-sm">:</span>
-      {{ poiPlaceName }}
+      <div
+        :class="
+          $q.screen.gt.xs
+            ? 'q-pa-xs text-weight-medium text-grey-8'
+            : 'q-pa-xs text-weight-medium text-grey-8'
+        "
+      >
+        พื้นที่ใกล้เคียง
+        <span class="q-px-sm">:</span>
+        {{ poiPlaceName }}
+      </div>
     </div>
+    
+
+    <q-card v-else  style="border-radius: 20px;">
+      <q-expansion-item 
+        class="shadow-1 overflow-hidden bg-grey-4 text-left"
+        style="border-radius: 20px"
+        dense
+      >
+        <template v-slot:header>
+            <q-item-section avatar class="q-pr-none expanAS">
+              <q-avatar icon="mdi-map-marker"  />
+            </q-item-section>
+
+            <q-item-section>
+              {{ poiPlaceName }}
+            </q-item-section>
+          </template>
+
+          <div id="mapViewDisplay" style="height: 20vh;"></div>
+      </q-expansion-item>
+    </q-card>
+      
   </q-card>
 </template>
+<style >
+.expanAS.q-item__section--avatar{
+  min-width: 40px !important;
+}
+</style>