修复导览与讲解位置预览逻辑

This commit is contained in:
lyf
2026-06-30 11:00:49 +08:00
parent f2a33888b1
commit 1c2cc788d1
29 changed files with 1111 additions and 756 deletions

View File

@@ -24,11 +24,6 @@
</view>
<template v-else>
<view class="section-heading">
<text class="section-title">请选择展厅</text>
<text class="section-count">{{ filteredHalls.length }} 个展厅</text>
</view>
<view v-if="filteredHalls.length" class="hall-list">
<view
v-for="hall in filteredHalls"
@@ -37,10 +32,10 @@
@tap="handleHallClick(hall.id)"
>
<image
v-if="hall.image"
v-if="hallIconUrl(hall)"
class="hall-thumb"
:src="hall.image"
mode="aspectFill"
:src="hallIconUrl(hall)"
mode="aspectFit"
/>
<view v-else class="hall-thumb placeholder">
<text class="hall-thumb-text">{{ hallIconText(hall.name) }}</text>
@@ -96,8 +91,26 @@ const emit = defineEmits<{
back: []
}>()
const HALL_ICON_BASE = '/static/icons/halls'
const hallIconMap: Record<string, string> = {
宇宙厅: `${HALL_ICON_BASE}/universe.jpg`,
地球厅: `${HALL_ICON_BASE}/earth.jpg`,
演化厅: `${HALL_ICON_BASE}/evolution.jpg`,
恐龙厅: `${HALL_ICON_BASE}/dinosaur.jpg`,
人类厅: `${HALL_ICON_BASE}/human.jpg`,
动物厅: `${HALL_ICON_BASE}/animal.jpg`,
生物厅: `${HALL_ICON_BASE}/biology.jpg`,
生态厅: `${HALL_ICON_BASE}/ecology.jpg`,
家园厅: `${HALL_ICON_BASE}/homeland.jpg`
}
const filteredHalls = computed(() => props.halls)
const hallIconUrl = (hall: ExplainHallSelectItem) => {
return hallIconMap[hall.name.trim()] || hall.image || ''
}
const hallIconText = (name: string) => name.trim().slice(0, 1) || '讲'
const handleHallClick = (hallId: string) => {
@@ -124,8 +137,6 @@ const handleBack = () => {
box-sizing: border-box;
}
.section-title,
.section-count,
.state-title,
.state-desc,
.hall-name,
@@ -180,29 +191,6 @@ const handleBack = () => {
color: #151713;
}
.section-heading {
margin-top: 0;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.section-title {
font-size: 19px;
line-height: 27px;
font-weight: 800;
color: #151713;
}
.section-count {
flex-shrink: 0;
font-size: 12px;
line-height: 18px;
color: #7b8275;
}
.hall-list {
display: flex;
flex-direction: column;
@@ -231,7 +219,10 @@ const handleBack = () => {
width: 68px;
height: 68px;
border-radius: 8px;
background: #f1f2ee;
background: #ffffff;
border: 1px solid rgba(36, 49, 42, 0.06);
box-sizing: border-box;
object-fit: contain;
}
.hall-thumb.placeholder {