lcoco/pages/msg/index.vue

<template>
	<view class="msg-box">
		<view class="nav-box">
			<view class="nav-left sys-background-F2F2F2 sys-radius-200">
				<image class="nav-left-img" src="@/static/img/msg/yl.png" mode=""></image>
				<view class="nav-left-name sys-size-28 sys-weight-600 sys-color-black-3">
					有料
				</view>
			</view>
			<view class="nav-text sys-size-36 sys-weight-600 sys-color-black-3">
				消息
			</view>
			<image class="nav-right" src="@/static/img/msg/tx.png" mode=""></image>
		</view>
		<view class="msg-content">
			<view class="xpy-title sys-size-32 sys-weight-600 sys-color-black">
				新朋友
			</view>
			<view class="xpy-list">
				<view class="xpy-list-left">
					<scroll-view class="scroll-view-x" scroll-x="true">
						<view class="xpy-list-left-item sys-radius-12" v-for="(item,index) in 4">

						</view>
					</scroll-view>
				</view>
				<view class="xpy-list-right sys-background-F2F2F2 sys-radius-12">
					<image class="xpy-list-right-img" src="@/static/img/msg/qbpd.png" mode=""></image>
					<view class="sys-size-28 sys-color-gray-9">
						全部配对
					</view>
				</view>
			</view>
			<view class="xx-box">
				<view class="sys-size-32 sys-weight-600 sys-color-black">
					消息
				</view>
				<image class="xx-box-img" src="@/static/img/msg/sx.png" mode=""></image>
			</view>
			<view class="msg-list">
				<image src="../../static/img/my/bg.png" class="msg-list-img sys-radius-round" mode=""></image>
				<view class="msg-list-item">
					<view class="msg-list-item-one">
						<view class="sys-size-32 sys-weight-600 sys-color-black">
							系统消息
						</view>
						<view class="sys-size-24 sys-color-gray-9">
							11.50
						</view>
					</view>
					<view class="msg-list-item-two sys-size-28 sys-color-gray-9">
						刚刚左滑掉喜欢你的人，速去查看~
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.msg-box {
		width: 100%;
		height: auto;

		.nav-box {
			padding: 16rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.nav-left {
				display: flex;
				align-items: center;
				padding: 6rpx 24rpx;

				.nav-left-img {
					width: 40rpx;
					height: 40rpx;
					margin: 0 8rpx 0 0;
				}
			}

			.nav-text {
				position: absolute;
				left: calc((100% - 72rpx) / 2);
				top: 22rpx;
			}

			.nav-right {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.msg-content {
			padding: 40rpx 32rpx;
			box-sizing: border-box;

			.xpy-title {
				margin: 0 0 18rpx 0;
			}

			.xpy-list {
				display: flex;
				align-items: center;
				margin: 0 0 60rpx 0;

				.xpy-list-left {
					display: flex;
					align-items: center;
					max-width: calc(100% - 32rpx);
					overflow: hidden;

					.scroll-view-x {
						white-space: nowrap;
						width: 100%;

						.xpy-list-left-item {
							display: inline-block;
							width: 160rpx;
							height: 212rpx;
							margin: 0 16rpx 0 0;
							padding: 0 0 8rpx 8rpx;
							background: rgba(0, 0, 0, .3);
						}
					}
				}

				.xpy-list-right {
					width: 32rpx;
					padding: 16rpx 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 0 0 0 12rpx;
					flex-shrink: 0;

					.xpy-list-right-img {
						width: 32rpx;
						height: 32rpx;
						margin: 0 0 14rpx 0;
					}
				}
			}

			.xx-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 0 32rpx 0;

				.xx-box-img {
					width: 36rpx;
					height: 26rpx;
				}
			}

			.msg-list {
				display: flex;
				align-items: center;

				.msg-list-img {
					width: 112rpx;
					height: 112rpx;
					margin: 0 20rpx 0 0;
					flex-shrink: 0;
				}

				.msg-list-item {
					width: 100%;

					.msg-list-item-one {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 0 0 4rpx 0;
					}

					.msg-list-item-two {}
				}
			}
		}
	}
</style>