From 79770b03d45fafd960492e6bf143758a12044c7c Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 14:32:05 +0800
Subject: [PATCH] style: standardize tailwind classes and cleanup legacy styles

Replace `flex-shrink-0` with `shrink-0` across components for consistency
Migrate legacy color utility classes to inline hex Tailwind classes
Replace background color utility classes with inline hex equivalents
Delete unused SCSS style files for ScenicImageCard and RoutePlanCard
Refactor RoutePlanCard to use inline Tailwind styles instead of external CSS
Update icon component usage in RoutePlanCard to match project standards
---
 src/components/GoodDetail/index.vue           |   2 +-
 .../home/components/ChatLongAnswer/index.vue  |   2 +-
 .../components/FacilityLocationCard/index.vue |   4 +-
 .../components/LongTextGuideCard/index.vue    |  12 +-
 .../LongTextGuideCardPreview/index.vue        |   2 +-
 .../components/MapNavigationCard/index.vue    |   2 +-
 .../home/components/NoticeCard/index.vue      |   8 +-
 .../home/components/NoticeMessage/detail.vue  |   2 +-
 .../home/components/PoiCompareCard/index.vue  |  19 +-
 .../home/components/PoiDetailCard/index.vue   |   4 +-
 .../RecommendationListCard/index.vue          |   2 +-
 .../home/components/RoutePlanCard/index.vue   |  81 ++++---
 .../RoutePlanCard/styles/index.scss           | 227 ------------------
 .../ScenicImageCard/styles/index.scss         |  48 ----
 14 files changed, 74 insertions(+), 341 deletions(-)
 delete mode 100644 src/pages/home/components/RoutePlanCard/styles/index.scss
 delete mode 100644 src/pages/home/components/ScenicImageCard/styles/index.scss

diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 2177e9a..5a2cfb8 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -11,7 +11,7 @@
               .commodityPurchaseInstructionModuleEntityList.length -
             1,
         }">
-          <div class="flex items-center flex-row flex-shrink-0 mr-[8px]">
+          <div class="flex items-center flex-row shrink-0 mr-[8px]">
             <zn-icon :name="moduleItem.moduleIcon" size="20" color="#333"></zn-icon>
             <span class="ml-[4px] text-[14px] text-[#171717] leading-[20px]">
               {{ moduleItem.moduleTitle }}
diff --git a/src/pages/home/components/ChatLongAnswer/index.vue b/src/pages/home/components/ChatLongAnswer/index.vue
index 74c6e84..99abf3d 100644
--- a/src/pages/home/components/ChatLongAnswer/index.vue
+++ b/src/pages/home/components/ChatLongAnswer/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col bg-liner h-screen overflow-hidden">
     <!-- ✅ 顶部固定导航 -->
-    <div class="flex-shrink-0">
+    <div class="shrink-0">
       <TopNavBar :title="title" background="transparent" />
     </div>
 
diff --git a/src/pages/home/components/FacilityLocationCard/index.vue b/src/pages/home/components/FacilityLocationCard/index.vue
index ac9aa17..1bad81b 100644
--- a/src/pages/home/components/FacilityLocationCard/index.vue
+++ b/src/pages/home/components/FacilityLocationCard/index.vue
@@ -12,13 +12,13 @@
         </div>
       </div>
 
-      <div class="facility-location-card__distance flex items-center color-94A3B8 text-[14px] font-bold">
+      <div class="facility-location-card__distance flex items-center text-[#94A3B8] text-[14px] font-bold">
         <span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
         <span>{{ distance.text }}</span>
       </div>
 
       <div class="facility-location-card__location bg-[#f8fafc] rounded-[20px]">
-        <div class="facility-location-card__location-label flex items-center color-64748B text-[13px] font-bold">
+        <div class="facility-location-card__location-label flex items-center text-[#64748B] text-[13px] font-bold">
           <span class="facility-location-card__location-dot">{{ location.icon }}</span>
           <span>{{ location.label }}</span>
         </div>
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index 8a8adab..ed912df 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -9,7 +9,7 @@
         <div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
           {{ item.title }}
         </div>
