搜索页移动端优化

src/components/searchdata/kkday.vue

 <template>
   <div
-    class="items-start q-mt-lg travel-list"
-    :class="$q.platform.is.desktop ? 'row' : 'colmuns'"
+    class="items-start travel-list"
+    :class="$q.platform.is.desktop ? 'row q-mt-lg' : 'colmuns'"
   >
-    <div class="col-3" :class="$q.platform.is.desktop ? 'q-mr-lg' : 'q-ma-md'">
+  <!-- 移动端 -->
+  <div v-if="$q.platform.is.mobile">
+    
+    <div class="flex">
+       <div @click="showAddress = true" class="nav-item">目的地<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
+       <div @click="showCategory = true" class="nav-item">商品類別<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
+       <div @click="showDate = true" class="nav-item">旅程時間<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
+       <div @click="showPrice = true" class="nav-item">價錢/时间<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
+    </div>
+      <popup mode="top" v-model="showAddress">
+      <q-card flat class="rounded-borders q-py-md">
+        <div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
+        <q-input
+          v-model="searchAdd.name"
+          type="text"
+          standout
+          placeholder="搜尋目的地"
+          class="q-ma-md"
+          @input="changeAddrSearchHandler"
+        />
+        <q-tree
+          ref="area"
+          :nodes="areaList"
+          no-connectors
+          node-key="Id"
+          label-key="Name"
+          tick-strategy="leaf"
+          @update:ticked="handleAreaTicked"
+          :ticked="areaTicked"
+          text-color="#666"
+          no-nodes-label=" "
+          no-results-label=" "
+        />
+      </q-card>
+      </popup>
+      
+      <popup mode="top" v-model="showCategory">
+      <q-card flat class="rounded-borders q-py-md q-mt-lg">
+        <div class="text-subtitle1 text-weight-bold q-mx-md">所有商品類別</div>
+        <q-tree
+          ref="category"
+          :nodes="goodsType"
+          no-connectors
+          node-key="Id"
+          label-key="CategoryName"
+          tick-strategy="leaf"
+          @update:ticked="handleTicked"
+          :ticked="ticked"
+        />
+      </q-card></popup>
+      <popup mode="top" v-model="showDate">
+      <q-card flat class="rounded-borders q-mt-lg overflow-hidden">
+        <div class="q-my-sm q-mx-lg f20 bold">旅程時間</div>
+          <div
+            class="addr-list q-px-md q-py-sm row items-center"
+            v-for="(y, yi) in dayArray"
+            :key="yi"
+          >
+            <q-checkbox
+              v-model="y.checked"
+              size="xs"
+              @input="changeTripDayHandler"
+            />
+            <span
+              class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
+              style="font-weight: 400"
+            >
+              {{ y.text }}
+            </span>
+          </div>
+      </q-card>
+      </popup>
+      <popup mode="top" v-model="showPrice">
+
+      <q-card flat class="rounded-borders q-pa-md q-mt-lg">
+        <div class="text-subtitle1 text-weight-bold">價錢篩選（CNY）</div>
+        <div class="q-mt-md text-grey-6 text-subtitle2 text-regular">
+          {{ msg.priceRange.min }} - {{ msg.priceRange.max }}
+        </div>
+        <q-range
+          v-model="msg.priceRange"
+          :min="priceModel.min"
+          :max="priceModel.max"
+          :step="1"
+          @change="testHandler"
+          color="primary"
+          class="q-mt-md"
+        />
+      </q-card><q-card flat class="rounded-borders q-mt-lg row no-padding q-mb-lg">
+        <div
+          class="q-px-md q-py-sm "
+          style="border-right: 1px solid #eee; border-radius: 0 !important"
+        >
+          <q-icon name="iconfont iconigw-l-date-trade" size="24px" />
+        </div>
+        <div class="row items-center justify-center col">
+          <span class="text-grey-8">
+            {{
+              msg.startDate
+                ? `${msg.startDate} - ${msg.endDate}`
+                : "篩選出發日期"
+            }}
+          </span>
+          <q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
+            <div>
+              <q-date
+                v-model="dateRange"
+                :options="optionsFn"
+                range
+                @range-end="dateRangeHandler"
+                mask="YYYY-MM-DD"
+              ></q-date>
+            </div>
+          </q-popup-proxy>
+        </div>
+      </q-card></popup>
+  </div>
+    <div v-else class="col-3" :class="$q.platform.is.desktop ? 'q-mr-lg' : 'q-ma-md'">
       <q-card flat class="rounded-borders q-py-md">
         <div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
         <q-input
@@ -271,11 +388,17 @@
 </template>
 
 <script>
+import popup from "../props/index";
 import { date } from "quasar";
 export default {
   props: ["qMsg"],
+  components: {popup},
   data() {
     return {
+      showAddress: false,
+      showCategory: false,
+      showDate: false,
+      showPrice: false,
       areaTicked: [],
       ticked: [],
       selected: [],
@@ -811,9 +934,23 @@ export default {
   background: #f1416c1a;
 }
 </style>
-<style scoped>
+<style lang="scss" scoped>
+::v-deep .q-menu {
+  width: 100% !important;
+}
 .price-stuff {
   font-size: 12px;
   margin-left: 4px;
 }
+.nav-item {
+  width: 25%;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  background: #fff;
+  font-weight: bold;
+}
+.nav-item:hover {
+  background: #f5f5f5;
+} 
 </style>