From 89fd9acb712d312791b26f4977f6929a2d24527a Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 26 Jun 2026 21:13:16 +0800
Subject: [PATCH] fix: clean up deprecated props, fix scroll issues and styles

- remove deprecated `mode="aspectFill"` prop from all image and img tags
- replace deprecated `scroll-y` directive with modern overflow-y-auto and scrollbar hiding classes
- refactor notice page to use TypeScript and proper route query handling
- update styling and layout for NoticeMessage, Tabs and QuickCard components
- fix spacing inconsistencies across multiple pages
---
 .../components/FacilityLocationCard/index.vue |  2 +-
 .../LongTextGuideCardPreview/guide.vue        |  7 +--
 .../LongTextGuideCardPreview/photo.vue        |  7 +--
 .../LongTextGuideCardPreview/poi.vue          |  5 +-
 .../LongTextGuideCardPreview/route.vue        |  3 +-
 .../components/MapNavigationCard/index.vue    |  2 +-
 .../home/components/NoticeCard/index.vue      |  2 +-
 .../home/components/NoticeMessage/index.vue   | 14 ++---
 .../home/components/PoiCompareCard/index.vue  |  2 +-
 .../home/components/PoiDetailCard/index.vue   |  2 +-
 src/pages/notice/index.vue                    | 60 ++++++++++++-------
 src/pages/quick/components/Card/index.vue     |  6 +-
 src/pages/quick/components/Tabs/index.vue     |  2 +-
 13 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/src/pages/home/components/FacilityLocationCard/index.vue b/src/pages/home/components/FacilityLocationCard/index.vue
index 613f7ca..6f50e0d 100644
--- a/src/pages/home/components/FacilityLocationCard/index.vue
+++ b/src/pages/home/components/FacilityLocationCard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="bg-white rounded-[24px] overflow-hidden w-full border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)] box-border">
-    <img class="block w-full h-[184px]" :src="data.image" mode="aspectFill" />
+    <img class="block w-full h-[184px]" :src="data.image" />
 
     <div class="px-24 pb-24 pt-7 box-border">
       <div class="flex items-center min-w-0">
diff --git a/src/pages/home/components/LongTextGuideCardPreview/guide.vue b/src/pages/home/components/LongTextGuideCardPreview/guide.vue
index 0ac6cf3..cbb7ff2 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/guide.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/guide.vue
@@ -2,8 +2,7 @@
   <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="漂流攻略" background="#E5EFE9" />
 
-    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-      scroll-y>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       <div class="box-border">
         <div class="overflow-hidden">
           <div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
@@ -22,7 +21,7 @@
             </div>
 
             <img class="block w-full h-[160px] my-1 mt-1 mb-4 rounded-[14px] bg-[#f1f5f9]"
-              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg" mode="aspectFill" />
+              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg" />
 
             <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">下水前，这几样别落下</div>
             <div
@@ -54,7 +53,7 @@
               <div class="flex gap-[10px] px-4 pb-[2px]">
                 <div v-for="product in products" :key="product.name"
                   class="w-[220px] shrink-0 overflow-hidden border border-[#f1f5f9] rounded-[20px] bg-white shadow-[0_2px_12px_rgba(15,23,42,0.04)]">
-                  <img class="w-full h-[110px] bg-[#f1f5f9]" :src="product.img" mode="aspectFill" />
+                  <img class="w-full h-[110px] bg-[#f1f5f9]" :src="product.img" />
                   <div class="pt-[10px] px-3 pb-3">
                     <div v-if="product.saleTag"
                       class="inline-flex w-fit mb-1 px-[6px] py-[2px] rounded-[6px] text-[#f43f5e] bg-[#fef2f2] text-[9px] font-black">
diff --git a/src/pages/home/components/LongTextGuideCardPreview/photo.vue b/src/pages/home/components/LongTextGuideCardPreview/photo.vue
index efcf8be..b52c21e 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/photo.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/photo.vue
@@ -2,8 +2,7 @@
   <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="拍照攻略" background="#E5EFE9" />
 
-    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-      scroll-y>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       <div class="box-border">
         <div class="overflow-hidden">
           <div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
