feat(ui): 优化底部导航样式并添加响应式设计

- 将像素单位统一转换为rpx以适配不同设备
- 添加多种屏幕尺寸的媒体查询适配
- 增加悬停效果提升交互体验
- 修改打卡成功弹窗按钮文字更醒目

 <!--
  * @Date: 2025-08-27 17:44:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-15 13:27:04
+ * @LastEditTime: 2025-09-20 23:13:52
  * @FilePath: /map-demo/src/components/BottomNav.vue
  * @Description: 文件描述
 -->
@@ -76,8 +76,10 @@ const navigate = (path) => {
   border-top: 1px solid #f3f4f6;
   display: flex;
   justify-content: space-around;
-  padding: 8px 0;
+  padding: 16rpx 0;
   z-index: 50;
+  /* 基础高度适配 */
+  min-height: 120rpx;
 }
 
 /* 导航项 */
@@ -85,8 +87,10 @@ const navigate = (path) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 8px 20px;
+  padding: 16rpx 40rpx;
   position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 /* 激活状态 */
@@ -101,25 +105,152 @@ const navigate = (path) => {
 
 /* 图标样式 */
 .nav-icon {
-  width: 26px;
-  height: 26px;
+  width: 52rpx;
+  height: 52rpx;
+  transition: transform 0.2s ease;
 }
 
 /* 标签样式 */
 .nav-label {
-  font-size: 13px;
-  margin-top: 4px;
+  font-size: 26rpx;
+  margin-top: 8rpx;
+  line-height: 1.2;
 }
 
 /* 激活指示器 */
 .nav-indicator {
   position: absolute;
-  bottom: -4px;
-  width: 40px;
-  height: 4px;
+  bottom: -8rpx;
+  width: 80rpx;
+  height: 8rpx;
   background-color: #2563eb;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4rpx 4rpx 0 0;
 }
 
+/* 响应式适配 - 小屏设备 */
+@media screen and (max-width: 480px) {
+  .bottom-nav {
+    padding: 8px 0;
+    min-height: 60px;
+  }
 
+  .nav-item {
+    padding: 8px 16px;
+  }
+
+  .nav-icon {
+    width: 26px;
+    height: 26px;
+  }
+
+  .nav-label {
+    font-size: 13px;
+    margin-top: 4px;
+  }
+
+  .nav-indicator {
+    bottom: -4px;
+    width: 40px;
+    height: 4px;
+    border-radius: 2px 2px 0 0;
+  }
+}
+
+/* 响应式适配 - 中等屏幕设备 (平板竖屏) */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+  .bottom-nav {
+    padding: 12px 0;
+    min-height: 80px;
+  }
+
+  .nav-item {
+    padding: 12px 24px;
+  }
+
+  .nav-icon {
+    width: 53px;
+    height: 53px;
+  }
+
+  .nav-label {
+    font-size: 24px;
+    margin-top: 6px;
+  }
+
+  .nav-indicator {
+    bottom: -6px;
+    width: 48px;
+    height: 5px;
+    border-radius: 3px 3px 0 0;
+  }
+}
+
+/* 响应式适配 - 大屏设备 (平板横屏/桌面) */
+@media screen and (min-width: 769px) {
+  .bottom-nav {
+    padding: 16px 0;
+    min-height: 100px;
+  }
+
+  .nav-item {
+    padding: 16px 32px;
+  }
+
+  .nav-icon {
+    width: 62px;
+    height: 62px;
+  }
+
+  .nav-label {
+    font-size: 27px;
+    margin-top: 8px;
+  }
+
+  .nav-indicator {
+    bottom: -8px;
+    width: 60px;
+    height: 6px;
+    border-radius: 3px 3px 0 0;
+  }
+}
+
+/* 微信小程序环境适配 */
+@media screen and (min-device-width: 1024px) {
+  .bottom-nav {
+    padding: 20rpx 0;
+    min-height: 140rpx;
+  }
+
+  .nav-item {
+    padding: 20rpx 50rpx;
+  }
+
+  .nav-icon {
+    width: 104rpx;
+    height: 104rpx;
+  }
+
+  .nav-label {
+    font-size: 55rpx;
+    margin-top: 10rpx;
+  }
+
+  .nav-indicator {
+    bottom: -10rpx;
+    width: 90rpx;
+    height: 10rpx;
+    border-radius: 5rpx 5rpx 0 0;
+  }
+}
+
+/* 悬浮效果 - 仅在非触摸设备上启用 */
+@media (hover: hover) {
+  .nav-item:hover {
+    transform: translateY(-2px);
+  }
+
+  .nav-item:hover .nav-icon {
+    transform: scale(1.1);
+  }
+}
 </style>

 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-18 20:37:00
+ * @LastEditTime: 2025-09-19 18:31:34
  * @FilePath: /map-demo/src/views/checkin/info.vue
  * @Description: 文件描述
 -->
@@ -598,7 +598,7 @@ const checkIn = async () => { // 打卡
       showDialog({
         title: '温馨提示',
         message: `恭喜您打卡成功`,
-        confirmButtonText: '快去制作您的独有海报',
+        confirmButtonText: '点我，去制作您的独有海报',
       }).then(() => {
         // 打卡成功后,马上隐藏打卡按钮改成已打卡按钮
         check_in_status.value = true;