Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
471b65d6 1 parent 547467b1

细节调整，新增消息列表

Inline Side-by-side
Showing 6 changed files with 98 additions and 7 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2023-05-30 17:23:26 5 + * @LastEditTime: 2023-07-10 17:48:24
6 * @FilePath: /map-demo/src/App.vue 6 * @FilePath: /map-demo/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
...@@ -69,6 +69,8 @@ body { ...@@ -69,6 +69,8 @@ body {
69 69
70 body { 70 body {
71 position: relative; 71 position: relative;
72 + margin: 0;
73 + padding: 0;
72 // --van-white: #fff; 74 // --van-white: #fff;
73 // --van-blue: #1989fa; 75 // --van-blue: #1989fa;
74 // --van-button-primary-color: var(--van-white); 76 // --van-button-primary-color: var(--van-white);
......
...@@ -204,7 +204,12 @@ export default { ...@@ -204,7 +204,12 @@ export default {
204 if (isNaN(timer)) { 204 if (isNaN(timer)) {
205 timer = 0 205 timer = 0
206 } 206 }
207 - this.play_time = this.calculateCurrentValue(timer) 207 + this.play_time = this.calculateCurrentValue(timer);
208 + // 音频播放完毕
209 + if (this.play_time === '00:00') {
210 + clearInterval(this.play_timer);
211 + this.is_play = false;
212 + }
208 }, 1000); 213 }, 1000);
209 }).catch((e) => { 214 }).catch((e) => {
210 // 失败 215 // 失败
...@@ -216,7 +221,7 @@ export default { ...@@ -216,7 +221,7 @@ export default {
216 this.audio.pause(); 221 this.audio.pause();
217 this.is_play = false; 222 this.is_play = false;
218 this.changeAudioStatus('pause'); 223 this.changeAudioStatus('pause');
219 - clearInterval(this.play_timer) 224 + clearInterval(this.play_timer);
220 }, 225 },
221 goToUrl(url) { 226 goToUrl(url) {
222 location.href = this.info.details[this.isActive].url; 227 location.href = this.info.details[this.isActive].url;
......
...@@ -250,6 +250,12 @@ export default { ...@@ -250,6 +250,12 @@ export default {
250 }, 250 },
251 goToList(id) { 251 goToList(id) {
252 console.warn(id); 252 console.warn(id);
253 + this.$router.push({
254 + path: '/noticeList',
255 + query: {
256 + id
257 + }
258 + })
253 }, 259 },
254 goToHandle(url) { 260 goToHandle(url) {
255 // if (url) { 261 // if (url) {
......
...@@ -6,4 +6,11 @@ export default [ ...@@ -6,4 +6,11 @@ export default [
6 title: '地图展示', 6 title: '地图展示',
7 }, 7 },
8 }, 8 },
9 + {
10 + path: '/noticeList',
11 + component: () => import('@/views/noticeList.vue'),
12 + meta: {
13 + title: '消息中心',
14 + },
15 + },
9 ]; 16 ];
......
...@@ -459,9 +459,9 @@ export default { ...@@ -459,9 +459,9 @@ export default {
459 this.current_safe_route = new AMap.Polyline({ 459 this.current_safe_route = new AMap.Polyline({
460 path, 460 path,
461 isOutline: true, 461 isOutline: true,
462 - outlineColor: '#7F7F7F', 462 + outlineColor: '#fba601',
463 borderWeight: 1, 463 borderWeight: 1,
464 - strokeColor: '#7F7F7F', 464 + strokeColor: '#fba601',
465 strokeOpacity: 1, 465 strokeOpacity: 1,
466 strokeWeight: 1, 466 strokeWeight: 1,
467 // 折线样式还支持 'dashed' 467 // 折线样式还支持 'dashed'
...@@ -476,7 +476,7 @@ export default { ...@@ -476,7 +476,7 @@ export default {
476 // 设置起始点标记 476 // 设置起始点标记
477 var marker1 = new AMap.Marker({ 477 var marker1 = new AMap.Marker({
478 icon: new AMap.Icon({ 478 icon: new AMap.Icon({
479 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png', 479 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
480 size: new AMap.Size(40, 40), 480 size: new AMap.Size(40, 40),
481 // 图标所用图片大小 481 // 图标所用图片大小
482 imageSize: new AMap.Size(40, 40), 482 imageSize: new AMap.Size(40, 40),
...@@ -494,7 +494,7 @@ export default { ...@@ -494,7 +494,7 @@ export default {
494 }); 494 });
495 var marker2 = new AMap.Marker({ 495 var marker2 = new AMap.Marker({
496 icon: new AMap.Icon({ 496 icon: new AMap.Icon({
497 - image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A%E4%BD%8D-%E5%B0%8F1@2x.png', 497 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
498 size: new AMap.Size(40, 40), 498 size: new AMap.Size(40, 40),
499 // 图标所用图片大小 499 // 图标所用图片大小
500 imageSize: new AMap.Size(40, 40), 500 imageSize: new AMap.Size(40, 40),
......
1 +<!--
2 + * @Date: 2023-07-10 17:40:46
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-07-10 17:54:36
5 + * @FilePath: /map-demo/src/views/noticeList.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="notice-list-page">
10 + <div class="notice-item" style=" background: #FFFFFF; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.05); border-radius: 10px;">
11 + <p>
12 + <span style="color: #777;">时间：</span>
13 + <span style="color: #000;">2023-07-10 11:47:54</span>
14 + </p>
15 + <p>
16 + <span style="color: #777;">类型：</span>
17 + <span style="color: #000;">火警</span>
18 + </p>
19 + <p>
20 + <span style="color: #777;">位置：</span>
21 + <span style="color: #000;">老念佛堂（藏金阁、延寿堂、福慧堂）一层</span>
22 + </p>
23 + </div>
24 + <div class="notice-item" style="background: #F6F6F6; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.05); border-radius: 10px;">
25 + <p>
26 + <span style="color: #777;">时间：</span>
27 + <span style="color: #000;">2023-07-10 11:47:54</span>
28 + </p>
29 + <p>
30 + <span style="color: #777;">类型：</span>
31 + <span style="color: #000;">火警</span>
32 + </p>
33 + <p>
34 + <span style="color: #777;">位置：</span>
35 + <span style="color: #000;">老念佛堂（藏金阁、延寿堂、福慧堂）一层</span>
36 + </p>
37 + </div>
38 + </div>
39 +</template>
40 +
41 +<script>
42 +
43 +export default {
44 + data() {
45 + return {
46 +
47 + }
48 + },
49 + mounted() {
50 +
51 + },
52 + methods: {
53 +
54 + }
55 +}
56 +</script>
57 +
58 +<style lang="less" scoped>
59 +.notice-list-page {
60 + padding: 1rem;
61 + background-color: #EBEBEB;
62 + height: 100vh;
63 +
64 + .notice-item {
65 + padding: 1rem;
66 + width: auto;
67 + height: auto;
68 + margin-bottom: 1rem;
69 + }
70 +}
71 +</style>