同步移动端源码并修复小程序嵌入标题

src/components/explain/ExplainHallSelect.vue

@@ -53,13 +53,19 @@
                   v-if="!isHallPreviewError(hall.id)"
                   class="hall-full-card-image"
                   :src="hallPreviewUrl(hall)"
-                  mode="aspectFill"
+                  mode="aspectFit"
                   :lazy-load="isHallPreviewLazy(index)"
                   @load="handleHallPreviewLoad(hall.id)"
                   @error="handleHallPreviewError(hall.id)"
                 />
-                <view v-else class="hall-full-card-fallback">
-                  <text class="hall-name">{{ hall.name }}</text>
+                <view v-if="isHallPreviewError(hall.id)" class="hall-full-card-fallback">
+                  <text class="hall-thumb-text">{{ hallIconText(hall.name) }}</text>
+                </view>
+                <view class="hall-full-card-copy">
+                  <text class="hall-full-card-name">{{ hall.name }}</text>
+                  <text v-if="hallCardTheme(hall).englishName" class="hall-full-card-english">
+                    {{ hallCardTheme(hall).englishName }}
+                  </text>
                 </view>
               </view>
               <template v-else>
@@ -253,7 +259,7 @@ const emit = defineEmits<{
   retryMore: []
 }>()
 
-const HALL_PREVIEW_BASE = '/static/icons/halls/custom-cards'
+const HALL_PREVIEW_BASE = '/static/icons/halls/portal-icons'
 const HALL_PREVIEW_EAGER_COUNT = 4
 const loadedHallPreviewIds = ref(new Set<string>())
 const failedHallPreviewIds = ref(new Set<string>())
@@ -271,15 +277,15 @@ const hallPreviewMap: Record<string, string> = {
 }
 
 const hallCardThemeMap: Record<string, { color: string; englishName: string }> = {
-  宇宙厅: { 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: '' }
+  宇宙厅: { color: '#5ed0e4', englishName: 'Cosmos Hall' },
+  地球厅: { color: '#94d40b', englishName: 'Earth Hall' },
+  演化厅: { color: '#bc9afb', englishName: 'Evolution Hall' },
+  恐龙厅: { color: '#bb965a', englishName: 'Dinosaur Hall' },
+  人类厅: { color: '#e0e100', englishName: 'Human Hall' },
+  动物厅: { color: '#00c3b3', englishName: 'Biology Hall' },
+  生物厅: { color: '#00c3b3', englishName: 'Biology Hall' },
+  生态厅: { color: '#87e0b0', englishName: 'Ecology Hall' },
+  家园厅: { color: '#ffbe9e', englishName: 'Homeland Hall' }
 }
 
 const filteredHalls = computed(() => props.halls)
@@ -935,9 +941,13 @@ const handleBack = () => {
 }
 
 .hall-full-card-image {
+  position: absolute;
+  left: 50%;
+  top: 12px;
   display: block;
-  width: 100%;
-  height: 100%;
+  width: 78%;
+  height: calc(100% - 66px);
+  transform: translateX(-50%);
 }
 
 .hall-full-card-fallback {
@@ -945,10 +955,47 @@ const handleBack = () => {
   inset: 0;
   display: flex;
   align-items: center;
-  padding: 24px;
+  justify-content: center;
+  padding-bottom: 46px;
   box-sizing: border-box;
 }
 
+.hall-full-card-copy {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 9px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+}
+
+.hall-full-card-name,
+.hall-full-card-english {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hall-full-card-name {
+  font-size: 19px;
+  line-height: 25px;
+  font-weight: 500;
+  color: #151713;
+}
+
+.hall-full-card-english {
+  margin-top: 0;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 300;
+  color: rgba(21, 23, 19, 0.72);
+}
+
 .hall-overview-copy {
   top: 24px;
 }