@@ -47,7 +46,7 @@
               查看机位图
             </div>
             <div class="relative mx-4 mb-3 overflow-hidden rounded-[16px] bg-[#f8fafc]" @click="predivPhoto">
-              <img class="w-full h-[200px] bg-[#f1f5f9]" :src="photo.thumb" mode="aspectFill" />
+              <img class="w-full h-[200px] bg-[#f1f5f9]" :src="photo.thumb" />
               <div
                 class="absolute inset-x-0 bottom-0 px-[14px] pt-7 pb-3 bg-[linear-gradient(to_top,rgba(15,23,42,0.58),rgba(15,23,42,0))]">
                 <div class="text-white text-[13px] font-black leading-[18px]">{{ photo.title }}</div>
@@ -65,7 +64,7 @@
             </div>
             <div class="mx-4 mb-3 overflow-hidden border border-[#f1f5f9] rounded-[16px] bg-white">
               <div class="relative">
-                <img class="w-full h-[160px] bg-[#f1f5f9]" :src="aigc.img" mode="aspectFill" />
+                <img class="w-full h-[160px] bg-[#f1f5f9]" :src="aigc.img" />
                 <div
                   class="absolute top-[10px] left-[10px] px-[10px] py-1 rounded-[10px] text-white bg-[linear-gradient(135deg,#8b5cf6,#6366f1)] shadow-[0_2px_8px_rgba(99,102,241,0.35)] text-[10px] font-black">
                   AI 生成
diff --git a/src/pages/home/components/LongTextGuideCardPreview/poi.vue b/src/pages/home/components/LongTextGuideCardPreview/poi.vue
index 1915879..2f933ba 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/poi.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/poi.vue
@@ -2,8 +2,7 @@
   <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="景点故事" background="#E5EFE9" />
 
-    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-      scroll-y>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       <div class="box-border">
         <div class="overflow-hidden">
           <div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
@@ -22,7 +21,7 @@
             </div>
 
             <img class="block w-full h-[160px] my-1 mt-1 mb-4 rounded-[14px] bg-[#f1f5f9]"
-              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp2.jpg" mode="aspectFill" />
+              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp2.jpg" />
 
             <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">站在这儿，看什么</div>
             <div
diff --git a/src/pages/home/components/LongTextGuideCardPreview/route.vue b/src/pages/home/components/LongTextGuideCardPreview/route.vue
index bb20fdb..716682b 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/route.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/route.vue
@@ -2,8 +2,7 @@
   <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="路线指引" background="#E5EFE9" />
 
-    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-      scroll-y>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       <div class="box-border">
         <div class="overflow-hidden">
           <div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
diff --git a/src/pages/home/components/MapNavigationCard/index.vue b/src/pages/home/components/MapNavigationCard/index.vue
index 0c162e6..c7149a2 100644
--- a/src/pages/home/components/MapNavigationCard/index.vue
+++ b/src/pages/home/components/MapNavigationCard/index.vue
@@ -2,7 +2,7 @@
   <div
     class="bg-white rounded-[24px] overflow-hidden w-full border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)] box-border">
     <div class="relative">
-      <img class="block w-full h-[248px]" :src="data.image" mode="aspectFill" />
+      <img class="block w-full h-[248px]" :src="data.image" />
       <div
         class="absolute left-4 bottom-4 flex items-center text-white text-[12px] font-bold h-[34px] px-3 rounded-[8px] bg-[rgba(15,23,42,0.72)] leading-[34px]">
         <span class="mr-[6px] text-[15px] leading-[15px]">{{ badge.icon }}</span>
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
index b5528b4..06344ee 100644
--- a/src/pages/home/components/NoticeCard/index.vue
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -33,7 +33,7 @@
         </div>
       </div>
 
-      <image class="block w-full h-[250px]" :src="detail.image" mode="aspectFill" />
+      <image class="block w-full h-[250px]" :src="detail.image" />
 
       <div class="pt-[22px] px-5 pb-7 box-border">
         <div class="text-[#1e293b] font-size-20 font-bold leading-7">
