Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
950679dd 1 parent 471b65d6

调整消息列表

Inline Side-by-side
Showing 4 changed files with 84 additions and 28 deletions
...@@ -15,8 +15,10 @@ declare module '@vue/runtime-core' { ...@@ -15,8 +15,10 @@ declare module '@vue/runtime-core' {
15 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default'] 15 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
16 RouterLink: typeof import('vue-router')['RouterLink'] 16 RouterLink: typeof import('vue-router')['RouterLink']
17 RouterView: typeof import('vue-router')['RouterView'] 17 RouterView: typeof import('vue-router')['RouterView']
18 + VanCol: typeof import('vant/es')['Col']
18 VanDialog: typeof import('vant/es')['Dialog'] 19 VanDialog: typeof import('vant/es')['Dialog']
19 VanIcon: typeof import('vant/es')['Icon'] 20 VanIcon: typeof import('vant/es')['Icon']
20 VanPopup: typeof import('vant/es')['Popup'] 21 VanPopup: typeof import('vant/es')['Popup']
22 + VanRow: typeof import('vant/es')['Row']
21 } 23 }
22 } 24 }
......
No preview for this file type
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-10 16:38:30 4 + * @LastEditTime: 2023-07-11 09:35:08
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 地图主体页面 6 * @Description: 地图主体页面
7 --> 7 -->
......
1 <!-- 1 <!--
2 * @Date: 2023-07-10 17:40:46 2 * @Date: 2023-07-10 17:40:46
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-07-10 17:54:36 4 + * @LastEditTime: 2023-07-11 10:43:31
5 * @FilePath: /map-demo/src/views/noticeList.vue 5 * @FilePath: /map-demo/src/views/noticeList.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="notice-list-page"> 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;"> 10 + <div class="notice-item unread">
11 - <p> 11 + <van-row align="center">
12 - <span style="color: #777;">时间：</span> 12 + <van-col span="4" style="color: #777;">时间：</van-col>
13 - <span style="color: #000;">2023-07-10 11:47:54</span> 13 + <van-col span="20" style="color: #000;">2023-07-10 11:47:54</van-col>
14 - </p> 14 + </van-row>
15 - <p> 15 + <van-row style="margin: 0.25rem 0;">
16 - <span style="color: #777;">类型：</span> 16 + <van-col span="4" style="color: #777;">类型：</van-col>
17 - <span style="color: #000;">火警</span> 17 + <van-col span="20" style="color: #000;">
18 - </p> 18 + 火警&nbsp;<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%9F%A2%E9%87%8F%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1@2x.png" size="1rem"></van-icon>
19 - <p> 19 + </van-col>
20 - <span style="color: #777;">位置：</span> 20 + </van-row>
21 - <span style="color: #000;">老念佛堂（藏金阁、延寿堂、福慧堂）一层</span> 21 + <van-row>
22 - </p> 22 + <van-col span="4" style="color: #777;">位置：</van-col>
23 + <van-col span="20" style="color: #000;">
24 + 老念佛堂（藏金阁、延寿堂、福慧堂）一层
25 + </van-col>
26 + </van-row>
27 + <div style="width: 10px; height: 10px; background-color: red; border-radius: 50%; position: absolute; left: -2px; top: -2px;"></div>
23 </div> 28 </div>
24 - <div class="notice-item" style="background: #F6F6F6; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.05); border-radius: 10px;"> 29 + <div class="notice-item unread">
25 - <p> 30 + <van-row align="center">
26 - <span style="color: #777;">时间：</span> 31 + <van-col span="4" style="color: #777;">时间：</van-col>
27 - <span style="color: #000;">2023-07-10 11:47:54</span> 32 + <van-col span="20" style="color: #000;">2023-07-10 11:47:54</van-col>
28 - </p> 33 + </van-row>
29 - <p> 34 + <van-row style="margin: 0.25rem 0;">
30 - <span style="color: #777;">类型：</span> 35 + <van-col span="4" style="color: #777;">类型：</van-col>
31 - <span style="color: #000;">火警</span> 36 + <van-col span="20" style="color: #000;">
32 - </p> 37 + 压力报警&nbsp;<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%9F%A2%E9%87%8F%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1%20%E6%8B%B7%E8%B4%9D@2x.png" size="1rem"></van-icon>
33 - <p> 38 + </van-col>
34 - <span style="color: #777;">位置：</span> 39 + </van-row>
35 - <span style="color: #000;">老念佛堂（藏金阁、延寿堂、福慧堂）一层</span> 40 + <van-row>
36 - </p> 41 + <van-col span="4" style="color: #777;">位置：</van-col>
42 + <van-col span="20" style="color: #000;">
43 + 三福楼泵房
44 + </van-col>
45 + </van-row>
46 + <div style="width: 10px; height: 10px; background-color: red; border-radius: 50%; position: absolute; left: -2px; top: -2px;"></div>
47 + </div>
48 + <div class="notice-item read">
49 + <van-row align="center">
50 + <van-col span="4" style="color: #777;">时间：</van-col>
51 + <van-col span="20" style="color: #000;">2023-07-10 11:47:54</van-col>
52 + </van-row>
53 + <van-row style="margin: 0.25rem 0;">
54 + <van-col span="4" style="color: #777;">类型：</van-col>
55 + <van-col span="20" style="color: #000;">
56 + 故障&nbsp;<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%9F%A2%E9%87%8F%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1@2x.png" size="1rem"></van-icon>
57 + </van-col>
58 + </van-row>
59 + <van-row>
60 + <van-col span="4" style="color: #777;">位置：</van-col>
61 + <van-col span="20" style="color: #000;">
62 + 前花园休息室
63 + </van-col>
64 + </van-row>
65 + </div>
66 + <div class="notice-item read">
67 + <van-row align="center">
68 + <van-col span="4" style="color: #777;">时间：</van-col>
69 + <van-col span="20" style="color: #000;">2023-07-10 11:47:54</van-col>
70 + </van-row>
71 + <van-row style="margin: 0.25rem 0;">
72 + <van-col span="4" style="color: #777;">类型：</van-col>
73 + <van-col span="20" style="color: #000;">
74 + 水系统报警&nbsp;<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E7%9F%A2%E9%87%8F%E6%99%BA%E8%83%BD%E5%AF%B9%E8%B1%A1%20%E6%8B%B7%E8%B4%9D@2x.png" size="1rem"></van-icon>
75 + </van-col>
76 + </van-row>
77 + <van-row>
78 + <van-col span="4" style="color: #777;">位置：</van-col>
79 + <van-col span="20" style="color: #000;">
80 + 三慧楼楼顶
81 + </van-col>
82 + </van-row>
37 </div> 83 </div>
38 </div> 84 </div>
39 </template> 85 </template>
...@@ -62,10 +108,18 @@ export default { ...@@ -62,10 +108,18 @@ export default {
62 height: 100vh; 108 height: 100vh;
63 109
64 .notice-item { 110 .notice-item {
111 + position: relative;
65 padding: 1rem; 112 padding: 1rem;
66 width: auto; 113 width: auto;
67 height: auto; 114 height: auto;
68 margin-bottom: 1rem; 115 margin-bottom: 1rem;
116 + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.05); border-radius: 10px;
117 + }
118 + .unread {
119 + background: #FFFFFF;
120 + }
121 + .read {
122 + background: #F6F6F6;
69 } 123 }
70 } 124 }
71 </style> 125 </style>
......