-        <div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-medium ellipsis-2">
+        <div class="long-text-guide-card__summary-text text-[#94A3B8] text-[14px] font-medium ellipsis-2">
           {{ item.summary }}
         </div>
         <div class="long-text-guide-card__summary-footer flex items-center justify-between">
@@ -52,9 +52,9 @@
         <div class="long-text-guide-card__section-title text-[#1e293b] text-[16px] font-bold">
           {{ activeItem.sectionTitle }}
         </div>
-        <div class="long-text-guide-card__tip-block bg-ECFDF5">
+        <div class="long-text-guide-card__tip-block bg-[#ecfdf5]">
           <div v-for="(tip, index) in activeItem.tips || []" :key="tip"
-            class="long-text-guide-card__tip color-047857 text-[14px] font-800">
+            class="long-text-guide-card__tip text-[#047857] text-[14px] font-800">
             {{ index + 1 }} {{ tip }}
           </div>
         </div>
@@ -72,7 +72,7 @@
       </div>
 
       <div v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
-        <div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
+        <div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-800">
           {{ activeItem.action.label }}
         </div>
         <div class="long-text-guide-card__map-card rounded-[16px] overflow-hidden">
@@ -86,7 +86,7 @@
           <div class="long-text-guide-card__map-bar flex items-center bg-white">
             <div class="flex-1">
               <div class="text-[#1e293b] text-[15px] font-bold">{{ activeItem.action.title }}</div>
-              <div class="color-94A3B8 text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
+              <div class="text-[#94A3B8] text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
             </div>
             <div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-bold"
               @click="handleAction(activeItem)">
@@ -97,7 +97,7 @@
       </div>
 
       <div v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
-        <div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
+        <div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-800">
           {{ activeItem.action.label }}
         </div>
         <div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
diff --git a/src/pages/home/components/LongTextGuideCardPreview/index.vue b/src/pages/home/components/LongTextGuideCardPreview/index.vue
index a1d10a9..3cf31e2 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/index.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/index.vue
@@ -11,7 +11,7 @@
       <div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
         {{ item.title }}
       </div>
-      <div class="long-text-guide-card__summary-text color-94A3B8 text-[14px] font-medium ellipsis-2">
+      <div class="long-text-guide-card__summary-text text-[#94A3B8] text-[14px] font-medium ellipsis-2">
         {{ item.summary }}
       </div>
       <div class="long-text-guide-card__summary-footer flex items-center justify-between">
diff --git a/src/pages/home/components/MapNavigationCard/index.vue b/src/pages/home/components/MapNavigationCard/index.vue
index 8bd062c..33c7abc 100644
--- a/src/pages/home/components/MapNavigationCard/index.vue
+++ b/src/pages/home/components/MapNavigationCard/index.vue
@@ -13,7 +13,7 @@
         <div class="map-navigation-card__title text-[#1e293b] text-[18px] font-bold truncate">
           {{ data.title }}
         </div>
-        <div class="map-navigation-card__distance color-94A3B8 text-[14px] font-bold truncate">
+        <div class="map-navigation-card__distance text-[#94A3B8] text-[14px] font-bold truncate">
           {{ data.distance }}
         </div>
       </div>
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
index 7d83c16..16efeeb 100644
--- a/src/pages/home/components/NoticeCard/index.vue
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="notice-card w-full">
-    <div v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-[24px] 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>
-      <div class="notice-card__summary-content color-D97706 text-[14px] font-bold">
+      <div class="notice-card__summary-content text-[#D97706] text-[14px] font-bold">
         {{ summary.content }}
       </div>
       <div class="notice-card__summary-footer flex items-center justify-between">
