From 255a7c0aa8c958845c3223be6ea9cb243dad3a21 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 16:20:47 +0800
Subject: [PATCH] style: clean up and standardize component styles

Replace all instances of the non-standard `font-800` font weight class with Tailwind's native `font-bold` across multiple components for consistent styling.
Convert numeric spacing shorthand values (e.g. `mt-4`, `p-16`, `gap-16`) to explicit pixel-based Tailwind classes like `mt-[4px]` for clearer, more consistent spacing.
Refactor the RecommendationListCard component to remove its external SCSS stylesheet, replacing all old class definitions with inline Tailwind utility classes and removing the unused style import statement.
---
 src/components/GoodDetail/index.vue           |  2 +-
 .../home/components/AnswerComponent/index.vue |  2 +-
 .../GeneratorPhotoComponent/index.vue         |  2 +-
 .../components/LongTextGuideCard/index.vue    | 14 ++---
 .../LongTextGuideCardPreview/index.vue        |  2 +-
 .../home/components/NoticeCard/index.vue      |  2 +-
 .../components/OpenMapComponent/index.vue     |  2 +-
 .../home/components/PoiCompareCard/index.vue  |  4 +-
 .../home/components/PoiDetailCard/index.vue   |  2 +-
 .../RecommendationListCard/index.vue          | 27 ++++------
 .../RecommendationListCard/styles/index.scss  | 53 -------------------
 .../home/components/RoutePlanCard/index.vue   |  2 +-
 .../components/SharedVisual/BadgePill.vue     |  2 +-
 .../order/components/AmtSection/index.vue     |  2 +-
 14 files changed, 30 insertions(+), 88 deletions(-)
 delete mode 100644 src/pages/home/components/RecommendationListCard/styles/index.scss

diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 40b07dd..14825c4 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -17,7 +17,7 @@
               {{ moduleItem.moduleTitle }}
             </span>
           </div>
-          <span class="flex-1 text-[12px] text-ink-600 leading-[20px] mt-4">
+          <span class="flex-1 text-[12px] text-ink-600 leading-[20px] mt-[4px]">
             {{ moduleItem.moduleContent }}
           </span>
         </div>
diff --git a/src/pages/home/components/AnswerComponent/index.vue b/src/pages/home/components/AnswerComponent/index.vue
index 99607e6..788e407 100644
--- a/src/pages/home/components/AnswerComponent/index.vue
+++ b/src/pages/home/components/AnswerComponent/index.vue
@@ -17,7 +17,7 @@
         <span class="text-[12px] font-normal font-color-600">正在生成</span>
         <ChatLoading />
       </div>
-      <div v-if="isOverflow" class="flex flex-row items-center justify-between mt-4" @click="lookDetailAction">
+      <div v-if="isOverflow" class="flex flex-row items-center justify-between mt-[4px]" @click="lookDetailAction">
         <span class="text-[12px] font-normal text-[#2D91FF] mr-[4px]">查看完整{{ tag }}</span>
         <uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
       </div>
diff --git a/src/pages/home/components/GeneratorPhotoComponent/index.vue b/src/pages/home/components/GeneratorPhotoComponent/index.vue
index 617c076..0c5704f 100644
--- a/src/pages/home/components/GeneratorPhotoComponent/index.vue
+++ b/src/pages/home/components/GeneratorPhotoComponent/index.vue
@@ -21,7 +21,7 @@
         <div class="w-full  px-12 pb-8 flex flex-row" @click="jumpClick">
           <div class="btn-bg w-full  p-4 rounded-[24px] flex flex-row">
             <div
-              class="btn-bg-sub w-full  p-16 rounded-[20px] flex flex-row items-center justify-center text-white text-center text-[18px] font-800">
+              class="btn-bg-sub w-full  p-[16px] rounded-[20px] flex flex-row items-center justify-center text-white text-center text-[18px] font-bold">
               {{ props.toolCall.componentNameParams.buttonName }}
             </div>
           </div>
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index ed912df..e1991ad 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -13,7 +13,7 @@
           {{ item.summary }}
         </div>
         <div class="long-text-guide-card__summary-footer flex items-center justify-between">
-          <text class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</text>
+          <text class="color-CBD5E1 text-[12px] font-bold">{{ item.footer }}</text>
           <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
         </div>
       </div>
@@ -39,7 +39,7 @@
           class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
           <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
             :key="`${paragraphIndex}-${segmentIndex}`">
-            <span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
+            <span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
               {{ segment.text }}
             </span>
             <span v-else>{{ segment.text }}</span>
