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