-        <div class="notice-card__summary-time color-D97706 text-[12px] font-bold">
+        <div class="notice-card__summary-time text-[#D97706] text-[12px] font-bold">
           {{ summary.publishTime }}
         </div>
         <div class="notice-card__summary-link color-B45309 text-[14px] font-bold" :class="{ 'is-disabled': disabled }"
@@ -20,7 +20,7 @@
 
     <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 justify-center rounded-full flex-shrink-0" @click="closeDetail">
+        <div class="notice-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </div>
         <div class="notice-card__head-title text-[#1e293b] text-[18px] font-bold">
diff --git a/src/pages/home/components/NoticeMessage/detail.vue b/src/pages/home/components/NoticeMessage/detail.vue
index 123d147..e83598d 100644
--- a/src/pages/home/components/NoticeMessage/detail.vue
+++ b/src/pages/home/components/NoticeMessage/detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col bg-liner h-screen overflow-hidden">
     <!-- ✅ 顶部固定导航 -->
-    <div class="flex-shrink-0">
+    <div class="shrink-0">
       <TopNavBar :title="detailTitle" background="transparent" />
     </div>
 
diff --git a/src/pages/home/components/PoiCompareCard/index.vue b/src/pages/home/components/PoiCompareCard/index.vue
index 0e901c4..399275d 100644
--- a/src/pages/home/components/PoiCompareCard/index.vue
+++ b/src/pages/home/components/PoiCompareCard/index.vue
@@ -2,7 +2,7 @@
   <div class="poi-compare-card w-full">
     <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 justify-center rounded-full flex-shrink-0">
+        <div class="poi-compare-card__mark flex items-center justify-center rounded-full shrink-0">
           {{ data.icon }}
         </div>
         <div class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1">
@@ -15,7 +15,7 @@
           :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
           <img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
           <div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
-            <div class="poi-compare-card__field-label color-94A3B8 text-[12px] font-800">
+            <div class="poi-compare-card__field-label text-[#94A3B8] text-[12px] font-800">
               {{ field.label }}
             </div>
             <div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold"
@@ -37,14 +37,13 @@
 
     <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 justify-center rounded-full flex-shrink-0"
-          @click="closeDetail">
+        <div class="poi-compare-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </div>
         <div class="poi-compare-card__detail-title text-[#1e293b] font-size-20 font-bold flex-1">
           {{ detail.title }}
         </div>
-        <div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-bold">
+        <div class="poi-compare-card__compare-label text-[#94A3B8] text-[12px] font-bold">
           {{ detail.compareLabel }}
         </div>
       </div>
@@ -58,7 +57,7 @@
           </div>
         </div>
         <div v-for="row in detail.rows" :key="row.label" class="poi-compare-card__table-row poi-compare-card__data-row">
-          <div class="poi-compare-card__row-label color-94A3B8 text-[12px] font-bold">
+          <div class="poi-compare-card__row-label text-[#94A3B8] text-[12px] font-bold">
             {{ row.label }}
           </div>
           <div v-for="cell in row.values" :key="row.label + '-' + cell.text"
@@ -69,12 +68,12 @@
       </div>
 
       <div class="poi-compare-card__recommend">
-        <div class="poi-compare-card__recommend-title color-94A3B8 text-[12px] font-bold">
+        <div class="poi-compare-card__recommend-title text-[#94A3B8] text-[12px] font-bold">
           {{ detail.recommendTitle }}
         </div>
         <div class="poi-compare-card__tips">
           <div v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
-            <div class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
+            <div class="poi-compare-card__dot rounded-full shrink-0" :class="getDotClass(tip.tone)" />
             <div class="poi-compare-card__tip-text text-[#334155] text-[14px] font-bold">
               {{ tip.text }}
             </div>
@@ -117,8 +116,8 @@ const detail = computed(() => props.data.detail || {});
 
 const getToneClass = (tone) => {
   const toneMap = {
-    green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
-    amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
+    green: "poi-compare-card__chip--green text-[#047857] bg-[#ecfdf5]",
+    amber: "poi-compare-card__chip--amber text-[#D97706] bg-[#FFFBEB]",
   };
   return toneMap[tone] || "";
 };
