educational_Template1/pages/message/index.vue

<template>
	<view class="page-container">
        <image class="bg" src="/static/message_top_bg.png"></image>
		<view class="status_bar" :style="{ height: statusBarHeight }"></view>
		<!-- 顶部标题栏 -->
		<view class="top-bar">
			<text class="title">消息(11)</text>
		</view>

		<!-- 搜索框 -->
		<view class="search-box">
			<image class="search-icon" src="/static/search_gray.png" mode="aspectFit"></image>
			<input class="search-placeholder" placeholder="请输入关键字搜索"></input>
		</view>

		<!-- 消息列表 -->
		<view class="message-list">
			<view class="message-item" v-for="(item, index) in messageData" :key="index" @click="openMessage(item)">
				<view class="message-left">
					<view class="avatar-box" :class="item.type">
						<image class="avatar" :src="item.avatar||'/static/avatar'" mode="aspectFit"></image>
						<view class="badge" v-if="item.badge > 0">{{ item.badge }}</view>
					</view>
				</view>
				<view class="message-right">
					<view class="message-header">
						<text class="message-title">{{ item.title }}</text>
						<text class="message-time">{{ item.time }}</text>
					</view>
					<text class="message-content">{{ item.content }}</text>
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,

			messageData: [
				{
					id: 1,
					type: 'doctor',
					avatar: '/static/avatar.png',
					title: '徐丽医生',
					content: '本次问诊小结：诊断结果',
					time: '12:23',
					badge: 0
				},
				{
					id: 2,
					type: 'system',
					avatar: '/static/avatar.png',
					title: '系统通知',
					content: '您已下处方订单，将于次日发货，请留...',
					time: '8/30',
					badge: 6
				},
				{
					id: 3,
					type: 'reminder',
					avatar: '/static/avatar.png',
					title: '消息提醒',
					content: '测试手表上时间检测到位佩戴，已进入...',
					time: '2025/8/30',
					badge: 0
				},
				{
					id: 4,
					type: 'health',
					avatar: '/static/avatar.png',
					title: '健康贴士',
					content: '猪油是非常好的动物脂肪，猪油含有丰...',
					time: '2025/1/12',
					badge: 6
				}
			]
		};
	},
	methods: {
		openMessage(item) {
			// 打开消息详情
			uni.showToast({
				title: `打开${item.title}`,
				icon: 'none'
			});
		},
		navigateTo(url) {
			uni.switchTab({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	width: 100%;
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 120upx; // 为底部导航栏留出空间
    position:relative;
    z-index:2;
.bg{
    position:absolute;
    top:0;
	width: 100%;
    z-index:-1;
// height:100%
}
	.top-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16rpx 24upx;

		.title {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.search-box {
		display: flex;
		align-items: center;
		margin: 24upx;
		padding: 14rpx 24upx;
		background: #FFFFFF;
      border-radius: 34rpx 34rpx 34rpx 34rpx;

		.search-icon {
			width: 28upx;
			height: 28upx;
			margin-right: 10upx;
		}

		.search-placeholder {
			font-size: 24upx;
			color: #999999;
		}
	}

	.message-list {
        margin:24rpx;
		background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;

		.message-item {
			display: flex;
			align-items: center;
			padding: 20upx;

			.message-left {
				margin-right: 20upx;

				.avatar-box {
					position: relative;
					width: 90upx;
					height: 90upx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					.badge {
						position: absolute;
						top: -5upx;
						right: -5upx;
						padding:2rpx 10rpx;
						background: linear-gradient( 0deg, #FA432D 0%, #FD7148 100%);
border-radius: 50%;
border: 2rpx solid #FFFFFF;
						color: #ffffff;
						font-size: 22upx;
						font-weight: 500;
						
					}
				}
			}

			.message-right {
				flex: 1;

				.message-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8upx;

					.message-title {
						font-weight: 500;
font-size: 32rpx;
color: #222222;
					}

					.message-time {
						font-size: 24rpx;
color: #9B9B9B;
					}
				}

				.message-content {
					font-size: 26rpx;
color: #9B9B9B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
}
</style>