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 67 additions and 52 deletions
......@@ -22,6 +22,7 @@ declare module 'vue' {
NutPopup: typeof import('@nutui/nutui-taro')['Popup']
NutRow: typeof import('@nutui/nutui-taro')['Row']
NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
NutSticky: typeof import('@nutui/nutui-taro')['Sticky']
NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
......
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-01 17:55:25
* @LastEditTime: 2025-07-02 14:02:10
* @FilePath: /jgdl/src/app.config.js
* @Description: 文件描述
*/
......@@ -22,9 +22,9 @@ export default {
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarBackgroundColor: '#fb923c',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
navigationBarTextStyle: 'white'
},
}
......
/*
* @Date: 2025-07-01 17:00:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 10:02:29
* @LastEditTime: 2025-07-02 14:03:17
* @FilePath: /jgdl/src/pages/index/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '首页',
navigationBarTitleText: '',
enableShareAppMessage: true,
// navigationBarBackgroundColor: '#fb923c'
}
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-01 22:57:26
* @LastEditTime: 2025-07-02 14:21:42
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
<template>
<view class="flex flex-col bg-orange-50 min-h-screen">
<!-- Header -->
<view class="bg-orange-400 p-4 pt-8 pb-6">
<view class="text-2xl font-bold text-white mb-3">捡个电驴</view>
<nut-sticky>
<view class="bg-orange-400 p-4 pt-4 pb-4">
<nut-row type="flex" justify="center" align="center">
<nut-col span="6">
<view class="text-xl font-bold text-white">捡个电驴</view>
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" background="transparent"
input-background="#ffffff">
......@@ -17,7 +22,10 @@
<Search2 />
</template>
</nut-searchbar>
</nut-col>
</nut-row>
</view>
</nut-sticky>
<!-- Banner -->
<view class="px-4 mt-4">
......@@ -69,7 +77,7 @@
<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)">
<Addfollow v-if="!favoriteIds.includes(scooter.id)" size="20" :color="'#ffffff'"/>
<Addfollow v-if="!favoriteIds.includes(scooter.id)" size="20" :color="'#ffffff'" />
<HeartFill v-else size="20" :color="'#ef4444'" />
</view>
<view v-if="scooter.isVerified"
......@@ -123,7 +131,7 @@
</view>
<view class="flex-1 p-3 relative">
<view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)">
<Addfollow v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#ffffff'"/>
<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>
......
/*
* @Date: 2025-07-01 17:55:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 11:14:06
* @LastEditTime: 2025-07-02 14:02:57
* @FilePath: /jgdl/src/pages/messages/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '消息'
navigationBarTitleText: ''
}
......
<template>
<view class="messages-page">
<!-- Header -->
<view id="page-header" class="bg-orange-400 p-4 pt-8">
<view class="text-xl font-bold text-white mb-3">消息</view>
<nut-sticky>
<view class="flex flex-col">
<view id="page-header" class="bg-orange-400 p-4 pt-4 pb-4">
<nut-row type="flex" justify="center" align="center">
<nut-col span="4">
<view class="text-xl font-bold text-white">消息</view>
</nut-col>
<nut-col span="20">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索消息" shape="round" background="transparent"
input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索消息" shape="round"
background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
</nut-searchbar>
</nut-col>
</nut-row>
</view>
</view>
</nut-sticky>
<!-- Tab Navigation -->
<nut-tabs id="page-filter" v-model="activeTab" @click="onTabClick">
......@@ -53,8 +62,8 @@
</nut-tab-pane>
<nut-tab-pane title="未读" pane-key="unread">
<scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore" :lower-threshold="50"
:enable-flex="false">
<scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
:lower-threshold="50" :enable-flex="false">
<view v-for="conversation in filteredConversations" :key="conversation.id"
class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
@click="onConversationClick(conversation)">
......@@ -91,8 +100,8 @@
</nut-tab-pane>
<nut-tab-pane title="通知" pane-key="notification">
<scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore" :lower-threshold="50"
:enable-flex="false">
<scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
:lower-threshold="50" :enable-flex="false">
<view v-for="conversation in filteredConversations" :key="conversation.id"
class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
@click="onConversationClick(conversation)">
......@@ -129,8 +138,8 @@
</nut-tab-pane>
<nut-tab-pane title="留言" pane-key="message">
<scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore" :lower-threshold="50"
:enable-flex="false">
<scroll-view class="conversation-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
:lower-threshold="50" :enable-flex="false">
<view v-for="conversation in filteredConversations" :key="conversation.id"
class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
@click="onConversationClick(conversation)">
......@@ -171,23 +180,14 @@
<TabBar />
<!-- 消息详情弹框 -->
<nut-popup
v-model:visible="showMessageDetail"
position="right"
:style="{ width: '100%', height: '100%' }"
closeable
close-icon-position="top-right"
@close="closeMessageDetail"
>
<nut-popup v-model:visible="showMessageDetail" position="right" :style="{ width: '100%', height: '100%' }"
closeable close-icon-position="top-right" @close="closeMessageDetail">
<view class="message-detail-container">
<!-- 详情页头部 -->
<view class="detail-header">
<view class="flex items-center">
<image v-if="selectedConversation?.avatar"
:src="selectedConversation.avatar"
class="w-12 h-12 rounded-full object-cover mr-3"
mode="aspectFill"
/>
<image v-if="selectedConversation?.avatar" :src="selectedConversation.avatar"
class="w-12 h-12 rounded-full object-cover mr-3" mode="aspectFill" />
<view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-3">
<component :is="selectedConversation?.icon" />
</view>
......@@ -207,12 +207,7 @@
<!-- 底部关闭按钮 -->
<view class="detail-footer">
<nut-button
type="primary"
size="large"
block
@click="closeMessageDetail"
>
<nut-button type="primary" size="large" block @click="closeMessageDetail">
关闭
</nut-button>
</view>
......@@ -667,6 +662,7 @@ onMounted(() => {
}
}
/* NutUI 组件样式覆盖 */
:deep(.nut-searchbar) {
background: transparent !important;
......
/*
* @Date: 2025-07-01 17:55:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-01 18:04:14
* @LastEditTime: 2025-07-02 14:03:28
* @FilePath: /jgdl/src/pages/post/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '分类'
navigationBarTitleText: ''
}
......
......@@ -2,15 +2,22 @@
<view>
<view class="flex flex-col bg-white min-h-screen">
<!-- Header -->
<view class="bg-orange-400 p-4 pt-8 pb-6">
<view class="text-2xl font-bold text-white mb-3">捡个电驴</view>
<nut-sticky>
<view class="bg-orange-400 p-4 pt-4 pb-4">
<nut-row type="flex" justify="center" align="center">
<nut-col span="6">
<view class="text-xl font-bold text-white">捡个电驴</view>
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round" background="transparent"
input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" shape="round"
background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
</nut-searchbar>
</nut-col>
</nut-row>
</view>
<!-- Filter options -->
......@@ -19,6 +26,7 @@
<nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
<nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
</nut-menu>
</nut-sticky>
<!-- Scooter listings - 参考PostPage.tsx -->
<view class="flex-1 p-4 vehicle-list">
......@@ -68,7 +76,7 @@
<text>没有更多数据了</text>
</view>
<nut-button v-else shape="round" type="info" @click="loadMoreData">点击加载更多</nut-button>
<nut-button v-else shape="round" type="default" plain @click="loadMoreData">点击加载更多</nut-button>
</view>
</view>
......
......@@ -2,11 +2,13 @@
<view class="sell-page">
<!-- 顶部导航 -->
<nut-config-provider :theme-vars="themeVars">
<nut-sticky top="0">
<nut-navbar title="发布车源" left-show @on-click-back="goBack">
<template #left-show>
<RectLeft />
<RectLeft color="white" />
</template>
</nut-navbar>
</nut-sticky>
</nut-config-provider>
<!-- 表单内容 -->
......@@ -296,8 +298,8 @@ import Taro from '@tarojs/taro'
// import BASE_URL from '@/utils/config';
const themeVars = ref({
// navbarBackground: '#FFA135',
// navbarColor: '#ffffff',
navbarBackground: '#fb923c',
navbarColor: '#ffffff',
})
// 文件上传相关
......