hookehuyr

style(ui): 增大全局字体和图标尺寸以提升可读性

- 全局基础字体大小从默认值增加到 30rpx
- 首页网格导航图标容器从 88rpx 增加到 100rpx
- 首页网格导航图标大小从 24 增加到 28
- 首页网格导航标签文字从 26rpx 增加到 28rpx
- 底部导航栏图标大小从 24 增加到 28
- 底部导航栏文字从 20rpx 增加到 24rpx

这些改动改善了触摸目标和文字可读性,特别是在移动设备上。

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
...@@ -14,4 +14,7 @@ ...@@ -14,4 +14,7 @@
14 page { 14 page {
15 --nut-primary-color: #007AFF; 15 --nut-primary-color: #007AFF;
16 --nut-tabs-horizontal-titles-height: 120rpx; 16 --nut-tabs-horizontal-titles-height: 120rpx;
17 +
18 + // 全局字体大小调整(推荐:28rpx - 32rpx)
19 + font-size: 30rpx; // 默认 15px(750设计稿)→ 30rpx
17 } 20 }
......
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
12 <view class="flex-1 flex flex-col items-center justify-center" v-for="(item, index) in tabs" :key="index" 12 <view class="flex-1 flex flex-col items-center justify-center" v-for="(item, index) in tabs" :key="index"
13 @tap="handleTabClick(item)"> 13 @tap="handleTabClick(item)">
14 <view class="relative"> 14 <view class="relative">
15 - <IconFont :name="item.icon" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" size="24" /> 15 + <IconFont :name="item.icon" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" size="28" />
16 <!-- 红点提醒标记 --> 16 <!-- 红点提醒标记 -->
17 <view v-if="badges.includes(item.key)" class="tabbar-badge"></view> 17 <view v-if="badges.includes(item.key)" class="tabbar-badge"></view>
18 </view> 18 </view>
19 - <text class="text-[20rpx] mt-[8rpx]" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']">{{ 19 + <text class="text-[24rpx] mt-[8rpx]" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']">{{
20 item.label }}</text> 20 item.label }}</text>
21 </view> 21 </view>
22 </view> 22 </view>
......
...@@ -30,10 +30,10 @@ ...@@ -30,10 +30,10 @@
30 :key="index" 30 :key="index"
31 @tap="handleGridNav(item)" 31 @tap="handleGridNav(item)"
32 > 32 >
33 - <view class="w-[88rpx] h-[88rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]"> 33 + <view class="w-[100rpx] h-[100rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]">
34 - <IconFont :name="item.icon" class="text-blue-600" size="24" /> 34 + <IconFont :name="item.icon" class="text-blue-600" size="28" />
35 </view> 35 </view>
36 - <text class="text-gray-800 text-[26rpx]">{{ item.name }}</text> 36 + <text class="text-gray-800 text-[28rpx]">{{ item.name }}</text>
37 </view> 37 </view>
38 </view> 38 </view>
39 </view> 39 </view>
......