diff --git a/src/pages/home/components/AttachListComponent/index.vue b/src/pages/home/components/AttachListComponent/index.vue
index da327a1..8464e2d 100644
--- a/src/pages/home/components/AttachListComponent/index.vue
+++ b/src/pages/home/components/AttachListComponent/index.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="tag-list">
-    <div v-for="(item, index) in tags" :key="index" class="tag-item" @click="handleClick(item)">
-      <span class="tag-text">{{ item }}</span>
+  <div class="flex flex-wrap px-3 py-1.5">
+    <div v-for="(item, index) in tags" :key="index"
+      class="border border-white bg-white/50 rounded-lg px-2.5 py-1 mr-2 mb-2 inline-flex items-center justify-center"
+      @click="handleClick(item)">
+      <span class="text-[14px] text-[#0ccd58]">{{ item }}</span>
     </div>
   </div>
 </template>
@@ -36,7 +38,3 @@ onMounted(() => {
   });
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/AttachListComponent/styles/index.scss b/src/pages/home/components/AttachListComponent/styles/index.scss
deleted file mode 100644
index 00487d7..0000000
--- a/src/pages/home/components/AttachListComponent/styles/index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 6px 12px;
-}
-
-.tag-item {
-  box-sizing: border-box;
-  border: 1px solid #fff;
-  background-color: rgba(255, 255, 255, 0.5);
-  border-radius: 8px;
-  padding: 4px 10px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tag-text {
-  color: #0ccd58;
-  font-size: 14px;
-}
diff --git a/src/pages/home/components/ChatCardAi/index.vue b/src/pages/home/components/ChatCardAi/index.vue
index f5dc69b..bd612c1 100644
--- a/src/pages/home/components/ChatCardAi/index.vue
+++ b/src/pages/home/components/ChatCardAi/index.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
-  <div class="chat-ai-row">
-    <div class="container">
-      <div class="chat-ai">
-        <div class="container-content">
-          <img v-if="isLoading" class="loading-img" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
+  <div class="w-full flex items-center justify-start">
+    <div class="inline-block align-middle max-w-full overflow-x-hidden">
+      <div class="px-3 min-w-0 max-w-full overflow-hidden break-all">
+        <div class="flex items-center max-w-full">
+          <img v-if="isLoading" class="mr-2 w-7.5 h-6.25" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
           <ChatMarkdown :key="textKey" :text="processedText" />
           <ChatLoading v-if="isLoading" />
         </div>
@@ -62,7 +62,3 @@ watch(
   { immediate: true }
 );
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ChatCardAi/styles/index.scss b/src/pages/home/components/ChatCardAi/styles/index.scss
deleted file mode 100644
index d06329a..0000000
--- a/src/pages/home/components/ChatCardAi/styles/index.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.chat-ai-row {
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center; /* 垂直居中气泡 */
-  justify-content: flex-start; /* 默认左对齐 */
-}
-
-.container {
-  /* 气泡容器：内联块按内容自适应 */
-  display: inline-block;
-  box-sizing: border-box;
-  vertical-align: middle;
-  width: auto;
-  max-width: 100%;
-  overflow-x: hidden;
-}
-
-.chat-ai {
-  padding: 0 12px; // 消息内容的内边距 左右12px
-  min-width: 0;
-  width: auto;
-  max-width: 100%;
-  overflow: hidden;
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
-.container-content {
-  display: flex;
-  align-items: center;
-  max-width: 100%; // ✅ 限制最大宽度
-}
-
-.loading-img {
-  margin-right: 8px;
-  width: 30px;
-  height: 25px;
-}
diff --git a/src/pages/home/components/ChatCardMine/index.vue b/src/pages/home/components/ChatCardMine/index.vue
index 7c42865..94026fe 100644
--- a/src/pages/home/components/ChatCardMine/index.vue
+++ b/src/pages/home/components/ChatCardMine/index.vue
@@ -1,7 +1,8 @@
 <template>
   <!-- 外层行容器：接收来自父组件的对齐类（如 flex justify-end） -->
-  <div class="chat-mine-row">
-    <div class="chat-mine bg-17294E">
+  <div class="w-full flex justify-end">
+    <div
+      class="m-3 px-[16px] py-2 rounded-[15px] bg-[#17294E] inline-block w-auto overflow-x-auto align-top max-w-full">
       <span class="text-[15px] text-white">{{ text }}</span>
       <slot></slot>
     </div>
@@ -17,7 +18,3 @@ defineProps({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ChatCardMine/styles/index.scss b/src/pages/home/components/ChatCardMine/styles/index.scss
deleted file mode 100644
index ca89b24..0000000
--- a/src/pages/home/components/ChatCardMine/styles/index.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.chat-mine-row {
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.chat-mine {
-  margin: 12px;
-  padding: 8px 16px;
-  border-radius: 15px;
-
-  /* 气泡为内联块，按内容宽度自适应；外层 `.chat-mine-row` 控制排列 */
-  display: inline-block;
-  box-sizing: border-box;
-  vertical-align: top;
-  width: auto;
-  max-width: 100%;
-  overflow-x: hidden;
-}
diff --git a/src/pages/home/components/ChatTopWelcome/index.vue b/src/pages/home/components/ChatTopWelcome/index.vue
index 6f4dfc2..6c19d90 100644
--- a/src/pages/home/components/ChatTopWelcome/index.vue
+++ b/src/pages/home/components/ChatTopWelcome/index.vue
@@ -1,8 +1,8 @@
 v
 <template>
-  <div class="welcome-content  p-[12px]">
-    <div class="wrap rounded-[20px]">
-      <div class="flex items-center justify-between  pl-[12px] pr-[12px]">
+  <div class="p-3">
+    <div class="bg-white/50 rounded-[20px]">
+      <div class="flex items-center justify-between pl-3 pr-3">
         <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
           :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
           :displayWidth="spriteStyle.displayWidth" :fps="16" />
@@ -86,7 +86,3 @@ const measureWelcomeHeight = (callback) => {
 
 defineExpose({ measureWelcomeHeight });
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/ChatTopWelcome/styles/index.scss b/src/pages/home/components/ChatTopWelcome/styles/index.scss
deleted file mode 100644
index a73f949..0000000
--- a/src/pages/home/components/ChatTopWelcome/styles/index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.wrap {
-  background-color: rgba(255, 255, 255, 0.5);
-}
\ No newline at end of file
diff --git a/src/pages/home/components/DiscoveryCardComponent/index.vue b/src/pages/home/components/DiscoveryCardComponent/index.vue
index 613b642..8168026 100644
--- a/src/pages/home/components/DiscoveryCardComponent/index.vue
+++ b/src/pages/home/components/DiscoveryCardComponent/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="w-full flex-1 mb-3">
     <div v-for="item in themeDTOList" :key="item.title">
       <RecommendPostsList :recommendTheme="item" />
     </div>
@@ -31,7 +31,3 @@ onMounted(() => {
   loadDiscoveryCradComponent();
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/DiscoveryCardComponent/styles/index.scss b/src/pages/home/components/DiscoveryCardComponent/styles/index.scss
deleted file mode 100644
index 9da07fd..0000000
--- a/src/pages/home/components/DiscoveryCardComponent/styles/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  width: 100%;
-  flex: 1;
-  margin-bottom: 12px;
-}