no message

src/components/scattered/list/ListHeader.vue

 <template>
   <div class="rounded-borders bg-white row items-center q-pa-md">
-    <q-select style="min-width: 190px;" unelevated v-model="placeKeyWords" dense :options="Areas" emit-value option-label="name" option-value="name" map-options :label="$t('hotel.area')" standout />
+    <q-select v-if="$q.platform.is.desktop" style="min-width: 190px;" unelevated v-model="placeKeyWords" dense :options="Areas" emit-value option-label="name" option-value="name" map-options :label="$t('hotel.area')" standout />
     <q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense>
       <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
       <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
         <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
       </q-popup-proxy>
     </q-field>
-    <div class="row">
+    <div class="row" v-if="$q.platform.is.desktop">
       <q-select class="q-ml-lg" style="min-width: 90px;z-index: 99999;" unelevated v-model="room" dense :options="theRooms" emit-value option-label="name" option-value="id" map-options :label="$t('v101.scattered.kefang')" standout @update:model-value="getRoomList">
       </q-select>
       <q-btn unelevated class="bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6" icon="person">
@@ -33,10 +33,6 @@
       </q-btn>
     </div>
     <div class="col"></div>
-    <!-- <q-btn class="hover q-mr-md" v-for="(item,index) in 2"
-    :class="{'bg-blue text-white':search.sort==index+1,'bg-grey-3':search.sort!=index+1}" @click="search.sort=index+1">
-      {{index+1==1?$t('v101.scattered.anrenqi'):$t('v101.scattered.anjiage')}}
-    </q-btn> -->
     <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
       <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
       <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
@@ -44,6 +40,42 @@
       <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide">
         <q-card class="q-pa-md rounded-borders" style="width: 300px">
           <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
+          <div class="q-my-md" v-if="$q.platform.is.mobile">
+            <q-select unelevated v-model="placeKeyWords" dense :options="Areas" emit-value option-label="name" option-value="name" map-options :label="$t('hotel.area')" standout />
+          </div>
+          <div class="q-my-md" v-if="$q.platform.is.mobile">
+            <q-field stack-label :label="$t('daterange')" standout  style="min-width: 190px" dense>
+              <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
+              <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
+                <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
+              </q-popup-proxy>
+            </q-field>
+          </div>
+          <div class="q-my-md row justify-between" v-if="$q.platform.is.mobile">
+            <q-select style="min-width: 90px;z-index: 99999;" unelevated v-model="room" dense :options="theRooms" emit-value option-label="name" option-value="id" map-options :label="$t('v101.scattered.kefang')" standout @update:model-value="getRoomList">
+            </q-select>
+            <q-btn unelevated class="bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6" icon="person">
+              <div class="text-dark q-ml-xs">
+                {{auditNum}}{{$t('v101.scattered.chengren')}}
+                <span class="q-px-sm">.</span>
+                <template v-if="childNum>0">{{childNum}}</template>
+                {{$t('v101.scattered.ertong')}}
+              </div>
+              <q-popup-proxy class="no-shadow absolute" style="z-index: 0;box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="isShowPop">
+                <q-card class="row wrap q-pa-md rounded-borders" style="max-width:697px;">
+                  <div class="q-mr-md" v-for="(item,index) in search.searchroomGroup" :key="index" style="min-width: 150px;">
+                    <div class="q-mb-md text-subtitle2">{{ $t('v101.scattered.kefang') }}{{index+1}}</div>
+                    <div class="q-my-md">
+                      <q-select v-model="item.numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
+                    </div>
+                    <div class="q-my-md">
+                      <q-select v-model="item.numberOfChildren" dense :options="childrenList" emit-value map-options :label="$t('v101.scattered.ertong')" standout @update:model-value="setPeopleNum"/>
+                    </div>
+                  </div>
+                </q-card>
+              </q-popup-proxy>
+            </q-btn>
+          </div>
           <div class="q-my-md">
             <q-select v-model="search.searchHotelCategory" dense :options="HotelLiveRates" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.zhusutype')" standout />
           </div>
@@ -225,6 +257,11 @@ export default defineComponent({
     }
     const searchCnt = computed(() => {
       let setCnt = 0
+      if ($q.platform.is.mobile) {
+        if (data.placeKeyWords&&!data.keyWords) setCnt++
+        if (data.dateRange) setCnt++
+        if (search.searchroomGroup.length > 0) setCnt++
+      }
       if (data.keyWords) setCnt++
       if (search.reviewRatingUpperLimits) setCnt++
       if (search.reviewRatingLowerLimits) setCnt++