fix: 修复导览交互切换无效问题

src/components/PublicComponent/PublicComponent.vue

@@ -81,7 +81,7 @@ onMounted(() => {
   setInterval(() => {
     i++
     store.SET_CURRENT_THEME(['main', 'fashion', 'highend'][i % 3])
-  }, 10000)
+  }, 5000)
   window.addEventListener('touchend', checkHandleScreen)
 })
 onBeforeUnmount(() => {

src/components/Search/Search.vue

@@ -1,13 +1,13 @@
 <template>
   <Dialog @close="close">
+    <div class="bar">
+      <div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div>
+      <div class="stick"></div>
+      <div v-if="!keywords" class="placeholder">请输入中英文<span class="meta">首字母</span>查询，例如 XBK (星巴克)</div>
+      <input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" />
+      <img :src="theme.images.searchClear" class="clear" v-if="keywords" @click="clear" />
+    </div>
     <div class="search-content">
-      <div class="bar">
-        <div class="icon" :style="{ backgroundImage: `url(${theme.images.searchIcon})` }"></div>
-        <div class="stick"></div>
-        <div v-if="!keywords" class="placeholder">请输入中英文<span class="meta">首字母</span>查询，例如 XBK (星巴克)</div>
-        <input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" />
-        <img :src="theme.images.searchClear" class="clear" v-if="keywords" @click="clear" />
-      </div>
       <div class="top" v-if="!showVoice">
         <div class="facs">
           <h1 class="title">公共设施</h1>
@@ -126,7 +126,61 @@ onBeforeUnmount(() => {
   position: relative;
   z-index: 50;
 }
-
+.bar {
+  position: fixed;
+  top: 260px;
+  left: 68px;
+  right: 68px;
+  background: var(--search-barBackground);
+  border: var(--searchBar-border);
+  box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
+  border-radius: var(--searchBar-borderRadius);
+  display: flex;
+  align-items: center;
+  padding-right: 10px;
+  padding-left: 40px;
+  height: 100px;
+  z-index: 52;
+  .icon {
+    width: 56px;
+    height: 56px;
+    background: center / cover no-repeat;
+  }
+  .stick {
+    width: 4px;
+    height: 38px;
+    background: var(--searchBar-stickBg);
+    margin: 0 32px;
+  }
+  .placeholder {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 23px;
+    color: var(--searchBar-placeholderColor);
+    .meta {
+      color: var(--search-placeholderMetaColor);
+    }
+  }
+  .input {
+    flex: 1;
+    border: none;
+    outline: none;
+    width: 262px;
+    background: transparent;
+    font-weight: 700;
+    font-size: 48px;
+    line-height: 59px;
+    color: var(--searchBar-color);
+  }
+  .clear {
+    display: flex;
+    width: 80px;
+    height: 80px;
+  }
+  .voice-icon {
+    width: 190px;
+  }
+}
 .search-content {
   position: absolute;
   top: 315px;
@@ -136,70 +190,15 @@ onBeforeUnmount(() => {
   background: var(--search-background);
   backdrop-filter: blur(10px);
   border-radius: var(--searchBar-borderRadius);
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
   z-index: 2;
+  overflow: hidden;
   .title {
     font-weight: 900;
     font-size: 24px;
     line-height: 28px;
     color: rgba(0, 0, 0, 0.8);
   }
-  .bar {
-    position: absolute;
-    top: -55px;
-    left: 28px;
-    right: 28px;
-    background: var(--search-barBackground);
-    border: var(--searchBar-border);
-    box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
-    border-radius: var(--searchBar-borderRadius);
-    display: flex;
-    align-items: center;
-    padding-right: 10px;
-    padding-left: 40px;
-    height: 100px;
-    .icon {
-      width: 56px;
-      height: 56px;
-      background: center / cover no-repeat;
-    }
-    .stick {
-      width: 4px;
-      height: 38px;
-      background: var(--searchBar-stickBg);
-      margin: 0 32px;
-    }
-    .placeholder {
-      font-weight: 700;
-      font-size: 20px;
-      line-height: 23px;
-      color: var(--searchBar-placeholderColor);
-      .meta {
-        color: var(--search-placeholderMetaColor);
-      }
-    }
-    .input {
-      flex: 1;
-      border: none;
-      outline: none;
-      width: 262px;
-      background: transparent;
-      font-weight: 700;
-      font-size: 48px;
-      line-height: 59px;
-      color: var(--searchBar-color);
-    }
-    .clear {
-      display: flex;
-      width: 80px;
-      height: 80px;
-    }
-    .voice-icon {
-      width: 190px;
-    }
-  }
+
   .top {
     height: 460px;
     background: rgba(255, 255, 255, 0.6);

src/views/Guide/Guide.vue

@@ -50,10 +50,10 @@
     <div class="shop-list-wrapper">
       <BrandScroll v-if="initiated" :shop="shop" :need-focus="true" @click="handleShop" :list="selectedShopList" :isRow="isRow" :config="config" />
       <div class="switch">
-        <img class="btn" v-if="isRow" :src="theme.images.grid" />
-        <img class="btn" v-else :src="theme.images.gridActive" />
-        <img class="btn" v-if="!isRow" :src="theme.images.row" />
-        <img class="btn" v-else :src="theme.images.rowActive" />
+        <img class="btn" v-if="isRow" :src="theme.images.grid" @click="isRow = false" />
+        <img class="btn" v-else :src="theme.images.gridActive" @click="isRow = false" />
+        <img class="btn" v-if="!isRow" :src="theme.images.row" @click="isRow = true" />
+        <img class="btn" v-else :src="theme.images.rowActive" @click="isRow = true" />
       </div>
     </div>
   </View>