lcoco/pages/msg/model/address-book.vue

<template>
	<view class="address-book">
		<EnNav title="通讯录" title-color="#333333" :rightShow="true" :rightType="2">
			<view slot="right">
				<view class="nav-right sys-size-28 sys-weight-600 sys-color-black">
					<view>
						距离
					</view>
					<image class="jl-img" src="@/static/img/msg/jl.png" mode=""></image>
				</view>
			</view>
		</EnNav>
		<view class="content">
			<view class="list-box">
				<image class="item-img sys-radius-round" src="../../../static/img/login/2.jpg" mode=""></image>
				<view class="item-right">
					<view class="item-right-one sys-size-32 sys-weight-600 sys-color-black">
						古驰古驰古驰古驰古驰古驰...
					</view>
					<view class="item-right-two">
						<view class="sys-size-28 sys-color-gray-9">
							和他配于4月16日
						</view>
						<view class="sys-size-28 sys-color-gray-9">
							1.01km
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">

		</view>
	</view>
</template>

<script>
	import {
		messageGetContacts
	} from "@/api/message.js"
	import EnNav from "@/components/en-utils/en-nav/en-nav";
	export default {
		components: {
			EnNav
		},
		data() {
			return {
				listData: [],
				page: 1,
			};
		},
		mounted() {
			this.messageGetContacts()
		},
		methods: {
			messageGetContacts() {
				messageGetContacts({
					'pageNo': this.page,
					'pageSize': '',
				}).then((res) => {
					console.log(res);
				})
			},
		},
	}
</script>
<style scoped lang="scss">
	.address-book {
		.nav-right {
			display: flex;
			align-items: center;

			.jl-img {
				width: 13rpx;
				height: 8rpx;
				margin: 0 0 0 8rpx;
			}
		}

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

			.list-box {
				display: flex;
				align-items: center;
				margin: 0 0 40rpx 0;

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

				.item-right {
					width: 100%;

					.item-right-one {
						margin: 0 0 14rpx 0;
						max-width: 400rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}

					.item-right-two {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>