feat: enhance PoiCompareCard and RecommendationListCard with improved layout, styles, and mock data; remove MultiPoiRecommendationCard from test page
This commit is contained in:
DEV_DSW
@@ -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>
|
||||
<BadgePill v-if="data.badge" :label="data.badge" tone="purple" />
|
||||
<view class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
|
||||
{{ data.title }}
|
||||
</view>
|
||||
<view class="poi-compare-card__grid grid grid-cols-2 gap-10">
|
||||
</view>
|
||||
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</CardShell>
|
||||
|
||||
<DetailShell
|
||||
v-else
|
||||
:title="selectedItem.title"
|
||||
:tag="selectedItem.score"
|
||||
tone="purple"
|
||||
@back="closeDetail"
|
||||
>
|
||||
<view class="poi-compare-card__detail p-16">
|
||||
<image
|
||||
class="poi-compare-card__image block w-full"
|
||||
:src="item.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view
|
||||
v-for="row in selectedDetails"
|
||||
:key="row.label"
|
||||
class="poi-compare-card__row flex flex-justify-between gap-16 border-bottom-F1F5F9"
|
||||
v-for="field in item.fields"
|
||||
:key="field.label"
|
||||
class="poi-compare-card__field"
|
||||
>
|
||||
<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 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>
|
||||
|
||||
<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
|
||||
class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
|
||||
@click="closeDetail"
|
||||
>
|
||||
‹
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</DetailShell>
|
||||
</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">
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</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);
|
||||
|
||||
@@ -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: "查看详情",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user