diff --git a/src/pages/home/components/ActivityListComponent/index.vue b/src/pages/home/components/ActivityListComponent/index.vue
index 70d41ad..dfdbff7 100644
--- a/src/pages/home/components/ActivityListComponent/index.vue
+++ b/src/pages/home/components/ActivityListComponent/index.vue
@@ -1,11 +1,15 @@
 <template>
-  <div class="container">
-    <swiper class="swiper" circular :indicator-dots="activityList.length > 1" indicator-color="#FFFFFF"
-      indicator-active-color="#00A6FF" :autoplay="autoplay" :interval="interval" :duration="duration">
+  <div class="w-full mb-[6px]">
+    <swiper class="w-full h-[120px] rounded-[8px]" circular :indicator-dots="activityList.length > 1"
+      indicator-color="#FFFFFF" indicator-active-color="#00A6FF" :autoplay="autoplay" :interval="interval"
+      :duration="duration">
       <swiper-item v-for="item in activityList" :key="item.id">
-        <div class="swiper-item" @click="handleClick()">
-          <img class="swiper-img" :src="item.activityCover">
-          <div class="corner-btn">{{ commandModel.title }}</div>
+        <div class="relative block h-[120px] leading-[120px] text-center" @click="handleClick()">
+          <img class="w-full h-full rounded-[8px] block" :src="item.activityCover">
+          <div
+            class="absolute right-3 bottom-3 bg-[#ffeb00] text-[#333] text-[14px] font-medium py-1 px-3 rounded-[20px] leading-[1.5]">
+            {{ commandModel.title }}
+          </div>
         </div>
       </swiper-item>
     </swiper>