diff --git a/src/pages/home/components/NoticeMessage/index.vue b/src/pages/home/components/NoticeMessage/index.vue
index 7d3dfaa..9744860 100644
--- a/src/pages/home/components/NoticeMessage/index.vue
+++ b/src/pages/home/components/NoticeMessage/index.vue
@@ -1,12 +1,13 @@
 <template>
   <div v-if="hasBannerList">
-    <van-swipe class="h-[50px] mt-[8px]" loop vertical :show-indicators="false">
+    <van-swipe class="h-[50px] mt-[8px] rounded-[12px] bg-white px-[12px]" loop vertical :autoplay="autoplay"
+      :show-indicators="false">
       <van-swipe-item v-for="item in bannerList" :key="item.entityName">
-        <div class="swiper-item bg-white flex flex-col items-start justify-between px-[12px]" @click="clickItem(item)">
+        <div class="h-full  flex flex-col items-start justify-center" @click="clickItem(item)">
           <span class="text-[#0CCD58] text-[12px] text-[600]">
             {{ item.entityName }}
           </span>
-          <div class="flex flex-row justify-between">
+          <div class="w-full flex flex-row justify-between">
             <span class="text-[#0CCD58] text-[10px] text-[500]">
               {{ t("home.notice.publishedAt") }}{{ item.effectiveStartTime }}
             </span>
@@ -81,13 +82,6 @@ const clickItem = (item) => {
 </script>
 
 <style lang="scss" scoped>
-.swiper-item {
-  display: block;
-  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 12px;
-  border: 1px solid #C7D2FE;
-}
-
 .underline-text {
   text-decoration: underline;
   text-decoration-color: #0CCD58;
diff --git a/src/pages/home/components/PoiCompareCard/index.vue b/src/pages/home/components/PoiCompareCard/index.vue
index 790ba2e..8b85311 100644
--- a/src/pages/home/components/PoiCompareCard/index.vue
+++ b/src/pages/home/components/PoiCompareCard/index.vue
@@ -15,7 +15,7 @@
       <div class="grid grid-cols-2 gap-[16px] mt-7">
         <div v-for="item in items" :key="item.id || item.name" class="min-w-0 active:opacity-[0.86]"
           :class="{ 'opacity-[0.55]': disabled }" @click="handleSelect(item)">
-          <img class="block w-full h-[140px] rounded-[18px]" :src="item.image" mode="aspectFill" />
+          <img class="block w-full h-[140px] rounded-[18px]" :src="item.image" />
           <div v-for="field in item.fields" :key="field.label" class="mt-3">
             <div class="text-[#94A3B8] text-[12px] font-bold leading-4">
               {{ field.label }}
diff --git a/src/pages/home/components/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
index b25accd..9241c53 100644
--- a/src/pages/home/components/PoiDetailCard/index.vue
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -2,7 +2,7 @@
   <div
     class="bg-white rounded-[24px] overflow-hidden border border-[#0f172a]/[0.04] shadow-[0_10px_28px_rgba(15,23,42,0.04)]">
     <div class="h-[206px] pt-[8px] px-[8px] relative">
-      <image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
+      <image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" />
       <div
         class="absolute top-[18px] left-[22px] min-h-[30px] px-[12px] rounded-full text-[#059669] bg-white/90 backdrop-blur-[8px] flex items-center gap-4 text-[10px] font-bold">
         <span class="text-[13px] leading-none">⌖</span>
diff --git a/src/pages/notice/index.vue b/src/pages/notice/index.vue
index caff08a..085362f 100644
--- a/src/pages/notice/index.vue
+++ b/src/pages/notice/index.vue
@@ -6,11 +6,11 @@
     </div>
 
     <!-- ✅ 滚动区域 -->
-    <div class="flex-1 overflow-hidden" scroll-y>
-      <div class="pb-24  overflow-hidden">
-        <img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
+    <div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+      <div class="pb-[24px]  overflow-hidden">
+        <img v-if="coverImage" class="w-full block" :src="coverImage" />
 
-        <div class="pt-16 px-12 pb-24 ">
+        <div class="pt-[16px] px-[12px] pb-[24px] ">
           <div class="text-[#171717] text-[16px] font-semibold">{{ detailTitle }}</div>
 
           <div v-if="publishTime" class="notice-time-tag flex flex-row items-center mt-[16px]">
@@ -19,8 +19,6 @@
               publishTime }}</span>
           </div>
 
