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

feat: redesign FacilityLocationCard and RoutePlanCard with improved layout, styles, and mock data; enhance user interaction and visual appeal

Browse Source
This commit is contained in:
DEV_DSW
2026-05-13 15:38:04 +08:00
parent 6fec4d5773
commit 9da046c314
6 changed files with 484 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/ChatModule/FacilityLocationCard/index.vue
View File

@@ -1,38 +1,50 @@
<template>
<CardShell class="facility-location-card" variant="soft">
<view class="facility-location-card__hero">
<MediaFrame class="facility-location-card__image h-170" :src="data.cover" />
<view class="facility-location-card__overlay">
<BadgePill :label="data.badge" tone="blue" />
<view class="facility-location-card__title">{{ data.title }}</view>
<view class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
<image
class="facility-location-card__image block w-full"
:src="data.image"
mode="aspectFill"
/>
<view class="facility-location-card__body px-24 pb-24">
<view class="facility-location-card__title-row flex flex-items-center">
<view class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
{{ type.text }}
</view>
<view class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
{{ data.title }}
</view>
</view>
<view class="facility-location-card__body px-16 pb-16">
<view class="facility-location-card__desc color-64748B font-size-12 font-700">{{ data.description }}</view>
<view class="facility-location-card__list">
<view class="facility-location-card__distance flex flex-items-center color-94A3B8 font-size-14 font-900">
<text class="facility-location-card__distance-icon">{{ distance.icon }}</text>
<text>{{ distance.text }}</text>
</view>
<view class="facility-location-card__location bg-F8FAFC rounded-20">
<view class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
<text class="facility-location-card__location-dot">{{ location.icon }}</text>
<text>{{ location.label }}</text>
</view>
<view class="facility-location-card__location-text color-1E293B font-size-16 font-900">
{{ location.text }}
</view>
</view>
<view
v-for="item in facilities"
:key="item.id || item.name"
class="facility-location-card__item flex flex-items-center gap-10 border-bottom-F1F5F9"
@click="handleSelect(item)"
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }"
@click="handleAction"
>
<view class="facility-location-card__dot rounded-full"></view>
<view class="facility-location-card__info flex-full">
<view class="facility-location-card__name color-1E293B font-size-13 font-900">{{ item.name }}</view>
<view class="facility-location-card__meta color-94A3B8 font-size-10 font-700">{{ item.meta }}</view>
</view>
<view class="facility-location-card__distance color-0891B2 font-size-11 font-900">{{ item.distance }}</view>
<text class="facility-location-card__button-icon">{{ action.icon }}</text>
<text>{{ action.text }}</text>
</view>
</view>
</view>
</CardShell>
</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";
const props = defineProps({
data: {
@@ -45,13 +57,17 @@ const props = defineProps({
},
});
const emit = defineEmits(["select"]);
const emit = defineEmits(["action", "select"]);
const facilities = computed(() => props.data.facilities || []);
const type = computed(() => props.data.type || {});
const distance = computed(() => props.data.distance || {});
const location = computed(() => props.data.location || {});
const action = computed(() => props.data.action || {});
const handleSelect = (item) => {
const handleAction = () => {
if (props.disabled) return;
emit("select", item);
emit("action", props.data);
emit("select", props.data);
};
</script>

28
src/pages/ChatModule/FacilityLocationCard/mocks.js
View File

@@ -1,11 +1,21 @@
export default {
title: "附近设施位置",
badge: "设施引导",
cover: "https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=80",
description: "根据你当前位置推荐最近的服务点和补给点。",
facilities: [
{ id: "f1", name: "游客中心", meta: "咨询、补给、卫生间", distance: "120m" },
{ id: "f2", name: "观光车站", meta: "前往水上森林", distance: "260m" },
{ id: "f3", name: "咖啡轻食", meta: "可短暂停留", distance: "360m" },
],
id: "wolongtan-restroom",
title: "卧龙潭公厕",
image: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=900&q=80",
type: {
text: "厕所",
},
distance: {
icon: "⌖",
text: "距你约 200 米",
},
location: {
icon: "●",
label: "所在位置",
text: "卧龙潭景点入口右侧",
},
action: {
icon: "↗",
text: "带我去",
},
};

111
src/pages/ChatModule/FacilityLocationCard/styles/index.scss
View File

@@ -1,58 +1,87 @@
.facility-location-card__hero {
position: relative;
padding: 8px;
.facility-location-card {
border: 1px solid rgba(226, 232, 240, 0.72);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
box-sizing: border-box;
}
.facility-location-card__image {
}
.facility-location-card__overlay {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
}
.facility-location-card__title {
margin-top: 8px;
color: #fff;
font-size: 18px;
font-weight: 900;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
height: 184px;
}
.facility-location-card__body {
padding-top: 6px;
padding-top: 28px;
box-sizing: border-box;
}
.facility-location-card__desc {
line-height: 20px;
}
.facility-location-card__list {
margin-top: 14px;
}
.facility-location-card__item {
padding: 11px 0;
}
.facility-location-card__dot {
width: 8px;
height: 8px;
background: #06b6d4;
}
.facility-location-card__info {
.facility-location-card__title-row {
min-width: 0;
}
.facility-location-card__name {
.facility-location-card__badge {
height: 30px;
margin-right: 12px;
padding: 0 12px;
border: 1px solid #bfdbfe;
border-radius: 10px;
line-height: 30px;
white-space: nowrap;
box-sizing: border-box;
}
.facility-location-card__meta {
margin-top: 3px;
.facility-location-card__title {
min-width: 0;
line-height: 24px;
}
.facility-location-card__distance {
margin-top: 8px;
line-height: 18px;
}
.facility-location-card__distance-icon {
margin-right: 5px;
font-size: 15px;
line-height: 15px;
}
.facility-location-card__location {
margin-top: 24px;
padding: 18px 20px;
box-sizing: border-box;
}
.facility-location-card__location-label {
line-height: 18px;
}
.facility-location-card__location-dot {
margin-right: 8px;
color: #ec4899;
font-size: 14px;
line-height: 14px;
}
.facility-location-card__location-text {
margin-top: 12px;
line-height: 22px;
}
.facility-location-card__button {
height: 54px;
margin-top: 20px;
border-radius: 16px;
}
.facility-location-card__button:active {
opacity: 0.86;
}
.facility-location-card__button.is-disabled {
opacity: 0.55;
}
.facility-location-card__button-icon {
margin-right: 8px;
font-size: 19px;
line-height: 19px;
}

145
src/pages/ChatModule/RoutePlanCard/index.vue
View File

@@ -1,54 +1,113 @@
<template>
<view class="route-plan-card">
<CardShell v-if="!detailOpen" class="route-plan-card__summary flex flex-items-center gap-12 p-12" pressable :disabled="disabled" @select="openDetail">
<MediaFrame class="route-plan-card__cover w-60 h-60 flex-shrink-0" :src="data.cover" />
<view class="route-plan-card__summary-body flex-full">
<view class="route-plan-card__title color-1E293B font-size-14 font-900 ellipsis-1">{{ data.title }}</view>
<view class="route-plan-card__chips flex flex-wrap gap-6">
<BadgePill v-for="tag in tags" :key="tag" :label="tag" tone="green" />
</view>
</view>
<view class="route-plan-card__arrow color-CBD5E1 font-700">›</view>
</CardShell>
<DetailShell
v-else
:title="data.title"
:tag="data.duration"
tone="green"
@back="closeDetail"
<view class="route-plan-card w-full">
<view
v-if="!detailOpen"
class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
:class="{ 'is-disabled': disabled }"
@click="openDetail"
>
<view class="route-plan-card__flow p-16">
<image
class="route-plan-card__cover block flex-shrink-0"
:src="data.image"
mode="aspectFill"
/>
<view class="route-plan-card__body flex-full">
<view class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
{{ data.title }}
</view>
<view class="route-plan-card__tags flex flex-items-center">
<view
v-for="tag in summaryTags"
:key="tag.id || tag.text"
class="route-plan-card__tag font-size-12 font-900"
:class="getTagClass(tag.tone)"
>
{{ tag.text }}
</view>
</view>
</view>
<view class="route-plan-card__arrow flex-shrink-0"></view>
</view>
<view v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
<view class="route-plan-card__detail-head flex flex-items-center">
<view
class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
@click="closeDetail"
>
‹
</view>
<view class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
{{ data.title }}
</view>
<view class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
{{ detail.badge }}
</view>
</view>
<view class="route-plan-card__timeline">
<template v-for="(node, index) in nodes" :key="node.id || node.title">
<view class="route-plan-card__node flex flex-items-center gap-10 p-10 rounded-18 bg-F8FAFC" @click="handleSelect(node)">
<view class="route-plan-card__num flex flex-items-center flex-justify-center w-24 h-24 rounded-full color-white font-size-12 font-900">{{ index + 1 }}</view>
<MediaFrame class="route-plan-card__node-img w-54 h-54 flex-shrink-0" :src="node.cover" />
<view
class="route-plan-card__node-wrap"
:class="{ 'is-disabled': disabled }"
@click="handleSelect(node)"
>
<view class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
{{ index + 1 }}
</view>
<view class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
<image
class="route-plan-card__node-image block flex-shrink-0"
:src="node.image"
mode="aspectFill"
/>
<view class="route-plan-card__node-body flex-full">
<view class="route-plan-card__node-title color-1E293B font-size-13 font-900 ellipsis-1">{{ node.title }}</view>
<view class="route-plan-card__node-desc color-94A3B8 font-size-10 font-700 ellipsis-1">{{ node.description }}</view>
<BadgePill v-if="node.tip" :label="node.tip" tone="amber" />
<view class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
{{ node.title }}
</view>
<view class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
{{ node.description }}
</view>
<view
v-if="node.tag"
class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900"
>
{{ node.tag }}
</view>
</view>
<view v-if="index < connectors.length" class="route-plan-card__connector">
<view class="route-plan-card__line"></view>
<view class="route-plan-card__connector-text color-64748B font-size-11 font-800">{{ connectors[index] }}</view>
</view>
</view>
<view v-if="connectors[index]" class="route-plan-card__connector">
<view class="route-plan-card__connector-line"></view>
<view class="route-plan-card__connector-arrow"></view>
<view class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
<text class="route-plan-card__connector-icon">{{ connectors[index].icon }}</text>
<text>{{ connectors[index].text }}</text>
</view>
</view>
</template>
<view v-if="tips.length" class="route-plan-card__tips mt-12 p-12 rounded-18 bg-FFFBEB">
<view class="route-plan-card__tips-title font-size-12 font-900">{{ data.tipsTitle }}</view>
<view v-for="tip in tips" :key="tip" class="route-plan-card__tip">{{ tip }}</view>
</view>
<view v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
<view class="route-plan-card__tips-title color-64748B font-size-14 font-900">
{{ detail.tipsTitle }}
</view>
<view
v-for="tip in tips"
:key="tip"
class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900"
>
<view class="route-plan-card__tip-dot rounded-full flex-shrink-0"></view>
<view>{{ tip }}</view>
</view>
</view>
</view>
</DetailShell>
</view>
</template>
<script setup>
import { computed, ref } from "vue";
import CardShell from "../SharedVisual/CardShell.vue";
import DetailShell from "../SharedVisual/DetailShell.vue";
import MediaFrame from "../SharedVisual/MediaFrame.vue";
import BadgePill from "../SharedVisual/BadgePill.vue";
const props = defineProps({
data: {
@@ -64,10 +123,16 @@ const props = defineProps({
const emit = defineEmits(["select", "back"]);
const detailOpen = ref(false);
const tags = computed(() => props.data.tags || []);
const nodes = computed(() => props.data.nodes || []);
const connectors = computed(() => props.data.connectors || []);
const tips = computed(() => props.data.tips || []);
const detail = computed(() => props.data.detail || {});
const summaryTags = computed(() => props.data.summaryTags || []);
const nodes = computed(() => detail.value.nodes || []);
const connectors = computed(() => detail.value.connectors || []);
const tips = computed(() => detail.value.tips || []);
const getTagClass = (tone) => {
if (tone === "green") return "color-047857 bg-ECFDF5";
return "color-64748B bg-F1F5F9";
};
const openDetail = () => {
if (props.disabled) return;

78
src/pages/ChatModule/RoutePlanCard/mocks.js
View File

@@ -1,14 +1,74 @@
export default {
title: "半日轻松游览路线",
duration: "约 2.5 小时",
cover: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=600&q=80",
tags: ["亲子友好", "少走回头路", "含观光车"],
id: "east-in-west-out",
title: "经典东进西出",
image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
summaryTags: [
{
id: "spots",
text: "4 个景点",
tone: "green",
},
{
id: "duration",
text: "5–6 小时",
tone: "gray",
},
{
id: "direction",
text: "东进西出",
tone: "gray",
},
],
detail: {
badge: "4 个景点",
tipsTitle: "出行贴士",
nodes: [
{ id: "n1", title: "游客中心", description: "补给和领取地图", cover: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=400&q=80" },
{ id: "n2", title: "翠谷瀑布", description: "核心观景点", cover: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=400&q=80" },
{ id: "n3", title: "水上森林", description: "慢游和拍照", cover: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80", tip: "推荐停留" },
{
id: "xiaoqikong-bridge",
title: "小七孔古桥",
description: "清代古桥，景区得名之处",
image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&q=80",
},
{
id: "cuigu-waterfall",
title: "翠谷瀑布",
description: "落差110米，国内罕见跌水群",
image: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=400&q=80",
},
{
id: "water-forest",
title: "水上森林",
description: "水中有树，绝无仅有",
image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
tag: "可竹筏游览",
},
{
id: "wolongtan",
title: "卧龙潭",
description: "蓝柔深潭，漂流终点",
image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=400&q=80",
tag: "可卧龙潭漂流",
},
],
connectors: ["步行约 5 分钟", "观光车约 6 分钟"],
tips: ["雨天注意栈道防滑。", "带老人小孩建议优先使用观光车。"],
connectors: [
{
icon: "👣",
text: "步行 · 约5分钟",
},
{
icon: "🚌",
text: "观光车 · 约6分钟",
},
{
icon: "🚣",
text: "漂流 · 约40分钟",
},
],
tips: [
"旺季9点前入园，避开团客高峰",
"中午在翠谷小吃摊补给",
"下午2点后拍翠谷瀑布最出片",
"观光车票50元，建议入园即购",
],
},
};

199
src/pages/ChatModule/RoutePlanCard/styles/index.scss
View File

@@ -2,38 +2,135 @@
width: 100%;
}
.route-plan-card__summary,
.route-plan-card__detail {
border: 1px solid rgba(226, 232, 240, 0.72);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
box-sizing: border-box;
}
.route-plan-card__summary {
min-height: 108px;
padding: 16px 20px;
}
.route-plan-card__summary:active,
.route-plan-card__node-wrap:active {
opacity: 0.86;
}
.route-plan-card__summary.is-disabled,
.route-plan-card__node-wrap.is-disabled {
opacity: 0.55;
}
.route-plan-card__cover {
width: 76px;
height: 76px;
border-radius: 10px;
}
.route-plan-card__summary-body {
.route-plan-card__body {
min-width: 0;
margin-left: 18px;
}
.route-plan-card__title {
line-height: 24px;
}
.route-plan-card__chips {
margin-top: 8px;
.route-plan-card__tags {
min-width: 0;
margin-top: 10px;
}
.route-plan-card__tag {
height: 24px;
padding: 0 11px;
border-radius: 999px;
line-height: 24px;
white-space: nowrap;
}
.route-plan-card__tag + .route-plan-card__tag {
margin-left: 8px;
}
.route-plan-card__arrow {
font-size: 24px;
width: 12px;
height: 12px;
margin-left: 14px;
border-top: 2px solid #cbd5e1;
border-right: 2px solid #cbd5e1;
transform: rotate(45deg);
}
.route-plan-card__flow {
.route-plan-card__detail {
padding-bottom: 26px;
}
.route-plan-card__detail-head {
min-width: 0;
height: 70px;
padding: 0 22px;
border-bottom: 1px solid #f1f5f9;
box-sizing: border-box;
}
.route-plan-card__back {
width: 34px;
height: 34px;
margin-right: 14px;
color: #64748b;
font-size: 28px;
line-height: 1;
background: #f8fafc;
}
.route-plan-card__detail-title {
min-width: 0;
line-height: 24px;
}
.route-plan-card__detail-badge {
height: 26px;
margin-left: 12px;
padding: 0 12px;
border-radius: 999px;
line-height: 26px;
white-space: nowrap;
}
.route-plan-card__timeline {
padding: 26px 18px 0;
}
.route-plan-card__node-wrap {
position: relative;
}
.route-plan-card__node-number {
position: absolute;
left: 20px;
top: 50%;
z-index: 2;
width: 26px;
height: 26px;
transform: translateY(-50%);
}
.route-plan-card__node {
min-height: 88px;
padding: 12px 16px 12px 56px;
border: 1px solid #e5e7eb;
box-sizing: border-box;
}
.route-plan-card__num {
background: #10b981;
}
.route-plan-card__node-img {
.route-plan-card__node-image {
width: 64px;
height: 64px;
margin-right: 14px;
border-radius: 10px;
}
.route-plan-card__node-body {
@@ -41,40 +138,90 @@
}
.route-plan-card__node-title {
line-height: 22px;
}
.route-plan-card__node-desc {
margin: 4px 0 6px;
margin-top: 4px;
line-height: 18px;
}
.route-plan-card__node-tag {
display: inline-flex;
align-items: center;
height: 22px;
margin-top: 6px;
padding: 0 9px;
border: 1px solid #fde68a;
border-radius: 999px;
line-height: 22px;
}
.route-plan-card__connector {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0 8px 22px;
position: relative;
height: 56px;
}
.route-plan-card__line {
.route-plan-card__connector-line {
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 24px;
border-radius: 4px;
background: #d1fae5;
height: 52px;
border-radius: 2px;
background: #bbf7d0;
}
.route-plan-card__connector-text {
.route-plan-card__connector-arrow {
position: absolute;
left: 50%;
top: 42px;
width: 10px;
height: 10px;
border-right: 2px solid #86efac;
border-bottom: 2px solid #86efac;
transform: translateX(-4px) rotate(45deg);
}
.route-plan-card__connector-chip {
position: absolute;
right: 0;
top: 14px;
height: 28px;
padding: 0 12px;
border: 1px solid #e5e7eb;
line-height: 28px;
box-sizing: border-box;
}
.route-plan-card__connector-icon {
margin-right: 5px;
}
.route-plan-card__tips {
margin: 26px 20px 0;
padding: 18px 18px 18px 20px;
border: 1px solid #e2e8f0;
box-sizing: border-box;
}
.route-plan-card__tips-title {
color: #92400e;
margin-bottom: 8px;
margin-bottom: 14px;
line-height: 18px;
}
.route-plan-card__tip {
color: #b45309;
font-size: 11px;
font-weight: 700;
line-height: 18px;
min-height: 22px;
line-height: 22px;
}
.route-plan-card__tip + .route-plan-card__tip {
margin-top: 4px;
}
.route-plan-card__tip-dot {
width: 5px;
height: 5px;
margin-right: 12px;
background: #cbd5e1;
}