feat: 添加NutConfigProvider组件并更新图标样式
- 在components.d.ts中添加NutConfigProvider组件声明 - 更新搜索框和收藏图标的样式 - 替换Service为Shop图标并优化收藏图标显示逻辑
Showing
3 changed files
with
18 additions
and
13 deletions
| ... | @@ -8,6 +8,7 @@ export {} | ... | @@ -8,6 +8,7 @@ export {} |
| 8 | declare module 'vue' { | 8 | declare module 'vue' { |
| 9 | export interface GlobalComponents { | 9 | export interface GlobalComponents { |
| 10 | NavBar: typeof import('./src/components/navBar.vue')['default'] | 10 | NavBar: typeof import('./src/components/navBar.vue')['default'] |
| 11 | + NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider'] | ||
| 11 | NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar'] | 12 | NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar'] |
| 12 | NutSwiper: typeof import('@nutui/nutui-taro')['Swiper'] | 13 | NutSwiper: typeof import('@nutui/nutui-taro')['Swiper'] |
| 13 | NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem'] | 14 | NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem'] | ... | ... |
| ... | @@ -3,12 +3,16 @@ | ... | @@ -3,12 +3,16 @@ |
| 3 | */ | 3 | */ |
| 4 | 4 | ||
| 5 | /* 搜索框样式 */ | 5 | /* 搜索框样式 */ |
| 6 | -.nut-input { | 6 | +// .nut-input { |
| 7 | - --nut-input-border-radius: 9999px; | 7 | +// --nut-input-border-radius: 9999px; |
| 8 | - --nut-input-padding: 8px 16px 8px 40px; | 8 | +// --nut-input-padding: 8px 16px 8px 40px; |
| 9 | - --nut-input-font-size: 14px; | 9 | +// --nut-input-font-size: 14px; |
| 10 | - --nut-input-background-color: #ffffff; | 10 | +// --nut-input-background-color: #ffffff; |
| 11 | - --nut-input-border-color: transparent; | 11 | +// --nut-input-border-color: transparent; |
| 12 | +// } | ||
| 13 | + | ||
| 14 | +.nut-searchbar__search-input .nut-searchbar__iptleft-search-icon { | ||
| 15 | + margin-right: 15rpx; | ||
| 12 | } | 16 | } |
| 13 | 17 | ||
| 14 | /* 网格布局修复 */ | 18 | /* 网格布局修复 */ | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-06-28 10:33:00 | 2 | * @Date: 2025-06-28 10:33:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-01 19:43:08 | 4 | + * @LastEditTime: 2025-07-01 21:32:07 |
| 5 | * @FilePath: /jgdl/src/pages/index/index.vue | 5 | * @FilePath: /jgdl/src/pages/index/index.vue |
| 6 | * @Description: 捡个电驴首页 | 6 | * @Description: 捡个电驴首页 |
| 7 | --> | 7 | --> |
| ... | @@ -46,7 +46,7 @@ | ... | @@ -46,7 +46,7 @@ |
| 46 | </view> | 46 | </view> |
| 47 | <view class="flex flex-col items-center" @tap="onCertifiedClick"> | 47 | <view class="flex flex-col items-center" @tap="onCertifiedClick"> |
| 48 | <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"> | 48 | <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"> |
| 49 | - <Service size="20" color="#f97316" /> | 49 | + <Shop size="20" color="#f97316" /> |
| 50 | </view> | 50 | </view> |
| 51 | <text class="text-xs mt-1 text-gray-700">认证车源</text> | 51 | <text class="text-xs mt-1 text-gray-700">认证车源</text> |
| 52 | </view> | 52 | </view> |
| ... | @@ -69,8 +69,8 @@ | ... | @@ -69,8 +69,8 @@ |
| 69 | <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill" | 69 | <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill" |
| 70 | class="w-full h-36 object-cover rounded-lg" /> | 70 | class="w-full h-36 object-cover rounded-lg" /> |
| 71 | <view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)"> | 71 | <view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)"> |
| 72 | - <Heart size="20" :color="favoriteIds.includes(scooter.id) ? '#ef4444' : '#ffffff'" | 72 | + <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="20" :color="'#ffffff'"/> |
| 73 | - :fill="favoriteIds.includes(scooter.id) ? '#ef4444' : 'none'" /> | 73 | + <HeartFill v-else size="20" :color="'#ef4444'" /> |
| 74 | </view> | 74 | </view> |
| 75 | <view v-if="scooter.isVerified" | 75 | <view v-if="scooter.isVerified" |
| 76 | class="absolute bottom-4 right-4 bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded flex items-center"> | 76 | class="absolute bottom-4 right-4 bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded flex items-center"> |
| ... | @@ -123,8 +123,8 @@ | ... | @@ -123,8 +123,8 @@ |
| 123 | </view> | 123 | </view> |
| 124 | <view class="flex-1 p-3 relative"> | 124 | <view class="flex-1 p-3 relative"> |
| 125 | <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)"> | 125 | <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)"> |
| 126 | - <Heart size="16" :color="favoriteIds.includes(scooter.id) ? '#ef4444' : '#d1d5db'" | 126 | + <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#ffffff'"/> |
| 127 | - :fill="favoriteIds.includes(scooter.id) ? '#ef4444' : 'none'" /> | 127 | + <HeartFill v-else size="16" :color="'#ef4444'" /> |
| 128 | </view> | 128 | </view> |
| 129 | <text class="font-medium text-sm block">{{ scooter.name }}</text> | 129 | <text class="font-medium text-sm block">{{ scooter.name }}</text> |
| 130 | <text class="text-xs text-gray-600 mt-1 block"> | 130 | <text class="text-xs text-gray-600 mt-1 block"> |
| ... | @@ -151,7 +151,7 @@ import Taro from '@tarojs/taro' | ... | @@ -151,7 +151,7 @@ import Taro from '@tarojs/taro' |
| 151 | // import '@tarojs/taro/html.css' 和 nutui组件居然有冲突? | 151 | // import '@tarojs/taro/html.css' 和 nutui组件居然有冲突? |
| 152 | import { ref, onMounted } from 'vue' | 152 | import { ref, onMounted } from 'vue' |
| 153 | import { useDidShow, useReady } from '@tarojs/taro' | 153 | import { useDidShow, useReady } from '@tarojs/taro' |
| 154 | -import { Clock, Star, Service, Right, Heart, Check, Search2 } from '@nutui/icons-vue-taro' | 154 | +import { Clock, Star, Service, Right, Heart1, Addfollow, HeartFill, Check, Search2, Shop } from '@nutui/icons-vue-taro' |
| 155 | import "./index.less"; | 155 | import "./index.less"; |
| 156 | 156 | ||
| 157 | // 响应式数据 | 157 | // 响应式数据 | ... | ... |
-
Please register or login to post a comment