优化首页点位搜索收缩态布局

src/components/search/PoiSearchPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     class="poi-search-panel"
-    :class="[`variant-${variant}`, { expanded: showSearchContent }]"
+    :class="[`variant-${variant}`, { expanded: showSearchContent, 'is-collapsed': isHomeCollapsed }]"
     @touchstart="handlePanelTouchStart"
     @touchend="handlePanelTouchEnd"
     @touchcancel="resetPanelTouch"
@@ -237,6 +237,7 @@ const initialSpaceLoadError = ref('')
 let searchRequestSeq = 0
 
 const showSearchContent = computed(() => props.variant === 'page' || homeExpanded.value)
+const isHomeCollapsed = computed(() => props.variant === 'home' && !showSearchContent.value)
 const collapseDragThreshold = 48
 const homeExpandTapGuardMs = 360
 
@@ -833,6 +834,13 @@ defineExpose({
   box-shadow: none;
 }
 
+.variant-home.is-collapsed .search-box {
+  height: 38px;
+  flex-basis: 38px;
+  padding: 0 12px;
+  border-radius: 7px;
+}
+
 .home-category-strip {
   margin-top: 10px;
   display: flex;
@@ -844,6 +852,12 @@ defineExpose({
   -webkit-overflow-scrolling: touch;
 }
 
+.variant-home.is-collapsed .home-category-strip {
+  margin-top: 7px;
+  gap: 7px;
+  padding-bottom: 1px;
+}
+
 .home-category-strip::-webkit-scrollbar {
   display: none;
 }
@@ -867,6 +881,17 @@ defineExpose({
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
 }
 
+.variant-home.is-collapsed .home-category-chip {
+  min-width: 76px;
+  height: 42px;
+  flex-basis: 76px;
+  justify-content: center;
+  gap: 5px;
+  padding: 0 7px;
+  border-radius: 7px;
+  box-shadow: none;
+}
+
 .home-category-chip:nth-child(2) {
   background-color: #18c2b6;
 }
@@ -917,6 +942,17 @@ defineExpose({
   transform-origin: center;
 }
 
+.variant-home.is-collapsed .home-category-icon,
+.variant-home.is-collapsed .home-category-icon.line-icon {
+  width: 20px;
+  height: 19px;
+  flex-basis: 20px;
+}
+
+.variant-home.is-collapsed .home-category-icon .icon-part {
+  transform: scale(0.68);
+}
+
 .home-category-label {
   min-width: 0;
   max-width: 70px;
@@ -929,6 +965,12 @@ defineExpose({
   text-overflow: ellipsis;
 }
 
+.variant-home.is-collapsed .home-category-label {
+  max-width: 42px;
+  font-size: 11px;
+  line-height: 14px;
+}
+
 .search-icon {
   width: 19px;
   height: 19px;
@@ -952,6 +994,19 @@ defineExpose({
   transform: rotate(45deg);
 }
 
+.variant-home.is-collapsed .search-icon {
+  width: 17px;
+  height: 17px;
+  margin-right: 11px;
+  border-width: 2px;
+}
+
+.variant-home.is-collapsed .search-icon::after {
+  right: -6px;
+  bottom: -4px;
+  width: 9px;
+}
+
 .search-input {
   min-width: 0;
   flex: 1;
@@ -968,10 +1023,21 @@ defineExpose({
   line-height: 22px;
 }
 
+.variant-home.is-collapsed .search-input,
+.variant-home.is-collapsed .search-input :deep(input),
+.variant-home.is-collapsed .search-input :deep(.uni-input-input) {
+  font-size: 14px;
+  line-height: 19px;
+}
+
 .search-placeholder {
   color: #8b8d85;
 }
 
+.variant-home.is-collapsed .search-placeholder {
+  font-size: 14px;
+}
+
 .clear-button,
 .voice-icon {
   width: 26px;
@@ -987,6 +1053,17 @@ defineExpose({
   background: #eef0e8;
 }
 
+.variant-home.is-collapsed .clear-button,
+.variant-home.is-collapsed .voice-icon {
+  width: 32px;
+  height: 32px;
+}
+
+.variant-home.is-collapsed .clear-text {
+  font-size: 17px;
+  line-height: 18px;
+}
+
 .clear-text {
   font-size: 18px;
   line-height: 20px;
@@ -997,6 +1074,20 @@ defineExpose({
   position: relative;
 }
 
+.variant-home.is-collapsed .voice-icon::before {
+  left: 11px;
+  top: 7px;
+  width: 10px;
+  height: 13px;
+}
+
+.variant-home.is-collapsed .voice-icon::after {
+  left: 10px;
+  bottom: 6px;
+  width: 12px;
+  height: 7px;
+}
+
 .voice-icon::before {
   content: '';
   position: absolute;

src/pages/index/index.vue

@@ -1779,17 +1779,17 @@ const handleExplainBack = () => {
   --museum-h5-page-width: min(100vw, 430px);
   left: 50%;
   right: auto;
-  width: calc(var(--museum-h5-page-width) - 24px);
+  width: calc(var(--museum-h5-page-width) - 20px);
-  bottom: calc(env(safe-area-inset-bottom) + 14px);
+  bottom: calc(env(safe-area-inset-bottom) + 10px);
-  padding: 10px;
+  padding: 7px;
   box-sizing: border-box;
   overflow: hidden;
   background:
-    linear-gradient(180deg, rgba(224, 225, 0, 0.22) 0, rgba(224, 225, 0, 0) 58px),
+    linear-gradient(180deg, rgba(224, 225, 0, 0.18) 0, rgba(224, 225, 0, 0) 46px),
     #060704;
   border: 1px solid rgba(224, 225, 0, 0.34);
   border-radius: 8px;
-  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
   transform: translateX(-50%);
   z-index: 1003;
 }
@@ -1797,10 +1797,10 @@ const handleExplainBack = () => {
 .guide-home-dock::before {
   content: '';
   position: absolute;
-  left: 10px;
+  left: 7px;
-  right: 10px;
+  right: 7px;
   top: 0;
-  height: 4px;
+  height: 3px;
   background: var(--museum-accent);
 }