From 971b4d9cfae27c471ec757868e1acefb8d5d6e31 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 10:28:47 +0800
Subject: [PATCH] style(home components): convert rounded-24 to rounded-[24px]
 across card components

Update all home page card components to use Tailwind's arbitrary radius syntax. Also adjust SharedVisual/CardShell.vue to add a subtle box shadow, fix border class formatting, and include transition and opacity styles for pressable and disabled states.
---
 src/pages/home/components/FacilityLocationCard/index.vue    | 2 +-
 src/pages/home/components/FaqHelpCard/index.vue             | 2 +-
 src/pages/home/components/GeneratorPhotoComponent/index.vue | 6 +++---
 src/pages/home/components/LongTextGuideCard/index.vue       | 4 ++--
 src/pages/home/components/MapNavigationCard/index.vue       | 2 +-
 src/pages/home/components/NoticeCard/index.vue              | 4 ++--
 src/pages/home/components/PoiCompareCard/index.vue          | 4 ++--
 src/pages/home/components/PoiDetailCard/index.vue           | 2 +-
 src/pages/home/components/RoutePlanCard/index.vue           | 4 ++--
 src/pages/home/components/ScenicImageCard/index.vue         | 2 +-
 src/pages/home/components/SharedVisual/CardShell.vue        | 6 ++++--
 11 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/pages/home/components/FacilityLocationCard/index.vue b/src/pages/home/components/FacilityLocationCard/index.vue
index a34d46f..c778090 100644
--- a/src/pages/home/components/FacilityLocationCard/index.vue
+++ b/src/pages/home/components/FacilityLocationCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
+  <div class="facility-location-card bg-white rounded-[24px] overflow-hidden w-full">
     <img class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
 
     <div class="facility-location-card__body px-24 pb-24">
diff --git a/src/pages/home/components/FaqHelpCard/index.vue b/src/pages/home/components/FaqHelpCard/index.vue
index 7ff42cf..39ea0c7 100644
--- a/src/pages/home/components/FaqHelpCard/index.vue
+++ b/src/pages/home/components/FaqHelpCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="faq-help-card bg-white rounded-24 w-full">
+  <div class="faq-help-card bg-white rounded-[24px] w-full">
     <div class="faq-help-card__header flex items-center">
       <div class="faq-help-card__icon flex items-center flex-justify-center rounded-full text-[16px] font-bold">
         {{ data.icon }}
diff --git a/src/pages/home/components/GeneratorPhotoComponent/index.vue b/src/pages/home/components/GeneratorPhotoComponent/index.vue
index 6f5f9ab..abecc0d 100644
--- a/src/pages/home/components/GeneratorPhotoComponent/index.vue
+++ b/src/pages/home/components/GeneratorPhotoComponent/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="container w-full  border-ff overflow-hidden rounded-24 flex flex-col">
+  <div class="container w-full  border-ff overflow-hidden rounded-[24px] flex flex-col">
     <!-- 占位撑开 -->
     <div class="w-vw"></div>
-    <div class="content flex flex-col m-4  rounded-24">
+    <div class="content flex flex-col m-4  rounded-[24px]">
       <div class="flex flex-col p-6  items-center justify-center">
         <img class="w-full rounded-20" :src="props.toolCall.componentNameParams.background" mode="widthFix" />
 
@@ -19,7 +19,7 @@
         </span>
 
         <div class="w-full  px-12 pb-8 flex flex-row" @click="jumpClick">
-          <div class="btn-bg w-full  p-4 rounded-24 flex flex-row">
+          <div class="btn-bg w-full  p-4 rounded-[24px] flex flex-row">
             <div
               class="btn-bg-sub w-full  p-16 rounded-20 flex flex-row items-center flex-justify-center text-white text-center text-[18px] font-800">
               {{ props.toolCall.componentNameParams.buttonName }}
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index 0e3a99b..f8c1b5f 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="long-text-guide-card w-full">
     <div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
-      <div v-for="item in cards" :key="item.id" class="long-text-guide-card__summary-card bg-white rounded-24 "
+      <div v-for="item in cards" :key="item.id" class="long-text-guide-card__summary-card bg-white rounded-[24px] "
         :class="{ 'is-disabled': disabled }" @click="openDetail(item)">
         <div class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
           {{ item.badge }}
@@ -19,7 +19,7 @@
       </div>
     </div>
 
-    <div v-else class="long-text-guide-card__detail-card bg-white rounded-24  overflow-hidden">
+    <div v-else class="long-text-guide-card__detail-card bg-white rounded-[24px]  overflow-hidden">
       <div class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9">
         <div class="long-text-guide-card__back flex items-center flex-justify-center rounded-full font-700"
           @click="closeDetail">