diff --git a/src/pages/home/components/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
index 6bb3e34..7039066 100644
--- a/src/pages/home/components/PoiDetailCard/index.vue
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -14,8 +14,8 @@
       </div>
 
       <div class="poi-detail-card__tip flex items-center gap-10">
-        <div class="poi-detail-card__spark color-047857 text-[18px] font-bold">✦</div>
-        <div class="poi-detail-card__tip-text color-047857 text-[14px] font-800">
+        <div class="poi-detail-card__spark text-[#047857] text-[18px] font-bold">✦</div>
+        <div class="poi-detail-card__tip-text text-[#047857] text-[14px] font-800">
           {{ data.tip?.text }}
         </div>
       </div>
diff --git a/src/pages/home/components/RecommendationListCard/index.vue b/src/pages/home/components/RecommendationListCard/index.vue
index a424214..8730bf7 100644
--- a/src/pages/home/components/RecommendationListCard/index.vue
+++ b/src/pages/home/components/RecommendationListCard/index.vue
@@ -11,7 +11,7 @@
             {{ item.title }}
           </div>
           <div
-            class="recommendation-list-card__distance flex items-center gap-4 mt-4 color-94A3B8 text-[12px] font-800">
+            class="recommendation-list-card__distance flex items-center gap-4 mt-4 text-[#94A3B8] text-[12px] font-800">
             <span class="recommendation-list-card__pin">⌖</span>
             <span>{{ item.distance }}</span>
           </div>
diff --git a/src/pages/home/components/RoutePlanCard/index.vue b/src/pages/home/components/RoutePlanCard/index.vue
index e7acbb7..15b677a 100644
--- a/src/pages/home/components/RoutePlanCard/index.vue
+++ b/src/pages/home/components/RoutePlanCard/index.vue
@@ -1,81 +1,90 @@
 <template>
-  <div class="route-plan-card w-full">
+  <div class="w-full">
     <div v-if="!detailOpen"
-      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">
-        <div class="route-plan-card__title text-[#1e293b] text-[18px] font-bold truncate">
+      class="min-h-[108px] px-[20px] py-[16px] flex items-center bg-white rounded-[24px] overflow-hidden w-full border border-slate-200/72 [box-shadow:0_10px_28px_rgba(15,23,42,0.05)] active:opacity-86"
+      :class="{ 'opacity-55': disabled }" @click="openDetail">
+      <img class="w-[76px] h-[76px] rounded-[10px] block shrink-0" :src="data.image" />
+      <div class="min-w-0 ml-[18px] flex-1">
+        <div class="leading-[24px] text-[#1e293b] text-[18px] font-bold truncate">
           {{ data.title }}
         </div>
-        <div class="route-plan-card__tags flex items-center">
-          <div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag text-[12px] font-bold"
+        <div class="min-w-0 mt-[10px] flex items-center space-x-2">
+          <div v-for="tag in summaryTags" :key="tag.id || tag.text"
+            class="h-[24px] px-[11px] rounded-full leading-[24px] text-[12px] font-bold whitespace-nowrap"
             :class="getTagClass(tag.tone)">
             {{ tag.text }}
           </div>
         </div>
       </div>
-      <div class="flex-shrink-0">
-        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+      <div class="shrink-0">
+        <van-icon name="arrow-right" size="16" color="#CBD5E1"></van-icon>
       </div>
     </div>
 
-    <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 justify-center rounded-full flex-shrink-0"
+    <div v-else
+      class="bg-white rounded-[24px] overflow-hidden w-full border border-slate-200/72 [box-shadow:0_10px_28px_rgba(15,23,42,0.05)]">
+      <div class="min-w-0 h-[70px] px-[22px] border-b border-slate-100 flex items-center">
+        <div
+          class="w-[34px] h-[34px] mr-3.5 text-slate-500 text-[28px] leading-none bg-slate-50 flex items-center justify-center rounded-full shrink-0"
           @click="closeDetail">
