fix Bob细节样式调整

hookehuyr
Commit af2714b825c93ceb0057369f3361f6a78ef57e4e af2714b8 1 parent b51a413e
Showing 3 changed files with 65 additions and 79 deletions
components.d.ts
src/views/bieyuan/info.vue
src/views/bieyuan/map.vue
--- a/components.d.ts
View file @af2714b
+++ b/components.d.ts
View file @af2714b
@@ -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']
   }
 }
--- a/src/views/bieyuan/info.vue
View file @af2714b
+++ b/src/views/bieyuan/info.vue
View file @af2714b
 <!--
  * @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">
+      <div class="">
-        <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky animated>
+        <van-config-provider :theme-vars="themeVars">
-          <van-tab title="介 绍">
+          <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" sticky animated>
-            <div class="info-content">
+            <van-tab title="介 绍">
-              <!-- <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
+              <div class="info-content">
-              <div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
+                <div v-html="page_details.introduction" style="padding: 0 1rem;"></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>
-              <div class="van-hairline--bottom" style="margin:  0 1rem;"></div>
+            </van-tab>
-            </div> -->
+            <van-tab title="故 事">
-            <div class="info-content">
+              <div class="info-content">
-              <div v-html="page_details.story" style="padding: 0 1rem;"></div>
+                <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>
               </div>
-              <div style="padding: 0 1rem;">
+            </van-tab>
-                <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
+            <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 class="audio-wrapper">
-            </div> -->
+                <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
-            <div class="info-content">
+                  <div>{{ item.text }}</div>
-              <div v-html="page_details.experience" style="padding: 0 1rem;"></div>
+                  <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
-            </div>
+                  <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
-            <div class="audio-wrapper">
+                  <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
-              <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
+                </div>
-                <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;">
-            <!-- <div style="padding: 0 1rem;">
+                <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
-              <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
+              </div> -->
-            </div> -->
+            </van-tab>
-          </van-tab>
+          </van-tabs>
-        </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>
--- a/src/views/bieyuan/map.vue
View file @af2714b
+++ b/src/views/bieyuan/map.vue
View file @af2714b
 <!--
  * @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;
       // 关闭音频