newEdition/pages/mine/messageList.vue

<template>
	<view class="message_list">
		<u-tabs :list="list" :show-bar="false" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="listMain">
			<view class="systemList" v-if="current==0">
				<view class="sysItem">
					<image class="headpic" src="../../static/images/function1.png"></image>
					<view class="right">
						<view class="headInfo">
							<view class="title">优秀案例</view>
							<view class="info">恭喜你，你的接待记录被设为了优秀案例！</view>
						</view>
						<view class="content">
							我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充
						</view>
						<view class="time">
							2021-01-12  12：23：01
						</view>
					</view>
				</view>
				<view class="sysItem">
					<image class="headpic" src="../../static/images/function1.png"></image>
					<view class="right">
						<view class="headInfo">
							<view class="title">优秀案例</view>
							<view class="info">赞了你的接待</view>
						</view>
						<view class="content">
							我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充
						</view>
						<view class="time">
							2021-01-12  12：23：01
						</view>
					</view>
				</view>
				<view class="sysItem">
					<image class="headpic" src="../../static/images/function1.png"></image>
					<view class="right">
						<view class="headInfo">
							<view class="title">优秀案例</view>
							<view class="info">评价你：非常好，品牌价值观还需要补充</view>
						</view>
						<view class="content">
							我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充
						</view>
						<view class="time">
							2021-01-12  12：23：01
						</view>
					</view>
				</view>
				<view class="sysItem">
					<image class="headpic" src="../../static/images/function1.png"></image>
					<view class="right">
						<view class="headInfo">
							<view class="title">优秀案例</view>
							<view class="info">回复你：非常好，品牌价值观还需要补充</view>
						</view>
						<view class="content">
							我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充
						</view>
						<view class="time">
							2021-01-12  12：23：01
						</view>
					</view>
				</view>
				<view class="sysItem">
					<image class="headpic" src="../../static/images/function1.png"></image>
					<view class="right">
						<view class="headInfo">
							<view class="title">优秀案例</view>
							<view class="info">赞了你的接待</view>
						</view>
						<view class="content">
							我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充
						</view>
						<view class="time">
							2021-01-12  12：23：01
						</view>
					</view>
				</view>
				<view class="sysItem">
					<image class="headpic" src="../../static/images/function1.png"></image>
					<view class="right">
						<view class="headInfo">
							<view class="title">优秀案例</view>
							<view class="info">评价你：非常好，品牌价值观还需要补充</view>
						</view>
						<view class="content">
							我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充我的评论：非常好，品牌价值观还需要补充
						</view>
						<view class="time">
							2021-01-12  12：23：01
						</view>
					</view>
				</view>
			</view>
			<view class="upgradeList" v-if="current==1">
				<view class="upgradeItem">
					<view class="notRead">
						<!-- <view class="red"></view> -->
					</view>
					<view class="right">
						<view class="title">（2022-01-22）升级公告</view>
						<view class="time">2021-01-12  12：23：01</view>
					</view>
				</view>
				<view class="upgradeItem">
					<view class="notRead">
						<view class="red"></view>
					</view>
					<view class="right">
						<view class="title">（2022-01-11）升级公告</view>
						<view class="time">2021-01-12  12：23：01</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '系统消息'
				},{
					name: `升级公告`,
					count:20,
				}],
				current: 0
			};
		},
		methods:{
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.message_list{
		.u-tab-item{
			border: 0.5rpx solid #dedede;
		}
		.listMain{
			margin-top: 20rpx;
			.systemList{
				.sysItem{
					padding: 20rpx;
					border: 1rpx solid #ccc;
					display: flex;
					margin: 16rpx 0;
					.headpic{
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
						margin-right: 30rpx;
					}
					.right{
						.headInfo{
							.title{
								font-size: 32rpx;
								font-weight: bold;
								margin-bottom: 8rpx;
							}
						}
						.content{
							width: 600rpx;
							background: #e6e6e6;
							padding: 10rpx;
							margin: 14rpx 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.time{
							color: #6f6f6f;
							font-size: 24rpx;
						}
					}
					
				}
			}
			.upgradeList{
				.upgradeItem{
					padding: 20rpx;
					border: 1rpx solid #ccc;
					margin: 16rpx 0;
					display: flex;
					.notRead{
						width: 14rpx;
						height: 14rpx;
						margin-right: 20rpx;
						margin-top: 16rpx;
						.red{
							background: #FF0000;
							width: 100%;
							height: 100%;
							border-radius: 100%;
						}
					}
					.right{
						.title{
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 8rpx;
						}
						.time{
							color: #6f6f6f;
							font-size: 24rpx;
						}
					}
					
				}
			}	
		}
	}

</style>