feat: enhance LongTextGuideCard with detailed layout and improved styles; update mocks and add padding utility
This commit is contained in:
DEV_DSW
@@ -1,66 +1,162 @@
|
||||
<template>
|
||||
<view class="long-text-guide-card">
|
||||
<view class="long-text-guide-card w-full">
|
||||
<view v-if="mode === 'list'" class="long-text-guide-card__list w-full">
|
||||
<CardShell
|
||||
<view
|
||||
v-for="item in cards"
|
||||
:key="item.id || item.title"
|
||||
class="long-text-guide-card__item"
|
||||
pressable
|
||||
:disabled="disabled"
|
||||
@select="openDetail(item)"
|
||||
:key="item.id"
|
||||
class="long-text-guide-card__summary-card bg-white rounded-24 border-box"
|
||||
:class="{ 'is-disabled': disabled }"
|
||||
@click="openDetail(item)"
|
||||
>
|
||||
<view class="long-text-guide-card__body px-20 pt-20 pb-12">
|
||||
<view class="long-text-guide-card__meta flex flex-items-center gap-8">
|
||||
<BadgePill :label="item.badge" tone="amber" />
|
||||
<view
|
||||
class="long-text-guide-card__badge font-size-12 font-900"
|
||||
:class="`is-${item.badgeTone}`"
|
||||
>
|
||||
{{ item.badge }}
|
||||
</view>
|
||||
<view class="long-text-guide-card__title color-1E293B font-size-14 font-900">{{ item.title }}</view>
|
||||
<view class="long-text-guide-card__summary color-94A3B8 font-size-12">{{ item.summary }}</view>
|
||||
<view class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
|
||||
{{ item.summary }}
|
||||
</view>
|
||||
<view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
|
||||
<text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
|
||||
<text class="long-text-guide-card__arrow color-CBD5E1 font-700">›</text>
|
||||
</view>
|
||||
<view class="long-text-guide-card__footer flex flex-items-center flex-justify-between px-20 pb-16 color-CBD5E1 font-size-11">
|
||||
<text>{{ item.footer }}</text>
|
||||
<text class="long-text-guide-card__arrow">›</text>
|
||||
</view>
|
||||
</CardShell>
|
||||
</view>
|
||||
|
||||
<DetailShell
|
||||
v-else
|
||||
:title="activeItem.title"
|
||||
:tag="activeItem.badge"
|
||||
tone="amber"
|
||||
@back="closeDetail"
|
||||
>
|
||||
<view class="long-text-guide-card__detail p-18">
|
||||
<view v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
|
||||
<view class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
|
||||
<view
|
||||
v-for="(section, index) in detailSections"
|
||||
:key="section.title || index"
|
||||
class="long-text-guide-card__section"
|
||||
class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
|
||||
@click="closeDetail"
|
||||
>
|
||||
<view class="long-text-guide-card__section-title color-1E293B font-size-15 font-900">{{ section.title }}</view>
|
||||
<view class="long-text-guide-card__section-text color-475569 font-size-13 font-600">{{ section.content }}</view>
|
||||
‹
|
||||
</view>
|
||||
<view v-if="activeItem.action" class="long-text-guide-card__action">
|
||||
<ActionRow
|
||||
:title="activeItem.action.title"
|
||||
:subtitle="activeItem.action.subtitle"
|
||||
:icon="activeItem.action.icon"
|
||||
tone="amber"
|
||||
:disabled="disabled"
|
||||
:payload="activeItem"
|
||||
@action="$emit('action', $event)"
|
||||
<view class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
|
||||
{{ activeItem.title }}
|
||||
</view>
|
||||
<view
|
||||
class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
|
||||
:class="`is-${activeItem.badgeTone}`"
|
||||
>
|
||||
{{ activeItem.badge }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="long-text-guide-card__rich-body">
|
||||
<view
|
||||
v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage"
|
||||
:key="`before-${paragraphIndex}`"
|
||||
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
|
||||
>
|
||||
<template
|
||||
v-for="(segment, segmentIndex) in getSegments(paragraph)"
|
||||
:key="`${paragraphIndex}-${segmentIndex}`"
|
||||
>
|
||||
<text
|
||||
v-if="segment.highlight"
|
||||
class="long-text-guide-card__highlight font-800"
|
||||
>
|
||||
{{ segment.text }}
|
||||
</text>
|
||||
<text v-else>{{ segment.text }}</text>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<image
|
||||
v-if="activeItem.image"
|
||||
class="long-text-guide-card__main-image w-full rounded-14 block"
|
||||
:src="activeItem.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
|
||||
<view class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
|
||||
{{ activeItem.sectionTitle }}
|
||||
</view>
|
||||
<view class="long-text-guide-card__tip-block bg-ECFDF5">
|
||||
<view
|
||||
v-for="(tip, index) in activeItem.tips || []"
|
||||
:key="tip"
|
||||
class="long-text-guide-card__tip color-047857 font-size-14 font-800"
|
||||
>
|
||||
{{ index + 1 }} {{ tip }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="(paragraph, paragraphIndex) in paragraphsAfterTips"
|
||||
:key="`after-${paragraphIndex}`"
|
||||
class="long-text-guide-card__paragraph color-475569 font-size-15 font-500"
|
||||
>
|
||||
<template
|
||||
v-for="(segment, segmentIndex) in getSegments(paragraph)"
|
||||
:key="`${paragraphIndex}-${segmentIndex}`"
|
||||
>
|
||||
<text
|
||||
v-if="segment.highlight"
|
||||
class="long-text-guide-card__highlight font-800"
|
||||
>
|
||||
{{ segment.text }}
|
||||
</text>
|
||||
<text v-else>{{ segment.text }}</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
|
||||
<view class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
|
||||
{{ activeItem.action.label }}
|
||||
</view>
|
||||
<view class="long-text-guide-card__map-card rounded-16 overflow-hidden">
|
||||
<view class="long-text-guide-card__map-image-wrap relative">
|
||||
<image
|
||||
class="long-text-guide-card__map-image w-full block"
|
||||
:src="activeItem.action.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="long-text-guide-card__map-tag color-white font-size-10 font-900">
|
||||
{{ activeItem.action.tag }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="long-text-guide-card__map-bar flex flex-items-center bg-white">
|
||||
<view class="flex-full">
|
||||
<view class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</view>
|
||||
<view class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
|
||||
@click="handleAction(activeItem)"
|
||||
>
|
||||
{{ activeItem.action.buttonText }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
|
||||
<view class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
|
||||
{{ activeItem.action.label }}
|
||||
</view>
|
||||
<view class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
|
||||
<image
|
||||
class="long-text-guide-card__photo-image w-full block"
|
||||
:src="activeItem.action.image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
|
||||
↗
|
||||
</view>
|
||||
</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 DetailShell from "../SharedVisual/DetailShell.vue";
|
||||
import ActionRow from "../SharedVisual/ActionRow.vue";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
@@ -79,7 +175,8 @@ const selected = ref(null);
|
||||
const cards = computed(() => props.data.cards || []);
|
||||
const activeItem = computed(() => selected.value || cards.value[0] || {});
|
||||
const mode = computed(() => (selected.value ? "detail" : "list"));
|
||||
const detailSections = computed(() => activeItem.value.sections || []);
|
||||
const paragraphsBeforeImage = computed(() => activeItem.value.paragraphs?.slice(0, 1) || []);
|
||||
const paragraphsAfterTips = computed(() => activeItem.value.paragraphs?.slice(1) || []);
|
||||
|
||||
const openDetail = (item) => {
|
||||
if (props.disabled) return;
|
||||
@@ -91,6 +188,36 @@ const closeDetail = () => {
|
||||
selected.value = null;
|
||||
emit("back");
|
||||
};
|
||||
|
||||
const handleAction = (item) => {
|
||||
if (props.disabled) return;
|
||||
emit("action", item);
|
||||
};
|
||||
|
||||
const getSegments = (paragraph) => {
|
||||
const text = paragraph?.text || "";
|
||||
const highlights = paragraph?.highlights || [];
|
||||
if (!highlights.length) return [{ text, highlight: false }];
|
||||
|
||||
const segments = [];
|
||||
let cursor = 0;
|
||||
|
||||
highlights.forEach((highlight) => {
|
||||
const start = text.indexOf(highlight, cursor);
|
||||
if (start < 0) return;
|
||||
if (start > cursor) {
|
||||
segments.push({ text: text.slice(cursor, start), highlight: false });
|
||||
}
|
||||
segments.push({ text: highlight, highlight: true });
|
||||
cursor = start + highlight.length;
|
||||
});
|
||||
|
||||
if (cursor < text.length) {
|
||||
segments.push({ text: text.slice(cursor), highlight: false });
|
||||
}
|
||||
|
||||
return segments.length ? segments : [{ text, highlight: false }];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,17 +1,99 @@
|
||||
export default {
|
||||
cards: [
|
||||
{
|
||||
id: "guide-waterfall",
|
||||
badge: "攻略",
|
||||
time: "约 3 分钟阅读",
|
||||
title: "瀑布观景路线怎么走更顺",
|
||||
summary: "从入口到核心观景台的轻量攻略，适合第一次到访时快速决策。",
|
||||
footer: "查看完整攻略",
|
||||
sections: [
|
||||
{ title: "推荐顺序", content: "先到主观景台确认水量，再沿木栈道前往侧面机位，回程避开逆光时段。" },
|
||||
{ title: "体验提醒", content: "雨后地面湿滑，建议预留 40 分钟，不要在低洼处长时间停留。" },
|
||||
id: "rafting",
|
||||
type: "rafting",
|
||||
badge: "漂流攻略",
|
||||
badgeTone: "amber",
|
||||
title: "漂流必备避坑指南",
|
||||
summary: "全长约2公里，落差高达15米。经过三段激流区，一定要准备好换洗衣物和防水袋...",
|
||||
footer: "点击查看完整攻略",
|
||||
image: "https://images.unsplash.com/photo-1530866495561-507c9faab2ed?w=900&q=80",
|
||||
paragraphs: [
|
||||
{
|
||||
text: "漂流全长约 2 公里，落差高达 15 米，全程约 40 分钟。途中经过三段激流区，水流湍急，体验感极强。",
|
||||
highlights: ["2 公里"],
|
||||
},
|
||||
{
|
||||
text: "建议选择 上午场（9:00–11:00），水量充足、气温适宜，避开正午阳光暴晒。",
|
||||
highlights: ["上午场（9:00–11:00）"],
|
||||
},
|
||||
],
|
||||
action: { title: "查看景点详情", subtitle: "开放时间、距离与导航", icon: "i" },
|
||||
sectionTitle: "出发前必备清单",
|
||||
tips: [
|
||||
"换洗衣物装入防水袋，手机务必密封",
|
||||
"穿凉鞋或防滑鞋，禁止拖鞋入场",
|
||||
"贵重物品存入景区寄存柜再下水",
|
||||
],
|
||||
action: {
|
||||
type: "none",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "attraction",
|
||||
type: "attraction",
|
||||
badge: "景点介绍",
|
||||
badgeTone: "green",
|
||||
title: "卧龙潭 · 碧绿深潭",
|
||||
summary: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点之一...",
|
||||
footer: "点击查看完整介绍",
|
||||
image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
|
||||
paragraphs: [
|
||||
{
|
||||
text: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点。潭水终年保持 16–18°C，清澈见底，映出周围青山如镜。",
|
||||
highlights: ["16–18°C"],
|
||||
},
|
||||
{
|
||||
text: "卧龙潭位于游览线路末段，建议安排为 半日游终点，游览完后就近乘观光车返回入口。",
|
||||
highlights: ["半日游终点"],
|
||||
},
|
||||
],
|
||||
sectionTitle: "游览小贴士",
|
||||
tips: [
|
||||
"雨季水位上涨，观景平台景色最震撼",
|
||||
"潭边栈道湿滑，请穿防滑鞋慢行",
|
||||
"禁止下水游泳，潭深超过 20 米",
|
||||
],
|
||||
action: {
|
||||
type: "map",
|
||||
label: "带我去这里",
|
||||
tag: "目的地",
|
||||
title: "卧龙潭",
|
||||
subtitle: "步行约 680 米",
|
||||
buttonText: "导航",
|
||||
image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "photo",
|
||||
type: "photo",
|
||||
badge: "拍照攻略",
|
||||
badgeTone: "blue",
|
||||
title: "古桥晨雾最佳机位",
|
||||
summary: "清晨6:30–8:00是拍摄窗口，雾气在桥面漂浮，光线最柔和，推荐用长焦压缩透视...",
|
||||
footer: "点击查看完整攻略",
|
||||
image: "",
|
||||
paragraphs: [
|
||||
{
|
||||
text: "清晨 6:30–8:00 是拍摄黄金窗口。雾气在桥面缓缓漂浮，配合柔和侧光，层次感极强。",
|
||||
highlights: ["6:30–8:00"],
|
||||
},
|
||||
{
|
||||
text: "推荐站在桥下游约 30 米处的石滩，正对桥拱构图，早晨人少，可以从容布局。",
|
||||
highlights: ["30 米处的石滩"],
|
||||
},
|
||||
],
|
||||
sectionTitle: "机位参数建议",
|
||||
tips: [
|
||||
"长焦 85mm+ 压缩透视，桥拱与雾气叠加感更强",
|
||||
"低角度蹲拍，水面倒影纳入前景",
|
||||
"光圈 f/5.6–8，保持前后景均清晰",
|
||||
],
|
||||
action: {
|
||||
type: "image",
|
||||
label: "看机位图",
|
||||
image: "https://images.unsplash.com/photo-1682687982501-1e5898cb8f4b?w=900&q=80",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,58 +1,185 @@
|
||||
.long-text-guide-card,
|
||||
.long-text-guide-card__list {
|
||||
}
|
||||
|
||||
.long-text-guide-card__item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__body {
|
||||
}
|
||||
|
||||
.long-text-guide-card__meta {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__time {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.long-text-guide-card__title {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__summary {
|
||||
margin-top: 8px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__footer {
|
||||
}
|
||||
|
||||
.long-text-guide-card__arrow {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__detail {
|
||||
}
|
||||
|
||||
.long-text-guide-card__section {
|
||||
.long-text-guide-card__summary-card {
|
||||
min-height: 178px;
|
||||
margin-bottom: 16px;
|
||||
padding: 28px 26px 22px;
|
||||
border: 1px solid rgba(15, 23, 42, 0.04);
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
|
||||
transition: transform 0.15s ease, opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.long-text-guide-card__section-title {
|
||||
margin-bottom: 8px;
|
||||
.long-text-guide-card__summary-card:active {
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
.long-text-guide-card__section-text {
|
||||
.long-text-guide-card__summary-card.is-disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.long-text-guide-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__badge.is-amber {
|
||||
color: #d97706;
|
||||
background: #fffbeb;
|
||||
border-color: #fde68a;
|
||||
}
|
||||
|
||||
.long-text-guide-card__badge.is-green {
|
||||
color: #059669;
|
||||
background: #ecfdf5;
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.long-text-guide-card__badge.is-blue {
|
||||
color: #2563eb;
|
||||
background: #eff6ff;
|
||||
border-color: #bfdbfe;
|
||||
}
|
||||
|
||||
.long-text-guide-card__summary-title {
|
||||
margin-top: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__summary-text {
|
||||
margin-top: 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__action {
|
||||
margin-top: 18px;
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
background: #fffbeb;
|
||||
.long-text-guide-card__summary-footer {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__arrow {
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.long-text-guide-card__detail-card {
|
||||
border: 1px solid rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.long-text-guide-card__detail-header {
|
||||
min-height: 70px;
|
||||
padding: 0 18px 0 20px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__back {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin-right: 12px;
|
||||
color: #64748b;
|
||||
background: #f2f4f6;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.long-text-guide-card__detail-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.long-text-guide-card__detail-badge {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__rich-body {
|
||||
padding: 24px 22px 26px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__paragraph {
|
||||
margin-bottom: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__highlight {
|
||||
color: #065f46;
|
||||
background: #ecfdf5;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__main-image {
|
||||
height: 198px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__section-title {
|
||||
margin-bottom: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__tip-block {
|
||||
margin-bottom: 22px;
|
||||
padding: 12px 18px;
|
||||
border-left: 3px solid #34d399;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__tip {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__action-zone {
|
||||
border-top: 1px solid #f1f5f9;
|
||||
padding: 16px 20px 20px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__action-label {
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__map-card {
|
||||
border: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.long-text-guide-card__map-image {
|
||||
height: 138px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__map-tag {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
bottom: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
.long-text-guide-card__map-bar {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__nav-btn {
|
||||
padding: 12px 18px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__photo-card {
|
||||
min-height: 178px;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.long-text-guide-card__photo-image {
|
||||
height: 178px;
|
||||
}
|
||||
|
||||
.long-text-guide-card__expand {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
bottom: 14px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: rgba(15, 23, 42, 0.36);
|
||||
}
|
||||
|
||||
@@ -15,16 +15,6 @@
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="test-page__section">
|
||||
<view class="test-page__section-title">LongTextGuideComboCard</view>
|
||||
<LongTextGuideComboCard
|
||||
:data="longTextGuideComboCardMock"
|
||||
@select="handleEvent('LongTextGuideComboCard', 'select', $event)"
|
||||
@back="handleEvent('LongTextGuideComboCard', 'back', $event)"
|
||||
@action="handleEvent('LongTextGuideComboCard', 'action', $event)"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="test-page__section">
|
||||
<view class="test-page__section-title">PoiDetailCard</view>
|
||||
<PoiDetailCard
|
||||
@@ -125,8 +115,6 @@
|
||||
<script setup>
|
||||
import LongTextGuideCard from "../ChatModule/LongTextGuideCard/index.vue";
|
||||
import longTextGuideCardMock from "../ChatModule/LongTextGuideCard/mocks";
|
||||
import LongTextGuideComboCard from "../ChatModule/LongTextGuideComboCard/index.vue";
|
||||
import longTextGuideComboCardMock from "../ChatModule/LongTextGuideComboCard/mocks";
|
||||
import PoiDetailCard from "../ChatModule/PoiDetailCard/index.vue";
|
||||
import poiDetailCardMock from "../ChatModule/PoiDetailCard/mocks";
|
||||
import RecommendationListCard from "../ChatModule/RecommendationListCard/index.vue";
|
||||
|
||||
@@ -231,6 +231,10 @@
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.p-18 {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.p-20 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user