Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
552ccf03 1 parent b75b8777

fix 细节调整

Inline Side-by-side
Showing 2 changed files with 83 additions and 80 deletions
/*
* @Date: 2023-05-29 11:10:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-20 17:29:12
* @LastEditTime: 2024-09-20 17:54:57
* @FilePath: /map-demo/src/route.js
* @Description: 文件描述
*/
......@@ -64,7 +64,7 @@ export default [
},
{
path: '/bieyuan/info',
component: () => import('@/views/bieyuan/info_w.vue'),
component: () => import('@/views/bieyuan/info.vue'),
meta: {
title: '详情页',
},
......
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-20 17:35:46
* @LastEditTime: 2024-09-20 18:19:58
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
<template>
<div class="info-page">
<div>
<div style="position: relative;">
<van-config-provider :theme-vars="themeVars">
<van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
<van-swipe-item v-for="image in images" :key="image">
......@@ -15,86 +15,89 @@
</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>
<div class="info-content-wrapper">
<div class="info-header">
<div>
<p class="info-title">选佛场</p>
<p class="info-sub-title">南楼2层</p>
<div style=" position: absolute; top: 12.5rem;">
<div class="info-content-wrapper">
<div class="info-header">
<div>
<p class="info-title">选佛场</p>
<p class="info-sub-title">南楼2层</p>
</div>
<div @click="goTo()" class="info-btn">前往</div>
</div>
<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-tab title="介 绍">
<div class="info-content">
<p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;五方塔</div>
<div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂外的草坪，安立着大小不一五座佛塔。信众可绕塔或悬挂风铃祝愿祈福，在肃静庄严的氛围中得到佛力加持，自净其意，心想事成。</div>
</div>
</div>
</van-tab>
<van-tab title="故 事">
<div style="padding: 0 1rem;">
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;选官何如选佛</div>
<div class="van-hairline--bottom">
<van-tabs v-model:active="active" 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>
<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;五方塔</div>
<div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂外的草坪，安立着大小不一五座佛塔。信众可绕塔或悬挂风铃祝愿祈福，在肃静庄严的氛围中得到佛力加持，自净其意，心想事成。</div>
</div>
</div>
</van-tab>
<van-tab title="故 事">
<div style="padding: 0 1rem;">
<van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png" />
</div>
<div style="padding: 1rem;">
<p style="color: #47525F; line-height: 1.75;">过去把禅堂叫作选佛场，意思是选择作佛的场所。这个典故与丹霞禅师有关。 <br />他原本是一个秀才，赴京赶考的途中遇到一位禅师，这位禅师跟他讲，选官何如选佛？考官还不如成佛利益更大。世间功名如过眼云烟，即便追求得到也是暂时利益，执著于此就会烦恼重重，甚至不断造业。而学佛修行，考佛就是要成佛，成就生命永恒的福祉。这是永久的利益，尽未来际的利益。每个生命原本具备觉悟的潜质，具有无尽的功德宝藏，取之不尽用之不竭。成佛，可以断除一切迷惑烦恼，可以彻底地开发我们生命的潜质，全然觉醒，这个利益无量无边。丹霞禅师深具慧根，一经点拨，马上出家。</p>
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div>
<div style="padding: 0 1rem;">
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;把洞窟搬进讲堂</div>
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;选官何如选佛</div>
</div>
<div style="padding: 0 1rem;">
<van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png" />
</div>
<div style="padding: 1rem;">
<p style="color: #47525F; line-height: 1.75;">过去把禅堂叫作选佛场，意思是选择作佛的场所。这个典故与丹霞禅师有关。 <br />他原本是一个秀才，赴京赶考的途中遇到一位禅师，这位禅师跟他讲，选官何如选佛？考官还不如成佛利益更大。世间功名如过眼云烟，即便追求得到也是暂时利益，执著于此就会烦恼重重，甚至不断造业。而学佛修行，考佛就是要成佛，成就生命永恒的福祉。这是永久的利益，尽未来际的利益。每个生命原本具备觉悟的潜质，具有无尽的功德宝藏，取之不尽用之不竭。成佛，可以断除一切迷惑烦恼，可以彻底地开发我们生命的潜质，全然觉醒，这个利益无量无边。丹霞禅师深具慧根，一经点拨，马上出家。</p>
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div>
<div style="padding: 0 1rem;">
<van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;把洞窟搬进讲堂</div>
</div>
<div style="padding: 0 1rem;">
<van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
</div>
<div style="padding: 1rem;">
<p style="color: #47525F; line-height: 1.75;">洞窟，是传统的佛教建筑形式，最早在印度盛行，古代僧人喜欢在崇山峻岭的幽僻处开凿洞窟，遁世修行。选佛场集禅堂与讲堂的功能于一体，把洞窟搬进讲堂，既有回归佛教本怀的宁静温暖，又体现出融入泰宁岩穴文化的祥和之气。</p>
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div>
<div style="padding: 1rem;">
<p style="color: #47525F; line-height: 1.75;">洞窟，是传统的佛教建筑形式，最早在印度盛行，古代僧人喜欢在崇山峻岭的幽僻处开凿洞窟，遁世修行。选佛场集禅堂与讲堂的功能于一体，把洞窟搬进讲堂，既有回归佛教本怀的宁静温暖，又体现出融入泰宁岩穴文化的祥和之气。</p>
</van-tab>
<van-tab title="体 验">
<div style="padding: 0 1rem;">
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;供灯</div>
<div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂内自助供灯。</div>
</div>
<div style="padding: 0 1rem;">
<van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div>
</van-tab>
<van-tab title="体 验">
<div style="padding: 0 1rem;">
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;供灯</div>
<div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂内自助供灯。</div>
<div class="audio-wrapper">
<div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
<div>{{ item.text }}</div>
<!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
<van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
<van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
</div>
</div>
<div style="padding: 0 1rem;">
<van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div>
<!--<div class="audio-wrapper">
<div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
<div>{{ item.text }}</div>
<!~~ <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> ~~>
<van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
<van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
<img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
</div>
</div>-->
<div style="padding: 0 1rem;">
<img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
</div>
</van-tab>
</van-tabs>
</van-tab>
</van-tabs>
</div>
</div>
<div style="display: flex; justify-content: center; margin: 3rem;">
<van-image
width="3rem"
height="3rem"
fit="contain"
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
/>
</div>
</div>
<div style="display: flex; justify-content: center; margin: 3rem;">
<van-image
width="3rem"
height="3rem"
fit="contain"
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
/>
</div>
</div>
</template>
......@@ -114,6 +117,7 @@ const $router = useRouter();
const themeVars = ref({
swipeIndicatorInactiveBackground: '#fff',
swipeIndicatorMargin: '1.5rem'
});
const images = ref([
......@@ -150,8 +154,8 @@ const playAudio = (item, index) => {
console.warn('success');
item.play = true;
// 存放到pinia里面控制
store.changeAudioSrc(audio.value.src);
store.changeAudioStatus('play');
// store.changeAudioSrc(audio.value.src);
// store.changeAudioStatus('play');
}).catch((e) => {
// 失败
console.log('Operation is too fast, audio play fails')
......@@ -174,10 +178,10 @@ onMounted(() => {
}
})
// onUnmounted(() => {
// audio.value.pause();
// store.changeAudioStatus('pause');
// })
onUnmounted(() => {
audio.value.pause();
store.changeAudioStatus('pause');
})
const audio_play = (src, index) => {
audio.value.src = src;
......@@ -233,8 +237,7 @@ defineExpose({
overflow: scroll;
position: relative;
.info-content-wrapper {
// position: absolute;
// top: 14.9rem;
box-shadow: 0px -3px 6px 0 rgba(241, 242, 248, 0.8);
margin: 1rem;
margin-top: 0;
// padding: 1rem;
......