hookehuyr

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

<!--
* @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;
......