-          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
+          <van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
         </div>
-        <div class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold truncate flex-1">
+        <div class="min-w-0 leading-[24px] text-[#1e293b] text-[18px] font-bold truncate flex-1">
           {{ data.title }}
         </div>
-        <div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-bold">
+        <div
+          class="h-[26px] ml-3 px-3 rounded-full leading-[26px] whitespace-nowrap text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
           {{ detail.badge }}
         </div>
       </div>
 
-      <div class="route-plan-card__timeline">
+      <div class="pt-[26px] py-[18px]">
         <template v-for="(node, index) in nodes" :key="node.id || node.title">
-          <div class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
+          <div class="active:opacity-86 relative" :class="{ 'opacity-55': disabled }" @click="handleSelect(node)">
             <div
-              class="route-plan-card__node-number flex items-center justify-center rounded-full color-047857 bg-ECFDF5 text-[12px] font-bold">
+              class="absolute left-5 top-1/2 z-10 w-[26px] h-[26px] -translate-y-1/2 flex items-center justify-center rounded-full text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
               {{ index + 1 }}
             </div>
-            <div class="route-plan-card__node bg-white rounded-[20px] flex items-center">
-              <img class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
-              <div class="route-plan-card__node-body flex-1">
-                <div class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold truncate">
+            <div
+              class="min-h-[88px] pt-3 pr-4 pb-3 pl-[56px] border border-gray-200 bg-white rounded-[20px] flex items-center">
+              <img class="w-16 h-16 mr-3.5 rounded-[10px] object-cover block shrink-0" :src="node.image" />
+              <div class="min-w-0 flex-1">
+                <div class="leading-[22px] text-[#1e293b] text-[16px] font-bold truncate">
                   {{ node.title }}
                 </div>
-                <div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 truncate">
+                <div class="mt-[4px] leading-[18px] text-[#94A3B8] text-[12px] font-800 truncate">
                   {{ node.description }}
                 </div>
-                <div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-bold">
+                <div v-if="node.tag"
+                  class="inline-flex items-center h-[22px] mt-1.5 px-[9px] border border-amber-200 rounded-full leading-[22px] text-[#D97706] bg-[#FFFBEB] text-[12px] font-bold">
                   {{ node.tag }}
                 </div>
               </div>
             </div>
           </div>
 
-          <div v-if="connectors[index]" class="route-plan-card__connector">
-            <div class="route-plan-card__connector-line"></div>
-            <div class="route-plan-card__connector-arrow"></div>
+          <div v-if="connectors[index]" class="relative h-[56px]">
+            <div class="absolute left-1/2 top-0 w-[2px] h-[52px] -translate-x-1/2 rounded-[2px] bg-green-200"></div>
             <div
-              class="route-plan-card__connector-chip flex items-center bg-[#f8fafc] rounded-full color-64748B text-[12px] font-bold">
-              <span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
+              class="absolute left-1/2 top-[42px] w-2.5 h-2.5 border-r-2 border-r-[#86efac] border-b-2 border-b-[#86efac] [-translate-x-4px] rotate-45">
+            </div>
+            <div
+              class="absolute right-0 top-3.5 h-7 px-3 border border-gray-200 leading-7 text-gray-600 flex items-center bg-[#f8fafc] rounded-full text-[#64748B] text-[12px] font-bold">
+              <span class="mr-[5px]">{{ connectors[index].icon }}</span>
               <span>{{ connectors[index].text }}</span>
             </div>
           </div>
         </template>
       </div>
 
-      <div v-if="tips.length" class="route-plan-card__tips bg-[#f8fafc] rounded-[20px]">
-        <div class="route-plan-card__tips-title color-64748B text-[14px] font-bold">
+      <div v-if="tips.length"
+        class="mt-[26px] mx-5 pt-4.5 pr-4.5 pb-4.5 pl-5 border border-slate-200 bg-[#f8fafc] rounded-[20px]">
+        <div class="mb-[14px] leading-[18px] text-[#64748B] text-[14px] font-bold">
           {{ detail.tipsTitle }}
         </div>
         <div v-for="tip in tips" :key="tip"
