刘阳 7 ماه پیش
والد
کامیت
3149cb8aa9
1فایلهای تغییر یافته به همراه81 افزوده شده و 4 حذف شده
  1. 81 4
      pages/msg/message.vue

+ 81 - 4
pages/msg/message.vue

@@ -1,11 +1,26 @@
 <template>
 	<view class="content">
-		<!-- <view class="navbar">
-			<view v-for="(item, index) in tabList" :key="index" class="nav-item"
+		<view class="resume-detail" :style="{ paddingTop: (12 + statusBarHeight + 100 - 60) + 'px' }">
+		
+	<!-- <view class="navbar">
+				<view v-for="(item, index) in tabList" :key="index" class="nav-item"
 				:class="{ current: tabFromIndex === item.state }" @click="tabClicks(item.state)">
 				{{ item.text }}
 			</view>
-		</view> -->
+		</view>-->
+						<!-- 固定顶部导航栏 -->
+						<view class="fixed-nav" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
+							<view class="navbar">
+								<view class="navbar-content">
+									<view class="navbar-left" @click="goBack">
+										<u-icon name="arrow-leftward" size="38" color="#333"></u-icon>
+									</view>
+									<view class="navbar-title">消息通知</view>
+									<view class="navbar-right"></view>
+								</view>
+							</view>
+						</view>
+	
 		<view v-for="(item, index) in list" :key="index" class="item" @click="goDet(item.content)">
 			<view class="flex justify-between"
 				style="font-size: 30upx;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space:nowrap">
@@ -22,6 +37,7 @@
 		<!-- <view v-if="list.length === 0" style="background: #1c1b20;text-align: center;padding-top: 140upx;color: #FFFFFF;">暂无消息</view> -->
 		<empty v-if="list.length === 0" des="暂无消息" show="false"></empty>
 	</view>
+	</view>
 </template>
 
 <script>
@@ -35,6 +51,7 @@
 		},
 		data() {
 			return {
+				statusBarHeight: 0, // 状态栏高度
 				tabFromIndex: 5,
 				tabCurrentIndex: 0,
 				fromInfo: 5,
@@ -87,6 +104,9 @@
 					})
 				}
 			},
+			goBack() {
+				uni.navigateBack();
+			},
 			//顶部渠道点击
 			tabClicks(index) {
 				this.list = [];
@@ -143,7 +163,11 @@
 	.list-scroll-content {
 		height: 100%;
 	}
-
+	.resume-detail {
+		min-height: 100vh;
+		padding-bottom: 120rpx;
+		// padding-top 已改为动态计算,在模板中通过 :style 设置
+	}
 	.navbar {
 		display: flex;
 		height: 40px;
@@ -189,6 +213,59 @@
 		background-color: #F7F7F7;
 	}
 
+
+.fixed-nav {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 9999;
+		background-color: #ffffff;
+		// padding: 0 4rpx;
+		// padding-top 已改为动态计算,在模板中通过 :style 设置
+	}
+
+	// 顶部导航栏
+	.navbar {
+		background: #fff;
+		height: 88rpx;
+		padding: 0 8rpx;
+		// padding: 80rpx 0 40rpx 0; // 已移除,因为现在是固定导航栏
+
+		.navbar-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 30rpx;
+			height: 60rpx;
+
+			.navbar-left {
+				width: 60rpx;
+				height: 60rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.navbar-title {
+				color: rgba(23, 23, 37, 1);
+				font-family: DM Sans;
+				font-size: 38rpx;
+				font-weight: 700;
+				line-height: 52rpx;
+				letter-spacing: 0%;
+				text-align: center;
+			}
+
+			.navbar-right {
+				width: 60rpx;
+				height: 60rpx;
+			}
+		}
+	}
+
+
+
 	.item {
 		background: #FFFFFF;
 		padding: 16rpx;