feat: 搜索横板样式

src/components/Search/Search.vue

@@ -39,7 +39,7 @@
         </div>
       </div>
 
-      <SearchResultList @handle-shop="handleShop" @handle-activity="handleActivity" :list="searchShopListRef" :config="config" v-if="keywords.length && !showVoice" />
+      <SearchResultList @handle-shop="handleShop" :list="searchShopListRef" :config="config" v-if="keywords.length && !showVoice" />
 
       <Voice @handle-question="showClassify = true" v-if="showVoice" />
     </div>
@@ -105,10 +105,6 @@ async function handleShop(item) {
   }
   store.SET_SHOW_SEARCH(false)
 }
-async function handleActivity() {
-  await router.push('/activity')
-  store.SET_SHOW_SEARCH(false)
-}
 
 const tabIdx = ref(0)
 function handleTab(index) {
@@ -350,4 +346,51 @@ onBeforeUnmount(() => {
   height: 120px;
   z-index: 52;
 }
+@media (min-aspect-ratio: 1/1) {
+  .search-content {
+    top: 87px;
+    right: 125px;
+    bottom: 87px;
+    left: 125px;
+    padding: 100px 670px 0 0;
+    .top {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      width: 660px;
+      height: auto;
+      margin: 0;
+      padding-left: 0;
+      flex-direction: column;
+      .facs {
+        width: auto;
+        flex: 1;
+        padding-top: 90px;
+        padding: 90px 54px;
+        .facility-list {
+          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+        }
+      }
+      .keyboard-wrapper {
+        flex: 0 0 456px;
+      }
+    }
+  }
+  .bar {
+    top: 32px;
+    width: 698px;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  .search-btn {
+    left: auto;
+    bottom: auto;
+    right: 145px;
+    top: 107px;
+    width: 87px;
+    height: 87px;
+  }
+}
 </style>

src/components/SearchResultList/SearchResultList.vue

@@ -7,53 +7,19 @@
       <TransitionGroup name="zoom" tag="div" class="list">
         <SearchResultItem :config="config" @click="handleShop" :shop="item" v-for="item of list" :key="item.shopId" />
       </TransitionGroup>
-      <template v-if="activities.length">
-        <h1 class="title">
-          {{ $t('act') }}
-        </h1>
-        <div class="activity">
-          <div class="activity-item" @click="handleActivity(item)" v-for="item of activities" :key="item.activityId">
-            <div class="img-wrapper">
-              <img class="img" :src="config.sourceUrl + item.fileUrl" alt="" />
-            </div>
-            <div class="flex">
-              <p class="activity-name">{{ switchLanguage(item, 'activityName') }}</p>
-              <p class="intro">{{ $t('youxiaoqi') }}：{{ item.endDate }}</p>
-            </div>
-          </div>
-        </div>
-      </template>
     </div>
   </ScrollView>
 </template>
 
 <script setup>
-import { computed } from 'vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
 import SearchResultItem from '@/components/SearchResultItem/SearchResultItem.vue'
 
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  },
-  config: {
-    type: Object,
-    default: () => ({})
-  }
-})
-const emits = defineEmits(['handle-shop', 'handle-activity'])
-
-const shop = computed(() => props.list.filter(item => item.activityList?.length) ?? [])
-const activities = computed(() => shop.value.map(item => item.activityList).flat(Infinity) ?? [])
+const emits = defineEmits(['handle-shop'])
 
 function handleShop(item) {
   emits('handle-shop', item)
 }
-
-function handleActivity(item) {
-  emits('handle-activity', item)
-}
 </script>
 
 <style lang="scss" scoped>

src/views/Index/Index.vue

@@ -306,7 +306,6 @@ getActivityList(3).then(({ data }) => {
     .food {
       display: flex;
       flex-direction: column;
-      margin-left: 40px;
       background: var(--index-foodBg);
       border-radius: var(--global-radius, 32px);
       border: var(--index-foodBorder);
@@ -326,7 +325,6 @@ getActivityList(3).then(({ data }) => {
     .rec {
       display: flex;
       flex-direction: column;
-      margin-left: 40px;
       background: var(--index-recBg);
       border: var(--index-recBorder);
       border-radius: var(--global-radius, 32px);