处理首页进入显示优化

 <!--
  * @Date: 2024-09-14 17:48:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-14 18:20:47
+ * @LastEditTime: 2024-09-21 23:04:40
  * @FilePath: /map-demo/src/views/bieyuan/index.vue
  * @Description: 文件描述
 -->
@@ -16,7 +16,7 @@
       />
       <div style="margin-top: 2rem; font-size: 0.95rem; letter-spacing: 5px; color: #47525F;">山水逢甘露，静心遇桃源</div>
     </div>
-    <div @click="goTo" style="border: 1px solid #DD7850; padding: 0.8rem 5.5rem; border-radius: 5px; font-size: 1.15rem; color: #DD7850;">进&nbsp;入</div>
+    <div @click="goTo" style="border: 1px solid #DD7850; padding: 0.8rem 5.5rem; border-radius: 5px; font-size: 1.15rem; color: #DD7850; background-color: white;">进&nbsp;入</div>
   </div>
 </template>
 
@@ -36,8 +36,22 @@ const goTo = () => {
     query: {
       id: $route.query.id
     }
-  })
+  });
+  // 进入标记
+  localStorage.setItem('first_in_bieyuan', 1);
 }
+
+onMounted(() => {
+  // 记录第一次进入页面，之后判断是否第一次进入，直接跳转到MAP页面
+  if (localStorage.getItem('first_in_bieyuan') === '1') {
+    $router.push({
+      path: './map',
+      query: {
+        id: $route.query.id
+      }
+    });
+  }
+});
 </script>
 
 <style lang="less" scoped>
@@ -47,5 +61,8 @@ const goTo = () => {
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
+    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+    url('https://cdn.ipadbiz.cn/bieyuan/map/MAP@3x.png');
+    background-size: contain;
   }
 </style>

 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-21 11:43:17
+ * @LastEditTime: 2024-09-21 13:20:20
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
@@ -28,7 +28,7 @@
           <div @click="goTo()" class="info-btn">前往</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>
+          <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>