From b401be034e1a361b2c75372c60a37309ca13f053 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 20:49:04 +0800
Subject: [PATCH] refactor(PoiDetailCard): clean up component styles

convert all component styles from external SCSS to inline Tailwind utility classes, remove the unused stylesheet file, and update the disabled button's opacity class from is-disabled to opacity-55.
---
 .../home/components/PoiDetailCard/index.vue   | 31 ++++-----
 .../PoiDetailCard/styles/index.scss           | 69 -------------------
 2 files changed, 15 insertions(+), 85 deletions(-)
 delete mode 100644 src/pages/home/components/PoiDetailCard/styles/index.scss

diff --git a/src/pages/home/components/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
index 053c8d1..b25accd 100644
--- a/src/pages/home/components/PoiDetailCard/index.vue
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -1,29 +1,32 @@
 <template>
-  <div class="poi-detail-card bg-white rounded-[24px]  overflow-hidden">
-    <div class="poi-detail-card__hero relative">
+  <div
+    class="bg-white rounded-[24px] overflow-hidden border border-[#0f172a]/[0.04] shadow-[0_10px_28px_rgba(15,23,42,0.04)]">
+    <div class="h-[206px] pt-[8px] px-[8px] relative">
       <image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
-      <div class="poi-detail-card__badge flex items-center gap-4 text-[10px] font-bold">
-        <span class="poi-detail-card__badge-icon">⌖</span>
+      <div
+        class="absolute top-[18px] left-[22px] min-h-[30px] px-[12px] rounded-full text-[#059669] bg-white/90 backdrop-blur-[8px] flex items-center gap-4 text-[10px] font-bold">
+        <span class="text-[13px] leading-none">⌖</span>
         <span>{{ data.badge?.text }}</span>
       </div>
     </div>
 
-    <div class="poi-detail-card__body">
-      <div class="poi-detail-card__title text-[#1e293b] font-size-24 font-bold">
+    <div class="pt-[18px] px-[26px] pb-[24px]">
+      <div class="leading-[32px] letter-spacing-0 text-[#1e293b] font-size-24 font-bold">
         {{ data.title }}
       </div>
 
-      <div class="poi-detail-card__tip flex items-center gap-10">
-        <div class="poi-detail-card__spark text-[#047857] text-[18px] font-bold">✦</div>
-        <div class="poi-detail-card__tip-text text-[#047857] text-[14px] font-bold">
+      <div
+        class="min-h-[46px] mt-[16px] px-[14px] border border-[#d1fae5] rounded-[12px] bg-gradient-to-r from-[#ecfdf5] to-[#f0fdf4]/[0.34] flex items-center gap-10">
+        <div class="leading-none text-[#047857] text-[18px] font-bold">✦</div>
+        <div class="flex-1 min-w-0 leading-[20px] text-[#047857] text-[14px] font-bold">
           {{ data.tip?.text }}
         </div>
       </div>
 
       <div
-        class="poi-detail-card__button flex items-center justify-center gap-8 text-white bg-0F172A text-[16px] font-bold"
-        :class="{ 'is-disabled': disabled }" @click="handleAction">
-        <span class="poi-detail-card__button-icon">↗</span>
+        class="h-[54px] mt-[16px] rounded-[14px] flex items-center justify-center gap-8 text-white bg-0F172A text-[16px] font-bold"
+        :class="{ 'opacity-55': disabled }" @click="handleAction">
+        <span class="text-[18px] leading-none">↗</span>
         <span>{{ data.action?.text }}</span>
       </div>
     </div>
@@ -49,7 +52,3 @@ const handleAction = () => {
   emit("action", props.data);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/PoiDetailCard/styles/index.scss b/src/pages/home/components/PoiDetailCard/styles/index.scss
deleted file mode 100644
index 8ece0e1..0000000
--- a/src/pages/home/components/PoiDetailCard/styles/index.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.poi-detail-card {
-  border: 1px solid rgba(15, 23, 42, 0.04);
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
-}
-
-.poi-detail-card__hero {
-  height: 206px;
-  padding: 8px 8px 0;
-}
-
-.poi-detail-card__badge {
-  position: absolute;
-  top: 18px;
-  left: 22px;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 999px;
-  color: #059669;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(8px);
-}
-
-.poi-detail-card__badge-icon {
-  font-size: 13px;
-  line-height: 1;
-}
-
-.poi-detail-card__body {
-  padding: 18px 26px 24px;
-}
-
-.poi-detail-card__title {
-  line-height: 32px;
-  letter-spacing: 0;
-}
-
-.poi-detail-card__tip {
-  min-height: 46px;
-  margin-top: 16px;
-  padding: 0 14px;
-  border: 1px solid #d1fae5;
-  border-radius: 12px;
-  background: linear-gradient(90deg, #ecfdf5 0%, rgba(240, 253, 244, 0.34) 100%);
-}
-
-.poi-detail-card__spark {
-  line-height: 1;
-}
-
-.poi-detail-card__tip-text {
-  flex: 1;
-  min-width: 0;
-  line-height: 20px;
-}
-
-.poi-detail-card__button {
-  height: 54px;
-  margin-top: 16px;
-  border-radius: 14px;
-}
-
-.poi-detail-card__button.is-disabled {
-  opacity: 0.55;
-}
-
-.poi-detail-card__button-icon {
-  font-size: 18px;
-  line-height: 1;
-}