From 86f8e9adecb19dfadf6fc6c3901d8048e0d89fb5 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 19:51:17 +0800
Subject: [PATCH] refactor(home-components): migrate styles to tailwind and
 clean up legacy code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace custom CSS utility classes with Tailwind arbitrary value classes (e.g. color-CBD5E1 → text-[#cbd5e1]). Remove unused standalone SCSS style files for three home components. Swap legacy uni-icons to van-icon for arrow icons in LongTextGuideCard, and fix event emitter usage in DiscoveryCradContentList to use the imported events utility.
---
 .../DiscoveryCradContentList/index.vue        |  22 +--
 .../styles/index.scss                         |  33 ----
 .../GeneratorPhotoComponent/index.vue         |  25 ++-
 .../GeneratorPhotoComponent/styles/index.scss |  61 ------
 .../components/LongTextGuideCard/index.vue    |  87 ++++----
 .../LongTextGuideCard/styles/index.scss       | 185 ------------------
 .../LongTextGuideCardPreview/index.vue        |   2 +-
 .../home/components/PoiDetailCard/index.vue   |   2 +-
 .../components/SharedVisual/ActionRow.vue     |   2 +-
 .../components/SharedVisual/BadgePill.vue     |   2 +-
 10 files changed, 69 insertions(+), 352 deletions(-)
 delete mode 100644 src/pages/home/components/DiscoveryCradContentList/styles/index.scss
 delete mode 100644 src/pages/home/components/GeneratorPhotoComponent/styles/index.scss
 delete mode 100644 src/pages/home/components/LongTextGuideCard/styles/index.scss

diff --git a/src/pages/home/components/DiscoveryCradContentList/index.vue b/src/pages/home/components/DiscoveryCradContentList/index.vue
index fdc20f8..0d1ef8d 100644
--- a/src/pages/home/components/DiscoveryCradContentList/index.vue
+++ b/src/pages/home/components/DiscoveryCradContentList/index.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="container">
+  <div>
     <ModuleTitle :title="recommendTheme.themeName" />
-    <div class="container-scroll">
+    <div class="flex flex-row overflow-x-auto mt-1">
       <div v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
-        <div class="mk-card-item" @click="sendReply(item)">
-          <img class="card-img" :src="item.coverPhoto" mode="widthFix"></img>
-          <span class="card-text">{{ item.topic }}</span>
+        <div class="flex flex-col items-start w-[188px] h-[154px] bg-white rounded-[10px] mr-2 relative"
+          @click="sendReply(item)">
+          <img class="w-[188px] h-[112px]" :src="item.coverPhoto">
+          <span class="p-3 text-center font-medium text-xs text-[#333]">{{ item.topic }}</span>
         </div>
       </div>
     </div>
@@ -13,8 +14,9 @@
 </template>
 
 <script setup>
-import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
 import { defineProps } from "vue";
+import { emitter } from '@/utils/events'
+import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 
 const props = defineProps({
@@ -27,13 +29,9 @@ const props = defineProps({
 const sendReply = (item) => {
   if (item.userInputContentType && item.userInputContentType === '1') {
     const commonItem = { type: item.userInputContent, title: item.topic }
-    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
+    emitter.emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
     return;
   }
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
+  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
 };
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/DiscoveryCradContentList/styles/index.scss b/src/pages/home/components/DiscoveryCradContentList/styles/index.scss
deleted file mode 100644
index 411e5d2..0000000
--- a/src/pages/home/components/DiscoveryCradContentList/styles/index.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.container {
-  .container-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    margin-top: 4px;
-
-    .mk-card-item {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      width: 188px;
-      height: 154px;
-      background-color: #fff;
-      border-radius: 10px;
-      margin-right: 8px;
-      position: relative;
-
-      .card-img {
-        width: 188px;
-        height: 112px;
-      }
-
-      .card-text {
-        padding: 12px;
-        text-align: center;
-        font-weight: 500;
-        font-size: 12px;
-        color: #333;
-      }
-    }
-  }
-}
diff --git a/src/pages/home/components/GeneratorPhotoComponent/index.vue b/src/pages/home/components/GeneratorPhotoComponent/index.vue
index 0c5704f..4e5b63c 100644
--- a/src/pages/home/components/GeneratorPhotoComponent/index.vue
+++ b/src/pages/home/components/GeneratorPhotoComponent/index.vue
@@ -1,27 +1,30 @@
 <template>
-  <div class="container w-full  border-ff overflow-hidden rounded-[24px] flex flex-col">
+  <div
+    class="w-full border border-white overflow-hidden rounded-[24px] flex flex-col bg-white/20 [box-shadow:0_9px_34px_0_rgba(27,9,91,0.07)]">
     <!-- 占位撑开 -->
     <div class="w-full"></div>
-    <div class="content flex flex-col m-4  rounded-[24px]">
+    <div
+      class="relative bg-gradient-to-b from-[#e8fff1] to-[#0ccd58] rounded-3xl border border-white flex flex-col m-4  rounded-[24px]">
       <div class="flex flex-col p-6  items-center justify-center">
         <img class="w-full rounded-[20px]" :src="props.toolCall.componentNameParams.background" mode="widthFix" />
 
         <!-- 左上角标签 -->
-        <div class="tag">
-          <div class="dot"></div>
-          <span class="tag-text">{{ props.toolCall.componentNameParams.superscript }}</span>
+        <div
+          class="absolute top-[20px] left-[20px] flex items-center px-[8px] py-[4px] rounded-[999rpx] [backdrop-filter:blur(6rpx)] bg-white/80 [box-shadow:inset_0_1px_2px_0_rgba(255,255,255,0.46)]">
+          <div class="inline-block w-[15px] h-[15px] rounded-full bg-[#0ccd58] mr-2"></div>
+          <span class="text-xs text-[#0ccd58] font-semibold">{{ props.toolCall.componentNameParams.superscript }}</span>
         </div>
 
-        <img class="g_title mt-20" :src="props.toolCall.componentNameParams.title" />
+        <img class="w-[197px] h-[42px] mt-20" :src="props.toolCall.componentNameParams.title" />
 
-        <span class="text-[14px] font-normal text-white my-12 text-center">
+        <span class="text-[14px] font-normal text-white my-[12px] text-center">
           {{ props.toolCall.componentNameParams.description }}
         </span>
 
         <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="bg-white/[0.32] border-[0.66px] border-white/[0.32] w-full  p-4 rounded-[24px] flex flex-row">
             <div
-              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">
+              class="w-full p-[16px] rounded-[20px] flex flex-row items-center justify-center text-white text-center text-[18px] font-bold bg-[#0ccd58] [box-shadow:inset_0_0_41px_0_#f0f8f3,inset_0_0_15px_0_#e8fff1]">
               {{ props.toolCall.componentNameParams.buttonName }}
             </div>
           </div>
@@ -68,7 +71,3 @@ const jumpClick = () => {
 };
 
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
\ No newline at end of file
diff --git a/src/pages/home/components/GeneratorPhotoComponent/styles/index.scss b/src/pages/home/components/GeneratorPhotoComponent/styles/index.scss
deleted file mode 100644
index 19c1d57..0000000
--- a/src/pages/home/components/GeneratorPhotoComponent/styles/index.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.container {
-  background: rgba(255, 255, 255, 0.2);
-  box-shadow: 0px 9px 34px 0px rgba(27, 9, 91, 0.07);
-}
-
-.content {
-  background: linear-gradient(180deg, #e8fff1 0%, #0ccd58 100%);
-  border-radius: 24px 24px 24px 24px;
-  border: 1px solid #ffffff;
-  position: relative;
-}
-
-.g_title {
-  width: 197px;
-  height: 42px;
-}
-
-.btn-bg {
-  background: rgba(255, 255, 255, 0.32);
-  border: 0.66px solid rgba(255, 255, 255, 0.32);
-}
-
-.btn-bg-sub {
-  background: #0ccd58;
-  box-shadow:
-    inset 0px 0px 41px 0px #f0f8f3,
-    inset 0px 0px 15px 0px #e8fff1;
-}
-
-/* 左上角标签容器 */
-.tag {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-
-  display: flex;
-  align-items: center;
-
-  padding: 4px 8px;
-  border-radius: 999rpx;
-
-  backdrop-filter: blur(6rpx);
-  background: rgba(255, 255, 255, 0.79);
-  box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.46);
-}
-
-/* 小绿点 */
-.dot {
-  width: 15px;
-  height: 15px;
-  border-radius: 50%;
-  background: #0ccd58;
-  margin-right: 8px;
-}
-
-/* 文字 */
-.tag-text {
-  font-size: 12px;
-  color: #0ccd58;
-  font-weight: 600;
-}
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index 73fb16c..d2b0394 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -1,69 +1,73 @@
 <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-[24px] "
-        :class="{ 'is-disabled': disabled }" @click="openDetail(item)">
-        <div class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
+      <div v-for="item in cards" :key="item.id"
+        class="min-h-[178px] mb-4 pt-[28px] px-[26px] pb-[22px] border border-slate-900/5 [box-shadow:0_12px_28px_rgba(15,23,42,0.04)] [transition:transform_0.15s_ease,opacity_0.15s_ease] bg-white rounded-[24px] active:scale-985"
+        :class="{ 'opacity-55': disabled }" @click="openDetail(item)">
+        <div
+          class="inline-flex items-center justify-center min-h-[26px] px-[10px] border border-transparent rounded-full leading-[18px] text-[12px] font-bold text-emerald-600 bg-emerald-50 border-emerald-200 border">
           {{ item.badge }}
         </div>
-        <div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
+        <div class="mt-[18px] leading-[24px] text-[#1e293b] text-[18px] font-bold">
           {{ item.title }}
         </div>
-        <div class="long-text-guide-card__summary-text text-[#94A3B8] text-[14px] font-medium ellipsis-2">
+        <div class="mt-[10px] leading-[22px] text-[#94A3B8] text-[14px] font-medium ellipsis-2">
           {{ item.summary }}
         </div>
-        <div class="long-text-guide-card__summary-footer flex items-center justify-between">
-          <text class="color-CBD5E1 text-[12px] font-bold">{{ item.footer }}</text>
-          <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+        <div class="mt-[24px] flex items-center justify-between">
+          <text class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</text>
+          <van-icon name="arrow-right" size="16" color="#CBD5E1"></van-icon>
         </div>
       </div>
     </div>
 
-    <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-b border-ink-200">
-        <div class="long-text-guide-card__back flex items-center justify-center rounded-full font-700"
+    <div v-else class="border border-slate-900/5 bg-white rounded-[24px] overflow-hidden">
+      <div class="min-h-[70px] py-0 pr-[18px] pl-5 flex items-center border-b border-ink-200">
+        <div
+          class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-700"
           @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="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold truncate">
+        <div class="flex-1 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
           {{ activeItem.title }}
         </div>
-        <div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold"
-          :class="`is-${activeItem.badgeTone}`">
+        <div
+          class="inline-flex items-center justify-center min-h-[26px] px-[10px] border border-transparent rounded-full leading-[18px] ml-[12px] text-[12px] font-bold text-emerald-600 bg-emerald-50 border-emerald-200 border">
           {{ activeItem.badge }}
         </div>
       </div>
 
-      <div class="long-text-guide-card__rich-body">
+      <div class="pt-[24px] px-[22px] pb-[26px]">
         <div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
-          class="long-text-guide-card__paragraph text-[#475569] text-[15px] font-medium">
+          class="mb-[20px] leading-[30px] text-[#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-bold">
+            <span v-if="segment.highlight"
+              class="text-emerald-800 bg-emerald-50 px-[6px] py-[1px] rounded text-xs font-bold">
               {{ segment.text }}
             </span>
             <span v-else>{{ segment.text }}</span>
           </template>
         </div>
 
-        <image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
-          :src="activeItem.image" mode="aspectFill" />
+        <img v-if="activeItem.image" class="h-[198px] mb-[24px] w-full rounded-14 block" :src="activeItem.image" />
 
-        <div class="long-text-guide-card__section-title text-[#1e293b] text-[16px] font-bold">
+        <div class="mb-[12px] leading-[22px] text-[#1e293b] text-[16px] font-bold">
           {{ activeItem.sectionTitle }}
         </div>
-        <div class="long-text-guide-card__tip-block bg-[#ecfdf5]">
+        <div class="mb-[22px] px-[18px] py-3 border-l-3 border-l-emerald-400 rounded-xl bg-[#ecfdf5]">
           <div v-for="(tip, index) in activeItem.tips || []" :key="tip"
-            class="long-text-guide-card__tip text-[#047857] text-[14px] font-bold">
+            class="leading-[24px] text-[#047857] text-[14px] font-bold">
             {{ index + 1 }} {{ tip }}
           </div>
         </div>
 
         <div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
-          class="long-text-guide-card__paragraph text-[#475569] text-[15px] font-medium">
+          class="mb-[20px] leading-[30px] text-[#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-bold">
+            <span v-if="segment.highlight"
+              class="text-emerald-800 bg-emerald-50 px-[6px] py-[1px] rounded text-xs font-bold">
               {{ segment.text }}
             </span>
             <span v-else>{{ segment.text }}</span>
@@ -71,24 +75,24 @@
         </div>
       </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-bold">
+      <div v-if="activeItem.action?.type === 'map'" class="border-t border-slate-100 pt-4 px-5 pb-5">
+        <div class="mb-[10px] tracking-[0.6px] text-[#94A3B8] text-[11px] font-bold">
           {{ activeItem.action.label }}
         </div>
-        <div class="long-text-guide-card__map-card rounded-[16px] overflow-hidden">
-          <div class="long-text-guide-card__map-image-wrap relative">
-            <img class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
-              mode="aspectFill" />
-            <div class="long-text-guide-card__map-tag text-white font-size-10 font-bold">
+        <div class="border border-slate-100 rounded-[16px] overflow-hidden">
+          <div class="relative">
+            <img class="h-[138px] w-full block" :src="activeItem.action.image" />
+            <div
+              class="absolute left-[14px] bottom-[12px] px-[8px] py-[4px] rounded-full bg-[#0f172a]/[0.72] text-white text-[10px] font-bold">
               {{ activeItem.action.tag }}
             </div>
           </div>
-          <div class="long-text-guide-card__map-bar flex items-center bg-white">
+          <div class="py-[14px] px-[16px] 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-bold mt-2">{{ activeItem.action.subtitle }}</div>
             </div>
-            <div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-bold"
+            <div class="py-[12px] px-[18px] rounded-[14px] text-white bg-0F172A text-[14px] font-bold"
               @click="handleAction(activeItem)">
               {{ activeItem.action.buttonText }}
             </div>
@@ -96,15 +100,14 @@
         </div>
       </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-bold">
+      <div v-else-if="activeItem.action?.type === 'image'" class="border-t border-slate-100 pt-4 px-5 pb-5">
+        <div class="mb-[10px] tracking-[0.6px] text-[#94A3B8] text-[11px] font-bold">
           {{ activeItem.action.label }}
         </div>
-        <div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
-          <img class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
-            mode="aspectFill" />
+        <div class="min-h-[178px] overflow-hidden rounded-2xl bg-slate-50 relative" @click="handleAction(activeItem)">
+          <img class="h-[178px] w-full block" :src="activeItem.action.image" />
           <div
-            class="long-text-guide-card__expand flex items-center justify-center rounded-full text-white text-[18px] font-bold">
+            class="absolute right-[14px] bottom-[14px] w-[38px] h-[38px] bg-[#0f172a]/[0.36] flex items-center justify-center rounded-full text-white text-[18px] font-bold">
             ↗
           </div>
         </div>
@@ -177,7 +180,3 @@ const getSegments = (paragraph) => {
   return segments.length ? segments : [{ text, highlight: false }];
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/LongTextGuideCard/styles/index.scss b/src/pages/home/components/LongTextGuideCard/styles/index.scss
deleted file mode 100644
index 4977298..0000000
--- a/src/pages/home/components/LongTextGuideCard/styles/index.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-.long-text-guide-card__summary-card {
-  min-height: 178px;
-  margin-bottom: 16px;
-  padding: 28px 26px 22px;
-  border: 1px solid rgba(15, 23, 42, 0.04);
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
-  transition: transform 0.15s ease, opacity 0.15s ease;
-}
-
-.long-text-guide-card__summary-card:active {
-  transform: scale(0.985);
-}
-
-.long-text-guide-card__summary-card.is-disabled {
-  opacity: 0.55;
-}
-
-.long-text-guide-card__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 26px;
-  padding: 0 10px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  line-height: 18px;
-}
-
-.long-text-guide-card__badge.is-amber {
-  color: #d97706;
-  background: #fffbeb;
-  border-color: #fde68a;
-}
-
-.long-text-guide-card__badge.is-green {
-  color: #059669;
-  background: #ecfdf5;
-  border-color: #a7f3d0;
-}
-
-.long-text-guide-card__badge.is-blue {
-  color: #2563eb;
-  background: #eff6ff;
-  border-color: #bfdbfe;
-}
-
-.long-text-guide-card__summary-title {
-  margin-top: 18px;
-  line-height: 24px;
-}
-
-.long-text-guide-card__summary-text {
-  margin-top: 10px;
-  line-height: 22px;
-}
-
-.long-text-guide-card__summary-footer {
-  margin-top: 24px;
-}
-
-.long-text-guide-card__arrow {
-  font-size: 26px;
-  line-height: 1;
-}
-
-.long-text-guide-card__detail-card {
-  border: 1px solid rgba(15, 23, 42, 0.04);
-}
-
-.long-text-guide-card__detail-header {
-  min-height: 70px;
-  padding: 0 18px 0 20px;
-}
-
-.long-text-guide-card__back {
-  width: 34px;
-  height: 34px;
-  margin-right: 12px;
-  color: #64748b;
-  background: #f2f4f6;
-  font-size: 24px;
-  line-height: 1;
-}
-
-.long-text-guide-card__detail-title {
-  flex: 1;
-  min-width: 0;
-}
-
-.long-text-guide-card__detail-badge {
-  margin-left: 12px;
-}
-
-.long-text-guide-card__rich-body {
-  padding: 24px 22px 26px;
-}
-
-.long-text-guide-card__paragraph {
-  margin-bottom: 20px;
-  line-height: 30px;
-}
-
-.long-text-guide-card__highlight {
-  color: #065f46;
-  background: #ecfdf5;
-  padding: 1px 6px;
-  border-radius: 4px;
-}
-
-.long-text-guide-card__main-image {
-  height: 198px;
-  margin-bottom: 24px;
-}
-
-.long-text-guide-card__section-title {
-  margin-bottom: 12px;
-  line-height: 22px;
-}
-
-.long-text-guide-card__tip-block {
-  margin-bottom: 22px;
-  padding: 12px 18px;
-  border-left: 3px solid #34d399;
-  border-radius: 12px;
-}
-
-.long-text-guide-card__tip {
-  line-height: 24px;
-}
-
-.long-text-guide-card__action-zone {
-  border-top: 1px solid #f1f5f9;
-  padding: 16px 20px 20px;
-}
-
-.long-text-guide-card__action-label {
-  margin-bottom: 10px;
-  letter-spacing: 0.6px;
-}
-
-.long-text-guide-card__map-card {
-  border: 1px solid #f1f5f9;
-}
-
-.long-text-guide-card__map-image {
-  height: 138px;
-}
-
-.long-text-guide-card__map-tag {
-  position: absolute;
-  left: 14px;
-  bottom: 12px;
-  padding: 4px 8px;
-  border-radius: 999px;
-  background: rgba(15, 23, 42, 0.72);
-}
-
-.long-text-guide-card__map-bar {
-  padding: 14px 16px;
-}
-
-.long-text-guide-card__nav-btn {
-  padding: 12px 18px;
-  border-radius: 14px;
-}
-
-.long-text-guide-card__photo-card {
-  min-height: 178px;
-  overflow: hidden;
-  border-radius: 16px;
-  background: #f8fafc;
-}
-
-.long-text-guide-card__photo-image {
-  height: 178px;
-}
-
-.long-text-guide-card__expand {
-  position: absolute;
-  right: 14px;
-  bottom: 14px;
-  width: 38px;
-  height: 38px;
-  background: rgba(15, 23, 42, 0.36);
-}
diff --git a/src/pages/home/components/LongTextGuideCardPreview/index.vue b/src/pages/home/components/LongTextGuideCardPreview/index.vue
index 52c86cc..5082573 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-bold">{{ item.footer }}</span>
+        <span class="text-[#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/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
index 159761c..053c8d1 100644
--- a/src/pages/home/components/PoiDetailCard/index.vue
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -2,7 +2,7 @@
   <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">
+      <div class="poi-detail-card__badge flex items-center gap-4 text-[10px] font-bold">
         <span class="poi-detail-card__badge-icon">⌖</span>
         <span>{{ data.badge?.text }}</span>
       </div>
diff --git a/src/pages/home/components/SharedVisual/ActionRow.vue b/src/pages/home/components/SharedVisual/ActionRow.vue
index ba6f84f..03cde5b 100644
--- a/src/pages/home/components/SharedVisual/ActionRow.vue
+++ b/src/pages/home/components/SharedVisual/ActionRow.vue
@@ -11,7 +11,7 @@
         {{ subtitle }}
       </div>
     </div>
-    <div class="visual-action-row__arrow color-CBD5E1 font-700">›</div>
+    <div class="visual-action-row__arrow text-[#cbd5e1] font-700">›</div>
   </div>
 </template>
 
diff --git a/src/pages/home/components/SharedVisual/BadgePill.vue b/src/pages/home/components/SharedVisual/BadgePill.vue
index 2be7b07..3bfbcf5 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-bold whitespace-nowrap"
+  <div class="visual-badge flex items-center justify-center rounded-[5px] text-[10px] font-bold whitespace-nowrap"
     :class="toneClass">
     <slot>{{ label }}</slot>
   </div>