From aa50d9f90d0b0c6b59586b0a5e73e2b62a0b2ca3 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Wed, 13 May 2026 15:04:37 +0800
Subject: [PATCH] feat: enhance PoiCompareCard and RecommendationListCard with
 improved layout, styles, and mock data; remove MultiPoiRecommendationCard
 from test page

---
 src/pages/ChatModule/PoiCompareCard/index.vue | 192 +++++++++++----
 src/pages/ChatModule/PoiCompareCard/mocks.js  | 124 ++++++++--
 .../PoiCompareCard/styles/index.scss          | 218 ++++++++++++++++--
 .../RecommendationListCard/index.vue          |  53 +++--
 .../RecommendationListCard/mocks.js           |  27 +--
 .../RecommendationListCard/styles/index.scss  |  45 ++--
 src/pages/test/index.vue                      |  11 -
 7 files changed, 529 insertions(+), 141 deletions(-)

diff --git a/src/pages/ChatModule/PoiCompareCard/index.vue b/src/pages/ChatModule/PoiCompareCard/index.vue
index 738cb66..6c7ba46 100644
--- a/src/pages/ChatModule/PoiCompareCard/index.vue
+++ b/src/pages/ChatModule/PoiCompareCard/index.vue
@@ -1,55 +1,141 @@
 <template>
-  <view class="poi-compare-card">
-    <CardShell v-if="!selectedItem" class="poi-compare-card__overview p-16" variant="soft">
-      <view class="poi-compare-card__header flex flex-justify-between gap-12">
-        <view>
-          <view class="poi-compare-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view>
-          <view class="poi-compare-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view>
+  <view class="poi-compare-card w-full">
+    <view v-if="!isDetail" class="poi-compare-card__overview bg-white rounded-24 overflow-hidden">
+      <view class="poi-compare-card__head flex flex-items-center">
+        <view class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
+          {{ data.icon }}
+        </view>
+        <view class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
+          {{ data.title }}
         </view>
-        <BadgePill v-if="data.badge" :label="data.badge" tone="purple" />
       </view>
-      <view class="poi-compare-card__grid grid grid-cols-2 gap-10">
+
+      <view class="poi-compare-card__columns grid grid-cols-2 gap-16">
         <view
           v-for="item in items"
-          :key="item.id || item.title"
-          class="poi-compare-card__option p-8 rounded-18 bg-F8FAFC"
+          :key="item.id || item.name"
+          class="poi-compare-card__place"
           :class="{ 'is-disabled': disabled }"
-          @click="openDetail(item)"
+          @click="handleSelect(item)"
         >
-          <MediaFrame class="poi-compare-card__image h-108" :src="item.cover" />
-          <view class="poi-compare-card__option-title color-1E293B font-size-13 font-900 ellipsis-1">{{ item.title }}</view>
-          <view class="poi-compare-card__score color-7C3AED font-size-11 font-900">{{ item.score }}</view>
+          <image
+            class="poi-compare-card__image block w-full"
+            :src="item.image"
+            mode="aspectFill"
+          />
+          <view
+            v-for="field in item.fields"
+            :key="field.label"
+            class="poi-compare-card__field"
+          >
+            <view class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
+              {{ field.label }}
+            </view>
+            <view
+              v-if="field.tone"
+              class="poi-compare-card__chip font-size-12 font-900"
+              :class="getToneClass(field.tone)"
+            >
+              {{ field.value }}
+            </view>
+            <view v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
+              {{ field.value }}
+            </view>
+          </view>
         </view>
       </view>
-    </CardShell>
 
-    <DetailShell
-      v-else
-      :title="selectedItem.title"
-      :tag="selectedItem.score"
-      tone="purple"
-      @back="closeDetail"
-    >
-      <view class="poi-compare-card__detail p-16">
+      <view
+        class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
+        :class="{ 'is-disabled': disabled }"
+        @click="openDetail"
+      >
+        {{ data.detailButtonText }}
+      </view>
+    </view>
+
+    <view v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
+      <view class="poi-compare-card__detail-head flex flex-items-center">
         <view
-          v-for="row in selectedDetails"
-          :key="row.label"
-          class="poi-compare-card__row flex flex-justify-between gap-16 border-bottom-F1F5F9"
+          class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail"
         >
