固定讲解详情页语言切换栏

src/pages/exhibit/detail.vue

@@ -32,31 +32,32 @@
           </view>
         </view>
       </view>
+      <view v-if="contentLanguageOptions.length" class="detail-language-bar">
+        <view class="language-switch" role="tablist" aria-label="讲解语言">
+          <button
+            v-for="option in contentLanguageOptions"
+            :key="option.value"
+            class="language-option"
+            :class="{
+              active: selectedAudioLanguage === option.value,
+              disabled: languageSwitchLoading
+            }"
+            :disabled="languageSwitchLoading"
+            :aria-selected="selectedAudioLanguage === option.value"
+            :aria-label="`切换至${option.label}`"
+            role="tab"
+            @tap="handleLanguageChange(option.value)"
+          >
+            <text class="language-option-text">{{ option.label }}</text>
+          </button>
+        </view>
+      </view>
       <scroll-view
         class="content"
         scroll-y
         :show-scrollbar="false"
       >
         <view class="detail-content">
-          <view v-if="contentLanguageOptions.length" class="language-switch" role="tablist" aria-label="讲解语言">
-            <button
-              v-for="option in contentLanguageOptions"
-              :key="option.value"
-              class="language-option"
-              :class="{
-                active: selectedAudioLanguage === option.value,
-                disabled: languageSwitchLoading
-              }"
-              :disabled="languageSwitchLoading"
-              :aria-selected="selectedAudioLanguage === option.value"
-              :aria-label="`切换至${option.label}`"
-              role="tab"
-              @tap="handleLanguageChange(option.value)"
-            >
-              <text class="language-option-text">{{ option.label }}</text>
-            </button>
-          </view>
-
           <view class="content-section" :class="{ 'is-english': selectedAudioLanguage === 'en-US' }">
             <template v-if="currentDetailParagraphs.length">
               <text
@@ -862,7 +863,7 @@ const handleBack = () => {
 
 .content {
   position: absolute;
-  top: 320px;
+  top: 392px;
   right: 0;
   bottom: 0;
   left: 0;
@@ -872,6 +873,18 @@ const handleBack = () => {
   background: #f7f8f3;
 }
 
+.detail-language-bar {
+  position: absolute;
+  top: 320px;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  height: 72px;
+  padding: 25px 24px 7px;
+  box-sizing: border-box;
+  background: #f7f8f3;
+}
+
 .immersive-hero {
   position: relative;
   min-height: 0;
@@ -969,8 +982,8 @@ const handleBack = () => {
 .detail-chip-row { display: none; }
 
 .detail-content {
-  min-height: calc(100vh - 320px - 72px - env(safe-area-inset-bottom));
+  min-height: calc(100vh - 392px - 72px - env(safe-area-inset-bottom));
-  padding: 25px 24px calc(32px + 72px + env(safe-area-inset-bottom));
+  padding: 24px 24px calc(32px + 72px + env(safe-area-inset-bottom));
   box-sizing: border-box;
   background: #f7f8f3;
 }
@@ -1067,7 +1080,7 @@ const handleBack = () => {
 }
 
 .content-section {
-  margin-top: 24px;
+  margin-top: 0;
   padding-top: 0;
 }
 

tests/unit/ExhibitDetailAudioFirst.spec.ts

@@ -141,6 +141,8 @@ describe('讲解详情音频优先布局', () => {
     expect(wrapper.find('.detail-audio-dock').exists()).toBe(true)
     expect(wrapper.get('.detail-audio-dock').classes()).toContain('is-playable')
     expect(wrapper.find('.language-switch').text()).toContain('English')
+    expect(wrapper.find('.detail-language-bar').exists()).toBe(true)
+    expect(wrapper.find('.content .language-switch').exists()).toBe(false)
     expect(wrapper.get('.content-section').classes()).toContain('is-english')
     expect(wrapper.find('.section-title').exists()).toBe(false)
     expect(wrapper.get('.section-text').text()).toContain('detailed English narration')