zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance PoiCompareCard and RecommendationListCard with improved layout, styles, and mock data; remove MultiPoiRecommendationCard from test page

Browse Source
This commit is contained in:
DEV_DSW
2026-05-13 15:04:37 +08:00
parent c9bb057ae1
commit aa50d9f90d
7 changed files with 529 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/pages/ChatModule/RecommendationListCard/index.vue
View File

@@ -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);