hookehuyr

feat: 添加NutConfigProvider组件并更新图标样式

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