-          <view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-800">{{ row.label }}</view>
-          <view class="poi-compare-card__row-value color-1E293B font-size-12 font-900">{{ row.value }}</view>
+          ‹
+        </view>
+        <view class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
+          {{ detail.title }}
+        </view>
+        <view class="poi-compare-card__compare-label color-94A3B8 font-size-12 font-900">
+          {{ detail.compareLabel }}
         </view>
       </view>
-    </DetailShell>
+
+      <view class="poi-compare-card__table">
+        <view class="poi-compare-card__table-head poi-compare-card__table-row">
+          <view></view>
+          <view
+            v-for="item in items"
+            :key="item.id || item.name"
+            class="poi-compare-card__table-title color-1E293B font-size-14 font-900"
+          >
+            {{ item.name }}
+          </view>
+        </view>
+        <view
+          v-for="row in detail.rows"
+          :key="row.label"
+          class="poi-compare-card__table-row poi-compare-card__data-row"
+        >
+          <view class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
+            {{ row.label }}
+          </view>
+          <view
+            v-for="cell in row.values"
+            :key="row.label + '-' + cell.text"
+            class="poi-compare-card__cell color-1E293B font-size-14 font-900"
+            :class="getCellClass(cell.tone)"
+          >
+            {{ cell.text }}
+          </view>
+        </view>
+      </view>
+
+      <view class="poi-compare-card__recommend">
+        <view class="poi-compare-card__recommend-title color-94A3B8 font-size-12 font-900">
+          {{ detail.recommendTitle }}
+        </view>
+        <view class="poi-compare-card__tips">
+          <view
+            v-for="tip in detail.tips"
+            :key="tip.text"
+            class="poi-compare-card__tip flex gap-10"
+          >
+            <view class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
+            <view class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
+              {{ tip.text }}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="poi-compare-card__actions grid grid-cols-2 gap-14">
+        <view
+          v-for="action in detail.actions"
+          :key="action.id || action.text"
+          class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
+          :class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
+          @click="handleAction(action)"
+        >
+          <text class="poi-compare-card__action-icon">{{ action.icon }}</text>
+          <text>{{ action.text }}</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { computed, ref } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
-import DetailShell from "../SharedVisual/DetailShell.vue";
 
 const props = defineProps({
   data: {
@@ -62,22 +148,50 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["select", "back"]);
+const emit = defineEmits(["select", "back", "action"]);
 
-const selectedItem = ref(null);
+const isDetail = ref(false);
 const items = computed(() => props.data.items || []);
-const selectedDetails = computed(() => selectedItem.value?.details || []);
+const detail = computed(() => props.data.detail || {});
 
-const openDetail = (item) => {
+const getToneClass = (tone) => {
+  const toneMap = {
+    green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
+    amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
+  };
+  return toneMap[tone] || "";
+};
+
+const getCellClass = (tone) => {
+  if (tone === "green") return "poi-compare-card__cell--green";
+  return "";
+};
+
+const getDotClass = (tone) => {
+  if (tone === "blue") return "poi-compare-card__dot--blue";
+  return "poi-compare-card__dot--green";
+};
+
+const handleSelect = (item) => {
   if (props.disabled) return;
-  selectedItem.value = item;
   emit("select", item);
 };
 
+const openDetail = () => {
+  if (props.disabled) return;
+  isDetail.value = true;
+  emit("select", { type: "detail", items: items.value });
+};
+
 const closeDetail = () => {
-  selectedItem.value = null;
+  isDetail.value = false;
   emit("back");
 };
+
+const handleAction = (action) => {
+  if (props.disabled) return;
+  emit("action", action);
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/pages/ChatModule/PoiCompareCard/mocks.js b/src/pages/ChatModule/PoiCompareCard/mocks.js
index 228b0d2..b08cc60 100644
--- a/src/pages/ChatModule/PoiCompareCard/mocks.js
+++ b/src/pages/ChatModule/PoiCompareCard/mocks.js
@@ -1,29 +1,115 @@
 export default {
-  title: "两个目的地怎么选",
-  subtitle: "按距离、拍照和亲子友好度对比",
-  badge: "对比",
+  icon: "✧",
+  title: "小七对比：卧龙潭 vs 鸳鸯湖",
+  detailButtonText: "查看详细对比",
   items: [
     {
-      id: "compare-1",
-      title: "翠谷瀑布",
-      score: "更适合拍照",
-      cover: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=800&q=80",
-      details: [
-        { label: "优势", value: "景观集中、出片快" },
-        { label: "距离", value: "约 500m" },
-        { label: "建议", value: "上午优先前往" },
+      id: "wolongtan",
+      name: "卧龙潭",
+      image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=700&q=80",
+      fields: [
+        {
+          label: "景观类型",
+          value: "深潭观景",
+        },
+        {
+          label: "额外付费",
+          value: "免费",
+          tone: "green",
+        },
+        {
+          label: "开放时间",
+          value: "08:00–18:00",
+        },
       ],
     },
     {
-      id: "compare-2",
-      title: "水上森林",
-      score: "更适合慢游",
-      cover: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800&q=80",
-      details: [
-        { label: "优势", value: "路线平缓、停留舒服" },
-        { label: "距离", value: "约 1.2km" },
-        { label: "建议", value: "下午光线更柔和" },
+      id: "yuanyanghu",
+      name: "鸳鸯湖",
+      image: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=700&q=80",
+      fields: [
+        {
+          label: "景观类型",
+          value: "湖泊划船",
+        },
+        {
+          label: "额外付费",
+          value: "需付费",
+          tone: "amber",
+        },
+        {
+          label: "开放时间",
+          value: "08:00–17:30",
+        },
       ],
     },
   ],
+  detail: {
+    title: "详细对比",
+    compareLabel: "卧龙潭 vs 鸳鸯湖",
+    rows: [
+      {
+        label: "景观类型",
+        values: [
+          {
+            text: "深潭观景",
+          },
+          {
+            text: "湖泊划船",
+            tone: "green",
+          },
+        ],
+      },
+      {
+        label: "额外付费",
+        values: [
+          {
+            text: "免费",
+          },
+          {
+            text: "需付费",
+            tone: "green",
+          },
+        ],
+      },
+      {
+        label: "开放时间",
+        values: [
+          {
+            text: "08:00–18:00",
+          },
+          {
+            text: "08:00–17:30",
+            tone: "green",
+          },
+        ],
+      },
+    ],
+    recommendTitle: "小七推荐",
+    tips: [
+      {
+        tone: "green",
+        text: "拍照 / 打卡 → 选卧龙潭，碧绿深潭配青山，随手出片。",
+      },
+      {
+        tone: "blue",
+        text: "带小孩 / 慢玩 → 选鸳鸯湖，划船探险，时间充裕不赶路。",
+      },
+    ],
+    actions: [
+      {
+        id: "go-wolongtan",
+        text: "去卧龙潭",
+        icon: "↗",
+        targetId: "wolongtan",
+        primary: true,
+      },
+      {
+        id: "go-yuanyanghu",
+        text: "去鸳鸯湖",
+        icon: "↗",
+        targetId: "yuanyanghu",
+      },
+    ],
+  },
 };
diff --git a/src/pages/ChatModule/PoiCompareCard/styles/index.scss b/src/pages/ChatModule/PoiCompareCard/styles/index.scss
index 6b9efb9..f9dac6f 100644
--- a/src/pages/ChatModule/PoiCompareCard/styles/index.scss
+++ b/src/pages/ChatModule/PoiCompareCard/styles/index.scss
@@ -2,55 +2,233 @@
   width: 100%;
 }
 
-.poi-compare-card__overview {
+.poi-compare-card__overview,
+.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__header {
-  margin-bottom: 14px;
+.poi-compare-card__overview {
+  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__subtitle {
-  margin-top: 4px;
+.poi-compare-card__columns {
+  margin-top: 28px;
 }
 
-.poi-compare-card__grid {
+.poi-compare-card__place {
+  min-width: 0;
 }
 
-.poi-compare-card__option {
-}
-
-.poi-compare-card__option:active {
+.poi-compare-card__place:active,
+.poi-compare-card__primary:active,
+.poi-compare-card__action:active {
   opacity: 0.86;
 }
 
-.poi-compare-card__option.is-disabled {
+.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 {
-  margin-bottom: 8px;
+  height: 140px;
+  border-radius: 18px;
 }
 
-.poi-compare-card__option-title {
+.poi-compare-card__field {
+  margin-top: 12px;
 }
 
-.poi-compare-card__score {
-  margin-top: 4px;
+.poi-compare-card__field-label {
+  line-height: 16px;
 }
 
-.poi-compare-card__detail {
+.poi-compare-card__field-value {
+  margin-top: 5px;
+  line-height: 18px;
 }
 
-.poi-compare-card__row {
-  padding: 12px 0;
+.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__row-value {
-  text-align: right;
+.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/ChatModule/RecommendationListCard/index.vue b/src/pages/ChatModule/RecommendationListCard/index.vue
index 62a613b..0ab2994 100644
--- a/src/pages/ChatModule/RecommendationListCard/index.vue
+++ b/src/pages/ChatModule/RecommendationListCard/index.vue
@@ -1,36 +1,45 @@
 <template>
-  <CardShell class="recommendation-list-card p-16" variant="soft">
-    <view class="recommendation-list-card__header flex flex-justify-between gap-12">
-      <view>
-        <view class="recommendation-list-card__title color-1E293B font-size-16 font-900">{{ data.title }}</view>
-        <view class="recommendation-list-card__subtitle color-94A3B8 font-size-11 font-700">{{ data.subtitle }}</view>
-      </view>
-      <BadgePill v-if="data.badge" :label="data.badge" tone="blue" />
-    </view>
-    <view class="recommendation-list-card__list flex flex-col gap-10">
+  <view class="recommendation-list-card w-full">
+    <scroll-view
+      class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full"
+      scroll-x
+      :show-scrollbar="false"
+      enhanced
+    >
       <view
         v-for="item in items"
         :key="item.id || item.title"
-        class="recommendation-list-card__item flex gap-12 p-10 rounded-18 bg-F8FAFC"
+        class="recommendation-list-card__item inline-block bg-white rounded-20 overflow-hidden"
         :class="{ 'is-disabled': disabled }"
         @click="handleSelect(item)"
       >
-        <MediaFrame class="recommendation-list-card__thumb w-72 h-72 flex-shrink-0" :src="item.cover" />
-        <view class="recommendation-list-card__content flex-full">
-          <view class="recommendation-list-card__name color-1E293B font-size-14 font-900 ellipsis-1">{{ item.title }}</view>
-          <view class="recommendation-list-card__desc color-64748B font-size-11 font-700 ellipsis-2">{{ item.description }}</view>
-          <view class="recommendation-list-card__meta color-2563EB font-size-10 font-900">{{ item.meta }}</view>
+        <image
+          class="recommendation-list-card__image block w-full"
+          :src="item.image"
+          mode="aspectFill"
+        />
+        <view class="recommendation-list-card__body p-16">
+          <view class="recommendation-list-card__name color-1E293B font-size-18 font-900 ellipsis-1">
+            {{ item.title }}
+          </view>
+          <view class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
+            <text class="recommendation-list-card__pin">⌖</text>
+            <text>{{ item.distance }}</text>
+          </view>
+          <view
+            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 font-size-12 font-900"
+            @click.stop="handleSelect(item)"
+          >
+            {{ getActionText(item) }}
+          </view>
         </view>
       </view>
-    </view>
-  </CardShell>
+    </scroll-view>
+  </view>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import CardShell from "../SharedVisual/CardShell.vue";
-import BadgePill from "../SharedVisual/BadgePill.vue";
-import MediaFrame from "../SharedVisual/MediaFrame.vue";
 
 const props = defineProps({
   data: {
@@ -47,6 +56,10 @@ const emit = defineEmits(["select"]);
 
 const items = computed(() => props.data.items || []);
 
+const getActionText = (item) => {
+  return (item.action && item.action.text) || "";
+};
+
 const handleSelect = (item) => {
   if (props.disabled) return;
   emit("select", item);
diff --git a/src/pages/ChatModule/RecommendationListCard/mocks.js b/src/pages/ChatModule/RecommendationListCard/mocks.js
index 1eff210..e04152e 100644
--- a/src/pages/ChatModule/RecommendationListCard/mocks.js
+++ b/src/pages/ChatModule/RecommendationListCard/mocks.js
@@ -1,21 +1,22 @@
 export default {
-  title: "为你推荐",
-  subtitle: "按距离和热度排序",
-  badge: "3 个地点",
   items: [
     {
-      id: "list-1",
-      title: "水上森林步道",
-      description: "轻松步行即可到达，适合拍照和短途散步。",
-      meta: "距你 620m",
-      cover: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80",
+      id: "waterfall",
+      title: "翠谷瀑布",
+      image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=700&q=80",
+      distance: "1.2km",
+      action: {
+        text: "查看详情",
+      },
     },
     {
-      id: "list-2",
-      title: "游客中心咖啡吧",
-      description: "可补水休息，靠近返程接驳点。",
-      meta: "步行 5 分钟",
-      cover: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=600&q=80",
+      id: "forest",
+      title: "水上森林",
+      image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=700&q=80",
+      distance: "2.5km",
+      action: {
+        text: "查看详情",
+      },
     },
   ],
 };
diff --git a/src/pages/ChatModule/RecommendationListCard/styles/index.scss b/src/pages/ChatModule/RecommendationListCard/styles/index.scss
index f53cd5a..2d176c6 100644
--- a/src/pages/ChatModule/RecommendationListCard/styles/index.scss
+++ b/src/pages/ChatModule/RecommendationListCard/styles/index.scss
@@ -1,21 +1,18 @@
 .recommendation-list-card {
+  padding: 4px 0 8px;
 }
 
-.recommendation-list-card__header {
-  margin-bottom: 12px;
-}
-
-.recommendation-list-card__title {
-}
-
-.recommendation-list-card__subtitle {
-  margin-top: 4px;
-}
-
-.recommendation-list-card__list {
+.recommendation-list-card__scroll {
+  padding-bottom: 2px;
 }
 
 .recommendation-list-card__item {
+  width: 200px;
+  margin-right: 14px;
+  vertical-align: top;
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
 }
 
 .recommendation-list-card__item:active {
@@ -26,21 +23,31 @@
   opacity: 0.55;
 }
 
-.recommendation-list-card__thumb {
+.recommendation-list-card__image {
+  height: 110px;
 }
 
-.recommendation-list-card__content {
-  min-width: 0;
+.recommendation-list-card__body {
+  box-sizing: border-box;
 }
 
 .recommendation-list-card__name {
+  line-height: 22px;
 }
 
-.recommendation-list-card__desc {
-  margin-top: 5px;
+.recommendation-list-card__distance {
   line-height: 16px;
 }
 
-.recommendation-list-card__meta {
-  margin-top: 7px;
+.recommendation-list-card__pin {
+  font-size: 13px;
+  line-height: 13px;
+}
+
+.recommendation-list-card__button {
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-sizing: border-box;
 }
diff --git a/src/pages/test/index.vue b/src/pages/test/index.vue
index 74d63db..f76369a 100644
--- a/src/pages/test/index.vue
+++ b/src/pages/test/index.vue
@@ -31,15 +31,6 @@
       />
     </view>
 
-    <view class="test-page__section">
-      <view class="test-page__section-title">MultiPoiRecommendationCard</view>
-      <MultiPoiRecommendationCard
-        :data="multiPoiRecommendationCardMock"
-        @select="handleEvent('MultiPoiRecommendationCard', 'select', $event)"
-        @action="handleEvent('MultiPoiRecommendationCard', 'action', $event)"
-      />
-    </view>
-
     <view class="test-page__section">
       <view class="test-page__section-title">PoiCompareCard</view>
       <PoiCompareCard
@@ -119,8 +110,6 @@ import PoiDetailCard from "../ChatModule/PoiDetailCard/index.vue";
 import poiDetailCardMock from "../ChatModule/PoiDetailCard/mocks";
 import RecommendationListCard from "../ChatModule/RecommendationListCard/index.vue";
 import recommendationListCardMock from "../ChatModule/RecommendationListCard/mocks";
-import MultiPoiRecommendationCard from "../ChatModule/MultiPoiRecommendationCard/index.vue";
-import multiPoiRecommendationCardMock from "../ChatModule/MultiPoiRecommendationCard/mocks";
 import PoiCompareCard from "../ChatModule/PoiCompareCard/index.vue";
 import poiCompareCardMock from "../ChatModule/PoiCompareCard/mocks";
 import RoutePlanCard from "../ChatModule/RoutePlanCard/index.vue";