From d955a56cb0487881329003f90b63645951424143 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 16:29:55 +0800
Subject: [PATCH] refactor(home-components): migrate styles & fix color classes

- Remove FaqHelpCard's external SCSS stylesheet and convert its styles to inline Tailwind utilities
- Fix invalid color utility classes in NoticeCard and LongTextGuideCard to use proper Tailwind text color syntax
- Swap deprecated uni-icons right with van-icon arrow-right in FaqHelpCard
---
 .../home/components/FaqHelpCard/index.vue     | 25 +++++----
 .../components/FaqHelpCard/styles/index.scss  | 54 -------------------
 .../components/LongTextGuideCard/index.vue    |  4 +-
 .../home/components/NoticeCard/index.vue      |  4 +-
 4 files changed, 16 insertions(+), 71 deletions(-)
 delete mode 100644 src/pages/home/components/FaqHelpCard/styles/index.scss

diff --git a/src/pages/home/components/FaqHelpCard/index.vue b/src/pages/home/components/FaqHelpCard/index.vue
index a7b09ad..b05fcf0 100644
--- a/src/pages/home/components/FaqHelpCard/index.vue
+++ b/src/pages/home/components/FaqHelpCard/index.vue
@@ -1,23 +1,26 @@
 <template>
-  <div class="faq-help-card bg-white rounded-[24px] w-full">
-    <div class="faq-help-card__header flex items-center">
-      <div class="faq-help-card__icon flex items-center justify-center rounded-full text-[16px] font-bold">
+  <div
+    class="bg-white rounded-[24px] w-full pt-8 px-8 pb-6 border border-slate-200/72 shadow-[0_12px_30px_rgba(15,23,42,0.05)]">
+    <div class="flex items-center">
+      <div
+        class="w-6 h-6 mr-2.5 border-2 border-emerald-500 text-emerald-500 leading-5 flex items-center justify-center rounded-full text-[16px] font-bold">
         {{ data.icon }}
       </div>
-      <div class="faq-help-card__title text-[#1e293b] font-size-20 font-bold">
+      <div class="leading-[26px] text-[#1e293b] font-size-20 font-bold">
         {{ data.title }}
       </div>
     </div>
 
-    <div class="faq-help-card__divider"></div>
+    <div class="h-px mt-6 mb-4 bg-slate-100"></div>
 
     <div class="faq-help-card__list">
-      <div v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex items-center"
-        :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
-        <div class="faq-help-card__question color-475569 text-[18px] font-bold truncate flex-1">
+      <div v-for="item in questions" :key="item.id || item.text"
+        class="min-h-[42px] flex items-center active:opacity-86" :class="{ 'opacity-55': disabled }"
+        @click="handleSelect(item)">
+        <div class="min-w-0 leading-[24px] text-[#475569] text-[18px] font-bold truncate flex-1">
           {{ item.text }}
         </div>
-        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+        <van-icon name="arrow-right" size="16" color="#CBD5E1"></van-icon>
       </div>
     </div>
   </div>
@@ -46,7 +49,3 @@ const handleSelect = (item) => {
   emit("select", item);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/FaqHelpCard/styles/index.scss b/src/pages/home/components/FaqHelpCard/styles/index.scss
deleted file mode 100644
index f628fa0..0000000
--- a/src/pages/home/components/FaqHelpCard/styles/index.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.faq-help-card {
-  padding: 34px 30px 26px;
-  border: 1px solid rgba(226, 232, 240, 0.72);
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
-  box-sizing: border-box;
-}
-
-.faq-help-card__header {
-  min-width: 0;
-}
-
-.faq-help-card__icon {
-  width: 22px;
-  height: 22px;
-  margin-right: 10px;
-  border: 2px solid #10b981;
-  color: #10b981;
-  line-height: 18px;
-  box-sizing: border-box;
-}
-
-.faq-help-card__title {
-  line-height: 26px;
-}
-
-.faq-help-card__divider {
-  height: 1px;
-  margin: 24px 0 18px;
-  background: #f1f5f9;
-}
-
-.faq-help-card__item {
-  min-height: 42px;
-}
-
-.faq-help-card__item:active {
-  opacity: 0.86;
-}
-
-.faq-help-card__item.is-disabled {
-  opacity: 0.55;
-}
-
-.faq-help-card__question {
-  min-width: 0;
-  line-height: 24px;
-}
-
-.faq-help-card__arrow {
-  width: 22px;
-  margin-left: 16px;
-  text-align: right;
-  line-height: 24px;
-}
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index e1991ad..73fb16c 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -36,7 +36,7 @@
 
       <div class="long-text-guide-card__rich-body">
         <div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
-          class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
+          class="long-text-guide-card__paragraph text-[#475569] text-[15px] font-medium">
           <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
             :key="`${paragraphIndex}-${segmentIndex}`">
             <span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
@@ -60,7 +60,7 @@
         </div>
 
         <div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
-          class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
+          class="long-text-guide-card__paragraph text-[#475569] text-[15px] font-medium">
           <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
             :key="`${paragraphIndex}-${segmentIndex}`">
             <span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
index 15642e9..0732e51 100644
--- a/src/pages/home/components/NoticeCard/index.vue
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -34,13 +34,13 @@
         <div class="notice-card__detail-title text-[#1e293b] font-size-20 font-bold">
           {{ detail.title }}
         </div>
-        <div class="notice-card__time-pill flex items-center bg-[#f8fafc] color-475569 text-[13px] font-bold">
+        <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>
           <span>{{ detail.publishTime }}</span>
         </div>
         <div class="notice-card__divider"></div>
         <div v-for="paragraph in paragraphs" :key="paragraph.id"
-          class="notice-card__paragraph color-475569 text-[14px] font-bold">
+          class="notice-card__paragraph text-[#475569] text-[14px] font-bold">
           <span v-for="segment in paragraph.segments" :key="segment.text"
             :class="{ 'notice-card__strong': segment.strong }">
             {{ segment.text }}