Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2024-09-21 11:45:33 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
bd476899167f5ee7a7a394996ed7a83426e4b593
bd476899
1 parent
4f80c5a6
fix 详情页tab切换因为绝对定位,跳转显示问题修复
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
27 additions
and
6 deletions
src/views/bieyuan/info.vue
src/views/bieyuan/info.vue
View file @
bd47689
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-21 1
0:49:05
* @LastEditTime: 2024-09-21 1
1: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;">• 供灯</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;
...
...
Please
register
or
login
to post a comment