From 5a711377b0817c46bf7b23e53f7b196c8212c3b2 Mon Sep 17 00:00:00 2001 From: lyf <2514544224@qq.com> Date: Sat, 18 Jul 2026 01:16:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=B2=E8=A7=A3=E5=B1=95?= =?UTF-8?q?=E5=8E=85=E4=B8=8E=E5=AF=B9=E8=B1=A1=E5=88=97=E8=A1=A8=E8=A7=86?= =?UTF-8?q?=E8=A7=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../explain/ExplainGuideStopCatalog.vue | 64 +++------- src/components/explain/ExplainHallSelect.vue | 111 +++++++++++++----- src/pages/explain/guide-stop-list.vue | 16 +-- static/icons/halls/normalized/animal.png | Bin 0 -> 22976 bytes static/icons/halls/normalized/biology.png | Bin 0 -> 22976 bytes static/icons/halls/normalized/dinosaur.png | Bin 0 -> 27664 bytes static/icons/halls/normalized/earth.png | Bin 0 -> 33306 bytes static/icons/halls/normalized/ecology.png | Bin 0 -> 23154 bytes static/icons/halls/normalized/evolution.png | Bin 0 -> 18245 bytes static/icons/halls/normalized/homeland.png | Bin 0 -> 23782 bytes static/icons/halls/normalized/human.png | Bin 0 -> 17367 bytes static/icons/halls/normalized/universe.png | Bin 0 -> 25414 bytes tests/e2e/explain-hall-page.spec.ts | 11 +- tests/unit/ExplainGuideStopCatalog.spec.ts | 25 ++-- .../ExplainGuideStopListNavigation.spec.ts | 42 ++++++- tests/unit/ExplainHallSelect.spec.ts | 13 +- 16 files changed, 161 insertions(+), 121 deletions(-) create mode 100644 static/icons/halls/normalized/animal.png create mode 100644 static/icons/halls/normalized/biology.png create mode 100644 static/icons/halls/normalized/dinosaur.png create mode 100644 static/icons/halls/normalized/earth.png create mode 100644 static/icons/halls/normalized/ecology.png create mode 100644 static/icons/halls/normalized/evolution.png create mode 100644 static/icons/halls/normalized/homeland.png create mode 100644 static/icons/halls/normalized/human.png create mode 100644 static/icons/halls/normalized/universe.png diff --git a/src/components/explain/ExplainGuideStopCatalog.vue b/src/components/explain/ExplainGuideStopCatalog.vue index 16a7998..32c618d 100644 --- a/src/components/explain/ExplainGuideStopCatalog.vue +++ b/src/components/explain/ExplainGuideStopCatalog.vue @@ -8,33 +8,21 @@ {{ selectedHallName || '讲解对象' }} - - - - - - {{ filter.label }} - - - - - 正在加载讲解对象稍后将展示该展厅的讲解对象。 讲解对象加载失败{{ error }} diff --git a/src/components/explain/ExplainHallSelect.vue b/src/components/explain/ExplainHallSelect.vue index f25bf24..1164920 100644 --- a/src/components/explain/ExplainHallSelect.vue +++ b/src/components/explain/ExplainHallSelect.vue @@ -66,9 +66,6 @@ {{ hall.name }} - {{ hallCardTheme(hall).englishName }} - {{ hallFloorMetaText(hall) }} - GO › @@ -190,33 +187,33 @@ const emit = defineEmits<{ retryMore: [] }>() -const HALL_PREVIEW_BASE = '/static/explain/hall-previews' +const HALL_PREVIEW_BASE = '/static/icons/halls' const HALL_PREVIEW_EAGER_COUNT = 4 const loadedHallPreviewIds = ref(new Set()) const failedHallPreviewIds = ref(new Set()) const hallPreviewMap: Record = { - 宇宙厅: `${HALL_PREVIEW_BASE}/universe.webp`, - 地球厅: `${HALL_PREVIEW_BASE}/earth.webp`, - 演化厅: `${HALL_PREVIEW_BASE}/evolution.webp`, - 恐龙厅: `${HALL_PREVIEW_BASE}/dinosaur.webp`, - 人类厅: `${HALL_PREVIEW_BASE}/human.webp`, - 动物厅: `${HALL_PREVIEW_BASE}/biology.webp`, - 生物厅: `${HALL_PREVIEW_BASE}/biology.webp`, - 生态厅: `${HALL_PREVIEW_BASE}/ecology.webp`, - 家园厅: `${HALL_PREVIEW_BASE}/homeland.webp` + 宇宙厅: `${HALL_PREVIEW_BASE}/normalized/universe.png`, + 地球厅: `${HALL_PREVIEW_BASE}/normalized/earth.png`, + 演化厅: `${HALL_PREVIEW_BASE}/normalized/evolution.png`, + 恐龙厅: `${HALL_PREVIEW_BASE}/normalized/dinosaur.png`, + 人类厅: `${HALL_PREVIEW_BASE}/normalized/human.png`, + 动物厅: `${HALL_PREVIEW_BASE}/normalized/biology.png`, + 生物厅: `${HALL_PREVIEW_BASE}/normalized/biology.png`, + 生态厅: `${HALL_PREVIEW_BASE}/normalized/ecology.png`, + 家园厅: `${HALL_PREVIEW_BASE}/normalized/homeland.png` } const hallCardThemeMap: Record = { - 宇宙厅: { color: '#57c7d9', englishName: 'Universe Hall' }, - 地球厅: { color: '#99de00', englishName: 'Earth Hall' }, - 演化厅: { color: '#b896f2', englishName: 'Evolution Hall' }, - 恐龙厅: { color: '#c7a15c', englishName: 'Dinosaur Hall' }, - 人类厅: { color: '#e8e500', englishName: 'Human Hall' }, - 动物厅: { color: '#08c4b5', englishName: 'Biology Hall' }, - 生物厅: { color: '#08c4b5', englishName: 'Biology Hall' }, - 生态厅: { color: '#8fe5b8', englishName: 'Ecology Hall' }, - 家园厅: { color: '#ffc2a6', englishName: 'Homeland Hall' } + 宇宙厅: { color: '#65d2e4', englishName: '' }, + 地球厅: { color: '#b8e51b', englishName: '' }, + 演化厅: { color: '#cba7ff', englishName: '' }, + 恐龙厅: { color: '#d9b06c', englishName: '' }, + 人类厅: { color: '#e9ea16', englishName: '' }, + 动物厅: { color: '#20c9c0', englishName: '' }, + 生物厅: { color: '#20c9c0', englishName: '' }, + 生态厅: { color: '#94e7be', englishName: '' }, + 家园厅: { color: '#ffc6a5', englishName: '' } } const filteredHalls = computed(() => props.halls) @@ -273,14 +270,6 @@ const handleHallPreviewError = (hallId: string) => { } } -const hallMetaText = (hall: ExplainHallSelectItem) => ( - typeof hall.guideStopCount === 'number' - ? `${hall.guideStopCount || 0} 个讲解对象` - : hall.explainCount > 0 ? `${hall.explainCount} 个展项` : '展厅' -) - -const hallFloorMetaText = (hall: ExplainHallSelectItem) => `${hall.floorLabel || '楼层待补充'} · ${hallMetaText(hall)}` - const hallCardTheme = (hall: ExplainHallSelectItem) => ( hallCardThemeMap[hall.name.trim()] || { color: '#dce5d5', englishName: '' } ) @@ -806,4 +795,66 @@ const handleBack = () => { border: 0; border-radius: 6px; } + +/* Figma hall-browser layout: title plus a single themed icon per card. */ +.explain-hall-select { + background: #f7f9f2; +} + +.explain-page-header { + background: #f7f9f2; +} + +.header-back { + width: 44px; +} + +.header-back-text { + display: none; +} + +.header-back-icon { + width: 20px; + height: 20px; +} + +.header-back-icon::before { + width: 10px; + height: 10px; + transform: translateX(3px) rotate(45deg); +} + +.explain-scroll.hall-stage { + padding: 88px 16px 24px; +} + +.hall-overview-list { + grid-auto-rows: 138px; +} + +.hall-overview-card { + min-height: 138px; +} + +.hall-overview-card .hall-card-art { + top: 50px; + right: 10px; + width: 72px; + height: 72px; +} + +.hall-card-art-image { + mix-blend-mode: multiply; + filter: grayscale(1) brightness(0.72) contrast(1.65); +} + +.hall-overview-copy { + top: 24px; +} + +.hall-overview-card .hall-name { + max-width: 96px; + font-size: 21px; + line-height: 28px; +} diff --git a/src/pages/explain/guide-stop-list.vue b/src/pages/explain/guide-stop-list.vue index 22ea435..703967e 100644 --- a/src/pages/explain/guide-stop-list.vue +++ b/src/pages/explain/guide-stop-list.vue @@ -1,9 +1,8 @@