修改

src/components/swiper/style8.vue

-<style>
-  .banner-style8 .Mymobile-only{
-    display: none;
-  }
-  @media only screen and (max-width: 820px){
-    .banner-style8 .Mydesktop-only {
-      display: none;
-    }
-    .banner-style8 .Mymobile-only{
-      display: block;
-    }
-  }
-  .banner-style8 .MysearchDiv{
-    position: absolute;
-    width:100%;
-    top:60%;
-  }
-</style>
 <template>
   <div class="banner-style8">
     <q-carousel
@@ -42,7 +24,7 @@
         <div class="title">搜尋輪播淡出 - 大</div>
         <div class="sub-title">將您的夢變成一段真實的體驗，我們掌握今年冬季最受追捧的度假勝地，完成夢想就找我們</div>
       </div>
-            <div class="Mydesktop-only" style="width: 760px;margin:auto;">
+      <div class="desktop-only" style="width: 760px;margin:auto;">
         <div class="row">
           <div class="col-5" style="width:calc(41.6667% - 22px)">
             <q-input
@@ -246,10 +228,7 @@
           </q-scroll-area>
         </div>
       </div>
-
-    </div>
-    <div class="MysearchDiv">
-      <div class="Mymobile-only" style="width:100%;">
+      <div class="mobile-only" style="width:100vw;">
         <q-input
           filled
           v-model="searchKey"
@@ -263,7 +242,6 @@
           </template>
         </q-input>
       </div>
-
     </div>
     <popup v-model="showPopup" mode="top" :safeAreaInsetBottom="true" border-radius="5">
       <div class="chosen-box">