-          class="route-plan-card__tip flex items-center text-[#334155] text-[13px] font-bold">
-          <div class="route-plan-card__tip-dot rounded-full flex-shrink-0"></div>
+          class="min-h-[22px] leading-[22px] mt-[4px] flex items-center text-[#334155] text-[13px] font-bold">
+          <div class="w-[5px] h-[5px] mr-[12px] bg-[#cbd5e1] rounded-full shrink-0"></div>
           <div>{{ tip }}</div>
         </div>
       </div>
@@ -107,8 +116,8 @@ const connectors = computed(() => detail.value.connectors || []);
 const tips = computed(() => detail.value.tips || []);
 
 const getTagClass = (tone) => {
-  if (tone === "green") return "color-047857 bg-ECFDF5";
-  return "color-64748B bg-[#f1f5f9]";
+  if (tone === "green") return "text-[#047857] bg-[#ecfdf5]";
+  return "text-[#64748B] bg-[#f1f5f9]";
 };
 
 const openDetail = () => {
diff --git a/src/pages/home/components/RoutePlanCard/styles/index.scss b/src/pages/home/components/RoutePlanCard/styles/index.scss
deleted file mode 100644
index 33ba781..0000000
--- a/src/pages/home/components/RoutePlanCard/styles/index.scss
+++ /dev/null
@@ -1,227 +0,0 @@
-.route-plan-card {
-  width: 100%;
-}
-
-.route-plan-card__summary,
-.route-plan-card__detail {
-  border: 1px solid rgba(226, 232, 240, 0.72);
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
-  box-sizing: border-box;
-}
-
-.route-plan-card__summary {
-  min-height: 108px;
-  padding: 16px 20px;
-}
-
-.route-plan-card__summary:active,
-.route-plan-card__node-wrap:active {
-  opacity: 0.86;
-}
-
-.route-plan-card__summary.is-disabled,
-.route-plan-card__node-wrap.is-disabled {
-  opacity: 0.55;
-}
-
-.route-plan-card__cover {
-  width: 76px;
-  height: 76px;
-  border-radius: 10px;
-}
-
-.route-plan-card__body {
-  min-width: 0;
-  margin-left: 18px;
-}
-
-.route-plan-card__title {
-  line-height: 24px;
-}
-
-.route-plan-card__tags {
-  min-width: 0;
-  margin-top: 10px;
-}
-
-.route-plan-card__tag {
-  height: 24px;
-  padding: 0 11px;
-  border-radius: 999px;
-  line-height: 24px;
-  white-space: nowrap;
-}
-
-.route-plan-card__tag + .route-plan-card__tag {
-  margin-left: 8px;
-}
-
-.route-plan-card__arrow {
-  width: 12px;
-  height: 12px;
-  margin-left: 14px;
-  border-top: 2px solid #cbd5e1;
-  border-right: 2px solid #cbd5e1;
-  transform: rotate(45deg);
-}
-
-.route-plan-card__detail {
-  padding-bottom: 26px;
-}
-
-.route-plan-card__detail-head {
-  min-width: 0;
-  height: 70px;
-  padding: 0 22px;
-  border-bottom: 1px solid #f1f5f9;
-  box-sizing: border-box;
-}
-
-.route-plan-card__back {
-  width: 34px;
-  height: 34px;
-  margin-right: 14px;
-  color: #64748b;
-  font-size: 28px;
-  line-height: 1;
-  background: #f8fafc;
-}
-
-.route-plan-card__detail-title {
-  min-width: 0;
-  line-height: 24px;
-}
-
-.route-plan-card__detail-badge {
-  height: 26px;
-  margin-left: 12px;
-  padding: 0 12px;
-  border-radius: 999px;
-  line-height: 26px;
-  white-space: nowrap;
-}
-
-.route-plan-card__timeline {
-  padding: 26px 18px 0;
-}
-
-.route-plan-card__node-wrap {
-  position: relative;
-}
-
-.route-plan-card__node-number {
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  z-index: 2;
-  width: 26px;
-  height: 26px;
-  transform: translateY(-50%);
-}
-
-.route-plan-card__node {
-  min-height: 88px;
-  padding: 12px 16px 12px 56px;
-  border: 1px solid #e5e7eb;
-  box-sizing: border-box;
-}
-
-.route-plan-card__node-image {
-  width: 64px;
-  height: 64px;
-  margin-right: 14px;
-  border-radius: 10px;
-}
-
-.route-plan-card__node-body {
-  min-width: 0;
-}
-
-.route-plan-card__node-title {
-  line-height: 22px;
-}
-
-.route-plan-card__node-desc {
-  margin-top: 4px;
-  line-height: 18px;
-}
-
-.route-plan-card__node-tag {
-  display: inline-flex;
-  align-items: center;
-  height: 22px;
-  margin-top: 6px;
-  padding: 0 9px;
-  border: 1px solid #fde68a;
-  border-radius: 999px;
-  line-height: 22px;
-}
-
-.route-plan-card__connector {
-  position: relative;
-  height: 56px;
-}
-
-.route-plan-card__connector-line {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  width: 2px;
-  height: 52px;
-  border-radius: 2px;
-  background: #bbf7d0;
-}
-
-.route-plan-card__connector-arrow {
-  position: absolute;
-  left: 50%;
-  top: 42px;
-  width: 10px;
-  height: 10px;
-  border-right: 2px solid #86efac;
-  border-bottom: 2px solid #86efac;
-  transform: translateX(-4px) rotate(45deg);
-}
-
-.route-plan-card__connector-chip {
-  position: absolute;
-  right: 0;
-  top: 14px;
-  height: 28px;
-  padding: 0 12px;
-  border: 1px solid #e5e7eb;
-  line-height: 28px;
-  box-sizing: border-box;
-}
-
-.route-plan-card__connector-icon {
-  margin-right: 5px;
-}
-
-.route-plan-card__tips {
-  margin: 26px 20px 0;
-  padding: 18px 18px 18px 20px;
-  border: 1px solid #e2e8f0;
-  box-sizing: border-box;
-}
-
-.route-plan-card__tips-title {
-  margin-bottom: 14px;
-  line-height: 18px;
-}
-
-.route-plan-card__tip {
-  min-height: 22px;
-  line-height: 22px;
-}
-
-.route-plan-card__tip + .route-plan-card__tip {
-  margin-top: 4px;
-}
-
-.route-plan-card__tip-dot {
-  width: 5px;
-  height: 5px;
-  margin-right: 12px;
-  background: #cbd5e1;
-}
diff --git a/src/pages/home/components/ScenicImageCard/styles/index.scss b/src/pages/home/components/ScenicImageCard/styles/index.scss
deleted file mode 100644
index b7e8f1e..0000000
--- a/src/pages/home/components/ScenicImageCard/styles/index.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.scenic-image-card {
-  height: 324px;
-  background: #e2e8f0;
-}
-
-.scenic-image-card:active,
-.scenic-image-card__expand:active {
-  opacity: 0.86;
-}
-
-.scenic-image-card.is-disabled {
-  opacity: 0.55;
-}
-
-.scenic-image-card__image {
-  height: 100%;
-}
-
-.scenic-image-card__expand {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 2;
-  width: 40px;
-  height: 40px;
-  background: rgba(15, 23, 42, 0.36);
-  line-height: 40px;
-}
-
-.scenic-image-card__caption {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 72px 22px 20px;
-  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
-}
-
-.scenic-image-card__title {
-  line-height: 24px;
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
-}
-
-.scenic-image-card__subtitle {
-  margin-top: 4px;
-  line-height: 18px;
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
-}