优化讲解展厅与对象列表视觉

src/components/explain/ExplainHallSelect.vue

@@ -66,9 +66,6 @@
 
             <view class="hall-overview-copy">
               <text class="hall-name">{{ hall.name }}</text>
-              <text v-if="hallCardTheme(hall).englishName" class="hall-overview-english">{{ hallCardTheme(hall).englishName }}</text>
-              <text class="hall-meta-text hall-overview-meta">{{ hallFloorMetaText(hall) }}</text>
-              <view class="hall-go-entry"><text class="hall-go-entry-text">GO ›</text></view>
             </view>
           </view>
         </view>
@@ -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<string>())
 const failedHallPreviewIds = ref(new Set<string>())
 
 const hallPreviewMap: Record<string, string> = {
-  宇宙厅: `${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<string, { color: string; englishName: string }> = {
-  宇宙厅: { 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;
+}
 </style>