From 0afb690262cade4219124d7ebcfce0e7bb39de82 Mon Sep 17 00:00:00 2001 From: DEV_DSW <562304744@qq.com> Date: Wed, 13 May 2026 16:28:57 +0800 Subject: [PATCH] feat: update AigcPhotoCard, FaqHelpCard, MapNavigationCard, NoticeCard, ScenicImageCard with new layouts, styles, and mock data; enhance user interaction and visual appeal --- src/pages/ChatModule/AigcPhotoCard/index.vue | 42 +++--- src/pages/ChatModule/AigcPhotoCard/mocks.js | 15 +-- .../AigcPhotoCard/styles/index.scss | 63 ++++++--- src/pages/ChatModule/FaqHelpCard/index.vue | 45 +++---- src/pages/ChatModule/FaqHelpCard/mocks.js | 21 ++- .../ChatModule/FaqHelpCard/styles/index.scss | 48 ++++--- .../ChatModule/MapNavigationCard/index.vue | 43 ++++-- .../ChatModule/MapNavigationCard/mocks.js | 17 ++- .../MapNavigationCard/styles/index.scss | 55 ++++++-- src/pages/ChatModule/NoticeCard/index.vue | 120 ++++++++++------- src/pages/ChatModule/NoticeCard/mocks.js | 69 +++++++--- .../ChatModule/NoticeCard/styles/index.scss | 127 +++++++++++++----- .../ChatModule/ScenicImageCard/index.vue | 49 ++++--- src/pages/ChatModule/ScenicImageCard/mocks.js | 20 ++- .../ScenicImageCard/styles/index.scss | 46 +++++-- 15 files changed, 514 insertions(+), 266 deletions(-) diff --git a/src/pages/ChatModule/AigcPhotoCard/index.vue b/src/pages/ChatModule/AigcPhotoCard/index.vue index fa49b33..8b377fb 100644 --- a/src/pages/ChatModule/AigcPhotoCard/index.vue +++ b/src/pages/ChatModule/AigcPhotoCard/index.vue @@ -1,31 +1,27 @@ diff --git a/src/pages/ChatModule/FaqHelpCard/mocks.js b/src/pages/ChatModule/FaqHelpCard/mocks.js index e2778b7..27c3813 100644 --- a/src/pages/ChatModule/FaqHelpCard/mocks.js +++ b/src/pages/ChatModule/FaqHelpCard/mocks.js @@ -1,10 +1,19 @@ export default { - title: "常见问题", - subtitle: "快速了解游览和服务信息", - badge: "FAQ", + id: "faq-help", + icon: "?", + title: "您可能还想了解", questions: [ - { id: "q1", question: "景区几点停止入园？", answer: "通常闭园前 1 小时停止入园，节假日以现场公告为准。" }, - { id: "q2", question: "可以携带宠物吗？", answer: "多数室内区域不支持宠物进入，导盲犬等服务犬除外。" }, - { id: "q3", question: "下雨还能游玩吗？", answer: "小雨可游览，雨后水景更好，但请注意栈道湿滑。" }, + { + id: "shuttle-time", + text: "观光车末班车发车时间", + }, + { + id: "power-bank", + text: "景区内哪里有共享充电宝", + }, + { + id: "pet-policy", + text: "可以带宠物入园吗", + }, ], }; diff --git a/src/pages/ChatModule/FaqHelpCard/styles/index.scss b/src/pages/ChatModule/FaqHelpCard/styles/index.scss index f60d7be..f628fa0 100644 --- a/src/pages/ChatModule/FaqHelpCard/styles/index.scss +++ b/src/pages/ChatModule/FaqHelpCard/styles/index.scss @@ -1,36 +1,54 @@ .faq-help-card { + padding: 34px 30px 26px; + border: 1px solid rgba(226, 232, 240, 0.72); + box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05); + box-sizing: border-box; } .faq-help-card__header { - margin-bottom: 12px; + min-width: 0; +} + +.faq-help-card__icon { + width: 22px; + height: 22px; + margin-right: 10px; + border: 2px solid #10b981; + color: #10b981; + line-height: 18px; + box-sizing: border-box; } .faq-help-card__title { + line-height: 26px; } -.faq-help-card__subtitle { - margin-top: 4px; -} - -.faq-help-card__list { +.faq-help-card__divider { + height: 1px; + margin: 24px 0 18px; + background: #f1f5f9; } .faq-help-card__item { + min-height: 42px; } -.faq-help-card__item.is-open { - background: #eff6ff; +.faq-help-card__item:active { + opacity: 0.86; +} + +.faq-help-card__item.is-disabled { + opacity: 0.55; } .faq-help-card__question { + min-width: 0; + line-height: 24px; } .faq-help-card__arrow { - font-size: 18px; - line-height: 14px; -} - -.faq-help-card__answer { - margin-top: 8px; - line-height: 20px; + width: 22px; + margin-left: 16px; + text-align: right; + line-height: 24px; } diff --git a/src/pages/ChatModule/MapNavigationCard/index.vue b/src/pages/ChatModule/MapNavigationCard/index.vue index 3b4ebf1..08e1a32 100644 --- a/src/pages/ChatModule/MapNavigationCard/index.vue +++ b/src/pages/ChatModule/MapNavigationCard/index.vue @@ -1,24 +1,40 @@ diff --git a/src/pages/ChatModule/NoticeCard/mocks.js b/src/pages/ChatModule/NoticeCard/mocks.js index a01e994..4d9148c 100644 --- a/src/pages/ChatModule/NoticeCard/mocks.js +++ b/src/pages/ChatModule/NoticeCard/mocks.js @@ -1,24 +1,49 @@ export default { - title: "景区公告", - subtitle: "重要通知与运营提醒", - badge: "公告", - notices: [ - { - id: "notice-1", - title: "观光车运营时间调整", - summary: "因道路维护，今日 16:30 后部分站点临时调整。", - date: "今日", - type: "运营", - cover: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80", - paragraphs: ["今日 16:30 后，水上森林站点将临时调整至游客中心东侧。", "已购票游客可凭原票乘坐接驳车，请根据现场指引有序排队。"], - }, - { - id: "notice-2", - title: "雨后栈道防滑提醒", - summary: "部分亲水路段地面湿滑，请穿防滑鞋并照看儿童。", - date: "昨天", - type: "安全", - paragraphs: ["雨后栈道区域湿滑，请勿奔跑或翻越护栏。", "如遇临时封闭，请服从现场工作人员安排。"], - }, - ], + id: "wolongtan-trail-notice", + summary: { + title: "卧龙潭", + content: "卧龙潭排队严重。", + publishTime: "发布时间：2025年7月12日 09:30", + actionText: "详情", + }, + detail: { + navTitle: "交通公告", + image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80", + title: "卧龙潭至鸳鸯湖步道临时封闭通知", + timeIcon: "◷", + publishTime: "发布时间：2025年7月12日 09:30", + paragraphs: [ + { + id: "rain", + segments: [ + { + text: "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭", + }, + { + text: "卧龙潭至鸳鸯湖沉溪步道", + strong: true, + }, + { + text: "，封闭时间视水位情况另行通知。", + }, + ], + }, + { + id: "route", + segments: [ + { + text: "受影响游客可改走景区主干道绕行，全程增加约15分钟。观光车服务正常运营，建议优先乘车前往鸳鸯湖区域。", + }, + ], + }, + { + id: "reopen", + segments: [ + { + text: "如水位下降恢复安全标准，景区将第一时间通过广播及公告重新开放步道，请游客留意景区实时公告。", + }, + ], + }, + ], + }, }; diff --git a/src/pages/ChatModule/NoticeCard/styles/index.scss b/src/pages/ChatModule/NoticeCard/styles/index.scss index ed8f326..a86568d 100644 --- a/src/pages/ChatModule/NoticeCard/styles/index.scss +++ b/src/pages/ChatModule/NoticeCard/styles/index.scss @@ -2,59 +2,122 @@ width: 100%; } -.notice-card__list { +.notice-card__summary, +.notice-card__detail { + box-sizing: border-box; } -.notice-card__header { - margin-bottom: 12px; +.notice-card__summary { + padding: 16px 20px 14px; + border: 1px solid #fde68a; + box-shadow: 0 8px 22px rgba(245, 158, 11, 0.08); } -.notice-card__title { +.notice-card__summary-title { + line-height: 22px; } -.notice-card__subtitle { - margin-top: 4px; +.notice-card__summary-content { + margin-top: 6px; + line-height: 20px; } -.notice-card__item { - padding: 13px 0; +.notice-card__summary-footer { + min-width: 0; + margin-top: 8px; } -.notice-card__item:last-child { - border-bottom: none; +.notice-card__summary-time { + min-width: 0; + line-height: 18px; } -.notice-card__item.is-disabled { +.notice-card__summary-link { + margin-left: 16px; + line-height: 18px; + text-decoration: underline; + white-space: nowrap; +} + +.notice-card__summary-link:active { + opacity: 0.82; +} + +.notice-card__summary-link.is-disabled { opacity: 0.55; } -.notice-card__item-body { - min-width: 0; -} - -.notice-card__item-title { -} - -.notice-card__item-desc { - margin-top: 5px; - line-height: 17px; -} - -.notice-card__item-date { -} - .notice-card__detail { + border: 1px solid rgba(226, 232, 240, 0.72); + box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05); } -.notice-card__cover { - margin-bottom: 14px; +.notice-card__detail-head { + height: 68px; + padding: 0 20px; + box-sizing: border-box; } -.notice-card__meta { - margin-bottom: 12px; +.notice-card__back { + width: 34px; + height: 34px; + margin-right: 14px; + color: #64748b; + font-size: 28px; + line-height: 1; + background: #f8fafc; +} + +.notice-card__head-title { + line-height: 24px; +} + +.notice-card__image { + height: 250px; +} + +.notice-card__detail-body { + padding: 22px 20px 28px; + box-sizing: border-box; +} + +.notice-card__detail-title { + line-height: 28px; +} + +.notice-card__time-pill { + display: inline-flex; + height: 34px; + margin-top: 16px; + padding: 0 12px; + border: 1px solid #e2e8f0; + border-radius: 999px; + line-height: 34px; + box-sizing: border-box; +} + +.notice-card__time-icon { + margin-right: 6px; + color: #64748b; + font-size: 15px; + line-height: 15px; +} + +.notice-card__divider { + height: 1px; + margin: 26px 0 20px; + background: #e5e7eb; } .notice-card__paragraph { - margin-bottom: 12px; - line-height: 22px; + line-height: 30px; +} + +.notice-card__paragraph + .notice-card__paragraph { + margin-top: 18px; +} + +.notice-card__strong { + color: #1e293b; + font-weight: 900; } diff --git a/src/pages/ChatModule/ScenicImageCard/index.vue b/src/pages/ChatModule/ScenicImageCard/index.vue index d056203..7a2dbb6 100644 --- a/src/pages/ChatModule/ScenicImageCard/index.vue +++ b/src/pages/ChatModule/ScenicImageCard/index.vue @@ -1,22 +1,35 @@ diff --git a/src/pages/ChatModule/ScenicImageCard/mocks.js b/src/pages/ChatModule/ScenicImageCard/mocks.js index f525d9e..788306f 100644 --- a/src/pages/ChatModule/ScenicImageCard/mocks.js +++ b/src/pages/ChatModule/ScenicImageCard/mocks.js @@ -1,7 +1,19 @@ -export default { +export const scenicImageWithoutCaption = { + id: "bridge-mist-plain", image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80", - caption: { - title: "水上森林二号机位", - subtitle: "下午逆光较弱，适合拍摄树影和水面反射", + action: { + icon: "↗", + }, +}; + +export default { + id: "bridge-mist", + image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80", + caption: { + title: "古桥晨雾机位", + subtitle: "清晨 6:30 雾气最浓，长焦压缩效果极佳", + }, + action: { + icon: "↗", }, }; diff --git a/src/pages/ChatModule/ScenicImageCard/styles/index.scss b/src/pages/ChatModule/ScenicImageCard/styles/index.scss index 18d4a81..b7e8f1e 100644 --- a/src/pages/ChatModule/ScenicImageCard/styles/index.scss +++ b/src/pages/ChatModule/ScenicImageCard/styles/index.scss @@ -1,8 +1,30 @@ -.scenic-image-card__image-wrap { +.scenic-image-card { + height: 324px; + background: #e2e8f0; +} + +.scenic-image-card:active, +.scenic-image-card__expand:active { + opacity: 0.86; +} + +.scenic-image-card.is-disabled { + opacity: 0.55; } .scenic-image-card__image { - border-radius: 0; + height: 100%; +} + +.scenic-image-card__expand { + position: absolute; + top: 16px; + right: 16px; + z-index: 2; + width: 40px; + height: 40px; + background: rgba(15, 23, 42, 0.36); + line-height: 40px; } .scenic-image-card__caption { @@ -10,21 +32,17 @@ left: 0; right: 0; bottom: 0; - padding: 42px 16px 16px; + padding: 72px 22px 20px; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%); } -.scenic-image-card__caption-title { - line-height: 20px; +.scenic-image-card__title { + line-height: 24px; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } -.scenic-image-card__caption-subtitle { - margin-top: 3px; - color: rgba(255, 255, 255, 0.72); -} - -.scenic-image-card__expand { - top: 12px; - right: 12px; - background: rgba(0, 0, 0, 0.32); +.scenic-image-card__subtitle { + margin-top: 4px; + line-height: 18px; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); }