<template>
	<view class="container">
		<view class="list">
			<view class="item u-flex u-col-center u-row-between"  @click="$pageTo('/pages/mine/msg/listmsg')">
				<view class="l u-flex u-col-center">
					<view class="img">
						<image src="@/static/images/mine/msg1.png" mode="aspectFill"></image>
					</view>
					<view class="con">
						<view class="t">
							公告通知
						</view>
						<view class="n">
							最新消息详情xxxx
						</view>
					</view>
				</view>
				<view class="r">
					<view class="time">
						09:00
					</view>
					<view class="number">
						<text>20</text>
					</view>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between"  @click="$pageTo('/pages/mine/msg/listmsg')">
				<view class="l u-flex u-col-center">
					<view class="img">
						<image src="@/static/images/mine/msg2.png" mode="aspectFill"></image>
					</view>
					<view class="con">
						<view class="t">
							系统消息
						</view>
						<view class="n">
							最新消息详情xxxx
						</view>
					</view>
				</view>
				<view class="r">
					<view class="time">
						09:00
					</view>
					<view class="number">
						<text>20</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	$color: #FCAA30;

	.container {
		padding: 30rpx;
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;

		.list {
			width:100%;
			.item {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;

				.l {
					flex: 1;
					width: 1rpx;

					.img {
						width: 90rpx;
						height: 90rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.con {
						margin-left: 20rpx;
						flex: 1;
						width: 1rpx;

						.t {
							font-size: 32rpx;
							font-weight: bold;
							color: #0D0D0D;
						}

						.n {
							margin-top: 10rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}

				.r {
					.time {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}

					.number {
						margin-top: 10rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;

						text {
							height: 30rpx;
							line-height: 30rpx;
							padding: 0 20rpx;
							background: #FD744E;
							border-radius: 15rpx;
							color: #fff;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
</style>