lineage-app/pages/main/friends/addfriends/addfriendsxq.vue

<template>
	<view class="container">
		<view class="tui-image-box">
			<view class="tui-group-box">
				<tui-image-group :imageList="imageList" width="150rpx" height="150rpx"></tui-image-group>
			</view>
			<view>
				<view>哈尼克尔</view>
				<view style="font-size: 24rpx;color: #8d8d8d;">ID:0000000000</view>
			</view>
		</view>
		<tui-list-view>
		<tui-list-cell :arrow="true" @tap="details">
			<view class="tui-item-box">
				<view class="tui-list-cell_name">个人主页</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :arrow="true">
			<view class="tui-item-box">
				<view class="tui-list-cell_name">绑定手机号</view>
				<view class="tui-left">18678748522</view>
			</view>
		</tui-list-cell>
		</tui-list-view>
		<view style="margin-top: 20rpx;">
			<tui-button plain>添加好友</tui-button>
		</view>
	</view>
</template>

<script>
	import tuiImageGroup from "@/components/thorui/tui-image-group/tui-image-group"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	
export default {
	components: {
		tuiImageGroup,
		tuiListView,
		tuiListCell,
		tuiButton
	},
	data() {
		return {
			imageList:[{
				id:1,
				src:"/static/images/product/2.jpg"
			}],
			imageList2:[{
				id:1,
				src:"/static/images/product/1.jpg"
			},{
				id:2,
				src:"/static/images/product/2.jpg"
			},{
				id:3,
				src:"/static/images/product/3.jpg"
			},{
				id:4,
				src:"/static/images/product/4.jpg"
			},{
				id:5,
				src:"/static/images/product/5.jpg"
			}],
			imageList3:[]
		};
	},
	onLoad() {
		this.imageList3=[...this.imageList2,...this.imageList2,...this.imageList2,...this.imageList2]
	},
	methods: {
		details: function() {
			uni.navigateTo({
				url: '../details'
			});
		},
	}
};
</script>

<style>
	page {
		background-color: #fff;
	}
.container {
	padding: 20rpx;
	box-sizing: border-box;
	width: 100%;
}

.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	.tui-left {
		margin-left: 34rpx;
		font-size: 26rpx;
		color: #999;
	}

.header {
	padding: 80rpx 90rpx 60rpx 90rpx;
	box-sizing: border-box;
}

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.sub-title {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-top: 18rpx;
}
.tui-title {
	width: 100%;
	padding: 40rpx 30rpx 30rpx;
	box-sizing: border-box;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tui-image-box{
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.tui-group-box{
	padding-right: 30rpx;
}
</style>