fix 详情页tab切换因为绝对定位，跳转显示问题修复

hookehuyr
Commit bd476899167f5ee7a7a394996ed7a83426e4b593 bd476899 1 parent 4f80c5a6
Showing 1 changed file with 27 additions and 6 deletions
src/views/bieyuan/info.vue
--- a/src/views/bieyuan/info.vue
View file @bd47689
+++ b/src/views/bieyuan/info.vue
View file @bd47689
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-21 10:49:05
+ * @LastEditTime: 2024-09-21 11:43:17
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -15,9 +15,10 @@
           </van-swipe-item>
         </van-swipe>
       </van-config-provider>
-      <div style="position: absolute; bottom: -13px; left: 0; right: 0; width: 100%; height: 1rem; box-shadow: rgba(241, 242, 248, 0.8) 0px -3px 20px 12px"></div>
+      <div class="header-z"></div>
     </div>
-    <div style=" position: absolute; top: 12.5rem;">
+    <!-- <div style="position: absolute; top: 12.5rem;"> -->
+    <div>
       <div class="info-content-wrapper">
         <div class="info-header">
           <div>
@@ -27,7 +28,7 @@
           <div @click="goTo()" class="info-btn">前往</div>
         </div>
         <div class="van-hairline--bottom">
-          <van-tabs v-model:active="active" color="#DD7850" title-active-color="#DD7850" sticky>
+          <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky>
             <van-tab title="介 绍">
               <div class="info-content">
                 <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
@@ -64,7 +65,7 @@
                 <div class="van-hairline--bottom" style="margin:  0 1rem;"></div>
               </div>
             </van-tab>
-            <van-tab title="体 验">
+            <van-tab title="体 验" id="tab-3">
               <div style="padding: 0 1rem;">
                 <div style="padding: 1rem;">
                   <div style="color: #DD7850;">•&nbsp;供灯</div>
@@ -109,6 +110,8 @@ import { useRoute, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { mainStore } from '@/store';
+import $ from 'jquery';
+
 const store = mainStore();
 const { audio_status, audio_entity } = storeToRefs(store);
@@ -214,6 +217,11 @@ const voicePause = () => {
   store.changeAudioStatus('pause');
 }
+const tabsRef = ref(null);
+const clickTab = (evt) => {
+  tabsRef.value.resize();
+}
+
 watch(
   () => audio_status.value,
   (v) => {
@@ -236,12 +244,25 @@ defineExpose({
   height: 100vh;
   overflow: scroll;
   position: relative;
+  .header-z {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1rem;
+    box-shadow: rgba(241, 242, 248, 0.8) 0px -3px 20px 12px;
+    background-color: #f7f7f7;
+    margin: 0 1rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
   .info-content-wrapper {
     box-shadow: 0px -3px 6px 0 rgba(241, 242, 248, 0.8);
     margin: 1rem;
     margin-top: 0;
     // padding: 1rem;
-    border-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
     background-color: white;
     .info-header {
       padding: 1rem 2rem 0;