@@ -13,7 +17,8 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, defineProps } from "vue";
+import { emitter } from '@/utils/events'
 import { SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
 
 const commandModel = ref({
@@ -34,10 +39,6 @@ const props = defineProps({
 });
 
 const handleClick = () => {
-  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commandModel.value);
+  emitter.emit(SEND_MESSAGE_COMMAND_TYPE, commandModel.value);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ActivityListComponent/styles/index.scss b/src/pages/home/components/ActivityListComponent/styles/index.scss
deleted file mode 100644
index 2178be5..0000000
--- a/src/pages/home/components/ActivityListComponent/styles/index.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.container {
-  margin-bottom: 6px;
-
-  .uni-margin-wrap {
-    width: 100%;
-  }
-  .swiper {
-    height: 120px;
-    border-radius: 8px;
-  }
-  .swiper-item {
-    position: relative;
-    display: block;
-    height: 120px;
-    line-height: 120px;
-    text-align: center;
-
-    .swiper-img {
-      width: 100%;
-      height: 100%;
-      border-radius: 8px;
-      display: block;
-    }
-
-    .corner-btn {
-      position: absolute;
-      right: 12px;
-      bottom: 12px;
-      background-color: #ffeb00;
-      color: #333;
-      font-size: 14px;
-      font-weight: 500;
-      padding: 4px 12px;
-      border-radius: 20px;
-      line-height: 1.5;
-    }
-  }
-}
diff --git a/src/pages/home/components/AttachListComponent/index.vue b/src/pages/home/components/AttachListComponent/index.vue
index 8464e2d..6a6c806 100644
--- a/src/pages/home/components/AttachListComponent/index.vue
+++ b/src/pages/home/components/AttachListComponent/index.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script setup>
-import { ref, nextTick } from "vue";
-import { onMounted } from "vue";
+import { ref, nextTick, onMounted } from "vue";
+import { emitter } from '@/utils/events'
 import {
   SCROLL_TO_BOTTOM,
   SEND_MESSAGE_CONTENT_TEXT,
@@ -26,14 +26,14 @@ const props = defineProps({
 const tags = ref([]);
 
 const handleClick = (item) => {
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 
 onMounted(() => {
   tags.value = props.question.split(/[&|;]/).filter((tag) => tag.trim() !== "");
   nextTick(() => {
     setTimeout(() => {
-      uni.$emit(SCROLL_TO_BOTTOM, true);
+      emitter.emit(SCROLL_TO_BOTTOM, true);
     }, 300);
   });
 });
diff --git a/src/pages/home/components/ChatMoreTips/index.vue b/src/pages/home/components/ChatMoreTips/index.vue
index 02f64bd..16b680e 100644
--- a/src/pages/home/components/ChatMoreTips/index.vue
+++ b/src/pages/home/components/ChatMoreTips/index.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="more-tips bg-white ">
+  <div class="bg-white shadow-[0_-1px_10px_rgba(0,0,0,0.03)] rounded-b-[20px] py-3 pl-3 pr-0">
     <div class="font-size-0 whitespace-nowrap scroll-x">
-      <div class="more-tips-item  inline-block mr-[8px]" v-for="(item, index) in guideWords" :key="index">
-        <span :class="['font-medium text-[12px] text-center', `color-${index}`]" @click="sendReply(item)">
+      <div v-for="(item, index) in guideWords" :key="index"
+        class="inline-block mr-2 last:mr-3 bg-[#f7f7f7] rounded-[5px] box-border py-[6px] px-2">
+        <span :class="['font-medium text-[12px] text-center', getColorClass(index)]" @click="sendReply(item)">
           {{ item }}
         </span>
       </div>
@@ -13,6 +14,7 @@
 <script setup>
 import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";
 import { defineProps } from "vue";
+import { emitter } from '@/utils/events'
 
 defineProps({
   guideWords: {
@@ -21,11 +23,20 @@ defineProps({
   },
 });
 
+const getColorClass = (index) => {
+  const colors = [
+    "text-[#47c2ff]",
+    "text-[#fb3748]",
+    "text-[#1fc16b]",
+    "text-[#f6b51e]",
+    "text-[#7d52f4]",
+    "text-[#fb4ba3]",
+    "text-[#22d3bb]",
+  ];
+  return colors[index] || "text-[#475569]";
+};
+
 const sendReply = (item) => {
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ChatMoreTips/styles/index.scss b/src/pages/home/components/ChatMoreTips/styles/index.scss
deleted file mode 100644
index bb69df9..0000000
--- a/src/pages/home/components/ChatMoreTips/styles/index.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.more-tips {
-  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.03);
-  border-radius: 0px 0px 20px 20px;
-  padding: 12px 0 12px 12px;
-
-  .more-tips-item {
-    background: #f7f7f7;
-    border-radius: 5px;
-    box-sizing: border-box;
-    padding: 6px 8px;
-
-    &:last-child {
-      margin-right: 12px;
-    }
-  }
-}
-
-.color-0 {
-  color: #47c2ff;
-}
-
-.color-1 {
-  color: #fb3748;
-}
-
-.color-2 {
-  color: #1fc16b;
-}
-
-.color-3 {
-  color: #f6b51e;
-}
-
-.color-4 {
-  color: #7d52f4;
-}
-
-.color-5 {
-  color: #fb4ba3;
-}
-
-.color-6 {
-  color: #22d3bb;
-}
diff --git a/src/pages/home/components/ChatQuickAccess/index.vue b/src/pages/home/components/ChatQuickAccess/index.vue
index 0d75558..3965fa5 100644
--- a/src/pages/home/components/ChatQuickAccess/index.vue
+++ b/src/pages/home/components/ChatQuickAccess/index.vue
@@ -15,6 +15,7 @@
 
 <script setup>
 import { ref } from "vue";
+import { emitter } from '@/utils/events'
 import { Command } from "@/constants/ChatModel";
 import { SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
 import { checkToken } from "@/hooks/useGoLogin";
@@ -45,7 +46,7 @@ const itemList = ref([
 const sendReply = (item) => {
   // 更多服务
   if (item.type === Command.more) {
-    uni.$emit("SHOW_MORE_POPUP");
+    emitter.emit("SHOW_MORE_POPUP");
     return;
   }
 
@@ -65,6 +66,6 @@ const sendReply = (item) => {
     return;
   }
 
-  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
+  emitter.emit(SEND_MESSAGE_COMMAND_TYPE, item);
 };
 </script>
diff --git a/src/pages/home/components/ChatTopNavBar/index.vue b/src/pages/home/components/ChatTopNavBar/index.vue
index 2056547..ba1814a 100644
--- a/src/pages/home/components/ChatTopNavBar/index.vue
+++ b/src/pages/home/components/ChatTopNavBar/index.vue
@@ -7,13 +7,13 @@
     <!-- 隐藏 -->
     <div v-if="false" class="flex-1 h-full flex items-center justify-center">
       <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏  -->
-      <SpriteAnimator v-show="show" class="image-animated" :src="spriteStyle.ipSmallImage"
+      <SpriteAnimator v-show="show" class="animate-[logo-scale_0.3s_ease-in-out]" :src="spriteStyle.ipSmallImage"
         :frameWidth="spriteStyle.frameWidth" :frameHeight="spriteStyle.frameHeight"
         :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns" :displayWidth="spriteStyle.displayWidth"
         :fps="16" />
       <span v-show="show" :class="[
         'text-[14px] text-500 text-[#171717] ml-[10px]',
-        { 'text-animated': show },
+        { 'animate-[text-fade-in_0.3s_ease-in-out]': show },
       ]">
         nianxx
       </span>
@@ -61,6 +61,26 @@ const showDrawer = () => emit("showDrawer");
 defineExpose({ show });
 </script>
 
-<style lang="scss" scoped>
-@import "./styles/index.scss";
+<style scoped>
+@keyframes logo-scale {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes text-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 </style>
diff --git a/src/pages/home/components/ChatTopNavBar/styles/index.scss b/src/pages/home/components/ChatTopNavBar/styles/index.scss
deleted file mode 100644
index 28c29a9..0000000
--- a/src/pages/home/components/ChatTopNavBar/styles/index.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// 图片从0%到100%动画
-.image-animated {
-  animation: logo-scale 0.3s ease-in-out;
-}
-
-@keyframes logo-scale {
-  0% {
-    transform: scale(0);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-// 文字从0%到100%动画，从左到右
-.text-animated {
-  animation: text-fade-in 0.3s ease-in-out;
-}
-
-@keyframes text-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
\ No newline at end of file
diff --git a/src/pages/home/components/Discovery/index.vue b/src/pages/home/components/Discovery/index.vue
index ccc1590..54752bb 100644
--- a/src/pages/home/components/Discovery/index.vue
+++ b/src/pages/home/components/Discovery/index.vue
@@ -17,6 +17,7 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { emitter } from '@/utils/events'
 import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE, SWITCH_TO_COMPANION_TAB } from "@/constants/constant";
 // import { navigateTo } from "@/router";
 import { getAccessToken } from "@/constants/token";
@@ -143,7 +144,7 @@ const handleClick = async (item) => {
   }
   /// 提示词
   else if (item.jumpType === JumpType.prompt) {
-    uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.jumpContent);
+    emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item.jumpContent);
   }
   /// 链接
   else if (item.jumpType === JumpType.link) {
@@ -154,7 +155,7 @@ const handleClick = async (item) => {
   }
   /// 组件指令
   else if (item.jumpType === JumpType.command) {
-    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, { type: item.jumpContent, title: item.jumpDesc });
+    emitter.emit(SEND_MESSAGE_COMMAND_TYPE, { type: item.jumpContent, title: item.jumpDesc });
   }
 }
 
diff --git a/src/pages/home/components/DiscoveryCardComponent/index.vue b/src/pages/home/components/DiscoveryCardComponent/index.vue
index 8168026..afadee4 100644
--- a/src/pages/home/components/DiscoveryCardComponent/index.vue
+++ b/src/pages/home/components/DiscoveryCardComponent/index.vue
@@ -8,6 +8,7 @@
 
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
+import { emitter } from '@/utils/events'
 import { SCROLL_TO_BOTTOM } from "@/constants/constant";
 import { discoveryCradComponent } from "@/api/home";
 import RecommendPostsList from "../RecommendPostsList/index.vue";
@@ -21,7 +22,7 @@ const loadDiscoveryCradComponent = async () => {
 
     nextTick(() => {
       setTimeout(() => {
-        uni.$emit(SCROLL_TO_BOTTOM, true);
+        emitter.emit(SCROLL_TO_BOTTOM, true);
       }, 300);
     });
   }
diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
index b5f3635..536036e 100644
--- a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
+++ b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
@@ -1,32 +1,38 @@
 <template>
-  <div class="page">
+  <div class="p-[12px] bg-[#f6f6f6] min-h-screen">
     <!-- 顶部用户信息 -->
-    <div class="user-card">
-      <div class="row avatar-row">
-        <span class="label">头像 </span>
+    <div class="bg-white rounded-[12rpx] pl-[24rpx] mb-[20rpx]">
+      <div
+        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
+        <span class="text-[14px] text-[#333]">头像 </span>
         <!-- <image class="avatar" :src="userInfo.avatar" mode="aspectFill" /> -->
         <uni-icons type="contact" size="40" color="#ccc"></uni-icons>
       </div>
-      <div class="row">
-        <span class="label">昵称</span>
-        <span class="value">{{ userInfo.nickname }}</span>
+      <div
+        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
+        <span class="text-[14px] text-[#333]">昵称</span>
+        <span class="text-[14px] text-[#666]">{{ userInfo.nickname }}</span>
       </div>
-      <div class="row">
-        <span class="label">手机号</span>
-        <span class="value">{{ userInfo.phone }}</span>
+      <div
+        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0">
+        <span class="text-[14px] text-[#333]">手机号</span>
+        <span class="text-[14px] text-[#666]">{{ userInfo.phone }}</span>
       </div>
     </div>
 
     <!-- 中间功能入口（循环渲染） -->
-    <div class="menu-card">
-      <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
-        <span class="label">{{ item.label }}</span>
+    <div class="bg-white rounded-[12rpx] pl-[24rpx] mb-[20rpx]">
+      <div v-for="(item, index) in menuList" :key="index"
+        class="flex justify-between items-center py-[28rpx] pr-[24rpx] pl-0 border-b border-[#f0f0f0] last:border-b-0"
+        @click="handleMenuClick(item)">
+        <span class="text-[14px] text-[#333]">{{ item.label }}</span>
         <uni-icons type="right" size="14" color="#ccc"></uni-icons>
       </div>
     </div>
 
     <!-- 底部退出按钮 -->
-    <span class="logout-btn" @click="handleLogout">退出登录</span>
+    <span class="flex items-center justify-center h-[42px] mt-[40px] bg-white text-[#333] rounded-[8rpx] border-none"
+      @click="handleLogout">退出登录</span>
   </div>
 </template>
 
@@ -92,7 +98,3 @@ const handleLogout = () => { };
 
 defineExpose({ getLoginUserPhoneInfo });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/styles/index.scss b/src/pages/home/components/DrawerSection/components/MineSetting/styles/index.scss
deleted file mode 100644
index 657783d..0000000
--- a/src/pages/home/components/DrawerSection/components/MineSetting/styles/index.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.page {
-  padding: 24rpx;
-  background-color: #f6f6f6;
-  min-height: 100vh;
-}
-
-.user-card,
-.menu-card {
-  background-color: #fff;
-  border-radius: 12rpx;
-  padding-left: 24rpx;
-  margin-bottom: 20rpx;
-}
-
-.row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 28rpx 24rpx 28rpx 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.row:last-child {
-  border-bottom: none;
-}
-
-.avatar-row .avatar {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-}
-
-.label {
-  font-size: 28rpx;
-  color: #333;
-}
-
-.value {
-  font-size: 28rpx;
-  color: #666;
-}
-
-.menu-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 28rpx 24rpx 28rpx 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.menu-item:last-child {
-  border-bottom: none;
-}
-
-.logout-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 42px;
-  margin-top: 40px;
-  background-color: #fff;
-  color: #333;
-  border-radius: 8rpx;
-  border: none;
-}
diff --git a/src/pages/home/components/DrawerSection/index.vue b/src/pages/home/components/DrawerSection/index.vue
index 900416a..4cf7359 100644
--- a/src/pages/home/components/DrawerSection/index.vue
+++ b/src/pages/home/components/DrawerSection/index.vue
@@ -1,9 +1,9 @@
 <template>
   <van-popup v-model:show="show" ref="drawerRef" position="left">
-    <div class="drawer-home">
-      <div class="drawer-home-nav">
-        <van-icon name="cross" size="22" color="#333333" class="close-icon" @click="close" />
-        <span class="title">我的</span>
+    <div class="w-full h-screen bg-white pt-[44px]">
+      <div class="relative p-3 flex justify-center items-center">
+        <van-icon name="cross" size="22" color="#333333" class="absolute left-3" @click="close" />
+        <span class="text-[18px] text-center text-[#333]">我的</span>
       </div>
 
       <MineSetting ref="mineSettingRef" @close="close" />
@@ -42,7 +42,3 @@ defineExpose({
   close,
 });
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/DrawerSection/styles/index.scss b/src/pages/home/components/DrawerSection/styles/index.scss
deleted file mode 100644
index b19f15c..0000000
--- a/src/pages/home/components/DrawerSection/styles/index.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.drawer-home {
-  width: 100%;
-  height: 100vh;
-  background-color: #fff;
-  padding-top: 44px;
-}
-
-.drawer-home-nav {
-  position: relative;
-  padding: 12px;
-  display: flex;
-  justify-content: center; /* 文字水平居中 */
-  align-items: center; /* 垂直居中 */
-
-  .title {
-    font-size: 18px;
-    text-align: center;
-    color: #333;
-  }
-
-  .close-icon {
-    position: absolute;
-    left: 12px; /* 距离左边12px */
-  }
-}
diff --git a/src/pages/home/components/FacilityLocationCard/index.vue b/src/pages/home/components/FacilityLocationCard/index.vue
index 1bad81b..613f7ca 100644
--- a/src/pages/home/components/FacilityLocationCard/index.vue
+++ b/src/pages/home/components/FacilityLocationCard/index.vue
@@ -1,36 +1,38 @@
 <template>
-  <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="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" />
 
-    <div class="facility-location-card__body px-24 pb-24">
-      <div class="facility-location-card__title-row flex items-center">
-        <div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-bold">
+    <div class="px-24 pb-24 pt-7 box-border">
+      <div class="flex items-center min-w-0">
+        <div
+          class="color-2563EB bg-EFF6FF text-[12px] font-bold h-[30px] mr-3 px-3 border border-[#bfdbfe] rounded-[10px] leading-[30px] whitespace-nowrap box-border">
           {{ type.text }}
         </div>
-        <div class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate">
+        <div class="text-[#1e293b] text-[18px] font-bold truncate min-w-0 leading-6">
           {{ data.title }}
         </div>
       </div>
 
-      <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>
+      <div class="mt-2 flex items-center text-[#94A3B8] text-[14px] font-bold leading-[18px]">
+        <span class="mr-[5px] text-[15px] leading-[15px]">{{ 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 text-[#64748B] text-[13px] font-bold">
-          <span class="facility-location-card__location-dot">{{ location.icon }}</span>
+      <div class="mt-6 px-5 py-[18px] box-border bg-[#f8fafc] rounded-[20px]">
+        <div class="flex items-center text-[#64748B] text-[13px] font-bold leading-[18px]">
+          <span class="mr-2 text-[#ec4899] text-[14px] leading-[14px]">{{ location.icon }}</span>
           <span>{{ location.label }}</span>
         </div>
-        <div class="facility-location-card__location-text text-[#1e293b] text-[16px] font-bold">
+        <div class="mt-3 text-[#1e293b] text-[16px] font-bold leading-[22px]">
           {{ location.text }}
         </div>
       </div>
 
       <div
-        class="facility-location-card__button flex items-center justify-center bg-0F172A text-white text-[18px] font-bold"
-        :class="{ 'is-disabled': disabled }" @click="handleAction">
-        <span class="facility-location-card__button-icon">{{ action.icon }}</span>
+        class="mt-5 flex items-center justify-center bg-0F172A text-white text-[18px] font-bold h-[54px] rounded-[16px] active:opacity-[0.86]"
+        :class="{ 'opacity-[0.55]': disabled }" @click="handleAction">
+        <span class="mr-2 text-[19px] leading-[19px]">{{ action.icon }}</span>
         <span>{{ action.text }}</span>
       </div>
     </div>
@@ -64,7 +66,3 @@ const handleAction = () => {
   emit("select", props.data);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/GeneratorPhotoComponent/index.vue b/src/pages/home/components/GeneratorPhotoComponent/index.vue
index 4e5b63c..20cc237 100644
--- a/src/pages/home/components/GeneratorPhotoComponent/index.vue
+++ b/src/pages/home/components/GeneratorPhotoComponent/index.vue
@@ -36,6 +36,7 @@
 </template>
 <script setup>
 import { defineProps, nextTick, onMounted, computed } from "vue";
+import { emitter } from '@/utils/events'
 import {
   SCROLL_TO_BOTTOM,
 } from "@/constants/constant";
@@ -53,7 +54,7 @@ const props = defineProps({
 onMounted(() => {
   nextTick(() => {
     setTimeout(() => {
-      uni.$emit(SCROLL_TO_BOTTOM, true);
+      emitter.emit(SCROLL_TO_BOTTOM, true);
     }, 300);
   });
 });
diff --git a/src/pages/home/components/LongTextGuideCardPreview/guide.vue b/src/pages/home/components/LongTextGuideCardPreview/guide.vue
index 39316df..0bdebf2 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/guide.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/guide.vue
@@ -1,62 +1,78 @@
 <template>
-  <div class="long-text-detail-page flex flex-col">
+  <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="漂流攻略" background="#E5EFE9" />
 
-    <div class="long-text-detail-scroll" scroll-y>
-      <div class="long-text-detail-content">
-        <div class="long-text-detail-card">
-          <div class="long-text-detail-header">
-            <div class="long-text-detail-title">下水之前，先听小七唠两句</div>
-            <div class="long-text-detail-badge is-amber">漂流攻略</div>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+      scroll-y>
+      <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)]">
+            <div class="text-[#1e293b] text-[18px] font-black leading-[26px]">下水之前，先听小七唠两句</div>
+            <div
+              class="inline-flex w-fit min-h-6 mt-[10px] px-[10px] items-center border rounded-full text-[11px] font-black leading-[18px] text-[#d97706] bg-[#fffbeb] border-[#fde68a]">
+              漂流攻略
+            </div>
           </div>
 
-          <div class="long-text-detail-body">
-            <div class="detail-paragraph">
+          <div class="pt-[18px] px-[18px] pb-1">
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               卧龙潭的水，是那种一眼就让人想跳进去的绿。
-              <text class="detail-highlight">皮筏艇漂流</text>
+              <text class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">皮筏艇漂流</text>
               全程约两公里，三段激流接连而下，水花会结结实实拍在脸上。这趟值得冲，但晕水的朋友得先掂量掂量。
             </div>
 
-            <img class="detail-main-image"
+            <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" />
 
-            <div class="detail-section-title">下水前，这几样别落下</div>
-            <div class="detail-tip-block">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">下水前，这几样别落下</div>
+            <div
+              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[#065f46] bg-[#f0fdf4] text-[12px] font-extrabold leading-[22px] border-l-[#34d399]">
               ① 换洗衣服塞进防水袋，手机一定要封好<br />
               ② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br />
               ③ 贵重东西先存好寄存柜，别揣身上
             </div>
 
-            <div class="detail-paragraph">
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               小七的私心建议：挑
-              <span class="detail-highlight">上午九点到十一点</span>
+              <span class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">上午九点到十一点</span>
               这一场。水量足、太阳还没毒，漂下来浑身舒坦，不会被晒得发昏。
             </div>
 
-            <div class="detail-section-title">这些坑，提前绕开</div>
-            <div class="detail-tip-block is-warn">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">这些坑，提前绕开</div>
+            <div
+              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[12px] font-extrabold leading-[22px] border-l-[#fbbf24] text-[#92400e] bg-[#fffbeb]">
               雨后水量猛涨可能临时停漂，出发前先问一句开放状态；现场拖鞋不补租，光脚更危险。
             </div>
           </div>
 
-          <div class="detail-action-zone">
-            <div class="detail-action-label">相关票务</div>
-            <div class="detail-product-scroll">
-              <div class="detail-product-row">
-                <div v-for="product in products" :key="product.name" class="detail-product-card">
-                  <img class="detail-product-image" :src="product.img" mode="aspectFill" />
-                  <div class="detail-product-body">
-                    <div v-if="product.saleTag" class="detail-product-tag">
+          <div class="mt-1 pb-5 border-t border-[rgba(15,23,42,0.06)]">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              相关票务
+            </div>
+            <div
+              class="w-full overflow-x-auto whitespace-nowrap scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+              <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" />
+                  <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">
                       {{ product.saleTag }}
                     </div>
-                    <div class="detail-product-name">{{ product.name }}</div>
-                    <div class="detail-product-price">
-                      <span class="detail-product-currency">¥</span>{{ product.price }}
-                      <span v-if="product.original" class="detail-product-original">
+                    <div
+                      class="overflow-hidden text-ellipsis whitespace-nowrap text-[#1e293b] text-[13px] font-black leading-5">
+                      {{ product.name }}
+                    </div>
+                    <div class="my-1 mt-1 mb-2 text-[#f43f5e] text-[20px] font-black leading-[26px]">
+                      <span class="text-[12px]">¥</span>{{ product.price }}
+                      <span v-if="product.original" class="ml-1 text-[#cbd5e1] text-[11px] font-bold line-through">
                         ¥{{ product.original }}
                       </span>
                     </div>
-                    <button class="detail-buy-button" @click="goodsDetail(product)">
+                    <button
+                      class="w-full h-[34px] p-0 border-0 rounded-[12px] text-[#451a03] bg-[#fbbf24] text-[12px] font-black leading-[34px] [&::after]:border-0"
+                      @click="goodsDetail(product)">
                       立即购买
                     </button>
                   </div>
@@ -64,9 +80,13 @@
               </div>
             </div>
 
-            <div class="detail-action-label">继续追问</div>
-            <div class="detail-faq-wrap">
-              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              继续追问
+            </div>
+            <div class="mx-4">
+              <div v-for="question in faq" :key="question"
+                class="inline-flex mr-[6px] mb-2 px-[13px] py-2 border border-[#e2e8f0] rounded-[20px] text-[#475569] bg-white text-[11.5px] font-extrabold leading-4"
+                @click="sendReply(question)">
                 {{ question }}
               </div>
             </div>
@@ -78,6 +98,7 @@
 </template>
 
 <script setup>
+import { emitter } from '@/utils/events'
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";
 
@@ -114,11 +135,7 @@ const goodsDetail = (item) => {
 
 const sendReply = (item) => {
   uni.navigateBack();
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 
 </script>
-
-<style scoped lang="scss">
-@import "./styles/detail.scss";
-</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/index.vue b/src/pages/home/components/LongTextGuideCardPreview/index.vue
index 5082573..0770fc2 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/index.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/index.vue
@@ -1,20 +1,23 @@
 <template>
-  <div class="w-full bg-white  border-ff overflow-hidden rounded-[20px] flex flex-col">
+  <div
+    class="w-full bg-white overflow-hidden rounded-[20px] flex flex-col min-h-[178px] mb-4 border border-[rgba(15,23,42,0.04)] shadow-[0_12px_28px_rgba(15,23,42,0.04)] box-border transition-[transform,opacity] duration-150 ease-in-out active:scale-[0.985]">
     <!-- 占位撑开 -->
     <div class="w-full"></div>
-    <div class="flex flex-col px-[16px] pt-16 pb-[12px] " @click="openDetail(item)">
+    <div class="flex flex-col px-[26px] pt-[28px] pb-[22px]" @click="openDetail(item)">
 
-      <div class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
+      <div
+        class="inline-flex w-fit items-center justify-center min-h-[26px] px-[10px] border rounded-full leading-[18px] text-[12px] font-bold"
+        :class="getBadgeClass(item.badgeTone)">
         {{ item.badge }}
       </div>
 
-      <div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
+      <div class="mt-[18px] leading-6 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">
+      <div class="mt-6 flex items-center justify-between">
         <span class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</span>
         <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
       </div>
@@ -85,6 +88,16 @@ const item = computed(() => {
   }
 });
 
+const getBadgeClass = (tone) => {
+  const toneMap = {
+    amber: "text-[#d97706] bg-[#fffbeb] border-[#fde68a]",
+    green: "text-[#059669] bg-[#ecfdf5] border-[#a7f3d0]",
+    violet: "text-[#7c3aed] bg-[#f5f3ff] border-[#ddd6fe]",
+    blue: "text-[#2563eb] bg-[#eff6ff] border-[#bfdbfe]",
+  };
+  return toneMap[tone] || "border-transparent";
+};
+
 const openDetail = (item) => {
   const url = getLongTextGuideDetailRoute(item.type);
   if (!url) {
@@ -99,7 +112,3 @@ const openDetail = (item) => {
 };
 
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/photo.vue b/src/pages/home/components/LongTextGuideCardPreview/photo.vue
index a8ecc3d..178f1bc 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/photo.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/photo.vue
@@ -1,69 +1,94 @@
 <template>
-  <div class="long-text-detail-page flex flex-col">
+  <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="拍照攻略" background="#E5EFE9" />
 
-    <div class="long-text-detail-scroll" scroll-y>
-      <div class="long-text-detail-content">
-        <div class="long-text-detail-card">
-          <div class="long-text-detail-header">
-            <div class="long-text-detail-title">鸳鸯湖玻璃船，这样拍才不亏</div>
-            <div class="long-text-detail-badge is-blue">拍照攻略</div>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+      scroll-y>
+      <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)]">
+            <div class="text-[#1e293b] text-[18px] font-black leading-[26px]">鸳鸯湖玻璃船，这样拍才不亏</div>
+            <div
+              class="inline-flex w-fit min-h-6 mt-[10px] px-[10px] items-center border rounded-full text-[11px] font-black leading-[18px] text-[#2563eb] bg-[#eff6ff] border-[#bfdbfe]">
+              拍照攻略
+            </div>
           </div>
 
-          <div class="long-text-detail-body">
-            <div class="detail-paragraph">
+          <div class="pt-[18px] px-[18px] pb-1">
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               鸳鸯湖的玻璃船，船底是透明的，水下世界看得清清楚楚。拍照的关键就一句话：
-              <span class="detail-highlight">别只顾着拍人，把水下那抹通透的绿一起收进来。</span>
+              <span
+                class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">别只顾着拍人，把水下那抹通透的绿一起收进来。</span>
             </div>
 
-            <div class="detail-section-title">三个不会错的机位</div>
-            <div class="detail-tip-block">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">三个不会错的机位</div>
+            <div
+              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[#065f46] bg-[#f0fdf4] text-[12px] font-extrabold leading-[22px] border-l-[#34d399]">
               ① 蹲低，贴着透明船底拍，水草和光斑会铺满整个画面<br />
               ② 船头回拍人物，背景是大片湖光，人物站三分之一处<br />
               ③ 把手伸进光里，拍水面波纹和指尖，是很灵的细节
             </div>
 
-            <div class="detail-paragraph">
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               时间上，挑
-              <text class="detail-highlight">上午十点到下午两点</text>
+              <text class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">上午十点到下午两点</text>
               的顺光时段。阳光直直照进水里，那种绿才透得出来，阴天和傍晚，水色会闷，差很多。
             </div>
 
-            <div class="detail-section-title">手机党看这里</div>
-            <div class="detail-tip-block">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">手机党看这里</div>
+            <div
+              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[#065f46] bg-[#f0fdf4] text-[12px] font-extrabold leading-[22px] border-l-[#34d399]">
               手机开 0.5x 广角，水面和船一起进画；隔着玻璃拍记得擦干净船底；逆光时手动点一下水面降曝光。
             </div>
           </div>
 
-          <div class="detail-action-zone">
-            <div class="detail-action-label">查看机位图</div>
-            <div class="photo-card" @click="predivPhoto">
-              <img class="photo-card-image" :src="photo.thumb" mode="aspectFill" />
-              <div class="photo-card-caption">
-                <div class="photo-card-title">{{ photo.title }}</div>
-                <div class="photo-card-subtitle">{{ photo.sub }}</div>
+          <div class="mt-1 pb-5 border-t border-[rgba(15,23,42,0.06)]">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              查看机位图
+            </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" />
+              <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>
+                <div class="mt-[2px] text-[rgba(255,255,255,0.78)] text-[11px] font-bold leading-4">{{ photo.sub }}
+                </div>
+              </div>
+              <div
+                class="absolute top-[10px] right-[10px] w-[30px] h-[30px] rounded-full text-white bg-[rgba(15,23,42,0.38)] text-[18px] font-extrabold leading-[30px] text-center">
+                ↗
               </div>
-              <div class="photo-card-expand">↗</div>
             </div>
 
-            <div class="detail-action-label">AIGC 合影</div>
-            <div class="detail-action-card">
-              <div class="aigc-cover">
-                <img class="aigc-image" :src="aigc.img" mode="aspectFill" />
-                <div class="aigc-badge">AI 生成</div>
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              AIGC 合影
+            </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" />
+                <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 生成
+                </div>
               </div>
-              <div class="aigc-body">
-                <div class="aigc-title">{{ aigc.name }}</div>
-                <div class="aigc-desc">{{ aigc.desc }}</div>
-                <button class="detail-solid-button aigc-button" @click="jumpAigcClick">
+              <div class="pt-3 px-[14px] pb-[14px]">
+                <div class="text-[#1e293b] text-[15px] font-black leading-[22px]">{{ aigc.name }}</div>
+                <div class="mt-[5px] mb-3 text-[#64748b] text-[11.5px] font-bold leading-[18px]">{{ aigc.desc }}</div>
+                <button
+                  class="w-full h-[42px] p-0 border-0 rounded-[14px] text-white bg-[linear-gradient(135deg,#8b5cf6,#6366f1)] text-[13px] font-black leading-[42px] [&::after]:border-0"
+                  @click="jumpAigcClick">
                   生成我的合影
                 </button>
               </div>
             </div>
 
-            <div class="detail-action-label">继续追问</div>
-            <div class="detail-faq-wrap">
-              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              继续追问
+            </div>
+            <div class="mx-4">
+              <div v-for="question in faq" :key="question"
+                class="inline-flex mr-[6px] mb-2 px-[13px] py-2 border border-[#e2e8f0] rounded-[20px] text-[#475569] bg-white text-[11.5px] font-extrabold leading-4"
+                @click="sendReply(question)">
                 {{ question }}
               </div>
             </div>
@@ -75,6 +100,7 @@
 </template>
 
 <script setup>
+import { emitter } from '@/utils/events'
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";
 import { getAccessToken } from "@/constants/token";
@@ -117,11 +143,7 @@ const jumpAigcClick = () => {
 
 const sendReply = (item) => {
   uni.navigateBack();
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 
 </script>
-
-<style scoped lang="scss">
-@import "./styles/detail.scss";
-</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/poi.vue b/src/pages/home/components/LongTextGuideCardPreview/poi.vue
index 0c5167f..08eca86 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/poi.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/poi.vue
@@ -1,62 +1,82 @@
 <template>
-  <div class="long-text-detail-page flex flex-col">
+  <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="景点故事" background="#E5EFE9" />
 
-    <div class="long-text-detail-scroll" scroll-y>
-      <div class="long-text-detail-content">
-        <div class="long-text-detail-card">
-          <div class="long-text-detail-header">
-            <div class="long-text-detail-title">小七孔古桥 · 走了三百年的石拱</div>
-            <div class="long-text-detail-badge is-emerald">景点故事</div>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+      scroll-y>
+      <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)]">
+            <div class="text-[#1e293b] text-[18px] font-black leading-[26px]">小七孔古桥 · 走了三百年的石拱</div>
+            <div
+              class="inline-flex w-fit min-h-6 mt-[10px] px-[10px] items-center border rounded-full text-[11px] font-black leading-[18px] text-[#047857] bg-[#ecfdf5] border-[#a7f3d0]">
+              景点故事
+            </div>
           </div>
 
-          <div class="long-text-detail-body">
-            <div class="detail-paragraph">
+          <div class="pt-[18px] px-[18px] pb-1">
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               小七孔古桥静静卧在响水河上，七个石拱挨着排开，桥身爬满青苔藤蔓。它建于清道光年间，
-              <text class="detail-highlight">三百多岁</text>
+              <text class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">三百多岁</text>
               了。整个景区的名字，就是从这座桥来的。
             </div>
 
-            <img class="detail-main-image"
+            <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" />
 
-            <div class="detail-section-title">站在这儿，看什么</div>
-            <div class="detail-tip-block">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">站在这儿，看什么</div>
+            <div
+              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[#065f46] bg-[#f0fdf4] text-[12px] font-extrabold leading-[22px] border-l-[#34d399]">
               ① 桥拱与水面倒影合成完整的圆，这是古桥最经典的一眼<br />
               ② 桥身的青苔和藤蔓，是三百年时间慢慢长出来的<br />
               ③ 桥下水浅处清澈见底，能看见鹅卵石和游鱼
             </div>
 
-            <div class="detail-paragraph">
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               小七的建议：别急着走过去。先在桥侧站一会儿，古桥不是用来打卡的，是用来
-              <span class="detail-highlight">慢慢看</span>
+              <span class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">慢慢看</span>
               的。光线斜下来的时候，石桥、绿水、倒影会一起把你框进画里。
             </div>
 
-            <div class="detail-section-title">顺带一提</div>
-            <div class="detail-tip-block is-warn">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">顺带一提</div>
+            <div
+              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[12px] font-extrabold leading-[22px] border-l-[#fbbf24] text-[#92400e] bg-[#fffbeb]">
               桥面是三百年的老石头，雨后偏滑，慢点走；别翻护栏到桥下浅滩，既危险也伤桥。
             </div>
           </div>
 
-          <div class="detail-action-zone">
-            <div class="detail-action-label">查看景点详情</div>
-            <div class="detail-action-card is-raised" @click="showToast('跳转 H5 景点详情页：小七孔古桥')">
-              <div class="poi-mini-tag">核心地标</div>
-              <div class="poi-mini-body">
-                <div class="poi-mini-title">小七孔古桥</div>
-                <div class="poi-mini-desc">
+          <div class="mt-1 pb-5 border-t border-[rgba(15,23,42,0.06)]">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              查看景点详情
+            </div>
+            <div
+              class="mx-4 mb-3 overflow-hidden border border-[#f1f5f9] rounded-[24px] bg-white shadow-[0_4px_20px_rgba(15,23,42,0.04)]"
+              @click="showToast('跳转 H5 景点详情页：小七孔古桥')">
+              <div
+                class="inline-flex w-fit mt-[14px] ml-[14px] px-[10px] py-1 items-center rounded-[8px] text-[#059669] bg-[rgba(255,255,255,0.9)] shadow-[0_1px_4px_rgba(15,23,42,0.08)] text-[10px] font-black">
+                核心地标
+              </div>
+              <div class="pt-[10px] px-5 pb-4">
+                <div class="mb-[10px] text-[#1e293b] text-[19px] font-black leading-[26px]">小七孔古桥</div>
+                <div
+                  class="mb-3 px-3 py-[10px] border border-[rgba(167,243,208,0.5)] rounded-[12px] text-[#065f46] bg-[linear-gradient(to_right,#ecfdf5,rgba(240,253,250,0.5))] text-[12px] font-extrabold leading-5">
                   清道光年间建的七孔石桥，响水河上的镇景之宝，小七孔之名由此而来，桥畔可观涵碧潭。
                 </div>
-                <button class="detail-solid-button" @click.stop="openMap">
+                <button
+                  class="w-full h-[42px] p-0 border-0 rounded-[14px] text-white bg-[#0f172a] text-[13px] font-black leading-[42px] [&::after]:border-0"
+                  @click.stop="openMap">
                   带我去
                 </button>
               </div>
             </div>
 
-            <div class="detail-action-label">继续追问</div>
-            <div class="detail-faq-wrap">
-              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              继续追问
+            </div>
+            <div class="mx-4">
+              <div v-for="question in faq" :key="question"
+                class="inline-flex mr-[6px] mb-2 px-[13px] py-2 border border-[#e2e8f0] rounded-[20px] text-[#475569] bg-white text-[11.5px] font-extrabold leading-4"
+                @click="sendReply(question)">
                 {{ question }}
               </div>
             </div>
@@ -68,6 +88,7 @@
 </template>
 
 <script setup>
+import { emitter } from '@/utils/events'
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";
 
@@ -105,11 +126,7 @@ const openMap = () => {
 
 const sendReply = (item) => {
   uni.navigateBack();
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 
 </script>
-
-<style scoped lang="scss">
-@import "./styles/detail.scss";
-</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/route.vue b/src/pages/home/components/LongTextGuideCardPreview/route.vue
index f748849..601ddc4 100644
--- a/src/pages/home/components/LongTextGuideCardPreview/route.vue
+++ b/src/pages/home/components/LongTextGuideCardPreview/route.vue
@@ -1,87 +1,112 @@
 <template>
-  <div class="long-text-detail-page flex flex-col">
+  <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
     <TopNavBar title="路线指引" background="#E5EFE9" />
 
-    <div class="long-text-detail-scroll" scroll-y>
-      <div class="long-text-detail-content">
-        <div class="long-text-detail-card">
-          <div class="long-text-detail-header">
-            <div class="long-text-detail-title">漂完卧龙潭，顺道去鸳鸯湖</div>
-            <div class="long-text-detail-badge is-violet">路线指引</div>
+    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+      scroll-y>
+      <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)]">
+            <div class="text-[#1e293b] text-[18px] font-black leading-[26px]">漂完卧龙潭，顺道去鸳鸯湖</div>
+            <div
+              class="inline-flex w-fit min-h-6 mt-[10px] px-[10px] items-center border rounded-full text-[11px] font-black leading-[18px] text-[#7c3aed] bg-[#f5f3ff] border-[#ddd6fe]">
+              路线指引
+            </div>
           </div>
 
-          <div class="long-text-detail-body">
-            <div class="detail-paragraph">
+          <div class="pt-[18px] px-[18px] pb-1">
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               漂完卧龙潭，人多半是湿着、累着的。这时候去鸳鸯湖刚刚好。坐观光车顺路不绕，二十分钟左右就到。
             </div>
 
-            <div class="detail-section-title">鸳鸯湖分上下湖，先选好玩哪个</div>
-            <div class="detail-paragraph">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">
+              鸳鸯湖分上下湖，先选好玩哪个
+            </div>
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
               鸳鸯湖不是一个码头，它分成上下两个湖，玩的船不一样，
-              <span class="detail-highlight">下车站点也不同</span>
+              <span class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">下车站点也不同</span>
               ，上车前先选好。
             </div>
 
-            <div class="route-vs-wrap">
-              <div class="route-vs-col">
-                <div class="route-vs-head">上湖 · 鸳湖</div>
-                <div class="route-vs-boat" style="color: #2563eb">玻璃船 ¥50</div>
-                <div class="route-vs-row">
-                  透明船底，<span class="route-vs-bold">适合拍照</span>
+            <div class="flex gap-2 my-[6px] mb-4">
+              <div class="flex-1 px-3 py-[11px] border border-[#e8edf2] rounded-[12px] bg-[#f8fafc]">
+                <div
+                  class="mb-2 pb-[7px] border-b border-dashed border-[#d8e0e8] text-[#1e293b] text-[12px] font-black leading-[18px]">
+                  上湖 · 鸳湖
                 </div>
-                <div class="route-vs-row">带老人孩子图轻松</div>
-                <div class="route-vs-row">
-                  在 <span class="route-vs-bold">鸳鸯湖上湖站</span> 下车
+                <div class="mb-[7px] text-[13px] font-black leading-[18px] text-[#2563eb]">玻璃船 ¥50</div>
+                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
+                  透明船底，<span class="text-[#334155] font-black">适合拍照</span>
+                </div>
+                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">带老人孩子图轻松</div>
+                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
+                  在 <span class="text-[#334155] font-black">鸳鸯湖上湖站</span> 下车
                 </div>
               </div>
 
-              <div class="route-vs-col">
-                <div class="route-vs-head">下湖 · 鸯湖</div>
-                <div class="route-vs-boat" style="color: #059669">铁皮船 ¥30</div>
-                <div class="route-vs-row">自己划，1-6 人一船</div>
-                <div class="route-vs-row">
-                  <span class="route-vs-bold">水上迷宫</span>穿林，更有乐趣
+              <div class="flex-1 px-3 py-[11px] border border-[#e8edf2] rounded-[12px] bg-[#f8fafc]">
+                <div
+                  class="mb-2 pb-[7px] border-b border-dashed border-[#d8e0e8] text-[#1e293b] text-[12px] font-black leading-[18px]">
+                  下湖 · 鸯湖
                 </div>
-                <div class="route-vs-row">
-                  在 <span class="route-vs-bold">鸳鸯湖站</span> 下车，再走 4 分钟
+                <div class="mb-[7px] text-[13px] font-black leading-[18px] text-[#059669]">铁皮船 ¥30</div>
+                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">自己划，1-6 人一船</div>
+                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
+                  <span class="text-[#334155] font-black">水上迷宫</span>穿林，更有乐趣
+                </div>
+                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
+                  在 <span class="text-[#334155] font-black">鸳鸯湖站</span> 下车，再走 4 分钟
                 </div>
               </div>
             </div>
 
-            <div class="detail-paragraph">时间够的话两个湖都能玩，中间有观光车接驳。</div>
+            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
+              时间够的话两个湖都能玩，中间有观光车接驳。
+            </div>
 
-            <div class="detail-section-title">路上留个心</div>
-            <div class="detail-tip-block is-warn">
+            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">路上留个心</div>
+            <div
+              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[12px] font-extrabold leading-[22px] border-l-[#fbbf24] text-[#92400e] bg-[#fffbeb]">
               ① 旺季观光车要排队，上午人最多<br />
               ② 下湖枯水期水位低，水上迷宫游线可能关闭，购票前先问一句<br />
               ③ 雨天石板路偏滑，带孩子老人慢一点
             </div>
           </div>
 
-          <div class="detail-action-zone">
-            <div class="detail-action-label">完整路线</div>
-            <div class="route-step-card">
-              <div class="route-step-title">卧龙潭 → 鸳鸯湖 · 看准上下湖</div>
-              <div v-for="(step, index) in steps" :key="step.act" class="route-step">
-                <div class="route-step-index">{{ index + 1 }}</div>
-                <div class="route-step-main">
-                  <div class="route-step-act">{{ step.act }}</div>
-                  <div class="route-step-meta">{{ step.meta }}</div>
+          <div class="mt-1 pb-5 border-t border-[rgba(15,23,42,0.06)]">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              完整路线
+            </div>
+            <div class="mx-4 mb-3 px-4 py-[14px] border border-[rgba(15,23,42,0.07)] rounded-[16px] bg-white">
+              <div class="mb-3 text-[#1e293b] text-[13px] font-black leading-5">卧龙潭 → 鸳鸯湖 · 看准上下湖</div>
+              <div v-for="(step, index) in steps" :key="step.act" class="flex gap-[10px] mb-[10px] last:mb-0">
+                <div
+                  class="w-[18px] h-[18px] shrink-0 rounded-full bg-[#8b5cf6] text-white text-[10px] font-black leading-[18px] text-center">
+                  {{ index + 1 }}
+                </div>
+                <div class="flex-1">
+                  <div class="text-[#334155] text-[12px] font-extrabold leading-[18px]">{{ step.act }}</div>
+                  <div class="mt-px text-[#94a3b8] text-[10.5px] font-bold leading-4">{{ step.meta }}</div>
                 </div>
               </div>
             </div>
 
-            <div class="route-step-card">
-              <div class="route-step-title">沿途设施</div>
-              <div v-for="facility in facilities" :key="facility.label" class="facility-row">
-                <div class="facility-label">{{ facility.label }}</div>
+            <div class="mx-4 mb-3 px-4 py-[14px] border border-[rgba(15,23,42,0.07)] rounded-[16px] bg-white">
+              <div class="mb-3 text-[#1e293b] text-[13px] font-black leading-5">沿途设施</div>
+              <div v-for="facility in facilities" :key="facility.label"
+                class="flex gap-2 py-[5px] text-[#475569] text-[11.5px] font-bold leading-[18px]">
+                <div class="w-[52px] shrink-0 text-[#7c3aed] font-black">{{ facility.label }}</div>
                 <div>{{ facility.text }}</div>
               </div>
             </div>
 
-            <div class="detail-action-label">继续追问</div>
-            <div class="detail-faq-wrap">
-              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
+              继续追问
+            </div>
+            <div class="mx-4">
+              <div v-for="question in faq" :key="question"
+                class="inline-flex mr-[6px] mb-2 px-[13px] py-2 border border-[#e2e8f0] rounded-[20px] text-[#475569] bg-white text-[11.5px] font-extrabold leading-4"
+                @click="sendReply(question)">
                 {{ question }}
               </div>
             </div>
@@ -94,6 +119,7 @@
 
 <script setup>
 import TopNavBar from "@/components/TopNavBar/index.vue";
+import { emitter } from '@/utils/events'
 import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";
 
 const steps = [
@@ -133,11 +159,7 @@ const showToast = (title) => {
 
 const sendReply = (item) => {
   uni.navigateBack();
-  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
 };
 
 </script>
-
-<style scoped lang="scss">
-@import "./styles/detail.scss";
-</style>
diff --git a/src/pages/home/components/MapNavigationCard/index.vue b/src/pages/home/components/MapNavigationCard/index.vue
index 33c7abc..0c162e6 100644
--- a/src/pages/home/components/MapNavigationCard/index.vue
+++ b/src/pages/home/components/MapNavigationCard/index.vue
@@ -1,26 +1,28 @@
 <template>
-  <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">
-        <span class="map-navigation-card__badge-icon">{{ badge.icon }}</span>
+  <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" />
+      <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>
         <span>{{ badge.text }}</span>
       </div>
     </div>
 
-    <div class="map-navigation-card__content flex items-center">
-      <div class="map-navigation-card__info flex-1">
-        <div class="map-navigation-card__title text-[#1e293b] text-[18px] font-bold truncate">
+    <div class="flex items-center min-h-[96px] pt-5 px-[26px] pb-[22px] box-border">
+      <div class="flex-1 min-w-0">
+        <div class="text-[#1e293b] text-[18px] font-bold truncate leading-6">
           {{ data.title }}
         </div>
-        <div class="map-navigation-card__distance text-[#94A3B8] text-[14px] font-bold truncate">
+        <div class="mt-[6px] text-[#94A3B8] text-[14px] font-bold truncate leading-[18px]">
           {{ data.distance }}
         </div>
       </div>
       <div
-        class="map-navigation-card__button flex items-center justify-center bg-0F172A text-white text-[18px] font-bold"
-        :class="{ 'is-disabled': disabled }" @click="handleAction">
-        <span class="map-navigation-card__button-icon">{{ action.icon }}</span>
+        class="flex items-center justify-center bg-0F172A text-white text-[18px] font-bold w-[108px] h-[58px] ml-[18px] rounded-[16px] active:opacity-[0.86]"
+        :class="{ 'opacity-[0.55]': disabled }" @click="handleAction">
+        <span class="mr-2 text-[19px] leading-[19px]">{{ action.icon }}</span>
         <span>{{ action.text }}</span>
       </div>
     </div>
@@ -28,7 +30,7 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 
 const props = defineProps({
   data: {
@@ -52,7 +54,3 @@ const handleAction = () => {
   emit("action", props.data);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/MapNavigationCard/styles/index.scss b/src/pages/home/components/MapNavigationCard/styles/index.scss
deleted file mode 100644
index 4c76cdb..0000000
--- a/src/pages/home/components/MapNavigationCard/styles/index.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.map-navigation-card {
-  border: 1px solid rgba(226, 232, 240, 0.72);
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
-  box-sizing: border-box;
-}
-
-.map-navigation-card__media {
-  position: relative;
-}
-
-.map-navigation-card__image {
-  height: 248px;
-}
-
-.map-navigation-card__badge {
-  position: absolute;
-  left: 16px;
-  bottom: 16px;
-  height: 34px;
-  padding: 0 12px;
-  border-radius: 8px;
-  background: rgba(15, 23, 42, 0.72);
-  line-height: 34px;
-}
-
-.map-navigation-card__badge-icon {
-  margin-right: 6px;
-  font-size: 15px;
-  line-height: 15px;
-}
-
-.map-navigation-card__content {
-  min-height: 96px;
-  padding: 20px 26px 22px;
-  box-sizing: border-box;
-}
-
-.map-navigation-card__info {
-  min-width: 0;
-}
-
-.map-navigation-card__title {
-  line-height: 24px;
-}
-
-.map-navigation-card__distance {
-  margin-top: 6px;
-  line-height: 18px;
-}
-
-.map-navigation-card__button {
-  width: 108px;
-  height: 58px;
-  margin-left: 18px;
-  border-radius: 16px;
-}
-
-.map-navigation-card__button:active {
-  opacity: 0.86;
-}
-
-.map-navigation-card__button.is-disabled {
-  opacity: 0.55;
-}
-
-.map-navigation-card__button-icon {
-  margin-right: 8px;
-  font-size: 19px;
-  line-height: 19px;
-}
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
index 0732e51..b5528b4 100644
--- a/src/pages/home/components/NoticeCard/index.vue
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -1,48 +1,54 @@
 <template>
-  <div class="notice-card 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">
+  <div class="w-full">
+    <div v-if="!detailOpen"
+      class="w-full bg-[#FFFBEB] rounded-[24px] pt-4 px-5 pb-[14px] border border-[#fde68a] shadow-[0_8px_22px_rgba(245,158,11,0.08)] box-border">
+      <div class="color-B45309 text-[16px] font-bold leading-[22px]">
         {{ summary.title }}
       </div>
-      <div class="notice-card__summary-content text-[#D97706] text-[14px] font-bold">
+      <div class="mt-[6px] leading-5 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 text-[#D97706] text-[12px] font-bold">
+      <div class="flex items-center justify-between min-w-0 mt-2">
+        <div class="min-w-0 leading-[18px] 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 }"
-          @click="openDetail">
+        <div
+          class="ml-4 leading-[18px] underline whitespace-nowrap color-B45309 text-[14px] font-bold active:opacity-[0.82]"
+          :class="{ 'opacity-[0.55]': disabled }" @click="openDetail">
           {{ summary.actionText }}
         </div>
       </div>
     </div>
 
-    <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 shrink-0" @click="closeDetail">
+    <div v-else
+      class="w-full bg-white rounded-[24px] overflow-hidden border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)]">
+      <div class="flex items-center h-[68px] px-5 box-border">
+        <div
+          class="flex items-center justify-center rounded-full shrink-0 w-[34px] h-[34px] mr-[14px] text-[#64748b] text-[28px] leading-none bg-[#f8fafc]"
+          @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">
+        <div class="text-[#1e293b] text-[18px] font-bold leading-6">
           {{ detail.navTitle }}
         </div>
       </div>
 
-      <image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />
+      <image class="block w-full h-[250px]" :src="detail.image" mode="aspectFill" />
 
-      <div class="notice-card__detail-body">
-        <div class="notice-card__detail-title text-[#1e293b] font-size-20 font-bold">
+      <div class="pt-[22px] px-5 pb-7 box-border">
+        <div class="text-[#1e293b] font-size-20 font-bold leading-7">
           {{ detail.title }}
         </div>
-        <div class="notice-card__time-pill flex items-center bg-[#f8fafc] text-[#475569] text-[13px] font-bold">
-          <span class="notice-card__time-icon">{{ detail.timeIcon }}</span>
+        <div
+          class="inline-flex items-center h-[34px] mt-4 px-3 border border-[#e2e8f0] rounded-full leading-[34px] box-border bg-[#f8fafc] text-[#475569] text-[13px] font-bold">
+          <span class="mr-[6px] text-[#64748b] text-[15px] leading-[15px]">{{ detail.timeIcon }}</span>
           <span>{{ detail.publishTime }}</span>
         </div>
-        <div class="notice-card__divider"></div>
+        <div class="h-px my-[26px] mt-[26px] mb-5 bg-[#e5e7eb]"></div>
         <div v-for="paragraph in paragraphs" :key="paragraph.id"
-          class="notice-card__paragraph text-[#475569] text-[14px] font-bold">
+          class="text-[#475569] text-[14px] font-bold leading-[30px] [&+&]:mt-[18px]">
           <span v-for="segment in paragraph.segments" :key="segment.text"
-            :class="{ 'notice-card__strong': segment.strong }">
+            :class="segment.strong ? 'text-[#1e293b] font-black' : ''">
             {{ segment.text }}
           </span>
         </div>
@@ -84,7 +90,3 @@ const closeDetail = () => {
   emit("back");
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/NoticeCard/styles/index.scss b/src/pages/home/components/NoticeCard/styles/index.scss
deleted file mode 100644
index a86568d..0000000
--- a/src/pages/home/components/NoticeCard/styles/index.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-.notice-card {
-  width: 100%;
-}
-
-.notice-card__summary,
-.notice-card__detail {
-  box-sizing: border-box;
-}
-
-.notice-card__summary {
-  padding: 16px 20px 14px;
-  border: 1px solid #fde68a;
-  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.08);
-}
-
-.notice-card__summary-title {
-  line-height: 22px;
-}
-
-.notice-card__summary-content {
-  margin-top: 6px;
-  line-height: 20px;
-}
-
-.notice-card__summary-footer {
-  min-width: 0;
-  margin-top: 8px;
-}
-
-.notice-card__summary-time {
-  min-width: 0;
-  line-height: 18px;
-}
-
-.notice-card__summary-link {
-  margin-left: 16px;
-  line-height: 18px;
-  text-decoration: underline;
-  white-space: nowrap;
-}
-
-.notice-card__summary-link:active {
-  opacity: 0.82;
-}
-
-.notice-card__summary-link.is-disabled {
-  opacity: 0.55;
-}
-
-.notice-card__detail {
-  border: 1px solid rgba(226, 232, 240, 0.72);
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
-}
-
-.notice-card__detail-head {
-  height: 68px;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.notice-card__back {
-  width: 34px;
-  height: 34px;
-  margin-right: 14px;
-  color: #64748b;
-  font-size: 28px;
-  line-height: 1;
-  background: #f8fafc;
-}
-
-.notice-card__head-title {
-  line-height: 24px;
-}
-
-.notice-card__image {
-  height: 250px;
-}
-
-.notice-card__detail-body {
-  padding: 22px 20px 28px;
-  box-sizing: border-box;
-}
-
-.notice-card__detail-title {
-  line-height: 28px;
-}
-
-.notice-card__time-pill {
-  display: inline-flex;
-  height: 34px;
-  margin-top: 16px;
-  padding: 0 12px;
-  border: 1px solid #e2e8f0;
-  border-radius: 999px;
-  line-height: 34px;
-  box-sizing: border-box;
-}
-
-.notice-card__time-icon {
-  margin-right: 6px;
-  color: #64748b;
-  font-size: 15px;
-  line-height: 15px;
-}
-
-.notice-card__divider {
-  height: 1px;
-  margin: 26px 0 20px;
-  background: #e5e7eb;
-}
-
-.notice-card__paragraph {
-  line-height: 30px;
-}
-
-.notice-card__paragraph + .notice-card__paragraph {
-  margin-top: 18px;
-}
-
-.notice-card__strong {
-  color: #1e293b;
-  font-weight: 900;
-}
diff --git a/src/pages/home/components/PoiCompareCard/index.vue b/src/pages/home/components/PoiCompareCard/index.vue
index 70a2269..790ba2e 100644
--- a/src/pages/home/components/PoiCompareCard/index.vue
+++ b/src/pages/home/components/PoiCompareCard/index.vue
@@ -1,92 +1,102 @@
 <template>
-  <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 shrink-0">
+  <div class="w-full">
+    <div v-if="!isDetail"
+      class="border border-[rgba(226,232,240,0.72)] shadow-[0_14px_34px_rgba(15,23,42,0.05)] bg-white rounded-[24px] overflow-hidden py-6 px-[26px] box-border">
+      <div class="flex items-center min-w-0">
+        <div
+          class="flex items-center justify-center rounded-full shrink-0 w-[34px] h-[34px] mr-3 border border-[#fde68a] text-[#f59e0b] text-[22px] leading-none bg-[#fffbeb] box-border">
           {{ data.icon }}
         </div>
-        <div class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1">
+        <div class="text-[#1e293b] text-[18px] font-bold truncate flex-1 min-w-0 leading-6">
           {{ data.title }}
         </div>
       </div>
 
-      <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-bold">
+      <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" />
+          <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 }}
             </div>
-            <div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold"
+            <div v-if="field.tone"
+              class="inline-flex items-center min-h-[22px] mt-[5px] px-[10px] rounded-full leading-[22px] text-[12px] font-bold"
               :class="getToneClass(field.tone)">
               {{ field.value }}
             </div>
-            <div v-else class="poi-compare-card__field-value text-[#1e293b] text-[14px] font-bold">
+            <div v-else class="mt-[5px] leading-[18px] text-[#1e293b] text-[14px] font-bold">
               {{ field.value }}
             </div>
           </div>
         </div>
       </div>
 
-      <div class="poi-compare-card__primary flex items-center justify-center bg-0F172A text-white text-[15px] font-bold"
-        :class="{ 'is-disabled': disabled }" @click="openDetail">
+      <div
+        class="flex items-center justify-center bg-0F172A text-white text-[15px] font-bold h-[52px] mt-7 rounded-[16px] active:opacity-[0.86]"
+        :class="{ 'opacity-[0.55]': disabled }" @click="openDetail">
         {{ data.detailButtonText }}
       </div>
     </div>
 
-    <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 shrink-0" @click="closeDetail">
+    <div v-else
+      class="border border-[rgba(226,232,240,0.72)] shadow-[0_14px_34px_rgba(15,23,42,0.05)] bg-white rounded-[24px] overflow-hidden">
+      <div class="flex items-center min-w-0 h-[70px] px-7 border-b border-[#f1f5f9] box-border">
+        <div
+          class="flex items-center justify-center rounded-full shrink-0 w-[34px] h-[34px] mr-[14px] text-[#64748b] text-[28px] leading-none bg-[#f8fafc]"
+          @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">
+        <div class="text-[#1e293b] font-size-20 font-bold flex-1 min-w-0 leading-6">
           {{ detail.title }}
         </div>
-        <div class="poi-compare-card__compare-label text-[#94A3B8] text-[12px] font-bold">
+        <div class="text-[#94A3B8] text-[12px] font-bold max-w-[142px] text-right leading-4">
           {{ detail.compareLabel }}
         </div>
       </div>
 
-      <div class="poi-compare-card__table">
-        <div class="poi-compare-card__table-head poi-compare-card__table-row">
+      <div class="pt-[18px] px-3 pb-0">
+        <div class="grid grid-cols-[29%_35.5%_35.5%] items-stretch min-h-9">
           <div></div>
           <div v-for="item in items" :key="item.id || item.name"
-            class="poi-compare-card__table-title text-[#1e293b] text-[14px] font-bold">
+            class="flex items-center justify-center leading-[18px] text-[#1e293b] text-[14px] font-bold">
             {{ item.name }}
           </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 text-[#94A3B8] text-[12px] font-bold">
+        <div v-for="row in detail.rows" :key="row.label"
+          class="grid grid-cols-[29%_35.5%_35.5%] items-stretch border-t border-[#f1f5f9]">
+          <div
+            class="flex items-center min-h-[52px] pl-[14px] bg-white leading-[18px] box-border text-[#94A3B8] text-[12px] font-bold">
             {{ row.label }}
           </div>
           <div v-for="cell in row.values" :key="row.label + '-' + cell.text"
-            class="poi-compare-card__cell text-[#1e293b] text-[14px] font-bold" :class="getCellClass(cell.tone)">
+            class="flex items-center justify-center min-h-[52px] text-center leading-[18px] bg-[#f8fafc] text-[#1e293b] text-[14px] font-bold"
+            :class="getCellClass(cell.tone)">
             {{ cell.text }}
           </div>
         </div>
       </div>
 
-      <div class="poi-compare-card__recommend">
-        <div class="poi-compare-card__recommend-title text-[#94A3B8] text-[12px] font-bold">
+      <div class="pt-5 px-[30px]">
+        <div class="text-[#94A3B8] text-[12px] font-bold leading-4">
           {{ 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 shrink-0" :class="getDotClass(tip.tone)" />
-            <div class="poi-compare-card__tip-text text-[#334155] text-[14px] font-bold">
+        <div class="mt-5 py-[18px] px-4 border border-[#e2e8f0] rounded-[16px] bg-[#f8fafc] flex flex-col gap-[14px]">
+          <div v-for="tip in detail.tips" :key="tip.text" class="flex gap-10">
+            <div class="rounded-full shrink-0 w-2 h-2 mt-2" :class="getDotClass(tip.tone)" />
+            <div class="text-[#334155] text-[14px] font-bold leading-[22px]">
               {{ tip.text }}
             </div>
           </div>
         </div>
       </div>
 
-      <div class="poi-compare-card__actions grid grid-cols-2 gap-14">
+      <div class="grid grid-cols-2 gap-14 py-[26px] px-[30px]">
         <div v-for="action in detail.actions" :key="action.id || action.text"
-          class="poi-compare-card__action flex items-center justify-center text-[15px] font-bold"
-          :class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A text-white' : 'poi-compare-card__action--secondary text-[#334155]', { 'is-disabled': disabled }]"
+          class="flex items-center justify-center text-[15px] font-bold h-[54px] rounded-[16px] box-border active:opacity-[0.86]"
+          :class="[action.primary ? 'bg-0F172A text-white' : 'border border-[#e2e8f0] bg-white text-[#334155]', { 'opacity-[0.55]': disabled }]"
           @click="handleAction(action)">
-          <span class="poi-compare-card__action-icon">{{ action.icon }}</span>
+          <span class="mr-2 text-[18px] leading-[18px]">{{ action.icon }}</span>
           <span>{{ action.text }}</span>
         </div>
       </div>
@@ -116,20 +126,20 @@ const detail = computed(() => props.data.detail || {});
 
 const getToneClass = (tone) => {
   const toneMap = {
-    green: "poi-compare-card__chip--green text-[#047857] bg-[#ecfdf5]",
-    amber: "poi-compare-card__chip--amber text-[#D97706] bg-[#FFFBEB]",
+    green: "shadow-[inset_0_0_0_1px_rgba(16,185,129,0.02)] text-[#047857] bg-[#ecfdf5]",
+    amber: "shadow-[inset_0_0_0_1px_rgba(245,158,11,0.02)] text-[#D97706] bg-[#FFFBEB]",
   };
   return toneMap[tone] || "";
 };
 
 const getCellClass = (tone) => {
-  if (tone === "green") return "poi-compare-card__cell--green";
+  if (tone === "green") return "bg-[#ecfdf5]";
   return "";
 };
 
 const getDotClass = (tone) => {
-  if (tone === "blue") return "poi-compare-card__dot--blue";
-  return "poi-compare-card__dot--green";
+  if (tone === "blue") return "bg-[#3b82f6]";
+  return "bg-[#10b981]";
 };
 
 const handleSelect = (item) => {
@@ -153,7 +163,3 @@ const handleAction = (action) => {
   emit("action", action);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/PoiCompareCard/styles/index.scss b/src/pages/home/components/PoiCompareCard/styles/index.scss
deleted file mode 100644
index f5c3d5f..0000000
--- a/src/pages/home/components/PoiCompareCard/styles/index.scss
+++ /dev/null
@@ -1,234 +0,0 @@
-.poi-compare-card {
-  width: 100%;
-}
-
-.poi-compare-card__overdiv,
-.poi-compare-card__detail-card {
-  border: 1px solid rgba(226, 232, 240, 0.72);
-  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
-}
-
-.poi-compare-card__overdiv {
-  padding: 24px 26px;
-  box-sizing: border-box;
-}
-
-.poi-compare-card__head {
-  min-width: 0;
-}
-
-.poi-compare-card__mark {
-  width: 34px;
-  height: 34px;
-  margin-right: 12px;
-  border: 1px solid #fde68a;
-  color: #f59e0b;
-  font-size: 22px;
-  line-height: 1;
-  background: #fffbeb;
-  box-sizing: border-box;
-}
-
-.poi-compare-card__title {
-  min-width: 0;
-  line-height: 24px;
-}
-
-.poi-compare-card__columns {
-  margin-top: 28px;
-}
-
-.poi-compare-card__place {
-  min-width: 0;
-}
-
-.poi-compare-card__place:active,
-.poi-compare-card__primary:active,
-.poi-compare-card__action:active {
-  opacity: 0.86;
-}
-
-.poi-compare-card__place.is-disabled,
-.poi-compare-card__primary.is-disabled,
-.poi-compare-card__action.is-disabled {
-  opacity: 0.55;
-}
-
-.poi-compare-card__image {
-  height: 140px;
-  border-radius: 18px;
-}
-
-.poi-compare-card__field {
-  margin-top: 12px;
-}
-
-.poi-compare-card__field-label {
-  line-height: 16px;
-}
-
-.poi-compare-card__field-value {
-  margin-top: 5px;
-  line-height: 18px;
-}
-
-.poi-compare-card__chip {
-  display: inline-flex;
-  align-items: center;
-  min-height: 22px;
-  margin-top: 5px;
-  padding: 0 10px;
-  border-radius: 999px;
-  line-height: 22px;
-}
-
-.poi-compare-card__chip--green {
-  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.02);
-}
-
-.poi-compare-card__chip--amber {
-  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.02);
-}
-
-.poi-compare-card__primary {
-  height: 52px;
-  margin-top: 28px;
-  border-radius: 16px;
-}
-
-.poi-compare-card__detail-head {
-  min-width: 0;
-  height: 70px;
-  padding: 0 28px;
-  border-bottom: 1px solid #f1f5f9;
-  box-sizing: border-box;
-}
-
-.poi-compare-card__back {
-  width: 34px;
-  height: 34px;
-  margin-right: 14px;
-  color: #64748b;
-  font-size: 28px;
-  line-height: 1;
-  background: #f8fafc;
-}
-
-.poi-compare-card__detail-title {
-  min-width: 0;
-  line-height: 24px;
-}
-
-.poi-compare-card__compare-label {
-  max-width: 142px;
-  text-align: right;
-  line-height: 16px;
-}
-
-.poi-compare-card__table {
-  padding: 18px 12px 0;
-}
-
-.poi-compare-card__table-row {
-  display: grid;
-  grid-template-columns: 29% 35.5% 35.5%;
-  align-items: stretch;
-}
-
-.poi-compare-card__table-head {
-  min-height: 36px;
-}
-
-.poi-compare-card__table-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 18px;
-}
-
-.poi-compare-card__data-row {
-  border-top: 1px solid #f1f5f9;
-}
-
-.poi-compare-card__row-label {
-  display: flex;
-  align-items: center;
-  min-height: 52px;
-  padding-left: 14px;
-  background: #fff;
-  line-height: 18px;
-  box-sizing: border-box;
-}
-
-.poi-compare-card__cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 52px;
-  text-align: center;
-  line-height: 18px;
-  background: #f8fafc;
-}
-
-.poi-compare-card__cell--green {
-  background: #ecfdf5;
-}
-
-.poi-compare-card__recommend {
-  padding: 20px 30px 0;
-}
-
-.poi-compare-card__recommend-title {
-  line-height: 16px;
-}
-
-.poi-compare-card__tips {
-  margin-top: 20px;
-  padding: 18px 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 16px;
-  background: #f8fafc;
-}
-
-.poi-compare-card__tip + .poi-compare-card__tip {
-  margin-top: 14px;
-}
-
-.poi-compare-card__dot {
-  width: 8px;
-  height: 8px;
-  margin-top: 8px;
-}
-
-.poi-compare-card__dot--green {
-  background: #10b981;
-}
-
-.poi-compare-card__dot--blue {
-  background: #3b82f6;
-}
-
-.poi-compare-card__tip-text {
-  line-height: 22px;
-}
-
-.poi-compare-card__actions {
-  padding: 26px 30px 26px;
-}
-
-.poi-compare-card__action {
-  height: 54px;
-  border-radius: 16px;
-  box-sizing: border-box;
-}
-
-.poi-compare-card__action--secondary {
-  border: 1px solid #e2e8f0;
-  background: #fff;
-}
-
-.poi-compare-card__action-icon {
-  margin-right: 8px;
-  font-size: 18px;
-  line-height: 18px;
-}
diff --git a/src/pages/home/components/RecommendPostsList/index.vue b/src/pages/home/components/RecommendPostsList/index.vue
index fb1bcc0..acc7d46 100644
--- a/src/pages/home/components/RecommendPostsList/index.vue
+++ b/src/pages/home/components/RecommendPostsList/index.vue
@@ -25,6 +25,7 @@
 
 <script setup>
 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";
 
@@ -38,9 +39,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>