Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
af2714b8 1 parent b51a413e

fix Bob细节样式调整

Inline Side-by-side
Showing 3 changed files with 65 additions and 79 deletions
......@@ -37,6 +37,7 @@ declare module '@vue/runtime-core' {
VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
VanToast: typeof import('vant/es')['Toast']
VRViewer: typeof import('./src/components/VRViewer/index.vue')['default']
}
}
......
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-22 21:59:49
* @LastEditTime: 2024-09-23 10:52:10
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
<template>
<div class="info-page">
<div class="info-header-wrapper">
<div v-if="showBack" style="position: absolute; top: 1rem; left: 0.5rem; z-index: 9;">
<van-icon name="arrow-left" color="white" size="1.75rem" @click="goBack()" />
</div>
<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">
<van-swipe-item v-for="image in page_details.banner" :key="image">
<van-image fit="cover" width="100%" height="13rem" :src="image" />
</van-swipe-item>
</van-swipe>
......@@ -25,75 +28,37 @@
</div>
<div class="info-sub-title">{{ page_details.note }}</div>
</div>
<div class="van-hairline--bottom">
<van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky animated>
<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 v-html="page_details.introduction" style="padding: 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>
<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>
<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 class="">
<van-config-provider :theme-vars="themeVars">
<van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" sticky animated>
<van-tab title="介 绍">
<div class="info-content">
<div v-html="page_details.introduction" style="padding: 0 1rem;"></div>
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div> -->
<div class="info-content">
<div v-html="page_details.story" style="padding: 0 1rem;"></div>
</div>
</van-tab>
<van-tab title="体 验" id="tab-3">
<!-- <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>
</van-tab>
<van-tab title="故 事">
<div class="info-content">
<div v-html="page_details.story" style="padding: 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" />
</van-tab>
<van-tab title="体 验" id="tab-3">
<div class="info-content">
<div v-html="page_details.experience" style="padding: 0 1rem;"></div>
</div>
<div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
</div> -->
<div class="info-content">
<div v-html="page_details.experience" style="padding: 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" />
<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>
<!-- <div style="padding: 0 1rem;">
<img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
</div> -->
</van-tab>
</van-tabs>
<!-- <div style="padding: 0 1rem;">
<img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
</div> -->
</van-tab>
</van-tabs>
</van-config-provider>
</div>
</div>
<div class="info-logo">
......@@ -121,11 +86,13 @@ const $router = useRouter();
const themeVars = ref({
swipeIndicatorInactiveBackground: '#fff',
swipeIndicatorMargin: '1.5rem'
swipeIndicatorMargin: '1.5rem',
tabFontSize: '0.95rem',
});
const props = defineProps({
info: Object,
height: Number
});
const page_details = ref({});
......@@ -133,9 +100,10 @@ const page_details = ref({});
watch(
() => props.info,
(v) => {
// TODO：获取标记点详情进行后续处理
if (v.details.length) {
page_details.value = { ...v.details[0], position: v.position };
// 获取浏览器可视范围的高度
$('.info-page').height(props.height + 'px');
}
}
)
......@@ -205,7 +173,10 @@ onMounted(async () => {
const current_marker = raw_list.filter(item => item.id == marker_id)[0];
//
page_details.value = { ...current_marker.details[0], position: current_marker.position };
console.log("🚀 ~ file: info.vue:201 ~ onMounted ~ page_details.value:", page_details.value);
// 富文本转义, 分割线样式转换
page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
}
});
......@@ -240,6 +211,12 @@ const goTo = () => { // 打开标记地图显示
}
}
const goBack = () => {
$router.go(-1);
}
const showBack = computed(() => $router.currentRoute.value.path === '/bieyuan/info');
const voicePause = () => {
audio.value.pause();
store.changeAudioStatus('pause');
......@@ -274,13 +251,14 @@ defineExpose({
position: relative;
.info-header-wrapper {
position: relative;
min-height: 2rem;
.header-z {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1rem;
box-shadow: rgba(241, 242, 248, 0.8) 0px -3px 20px 12px;
box-shadow: rgba(241, 242, 248, 0.5) 0px -3px 20px 12px;
background-color: #f7f7f7;
margin: 0 1rem;
border-top-left-radius: 0.5rem;
......@@ -307,6 +285,7 @@ defineExpose({
.info-sub-title {
font-size: 0.85rem;
color: #A0A8B1;
line-height: 1.75;
}
.info-btn {
width: 3rem;
......@@ -320,10 +299,12 @@ defineExpose({
}
}
.info-content {
color: #47525F;
padding: 1rem;
line-height: 1.75;
p {
line-height: 1.75;
padding: 0 0.85rem;
// padding: 0 0.85rem;
text-align: justify;
img {
width: 100%;
......@@ -374,5 +355,9 @@ defineExpose({
justify-content: center;
margin: 3rem;
}
.van-tabs__wrap {
border-bottom: 1px solid #F3F3F3;
}
}
</style>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-22 14:03:09
* @LastEditTime: 2024-09-23 10:50:53
* @FilePath: /map-demo/src/views/bieyuan/map.vue
* @Description: 公众地图主体页面
-->
......@@ -42,7 +42,7 @@
<button @click="show = false">关闭</button>
</div>
</template> -->
<page-info ref="pageInfo" :info="itemInfo" @close-float="onCloseFloat" @route="onRoute"></page-info>
<page-info ref="pageInfo" :info="itemInfo" :height="info_height" @close-float="onCloseFloat" @route="onRoute"></page-info>
<!-- <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
<van-icon name="arrow-left" color="#FFF" size="1.5rem" />
</div> -->
......@@ -176,7 +176,7 @@ export default {
data_paths: {}, // 接口获取-地图导航路径
data_path_list: [], // 接口获取-地图导航路径
info_height: 0,
anchors: [0, (0.45 * window.innerHeight), (1 * window.innerHeight)],
anchors: [0, (0.65 * window.innerHeight), (1 * window.innerHeight)],
themeVars: {
floatingPanelHeaderHeight: 0,
floatingPanelBorderRadius: '1.25rem'
......@@ -375,13 +375,13 @@ export default {
// 打开浮动面板
this.info_height = (0.45 * window.innerHeight);
this.info_height = (0.65 * window.innerHeight);
// 浮动面板样式
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
$('.van-floating-panel').css('boxShadow', '0 0 15px black');
// 定位到当前位置中心
this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
// this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
})
}
// TODO： ID问题看看实际名称叫什么
......@@ -653,7 +653,7 @@ export default {
// })
},
onHeightChange ({ height }) { // 监听浮动面板高度变化
if (height === window.innerHeight) {
if (height > window.innerHeight * 0.6) {
// // 浮动面板样式
// $('.van-floating-panel__content').css('borderRadius', '0');
// this.showClose = true;
......@@ -675,7 +675,7 @@ export default {
}
},
closeFloatPanel () {
this.info_height = (0.45 * window.innerHeight);
this.info_height = (0.65 * window.innerHeight);
$('.van-floating-panel__content').css('borderRadius', '1.25rem');
this.showClose = false;
// 关闭音频
......