Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e6f69d4a 1 parent b36f6ddb

feat(ui): 优化页面导航栏样式并添加 NutSticky 组件 

- 将页面导航栏改为橙色背景并添加 NutSticky 组件实现吸顶效果
- 移除各页面默认的导航栏标题文本
- 统一搜索栏和标题的布局样式
- 更新消息页面的弹窗和按钮样式
Inline Side-by-side
Showing 9 changed files with 97 additions and 82 deletions
...@@ -22,6 +22,7 @@ declare module 'vue' { ...@@ -22,6 +22,7 @@ declare module 'vue' {
22 NutPopup: typeof import('@nutui/nutui-taro')['Popup'] 22 NutPopup: typeof import('@nutui/nutui-taro')['Popup']
23 NutRow: typeof import('@nutui/nutui-taro')['Row'] 23 NutRow: typeof import('@nutui/nutui-taro')['Row']
24 NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar'] 24 NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
25 + NutSticky: typeof import('@nutui/nutui-taro')['Sticky']
25 NutSwiper: typeof import('@nutui/nutui-taro')['Swiper'] 26 NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
26 NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem'] 27 NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
27 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane'] 28 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
......
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 17:55:25 4 + * @LastEditTime: 2025-07-02 14:02:10
5 * @FilePath: /jgdl/src/app.config.js 5 * @FilePath: /jgdl/src/app.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -22,9 +22,9 @@ export default { ...@@ -22,9 +22,9 @@ export default {
22 ], 22 ],
23 window: { 23 window: {
24 backgroundTextStyle: 'light', 24 backgroundTextStyle: 'light',
25 - navigationBarBackgroundColor: '#fff', 25 + navigationBarBackgroundColor: '#fb923c',
26 navigationBarTitleText: 'WeChat', 26 navigationBarTitleText: 'WeChat',
27 - navigationBarTextStyle: 'black' 27 + navigationBarTextStyle: 'white'
28 }, 28 },
29 29
30 } 30 }
......
1 /* 1 /*
2 * @Date: 2025-07-01 17:00:22 2 * @Date: 2025-07-01 17:00:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-02 10:02:29 4 + * @LastEditTime: 2025-07-02 14:03:17
5 * @FilePath: /jgdl/src/pages/index/index.config.js 5 * @FilePath: /jgdl/src/pages/index/index.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 export default { 8 export default {
9 - navigationBarTitleText: '首页', 9 + navigationBarTitleText: '',
10 enableShareAppMessage: true, 10 enableShareAppMessage: true,
11 // navigationBarBackgroundColor: '#fb923c' 11 // navigationBarBackgroundColor: '#fb923c'
12 } 12 }
......
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 22:57:26 4 + * @LastEditTime: 2025-07-02 14:21:42
5 * @FilePath: /jgdl/src/pages/index/index.vue 5 * @FilePath: /jgdl/src/pages/index/index.vue
6 * @Description: 捡个电驴首页 6 * @Description: 捡个电驴首页
7 --> 7 -->
8 <template> 8 <template>
9 <view class="flex flex-col bg-orange-50 min-h-screen"> 9 <view class="flex flex-col bg-orange-50 min-h-screen">
10 <!-- Header --> 10 <!-- Header -->
11 - <view class="bg-orange-400 p-4 pt-8 pb-6"> 11 + <nut-sticky>
12 - <view class="text-2xl font-bold text-white mb-3">捡个电驴</view> 12 + <view class="bg-orange-400 p-4 pt-4 pb-4">
13 - <!-- Search Bar --> 13 + <nut-row type="flex" justify="center" align="center">
14 - <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" background="transparent" 14 + <nut-col span="6">
15 - input-background="#ffffff"> 15 + <view class="text-xl font-bold text-white">捡个电驴</view>
16 - <template #leftin> 16 + </nut-col>
17 - <Search2 /> 17 + <nut-col span="18">
18 - </template> 18 + <!-- Search Bar -->
19 - </nut-searchbar> 19 + <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" background="transparent"
20 - </view> 20 + input-background="#ffffff">
21 + <template #leftin>
22 + <Search2 />
23 + </template>
24 + </nut-searchbar>
25 + </nut-col>
26 + </nut-row>
27 + </view>
28 + </nut-sticky>
21 29
22 <!-- Banner --> 30 <!-- Banner -->
23 <view class="px-4 mt-4"> 31 <view class="px-4 mt-4">
...@@ -69,7 +77,7 @@ ...@@ -69,7 +77,7 @@
69 <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill" 77 <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
70 class="w-full h-36 object-cover rounded-lg" /> 78 class="w-full h-36 object-cover rounded-lg" />
71 <view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)"> 79 <view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)">
72 - <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="20" :color="'#ffffff'"/> 80 + <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="20" :color="'#ffffff'" />
73 <HeartFill v-else size="20" :color="'#ef4444'" /> 81 <HeartFill v-else size="20" :color="'#ef4444'" />
74 </view> 82 </view>
75 <view v-if="scooter.isVerified" 83 <view v-if="scooter.isVerified"
...@@ -123,7 +131,7 @@ ...@@ -123,7 +131,7 @@
123 </view> 131 </view>
124 <view class="flex-1 p-3 relative"> 132 <view class="flex-1 p-3 relative">
125 <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)"> 133 <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)">
126 - <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#ffffff'"/> 134 + <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#ffffff'" />
127 <HeartFill v-else size="16" :color="'#ef4444'" /> 135 <HeartFill v-else size="16" :color="'#ef4444'" />
128 </view> 136 </view>
129 <text class="font-medium text-sm block">{{ scooter.name }}</text> 137 <text class="font-medium text-sm block">{{ scooter.name }}</text>
......
1 /* 1 /*
2 * @Date: 2025-07-01 17:55:00 2 * @Date: 2025-07-01 17:55:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-02 11:14:06 4 + * @LastEditTime: 2025-07-02 14:02:57
5 * @FilePath: /jgdl/src/pages/messages/index.config.js 5 * @FilePath: /jgdl/src/pages/messages/index.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 export default { 8 export default {
9 - navigationBarTitleText: '消息' 9 + navigationBarTitleText: ''
10 } 10 }
......
1 <template> 1 <template>
2 <view class="messages-page"> 2 <view class="messages-page">
3 - <!-- Header --> 3 + <nut-sticky>
4 - <view id="page-header" class="bg-orange-400 p-4 pt-8"> 4 + <view class="flex flex-col">
5 - <view class="text-xl font-bold text-white mb-3">消息</view> 5 + <view id="page-header" class="bg-orange-400 p-4 pt-4 pb-4">
6 - <!-- Search Bar --> 6 + <nut-row type="flex" justify="center" align="center">
7 - <nut-searchbar v-model="searchValue" placeholder="搜索消息" shape="round" background="transparent" 7 + <nut-col span="4">
8 - input-background="#ffffff"> 8 + <view class="text-xl font-bold text-white">消息</view>
9 - <template #leftin> 9 + </nut-col>
10 - <Search2 /> 10 + <nut-col span="20">
11 - </template> 11 + <!-- Search Bar -->
12 - </nut-searchbar> 12 + <nut-searchbar v-model="searchValue" placeholder="搜索消息" shape="round"
13 - </view> 13 + background="transparent" input-background="#ffffff">
14 + <template #leftin>
15 + <Search2 />
16 + </template>
17 + </nut-searchbar>
18 + </nut-col>
19 + </nut-row>
20 + </view>
21 + </view>
22 + </nut-sticky>
14 23
15 <!-- Tab Navigation --> 24 <!-- Tab Navigation -->
16 <nut-tabs id="page-filter" v-model="activeTab" @click="onTabClick"> 25 <nut-tabs id="page-filter" v-model="activeTab" @click="onTabClick">
...@@ -53,8 +62,8 @@ ...@@ -53,8 +62,8 @@
53 </nut-tab-pane> 62 </nut-tab-pane>
54 63
55 <nut-tab-pane title="未读" pane-key="unread"> 64 <nut-tab-pane title="未读" pane-key="unread">
56 - <scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore" :lower-threshold="50" 65 + <scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
57 - :enable-flex="false"> 66 + :lower-threshold="50" :enable-flex="false">
58 <view v-for="conversation in filteredConversations" :key="conversation.id" 67 <view v-for="conversation in filteredConversations" :key="conversation.id"
59 class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2" 68 class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
60 @click="onConversationClick(conversation)"> 69 @click="onConversationClick(conversation)">
...@@ -91,8 +100,8 @@ ...@@ -91,8 +100,8 @@
91 </nut-tab-pane> 100 </nut-tab-pane>
92 101
93 <nut-tab-pane title="通知" pane-key="notification"> 102 <nut-tab-pane title="通知" pane-key="notification">
94 - <scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore" :lower-threshold="50" 103 + <scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
95 - :enable-flex="false"> 104 + :lower-threshold="50" :enable-flex="false">
96 <view v-for="conversation in filteredConversations" :key="conversation.id" 105 <view v-for="conversation in filteredConversations" :key="conversation.id"
97 class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2" 106 class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
98 @click="onConversationClick(conversation)"> 107 @click="onConversationClick(conversation)">
...@@ -129,8 +138,8 @@ ...@@ -129,8 +138,8 @@
129 </nut-tab-pane> 138 </nut-tab-pane>
130 139
131 <nut-tab-pane title="留言" pane-key="message"> 140 <nut-tab-pane title="留言" pane-key="message">
132 - <scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore" :lower-threshold="50" 141 + <scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
133 - :enable-flex="false"> 142 + :lower-threshold="50" :enable-flex="false">
134 <view v-for="conversation in filteredConversations" :key="conversation.id" 143 <view v-for="conversation in filteredConversations" :key="conversation.id"
135 class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2" 144 class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
136 @click="onConversationClick(conversation)"> 145 @click="onConversationClick(conversation)">
...@@ -171,23 +180,14 @@ ...@@ -171,23 +180,14 @@
171 <TabBar /> 180 <TabBar />
172 181
173 <!-- 消息详情弹框 --> 182 <!-- 消息详情弹框 -->
174 - <nut-popup 183 + <nut-popup v-model:visible="showMessageDetail" position="right" :style="{ width: '100%', height: '100%' }"
175 - v-model:visible="showMessageDetail" 184 + closeable close-icon-position="top-right" @close="closeMessageDetail">
176 - position="right"
177 - :style="{ width: '100%', height: '100%' }"
178 - closeable
179 - close-icon-position="top-right"
180 - @close="closeMessageDetail"
181 - >
182 <view class="message-detail-container"> 185 <view class="message-detail-container">
183 <!-- 详情页头部 --> 186 <!-- 详情页头部 -->
184 <view class="detail-header"> 187 <view class="detail-header">
185 <view class="flex items-center"> 188 <view class="flex items-center">
186 - <image v-if="selectedConversation?.avatar" 189 + <image v-if="selectedConversation?.avatar" :src="selectedConversation.avatar"
187 - :src="selectedConversation.avatar" 190 + class="w-12 h-12 rounded-full object-cover mr-3" mode="aspectFill" />
188 - class="w-12 h-12 rounded-full object-cover mr-3"
189 - mode="aspectFill"
190 - />
191 <view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-3"> 191 <view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-3">
192 <component :is="selectedConversation?.icon" /> 192 <component :is="selectedConversation?.icon" />
193 </view> 193 </view>
...@@ -207,12 +207,7 @@ ...@@ -207,12 +207,7 @@
207 207
208 <!-- 底部关闭按钮 --> 208 <!-- 底部关闭按钮 -->
209 <view class="detail-footer"> 209 <view class="detail-footer">
210 - <nut-button 210 + <nut-button type="primary" size="large" block @click="closeMessageDetail">
211 - type="primary"
212 - size="large"
213 - block
214 - @click="closeMessageDetail"
215 - >
216 关闭 211 关闭
217 </nut-button> 212 </nut-button>
218 </view> 213 </view>
...@@ -667,6 +662,7 @@ onMounted(() => { ...@@ -667,6 +662,7 @@ onMounted(() => {
667 } 662 }
668 663
669 } 664 }
665 +
670 /* NutUI 组件样式覆盖 */ 666 /* NutUI 组件样式覆盖 */
671 :deep(.nut-searchbar) { 667 :deep(.nut-searchbar) {
672 background: transparent !important; 668 background: transparent !important;
......
1 /* 1 /*
2 * @Date: 2025-07-01 17:55:04 2 * @Date: 2025-07-01 17:55:04
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-01 18:04:14 4 + * @LastEditTime: 2025-07-02 14:03:28
5 * @FilePath: /jgdl/src/pages/post/index.config.js 5 * @FilePath: /jgdl/src/pages/post/index.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 export default { 8 export default {
9 - navigationBarTitleText: '分类' 9 + navigationBarTitleText: ''
10 } 10 }
......
...@@ -2,23 +2,31 @@ ...@@ -2,23 +2,31 @@
2 <view> 2 <view>
3 <view class="flex flex-col bg-white min-h-screen"> 3 <view class="flex flex-col bg-white min-h-screen">
4 <!-- Header --> 4 <!-- Header -->
5 - <view class="bg-orange-400 p-4 pt-8 pb-6"> 5 + <nut-sticky>
6 - <view class="text-2xl font-bold text-white mb-3">捡个电驴</view> 6 + <view class="bg-orange-400 p-4 pt-4 pb-4">
7 - <!-- Search Bar --> 7 + <nut-row type="flex" justify="center" align="center">
8 - <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" background="transparent" 8 + <nut-col span="6">
9 - input-background="#ffffff"> 9 + <view class="text-xl font-bold text-white">捡个电驴</view>
10 - <template #leftin> 10 + </nut-col>
11 - <Search2 /> 11 + <nut-col span="18">
12 - </template> 12 + <!-- Search Bar -->
13 - </nut-searchbar> 13 + <nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round"
14 - </view> 14 + background="transparent" input-background="#ffffff">
15 + <template #leftin>
16 + <Search2 />
17 + </template>
18 + </nut-searchbar>
19 + </nut-col>
20 + </nut-row>
21 + </view>
15 22
16 - <!-- Filter options --> 23 + <!-- Filter options -->
17 - <nut-menu> 24 + <nut-menu>
18 - <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" /> 25 + <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
19 - <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" /> 26 + <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
20 - <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" /> 27 + <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
21 - </nut-menu> 28 + </nut-menu>
29 + </nut-sticky>
22 30
23 <!-- Scooter listings - 参考PostPage.tsx --> 31 <!-- Scooter listings - 参考PostPage.tsx -->
24 <view class="flex-1 p-4 vehicle-list"> 32 <view class="flex-1 p-4 vehicle-list">
...@@ -68,7 +76,7 @@ ...@@ -68,7 +76,7 @@
68 <text>没有更多数据了</text> 76 <text>没有更多数据了</text>
69 </view> 77 </view>
70 78
71 - <nut-button v-else shape="round" type="info" @click="loadMoreData">点击加载更多</nut-button> 79 + <nut-button v-else shape="round" type="default" plain @click="loadMoreData">点击加载更多</nut-button>
72 </view> 80 </view>
73 </view> 81 </view>
74 82
......
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
2 <view class="sell-page"> 2 <view class="sell-page">
3 <!-- 顶部导航 --> 3 <!-- 顶部导航 -->
4 <nut-config-provider :theme-vars="themeVars"> 4 <nut-config-provider :theme-vars="themeVars">
5 - <nut-navbar title="发布车源" left-show @on-click-back="goBack"> 5 + <nut-sticky top="0">
6 - <template #left-show> 6 + <nut-navbar title="发布车源" left-show @on-click-back="goBack">
7 - <RectLeft /> 7 + <template #left-show>
8 - </template> 8 + <RectLeft color="white" />
9 - </nut-navbar> 9 + </template>
10 + </nut-navbar>
11 + </nut-sticky>
10 </nut-config-provider> 12 </nut-config-provider>
11 13
12 <!-- 表单内容 --> 14 <!-- 表单内容 -->
...@@ -296,8 +298,8 @@ import Taro from '@tarojs/taro' ...@@ -296,8 +298,8 @@ import Taro from '@tarojs/taro'
296 // import BASE_URL from '@/utils/config'; 298 // import BASE_URL from '@/utils/config';
297 299
298 const themeVars = ref({ 300 const themeVars = ref({
299 - // navbarBackground: '#FFA135', 301 + navbarBackground: '#fb923c',
300 - // navbarColor: '#ffffff', 302 + navbarColor: '#ffffff',
301 }) 303 })
302 304
303 // 文件上传相关 305 // 文件上传相关
......