详情页内容调整

hookehuyr
Commit b0331a6f055c8495b2440ecc8bc972b173c45c65 b0331a6f 1 parent 91cd6978
Showing 1 changed file with 55 additions and 21 deletions
src/views/bieyuan/info.vue
--- a/src/views/bieyuan/info.vue
View file @b0331a6
+++ b/src/views/bieyuan/info.vue
View file @b0331a6
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-19 14:06:20
+ * @LastEditTime: 2024-09-19 14:51:41
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -28,23 +28,50 @@
         <van-tabs v-model:active="active" color="#DD7850" title-active-color="#DD7850" sticky>
           <van-tab title="介 绍">
             <div class="info-content">
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+              <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+              <div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+              <div style="padding: 1rem;">
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+                <div style="color: #DD7850;">•&nbsp;五方塔</div>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+                <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂外的草坪，安立着大小不一五座佛塔。信众可绕塔或悬挂风铃祝愿祈福，在肃静庄严的氛围中得到佛力加持，自净其意，心想事成。</div>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+              </div>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+            </div>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+          </van-tab>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+          <van-tab title="故 事">
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
+            <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>
             </div>
           </van-tab>
-          <van-tab title="故 事"></van-tab>
           <van-tab title="体 验">
+            <div style="padding: 0 1rem;">
               <div style="padding: 1rem;">
-              <div style="color: #DD7850;">•&nbsp;静心咖啡</div>
+                <div style="color: #DD7850;">•&nbsp;供灯</div>
-              <div style="color: #47525F; margin-top: 1rem;">静心咖啡绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</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="audio-wrapper">
               <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
@@ -54,13 +81,21 @@
                 <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="width: 100%;">
+            <div style="padding: 0 1rem;">
               <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
             </div>
           </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>
 </template>
@@ -77,12 +112,11 @@ const themeVars = ref({
 const images = ref([
   'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
-  'https://cdn.ipadbiz.cn/bieyuan/map/_DL92427.png',
+  'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png',
-  'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
+  'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png',
-  'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
 ]);
-const active = ref(2);
+const active = ref(0);
 const play_audio_index = ref(null);
 const audioList = ref([{
@@ -182,7 +216,7 @@ defineExpose({
       // align-items: center;
       .info-title {
         font-size: 1.25rem;
-        margin-bottom: 0.25rem;
+        margin-bottom: 0.5rem;
       }
       .info-sub-title {
         font-size: 0.85rem;
@@ -203,7 +237,7 @@ defineExpose({
       padding: 1rem;
     }
     .audio-wrapper {
-      padding: 1rem 0;
+      padding: 1rem;
       .audio-item {
         color: #47525F;
         display: flex;