zhibo/pages_user/user/message.vue

<template>
	<view class="content">
		<view class="msg-list">
			<view class="item" @click="showMsgDetail('系统消息')">
				<view class="img-box">
					<image src="../../static/images/sys_msg.png" mode=""></image>
				</view>
				<view class="info-box">
					<view class="title-box">
						<text class="title">系统消息</text>
						<!-- <view class="msg-num">99+</view> -->
					</view>
					<!-- <view class="desc ellipsis">您的订单已发货</view> -->
					<view class="desc ellipsis">暂无消息</view>
				</view>
			</view>
			<view class="item" @click="showMsgDetail('购药提醒')">
				<view class="img-box">
					<image src="../../static/images/buy_medicine_msg.png" mode=""></image>
				</view>
				<view class="info-box">
					<view class="title-box">
						<text class="title">购药提醒</text>
					<!-- 	<view class="msg-num">1</view> -->
					</view>
					<!-- <view class="desc ellipsis">您有一个药品需要购买</view> -->
					<view class="desc ellipsis">暂无消息</view>
				</view>
			</view>
			<view class="item" @click="showMsgDetail('用药提醒')">
				<view class="img-box">
					<image src="../../static/images/medication_msg.png" mode=""></image>
				</view>
				<view class="info-box">
					<view class="title-box">
						<text class="title">用药提醒</text>
						<!-- <view class="msg-num">1</view> -->
					</view>
					<!-- <view class="desc ellipsis">您有一个药品需要该吃药了</view> -->
					<view class="desc ellipsis">暂无消息</view>
				</view>
			</view>
			<view class="item" @click="showMsgDetail('系统公告')">
				<view class="img-box">
					<image src="../../static/images/sys_msg2.png" mode=""></image>
				</view>
				<view class="info-box">
					<view class="title-box">
						<text class="title">系统公告</text>
						<!-- <view v-show="false" class="msg-num">1</view> -->
					</view>
					<!-- <view class="desc ellipsis">通知公告</view> -->
					<view class="desc ellipsis">暂无消息</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 查看消息详情
			showMsgDetail(title){
				uni.navigateTo({
					url: './msgDetail?title=' + title
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: 20upx;
		.msg-list{
			width: 100%;
			background: #FFFFFF;
			.item{
				box-sizing: border-box;
				width: 100%;
				display: flex;
				padding: 30upx 0 0 40upx;
				&:last-child .info-box{
					border-bottom: none;
				}
				.img-box{
					width: 90upx;
					height: 90upx;
					margin-right: 30upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.info-box{
					width: calc(100% - 120upx);
					padding: 8upx 0 40upx 0;
					border-bottom: 1px solid #EDEEEF;
					.title-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-right: 40upx;
						.title{
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
							line-height: 1;
						}
						.msg-num{
							padding: 0 12upx;
							height: 36upx;
							line-height: 36upx;
							border-radius: 20upx;
							background-color: #FF3636;
							font-size: 24upx;
							font-family: PingFang SC;
							// font-weight: bold;
							color: #FFFFFF;
						}
					}
					.desc{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 20upx;
						line-height: 1;
					}
				}
			}
		}
	}
			
</style>