diff --git a/src/pages/home/components/MapNavigationCard/index.vue b/src/pages/home/components/MapNavigationCard/index.vue
index fc08593..8435184 100644
--- a/src/pages/home/components/MapNavigationCard/index.vue
+++ b/src/pages/home/components/MapNavigationCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
+  <div class="map-navigation-card bg-white rounded-[24px] overflow-hidden w-full">
     <div class="map-navigation-card__media">
       <img class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
       <div class="map-navigation-card__badge flex items-center text-white text-[12px] font-bold">
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
index 3d1f989..1db9c7e 100644
--- a/src/pages/home/components/NoticeCard/index.vue
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="notice-card w-full">
-    <div v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
+    <div v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-[24px] w-full">
       <div class="notice-card__summary-title color-B45309 text-[16px] font-bold">
         {{ summary.title }}
       </div>
@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <div v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
+    <div v-else class="notice-card__detail bg-white rounded-[24px] overflow-hidden w-full">
       <div class="notice-card__detail-head flex items-center">
         <div class="notice-card__back flex items-center flex-justify-center rounded-full flex-shrink-0"
           @click="closeDetail">
diff --git a/src/pages/home/components/PoiCompareCard/index.vue b/src/pages/home/components/PoiCompareCard/index.vue
index ca379b1..7044a13 100644
--- a/src/pages/home/components/PoiCompareCard/index.vue
+++ b/src/pages/home/components/PoiCompareCard/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="poi-compare-card w-full">
-    <div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-24 overflow-hidden">
+    <div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-[24px] overflow-hidden">
       <div class="poi-compare-card__head flex items-center">
         <div class="poi-compare-card__mark flex items-center flex-justify-center rounded-full flex-shrink-0">
           {{ data.icon }}
@@ -36,7 +36,7 @@
       </div>
     </div>
 
-    <div v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
+    <div v-else class="poi-compare-card__detail-card bg-white rounded-[24px] overflow-hidden">
       <div class="poi-compare-card__detail-head flex items-center">
         <div class="poi-compare-card__back flex items-center flex-justify-center rounded-full flex-shrink-0"
           @click="closeDetail">
diff --git a/src/pages/home/components/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
index 4553407..86e24f5 100644
--- a/src/pages/home/components/PoiDetailCard/index.vue
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="poi-detail-card bg-white rounded-24  overflow-hidden">
+  <div class="poi-detail-card bg-white rounded-[24px]  overflow-hidden">
     <div class="poi-detail-card__hero relative">
       <image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
       <div class="poi-detail-card__badge flex items-center gap-4 font-size-10 font-bold">
diff --git a/src/pages/home/components/RoutePlanCard/index.vue b/src/pages/home/components/RoutePlanCard/index.vue
index a9db9fd..b577c02 100644
--- a/src/pages/home/components/RoutePlanCard/index.vue
+++ b/src/pages/home/components/RoutePlanCard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="route-plan-card w-full">
     <div v-if="!detailOpen"
-      class="route-plan-card__summary flex items-center bg-white rounded-24 overflow-hidden w-full"
+      class="route-plan-card__summary flex items-center bg-white rounded-[24px] overflow-hidden w-full"
       :class="{ 'is-disabled': disabled }" @click="openDetail">
       <img class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
       <div class="route-plan-card__body flex-1">
@@ -20,7 +20,7 @@
       </div>
     </div>
 
-    <div v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
+    <div v-else class="route-plan-card__detail bg-white rounded-[24px] overflow-hidden w-full">
       <div class="route-plan-card__detail-head flex items-center">
         <div class="route-plan-card__back flex items-center flex-justify-center rounded-full flex-shrink-0"
           @click="closeDetail">
diff --git a/src/pages/home/components/ScenicImageCard/index.vue b/src/pages/home/components/ScenicImageCard/index.vue
index 9611bf3..9b35e17 100644
--- a/src/pages/home/components/ScenicImageCard/index.vue
+++ b/src/pages/home/components/ScenicImageCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scenic-image-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
+  <div class="scenic-image-card relative rounded-[24px] overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
     @click="handleSelect">
     <img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />
 
diff --git a/src/pages/home/components/SharedVisual/CardShell.vue b/src/pages/home/components/SharedVisual/CardShell.vue
index 1f36b4d..9d6dad0 100644
--- a/src/pages/home/components/SharedVisual/CardShell.vue
+++ b/src/pages/home/components/SharedVisual/CardShell.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="visual-card-shell w-full bg-white border-F1F5F9 rounded-24  overflow-hidden"
-    :class="[{ 'is-pressable': pressable, 'is-disabled': disabled }, variantClass]" @click="handleClick">
+  <div
+    class="[box-shadow:0_8px_24px_rgba(15,23,42,0.05)] w-full bg-white border border-[#f1f5f9] rounded-[24px] overflow-hidden"
+    :class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease]': pressable, 'opacity-55': disabled }, variantClass]"
+    @click="handleClick">
     <slot />
   </div>
 </template>