@@ -54,7 +54,7 @@
         </div>
         <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 text-[#047857] text-[14px] font-800">
+            class="long-text-guide-card__tip text-[#047857] text-[14px] font-bold">
             {{ index + 1 }} {{ tip }}
           </div>
         </div>
@@ -63,7 +63,7 @@
           class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
           <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
             :key="`${paragraphIndex}-${segmentIndex}`">
-            <span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
+            <span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
               {{ segment.text }}
             </span>
             <span v-else>{{ segment.text }}</span>
@@ -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 text-[#94A3B8] text-[11px] font-800">
+        <div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-bold">
           {{ 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="text-[#94A3B8] text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
+              <div class="text-[#94A3B8] text-[12px] font-bold 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 text-[#94A3B8] text-[11px] font-800">
+        <div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-bold">
           {{ 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 3cf31e2..52c86cc 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/index.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/index.vue
@@ -15,7 +15,7 @@
         {{ item.summary }}
       </div>
       <div class="long-text-guide-card__summary-footer flex items-center justify-between">
-        <span class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</span>
+        <span class="color-CBD5E1 text-[12px] font-bold">{{ item.footer }}</span>
         <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
       </div>
 
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
index 16efeeb..15642e9 100644
--- a/src/pages/home/components/NoticeCard/index.vue
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -40,7 +40,7 @@
         </div>
         <div class="notice-card__divider"></div>
         <div v-for="paragraph in paragraphs" :key="paragraph.id"
-          class="notice-card__paragraph color-475569 text-[14px] font-800">
+          class="notice-card__paragraph color-475569 text-[14px] font-bold">
           <span v-for="segment in paragraph.segments" :key="segment.text"
             :class="{ 'notice-card__strong': segment.strong }">
             {{ segment.text }}
diff --git a/src/pages/home/components/OpenMapComponent/index.vue b/src/pages/home/components/OpenMapComponent/index.vue
index 73c5c5d..97dee94 100644
--- a/src/pages/home/components/OpenMapComponent/index.vue
+++ b/src/pages/home/components/OpenMapComponent/index.vue
@@ -3,7 +3,7 @@
         <!-- 占位撑开 -->
         <div class="w-full"></div>
         <div class="flex items-center justify-between p-[12px] " @click="openMap">
-            <div class="rounded-[16px] p-16 bg-[#f0f8f3]">
+            <div class="rounded-[16px] p-[16px] bg-[#f0f8f3]">
                 <div class="w-32 h-32 rounded-full bg-white flex items-center justify-center">
                     <uni-icons type="location" size="16" color="#171717" />
                 </div>
diff --git a/src/pages/home/components/PoiCompareCard/index.vue b/src/pages/home/components/PoiCompareCard/index.vue
index 399275d..70a2269 100644
--- a/src/pages/home/components/PoiCompareCard/index.vue
+++ b/src/pages/home/components/PoiCompareCard/index.vue
@@ -10,12 +10,12 @@
         </div>
       </div>
 
-      <div class="poi-compare-card__columns grid grid-cols-2 gap-16">
+      <div class="poi-compare-card__columns grid grid-cols-2 gap-[16px]">
         <div v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
           :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 text-[#94A3B8] text-[12px] font-800">
+            <div class="poi-compare-card__field-label text-[#94A3B8] text-[12px] font-bold">
               {{ field.label }}
             </div>
             <div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold"
diff --git a/src/pages/home/components/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
index 7039066..159761c 100644
--- a/src/pages/home/components/PoiDetailCard/index.vue
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -15,7 +15,7 @@
 
       <div class="poi-detail-card__tip flex items-center gap-10">
         <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">
+        <div class="poi-detail-card__tip-text text-[#047857] text-[14px] font-bold">
           {{ data.tip?.text }}
         </div>
       </div>
diff --git a/src/pages/home/components/RecommendationListCard/index.vue b/src/pages/home/components/RecommendationListCard/index.vue
index 8730bf7..cb042ae 100644
--- a/src/pages/home/components/RecommendationListCard/index.vue
+++ b/src/pages/home/components/RecommendationListCard/index.vue
@@ -1,22 +1,21 @@
 <template>
-  <div class="recommendation-list-card w-full">
-    <div class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full" scroll-x :show-scrollbar="false"
-      enhanced>
+  <div class="pt-[4px] pb-[8px] w-full">
+    <div
+      class="pb-[2px] overflow-x-auto whitespace-nowrap w-full scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       <div v-for="item in items" :key="item.id || item.title"
-        class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden"
-        :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
-        <img class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
-        <div class="recommendation-list-card__body p-16">
-          <div class="recommendation-list-card__name text-[#1e293b] text-[18px] font-bold truncate">
+        class="w-[200px] mr-3.5 align-top border border-slate-100 shadow-[0_8px_22px_rgba(15,23,42,0.06)] inline-block bg-white rounded-[20px] overflow-hidden active:opacity-86"
+        :class="{ 'opacity-55': disabled }" @click="handleSelect(item)">
+        <img class="h-[110px] block w-full" :src="item.image" />
+        <div class="p-[16px]">
+          <div class="leading-[22px] text-[#1e293b] text-[18px] font-bold truncate">
             {{ item.title }}
           </div>
-          <div
-            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>
+          <div class="leading-[16px] flex items-center gap-[4px] mt-[4px] text-[#94A3B8] text-[12px] font-bold">
+            <span class="text-[13px] leading-[13px]">⌖</span>
             <span>{{ item.distance }}</span>
           </div>
           <div
-            class="recommendation-list-card__button flex items-center justify-center mt-[12px] text-[#334155] text-[12px] font-bold"
+            class="h-9 border border-gray-200 rounded-lg bg-slate-50 flex items-center justify-center mt-[12px] text-[#334155] text-[12px] font-bold"
             @click.stop="handleSelect(item)">
             {{ getActionText(item) }}
           </div>
@@ -53,7 +52,3 @@ const handleSelect = (item) => {
   emit("select", item);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/RecommendationListCard/styles/index.scss b/src/pages/home/components/RecommendationListCard/styles/index.scss
deleted file mode 100644
index 2d176c6..0000000
--- a/src/pages/home/components/RecommendationListCard/styles/index.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.recommendation-list-card {
-  padding: 4px 0 8px;
-}
-
-.recommendation-list-card__scroll {
-  padding-bottom: 2px;
-}
-
-.recommendation-list-card__item {
-  width: 200px;
-  margin-right: 14px;
-  vertical-align: top;
-  border: 1px solid #f1f5f9;
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
-  box-sizing: border-box;
-}
-
-.recommendation-list-card__item:active {
-  opacity: 0.86;
-}
-
-.recommendation-list-card__item.is-disabled {
-  opacity: 0.55;
-}
-
-.recommendation-list-card__image {
-  height: 110px;
-}
-
-.recommendation-list-card__body {
-  box-sizing: border-box;
-}
-
-.recommendation-list-card__name {
-  line-height: 22px;
-}
-
-.recommendation-list-card__distance {
-  line-height: 16px;
-}
-
-.recommendation-list-card__pin {
-  font-size: 13px;
-  line-height: 13px;
-}
-
-.recommendation-list-card__button {
-  height: 36px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #f8fafc;
-  box-sizing: border-box;
-}
diff --git a/src/pages/home/components/RoutePlanCard/index.vue b/src/pages/home/components/RoutePlanCard/index.vue
index 086bc47..a8f827a 100644
--- a/src/pages/home/components/RoutePlanCard/index.vue
+++ b/src/pages/home/components/RoutePlanCard/index.vue
@@ -52,7 +52,7 @@
                 <div class="leading-[22px] text-[#1e293b] text-[16px] font-bold truncate">
                   {{ node.title }}
                 </div>
-                <div class="mt-[4px] leading-[18px] text-[#94A3B8] text-[12px] font-800 truncate">
+                <div class="mt-[4px] leading-[18px] text-[#94A3B8] text-[12px] font-bold truncate">
                   {{ node.description }}
                 </div>
                 <div v-if="node.tag"
diff --git a/src/pages/home/components/SharedVisual/BadgePill.vue b/src/pages/home/components/SharedVisual/BadgePill.vue
index 1419a6b..2be7b07 100644
--- a/src/pages/home/components/SharedVisual/BadgePill.vue
+++ b/src/pages/home/components/SharedVisual/BadgePill.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="visual-badge flex items-center justify-center rounded-[5px] font-size-10 font-800 whitespace-nowrap"
+  <div class="visual-badge flex items-center justify-center rounded-[5px] font-size-10 font-bold whitespace-nowrap"
     :class="toneClass">
     <slot>{{ label }}</slot>
   </div>
diff --git a/src/pages/order/order/components/AmtSection/index.vue b/src/pages/order/order/components/AmtSection/index.vue
index 1b1b347..a57dc1d 100644
--- a/src/pages/order/order/components/AmtSection/index.vue
+++ b/src/pages/order/order/components/AmtSection/index.vue
@@ -10,7 +10,7 @@
         </span>
       </div>
     </div>
-    <div v-if="orderData.orderStatus === '0'" class="text-[11px] text-ink-400 mt-4">
+    <div v-if="orderData.orderStatus === '0'" class="text-[11px] text-ink-400 mt-[4px]">
       超时后，订单将自动取消
     </div>
     <div v-if="['1', '2'].includes(orderData.orderStatus)"