feat: 搜索样式

src/components/Search/Search.vue

@@ -8,7 +8,7 @@
         <input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" />
         <img src="./clear.png" class="clear" v-if="keywords" @click="clear" />
       </div>
-      <div class="top" v-if="!showVoice">
+      <div class="right" v-if="!showVoice">
         <div class="facs">
           <h1 class="title">公共设施</h1>
           <div class="facility-list">
@@ -34,7 +34,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>
@@ -83,10 +83,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) {
@@ -131,10 +127,10 @@ onBeforeUnmount(() => {
 
 .search-content {
   position: absolute;
-  top: 315px;
-  right: 40px;
-  bottom: 302px;
-  left: 40px;
+  top: 87px;
+  right: 125px;
+  bottom: 87px;
+  left: 125px;
   background: linear-gradient(180deg, #e0e3ee 0%, #d4d9e7 100%);
   backdrop-filter: blur(10px);
   border-radius: 24px;
@@ -142,6 +138,7 @@ onBeforeUnmount(() => {
   flex-direction: column;
   align-items: stretch;
   z-index: 2;
+  padding: 100px 670px 0 0;
   .title {
     font-weight: 900;
     font-size: 24px;
@@ -150,9 +147,12 @@ onBeforeUnmount(() => {
   }
   .bar {
     position: absolute;
+    width: 698px;
+    height: 100px;
     top: -55px;
-    left: 28px;
-    right: 28px;
+    left: 0;
+    right: 0;
+    margin: auto;
     background: #ffffff;
     box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
     border-radius: 24px;
@@ -160,7 +160,7 @@ onBeforeUnmount(() => {
     align-items: center;
     padding-right: 10px;
     padding-left: 40px;
-    height: 100px;
+
     .icon {
       width: 56px;
       height: 56px;
@@ -204,27 +204,30 @@ onBeforeUnmount(() => {
       width: 190px;
     }
   }
-  .top {
-    height: 460px;
+  .right {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    bottom: 10px;
+    width: 660px;
     background: rgba(255, 255, 255, 0.6);
     border-radius: 16px;
-    margin: 10px 10px 48px 10px;
     display: flex;
     justify-content: space-between;
-    padding-left: 46px;
+    flex-direction: column;
     .facs {
-      width: 300px;
-      padding-top: 111px;
+      flex: 1;
+      padding: 90px 54px;
       .facility-list {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
         width: 264px;
         margin-top: 40px;
         gap: 12px 24px;
       }
     }
     .keyboard-wrapper {
-      flex: 1;
+      flex: 0 0 456px;
       padding-top: 75px;
       padding-left: 36px;
       background: rgba(0, 0, 0, 0.05);
@@ -291,12 +294,10 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   position: fixed;
-  left: 0;
-  right: 0;
-  margin: auto;
-  bottom: 242px;
-  width: 120px;
-  height: 120px;
+  right: 145px;
+  top: 107px;
+  width: 87px;
+  height: 87px;
   z-index: 52;
   background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
   border-radius: 24px;

src/components/SearchResultList/SearchResultList.vue

@@ -7,32 +7,15 @@
       <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({
+defineProps({
   list: {
     type: Array,
     default: () => []
@@ -42,18 +25,11 @@ const props = defineProps({
     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>