From c9bb057ae16616a71d687e125e966cac94ed015e Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Wed, 13 May 2026 14:40:00 +0800
Subject: [PATCH] feat: refactor PoiDetailCard layout and styles; update mock
 data for consistency

---
 src/pages/ChatModule/PoiDetailCard/index.vue  | 69 +++++++++----------
 src/pages/ChatModule/PoiDetailCard/mocks.js   | 23 +++----
 .../PoiDetailCard/styles/index.scss           | 67 +++++++++++-------
 3 files changed, 89 insertions(+), 70 deletions(-)

diff --git a/src/pages/ChatModule/PoiDetailCard/index.vue b/src/pages/ChatModule/PoiDetailCard/index.vue
index b9f223a..415ff36 100644
--- a/src/pages/ChatModule/PoiDetailCard/index.vue
+++ b/src/pages/ChatModule/PoiDetailCard/index.vue
@@ -1,45 +1,42 @@
 <template>
-  <CardShell class="poi-detail-card" variant="soft">
-    <view class="poi-detail-card__hero">
-      <MediaFrame class="poi-detail-card__media h-164" :src="data.cover" />
-      <view class="poi-detail-card__tag">
-        <BadgePill :label="data.category" tone="green" />
+  <view class="poi-detail-card bg-white rounded-24 border-box overflow-hidden">
+    <view class="poi-detail-card__hero relative">
+      <image
+        class="poi-detail-card__image w-full h-full block rounded-18"
+        :src="data.image"
+        mode="aspectFill"
+      />
+      <view class="poi-detail-card__badge flex flex-items-center gap-4 font-size-10 font-900">
+        <text class="poi-detail-card__badge-icon">⌖</text>
+        <text>{{ data.badge?.text }}</text>
       </view>
     </view>
-    <view class="poi-detail-card__body p-16">
-      <view class="poi-detail-card__title color-1E293B font-size-18 font-900">{{ data.title }}</view>
-      <view class="poi-detail-card__desc color-64748B font-size-12 font-700">{{ data.description }}</view>
-      <view class="poi-detail-card__facts flex mt-16 rounded-18 bg-F8FAFC">
-        <view v-for="fact in facts" :key="fact.label" class="poi-detail-card__fact flex-full px-8 py-12 text-center">
-          <view class="poi-detail-card__fact-value color-0F172A font-size-14 font-900">{{ fact.value }}</view>
-          <view class="poi-detail-card__fact-label color-94A3B8 font-size-10 font-700">{{ fact.label }}</view>
+
+    <view class="poi-detail-card__body">
+      <view class="poi-detail-card__title color-1E293B font-size-24 font-900">
+        {{ data.title }}
+      </view>
+
+      <view class="poi-detail-card__tip flex flex-items-center gap-10">
+        <view class="poi-detail-card__spark color-047857 font-size-18 font-900">✦</view>
+        <view class="poi-detail-card__tip-text color-047857 font-size-14 font-800">
+          {{ data.tip?.text }}
         </view>
       </view>
-      <view class="poi-detail-card__chips flex flex-wrap gap-8 mt-14">
-        <BadgePill v-for="tag in tags" :key="tag" :label="tag" tone="slate" />
+
+      <view
+        class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-0F172A font-size-16 font-900"
+        :class="{ 'is-disabled': disabled }"
+        @click="handleAction"
+      >
+        <text class="poi-detail-card__button-icon">↗</text>
+        <text>{{ data.action?.text }}</text>
       </view>
     </view>
-    <view class="poi-detail-card__action px-12 pb-12">
-      <ActionRow
-        :title="data.actionTitle"
-        :subtitle="data.actionSubtitle"
-        icon="⌖"
-        tone="green"
-        :disabled="disabled"
-        :payload="data"
-        @action="$emit('action', $event)"
-      />
-    </view>
-  </CardShell>
+  </view>
 </template>
 
 <script setup>
-import { computed } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
-import ActionRow from "../SharedVisual/ActionRow.vue";
-
 const props = defineProps({
   data: {
     type: Object,
@@ -51,10 +48,12 @@ const props = defineProps({
   },
 });
 
-defineEmits(["select", "action"]);
+const emit = defineEmits(["action"]);
 
-const facts = computed(() => props.data.facts || []);
-const tags = computed(() => props.data.tags || []);
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("action", props.data);
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/pages/ChatModule/PoiDetailCard/mocks.js b/src/pages/ChatModule/PoiDetailCard/mocks.js
index 01010d8..fe2ee8d 100644
--- a/src/pages/ChatModule/PoiDetailCard/mocks.js
+++ b/src/pages/ChatModule/PoiDetailCard/mocks.js
@@ -1,14 +1,13 @@
 export default {
-  title: "翠谷瀑布观景台",
-  category: "必看 POI",
-  cover: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80",
-  description: "靠近主步道的核心观景点，适合拍摄瀑布全景，也适合短暂停留休息。",
-  facts: [
-    { label: "步行", value: "8 分钟" },
-    { label: "热度", value: "4.8" },
-    { label: "停留", value: "30 分钟" },
-  ],
-  tags: ["亲子友好", "拍照", "近游客中心"],
-  actionTitle: "打开导航地图",
-  actionSubtitle: "查看路线与距离",
+  title: "小七孔古桥",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80",
+  badge: {
+    text: "核心地标",
+  },
+  tip: {
+    text: "建于道光十五年，走过这座桥就算跨省了哦～",
+  },
+  action: {
+    text: "带我去",
+  },
 };
diff --git a/src/pages/ChatModule/PoiDetailCard/styles/index.scss b/src/pages/ChatModule/PoiDetailCard/styles/index.scss
index 7d09643..8ece0e1 100644
--- a/src/pages/ChatModule/PoiDetailCard/styles/index.scss
+++ b/src/pages/ChatModule/PoiDetailCard/styles/index.scss
@@ -1,48 +1,69 @@
 .poi-detail-card {
-  position: relative;
+  border: 1px solid rgba(15, 23, 42, 0.04);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
 }
 
 .poi-detail-card__hero {
-  position: relative;
+  height: 206px;
   padding: 8px 8px 0;
 }
 
-.poi-detail-card__media {
+.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__tag {
-  position: absolute;
-  left: 18px;
-  bottom: 10px;
+.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: 24px;
+  line-height: 32px;
+  letter-spacing: 0;
 }
 
-.poi-detail-card__desc {
-  margin-top: 8px;
+.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__facts {
+.poi-detail-card__button {
+  height: 54px;
+  margin-top: 16px;
+  border-radius: 14px;
 }
 
-.poi-detail-card__fact {
+.poi-detail-card__button.is-disabled {
+  opacity: 0.55;
 }
 
-.poi-detail-card__fact-value {
-}
-
-.poi-detail-card__fact-label {
-  margin-top: 3px;
-}
-
-.poi-detail-card__chips {
-}
-
-.poi-detail-card__action {
+.poi-detail-card__button-icon {
+  font-size: 18px;
+  line-height: 1;
 }