-          <div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>
-
           <div class="mt-[16px] color-666 text-[14px] leading-[20px]">{{ noticeContent }}</div>
         </div>
       </div>
@@ -28,14 +26,22 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import TopNavBar from "@/components/TopNavBar/index.vue";
-import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+type NoticeData = {
+  entityName?: string;
+  effectiveStartTime?: string;
+  imgUrl?: string;
+  eventDescription?: string;
+};
 
-const noticeData = ref({});
+const { t } = useI18n();
+const route = useRoute();
+const noticeData = ref<NoticeData>({});
 
 const detailTitle = computed(() => {
   return noticeData.value.entityName?.trim() || t("home.notice.detailTitle");
@@ -46,23 +52,35 @@ const publishTime = computed(() => {
 });
 
 const coverImage = computed(() => {
-  return noticeData.value.eventImage?.trim();
+  return noticeData.value.imgUrl?.trim();
 });
 
 const noticeContent = computed(() => {
   return noticeData.value.eventDescription?.trim();
 });
 
-// TODO
-// onLoad((query = {}) => {
-//   if (query.noticeData) {
-//     try {
-//       noticeData.value = JSON.parse(decodeURIComponent(query.noticeData));
-//     } catch (error) {
-//       console.warn("noticeData parse failed:", error);
-//     }
-//   }
-// });
+const parseNoticeData = (value: unknown) => {
+  const rawValue = Array.isArray(value) ? value[0] : value;
+  if (typeof rawValue !== "string" || !rawValue) {
+    noticeData.value = {};
+    return;
+  }
+
+  try {
+    noticeData.value = JSON.parse(decodeURIComponent(rawValue));
+  } catch (error) {
+    noticeData.value = {};
+    console.warn("noticeData parse failed:", error);
+  }
+};
+
+watch(
+  () => route.query.noticeData,
+  (value) => {
+    parseNoticeData(value);
+  },
+  { immediate: true },
+);
 
 </script>
 
diff --git a/src/pages/quick/components/Card/index.vue b/src/pages/quick/components/Card/index.vue
index 8a08159..1c8c6fd 100644
--- a/src/pages/quick/components/Card/index.vue
+++ b/src/pages/quick/components/Card/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white p-[8px] rounded-[12px] flex items-start m-[12px]" @click.stop="handleClick(item)">
     <img class="w-[80px] h-[80px] rounded-[10px]" :src="item.commodityPhoto" />
-    <div class="max-w-[259px] flex-1 pl-[12px]">
+    <div class="flex-1 pl-[12px]">
       <div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
         {{ item.commodityName }}
       </div>
@@ -22,9 +22,9 @@
         <span v-if="item.stockUnitLabel" class="text-[12px] leading-[16px] text-ink-400">
           /{{ item.stockUnitLabel }}
         </span>
-        <span
+        <!-- <span
           class="ml-[16px] rounded-[10px] px-[8px] py-[4px] text-white [background:linear-gradient(90deg,#ff3d60_57%,#ff990c_100%)]">{{
-            t("quick.card.orderShort") }}</span>
+            t("quick.card.orderShort") }}</span> -->
       </div>
     </div>
   </div>
diff --git a/src/pages/quick/components/Tabs/index.vue b/src/pages/quick/components/Tabs/index.vue
index 0971d1c..c834cc4 100644
--- a/src/pages/quick/components/Tabs/index.vue
+++ b/src/pages/quick/components/Tabs/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative">
     <div
-      class="bg-[#e8fff1] h-[48px] overflow-x-auto whitespace-nowrap justify-start flex items-center [-webkit-overflow-scrolling:touch]">
+      class="bg-[#e8fff1] h-[48px] overflow-x-auto overflow-y-hidden whitespace-nowrap justify-start flex items-center [-webkit-overflow-scrolling:touch] touch-pan-x scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       <div v-for="(item, index) in tabList" :key="item.id" :class="[
         'h-full flex-none flex items-center justify-center relative px-[12px] min-w-[68px]',
         activeIndex === index &&