feat: switch explain flow to API data

src/pages/search/index.vue

@@ -80,16 +80,15 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .poi-search-page {
   --museum-h5-page-width: min(100vw, 430px);
+  position: relative;
   width: 100%;
   height: 100vh;
   height: 100dvh;
   min-height: 100vh;
   min-height: 100dvh;
-  padding: calc(env(safe-area-inset-top) + 28px) 14px calc(env(safe-area-inset-bottom) + 16px);
+  padding: calc(env(safe-area-inset-top) + 18px) 0 0;
   box-sizing: border-box;
-  background:
-    linear-gradient(180deg, rgba(224, 225, 0, 0.22) 0, rgba(245, 245, 237, 0) 146px),
-    #f5f5ed;
+  background: #f5f5ed;
   color: #262421;
   font-family: '鸿蒙黑体', 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   display: flex;
@@ -97,6 +96,19 @@ onUnmounted(() => {
   overflow: hidden;
 }
 
+.poi-search-page::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 210px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0 64px, rgba(0, 0, 0, 0.18) 65px, rgba(0, 0, 0, 0.5) 100%),
+    url('/static/guide/app-launch-loading.webp') center top / cover no-repeat;
+  pointer-events: none;
+}
+
 /* #ifdef H5 */
 .poi-search-page {
   height: var(--poi-search-page-height, 100dvh);
@@ -108,20 +120,29 @@ onUnmounted(() => {
 /* #endif */
 
 .search-header {
-  min-height: 46px;
+  position: relative;
+  z-index: 1;
+  min-height: 48px;
   flex: 0 0 auto;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin: 0 2px 16px;
+  margin: 0 18px 118px;
 }
 
 .search-panel-shell {
+  position: relative;
+  z-index: 1;
   min-height: 0;
   flex: 1;
   display: flex;
+  padding: 18px 14px calc(env(safe-area-inset-bottom) + 14px);
+  box-sizing: border-box;
+  background: #fffef0;
+  border-radius: 22px 22px 0 0;
   overflow: hidden;
+  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.08);
 }
 
 .search-header-copy {
@@ -132,31 +153,31 @@ onUnmounted(() => {
 }
 
 .page-title {
-  font-size: 26px;
-  line-height: 31px;
+  font-size: 24px;
+  line-height: 30px;
   font-weight: 800;
   letter-spacing: 0;
-  color: #000000;
+  color: #050704;
 }
 
 .page-subtitle {
   font-size: 11px;
   line-height: 15px;
   font-weight: 500;
-  color: #5d5b50;
+  color: #4f5149;
   white-space: nowrap;
 }
 
 .map-link {
-  min-width: 74px;
-  height: 32px;
+  min-width: 76px;
+  height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 10px;
   box-sizing: border-box;
-  background: #000000;
-  border: 1px solid rgba(0, 0, 0, 0.88);
+  background: #050704;
+  border: 1px solid #050704;
   border-radius: 8px;
 }
 
@@ -177,13 +198,16 @@ onUnmounted(() => {
 
 @media (max-width: 360px) {
   .poi-search-page {
-    padding-top: calc(env(safe-area-inset-top) + 22px);
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-top: calc(env(safe-area-inset-top) + 14px);
   }
 
   .search-header {
-    margin-bottom: 12px;
+    margin: 0 14px 108px;
+  }
+
+  .search-panel-shell {
+    padding-left: 12px;
+    padding-right: 12px;
   }
 
   .page-title {