修改

src/pages/Search.vue

@@ -35,8 +35,8 @@
   .Search_Zhi {
     display: inline-block;
     margin: 0 10px;
-    height: 60px;
-    line-height: 60px;
+    height: 40px;
+    line-height: 40px;
   }
 
   .full_price {
@@ -558,13 +558,24 @@
   .SearchMain .q-field__marginal {
     height: 46px;
   }
-
+  .search-filter-inner {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    max-width: 1160px;
+  }
 </style>
 <template>
   <div class="SearchMain">
     <div class="SearchTop">
       <!-- 电脑端 -->
       <div class="row SearchContent" v-if="!$q.screen.xs">
+        <div class="search-filter-inner">
+
+        </div>
         <div class="col-3">
           <q-input filled id="search_key" v-model="qMsg.searchKey" class="bg-grey-1" style="margin-right:10px;"
             :label="$t('search')" @focus="searchFocusHandler" @blur="searchBlurHandler" @keyup="searchChangeHandler" />
@@ -595,9 +606,9 @@
         <div class="col-2" style="margin-left:10px;">
           <q-select filled v-model="sortNum" :options="sortArray"  @input="changeData" emit-value map-options />
         </div>
-        <div class="col-2" style="margin-left:10px;">
+        <!-- <div class="col-2" style="margin-left:10px;">
           <span style="margin-top:15px;display:inline-block;cursor:pointer;" @click="fullHeight = true">更多篩選條件</span>
-        </div>
+        </div> -->
         <div v-show="showSplitPannel" id="sb" style="z-index:999" transition-show="fade" elevated
           transition-hide="scale" class="showbox row">
           <div style="width:180px;">
@@ -644,6 +655,19 @@
         <searchBlock :DataList="DataList" :qMsg="qMsg"></searchBlock>
       </template>
       <template v-else>
+            <!-- 手机端 -->
+      <div v-if="$q.screen.xs">
+        <div class="search-bar-m">
+          <i class="iconfont iconchazhao"></i>
+          <input type="text" placeholder="搜尋" value="" @click="showPopup=true,goSearchHandler" readonly="readonly"
+            class="keyword-input">
+        </div>
+        <div class="sortDiv">
+          <q-select filled style="width:50%" v-model="sortNum" :options="sortArray" emit-value map-options  @input="changeData" />
+          <div class="sortShaixuan" @click="fullHeight = true">更多篩選條件</div>
+        </div>
+      </div>
+
         <div class="wl-section-block search-content">
           <div class="search-filter-aside">
             <div class="search-header">
@@ -656,16 +680,16 @@
                   價格
                   <span class="clear-filter">清除篩選</span>
                 </div>
-                <div style="width:100%;height:57px;">
+                <div style="width:100%;height:57px;display:none">
 
                 </div>
                 <div class="range-text">
                   <div class="min">
-                    <q-input class="full_price" v-model="qMsg.minPrice"  @input="changeData" filled autogrow />
+                    <q-input class="full_price" style="width:80%" v-model="qMsg.minPrice"  @input="changeData" filled autogrow />
 
                   </div>
                   <div class="max">
-                    <q-input class="full_price" v-model="qMsg.maxPrice"  @input="changeData" filled autogrow />
+                    <q-input class="full_price" style="width:80%" v-model="qMsg.maxPrice"  @input="changeData" filled autogrow />
                   </div>
                 </div>
               </div>
@@ -706,19 +730,6 @@
           <searchList :DataList="DataList" :qMsg="qMsg"></searchList>
         </div>
       </template>
-
-      <!-- 手机端 -->
-      <div v-if="$q.screen.xs">
-        <div class="search-bar-m">
-          <i class="iconfont iconchazhao"></i>
-          <input type="text" placeholder="搜尋" value="" @click="showPopup=true,goSearchHandler" readonly="readonly"
-            class="keyword-input">
-        </div>
-        <div class="sortDiv">
-          <q-select filled style="width:50%" v-model="sortNum" :options="sortArray" emit-value map-options  @input="changeData" />
-          <div class="sortShaixuan" @click="fullHeight = true">更多篩選條件</div>
-        </div>
-      </div>
     </div>
 
     <q-dialog v-model="fullHeight" full-height>
@@ -789,22 +800,21 @@
               <q-input filled v-model="searchDate" :label="$t('search_date_begin')" mask="date" class="bg-grey-1" >
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy ref="qDateProxy" @input="changeData">
+                    <q-popup-proxy ref="qDateProxy7" @input="changeData">
                       <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
-                        @input="() => $refs.qDateProxy.hide()"   />
+                        @input="() => $refs.qDateProxy7.hide()"   />
                     </q-popup-proxy>
                   </q-icon>
                 </template>
               </q-input>
             </div>
-            <div class="split-word bg-grey-3 q-pl-xs q-pr-xs">至</div>
             <div class="col">
               <q-input filled v-model="searchEndDate" :label="$t('search_date_end')" mask="date" class="bg-grey-1"  >
                 <template v-slot:append>
                   <q-icon name="event" class="cursor-pointer">
-                    <q-popup-proxy ref="qDateProxy" @input="changeData">
+                    <q-popup-proxy ref="qDateProxy8" @input="changeData">
                       <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchEndDate"
-                        @input="() => $refs.qDateProxy.hide()"  />
+                        @input="() => $refs.qDateProxy8.hide()"  />
                     </q-popup-proxy>
                   </q-icon>
                 </template>
@@ -1059,8 +1069,10 @@
         this.crtAreaIndex = i;
       },
       clickHandler(e) {
-        if (!document.querySelector("#sb").contains(e.target)) {
-          this.showSplitPannel = false;
+        if(document.querySelector("#sb")){
+          if (!document.querySelector("#sb").contains(e.target)) {
+            this.showSplitPannel = false;
+          }
         }
       },
       chosenAreaHandler(name) {