feat: 更新地图定位成功提示和底部导航样式
- 在地图定位成功后添加提示信息 - 调整底部导航图标和标签大小 - 移除底部导航激活指示器并调整样式
Showing
2 changed files
with
11 additions
and
8 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:44:10 | 2 | * @Date: 2025-08-27 17:44:10 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-27 22:43:22 | 4 | + * @LastEditTime: 2025-08-27 23:12:17 |
| 5 | * @FilePath: /map-demo/src/components/BottomNav.vue | 5 | * @FilePath: /map-demo/src/components/BottomNav.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -15,7 +15,7 @@ | ... | @@ -15,7 +15,7 @@ |
| 15 | > | 15 | > |
| 16 | <img :src="item.icon" :class="['nav-icon', isActive(item.path) ? 'filter-blue' : 'filter-gray']" alt="" /> | 16 | <img :src="item.icon" :class="['nav-icon', isActive(item.path) ? 'filter-blue' : 'filter-gray']" alt="" /> |
| 17 | <span class="nav-label">{{ item.label }}</span> | 17 | <span class="nav-label">{{ item.label }}</span> |
| 18 | - <div v-if="isActive(item.path)" class="nav-indicator"></div> | 18 | + <!-- <div v-if="isActive(item.path)" class="nav-indicator"></div> --> |
| 19 | </div> | 19 | </div> |
| 20 | </div> | 20 | </div> |
| 21 | </template> | 21 | </template> |
| ... | @@ -95,20 +95,20 @@ const navigate = (path) => { | ... | @@ -95,20 +95,20 @@ const navigate = (path) => { |
| 95 | 95 | ||
| 96 | /* 图标样式 */ | 96 | /* 图标样式 */ |
| 97 | .nav-icon { | 97 | .nav-icon { |
| 98 | - width: 24px; | 98 | + width: 26px; |
| 99 | - height: 24px; | 99 | + height: 26px; |
| 100 | } | 100 | } |
| 101 | 101 | ||
| 102 | /* 标签样式 */ | 102 | /* 标签样式 */ |
| 103 | .nav-label { | 103 | .nav-label { |
| 104 | - font-size: 12px; | 104 | + font-size: 13px; |
| 105 | margin-top: 4px; | 105 | margin-top: 4px; |
| 106 | } | 106 | } |
| 107 | 107 | ||
| 108 | /* 激活指示器 */ | 108 | /* 激活指示器 */ |
| 109 | .nav-indicator { | 109 | .nav-indicator { |
| 110 | position: absolute; | 110 | position: absolute; |
| 111 | - bottom: 0; | 111 | + bottom: -4px; |
| 112 | width: 40px; | 112 | width: 40px; |
| 113 | height: 4px; | 113 | height: 4px; |
| 114 | background-color: #2563eb; | 114 | background-color: #2563eb; | ... | ... |
| 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: 2025-08-27 22:38:11 | 4 | + * @LastEditTime: 2025-08-27 23:07:35 |
| 5 | * @FilePath: /map-demo/src/views/checkin/map.vue | 5 | * @FilePath: /map-demo/src/views/checkin/map.vue |
| 6 | * @Description: 公众地图主体页面 | 6 | * @Description: 公众地图主体页面 |
| 7 | --> | 7 | --> |
| ... | @@ -682,7 +682,10 @@ export default { | ... | @@ -682,7 +682,10 @@ export default { |
| 682 | }); | 682 | }); |
| 683 | this.map.add(this.location_marker); | 683 | this.map.add(this.location_marker); |
| 684 | // 定位到当前位置中心 | 684 | // 定位到当前位置中心 |
| 685 | - this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]); | 685 | + // this.map.setZoomAndCenter(this.zoom, [this.current_lng, this.current_lat]); |
| 686 | + // 提示获取经纬度成功 | ||
| 687 | + this.show_toast = true; | ||
| 688 | + this.toast_text = '获取经纬度成功'; | ||
| 686 | // } | 689 | // } |
| 687 | }, | 690 | }, |
| 688 | complete: () => { | 691 | complete: () => { | ... | ... |
-
Please register or login to post a comment