Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7c2593f9 1 parent c3e7883c

处理首页进入显示优化

Inline Side-by-side
Showing 2 changed files with 22 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-14 17:48:55 2 * @Date: 2024-09-14 17:48:55
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-14 18:20:47 4 + * @LastEditTime: 2024-09-21 23:04:40
5 * @FilePath: /map-demo/src/views/bieyuan/index.vue 5 * @FilePath: /map-demo/src/views/bieyuan/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 /> 16 />
17 <div style="margin-top: 2rem; font-size: 0.95rem; letter-spacing: 5px; color: #47525F;">山水逢甘露，静心遇桃源</div> 17 <div style="margin-top: 2rem; font-size: 0.95rem; letter-spacing: 5px; color: #47525F;">山水逢甘露，静心遇桃源</div>
18 </div> 18 </div>
19 - <div @click="goTo" style="border: 1px solid #DD7850; padding: 0.8rem 5.5rem; border-radius: 5px; font-size: 1.15rem; color: #DD7850;">进&nbsp;入</div> 19 + <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>
20 </div> 20 </div>
21 </template> 21 </template>
22 22
...@@ -36,8 +36,22 @@ const goTo = () => { ...@@ -36,8 +36,22 @@ const goTo = () => {
36 query: { 36 query: {
37 id: $route.query.id 37 id: $route.query.id
38 } 38 }
39 - }) 39 + });
40 + // 进入标记
41 + localStorage.setItem('first_in_bieyuan', 1);
40 } 42 }
43 +
44 +onMounted(() => {
45 + // 记录第一次进入页面，之后判断是否第一次进入，直接跳转到MAP页面
46 + if (localStorage.getItem('first_in_bieyuan') === '1') {
47 + $router.push({
48 + path: './map',
49 + query: {
50 + id: $route.query.id
51 + }
52 + });
53 + }
54 +});
41 </script> 55 </script>
42 56
43 <style lang="less" scoped> 57 <style lang="less" scoped>
...@@ -47,5 +61,8 @@ const goTo = () => { ...@@ -47,5 +61,8 @@ const goTo = () => {
47 flex-direction: column; 61 flex-direction: column;
48 justify-content: space-evenly; 62 justify-content: space-evenly;
49 align-items: center; 63 align-items: center;
64 + background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
65 + url('https://cdn.ipadbiz.cn/bieyuan/map/MAP@3x.png');
66 + background-size: contain;
50 } 67 }
51 </style> 68 </style>
......
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-21 11:43:17 4 + * @LastEditTime: 2024-09-21 13:20:20
5 * @FilePath: /map-demo/src/views/bieyuan/info.vue 5 * @FilePath: /map-demo/src/views/bieyuan/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 <div @click="goTo()" class="info-btn">前往</div> 28 <div @click="goTo()" class="info-btn">前往</div>
29 </div> 29 </div>
30 <div class="van-hairline--bottom"> 30 <div class="van-hairline--bottom">
31 - <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky> 31 + <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky animated>
32 <van-tab title="介 绍"> 32 <van-tab title="介 绍">
33 <div class="info-content"> 33 <div class="info-content">
34 <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p> 34 <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
......